1344 files changed, 199664 insertions, 106703 deletions

diff --git a/Source/WebInspectorUI/.eslintignore b/Source/WebInspectorUI/.eslintignore
new file mode 100644
index 000000000..51eba6fcc
--- /dev/null
+++ b/Source/WebInspectorUI/.eslintignore
@@ -0,0 +1,3 @@
+Localizations
+Tools
+UserInterface/External
diff --git a/Source/WebInspectorUI/.eslintrc b/Source/WebInspectorUI/.eslintrc
new file mode 100644
index 000000000..96fc399cb
--- /dev/null
+++ b/Source/WebInspectorUI/.eslintrc
@@ -0,0 +1,169 @@
+/*
+ * 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.
+ */
+
+{
+    "extends": "eslint:recommended",
+    "env": {
+        "browser": true,
+        "es6": true,
+        "worker": true,
+    },
+    "globals": {
+        // Agents
+        "ApplicationCacheAgent": true,
+        "CSSAgent": true,
+        "ConsoleAgent": true,
+        "DOMAgent": true,
+        "DOMDebuggerAgent": true,
+        "DOMStorageAgent": true,
+        "DatabaseAgent": true,
+        "DebuggerAgent": true,
+        "HeapAgent",
+        "IndexedDBAgent": true,
+        "InspectorAgent": true,
+        "LayerTreeAgent": true,
+        "MemoryAgent": true,
+        "NetworkAgent": true,
+        "PageAgent": true,
+        "ReplayAgent": true,
+        "RuntimeAgent": true,
+        "ScriptProfilerAgent": true,
+        "TimelineAgent": true,
+        "WorkerAgent": true,
+
+        // WebInspector
+        "AsyncTestSuite": true,
+        "Formatter": true,
+        "FormatterContentBuilder": true,
+        "FrontendTestHarness": true,
+        "InspectorBackend": true,
+        "InspectorBackendClass": true,
+        "InspectorFrontendAPI": true,
+        "InspectorFrontendHost": true,
+        "InspectorProtocol": true,
+        "InspectorTest": true,
+        "LinkedList": true,
+        "ListMultimap": true,
+        "ProtocolTest": true,
+        "ProtocolTestHarness": true,
+        "SyncTestSuite": true,
+        "TestHarness": true,
+        "TestSuite": true,
+        "WebInspector": true,
+
+        // Externals
+        "CodeMirror": true,
+        "esprima": true,
+
+        // DOM
+        "CSSPrimitiveValue": true,
+        "Exception": true,
+        "SQLException": true,
+        "WebKitPoint": true,
+
+        // Utilities
+        "figureDash": true,
+        "ellipsis": true,
+        "emDash": true,
+        "enDash": true,
+        "clamp": true,
+        "isEnterKey": true,
+        "isEmptyObject": true,
+        "insertionIndexForObjectInListSortedByFunction": true,
+        "isFunctionStringNativeCode": true,
+        "parseMIMEType": true,
+        "doubleQuotedString": true,
+        "isWebKitInternalScript": true,
+        "isWebInspectorInternalScript": true,
+        "isWebInspectorConsoleEvaluationScript": true,
+        "appendWebInspectorSourceURL": true,
+        "appendWebInspectorConsoleEvaluationSourceURL": true,
+        "timestamp": true,
+        "handlePromiseException": true,
+        "insertObjectIntoSortedArray": true,
+
+        // Image Utilities
+        "platformImagePath": true,
+        "wrappedSVGDocument": true,
+        "createSVGElement": true,
+        "useSVGSymbol": true,
+
+        // URL Utilities
+        "absoluteURL": true,
+        "parseQueryString": true,
+        "parseURL": true,
+        "parseSecurityOrigin": true,
+        "removeURLFragment": true,
+        "decodeBase64ToBlob": true,
+        "relativePath": true,
+        "parseDataURL": true,
+        "parseLocationQueryParameters": true,
+    },
+    "rules": {
+        "array-bracket-spacing": [2, "never"],
+        "block-spacing": [2, "always"],
+        "comma-dangle": [2, "only-multiline"],
+        "comma-spacing": [2, {"before": false, "after": true}],
+        "comma-style": [2, "last"],
+        "consistent-return": 2,
+        "curly": 0,
+        "dot-notation": 0,
+        "eol-last": 2,
+        "eqeqeq": 2,
+        "func-call-spacing": [2, "never"],
+        "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
+        "keyword-spacing": [2, {"before": true, "after": true}],
+        "new-cap": 0,
+        "new-parens": 0,
+        "no-console": 0,
+        "no-constant-condition": 0,
+        "no-extra-bind": 2,
+        "no-extra-parens": [2, "all", {"nestedBinaryExpressions": false}],
+        "no-extra-semi": 2,
+        "no-global-assign": 2,
+        "no-inner-declarations": 0,
+        "no-multi-spaces": 2,
+        "no-new": 0,
+        "no-proto": 0,
+        "no-redeclare": 0,
+        "no-return-assign": 2,
+        "no-self-compare": 2,
+        "no-shadow": 0,
+        "no-trailing-spaces": 2,
+        "no-undef": 2,
+        "no-underscore-dangle": 0,
+        "no-unused-expressions": 2,
+        "no-unused-vars": [2, {"vars": "all", "args": "none"}],
+        "no-use-before-define": 0,
+        "object-curly-spacing": [2, "never"],
+        "quotes": [2, "double"],
+        "semi": 2,
+        "semi-spacing": [2, {"before": false, "after": true}],
+        "space-infix-ops": 2,
+        "spaced-comment": [2, "always"],
+        "strict": 0,
+        "valid-typeof": 2,
+    }
+}
diff --git a/Source/WebInspectorUI/GNUmakefile.am b/Source/WebInspectorUI/GNUmakefile.am
deleted file mode 100644
index 5cc50b45a..000000000
--- a/Source/WebInspectorUI/GNUmakefile.am
+++ /dev/null
@@ -1,47 +0,0 @@
-inspector_files = \
-	"$(WebInspectorUI)/Localizations/en.lproj/localizedStrings.js" \
-	"$(WebInspectorUI)/UserInterface/*.html" \
-	"$(WebInspectorUI)/UserInterface/*.js" \
-	"$(WebInspectorUI)/UserInterface/*.css" \
-	"$(WebInspectorUI)/UserInterface/Images/gtk/*.png" \
-	"$(WebInspectorUI)/UserInterface/Images/gtk/*.svg" \
-	"$(WebInspectorUI)/UserInterface/External/CodeMirror/*.js" \
-	"$(WebInspectorUI)/UserInterface/External/CodeMirror/*.css"
-
-inspector_files_dependencies = \
-	$(WebInspectorUI)/Localizations/en.lproj/localizedStrings.js \
-	$(shell ls $(WebInspectorUI)/UserInterface/*.html) \
-	$(shell ls $(WebInspectorUI)/UserInterface/*.js) \
-	$(shell ls $(WebInspectorUI)/UserInterface/*.css) \
-	$(shell ls $(WebInspectorUI)/UserInterface/Images/gtk/*.png) \
-	$(shell ls $(WebInspectorUI)/UserInterface/Images/gtk/*.svg) \
-	$(shell ls $(WebInspectorUI)/UserInterface/External/CodeMirror/*.js) \
-	$(shell ls $(WebInspectorUI)/UserInterface/External/CodeMirror/*.css)
-
-${GENSOURCES_WEBINSPECTOR_UI}/GResourceBundle.xml: GNUmakefile \
-	$(inspector_files_dependencies) \
-	$(srcdir)/Tools/gtk/generate-inspector-gresource-manifest.py
-	$(AM_V_GEN)
-	$(AM_V_at)mkdir -p ${GENSOURCES_WEBINSPECTOR_UI}
-	$(AM_V_at)$(PYTHON) $(srcdir)/Tools/gtk/generate-inspector-gresource-manifest.py --output $@ $(inspector_files)
-
-${GENSOURCES_WEBINSPECTOR_UI}/GResourceBundle.c: DerivedSources/WebInspectorUI/GResourceBundle.xml
-	$(AM_V_GEN)
-	$(AM_V_at)glib-compile-resources --generate --sourcedir=$(WebInspectorUI) \
-		--target=${GENSOURCES_WEBINSPECTOR_UI}/GResourceBundle.c ${GENSOURCES_WEBINSPECTOR_UI}/GResourceBundle.xml
-
-BUILT_SOURCES += \
-	DerivedSources/WebInspectorUI/GResourceBundle.xml
-
-webcore_built_sources += \
-	DerivedSources/WebInspectorUI/GResourceBundle.c
-
-EXTRA_DIST += \
-	$(WebInspectorUI)/Localizations/en.lproj/localizedStrings.js \
-	$(shell ls $(WebInspectorUI)/UserInterface/*.html) \
-	$(shell ls $(WebInspectorUI)/UserInterface/*.js) \
-	$(shell ls $(WebInspectorUI)/UserInterface/*.css) \
-	$(shell ls $(WebInspectorUI)/UserInterface/Images/gtk/*.png) \
-	$(shell ls $(WebInspectorUI)/UserInterface/Images/gtk/*.svg) \
-	$(shell ls $(WebInspectorUI)/UserInterface/External/CodeMirror/*.js) \
-	$(shell ls $(WebInspectorUI)/UserInterface/External/CodeMirror/*.css)
diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
index 5adf01ca0..4eec4ebe2 100644
--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
diff --git a/Source/WebInspectorUI/Scripts/combine-resources.pl b/Source/WebInspectorUI/Scripts/combine-resources.pl
new file mode 100755
index 000000000..6d2cf4404
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/combine-resources.pl
@@ -0,0 +1,116 @@
+#!/usr/bin/perl -w
+
+# 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.
+
+use strict;
+use Getopt::Long;
+use File::Basename;
+use File::Path;
+
+our $inputDirectory;
+our $outputDirectory;
+our $outputScriptName;
+our $outputStylesheetName;
+our $derivedSourcesDirectory;
+our $htmlDirectory;
+our $htmlFile;
+our $strip;
+
+GetOptions('output-dir=s' => \$outputDirectory,
+           'output-script-name=s' => \$outputScriptName,
+           'output-style-name=s' => \$outputStylesheetName,
+           'derived-sources-dir=s' => \$derivedSourcesDirectory,
+           'input-dir=s' => \$inputDirectory,
+           'input-html-dir=s' => \$htmlDirectory,
+           'input-html=s' => \$htmlFile,
+           'strip' => \$strip);
+
+unless (defined $htmlFile and defined $derivedSourcesDirectory and defined $outputDirectory and (defined $strip or defined $outputScriptName or defined $outputStylesheetName)) {
+    print "Usage: $0 --input-html <path> --derived-sources-dir <path> --output-dir <path> [--output-script-name <name>] [--output-style-name <name>] [--strip]\n";
+    exit;
+}
+
+$htmlDirectory = dirname($htmlFile) unless $htmlDirectory;
+
+our $htmlContents;
+
+{
+    local $/;
+    open HTML, $htmlFile or die;
+    $htmlContents = <HTML>;
+    close HTML;
+}
+
+$htmlContents =~ m/<head>(.*)<\/head>/si;
+our $headContents = $1;
+
+mkpath $outputDirectory;
+
+sub concatenateFiles($$$)
+{
+    my $filename = shift;
+    my $tagExpression = shift;
+    my $concatenatedTag = shift;
+    my $fileCount = 0;
+
+    open OUT, ">", "$outputDirectory/$filename" or die "Can't open $outputDirectory/$filename: $!";
+
+    while ($headContents =~ m/$tagExpression/gi) {
+        local $/;
+        open IN, "$htmlDirectory/$1" or open IN, "$derivedSourcesDirectory/$1" or die "Can't open $htmlDirectory/$1: $!";
+        print OUT "\n" if $fileCount++;
+        print OUT "/* $1 */\n\n";
+        print OUT <IN>;
+        close IN;
+    }
+
+    close OUT;
+
+    # Don't use \s so we can control the newlines we consume.
+    my $replacementExpression = "([\t ]*)" . $tagExpression . "[\t ]*\n+";
+
+    if (defined $strip) {
+        # Just strip all occurrences of the pattern.
+        $headContents =~ s/$replacementExpression//gi;
+    } else {
+        # Replace the first occurrence with a token so we can inject the concatenated tag in the same place
+        # as the first file that got consolidated. This makes sure we preserve some order if there are other
+        # items in the head that we didn't consolidate.
+        $headContents =~ s/$replacementExpression/$1%CONCATENATED%\n/i;
+        $headContents =~ s/$replacementExpression//gi;
+        $headContents =~ s/%CONCATENATED%/$concatenatedTag/;
+    }
+}
+
+my $inputDirectoryPattern = "(?!External\/)(?!Workers\/)[^\"]*";
+$inputDirectoryPattern = $inputDirectory . "\/[^\"]*" if $inputDirectory;
+
+concatenateFiles($outputStylesheetName, "<link rel=\"stylesheet\" href=\"($inputDirectoryPattern)\">", "<link rel=\"stylesheet\" href=\"$outputStylesheetName\">") if defined $outputStylesheetName;
+concatenateFiles($outputScriptName, "<script src=\"($inputDirectoryPattern)\"><\/script>", "<script src=\"$outputScriptName\"></script>") if defined $outputScriptName;
+
+$htmlContents =~ s/<head>.*<\/head>/<head>$headContents<\/head>/si;
+
+open HTML, ">", "$outputDirectory/" . basename($htmlFile) or die "Can't open $outputDirectory/" . basename($htmlFile) . ": $!";
+print HTML $htmlContents;
+close HTML;
diff --git a/Source/WebInspectorUI/Scripts/copy-user-interface-resources-dryrun.rb b/Source/WebInspectorUI/Scripts/copy-user-interface-resources-dryrun.rb
new file mode 100755
index 000000000..22f9cb60e
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/copy-user-interface-resources-dryrun.rb
@@ -0,0 +1,68 @@
+#!/usr/bin/ruby
+
+# 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.
+
+require 'fileutils'
+require 'tmpdir'
+
+if ARGV.size != 1 || ARGV[0].include?("-h")
+  puts "usage: #{File.basename $0} <output-directory>"
+  exit 1
+end
+
+JAVASCRIPTCORE_PATH = File.expand_path File.join(File.dirname(__FILE__), "..", "..", "JavaScriptCore")
+WEB_INSPECTOR_PATH = File.expand_path File.join(File.dirname(__FILE__), "..")
+COPY_USER_INTERFACE_RESOURCES_PATH = File.join WEB_INSPECTOR_PATH, "Scripts", "copy-user-interface-resources.pl"
+
+# This script simulates processing user interface resources located in SRCROOT.
+# It places processed files in the specified output directory. This is most similar
+# to an isolated OBJROOT since it includes DerivedSources. It doesn't place files
+# into their DSTROOT locations, such as inside of WebInspectorUI.framework.
+$output_directory = File.expand_path ARGV[0]
+$start_directory = FileUtils.pwd
+
+Dir.mktmpdir do |tmpdir|
+
+  # Create the output directory if needed.
+  FileUtils.mkdir_p $output_directory
+  
+  # Create empty derived sources expected to exist.
+  FileUtils.touch(File.join(tmpdir, 'InspectorBackendCommands.js'))
+  
+  # Setup the environment and run.
+  ENV["DERIVED_SOURCES_DIR"] = tmpdir
+  # Stage some scripts expected to be in various framework PrivateHeaders.
+  ENV["JAVASCRIPTCORE_PRIVATE_HEADERS_DIR"] = tmpdir
+  FileUtils.cp(File.join(JAVASCRIPTCORE_PATH, "Scripts", "cssmin.py"), tmpdir)
+  FileUtils.cp(File.join(JAVASCRIPTCORE_PATH, "Scripts", "jsmin.py"), tmpdir)
+  ENV["SRCROOT"] = WEB_INSPECTOR_PATH
+  ENV["TARGET_BUILD_DIR"] = $output_directory
+  ENV["UNLOCALIZED_RESOURCES_FOLDER_PATH"] = ""
+  ENV["COMBINE_INSPECTOR_RESOURCES"] = "YES"
+  ENV["COMBINE_TEST_RESOURCES"] = "YES"
+  ENV["FORCE_TOOL_INSTALL"] = "NO"
+  FileUtils.cd $start_directory
+  system(COPY_USER_INTERFACE_RESOURCES_PATH) or raise "Failed to process user interface resources."
+
+end
diff --git a/Source/WebInspectorUI/Scripts/copy-user-interface-resources.pl b/Source/WebInspectorUI/Scripts/copy-user-interface-resources.pl
new file mode 100755
index 000000000..b632a5aa8
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/copy-user-interface-resources.pl
@@ -0,0 +1,347 @@
+#!/usr/bin/perl -w
+
+# 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.
+
+use English;
+use File::Copy qw(copy);
+use File::Path qw(make_path remove_tree);
+use File::Spec;
+
+my $useDirCopy = 0;
+
+# Not all systems (e.g., OS X) include File::Copy::Recursive. Only
+# use it if we have it installed.
+eval "use File::Copy::Recursive";
+unless ($@) {
+    $useDirCopy = 1;
+    File::Copy::Recursive->import();
+}
+
+sub ditto($$)
+{
+    my ($source, $destination) = @_;
+
+    if ($useDirCopy) {
+        File::Copy::Recursive::dircopy($source, $destination) or die "Unable to copy directory $source to $destination: $!";
+    } elsif ($^O eq 'darwin') {
+        system('ditto', $source, $destination);
+    } else {
+        die "Please install the PEP module File::Copy::Recursive";
+    }
+}
+
+sub seedFile($$)
+{
+    my ($targetFile, $seedText) = @_;
+
+    if (open(TARGET_FILE, '>', $targetFile)) {
+        print TARGET_FILE $seedText;
+        close(TARGET_FILE);
+    }
+}
+
+sub appendFile($$)
+{
+    my ($targetFile, $srcFile) = @_;
+
+    open(SRC_FILE, '<', $srcFile) or die "Unable to open $srcFile: $!";
+    my @srcText = <SRC_FILE>;
+    close(SRC_FILE);
+    open(TARGET_FILE, '>>', $targetFile) or die "Unable to open $targetFile: $!";
+    print TARGET_FILE @srcText;
+    close(TARGET_FILE);
+}
+
+sub readLicenseFile($)
+{
+    my ($licenseFilePath) = @_;
+
+    open(LICENSE_FILE, '<', $licenseFilePath) or die "Unable to open $licenseFilePath: $!";
+
+    my $license = "/*\n";
+    $license .= ' * ' . $_ while <LICENSE_FILE>;
+    $license .= " */\n";
+
+    close(LICENSE_FILE);
+
+    return $license;
+}
+
+my $inspectorLicense = <<'EOF';
+/*
+ * Copyright (C) 2007-2016 Apple Inc. All rights reserved.
+ * Copyright (C) 2008 Matt Lilek. All rights reserved.
+ * Copyright (C) 2008-2009 Anthony Ricaud <rik@webkit.org>
+ * Copyright (C) 2009-2010 Joseph Pecoraro. All rights reserved.
+ * Copyright (C) 2009-2011 Google Inc. All rights reserved.
+ * Copyright (C) 2009 280 North Inc. All Rights Reserved.
+ * Copyright (C) 2010 Nikita Vasilyev. All rights reserved.
+ * Copyright (C) 2011 Brian Grinstead All rights reserved.
+ * Copyright (C) 2013 Matt Holden <jftholden@yahoo.com>
+ * Copyright (C) 2013 Samsung Electronics. All rights reserved.
+ * Copyright (C) 2013 Seokju Kwon (seokju.kwon@gmail.com)
+ * Copyright (C) 2013 Adobe Systems Inc. All rights reserved.
+ * Copyright (C) 2013-2015 University of Washington. All rights reserved.
+ * Copyright (C) 2014-2015 Saam Barati <saambarati1@gmail.com>
+ * Copyright (C) 2014 Antoine Quint
+ * Copyright (C) 2015 Tobias Reiss <tobi+webkit@basecode.de>
+ * Copyright (C) 2015-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.
+ */
+EOF
+
+my $perl = $^X;
+my $python = ($OSNAME =~ /cygwin/) ? "/usr/bin/python" : "python";
+my $derivedSourcesDir = $ENV{'DERIVED_SOURCES_DIR'};
+my $scriptsRoot = File::Spec->catdir($ENV{'SRCROOT'}, 'Scripts');
+my $sharedScriptsRoot = File::Spec->catdir($ENV{'JAVASCRIPTCORE_PRIVATE_HEADERS_DIR'});
+my $uiRoot = File::Spec->catdir($ENV{'SRCROOT'}, 'UserInterface');
+my $targetResourcePath = File::Spec->catdir($ENV{'TARGET_BUILD_DIR'}, $ENV{'UNLOCALIZED_RESOURCES_FOLDER_PATH'});
+my $protocolDir = File::Spec->catdir($targetResourcePath, 'Protocol');
+my $workersDir = File::Spec->catdir($targetResourcePath, 'Workers');
+my $codeMirrorPath = File::Spec->catdir($uiRoot, 'External', 'CodeMirror');
+my $esprimaPath = File::Spec->catdir($uiRoot, 'External', 'Esprima');
+my $eslintPath = File::Spec->catdir($uiRoot, 'External', 'ESLint');
+
+my $codeMirrorLicense = readLicenseFile(File::Spec->catfile($codeMirrorPath, 'LICENSE'));
+my $esprimaLicense = readLicenseFile(File::Spec->catfile($esprimaPath, 'LICENSE'));
+my $eslintLicense = readLicenseFile(File::Spec->catfile($eslintPath, 'LICENSE'));
+make_path($protocolDir, $targetResourcePath);
+
+# Copy over dynamically loaded files from other frameworks, even if we aren't combining resources.
+copy(File::Spec->catfile($ENV{'JAVASCRIPTCORE_PRIVATE_HEADERS_DIR'}, 'InspectorBackendCommands.js'), File::Spec->catfile($protocolDir, 'InspectorBackendCommands.js')) or die "Copy of InspectorBackendCommands.js failed: $!";
+
+my $forceToolInstall = defined $ENV{'FORCE_TOOL_INSTALL'} && ($ENV{'FORCE_TOOL_INSTALL'} eq 'YES');
+my $shouldCombineMain = defined $ENV{'COMBINE_INSPECTOR_RESOURCES'} && ($ENV{'COMBINE_INSPECTOR_RESOURCES'} eq 'YES');
+my $shouldCombineTest = defined $ENV{'COMBINE_TEST_RESOURCES'} && ($ENV{'COMBINE_TEST_RESOURCES'} eq 'YES');
+my $combineResourcesCmd = File::Spec->catfile($scriptsRoot, 'combine-resources.pl');
+
+if ($forceToolInstall) {
+    # Copy all files over individually to ensure we have Test.html / Test.js and files included from Test.html.
+    # We may then proceed to include combined & optimized resources which will output mostly to different paths
+    # but overwrite Main.html / Main.js with optimized versions.
+    ditto($uiRoot, $targetResourcePath);
+
+    # Also force combining test resources for tool installs.
+    $shouldCombineTest = 1;
+}
+
+if ($shouldCombineMain) {
+    # Remove Debug JavaScript and CSS files in Production builds.
+    system($perl, $combineResourcesCmd,
+        '--input-dir', 'Debug',
+        '--input-html', File::Spec->catfile($uiRoot, 'Main.html'),
+        '--input-html-dir', $uiRoot,
+        '--derived-sources-dir', $derivedSourcesDir,
+        '--output-dir', $derivedSourcesDir,
+        '--output-script-name', 'Debug.js',
+        '--output-style-name', 'Debug.css',
+        '--strip');
+
+    # Combine the JavaScript and CSS files in Production builds into single files (Main.js and Main.css).
+    my $derivedSourcesMainHTML = File::Spec->catfile($derivedSourcesDir, 'Main.html');
+    system($perl, $combineResourcesCmd,
+       '--input-html', $derivedSourcesMainHTML,
+       '--input-html-dir', $uiRoot,
+       '--derived-sources-dir', $derivedSourcesDir,
+       '--output-dir', $derivedSourcesDir,
+       '--output-script-name', 'Main.js',
+       '--output-style-name', 'Main.css');
+
+    # Combine the CodeMirror JavaScript and CSS files in Production builds into single files (CodeMirror.js and CodeMirror.css).
+    system($perl, $combineResourcesCmd,
+       '--input-dir', 'External/CodeMirror',
+       '--input-html', $derivedSourcesMainHTML,
+       '--input-html-dir', $uiRoot,
+       '--derived-sources-dir', $derivedSourcesDir,
+       '--output-dir', $derivedSourcesDir,
+       '--output-script-name', 'CodeMirror.js',
+       '--output-style-name', 'CodeMirror.css');
+
+    # Combine the Esprima JavaScript files in Production builds into a single file (Esprima.js).
+    system($perl, $combineResourcesCmd,
+       '--input-dir', 'External/Esprima',
+       '--input-html', $derivedSourcesMainHTML,
+       '--input-html-dir', $uiRoot,
+       '--derived-sources-dir', $derivedSourcesDir,
+       '--output-dir', $derivedSourcesDir,
+       '--output-script-name', 'Esprima.js');
+
+    # Combine the ESLint JavaScript files in Production builds into a single file (ESLint.js).
+    system($perl, $combineResourcesCmd,
+       '--input-dir', 'External/ESLint',
+       '--input-html', $derivedSourcesMainHTML,
+       '--input-html-dir', $uiRoot,
+       '--derived-sources-dir', $derivedSourcesDir,
+       '--output-dir', $derivedSourcesDir,
+       '--output-script-name', 'ESLint.js');
+
+    # Remove console.assert calls from the Main.js file.
+    my $derivedSourcesMainJS = File::Spec->catfile($derivedSourcesDir, 'Main.js');
+    system($perl, File::Spec->catfile($scriptsRoot, 'remove-console-asserts.pl'),
+        '--input-script', $derivedSourcesMainJS,
+        '--output-script', $derivedSourcesMainJS);
+
+    # Fix Image URLs in the Main.css file by removing the "../".
+    my $derivedSourcesMainCSS = File::Spec->catfile($derivedSourcesDir, 'Main.css');
+    if (open(INPUT_MAIN, '<', $derivedSourcesMainCSS)) {
+        local $/;
+        my $cssContents = <INPUT_MAIN>;
+        close(INPUT_MAIN);
+        open(OUTPUT_MAIN, '>', $derivedSourcesMainCSS);
+        $cssContents =~ s/\.\.\/Images/Images/g;
+        print OUTPUT_MAIN $cssContents;
+        close(OUTPUT_MAIN);
+    }
+
+    # Export the license into Main.js.
+    my $targetMainJS = File::Spec->catfile($targetResourcePath, 'Main.js');
+    seedFile($targetMainJS, $inspectorLicense);
+
+    my $targetMainCSS = File::Spec->catfile($targetResourcePath, 'Main.css');
+    seedFile($targetMainCSS, $inspectorLicense);
+
+    # Export the license into CodeMirror.js and CodeMirror.css.
+    my $targetCodeMirrorJS = File::Spec->catfile($targetResourcePath, 'CodeMirror.js');
+    seedFile($targetCodeMirrorJS, $codeMirrorLicense);
+
+    my $targetCodeMirrorCSS = File::Spec->catfile($targetResourcePath, 'CodeMirror.css');
+    seedFile($targetCodeMirrorCSS, $codeMirrorLicense);
+
+    # Export the license into Esprima.js.
+    my $targetEsprimaJS = File::Spec->catfile($targetResourcePath, 'Esprima.js');
+    seedFile($targetEsprimaJS, $esprimaLicense);
+
+    # Export the license into ESLint.js.
+    my $targetESLintJS = File::Spec->catfile($targetResourcePath, 'ESLint.js');
+    seedFile($targetESLintJS, $eslintLicense);
+
+    # Minify the Main.js and Main.css files, with Main.js appending to the license that was exported above.
+    my $jsMinScript = File::Spec->catfile($sharedScriptsRoot, 'jsmin.py');
+    my $cssMinScript = File::Spec->catfile($sharedScriptsRoot, 'cssmin.py');
+    system(qq("$python" "$jsMinScript" < "$derivedSourcesMainJS" >> "$targetMainJS")) and die "Failed to minify $derivedSourcesMainJS: $!";
+    system(qq("$python" "$cssMinScript" < "$derivedSourcesMainCSS" >> "$targetMainCSS")) and die "Failed to minify $derivedSourcesMainCSS: $!";
+
+    # Minify the CodeMirror.js and CodeMirror.css files, appending to the license that was exported above.
+    my $derivedSourcesCodeMirrorJS = File::Spec->catfile($derivedSourcesDir, 'CodeMirror.js');
+    my $derivedSourcesCodeMirrorCSS = File::Spec->catfile($derivedSourcesDir, 'CodeMirror.css');
+    system(qq("$python" "$jsMinScript" < "$derivedSourcesCodeMirrorJS" >> "$targetCodeMirrorJS")) and die "Failed to minify $derivedSourcesCodeMirrorJS: $!";
+    system(qq("$python" "$cssMinScript" < "$derivedSourcesCodeMirrorCSS" >> "$targetCodeMirrorCSS")) and die "Failed to minify $derivedSourcesCodeMirrorCSS: $!";
+
+    # Minify the Esprima.js file, appending to the license that was exported above.
+    my $derivedSourcesEsprimaJS = File::Spec->catfile($derivedSourcesDir, 'Esprima.js');
+    system(qq("$python" "$jsMinScript" < "$derivedSourcesEsprimaJS" >> "$targetEsprimaJS")) and die "Failed to minify $derivedSourcesEsprimaJS: $!";
+
+    # Minify the ESLint.js file, appending to the license that was exported above.
+    my $derivedSourcesESLintJS = File::Spec->catfile($derivedSourcesDir, 'ESLint.js');
+    system(qq("$python" "$jsMinScript" < "$derivedSourcesESLintJS" >> "$targetESLintJS")) and die "Failed to minify $derivedSourcesESLintJS: $!";
+
+    # Copy over Main.html and the Images directory.
+    copy($derivedSourcesMainHTML, File::Spec->catfile($targetResourcePath, 'Main.html'));
+
+    ditto(File::Spec->catdir($uiRoot, 'Images'), File::Spec->catdir($targetResourcePath, 'Images'));
+
+    # Remove Images/gtk on Mac and Windows builds.
+    remove_tree(File::Spec->catdir($targetResourcePath, 'Images', 'gtk')) if defined $ENV{'MAC_OS_X_VERSION_MAJOR'} or defined $ENV{'OFFICIAL_BUILD'};
+
+    # Remove ESLint until needed: <https://webkit.org/b/136515> Web Inspector: JavaScript source text editor should have a linter
+    unlink $targetESLintJS;
+
+    # Copy the Protocol/Legacy and Workers directories.
+    ditto(File::Spec->catfile($uiRoot, 'Protocol', 'Legacy'), File::Spec->catfile($protocolDir, 'Legacy'));
+    ditto(File::Spec->catfile($uiRoot, 'Workers'), $workersDir);
+
+    # Remove console.assert calls from the Worker js files.
+    system($perl, File::Spec->catfile($scriptsRoot, 'remove-console-asserts.pl'),
+        '--input-directory', $workersDir);
+
+    # Fix import references in Workers directories. This rewrites "../../External/script.js" import paths to their new locations.
+    system($perl, File::Spec->catfile($scriptsRoot, 'fix-worker-imports-for-optimized-builds.pl'),
+        '--input-directory', $workersDir) and die "Failed to update Worker imports for optimized builds.";
+} else {
+    # Keep the files separate for engineering builds.
+    ditto($uiRoot, $targetResourcePath);
+}
+
+if ($shouldCombineTest) {
+    # Combine the JavaScript files for testing into a single file (TestCombined.js).
+    system($perl, $combineResourcesCmd,
+        '--input-html', File::Spec->catfile($uiRoot, 'Test.html'),
+        '--derived-sources-dir', $derivedSourcesDir,
+        '--output-dir', $derivedSourcesDir,
+        '--output-script-name', 'TestCombined.js',
+        '--output-style-name', 'TestCombined.css');
+
+    my $derivedSourcesTestHTML = File::Spec->catfile($derivedSourcesDir, 'Test.html');
+    my $derivedSourcesTestJS = File::Spec->catfile($derivedSourcesDir, 'TestCombined.js');
+    # Combine the Esprima JavaScript files for testing into a single file (Esprima.js).
+    system($perl, $combineResourcesCmd,
+        '--input-dir', 'External/Esprima',
+        '--input-html', $derivedSourcesTestHTML,
+        '--input-html-dir', $uiRoot,
+        '--derived-sources-dir', $derivedSourcesDir,
+        '--output-dir', $derivedSourcesDir,
+        '--output-script-name', 'TestEsprima.js');
+
+    # Export the license into TestCombined.js.
+    my $targetTestJS = File::Spec->catfile($targetResourcePath, 'TestCombined.js');
+    seedFile($targetTestJS, $inspectorLicense);
+
+    # Export the license into Esprima.js.
+    my $targetEsprimaJS = File::Spec->catfile($targetResourcePath, 'TestEsprima.js');
+    seedFile($targetEsprimaJS, $esprimaLicense);
+
+    # Append TestCombined.js to the license that was exported above.
+    appendFile($targetTestJS, $derivedSourcesTestJS);
+
+    # Append Esprima.js to the license that was exported above.
+    my $derivedSourcesEsprimaJS = File::Spec->catfile($derivedSourcesDir, 'TestEsprima.js');
+    appendFile($targetEsprimaJS, $derivedSourcesEsprimaJS);
+
+    # Copy over Test.html.
+    copy($derivedSourcesTestHTML, File::Spec->catfile($targetResourcePath, 'Test.html'));
+
+    # Copy the Legacy directory.
+    ditto(File::Spec->catfile($uiRoot, 'Protocol', 'Legacy'), File::Spec->catfile($protocolDir, 'Legacy'));
+}
diff --git a/Source/WebInspectorUI/Scripts/fix-worker-imports-for-optimized-builds.pl b/Source/WebInspectorUI/Scripts/fix-worker-imports-for-optimized-builds.pl
new file mode 100755
index 000000000..8a8d25a2c
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/fix-worker-imports-for-optimized-builds.pl
@@ -0,0 +1,69 @@
+#!/usr/bin/perl -w
+
+use strict;
+use Getopt::Long;
+use File::Copy qw/move/;
+use File::Temp qw/tempfile/;
+use File::Spec;
+
+sub fixWorkerImportsInFile($$);
+sub fixWorkerImportsInDirectory($);
+
+our $inputDirectory;
+
+GetOptions('input-directory=s' => \$inputDirectory);
+
+if (defined $inputDirectory) {
+    fixWorkerImportsInDirectory($inputDirectory);
+    exit;
+}
+
+print "Usage: $0 --input-directory <path>\n";
+exit;
+
+sub fixWorkerImportsInFile($$)
+{
+    my $inputScriptFilename = shift;
+    my $outputScriptFilename = shift;
+
+    open IN, $inputScriptFilename or die "Couldn't open $inputScriptFilename: $!";
+    my ($out, $tempFilename) = tempfile(UNLINK => 0) or die;
+
+    my $previousLine = "";
+    while (<IN>) {
+        s|/External/Esprima/esprima.js|/Esprima.js|;
+        print $out $_;
+
+        # Error if there is an "External/" path that we did not rewrite.
+        if ($_ =~ /External\//) {
+            my $sanitizedPath = $inputScriptFilename;
+            $sanitizedPath =~ s/^.*?Workers/Workers/;
+            print "ERROR: $sanitizedPath: Unhandled External importScript in Worker script on line $.: $_";
+            exit 1;
+        }
+    }
+
+    close $out;
+    close IN;
+
+    move $tempFilename, $outputScriptFilename or die "$!";
+}
+
+sub fixWorkerImportsInDirectory($)
+{
+    my $inputDirectory = shift;
+
+    opendir(DIR, $inputDirectory) || die "$!";
+    my @files = grep { !/^\.{1,2}$/ } readdir (DIR);
+    closedir(DIR);
+
+    foreach my $file (@files) {
+        next if $file eq '.' or $file eq '..';
+        my $path = File::Spec->catdir($inputDirectory, $file);
+        if (-d $path) {
+            fixWorkerImportsInDirectory($path);
+        } elsif ($file =~ /\.js$/) {
+            fixWorkerImportsInFile($path, $path);
+        }
+    }
+}
diff --git a/Source/WebInspectorUI/Scripts/remove-console-asserts-dryrun.rb b/Source/WebInspectorUI/Scripts/remove-console-asserts-dryrun.rb
new file mode 100755
index 000000000..3ecff58ce
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/remove-console-asserts-dryrun.rb
@@ -0,0 +1,23 @@
+#!/usr/bin/ruby
+
+require "find"
+
+$verbose = ARGV.include?("--verbose");
+$remove_console_asserts_path = File.expand_path File.join(File.dirname(__FILE__), "remove-console-asserts.pl")
+$web_inspector_user_interface_path = File.expand_path File.join(File.dirname(__FILE__), "..", "UserInterface")
+
+Find.find($web_inspector_user_interface_path) do |path|
+  # Skip directories, External, Images, and non-js.
+  next if File.directory?(path)
+  next if path =~ /\/(External|Images)\//
+  next if path !~ /\.js$/
+
+  # Run remove-console-asserts on each file.
+  puts "Checking: #{path} ..." if $verbose
+  output = %x{ perl '#{$remove_console_asserts_path}' --input-script '#{path}' --output-script /dev/null }
+  if !output.empty?
+    puts "#{File.basename(path)}:"
+    puts output
+    puts
+  end
+end
diff --git a/Source/WebInspectorUI/Scripts/remove-console-asserts.pl b/Source/WebInspectorUI/Scripts/remove-console-asserts.pl
new file mode 100755
index 000000000..6d011b8a9
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/remove-console-asserts.pl
@@ -0,0 +1,88 @@
+#!/usr/bin/perl -w
+
+use strict;
+use Getopt::Long;
+use File::Copy qw/move/;
+use File::Temp qw/tempfile/;
+use File::Spec;
+
+sub removeConsoleAssertsInFile($$);
+sub removeConsoleAssertsInDirectory($);
+
+our $inputDirectory;
+our $inputScriptFilename;
+our $outputScriptFilename;
+
+GetOptions('input-directory=s' => \$inputDirectory,
+           'input-script=s' => \$inputScriptFilename,
+           'output-script=s' => \$outputScriptFilename);
+
+if (defined $inputScriptFilename and defined $outputScriptFilename) {
+    removeConsoleAssertsInFile($inputScriptFilename, $outputScriptFilename);
+    exit;
+}
+
+if (defined $inputDirectory) {
+    removeConsoleAssertsInDirectory($inputDirectory);
+    exit;
+}
+
+print "Usage: $0 --input-script <path> --output-script <path>\n";
+print "Usage: $0 --input-directory <path>\n";
+exit;
+
+sub removeConsoleAssertsInFile($$)
+{
+    my $inputScriptFilename = shift;
+    my $outputScriptFilename = shift;
+
+    open IN, $inputScriptFilename or die "Couldn't open $inputScriptFilename: $!";
+    my ($out, $tempFilename) = tempfile(UNLINK => 0) or die;
+
+    my $previousLine = "";
+    while (<IN>) {
+        # Warn about console.assert in control flow statement without braces. Can change logic when stripped.
+        if (/console\.assert/) {
+            if ($previousLine =~ /^\s*(for|if|else|while|do)\b/ && $previousLine !~ /\{\s*$/) {
+                print "WARNING: console.assert inside control flow statement without braces on line: $.: $_";
+            }
+        }
+
+        s/\s*console\.assert\(.*\);\s*//g;
+        print $out $_;
+        $previousLine = $_ if $_ !~ /^\s*$/;
+
+        # If console.assert is still on the line, either we missed a semicolon or it is multi-line. These did not get stripped.
+        if ($_ =~ /\s*console\.assert\(/) {
+            if ($_ =~ /\)\s*$/) {
+                print "WARNING: console.assert missing trailing semicolon on line $.: $_" ;
+            } else {
+                print "WARNING: Multi-line console.assert on line $.: $_" ;
+            }
+        }
+    }
+
+    close $out;
+    close IN;
+
+    move $tempFilename, $outputScriptFilename or die "$!";
+}
+
+sub removeConsoleAssertsInDirectory($)
+{
+    my $inputDirectory = shift;
+
+    opendir(DIR, $inputDirectory) || die "$!";
+    my @files = grep { !/^\.{1,2}$/ } readdir (DIR);
+    closedir(DIR);
+
+    foreach my $file (@files) {
+        next if $file eq '.' or $file eq '..';
+        my $path = File::Spec->catdir($inputDirectory, $file);
+        if (-d $path) {
+            removeConsoleAssertsInDirectory($path);
+        } elsif ($file =~ /\.js$/) {
+            removeConsoleAssertsInFile($path, $path);
+        }
+    }
+}
diff --git a/Source/WebInspectorUI/Scripts/update-LegacyInspectorBackendCommands.rb b/Source/WebInspectorUI/Scripts/update-LegacyInspectorBackendCommands.rb
new file mode 100755
index 000000000..21d306e2c
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/update-LegacyInspectorBackendCommands.rb
@@ -0,0 +1,74 @@
+#!/usr/bin/ruby
+
+require 'fileutils'
+require 'tmpdir'
+
+if ARGV.size != 0
+  puts "usage: #{File.basename $0}"
+  exit 1
+end
+
+WEB_INSPECTOR_PATH = File.expand_path File.join(File.dirname(__FILE__), "..")
+JAVASCRIPTCORE_PATH = File.expand_path File.join(File.dirname(__FILE__), "..", "..", "JavaScriptCore")
+
+$code_generator_path = File.join JAVASCRIPTCORE_PATH, "inspector", "scripts", "generate-inspector-protocol-bindings.py"
+$versions_directory_path = File.join WEB_INSPECTOR_PATH, "Versions"
+$web_inspector_protocol_legacy_path = File.join WEB_INSPECTOR_PATH, "UserInterface", "Protocol", "Legacy"
+
+class Task
+  def initialize(input_json_path, output_directory_path)
+    @input_json_path = input_json_path
+    @output_directory_path = output_directory_path
+  end
+
+  def run
+    output_filename = "InspectorBackendCommands.js"
+    display_input = File.basename @input_json_path
+    display_output = File.join @output_directory_path.gsub(/^.*?\/UserInterface/, "UserInterface"), output_filename
+    puts "#{display_input} -> #{display_output}"
+
+    Dir.mktmpdir do |tmpdir|
+      dependency = @dependency_json_path ? "'#{@dependency_json_path}'" : ""
+      cmd = "#{$code_generator_path} --force --outputDir '#{tmpdir}' --framework JavaScriptCore '#{@input_json_path}' #{dependency}"
+      %x{ #{cmd} }
+      if $?.exitstatus != 0
+        puts "ERROR: Error Code (#{$?.exitstatus}) Evaluating: #{cmd}"
+        exit 1
+      end
+
+      generated_path = File.join tmpdir, output_filename
+      if !File.exists?(generated_path)
+        puts "ERROR: Generated file does not exist at expected path."
+        exit 1
+      end
+
+      FileUtils.mkdir_p @output_directory_path
+      FileUtils.cp generated_path, @output_directory_path
+    end
+  end
+end
+
+def all_tasks
+  tasks = []
+
+  had_error = false
+  Dir.glob(File.join($versions_directory_path, "*.json")).each do |version_path|
+    match = File.basename(version_path).match(/^Inspector\-(.*?)\-([^-]+?)\.json$/)
+    if match
+      output_path = File.join $web_inspector_protocol_legacy_path, match[2]
+      tasks << Task.new(version_path, output_path)
+    else
+      puts "ERROR: Version file (#{version_path}) did not match the template Inspector-<ANYTHING>-<VERSION>.js"
+      had_error = true
+    end
+  end
+  exit 1 if had_error
+
+  tasks
+end
+
+def main
+  all_tasks.each { |task| task.run }
+end
+
+main
diff --git a/Source/WebInspectorUI/Scripts/update-codemirror-resources.rb b/Source/WebInspectorUI/Scripts/update-codemirror-resources.rb
new file mode 100755
index 000000000..2f158aaf9
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/update-codemirror-resources.rb
@@ -0,0 +1,69 @@
+#!/usr/bin/ruby
+
+require 'fileutils'
+
+if ARGV.size != 1
+  puts "usage: #{File.basename $0} <codemirror-repo-path>"
+  exit 1
+end
+
+def verify_code_mirror_repository_path(path)
+  if !File.directory? path
+    puts "ERROR: Provided CodeMirror path is not a directory."
+    exit 1
+  end
+
+  Dir.chdir(path) do
+    results = `git config --list | grep 'codemirror/CodeMirror\.git'`
+    if $?.exitstatus != 0 || results.split("\n").empty?
+      puts "ERROR: Provided CodeMirror path does not appear to be a CodeMirror checkout."
+      exit 1
+    end
+  end
+end
+
+code_mirror_repository_path = File.expand_path ARGV[0]
+verify_code_mirror_repository_path code_mirror_repository_path
+
+web_inspector_user_interface_path = File.expand_path File.join(File.dirname(__FILE__), "../UserInterface")
+web_inspector_code_mirror_resources_path = File.join web_inspector_user_interface_path, "/External/CodeMirror"
+
+CODE_MIRROR_FILES_TO_COPY = %w(
+  LICENSE
+  addon/comment/comment.js
+  addon/display/placeholder.js
+  addon/edit/closebrackets.js
+  addon/edit/matchbrackets.js
+  addon/mode/overlay.js
+  addon/runmode/runmode.js
+  addon/search/searchcursor.js
+  addon/selection/mark-selection.js
+  keymap/sublime.js
+  lib/codemirror.css
+  lib/codemirror.js
+  mode/clojure/clojure.js
+  mode/coffeescript/coffeescript.js
+  mode/css/css.js
+  mode/htmlmixed/htmlmixed.js
+  mode/javascript/javascript.js
+  mode/livescript/livescript.js
+  mode/sass/sass.js
+  mode/sql/sql.js
+  mode/xml/xml.js
+)
+
+all_success = true
+
+CODE_MIRROR_FILES_TO_COPY.each do |subpath|
+  from_path = File.join code_mirror_repository_path, subpath
+  to_path = File.join web_inspector_code_mirror_resources_path, File.basename(subpath)
+  begin
+    puts "Copying #{File.basename(subpath)}..."
+    FileUtils.cp from_path, to_path
+  rescue Exception => e
+    puts "WARNING: #{e}"
+    all_success = false
+  end
+end
+
+exit all_success ? 0 : 1
diff --git a/Source/WebInspectorUI/UserInterface/ActivateButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/ActivateButtonNavigationItem.js
deleted file mode 100644
index e5d361f2f..000000000
--- a/Source/WebInspectorUI/UserInterface/ActivateButtonNavigationItem.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.ActivateButtonNavigationItem = function(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role)
-{
-    WebInspector.ButtonNavigationItem.call(this, identifier, defaultToolTip, image, imageWidth, imageHeight, suppressEmboss, role);
-
-    this._defaultToolTip = defaultToolTip;
-    this._activatedToolTip = activatedToolTip || defaultToolTip;
-    this._role = role;
-};
-
-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);
-            if (this._role === "tab")
-                this.element.setAttribute("aria-selected", "true");
-        } else {
-            this.toolTip = this._defaultToolTip;
-            this.element.classList.remove(WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName);
-            if (this._role === "tab")
-                this.element.removeAttribute("aria-selected");
-        }
-    },
-
-    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 afa4327a4..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, role)
-{
-    WebInspector.ActivateButtonNavigationItem.call(this, identifier, defaultToolTip, activatedToolTip, image, 32, 32, suppressEmboss, role);
-
-    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 40019b1f3..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.svg");
-
-    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 4d75875cd..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrame.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.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.TypeIdentifier = "application-cache-frame";
-WebInspector.ApplicationCacheFrame.FrameURLCookieKey = "application-cache-frame-url";
-WebInspector.ApplicationCacheFrame.ManifestURLCookieKey = "application-cache-frame-manifest-url";
-
-WebInspector.ApplicationCacheFrame.prototype = {
-    constructor: WebInspector.ApplicationCacheFrame,
-    
-    // Public
-
-    get frame()
-    {
-        return this._frame;
-    },
-
-    get manifest()
-    {
-        return this._manifest;
-    },
-
-    get status()
-    {
-        return this._status;
-    },
-    
-    set status(status)
-    {
-        this._status = status;
-    },
-
-    saveIdentityToCookie: function(cookie)
-    {
-        cookie[WebInspector.ApplicationCacheFrame.FrameURLCookieKey] = this.frame.url;
-        cookie[WebInspector.ApplicationCacheFrame.ManifestURLCookieKey] = this.manifest.manifestURL;
-    }
-};
-
-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 d2d0e6c91..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.js
+++ /dev/null
@@ -1,250 +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();
-    },
-
-    saveToCookie: function(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: 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 523d8511f..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheManager.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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);
-
-    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();
-};
-
-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 = [];
-
-        if (window.ApplicationCacheAgent)
-            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 e48df8bfb..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.
-
-    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/BackForwardEntry.js b/Source/WebInspectorUI/UserInterface/BackForwardEntry.js
deleted file mode 100644
index 94899bc44..000000000
--- a/Source/WebInspectorUI/UserInterface/BackForwardEntry.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/*
- *  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 = function(contentView, cookie)
-{
-    WebInspector.Object.call(this);
-    this._contentView = contentView;
-    // Cookies are compared with Object.shallowEqual, so should not store objects or arrays.
-    this._cookie = cookie || {};
-    this._scrollPositions = [];
-
-    contentView.saveToCookie(this._cookie);
-};
-
-WebInspector.BackForwardEntry.prototype = {
-    constructor: WebInspector.BackForwardEntry,
-    __proto__: WebInspector.Object.prototype,
-
-    // Public
-
-    get contentView()
-    {
-        return this._contentView;
-    },
-
-    get cookie()
-    {
-        // Cookies are immutable; they represent a specific navigation action.
-        return Object.shallowCopy(this._cookie);
-    },
-
-    prepareToShow: function()
-    {
-        this._restoreFromCookie();
-
-        this.contentView.visible = true;
-        this.contentView.shown();
-        this.contentView.updateLayout();
-    },
-
-    prepareToHide: function()
-    {
-        this.contentView.visible = false;
-        this.contentView.hidden();
-
-        this._saveScrollPositions();
-    },
-
-    // Private
-
-    _restoreFromCookie: function()
-    {
-        this._restoreScrollPositions();
-        this.contentView.restoreFromCookie(this.cookie);
-    },
-
-    _restoreScrollPositions: function()
-    {
-        // 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: function()
-    {
-        var scrollableElements = this.contentView.scrollableElements || [];
-        var scrollPositions = [];
-        for (var i = 0; i < scrollableElements.length; ++i) {
-            var element = scrollableElements[i];
-            if (!element)
-                continue;
-
-            var 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/Base/DOMUtilities.js b/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js
new file mode 100644
index 000000000..ba423aa31
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js
@@ -0,0 +1,314 @@
+/*
+ * 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.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, maxLength)
+{
+    let displayName = node.displayName;
+    if (!isNaN(maxLength))
+        displayName = displayName.truncate(maxLength);
+
+    let link = document.createElement("span");
+    link.append(displayName);
+    link.setAttribute("role", "link");
+
+    link.title = displayName;
+
+    let nodeType = node.nodeType();
+    if ((nodeType !== Node.DOCUMENT_NODE || node.parentNode) && nodeType !== Node.TEXT_NODE)
+        link.className = "node-link";
+
+    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);
+}
+
+WebInspector.cssPath = function(node)
+{
+    console.assert(node instanceof WebInspector.DOMNode, "Expected a DOMNode.");
+    if (node.nodeType() !== Node.ELEMENT_NODE)
+        return "";
+
+    let suffix = "";
+    if (node.isPseudoElement()) {
+        suffix = "::" + node.pseudoType();
+        node = node.parentNode;
+    }
+
+    let components = [];
+    while (node) {
+        let component = WebInspector.cssPathComponent(node);
+        if (!component)
+            break;
+        components.push(component);
+        if (component.done)
+            break;
+        node = node.parentNode;
+    }
+
+    components.reverse();
+    return components.map((x) => x.value).join(" > ") + suffix;
+};
+
+WebInspector.cssPathComponent = function(node)
+{
+    console.assert(node instanceof WebInspector.DOMNode, "Expected a DOMNode.");
+    console.assert(!node.isPseudoElement());
+    if (node.nodeType() !== Node.ELEMENT_NODE)
+        return null;
+
+    let nodeName = node.nodeNameInCorrectCase();
+    let lowerNodeName = node.nodeName().toLowerCase();
+
+    // html, head, and body are unique nodes.
+    if (lowerNodeName === "body" || lowerNodeName === "head" || lowerNodeName === "html")
+        return {value: nodeName, done: true};
+
+    // #id is unique.
+    let id = node.getAttribute("id");
+    if (id)
+        return {value: node.escapedIdSelector, done: true};
+
+    // Root node does not have siblings.
+    if (!node.parentNode || node.parentNode.nodeType() === Node.DOCUMENT_NODE)
+        return {value: nodeName, done: true};
+
+    // Find uniqueness among siblings.
+    //   - look for a unique className
+    //   - look for a unique tagName
+    //   - fallback to nth-child()
+
+    function classNames(node) {
+        let classAttribute = node.getAttribute("class");
+        return classAttribute ? classAttribute.trim().split(/\s+/) : [];
+    }
+
+    let nthChildIndex = -1;
+    let hasUniqueTagName = true;
+    let uniqueClasses = new Set(classNames(node));
+
+    let siblings = node.parentNode.children;
+    let elementIndex = 0;
+    for (let sibling of siblings) {
+        if (sibling.nodeType() !== Node.ELEMENT_NODE)
+            continue;
+
+        elementIndex++;
+        if (sibling === node) {
+            nthChildIndex = elementIndex;
+            continue;
+        }
+
+        if (sibling.nodeNameInCorrectCase() === nodeName)
+            hasUniqueTagName = false;
+
+        if (uniqueClasses.size) {
+            let siblingClassNames = classNames(sibling);
+            for (let className of siblingClassNames)
+                uniqueClasses.delete(className);
+        }
+    }
+
+    let selector = nodeName;
+    if (lowerNodeName === "input" && node.getAttribute("type") && !uniqueClasses.size)
+        selector += `[type="${node.getAttribute("type")}"]`;
+    if (!hasUniqueTagName) {
+        if (uniqueClasses.size)
+            selector += node.escapedClassSelector;
+        else
+            selector += `:nth-child(${nthChildIndex})`;
+    }
+
+    return {value: selector, done: false};
+};
+
+WebInspector.xpath = function(node)
+{
+    console.assert(node instanceof WebInspector.DOMNode, "Expected a DOMNode.");
+
+    if (node.nodeType() === Node.DOCUMENT_NODE)
+        return "/";
+
+    let components = [];
+    while (node) {
+        let component = WebInspector.xpathComponent(node);
+        if (!component)
+            break;
+        components.push(component);
+        if (component.done)
+            break;
+        node = node.parentNode;
+    }
+
+    components.reverse();
+
+    let prefix = components.length && components[0].done ? "" : "/";
+    return prefix + components.map((x) => x.value).join("/");
+};
+
+WebInspector.xpathComponent = function(node)
+{
+    console.assert(node instanceof WebInspector.DOMNode, "Expected a DOMNode.");
+
+    let index = WebInspector.xpathIndex(node);
+    if (index === -1)
+        return null;
+
+    let value;
+
+    switch (node.nodeType()) {
+    case Node.DOCUMENT_NODE:
+        return {value: "", done: true};
+    case Node.ELEMENT_NODE:
+        var id = node.getAttribute("id");
+        if (id)
+            return {value: `//*[@id="${id}"]`, done: true};
+        value = node.localName();
+        break;
+    case Node.ATTRIBUTE_NODE:
+        value = `@${node.nodeName()}`;
+        break;
+    case Node.TEXT_NODE:
+    case Node.CDATA_SECTION_NODE:
+        value = "text()";
+        break;
+    case Node.COMMENT_NODE:
+        value = "comment()";
+        break;
+    case Node.PROCESSING_INSTRUCTION_NODE:
+        value = "processing-instruction()";
+        break;
+    default:
+        value = "";
+        break;
+    }
+
+    if (index > 0)
+        value += `[${index}]`;
+
+    return {value, done: false};
+};
+
+WebInspector.xpathIndex = function(node)
+{
+    // Root node.
+    if (!node.parentNode)
+        return 0;
+
+    // No siblings.
+    let siblings = node.parentNode.children;
+    if (siblings.length <= 1)
+        return 0;
+
+    // Find uniqueness among siblings.
+    //   - look for a unique localName
+    //   - fallback to index
+
+    function isSimiliarNode(a, b) {
+        if (a === b)
+            return true;
+
+        let aType = a.nodeType();
+        let bType = b.nodeType();
+
+        if (aType === Node.ELEMENT_NODE && bType === Node.ELEMENT_NODE)
+            return a.localName() === b.localName();
+
+        // XPath CDATA and text() are the same.
+        if (aType === Node.CDATA_SECTION_NODE)
+            return aType === Node.TEXT_NODE;
+        if (bType === Node.CDATA_SECTION_NODE)
+            return bType === Node.TEXT_NODE;
+
+        return aType === bType;
+    }
+
+    let unique = true;
+    let xPathIndex = -1;
+
+    let xPathIndexCounter = 1; // XPath indices start at 1.
+    for (let sibling of siblings) {
+        if (!isSimiliarNode(node, sibling))
+            continue;
+
+        if (node === sibling) {
+            xPathIndex = xPathIndexCounter;
+            if (!unique)
+                return xPathIndex;
+        } else {
+            unique = false;
+            if (xPathIndex !== -1)
+                return xPathIndex;
+        }
+
+        xPathIndexCounter++;
+    }
+
+    if (unique)
+        return 0;
+
+    console.assert(xPathIndex > 0, "Should have found the node.");
+    return xPathIndex;
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/EventListener.js b/Source/WebInspectorUI/UserInterface/Base/EventListener.js
new file mode 100644
index 000000000..b009f887d
--- /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..bc392c430
--- /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/InspectorFrontendHostStub.js b/Source/WebInspectorUI/UserInterface/Base/InspectorFrontendHostStub.js
new file mode 100644
index 000000000..505e9d4af
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/InspectorFrontendHostStub.js
@@ -0,0 +1,200 @@
+/*
+ * 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.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;
+        },
+
+        userInterfaceLayoutDirection: function()
+        {
+            return "ltr";
+        },
+
+        requestSetDockSide: function(side)
+        {
+            InspectorFrontendAPI.setDockSide(side);
+        },
+
+        setAttachedWindowHeight: function(height)
+        {
+        },
+
+        setAttachedWindowWidth: function(width)
+        {
+        },
+
+        startWindowDrag: function()
+        {
+        },
+
+        moveWindowBy: function(x, y)
+        {
+        },
+
+        loaded: function()
+        {
+        },
+
+        localizedStringsURL: function()
+        {
+            return undefined;
+        },
+
+        backendCommandsURL: 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)
+        {
+        },
+
+        unbufferedLog: function()
+        {
+            console.log.apply(console, arguments);
+        },
+
+        setZoomFactor: function(zoom)
+        {
+        },
+
+        zoomFactor: function()
+        {
+            return 1;
+        },
+
+        // 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/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/LoadLocalizedStrings.js b/Source/WebInspectorUI/UserInterface/Base/LoadLocalizedStrings.js
index 84c6e08fe..84c6e08fe 100644
--- a/Source/WebInspectorUI/UserInterface/LoadLocalizedStrings.js
+++ b/Source/WebInspectorUI/UserInterface/Base/LoadLocalizedStrings.js
diff --git a/Source/WebInspectorUI/UserInterface/Base/MIMETypeUtilities.js b/Source/WebInspectorUI/UserInterface/Base/MIMETypeUtilities.js
new file mode 100644
index 000000000..42bced52e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/MIMETypeUtilities.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.fileExtensionForURL = function(url)
+{
+    var lastPathComponent = parseURL(url).lastPathComponent;
+    if (!lastPathComponent)
+        return "";
+
+    var index = lastPathComponent.indexOf(".");
+    if (index === -1)
+        return "";
+
+    return lastPathComponent.substr(index + 1);
+};
+
+WebInspector.mimeTypeForFileExtension = function(extension)
+{
+    const extensionToMIMEType = {
+        // Document types.
+        "html": "text/html",
+        "xhtml": "application/xhtml+xml",
+        "xml": "text/xml",
+
+        // Script types.
+        "js": "text/javascript",
+        "json": "application/json",
+        "clj": "text/x-clojure",
+        "coffee": "text/x-coffeescript",
+        "ls": "text/x-livescript",
+        "ts": "text/typescript",
+
+        // Stylesheet types.
+        "css": "text/css",
+        "less": "text/x-less",
+        "sass": "text/x-sass",
+        "scss": "text/x-scss",
+
+        // Image types.
+        "bmp": "image/bmp",
+        "gif": "image/gif",
+        "jpeg": "image/jpeg",
+        "jpg": "image/jpeg",
+        "pdf": "application/pdf",
+        "png": "image/png",
+        "tif": "image/tiff",
+        "tiff": "image/tiff",
+
+        // Font types and Media types are ignored for now.
+
+        // Miscellaneous types.
+        "svg": "image/svg+xml",
+        "txt": "text/plain",
+        "xsl": "text/xsl"
+    };
+
+    return extensionToMIMEType[extension] || null;
+};
+
+WebInspector.fileExtensionForMIMEType = function(mimeType)
+{
+    const mimeTypeToExtension = {
+        // Document types.
+        "text/html": "html",
+        "application/xhtml+xml": "xhtml",
+        "text/xml": "xml",
+
+        // Script types.
+        "text/javascript": "js",
+        "application/json": "json",
+        "text/x-clojure": "clj",
+        "text/x-coffeescript": "coffee",
+        "text/x-livescript": "ls",
+        "text/typescript": "ts",
+
+        // Stylesheet types.
+        "text/css": "css",
+        "text/x-less": "less",
+        "text/x-sass": "sass",
+        "text/x-scss": "scss",
+
+        // Image types.
+        "image/bmp": "bmp",
+        "image/gif": "gif",
+        "image/jpeg": "jpg",
+        "application/pdf": "pdf",
+        "image/png": "png",
+        "image/tiff": "tiff",
+
+        // Font types and Media types are ignored for now.
+
+        // Miscellaneous types.
+        "image/svg+xml": "svg",
+        "text/plain": "txt",
+        "text/xsl": "xsl",
+    };
+
+    let extension = mimeTypeToExtension[mimeType];
+    return extension ? `.${extension}` : null;
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/Main.js b/Source/WebInspectorUI/UserInterface/Base/Main.js
new file mode 100644
index 000000000..11495f4ee
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/Main.js
@@ -0,0 +1,2693 @@
+/*
+ * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.LayoutDirection = {
+    System: "system",
+    LTR: "ltr",
+    RTL: "rtl",
+};
+
+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.registerWorkerDispatcher)
+        InspectorBackend.registerWorkerDispatcher(new WebInspector.WorkerObserver);
+    if (InspectorBackend.registerReplayDispatcher)
+        InspectorBackend.registerReplayDispatcher(new WebInspector.ReplayObserver);
+
+    // Main backend target.
+    WebInspector.mainTarget = new WebInspector.MainTarget;
+
+    // Enable agents.
+    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.targetManager = new WebInspector.TargetManager;
+    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.memoryManager = new WebInspector.MemoryManager;
+    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.workerManager = new WebInspector.WorkerManager;
+    this.replayManager = new WebInspector.ReplayManager;
+
+    // Enable the Console Agent after creating the singleton managers.
+    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 (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);
+    this.showJavaScriptTypeInformationSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showJavaScriptTypeInformationSettingChanged, this);
+    if (this.showJavaScriptTypeInformationSetting.value && window.RuntimeAgent && RuntimeAgent.enableTypeProfiler)
+        RuntimeAgent.enableTypeProfiler();
+
+    this.enableControlFlowProfilerSetting = new WebInspector.Setting("enable-control-flow-profiler", false);
+    this.enableControlFlowProfilerSetting.addEventListener(WebInspector.Setting.Event.Changed, this._enableControlFlowProfilerSettingChanged, this);
+    if (this.enableControlFlowProfilerSetting.value && window.RuntimeAgent && RuntimeAgent.enableControlFlowProfiler)
+        RuntimeAgent.enableControlFlowProfiler();
+
+    // 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.showPrintStylesSetting = new WebInspector.Setting("show-print-styles", false);
+    if (this.showPrintStylesSetting.value && window.PageAgent)
+        PageAgent.setEmulatedMedia("print");
+
+    this.setZoomFactor(WebInspector.settings.zoomFactor.value);
+
+    this.mouseCoords = {
+        x: 0,
+        y: 0
+    };
+
+    this.visible = false;
+
+    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("mousedown", this._mouseDown.bind(this), true);
+    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);
+    document.body.setAttribute("dir", this.resolvedLayoutDirection());
+
+    function setTabSize() {
+        document.body.style.tabSize = WebInspector.settings.tabSize.value;
+    }
+    WebInspector.settings.tabSize.addEventListener(WebInspector.Setting.Event.Changed, setTabSize);
+    setTabSize();
+
+    function setInvalidCharacterClassName() {
+        document.body.classList.toggle("show-invalid-characters", WebInspector.settings.showInvalidCharacters.value);
+    }
+    WebInspector.settings.showInvalidCharacters.addEventListener(WebInspector.Setting.Event.Changed, setInvalidCharacterClassName);
+    setInvalidCharacterClassName();
+
+    function setWhitespaceCharacterClassName() {
+        document.body.classList.toggle("show-whitespace-characters", WebInspector.settings.showWhitespaceCharacters.value);
+    }
+    WebInspector.settings.showWhitespaceCharacters.addEventListener(WebInspector.Setting.Event.Changed, setWhitespaceCharacterClassName);
+    setWhitespaceCharacterClassName();
+
+    this.settingsTabContentView = new WebInspector.SettingsTabContentView;
+
+    this._settingsKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Comma, this._showSettingsTab.bind(this));
+
+    // 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.OpenDefaultTab, this._openDefaultTab, this);
+
+    this._contentElement = document.getElementById("content");
+    this._contentElement.setAttribute("role", "main");
+    this._contentElement.setAttribute("aria-label", WebInspector.UIString("Content"));
+
+    const disableBackForward = true;
+    const disableFindBanner = false;
+    this.splitContentBrowser = new WebInspector.ContentBrowser(document.getElementById("split-content-browser"), this, disableBackForward, disableFindBanner);
+    this.splitContentBrowser.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
+
+    this.clearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "K", this._clear.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.openResourceKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "O", this._showOpenResourceDialog.bind(this));
+    new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "P", this._showOpenResourceDialog.bind(this));
+
+    this.navigationSidebarKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "0", this.toggleNavigationSidebar.bind(this));
+    this.detailsSidebarKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Option, "0", this.toggleDetailsSidebar.bind(this));
+
+    let boundIncreaseZoom = this._increaseZoom.bind(this);
+    let boundDecreaseZoom = this._decreaseZoom.bind(this);
+    this._increaseZoomKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Plus, boundIncreaseZoom);
+    this._decreaseZoomKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Minus, boundDecreaseZoom);
+    this._increaseZoomKeyboardShortcut2 = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.Plus, boundIncreaseZoom);
+    this._decreaseZoomKeyboardShortcut2 = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.Minus, boundDecreaseZoom);
+    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 | WebInspector.KeyboardShortcut.Modifier.Option, `${i}`, this._showTabAtIndex.bind(this, i)));
+    this._openNewTabKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Option, "T", this.showNewTabTab.bind(this));
+
+    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._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.element.classList.add(WebInspector.Popover.IgnoreAutoDismissClassName);
+    this._undockToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._undock, this);
+
+    let dockImage = WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL ? "Images/DockLeft.svg" : "Images/DockRight.svg";
+    this._dockToSideToolbarButton = new WebInspector.ButtonToolbarItem("dock-right", WebInspector.UIString("Dock to side of window"), null, dockImage);
+    this._dockToSideToolbarButton.element.classList.add(WebInspector.Popover.IgnoreAutoDismissClassName);
+
+    let dockToSideCallback = WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL ? this._dockLeft : this._dockRight;
+    this._dockToSideToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, dockToSideCallback, this);
+
+    this._dockBottomToolbarButton = new WebInspector.ButtonToolbarItem("dock-bottom", WebInspector.UIString("Dock to bottom of window"), null, "Images/DockBottom.svg");
+    this._dockBottomToolbarButton.element.classList.add(WebInspector.Popover.IgnoreAutoDismissClassName);
+    this._dockBottomToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._dockBottom, this);
+
+    this._togglePreviousDockConfigurationKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "D", this._togglePreviousDockConfiguration.bind(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("Start element selection (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
+        var activatedToolTip = WebInspector.UIString("Stop element selection (%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._dockToSideToolbarButton, 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.indexedDatabaseDetailsSidebarPanel = new WebInspector.IndexedDatabaseDetailsSidebarPanel;
+    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};
+
+    let dockedResizerElement = document.getElementById("docked-resizer");
+    dockedResizerElement.classList.add(WebInspector.Popover.IgnoreAutoDismissClassName);
+    dockedResizerElement.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.SettingsTabContentView,
+        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.normalTabCount)
+        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._showOpenResourceDialog = function()
+{
+    if (!this._openResourceDialog)
+        this._openResourceDialog = new WebInspector.OpenResourceDialog(this);
+
+    if (this._openResourceDialog.visible)
+        return;
+
+    this._openResourceDialog.present(this._contentElement);
+};
+
+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._openDefaultTab = function(event)
+{
+    this.showNewTabTab();
+};
+
+WebInspector._showSettingsTab = function(event)
+{
+    this.tabBrowser.showTabForContentView(this.settingsTabContentView);
+};
+
+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.tabBrowser.tabBar.updateNewTabTabBarItemState();
+};
+
+WebInspector.showNewTabTab = function(shouldAnimate)
+{
+    if (!this.isNewTabWithTypeAllowed(WebInspector.NewTabContentView.Type))
+        return;
+
+    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;
+    }
+
+    if (tabClass === WebInspector.NewTabContentView) {
+        let allTabs = Array.from(this.knownTabClasses());
+        let addableTabs = allTabs.filter((tabClass) => !tabClass.isEphemeral());
+        let canMakeNewTab = addableTabs.some((tabClass) => WebInspector.isNewTabWithTypeAllowed(tabClass.Type));
+        return canMakeNewTab;
+    }
+
+    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;
+    if (!mainFrame)
+        return;
+
+    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._dockConfiguration === side)
+        return;
+
+    this._previousDockConfiguration = this._dockConfiguration;
+
+    if (!this._previousDockConfiguration) {
+        if (side === WebInspector.DockConfiguration.Right || side === WebInspector.DockConfiguration.Left)
+            this._previousDockConfiguration = WebInspector.DockConfiguration.Bottom;
+        else
+            this._previousDockConfiguration = WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL ? WebInspector.DockConfiguration.Left : WebInspector.DockConfiguration.Right;
+    }
+
+    this._dockConfiguration = side;
+
+    this.docked = side !== WebInspector.DockConfiguration.Undocked;
+
+    this._ignoreToolbarModeDidChangeEvents = true;
+
+    if (side === WebInspector.DockConfiguration.Bottom) {
+        document.body.classList.add("docked", WebInspector.DockConfiguration.Bottom);
+        document.body.classList.remove("window-inactive", WebInspector.DockConfiguration.Right, WebInspector.DockConfiguration.Left);
+    } else if (side === WebInspector.DockConfiguration.Right) {
+        document.body.classList.add("docked", WebInspector.DockConfiguration.Right);
+        document.body.classList.remove("window-inactive", WebInspector.DockConfiguration.Bottom, WebInspector.DockConfiguration.Left);
+    } else if (side === WebInspector.DockConfiguration.Left) {
+        document.body.classList.add("docked", WebInspector.DockConfiguration.Left);
+        document.body.classList.remove("window-inactive", WebInspector.DockConfiguration.Bottom, WebInspector.DockConfiguration.Right);
+    } else
+        document.body.classList.remove("docked", WebInspector.DockConfiguration.Right, WebInspector.DockConfiguration.Left, WebInspector.DockConfiguration.Bottom);
+
+    this._ignoreToolbarModeDidChangeEvents = false;
+
+    this._updateDockNavigationItems();
+
+    if (!this.dockedConfigurationSupportsSplitContentBrowser() && !this.doesCurrentTabSupportSplitContentBrowser())
+        this.hideSplitConsole();
+};
+
+WebInspector.updateVisibilityState = function(visible)
+{
+    this.visible = visible;
+    this.notifications.dispatchEventToListeners(WebInspector.Notification.VisibilityStateDidChange);
+};
+
+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(saveData.content);
+    if (!saveData.url || !saveData.content)
+        return;
+
+    let suggestedName = parseURL(saveData.url).lastPathComponent;
+    if (!suggestedName) {
+        suggestedName = WebInspector.UIString("Untitled");
+        let dataURLTypeMatch = /^data:([^;]+)/.exec(saveData.url);
+        if (dataURLTypeMatch)
+            suggestedName += WebInspector.fileExtensionForMIMEType(dataURLTypeMatch[1]) || "";
+    }
+
+    if (typeof saveData.content === "string") {
+        const base64Encoded = false;
+        InspectorFrontendHost.save(suggestedName, saveData.content, base64Encoded, forceSaveAs || saveData.forceSaveAs);
+        return;
+    }
+
+    let fileReader = new FileReader;
+    fileReader.readAsDataURL(saveData.content);
+    fileReader.addEventListener("loadend", () => {
+        let dataURLComponents = parseDataURL(fileReader.result);
+
+        const base64Encoded = true;
+        InspectorFrontendHost.save(suggestedName, dataURLComponents.data, base64Encoded, forceSaveAs || saveData.forceSaveAs);
+    });
+};
+
+WebInspector.isConsoleFocused = function()
+{
+    return this.quickConsole.prompt.focused;
+};
+
+WebInspector.isShowingSplitConsole = function()
+{
+    return !this.splitContentBrowser.element.classList.contains("hidden");
+};
+
+WebInspector.dockedConfigurationSupportsSplitContentBrowser = function()
+{
+    return this._dockConfiguration !== WebInspector.DockConfiguration.Bottom;
+};
+
+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)
+{
+    requestedScope = requestedScope || WebInspector.LogContentView.Scopes.All;
+
+    this.hideSplitConsole();
+
+    this.consoleContentView.scopeBar.item(requestedScope).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.indentString = function()
+{
+    if (WebInspector.settings.indentWithTabs.value)
+        return "\t";
+    return " ".repeat(WebInspector.settings.indentUnit.value);
+};
+
+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;
+
+    if (representedObject instanceof WebInspector.Collection)
+        return WebInspector.CollectionContentView;
+
+    return null;
+};
+
+WebInspector.tabContentViewForRepresentedObject = function(representedObject, options = {})
+{
+    let tabContentView = this.tabBrowser.bestTabContentViewForRepresentedObject(representedObject, options);
+    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, options = {})
+{
+    let tabContentView = this.tabContentViewForRepresentedObject(representedObject, options);
+    console.assert(tabContentView);
+    if (!tabContentView)
+        return;
+
+    this.tabBrowser.showTabForContentView(tabContentView);
+    tabContentView.showRepresentedObject(representedObject, cookie);
+};
+
+WebInspector.showMainFrameDOMTree = function(nodeToSelect, options = {})
+{
+    console.assert(WebInspector.frameResourceManager.mainFrame);
+    if (!WebInspector.frameResourceManager.mainFrame)
+        return;
+    this.showRepresentedObject(WebInspector.frameResourceManager.mainFrame.domTree, {nodeToSelect}, options);
+};
+
+WebInspector.showSourceCodeForFrame = function(frameIdentifier, options = {})
+{
+    var frame = WebInspector.frameResourceManager.frameForIdentifier(frameIdentifier);
+    if (!frame) {
+        this._frameIdentifierToShowSourceCodeWhenAvailable = frameIdentifier;
+        return;
+    }
+
+    this._frameIdentifierToShowSourceCodeWhenAvailable = undefined;
+
+    this.showRepresentedObject(frame, null, options);
+};
+
+WebInspector.showSourceCode = function(sourceCode, options = {})
+{
+    const positionToReveal = options.positionToReveal;
+
+    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, options);
+};
+
+WebInspector.showSourceCodeLocation = function(sourceCodeLocation, options = {})
+{
+    this.showSourceCode(sourceCodeLocation.displaySourceCode, Object.shallowMerge(options, {
+        positionToReveal: sourceCodeLocation.displayPosition()
+    }));
+};
+
+WebInspector.showOriginalUnformattedSourceCodeLocation = function(sourceCodeLocation, options = {})
+{
+    this.showSourceCode(sourceCodeLocation.sourceCode, Object.shallowMerge(options, {
+        positionToReveal: sourceCodeLocation.position(),
+        forceUnformatted: true
+    }));
+};
+
+WebInspector.showOriginalOrFormattedSourceCodeLocation = function(sourceCodeLocation, options = {})
+{
+    this.showSourceCode(sourceCodeLocation.sourceCode, Object.shallowMerge(options, {
+        positionToReveal: sourceCodeLocation.formattedPosition()
+    }));
+};
+
+WebInspector.showOriginalOrFormattedSourceCodeTextRange = function(sourceCodeTextRange, options = {})
+{
+    var textRangeToSelect = sourceCodeTextRange.formattedTextRange;
+    this.showSourceCode(sourceCodeTextRange.sourceCode, Object.shallowMerge(options, {
+        positionToReveal: textRangeToSelect.startPosition(),
+        textRangeToSelect
+    }));
+};
+
+WebInspector.showResourceRequest = function(resource, options = {})
+{
+    this.showRepresentedObject(resource, {[WebInspector.ResourceClusterContentView.ContentViewIdentifierCookieKey]: WebInspector.ResourceClusterContentView.RequestIdentifier}, options);
+};
+
+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._mouseDown = function(event)
+{
+    if (this.toolbar.element.isSelfOrAncestor(event.target))
+        this._toolbarMouseDown(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(WebInspector.DockConfiguration.Undocked);
+};
+
+WebInspector._dockBottom = function(event)
+{
+    InspectorFrontendHost.requestSetDockSide(WebInspector.DockConfiguration.Bottom);
+};
+
+WebInspector._dockRight = function(event)
+{
+    InspectorFrontendHost.requestSetDockSide(WebInspector.DockConfiguration.Right);
+};
+
+WebInspector._dockLeft = function(event)
+{
+    InspectorFrontendHost.requestSetDockSide(WebInspector.DockConfiguration.Left);
+};
+
+WebInspector._togglePreviousDockConfiguration = function(event)
+{
+    InspectorFrontendHost.requestSetDockSide(this._previousDockConfiguration);
+};
+
+WebInspector._updateDockNavigationItems = function()
+{
+    if (this._dockingAvailable || this.docked) {
+        this._closeToolbarButton.hidden = !this.docked;
+        this._undockToolbarButton.hidden = this._dockConfiguration === WebInspector.DockConfiguration.Undocked;
+        this._dockBottomToolbarButton.hidden = this._dockConfiguration === WebInspector.DockConfiguration.Bottom;
+        this._dockToSideToolbarButton.hidden = this._dockConfiguration === WebInspector.DockConfiguration.Right || this._dockConfiguration === WebInspector.DockConfiguration.Left;
+    } else {
+        this._closeToolbarButton.hidden = true;
+        this._undockToolbarButton.hidden = true;
+        this._dockBottomToolbarButton.hidden = true;
+        this._dockToSideToolbarButton.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.tabBar.selectedTabBarItem.representedObject.constructor.shouldSaveTab())
+        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._dockConfiguration === WebInspector.DockConfiguration.Right || this._dockConfiguration === WebInspector.DockConfiguration.Left)
+        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;
+
+    event[WebInspector.Popover.EventPreventDismissSymbol] = true;
+
+    let windowProperty = this._dockConfiguration === WebInspector.DockConfiguration.Bottom ? "innerHeight" : "innerWidth";
+    let eventScreenProperty = this._dockConfiguration === WebInspector.DockConfiguration.Bottom ? "screenY" : "screenX";
+    let eventClientProperty = this._dockConfiguration === WebInspector.DockConfiguration.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 (this._dockConfiguration === WebInspector.DockConfiguration.Left) {
+            // If the mouse is travelling rightward but is positioned left of the resizer, ignore the event.
+            if (delta > 0 && clientPosition < firstClientPosition)
+                return;
+
+            // If the mouse is travelling leftward but is positioned to the right of the resizer, ignore the event.
+            if (delta < 0 && clientPosition > window[windowProperty])
+                return;
+
+            // We later subtract the delta from the current position, but since the inspected view and inspector view
+            // are flipped when docked to left, we want dragging to have the opposite effect from docked to right.
+            delta *= -1;
+        } else {
+            // If the mouse is travelling downward/rightward but is positioned above/left of the resizer, ignore the event.
+            if (delta > 0 && clientPosition < firstClientPosition)
+                return;
+
+            // If the mouse is travelling upward/leftward but is positioned below/right of the resizer, ignore the event.
+            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 *= this.getZoomFactor();
+
+        if (this._dockConfiguration === WebInspector.DockConfiguration.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._dockConfiguration === WebInspector.DockConfiguration.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;
+
+    event[WebInspector.Popover.EventPreventDismissSymbol] = true;
+
+    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)
+{
+    let contentBrowser = this._focusedOrVisibleContentBrowser();
+    if (!contentBrowser)
+        return;
+
+    contentBrowser.showFindBanner();
+};
+
+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._clear = function(event)
+{
+    let contentView = this.focusedOrVisibleContentView();
+    if (!contentView || typeof contentView.handleClearShortcut !== "function") {
+        // If the current content view is unable to handle this event, clear the console to reset
+        // the dashboard counters.
+        this.logManager.requestClearMessages();
+        return;
+    }
+
+    contentView.handleClearShortcut(event);
+};
+
+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 = this.getZoomFactor();
+    if (currentZoom + epsilon >= maximumZoom) {
+        InspectorFrontendHost.beep();
+        return;
+    }
+
+    this.setZoomFactor(Math.min(maximumZoom, currentZoom + 0.2));
+};
+
+WebInspector._decreaseZoom = function(event)
+{
+    const epsilon = 0.0001;
+    const minimumZoom = 0.6;
+    let currentZoom = this.getZoomFactor();
+    if (currentZoom - epsilon <= minimumZoom) {
+        InspectorFrontendHost.beep();
+        return;
+    }
+
+    this.setZoomFactor(Math.max(minimumZoom, currentZoom - 0.2));
+};
+
+WebInspector._resetZoom = function(event)
+{
+    this.setZoomFactor(1);
+};
+
+WebInspector.getZoomFactor = function()
+{
+    return WebInspector.settings.zoomFactor.value;
+};
+
+WebInspector.setZoomFactor = function(factor)
+{
+    InspectorFrontendHost.setZoomFactor(factor);
+    // Round-trip through the frontend host API in case the requested factor is not used.
+    WebInspector.settings.zoomFactor.value = InspectorFrontendHost.zoomFactor();
+};
+
+WebInspector.resolvedLayoutDirection = function()
+{
+    let layoutDirection = WebInspector.settings.layoutDirection.value;
+    if (layoutDirection === WebInspector.LayoutDirection.System)
+        layoutDirection = InspectorFrontendHost.userInterfaceLayoutDirection();
+
+    return layoutDirection;
+}
+
+WebInspector.setLayoutDirection = function(value)
+{
+    if (!Object.values(WebInspector.LayoutDirection).includes(value))
+        WebInspector.reportInternalError("Unknown layout direction requested: " + value);
+
+    if (value === WebInspector.settings.layoutDirection.value)
+        return;
+
+    WebInspector.settings.layoutDirection.value = value;
+
+    if (value === WebInspector.LayoutDirection.RTL && this._dockConfiguration === WebInspector.DockConfiguration.Right)
+        this._dockLeft();
+
+    if (value === WebInspector.LayoutDirection.LTR && this._dockConfiguration === WebInspector.DockConfiguration.Left)
+        this._dockRight();
+
+    window.location.reload();
+};
+
+WebInspector._showTabAtIndex = function(i, event)
+{
+    if (i <= WebInspector.tabBar.tabBarItems.length)
+        WebInspector.tabBar.selectedTabBarItem = i - 1;
+};
+
+WebInspector._showJavaScriptTypeInformationSettingChanged = function(event)
+{
+    if (this.showJavaScriptTypeInformationSetting.value) {
+        for (let target of WebInspector.targets)
+            target.RuntimeAgent.enableTypeProfiler();
+    } else {
+        for (let target of WebInspector.targets)
+            target.RuntimeAgent.disableTypeProfiler();
+    }
+};
+
+WebInspector._enableControlFlowProfilerSettingChanged = function(event)
+{
+    if (this.enableControlFlowProfilerSetting.value) {
+        for (let target of WebInspector.targets)
+            target.RuntimeAgent.enableControlFlowProfiler();
+    } else {
+        for (let target of WebInspector.targets)
+            target.RuntimeAgent.disableControlFlowProfiler();
+    }
+};
+
+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()
+{
+    var button = document.createElement("button");
+    button.addEventListener("mousedown", (event) => { event.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, WebInspector.assumingMainTarget())[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);
+
+        if (linkString.startsWith("data:") || linkString.startsWith("javascript:") || linkString.startsWith("mailto:")) {
+            container.append(linkString);
+            string = string.substring(linkIndex + linkString.length, string.length);
+            continue;
+        }
+
+        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((error, data) => {
+        this._downloadingPage = false;
+        this._updateDownloadToolbarButton();
+
+        if (error)
+            return;
+
+        let mainFrame = WebInspector.frameResourceManager.mainFrame;
+        let archiveName = mainFrame.mainResource.urlComponents.host || mainFrame.mainResource.displayName || "Archive";
+        let url = "web-inspector:///" + encodeURI(archiveName) + ".webarchive";
+
+        InspectorFrontendHost.save(url, data, true, true);
+    });
+};
+
+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 false;
+
+    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 === 1)
+        window.addEventListener("keydown", WebInspector._sharedWindowKeydownListener, true);
+    else if (!this._windowKeydownListeners.length)
+        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;
+        }
+    }
+};
+
+WebInspector.reportInternalError = function(errorOrString, details={})
+{
+    // The 'details' object includes additional information from the caller as free-form string keys and values.
+    // Each key and value will be shown in the uncaught exception reporter, console error message, or in
+    // a pre-filled bug report generated for this internal error.
+
+    let error = (errorOrString instanceof Error) ? errorOrString : new Error(errorOrString);
+    error.details = details;
+
+    // The error will be displayed in the Uncaught Exception Reporter sheet if DebugUI is enabled.
+    if (WebInspector.isDebugUIEnabled()) {
+        // This assert allows us to stop the debugger at an internal exception. It doesn't re-throw
+        // exceptions because the original exception would be lost through window.onerror.
+        // This workaround can be removed once <https://webkit.org/b/158192> is fixed.
+        console.assert(false, "An internal exception was thrown.", error);
+        handleInternalException(error);
+    } else
+        console.error(error);
+};
+
+Object.defineProperty(WebInspector, "targets",
+{
+    get() { return this.targetManager.targets; }
+});
+
+// Many places assume the main target because they cannot yet be
+// used by reached by Worker debugging. Eventually, once all
+// Worker domains have been implemented, all of these must be
+// handled properly.
+WebInspector.assumingMainTarget = function()
+{
+    return WebInspector.mainTarget;
+};
+
+// OpenResourceDialog delegate
+
+WebInspector.dialogWasDismissed = function(dialog)
+{
+    let representedObject = dialog.representedObject;
+    if (!representedObject)
+        return;
+
+    WebInspector.showRepresentedObject(representedObject, dialog.cookie);
+};
+
+WebInspector.DockConfiguration = {
+    Right: "right",
+    Left: "left",
+    Bottom: "bottom",
+    Undocked: "undocked",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/Object.js b/Source/WebInspectorUI/UserInterface/Base/Object.js
new file mode 100644
index 000000000..2a91983af
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/Object.js
@@ -0,0 +1,229 @@
+/*
+ * 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 null;
+
+        console.assert(listener, "Object.addEventListener: invalid listener ", listener, "(event type: ", eventType, "thisObject: ", thisObject, ")");
+        if (!listener)
+            return null;
+
+        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);
+        return 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.");
+    }
+
+    static awaitEvent(eventType)
+    {
+        let wrapper = new WebInspector.WrappedPromise;
+        this.singleFireEventListener(eventType, (event) => wrapper.resolve(event));
+        return wrapper.promise;
+    }
+
+    // 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); }
+    awaitEvent() { return WebInspector.Object.awaitEvent.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",
+    VisibilityStateDidChange: "visibility-state-did-change",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/Platform.js b/Source/WebInspectorUI/UserInterface/Base/Platform.js
new file mode 100644
index 000000000..65764ec7d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/Platform.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 "12":
+            WebInspector.Platform.version.name = "sierra";
+            break;
+        case "11":
+            WebInspector.Platform.version.name = "el-capitan";
+            break;
+        case "10":
+            WebInspector.Platform.version.name = "yosemite";
+            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..257524e3f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/Setting.js
@@ -0,0 +1,118 @@
+/*
+ * 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"
+};
+
+WebInspector.settings = {
+    enableLineWrapping: new WebInspector.Setting("enable-line-wrapping", false),
+    indentUnit: new WebInspector.Setting("indent-unit", 4),
+    tabSize: new WebInspector.Setting("tab-size", 4),
+    indentWithTabs: new WebInspector.Setting("indent-with-tabs", false),
+    showWhitespaceCharacters: new WebInspector.Setting("show-whitespace-characters", false),
+    showInvalidCharacters: new WebInspector.Setting("show-invalid-characters", false),
+    clearLogOnNavigate: new WebInspector.Setting("clear-log-on-navigate", true),
+    clearNetworkOnNavigate: new WebInspector.Setting("clear-network-on-navigate", true),
+    zoomFactor: new WebInspector.Setting("zoom-factor", 1),
+    // FIXME: change initial value to 'system' once we are happy with RTL support.
+    // This will cause Web Inspector to use the system user interface layout direction.
+    layoutDirection: new WebInspector.Setting("layout-direction", "ltr"),
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/URLUtilities.js b/Source/WebInspectorUI/UserInterface/Base/URLUtilities.js
new file mode 100644
index 000000000..e3935f504
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/URLUtilities.js
@@ -0,0 +1,265 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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/165155> Web Inspector: Use URL constructor to better handle all kinds of URLs
+
+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..06c2f1cb5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/Utilities.js
@@ -0,0 +1,1509 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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 enDash = "\u2013";
+var figureDash = "\u2012";
+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.
+
+        // Only objects can proceed.
+        if (!(a instanceof Object) || !(b instanceof Object))
+            return false;
+
+        // Check for strict equality in case they are the same object.
+        if (a === b)
+            return true;
+
+        // Use an optimized version of shallowEqual for arrays.
+        if (Array.isArray(a) && Array.isArray(b))
+            return Array.shallowEqual(a, b);
+
+        if (a.constructor !== b.constructor)
+            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, "shallowMerge",
+{
+    value(a, b)
+    {
+        let result = Object.shallowCopy(a);
+        let keys = Object.keys(b);
+        for (let i = 0; i < keys.length; ++i) {
+            console.assert(!result.hasOwnProperty(keys[i]) || result[keys[i]] === b[keys[i]], keys[i]);
+            result[keys[i]] = b[keys[i]];
+        }
+        return result;
+    }
+});
+
+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, "fromObject",
+{
+    value: function(object)
+    {
+        let map = new Map;
+        for (let key in object)
+            map.set(key, object[key]);
+        return map;
+    }
+});
+
+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, "shallowEqual",
+{
+    value: function(a, b)
+    {
+        if (!Array.isArray(a) || !Array.isArray(b))
+            return false;
+
+        if (a === b)
+            return true;
+
+        let length = a.length;
+
+        if (length !== b.length)
+            return false;
+
+        for (let i = 0; i < length; ++i) {
+            if (a[i] === b[i])
+                continue;
+
+            if (!Object.shallowEqual(a[i], b[i]))
+                return false;
+        }
+
+        return true;
+    }
+});
+
+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, "toggleIncludes",
+{
+    value: function(value, force)
+    {
+        let exists = this.includes(value);
+        if (exists === !!force)
+            return;
+
+        if (exists)
+            this.remove(value);
+        else
+            this.push(value);
+    }
+});
+
+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, "isLowerCase",
+{
+    value: function()
+    {
+        return String(this) === this.toLowerCase();
+    }
+});
+
+Object.defineProperty(String.prototype, "isUpperCase",
+{
+    value: function()
+    {
+        return String(this) === this.toUpperCase();
+    }
+});
+
+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, "removeWhitespace",
+{
+    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;
+                }
+            }
+
+            const defaultPrecision = 6;
+
+            let precision = defaultPrecision;
+            if (format[index] === ".") {
+                // This is a precision specifier. If no digit follows the ".",
+                // then use the default precision of six digits (ISO C99 specification).
+                ++index;
+
+                precision = parseInt(format.substring(index), 10);
+                if (isNaN(precision))
+                    precision = defaultPrecision;
+
+                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 parseInt(substitution);
+        },
+
+        f: function(substitution, token)
+        {
+            let value = parseFloat(substitution);
+            if (isNaN(value))
+                return NaN;
+
+            let options = {
+                minimumFractionDigits: token.precision,
+                maximumFractionDigits: token.precision,
+                useGrouping: false
+            };
+            return value.toLocaleString(undefined, options);
+        },
+
+        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 + "\", \"" + Array.from(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(String.prototype, "hasMatchingEscapedQuotes",
+{
+    value: function()
+    {
+        return /^\"(?:[^\"\\]|\\.)*\"$/.test(this) || /^\'(?:[^\'\\]|\\.)*\'$/.test(this);
+    }
+});
+
+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, "percentageString",
+{
+    value: function(fraction, precision = 1)
+    {
+        console.assert(fraction >= 0 && fraction <= 1);
+        return fraction.toLocaleString(undefined, {minimumFractionDigits: precision, style: "percent"});
+    }
+});
+
+Object.defineProperty(Number, "secondsToMillisecondsString",
+{
+    value: function(seconds, higherResolution)
+    {
+        let ms = seconds * 1000;
+
+        if (higherResolution)
+            return WebInspector.UIString("%.2fms").format(ms);
+        return WebInspector.UIString("%.1fms").format(ms);
+    }
+});
+
+Object.defineProperty(Number, "secondsToString",
+{
+    value: function(seconds, higherResolution)
+    {
+        let ms = seconds * 1000;
+        if (!ms)
+            return WebInspector.UIString("%.0fms").format(0);
+
+        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(Number, "abbreviate",
+{
+    value: function(num)
+    {
+        if (num < 1000)
+            return num;
+
+        if (num < 1000000)
+            return WebInspector.UIString("%.1fK").format(Math.round(num / 100) / 10);
+
+        if (num < 1000000000)
+            return WebInspector.UIString("%.1fM").format(Math.round(num / 100000) / 10);
+
+        return WebInspector.UIString("%.1fB").format(Math.round(num / 100000000) / 10);
+    }
+});
+
+Object.defineProperty(Number.prototype, "maxDecimals",
+{
+    value(decimals)
+    {
+        let power = 10 ** decimals;
+        return Math.round(this * power) / power;
+    }
+});
+
+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() {
+    // The `debounce` function lets you call any function on an object with a delay
+    // and if the function keeps getting called, the delay gets reset. Since `debounce`
+    // returns a Proxy, you can cache it and call multiple functions with the same delay.
+
+    // Use: object.debounce(200).foo("Argument 1", "Argument 2")
+    // Note: The last call's arguments get used for the delayed call.
+
+    const debounceTimeoutSymbol = Symbol("debounce-timeout");
+    const debounceSoonProxySymbol = Symbol("debounce-soon-proxy");
+
+    Object.defineProperty(Object.prototype, "soon",
+    {
+        get: function()
+        {
+            if (!this[debounceSoonProxySymbol])
+                this[debounceSoonProxySymbol] = this.debounce(0);
+            return this[debounceSoonProxySymbol];
+        }
+    });
+
+    Object.defineProperty(Object.prototype, "debounce",
+    {
+        value: function(delay)
+        {
+            console.assert(delay >= 0);
+
+            return new Proxy(this, {
+                get(target, property, receiver) {
+                    return (...args) => {
+                        let original = target[property];
+                        console.assert(typeof original === "function");
+
+                        if (original[debounceTimeoutSymbol])
+                            clearTimeout(original[debounceTimeoutSymbol]);
+
+                        let performWork = () => {
+                            original[debounceTimeoutSymbol] = undefined;
+                            original.apply(target, args);
+                        };
+
+                        original[debounceTimeoutSymbol] = setTimeout(performWork, delay);
+                    };
+                }
+            });
+        }
+    });
+
+    Object.defineProperty(Function.prototype, "cancelDebounce",
+    {
+        value: function()
+        {
+            if (!this[debounceTimeoutSymbol])
+                return;
+
+            clearTimeout(this[debounceTimeoutSymbol]);
+            this[debounceTimeoutSymbol] = undefined;
+        }
+    });
+
+    const requestAnimationFrameSymbol = Symbol("peform-on-animation-frame");
+    const requestAnimationFrameProxySymbol = Symbol("perform-on-animation-frame-proxy");
+
+    Object.defineProperty(Object.prototype, "onNextFrame",
+    {
+        get: function()
+        {
+            if (!this[requestAnimationFrameProxySymbol]) {
+                this[requestAnimationFrameProxySymbol] = new Proxy(this, {
+                    get(target, property, receiver) {
+                        return (...args) => {
+                            let original = target[property];
+                            console.assert(typeof original === "function");
+
+                            if (original[requestAnimationFrameSymbol])
+                                return;
+
+                            let performWork = () => {
+                                original[requestAnimationFrameSymbol] = undefined;
+                                original.apply(target, args);
+                            };
+
+                            original[requestAnimationFrameSymbol] = requestAnimationFrame(performWork);
+                        };
+                    }
+                });
+            }
+
+            return this[requestAnimationFrameProxySymbol];
+        }
+    });
+})();
+
+function appendWebInspectorSourceURL(string)
+{
+    if (string.includes("//# sourceURL"))
+        return string;
+    return "\n//# sourceURL=__WebInspectorInternal__\n" + string;
+}
+
+function appendWebInspectorConsoleEvaluationSourceURL(string)
+{
+    if (string.includes("//# sourceURL"))
+        return string;
+    return "\n//# sourceURL=__WebInspectorConsoleEvaluation__\n" + string;
+}
+
+function isWebInspectorInternalScript(url)
+{
+    return url === "__WebInspectorInternal__";
+}
+
+function isWebInspectorConsoleEvaluationScript(url)
+{
+    return url === "__WebInspectorConsoleEvaluation__";
+}
+
+function isWebKitInjectedScript(url)
+{
+    return url && url.startsWith("__InjectedScript_") && url.endsWith(".js");
+}
+
+function isWebKitInternalScript(url)
+{
+    if (isWebInspectorConsoleEvaluationScript(url))
+        return false;
+
+    if (isWebKitInjectedScript(url))
+        return true;
+
+    return url && url.startsWith("__Web") && url.endsWith("__");
+}
+
+function isFunctionStringNativeCode(str)
+{
+    return str.endsWith("{\n    [native code]\n}");
+}
+
+function isTextLikelyMinified(content)
+{
+    const autoFormatMaxCharactersToCheck = 5000;
+    const autoFormatWhitespaceRatio = 0.2;
+
+    let whitespaceScore = 0;
+    let size = Math.min(autoFormatMaxCharactersToCheck, content.length);
+
+    for (let i = 0; i < size; i++) {
+        let char = content[i];
+
+        if (char === " ")
+            whitespaceScore++;
+        else if (char === "\t")
+            whitespaceScore += 4;
+        else if (char === "\n")
+            whitespaceScore += 8;
+    }
+
+    let ratio = whitespaceScore / size;
+    return ratio < autoFormatWhitespaceRatio;
+}
+
+function doubleQuotedString(str)
+{
+    return "\"" + str.replace(/\\/g, "\\\\").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();
+}
+
+if (!window.handlePromiseException) {
+    window.handlePromiseException = function handlePromiseException(error)
+    {
+        console.error("Uncaught exception in Promise", error);
+    };
+}
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/Base/YieldableTask.js b/Source/WebInspectorUI/UserInterface/Base/YieldableTask.js
new file mode 100644
index 000000000..e7ceb5119
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/YieldableTask.js
@@ -0,0 +1,156 @@
+/*
+ * 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.YieldableTask = class YieldableTask extends WebInspector.Object
+{
+    constructor(delegate, items, options={})
+    {
+        super();
+
+        let {workInterval, idleInterval} = options;
+        console.assert(!workInterval || workInterval > 0, workInterval);
+        console.assert(!idleInterval || idleInterval > 0, idleInterval);
+
+        console.assert(delegate && typeof delegate.yieldableTaskWillProcessItem === "function", "Delegate provide an implementation of method 'yieldableTaskWillProcessItem'.");
+
+        console.assert(items instanceof Object && Symbol.iterator in items, "Argument `items` must subclass Object and be iterable.", items);
+
+        // Milliseconds to run before the task should yield.
+        this._workInterval = workInterval || 10;
+        // Milliseconds to idle before asynchronously resuming the task.
+        this._idleInterval = idleInterval || 0;
+
+        this._delegate = delegate;
+
+        this._items = items;
+        this._idleTimeoutIdentifier = undefined;
+        this._processing = false;
+        this._processing = false;
+        this._cancelled = false;
+    }
+
+    // Public
+
+    get processing() { return this._processing; }
+    get cancelled() { return this._cancelled; }
+
+    get idleInterval() { return this._idleInterval; }
+    get workInterval() { return this._workInterval; }
+
+    start()
+    {
+        console.assert(!this._processing);
+        if (this._processing)
+            return;
+
+        console.assert(!this._cancelled);
+        if (this._cancelled)
+            return;
+
+        function* createIteratorForProcessingItems()
+        {
+            let startTime = Date.now();
+            let processedItems = [];
+
+            for (let item of this._items) {
+                if (this._cancelled)
+                    break;
+
+                this._delegate.yieldableTaskWillProcessItem(this, item);
+                processedItems.push(item);
+
+                // Calling out to the delegate may cause the task to be cancelled.
+                if (this._cancelled)
+                    break;
+
+                let elapsedTime = Date.now() - startTime;
+                if (elapsedTime > this._workInterval) {
+                    let returnedItems = processedItems.slice();
+                    processedItems = [];
+                    this._willYield(returnedItems, elapsedTime);
+
+                    yield;
+
+                    startTime = Date.now();
+                }
+            }
+
+            // The task sends a fake yield notification to the delegate so that
+            // the delegate receives notification of all processed items before finishing.
+            if (processedItems.length)
+                this._willYield(processedItems, Date.now() - startTime);
+        }
+
+        this._processing = true;
+        this._pendingItemsIterator = createIteratorForProcessingItems.call(this);
+        this._processPendingItems();
+    }
+
+    cancel()
+    {
+        if (!this._processing)
+            return;
+
+        this._cancelled = true;
+    }
+
+    // Private
+
+    _processPendingItems()
+    {
+        console.assert(this._processing);
+
+        if (this._cancelled)
+            return;
+
+        if (!this._pendingItemsIterator.next().done) {
+            this._idleTimeoutIdentifier = setTimeout(() => { this._processPendingItems(); }, this._idleInterval);
+            return;
+        }
+
+        this._didFinish();
+    }
+
+    _willYield(processedItems, elapsedTime)
+    {
+        if (typeof this._delegate.yieldableTaskDidYield === "function")
+            this._delegate.yieldableTaskDidYield(this, processedItems, elapsedTime);
+    }
+
+    _didFinish()
+    {
+        this._processing = false;
+        this._pendingItemsIterator = null;
+
+        if (this._idleTimeoutIdentifier) {
+            clearTimeout(this._idleTimeoutIdentifier);
+            this._idleTimeoutIdentifier = undefined;
+        }
+
+        if (typeof this._delegate.yieldableTaskDidFinish === "function")
+            this._delegate.yieldableTaskDidFinish(this);
+    }
+};
+
diff --git a/Source/WebInspectorUI/UserInterface/BinarySearch.js b/Source/WebInspectorUI/UserInterface/BinarySearch.js
deleted file mode 100644
index c652d6ef8..000000000
--- a/Source/WebInspectorUI/UserInterface/BinarySearch.js
+++ /dev/null
@@ -1,85 +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;
-    }
-}
-
-function insertObjectIntoSortedArray(value, array, compareFunction)
-{
-   array.splice(insertionIndexForObjectInListSortedByFunction(value, array, compareFunction), 0, value);
-}
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 899f50355..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...
-                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 9ff4f9fbd..000000000
--- a/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.css
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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;
-    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 909834a07..000000000
--- a/Source/WebInspectorUI/UserInterface/Breakpoint.css
+++ /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.
- */
-
-.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.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: rgb(89, 89, 89);
-    font-weight: bold;
-    text-align: right;
-    width: 1px; /* Shrink to fit. */
-    vertical-align: top;
-    line-height: 23px;
-}
-
-.popover .edit-breakpoint-popover-content > table > tr > td {
-    padding-left: 5px;
-}
-
-#edit-breakpoint-popover-condition {
-    width: 100%;
-}
-
-#edit-breakpoint-popoover-auto-continue {
-    margin-left: 0;
-    margin-right: 4px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/Breakpoint.js b/Source/WebInspectorUI/UserInterface/Breakpoint.js
deleted file mode 100644
index 29073d911..000000000
--- a/Source/WebInspectorUI/UserInterface/Breakpoint.js
+++ /dev/null
@@ -1,566 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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);
-        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._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);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.Breakpoint);
-
-WebInspector.Breakpoint.PopoverClassName = "edit-breakpoint-popover-content";
-WebInspector.Breakpoint.WidePopoverClassName = "wide";
-WebInspector.Breakpoint.PopoverConditionInputId = "edit-breakpoint-popover-condition";
-WebInspector.Breakpoint.PopoverOptionsAutoContinueInputId = "edit-breakpoint-popoover-auto-continue";
-WebInspector.Breakpoint.HiddenStyleClassName = "hidden";
-
-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",
-    ActionsDidChange: "breakpoint-actions-did-change",
-    AutoContinueDidChange: "breakpoint-auto-continue-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 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,
-            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,
-            actions: this._serializableActions(),
-            autoContinue: this._autoContinue
-        };
-    },
-
-    cycleToNextMode: function()
-    {
-        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;
-    },
-
-    appendContextMenuItems: function(contextMenu, breakpointDisplayElement)
-    {
-        console.assert(document.body.contains(breakpointDisplayElement), "breakpoint popover display element must be in the DOM");
-
-        var boundingClientRect = breakpointDisplayElement.getBoundingClientRect();
-
-        function editBreakpoint()
-        {
-            this._showEditBreakpointPopover(boundingClientRect);
-        }
-
-        function removeBreakpoint()
-        {
-            WebInspector.debuggerManager.removeBreakpoint(this);
-        }
-
-        function toggleBreakpoint()
-        {
-            this.disabled = !this.disabled;
-        }
-
-        function toggleAutoContinue()
-        {
-            this.autoContinue = !this.autoContinue;
-        }
-
-        function revealOriginalSourceCodeLocation()
-        {
-            WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(this._sourceCodeLocation);
-        }
-
-        if (WebInspector.debuggerManager.isBreakpointEditable(this))
-            contextMenu.appendItem(WebInspector.UIString("Edit Breakpoint…"), editBreakpoint.bind(this));
-
-        if (this.autoContinue && !this.disabled) {
-            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), toggleBreakpoint.bind(this));
-            contextMenu.appendItem(WebInspector.UIString("Cancel Automatic Continue"), toggleAutoContinue.bind(this));
-        } else if (!this.disabled)
-            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), toggleBreakpoint.bind(this));
-        else
-            contextMenu.appendItem(WebInspector.UIString("Enable Breakpoint"), toggleBreakpoint.bind(this));
-
-        if (!this.autoContinue && !this.disabled && this.actions.length)
-            contextMenu.appendItem(WebInspector.UIString("Set to Automatically Continue"), toggleAutoContinue.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));
-        }
-    },
-
-    createAction: function(type, precedingAction)
-    {
-        var newAction = new WebInspector.BreakpointAction(this, type, 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: function(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: function(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);
-    },
-
-    saveIdentityToCookie: function(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: function(action)
-    {
-        var index = this._actions.indexOf(action);
-        console.assert(index !== -1);
-        if (index === -1)
-            return;
-
-        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ActionsDidChange);
-    },
-
-    // Private
-
-    _serializableActions: function()
-    {
-        var actions = [];
-        for (var i = 0; i < this._actions.length; ++i)
-            actions.push(this._actions[i].info);
-        return actions;
-    },
-
-    _popoverToggleEnabledCheckboxChanged: function(event)
-    {
-        this.disabled = !event.target.checked;
-    },
-
-    _popoverConditionInputChanged: function(event)
-    {
-        this.condition = event.target.value;
-    },
-
-    _popoverToggleAutoContinueCheckboxChanged: function(event)
-    {
-        this.autoContinue = event.target.checked;
-    },
-
-    _popoverConditionInputKeyDown: function(event)
-    {
-        if (this._keyboardShortcutEsc.matchesEvent(event) || this._keyboardShortcutEnter.matchesEvent(event)) {
-            this._popover.dismiss();
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    },
-
-    _editBreakpointPopoverContentElement: function()
-    {
-        var content = this._popoverContentElement = document.createElement("div");
-        content.className = WebInspector.Breakpoint.PopoverClassName;
-
-        var checkboxElement = document.createElement("input");
-        checkboxElement.type = "checkbox";
-        checkboxElement.checked = !this._disabled;
-        checkboxElement.addEventListener("change", this._popoverToggleEnabledCheckboxChanged.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");
-
-        if (DebuggerAgent.setBreakpoint.supports("options")) {
-            var actionRow = table.appendChild(document.createElement("tr"));
-            var actionHeader = actionRow.appendChild(document.createElement("th"));
-            var actionData = this._actionsContainer = actionRow.appendChild(document.createElement("td"));
-            var actionLabel = actionHeader.appendChild(document.createElement("label"));
-            actionLabel.textContent = WebInspector.UIString("Action");
-
-            if (!this._actions.length)
-                this._popoverActionsCreateAddActionButton();
-            else {
-                this._popoverContentElement.classList.add(WebInspector.Breakpoint.WidePopoverClassName);
-                for (var i = 0; i < this._actions.length; ++i) {
-                    var breakpointActionView = new WebInspector.BreakpointActionView(this._actions[i], this, true);
-                    this._popoverActionsInsertBreakpointActionView(breakpointActionView, i);
-                }
-            }
-
-            var optionsRow = this._popoverOptionsRowElement = table.appendChild(document.createElement("tr"));
-            if (!this._actions.length)
-                optionsRow.classList.add(WebInspector.Breakpoint.HiddenStyleClassName);
-            var optionsHeader = optionsRow.appendChild(document.createElement("th"));
-            var optionsData = optionsRow.appendChild(document.createElement("td"));
-            var optionsLabel = optionsHeader.appendChild(document.createElement("label"));
-            var optionsCheckbox = this._popoverOptionsCheckboxElement = optionsData.appendChild(document.createElement("input"));
-            var optionsCheckboxLabel = optionsData.appendChild(document.createElement("label"));
-            optionsCheckbox.id = WebInspector.Breakpoint.PopoverOptionsAutoContinueInputId;
-            optionsCheckbox.type = "checkbox";
-            optionsCheckbox.checked = this._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");
-        }
-
-        content.appendChild(checkboxLabel);
-        content.appendChild(table);
-
-        return content;
-    },
-
-    _popoverActionsCreateAddActionButton: function()
-    {
-        this._popoverContentElement.classList.remove(WebInspector.Breakpoint.WidePopoverClassName);
-        this._actionsContainer.removeChildren();
-
-        var addActionButton = this._actionsContainer.appendChild(document.createElement("button"));
-        addActionButton.textContent = WebInspector.UIString("Add Action");
-        addActionButton.addEventListener("click", this._popoverActionsAddActionButtonClicked.bind(this));
-    },
-
-    _popoverActionsAddActionButtonClicked: function(event)
-    {
-        this._popoverContentElement.classList.add(WebInspector.Breakpoint.WidePopoverClassName);
-        this._actionsContainer.removeChildren();
-
-        var newAction = this.createAction(WebInspector.Breakpoint.DefaultBreakpointActionType);
-        var newBreakpointActionView = new WebInspector.BreakpointActionView(newAction, this);
-        this._popoverActionsInsertBreakpointActionView(newBreakpointActionView, -1);
-        this._popoverOptionsRowElement.classList.remove(WebInspector.Breakpoint.HiddenStyleClassName);
-        this._popover.update();
-    },
-
-    _popoverActionsInsertBreakpointActionView: function(breakpointActionView, index)
-    {
-        if (index === -1)
-            this._actionsContainer.appendChild(breakpointActionView.element);
-        else {
-            var nextElement = this._actionsContainer.children[index + 1] || null;
-            this._actionsContainer.insertBefore(breakpointActionView.element, nextElement);
-        }
-    },
-
-    breakpointActionViewAppendActionView: function(breakpointActionView, newAction)
-    {
-        var newBreakpointActionView = new WebInspector.BreakpointActionView(newAction, this);
-
-        var index = 0;
-        var children = this._actionsContainer.children;
-        for (var i = 0; children.length; ++i) {
-            if (children[i] === breakpointActionView.element) {
-                index = i;
-                break;
-            }
-        }
-
-        this._popoverActionsInsertBreakpointActionView(newBreakpointActionView, index);
-        this._popoverOptionsRowElement.classList.remove(WebInspector.Breakpoint.HiddenStyleClassName);
-
-        this._popover.update();
-    },
-
-    breakpointActionViewRemoveActionView: function(breakpointActionView)
-    {
-        breakpointActionView.element.remove();
-
-        if (!this._actionsContainer.children.length) {
-            this._popoverActionsCreateAddActionButton();
-            this._popoverOptionsRowElement.classList.add(WebInspector.Breakpoint.HiddenStyleClassName);
-            this._popoverOptionsCheckboxElement.checked = false;
-        }
-
-        this._popover.update();
-    },
-
-    breakpointActionViewResized: function(breakpointActionView)
-    {
-        this._popover.update();
-    },
-
-    willDismissPopover: function(popover)
-    {
-        console.assert(this._popover === popover);
-        delete this._popoverContentElement;
-        delete this._popoverOptionsRowElement;
-        delete this._popoverOptionsCheckboxElement;
-        delete this._actionsContainer;
-        delete this._popover;
-    },
-
-    _showEditBreakpointPopover: function(boundingClientRect)
-    {
-        var bounds = WebInspector.Rect.rectFromClientRect(boundingClientRect);
-        bounds.origin.x -= 1; // Move the anchor left one pixel so it looks more centered.
-
-        this._popover = this._popover || new WebInspector.Popover(this);
-        this._popover.content = this._editBreakpointPopoverContentElement();
-        this._popover.present(bounds.pad(2), [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/BreakpointAction.js b/Source/WebInspectorUI/UserInterface/BreakpointAction.js
deleted file mode 100644
index b9ff1b232..000000000
--- a/Source/WebInspectorUI/UserInterface/BreakpointAction.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.BreakpointAction = function(breakpoint, typeOrInfo, data)
-{
-    WebInspector.Object.call(this);
-
-    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");
-};
-
-WebInspector.BreakpointAction.Type = {
-    Log: "log",
-    Evaluate: "evaluate",
-    Sound: "sound",
-    Probe: "probe"
-}
-
-WebInspector.BreakpointAction.prototype = {
-    constructor: WebInspector.BreakpointAction,
-
-    // Public
-
-    get breakpoint()
-    {
-        return this._breakpoint;
-    },
-
-    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};
-        if (this._data)
-            obj.data = this._data;
-        return obj;
-    }
-};
-
-WebInspector.BreakpointAction.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/BreakpointActionView.css b/Source/WebInspectorUI/UserInterface/BreakpointActionView.css
deleted file mode 100644
index 8d81eab7a..000000000
--- a/Source/WebInspectorUI/UserInterface/BreakpointActionView.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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 rgb(170, 170, 170);
-    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 {
-    -webkit-filter: brightness(50%);
-}
-
-.breakpoint-action-append-button {
-    background-image: url(Images/BreakpointActionAdd.svg), -webkit-linear-gradient(top, rgb(250, 250, 250), rgb(200, 200, 200));
-}
-
-.breakpoint-action-remove-button {
-    background-image: url(Images/BreakpointActionRemove.svg), -webkit-linear-gradient(top, rgb(250, 250, 250), rgb(200, 200, 200));
-}
-
-.breakpoint-action-block-body {
-    margin: 1px 2px 6px 2px;
-    padding: 8px;
-    width: 100%;
-    border-radius: 4px;
-    border: 1px solid rgb(190, 190, 190);
-    background-color: rgba(222, 222, 222, 0.95);
-    -webkit-box-shadow: inset 0 0 2px rgb(200, 200, 200);
-}
-
-.breakpoint-action-block-body > input {
-    width: 100%;
-}
-
-.breakpoint-action-eval-editor {
-    padding: 4px 0 2px 0;
-    -webkit-appearance: textfield;
-    border: 1px solid rgb(200, 200, 200);
-    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/BreakpointActionView.js b/Source/WebInspectorUI/UserInterface/BreakpointActionView.js
deleted file mode 100644
index eb54d37b6..000000000
--- a/Source/WebInspectorUI/UserInterface/BreakpointActionView.js
+++ /dev/null
@@ -1,202 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = function(action, delegate, omitFocus)
-{
-    WebInspector.Object.call(this);
-
-    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._removeActionButtonClicked.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);
-};
-
-WebInspector.BreakpointActionView.displayStringForType = function(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 "";
-    }
-}
-
-WebInspector.BreakpointActionView.prototype = {
-    constructor: WebInspector.BreakpointActionView,
-
-    // Public
-
-    get action()
-    {
-        return this._action;
-    },
-
-    get element()
-    {
-        return this._element;
-    },
-
-    // Private
-
-    _pickerChanged: function(event)
-    {
-        var newType = event.target.value;
-        this._action = this._action.breakpoint.recreateAction(newType, this._action);
-        this._updateBody();
-        this._delegate.breakpointActionViewResized(this);
-    },
-
-    _appendActionButtonClicked: function(event)
-    {
-        var newAction = this._action.breakpoint.createAction(WebInspector.Breakpoint.DefaultBreakpointActionType, this._action);
-        this._delegate.breakpointActionViewAppendActionView(this, newAction);
-    },
-
-    _removeActionButtonClicked: function(event)
-    {
-        this._action.breakpoint.removeAction(this._action);
-        this._delegate.breakpointActionViewRemoveActionView(this);
-    },
-
-    _updateBody: function(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 = CodeMirror(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));
-
-            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: function(event)
-    {
-        this._action.data = event.target.value;
-    },
-
-    _codeMirrorBlurred: function(event)
-    {
-        this._action.data = this._codeMirror.getValue();
-    },
-
-    _codeMirrorViewportChanged: function(event)
-    {
-        this._delegate.breakpointActionViewResized(this);
-    }
-};
-
-WebInspector.BreakpointActionView.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/BreakpointIcons.css b/Source/WebInspectorUI/UserInterface/BreakpointIcons.css
deleted file mode 100644
index b95d2e689..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.svg);
-}
-
-.breakpoint-exception-icon .icon {
-    content: url(Images/Exception.svg);
-}
diff --git a/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css b/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css
deleted file mode 100644
index 8e282e7e7..000000000
--- a/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css
+++ /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.
- */
-
-.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;
-}
diff --git a/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js
deleted file mode 100644
index da39cdbd9..000000000
--- a/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js
+++ /dev/null
@@ -1,173 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.AutoContinueDidChange, 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.StatusImageAutoContinueStyleClassName = "auto-continue";
-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.cycleToNextMode();
-        return true;
-    },
-
-    onspace: function()
-    {
-        this._breakpoint.cycleToNextMode();
-        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.autoContinue)
-            this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName);
-        else
-            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName);
-
-        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.AutoContinueDidChange, 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.cycleToNextMode();
-    }
-};
-
-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 61c409e81..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, role)
-{
-    WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, 32, 32, suppressEmboss, role);
-
-    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/CSSCompletions.js b/Source/WebInspectorUI/UserInterface/CSSCompletions.js
deleted file mode 100644
index aef5e50f4..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSCompletions.js
+++ /dev/null
@@ -1,272 +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 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");
-    }
-
-    if (window.CSSAgent)
-        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 18d0b4940..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSKeywordCompletions.js
+++ /dev/null
@@ -1,902 +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);
-
-    // 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.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()"
-    ],
-    "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", "-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()"
-    ],
-    "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()"
-    ],
-    "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()"
-    ],
-    "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()"
-    ],
-    "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()"
-    ],
-    "background-clip": [
-        "border-box", "content-box", "padding-box"
-    ],
-    "-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()", "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-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-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": [
-        "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-column-gap": [
-        "normal", "calc()", "-webkit-calc()"
-    ],
-    "-webkit-column-axis": [
-        "horizontal", "vertical", "auto"
-    ],
-    "-webkit-column-width": [
-        "auto", "calc()", "-webkit-calc()"
-    ],
-    "-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 a4b7360cd..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSObserver.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.CSSObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.CSSObserver.prototype = {
-    constructor: WebInspector.CSSObserver,
-
-    // Events defined by the "CSS" domain.
-
-    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)
-    {
-        WebInspector.domTreeManager.namedFlowCreated(namedFlow);
-    },
-
-    namedFlowRemoved: function(documentNodeId, flowName)
-    {
-        WebInspector.domTreeManager.namedFlowRemoved(documentNodeId, flowName);
-    },
-
-    regionLayoutUpdated: function(namedFlow)
-    {
-        WebInspector.domTreeManager.regionLayoutUpdated(namedFlow);
-    },
-
-    regionOversetChanged: function(namedFlow)
-    {
-        WebInspector.domTreeManager.regionOversetChanged(namedFlow);
-    },
-
-    registeredNamedFlowContentElement: function(documentNodeId, flowName, contentNodeId, nextContentElementNodeId)
-    {
-        WebInspector.domTreeManager.registeredNamedFlowContentElement(documentNodeId, flowName, contentNodeId, nextContentElementNodeId);
-    },
-
-    unregisteredNamedFlowContentElement: function(documentNodeId, flowName, contentNodeId)
-    {
-        WebInspector.domTreeManager.unregisteredNamedFlowContentElement(documentNodeId, flowName, contentNodeId);
-    }
-};
-
-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/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 af0d9c505..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.svg", 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 fc5e3ef70..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js
+++ /dev/null
@@ -1,1006 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.setUniqueBookmark(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()
-        {
-            // Look for color strings and add swatches in front of them.
-            this._codeMirror.createColorMarkers(lineNumber, function(marker, color, colorString) {
-                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.backgroundColor = colorString;
-                swatchElement.appendChild(swatchInnerElement);
-
-                var codeMirrorTextMarker = marker.codeMirrorTextMarker;
-                var swatchMarker = this._codeMirror.setUniqueBookmark(codeMirrorTextMarker.find().from, swatchElement);
-
-                swatchInnerElement.__colorTextMarker = codeMirrorTextMarker;
-                swatchInnerElement.__color = color;
-            }.bind(this));
-        }
-
-        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.setUniqueBookmark(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.ColorPicker;
-
-            colorPicker.addEventListener(WebInspector.ColorPicker.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.pad(2), [WebInspector.RectEdge.MIN_X]);
-
-            colorPicker.color = color;
-        }
-    },
-
-    _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.setUniqueBookmark(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.highlightLastHoveredRange();
-                this._tokenTrackingController.enabled = !this._codeMirror.getOption("readOnly");
-            } else {
-                this._tokenTrackingController.removeHighlightedRange();
-                this._tokenTrackingController.enabled = false;
-            }
-        }
-    },
-
-    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 df62c2e47..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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 > .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 f5ebeb4ab..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.svg", "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 d8f049a5b..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleManager.js
+++ /dev/null
@@ -1,367 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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);
-
-    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 = {};
-    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 window.CSSAgent && !!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 6ffd0c86a..000000000
--- a/Source/WebInspectorUI/UserInterface/CallFrame.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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;
-    },
-
-    saveIdentityToCookie: function()
-    {
-        // 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: 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 45d993c24..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.svg);
-}
-
-.event-listener-icon .icon {
-    content: url(Images/EventListener.svg);
-}
-
-.native-icon .icon {
-    content: url(Images/Native.svg);
-}
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/CanvasDataGridNode.js b/Source/WebInspectorUI/UserInterface/CanvasDataGridNode.js
deleted file mode 100644
index f0bbadbcd..000000000
--- a/Source/WebInspectorUI/UserInterface/CanvasDataGridNode.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. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, 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.CanvasDataGridNode = function(profileView, data)
-{
-    WebInspector.DataGridNode.call(this, data, false);
-    this._profileView = profileView;
-}
-
-WebInspector.CanvasDataGridNode.prototype = {
-
-    constructor: WebInspector.CanvasDataGridNode,
-
-    get data()
-    {
-        var data = {};
-        return data;
-    },
-
-    get rawData()
-    {
-        return this._data;
-    },
-
-    createCell: function(columnIdentifier)
-    {
-        var cell = WebInspector.DataGridNode.prototype.createCell.call(this, columnIdentifier);
-        cell.removeChildren();
-
-        if (this.rawData.url) {
-            var wrapperDiv = cell.createChild("div");
-            wrapperDiv.appendChild(this._linkifyLocation(this.rawData.url, this.rawData.lineNumber, this.rawData.columnNumber));
-        }
-
-        return cell;
-    },
-
-    _linkifyLocation: function(url, lineNumber, columnNumber)
-    {
-        return WebInspector.linkifyLocation(url, lineNumber, columnNumber || 0);
-    }
-}
-
-WebInspector.CanvasDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
-
diff --git a/Source/WebInspectorUI/UserInterface/CanvasObserver.js b/Source/WebInspectorUI/UserInterface/CanvasObserver.js
deleted file mode 100644
index 2bd56a740..000000000
--- a/Source/WebInspectorUI/UserInterface/CanvasObserver.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.CanvasObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.CanvasObserver.prototype = {
-    constructor: WebInspector.CanvasObserver,
-
-    // Events defined by the "Canvas" domain.
-
-    contextCreated: function(frameId)
-    {
-        // FIXME: Implement this.
-    },
-
-    traceLogsRemoved: function(frameId, traceLogId)
-    {
-        // FIXME: Implement this.
-    }
-};
-
-WebInspector.CanvasObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CanvasProfileObject.js b/Source/WebInspectorUI/UserInterface/CanvasProfileObject.js
deleted file mode 100644
index e7fd424e4..000000000
--- a/Source/WebInspectorUI/UserInterface/CanvasProfileObject.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.CanvasProfileObject = function(title, id, recording, data)
-{
-    WebInspector.ProfileObject.call(this, WebInspector.CanvasProfileType.TypeId, title, id, recording);
-
-    this._data = data || [];
-};
-
-WebInspector.CanvasProfileObject.prototype = {
-    constructor: WebInspector.CanvasProfileObject,
-
-    get data()
-    {
-        return this._data;
-    },
-
-    set data(data)
-    {
-        this._data = data;
-    }
-};
-
-WebInspector.CanvasProfileObject.prototype.__proto__ = WebInspector.ProfileObject.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CanvasProfileType.js b/Source/WebInspectorUI/UserInterface/CanvasProfileType.js
deleted file mode 100644
index 099981e0b..000000000
--- a/Source/WebInspectorUI/UserInterface/CanvasProfileType.js
+++ /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. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, 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.CanvasProfileType = function()
-{
-    WebInspector.ProfileType.call(this, WebInspector.CanvasProfileType.TypeId, WebInspector.UIString("Collect Canvas Profile"));
-    this._recording = false;
-    this._profileId = 1;
-    WebInspector.CanvasProfileType.instance = this;
-}
-
-WebInspector.CanvasProfileType.TypeId = "CANVAS";
-
-WebInspector.CanvasProfileType.prototype = {
-
-    constructor: WebInspector.CanvasProfileType,
-
-    get buttonTooltip()
-    {
-        return this._recording ? WebInspector.UIString("Stop Canvas profiling.") : WebInspector.UIString("Start Canvas profiling.");
-    },
-
-    buttonClicked: function()
-    {
-        if (this._recording)
-            this.stopRecordingProfile();
-        else
-            this.startRecordingProfile();
-    },
-
-    get treeItemTitle()
-    {
-        return WebInspector.UIString("CANVAS PROFILES");
-    },
-
-    get description()
-    {
-        return WebInspector.UIString("Canvas profiles allow you to examine drawing operations on canvas elements.");
-    },
-
-    reset: function()
-    {
-        this._profileId = 1;
-    },
-
-    nextProfileId: function()
-    {
-        return this._profileId++;
-    },
-
-    isRecordingProfile: function()
-    {
-        return this._recording;
-    },
-
-    setRecordingProfile: function(isProfiling)
-    {
-        this._recording = isProfiling;
-    },
-
-    startRecordingProfile: function()
-    {
-        this._recording = true;
-        // FIXME: This is where we would ask the Canvas Agent to profile.
-    },
-
-    stopRecordingProfile: function(callback)
-    {
-        this._recording = false;
-        // FIXME: This is where we would ask the Canvas Agent to stop profiling.
-        // For now pass in an empty array of canvas calls.
-        callback(null, {data: []});
-    },
-
-    createSidebarTreeElementForProfile: function(profile)
-    {
-        return new WebInspector.ProfileSidebarTreeElement(profile, profile.title, "profile-sidebar-tree-item");
-    },
-
-    createView: function(profile)
-    {
-        return new WebInspector.CanvasProfileView(profile);
-    }
-}
-
-WebInspector.CanvasProfileType.prototype.__proto__ = WebInspector.ProfileType.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CanvasProfileView.js b/Source/WebInspectorUI/UserInterface/CanvasProfileView.js
deleted file mode 100644
index da385c1a4..000000000
--- a/Source/WebInspectorUI/UserInterface/CanvasProfileView.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list 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.CanvasProfileView = function(profile)
-{
-    console.assert(profile instanceof WebInspector.CanvasProfileObject);
-
-    WebInspector.ProfileView.call(this, profile);
-}
-
-WebInspector.CanvasProfileView.prototype = {
-
-    constructor: WebInspector.CanvasProfileView,
-
-    updateLayout: function()
-    {
-        if (this.dataGrid)
-            this.dataGrid.updateLayout();
-    },
-
-    get recordingTitle()
-    {
-        return WebInspector.UIString("Recording Canvas Profile…");
-    },
-
-    displayProfile: function()
-    {
-        var columns = {"number": {title: "#", width: "5%", sortable: false},
-                       "source": {title: WebInspector.UIString("Call"), width: "75%", sortable: false, disclosure: true},
-                       "location": {title: WebInspector.UIString("Location"), width: "20%", sortable: false}};
-
-        this.dataGrid = new WebInspector.DataGrid(columns);
-        this.dataGrid.element.classList.add("canvas-profile-view");
-
-        this.element.appendChild(this.dataGrid.element);
-        this.dataGrid.updateLayout();
-
-        this._createProfileNodes();
-    },
-
-    _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) {
-            var node = new WebInspector.CanvasDataGridNode(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);
-        }
-    }
-
-}
-
-WebInspector.CanvasProfileView.prototype.__proto__ = WebInspector.ProfileView.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 65260da54..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js
+++ /dev/null
@@ -1,541 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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 === "string-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", {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.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.
-            if (previousLength != newLength) {
-                if (selectionStart.line === from.line && selectionStart.ch > from.ch)
-                    selectionStart.ch += newLength - previousLength;
-
-                if (selectionEnd.line === from.line && selectionEnd.ch > from.ch)
-                    selectionEnd.ch += newLength - previousLength;
-            }
-
-            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("boundsForRange", function(range) {
-        var firstCharCoords = this.cursorCoords(range.start);
-        var lastCharCoords = this.cursorCoords(range.end);
-        return new WebInspector.Rect(firstCharCoords.left, firstCharCoords.top, lastCharCoords.right - firstCharCoords.left, firstCharCoords.bottom - firstCharCoords.top);
-    });
-
-    CodeMirror.defineExtension("createColorMarkers", function(lineNumber, callback) {
-        var createdMarkers = [];
-
-        var start = typeof lineNumber === "number" ? lineNumber : 0;
-        var end = typeof lineNumber === "number" ? lineNumber + 1 : this.lineCount();
-
-        // 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;
-
-        for (var lineNumber = start; lineNumber < end; ++lineNumber) {
-            var lineContent = this.getLine(lineNumber);
-            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: lineNumber, ch: match.index};
-                var to = {line: lineNumber, ch: match.index + match[0].length};
-
-                var foundColorMarker = false;
-                var markers = this.findMarksAt(to);
-                for (var j = 0; j < markers.length; ++j) {
-                    if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(markers[j]).type === WebInspector.TextMarker.Type.Color) {
-                        foundColorMarker = true;
-                        break;
-                    }
-                }
-
-                if (foundColorMarker) {
-                    match = colorRegex.exec(lineContent);
-                    continue;
-                }
-
-                var colorString = match[0];
-                var color = WebInspector.Color.fromString(colorString);
-                if (!color) {
-                    match = colorRegex.exec(lineContent);
-                    continue;
-                }
-
-                var marker = this.markText(from, to);
-                marker = new WebInspector.TextMarker(marker, WebInspector.TextMarker.Type.Color);
-
-                createdMarkers.push(marker);
-
-                if (callback)
-                    callback(marker, color, colorString);
-
-                match = colorRegex.exec(lineContent);
-            }
-        }
-
-        return createdMarkers;
-    });
-
-    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.
-    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/CodeMirrorColorEditingController.js b/Source/WebInspectorUI/UserInterface/CodeMirrorColorEditingController.js
deleted file mode 100644
index bd242a0a7..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorColorEditingController.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.CodeMirrorColorEditingController = function(codeMirror, marker)
-{
-    WebInspector.Object.call(this);
-
-    this._codeMirror = codeMirror;
-    this._marker = marker;
-    this._delegate = null;
-
-    this._range = marker.range;
-    this._color = WebInspector.Color.fromString(this.text);
-
-    this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
-}
-
-WebInspector.CodeMirrorColorEditingController.prototype = {
-    constructor: WebInspector.CodeMirrorColorEditingController,
-    __proto__: WebInspector.Object.prototype,
-    
-    // Public
-    
-    get marker()
-    {
-        return this._marker;
-    },
-    
-    get range()
-    {
-        return this._range;
-    },
-
-    get color()
-    {
-        return this._color;
-    },
-    
-    set color(color)
-    {
-        this.text = color.toString();
-        this._color = color;
-    },
-
-    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);
-    },
-    
-    presentHoverMenu: function()
-    {
-        this._hoverMenu = new WebInspector.HoverMenu(this);
-        this._hoverMenu.element.classList.add("color");
-        this._bounds = this._marker.bounds;
-        this._hoverMenu.present(this._bounds);
-    },
-
-    dismissHoverMenu: function()
-    {
-        this._hoverMenu.dismiss();
-    },
-
-    // Protected
-
-    handleEvent: function(event)
-    {
-        if (!this._keyboardShortcutEsc.matchesEvent(event) || !this._popover.visible)
-            return;
-        
-        this.color = this._originalColor;
-        this._popover.dismiss();
-
-        event.stopPropagation();
-        event.preventDefault();
-    },
-
-    hoverMenuButtonWasPressed: function(hoverMenu)
-    {
-        var colorPicker = new WebInspector.ColorPicker;
-        colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
-
-        this._popover = new WebInspector.Popover(this);
-        this._popover.content = colorPicker.element;
-        this._popover.present(this._bounds.pad(2), [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MAX_X]);
-
-        window.addEventListener("keydown", this, true);
-
-        colorPicker.color = this._color;
-
-        hoverMenu.dismiss();
-
-        if (this._delegate && typeof this._delegate.colorEditingControllerDidStartEditing === "function")
-            this._delegate.colorEditingControllerDidStartEditing(this);
-
-        this._originalColor = this._color.copy();
-    },
-    
-    didDismissPopover: function(popover)
-    {
-        delete this._popover;
-        delete this._originalColor;
-
-        window.removeEventListener("keydown", this, true);
-
-        if (this._delegate && typeof this._delegate.colorEditingControllerDidFinishEditing === "function")
-            this._delegate.colorEditingControllerDidFinishEditing(this);
-    },
-    
-    // Private
-    
-    _colorPickerColorChanged: function(event)
-    {
-        this.color = event.target.color;
-    }    
-}
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 c27e16b5c..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.js
+++ /dev/null
@@ -1,824 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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._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);
-};
-
-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;
-    },
-
-    addExtendedCompletionProvider: function(modeName, provider)
-    {
-        this._extendedCompletionProviders[modeName] = provider;
-    },
-
-    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;
-        }
-
-        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: 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 3d99cb64f..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", {
-    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 3a042e317..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.js
+++ /dev/null
@@ -1,509 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.None;
-
-    this._mouseOverDelayDuration = 0;
-    this._mouseOutReleaseDelayDuration = 0;
-    this._classNameForHighlightedRange = null;
-
-    this._enabled = false;
-    this._tracking = false;
-    this._hoveredTokenInfo = null;
-    this._hoveredMarker = null;
-};
-
-WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName = "jump-to-symbol-highlight";
-
-WebInspector.CodeMirrorTokenTrackingController.Mode = {
-    None: "none",
-    NonSymbolTokens: "non-symbol-tokens",
-    JavaScriptExpression: "javascript-expression",
-    MarkedTokens: "marked-tokens"
-}
-
-WebInspector.CodeMirrorTokenTrackingController.prototype = {
-    constructor: WebInspector.CodeMirrorTokenTrackingController,
-
-    // 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._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 candidate()
-    {
-        return this._candidate;
-    },
-
-    get hoveredMarker()
-    {
-        return this._hoveredMarker;
-    },
-    
-    set hoveredMarker(hoveredMarker)
-    {
-        this._hoveredMarker = hoveredMarker;
-    },
-
-    highlightLastHoveredRange: function()
-    {
-        if (this._candidate)
-            this.highlightRange(this._candidate.hoveredTokenRange);
-    },
-
-    highlightRange: function(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 (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: className});
-
-        window.addEventListener("mousemove", this, true);
-    },
-
-    removeHighlightedRange: function()
-    {
-        if (!this._codeMirrorMarkedText)
-            return;
-
-        this._codeMirrorMarkedText.clear();
-        delete this._codeMirrorMarkedText;
-
-        window.removeEventListener("mousemove", this, true);
-    },
-
-    // Private
-
-    _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;
-        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: function(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;
-        }
-    },
-
-    _mouseEntered: function(event)
-    {
-        this._startTracking();
-    },
-
-    _mouseLeft: function(event)
-    {
-        this._stopTracking();
-    },
-
-    _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)
-    {
-        this._updateHoveredTokenInfo({left: event.pageX, top: event.pageY});
-    },
-
-    _updateHoveredTokenInfo: function(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).contains(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._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)
-    {
-        this._resetTrackingStates();
-    },
-
-    _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;
-        case WebInspector.CodeMirrorTokenTrackingController.Mode.MarkedTokens:
-            this._candidate = this._processMarkedToken();
-            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;
-
-        var startPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.start};
-        var endPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.end};
-
-        // 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")
-            };
-        
-            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 (tokenIsInRange(startPosition, selectionRange) || tokenIsInRange(endPosition, selectionRange)) {
-                return {
-                    hoveredToken: this._hoveredTokenInfo.token,
-                    hoveredTokenRange: selectionRange,
-                    expression: this._codeMirror.getSelection(),
-                    expressionRange: selectionRange,
-                };
-            }
-        } 
-
-        // 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};
-        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},
-        };
-    },
-
-    _processMarkedToken: function()
-    {
-        return this._processNonSymbolToken();
-    },
-
-    _resetTrackingStates: function()
-    {
-        clearTimeout(this._tokenHoverTimer);
-        delete this._selectionMayBeInProgress;
-        delete this._hoveredTokenInfo;
-        this.removeHighlightedRange();
-    }
-};
-
-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 edf5cd092..000000000
--- a/Source/WebInspectorUI/UserInterface/Color.js
+++ /dev/null
@@ -1,665 +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.
- */
-
-WebInspector.Color = function(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(function(component) {
-        return isNaN(component);
-    });
-}
-
-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"
-};
-
-WebInspector.Color.fromString = function(colorString)
-{
-    var value = colorString.toLowerCase().replace(/%|\s+/g, "");
-    const transparentNicknames = ["transparent", "rgba(0,0,0,0)", "hsla(0,0,0,0)"];
-    if (transparentNicknames.contains(value)) {
-        var color = new WebInspector.Color(WebInspector.Color.Format.Nickname, [0, 0, 0, 0]);
-        color.nickname = "transparent";
-        color.original = colorString;
-        return color;
-    }
-
-    // Simple - #hex, rgb(), nickname, hsl()
-    var simple = /^(?:#([0-9a-f]{3,6})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
-    var match = colorString.match(simple);
-    if (match) {
-        if (match[1]) { // hex
-            var hex = match[1].toUpperCase();
-            if (hex.length === 3) {
-                return new WebInspector.Color(WebInspector.Color.Format.ShortHEX, [
-                    parseInt(hex.charAt(0) + hex.charAt(0), 16) * 255,
-                    parseInt(hex.charAt(1) + hex.charAt(1), 16) * 255,
-                    parseInt(hex.charAt(2) + hex.charAt(2), 16) * 255,
-                    1
-                ]);
-            } else {
-                return new WebInspector.Color(WebInspector.Color.Format.HEX, [
-                    parseInt(hex.substring(0, 2), 16) * 255,
-                    parseInt(hex.substring(2, 4), 16) * 255,
-                    parseInt(hex.substring(4, 6), 16) * 255,
-                    1
-                ]);
-            }
-        } else if (match[2]) { // rgb
-            var rgb = match[2].split(/\s*,\s*/);
-            return new WebInspector.Color(WebInspector.Color.Format.RGB, [
-                parseInt(rgb[0]),
-                parseInt(rgb[1]),
-                parseInt(rgb[2]),
-                1
-            ]);
-        } else if (match[3]) { // nickname
-            var nickname = match[3].toLowerCase();
-            if (WebInspector.Color.Nicknames.hasOwnProperty(nickname)) {
-                var color = new WebInspector.Color(WebInspector.Color.Format.Nickname, WebInspector.Color.Nicknames[nickname].concat(1));
-                color.nickname = nickname;
-                color.original = colorString;
-                return color;
-            } else
-                return null;
-        } else if (match[4]) { // hsl
-            var hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
-            return new WebInspector.Color(WebInspector.Color.Format.HSL, [
-                parseInt(hsl[0]),
-                parseInt(hsl[1]),
-                parseInt(hsl[2]),
-                1
-            ]);
-        }
-    }
-
-    // Advanced - rgba(), hsla()
-    var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/;
-    match = colorString.match(advanced);
-    if (match) {
-        if (match[1]) { // rgba
-            var rgba = match[1].split(/\s*,\s*/);
-            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
-            var hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
-            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;
-}
-
-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._canBeSerializedAsShortHEX() ? 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._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
-            else
-                return WebInspector.Color.Format.Original;
-
-        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()
-    {
-        var rgb = this.rgba.slice();
-        rgb.pop();
-        return rgb;
-    },
-
-    get hsl()
-    {
-        var 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: function()
-    {
-        switch (this.format) {
-        case WebInspector.Color.Format.RGB:
-        case WebInspector.Color.Format.HEX:
-        case WebInspector.Color.Format.ShortHEX:
-        case WebInspector.Color.Format.Nickname:
-        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: function(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.Nickname:
-            return this._toNicknameString();
-        }
-
-        throw "invalid color format";
-    },
-
-    _toOriginalString: function()
-    {
-        return this.original || this._toNicknameString();
-    },
-
-    _toNicknameString: function()
-    {
-        if (this.nickname)
-            return this.nickname;
-
-        var rgba = this.rgba;
-        if (!this.simple) {
-            if (rgba[0] === 0 && rgba[1] === 0 && rgba[2] === 0 && rgba[3] === 0)
-                return "transparent";
-            return this._toRGBAString();
-        }
-
-        var nicknames = WebInspector.Color.Nicknames;
-        for (var nickname in nicknames) {
-            if (!nicknames.hasOwnProperty(nickname))
-                continue;
-
-            var nicknameRGB = nicknames[nickname];
-            if (nicknameRGB[0] === rgba[0] && nicknameRGB[1] === rgba[1] && nicknameRGB[2] === rgba[2])
-                return nickname;
-        }
-
-        return this._toRGBString();
-    },
-
-    _toShortHEXString: function()
-    {
-        if (!this.simple)
-            return this._toRGBAString();
-
-        var rgba = this.rgba;
-        var r = this._componentToHexValue(rgba[0]);
-        var g = this._componentToHexValue(rgba[1]);
-        var 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: function()
-    {
-        if (!this.simple)
-            return this._toRGBAString();
-
-        var rgba = this.rgba;
-        var r = this._componentToHexValue(rgba[0]);
-        var g = this._componentToHexValue(rgba[1]);
-        var b = this._componentToHexValue(rgba[2]);
-
-        return "#" + r + g + b;
-    },
-
-    _toRGBString: function()
-    {
-        if (!this.simple)
-            return this._toRGBAString();
-
-        var rgba = this.rgba;
-        return "rgb(" + [rgba[0], rgba[1], rgba[2]].join(", ") + ")";
-    },
-
-    _toRGBAString: function()
-    {
-        return "rgba(" + this.rgba.join(", ") + ")";
-    },
-
-    _toHSLString: function()
-    {
-        if (!this.simple)
-            return this._toHSLAString();
-
-        var hsla = this.hsla;
-        return "hsl(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%)";
-    },
-
-    _toHSLAString: function()
-    {
-        var hsla = this.hsla;
-        return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
-    },
-
-    _canBeSerializedAsShortHEX: function()
-    {
-        var rgba = this.rgba;
-
-        var r = this._componentToHexValue(rgba[0]);
-        if (r[0] !== r[1])
-            return false;
-
-        var g = this._componentToHexValue(rgba[1]);
-        if (g[0] !== g[1])
-            return false;
-
-        var b = this._componentToHexValue(rgba[2]);
-        if (b[0] !== b[1])
-            return false;
-
-        return true;
-    },
-
-    _componentToNumber: function(value)
-    {
-        return Number.constrain(value, 0, 255);
-    },
-
-    _componentToHexValue: function(value)
-    {
-        var hex = this._componentToNumber(value).toString(16);
-        if (hex.length === 1)
-            hex = "0" + hex;
-        return hex;
-    },
-
-    _rgbToHSL: function(rgb)
-    {
-        var r = this._componentToNumber(rgb[0]) / 255;
-        var g = this._componentToNumber(rgb[1]) / 255;
-        var b = this._componentToNumber(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];
-    },
-
-    _hslToRGB: function(hsl)
-    {
-        var h = parseFloat(hsl[0]) / 360;
-        var s = parseFloat(hsl[1]) / 100;
-        var l = parseFloat(hsl[2]) / 100;
-
-        h *= 6;
-        var 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: function(rgba)
-    {
-        var hsl = this._rgbToHSL(rgba);
-        hsl.push(rgba[3]);
-        return hsl;
-    },
-
-    _hslaToRGBA: function(hsla)
-    {
-        var rgba = this._hslToRGB(hsla);
-        rgba.push(hsla[3]);
-        return rgba;
-    }
-}
-
-WebInspector.Color.Nicknames = {
-    "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],
-    "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]
-};
-
-WebInspector.Color.rgb2hsv = function(r, g, b)
-{
-    r /= 255;
-    g /= 255;
-    b /= 255;
-
-    var min = Math.min(Math.min(r, g), b);
-    var max = Math.max(Math.max(r, g), b);
-    var delta = max - min;
-
-    var v = max;
-    var s, h;
-
-    if (max === min)
-        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];
-}
-
-WebInspector.Color.hsv2rgb = function(h, s, v)
-{
-    if (s === 0)
-        return [v, v, v];
-
-    h /= 60;
-    var i = Math.floor(h);
-    var data = [
-        v * (1 - s),
-        v * (1 - s * (h - i)),
-        v * (1 - s * (1 - (h - i)))
-    ];
-    var 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;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ColorPicker.css b/Source/WebInspectorUI/UserInterface/ColorPicker.css
deleted file mode 100644
index 72b85a740..000000000
--- a/Source/WebInspectorUI/UserInterface/ColorPicker.css
+++ /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.
- */
-
-.color-picker {
-    position: relative;
-    width: 256px;
-    height: 210px;
-    padding: 5px;
-}
-
-.color-picker > * {
-    position: absolute;
-}
-
-.color-picker > .slider {
-    top: 7px;
-    width: 196px;
-    -webkit-transform: rotate(-90deg) translateX(-100%);
-    -webkit-transform-origin: 0 0;
-}
-
-.color-picker > .brightness {
-    left: 215px;
-}
-
-.color-picker > .opacity {
-    left: 238px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ColorPicker.js b/Source/WebInspectorUI/UserInterface/ColorPicker.js
deleted file mode 100644
index fc8059cff..000000000
--- a/Source/WebInspectorUI/UserInterface/ColorPicker.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = function()
-{
-    WebInspector.Object.call(this);
-
-    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._opacityPattern = 'url("data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" fill="rgb(204, 204, 204)"><rect width="3" height="3" /><rect x="3" y="3" width="3" height="3"/></svg>') + '")';
-
-    this._color = "white";
-};
-
-WebInspector.ColorPicker.Event = {
-    ColorChanged: "css-color-picker-color-changed"
-};
-
-WebInspector.ColorPicker.prototype = {
-    contructor: WebInspector.ColorPicker,
-    __proto__: WebInspector.Object.prototype,
-
-    // 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 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: function(colorWheel)
-    {
-        this._updateColor();
-        this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
-    },
-
-    sliderValueDidChange: function(slider, value)
-    {
-        if (slider === this._opacitySlider)
-            this.opacity = value;
-        else if (slider === this._brightnessSlider)
-            this.brightness = value;
-    },
-    
-    // Private
-    
-    _updateColor: function()
-    {
-        if (this._dontUpdateColor)
-            return;
-
-        var opacity = Math.round(this._opacity * 100) / 100;
-        var rgba = this._colorWheel.tintedColor.rgb.concat(opacity);
-        this._color = new WebInspector.Color(WebInspector.Color.Format.RGBA, rgba).toString(this._colorFormat);
-        this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
-    },
-
-    _updateSliders: function(rawColor, tintedColor)
-    {
-        var rgba = this._colorWheel.tintedColor.rgb.concat(0);
-        var transparent = new WebInspector.Color(WebInspector.Color.Format.RGBA, rgba).toString();
-
-        this._opacitySlider.element.style.backgroundImage = "linear-gradient(90deg, " + transparent + ", " + tintedColor + "), " + this._opacityPattern;
-        this._brightnessSlider.element.style.backgroundImage = "linear-gradient(90deg, black, " + rawColor + ")";
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/ColorWheel.js b/Source/WebInspectorUI/UserInterface/ColorWheel.js
deleted file mode 100644
index fd1570098..000000000
--- a/Source/WebInspectorUI/UserInterface/ColorWheel.js
+++ /dev/null
@@ -1,282 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = function()
-{
-    WebInspector.Object.call(this);
-
-    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);
-}
-
-WebInspector.ColorWheel.prototype = {
-    contructor: WebInspector.ColorWheel,
-    __proto__: WebInspector.Object.prototype,
-
-    // Public
-
-    set dimension(dimension)
-    {
-        this._finalCanvas.width = this._tintedCanvas.width = this._rawCanvas.width = dimension;
-        this._finalCanvas.height = this._tintedCanvas.height = this._rawCanvas.height = dimension;
-
-        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, this._crosshairPosition.y, 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, this._crosshairPosition.y, 1);
-
-        return new WebInspector.Color(WebInspector.Color.Format.RGBA, [0, 0, 0, 0]);
-    },
-
-    // Protected
-
-    handleEvent: function(event)
-    {
-        switch (event.type) {
-        case "mousedown":
-            this._handleMousedown(event);
-            break;
-        case "mousemove":
-            this._handleMousemove(event);
-            break;
-        case "mouseup":
-            this._handleMouseup(event);
-            break;
-        }
-    },
-
-    // Private
-
-    _handleMousedown: function(event)
-    {
-        window.addEventListener("mousemove", this, true);
-        window.addEventListener("mouseup", this, true);
-
-        this._updateColorForMouseEvent(event);
-    },
-
-    _handleMousemove: function(event)
-    {
-        this._updateColorForMouseEvent(event);
-    },
-
-    _handleMouseup: function(event)
-    {
-        window.removeEventListener("mousemove", this, true);
-        window.removeEventListener("mouseup", this, true);
-    },
-
-    _pointInCircleForEvent: function(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: function(event)
-    {
-        var point = this._pointInCircleForEvent(event);
-
-        this._setCrosshairPosition(point);
-
-        if (this.delegate && typeof this.delegate.colorWheelColorDidChange === "function")
-            this.delegate.colorWheelColorDidChange(this);
-    },
-
-    _setCrosshairPosition: function(point)
-    {
-        this._crosshairPosition = point;
-        this._crosshair.style.webkitTransform = "translate(" + Math.round(point.x) + "px, " + Math.round(point.y) + "px)";
-    },
-
-    _tintedColorToPointAndBrightness: function(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: function() {
-        var ctx = this._rawCanvas.getContext("2d");
-
-        var dimension = this._dimension;
-        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: function(x, y, brightness)
-    {
-        var center = this._dimension / 2;
-        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: function()
-    {
-        var ctx = this._tintedCanvas.getContext("2d");
-        var dimension = this._dimension;
-
-        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: function()
-    {
-        this._drawTintedCanvas();
-
-        var ctx = this._finalCanvas.getContext("2d");
-        var dimension = this._dimension;
-
-        ctx.save();
-        ctx.clearRect(0, 0, dimension, dimension);
-        ctx.beginPath();
-        ctx.arc(dimension / 2, dimension / 2, this._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/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 ce4c9c3ec..000000000
--- a/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.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.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 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: 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.css b/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.css
deleted file mode 100644
index 1d0a58e11..000000000
--- a/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.css
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * 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.
- */
-
-.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;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.js
deleted file mode 100644
index 9a5626fd4..000000000
--- a/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.js
+++ /dev/null
@@ -1,219 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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);
-
-    // 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();
-};
-
-WebInspector.ComputedStyleDetailsPanel.StyleClassName = "computed";
-
-WebInspector.ComputedStyleDetailsPanel.prototype = {
-    constructor: WebInspector.ComputedStyleDetailsPanel,
-
-    // 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");
-    },
-
-    refresh: function()
-    {
-        this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
-        this._refreshFlowDetails(this.nodeStyles.node);
-    },
-
-    // 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;
-    },
-
-    _updateFlowNamesSectionVisibility: function()
-    {
-        this._flowNamesSection.element.classList.toggle("hidden", !this._contentFlow && !this._regionFlow);
-    },
-
-    _resetFlowDetails : function()
-    {
-        this.regionFlow = null;
-        this.contentFlow = null;
-        this.containerRegions = null;
-    },
-
-    _refreshFlowDetails: function(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: function()
-    {
-        WebInspector.resourceSidebarPanel.showContentFlowDOMTree(this._regionFlow);
-    },
-
-    _goToContentFlowArrowWasClicked: function()
-    {
-        WebInspector.resourceSidebarPanel.showContentFlowDOMTree(this._contentFlow, this.nodeStyles.node, true);
-    }
-};
-
-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 2c2e2bd43..000000000
--- a/Source/WebInspectorUI/UserInterface/ConsoleCommandResult.js
+++ /dev/null
@@ -1,60 +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");
-        if (!element.getAttribute("data-labelprefix"))
-            element.setAttribute("data-labelprefix", WebInspector.UIString("Output: "));
-        return element;
-    },
-
-    get clipboardPrefixString()
-    {
-        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 718865712..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 a61ffc260..000000000
--- a/Source/WebInspectorUI/UserInterface/ConsoleMessageImpl.js
+++ /dev/null
@@ -1,714 +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");
-                element.setAttribute("data-labelprefix", WebInspector.UIString("Tip: "));
-                break;
-            case WebInspector.ConsoleMessage.MessageLevel.Log:
-                element.classList.add("console-log-level");
-                element.setAttribute("data-labelprefix", WebInspector.UIString("Log: "));
-                break;
-            case WebInspector.ConsoleMessage.MessageLevel.Debug:
-                element.classList.add("console-debug-level");
-                element.setAttribute("data-labelprefix", WebInspector.UIString("Debug: "));
-                break;
-            case WebInspector.ConsoleMessage.MessageLevel.Warning:
-                element.classList.add("console-warning-level");
-                element.setAttribute("data-labelprefix", WebInspector.UIString("Warning: "));
-                break;
-            case WebInspector.ConsoleMessage.MessageLevel.Error:
-                element.classList.add("console-error-level");
-                element.setAttribute("data-labelprefix", WebInspector.UIString("Error: "));
-                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 clipboardPrefixString()
-    {
-        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.clipboardPrefixString + 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 407d2e68d..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.
-
-    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 71b132640..000000000
--- a/Source/WebInspectorUI/UserInterface/ConsolePrompt.js
+++ /dev/null
@@ -1,294 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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);
-
-    mimeType = parseMIMEType(mimeType).type;
-
-    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._completionController.addExtendedCompletionProvider("javascript", WebInspector.javaScriptRuntimeCompletionProvider);
-
-    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 7f587a1c4..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentBrowser.js
+++ /dev/null
@@ -1,532 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.CommandOrControl, "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.CommandOrControl, "S", this._save.bind(this));
-    this._saveAsKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "S", this._saveAs.bind(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._forwardKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | 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.svg", 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.svg", 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, cookie)
-    {
-        var contentView = this.contentViewForRepresentedObject(representedObject);
-        return this._contentViewContainer.showContentView(contentView, cookie);
-    },
-
-    showContentView: function(contentView, cookie)
-    {
-        return this._contentViewContainer.showContentView(contentView, cookie);
-    },
-
-    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;
-
-        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);
-    },
-
-    _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/ContentFlow.js b/Source/WebInspectorUI/UserInterface/ContentFlow.js
deleted file mode 100644
index 726316a79..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentFlow.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * 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 = function(documentNodeIdentifier, name, overset, contentNodes)
-{
-    WebInspector.Object.call(this);
-
-    this._documentNodeIdentifier = documentNodeIdentifier;
-    this._name = name;
-    this._overset = overset;
-    this._contentNodes = contentNodes;
-};
-
-WebInspector.ContentFlow.Event = {
-    OversetWasChanged: "content-flow-overset-was-changed",
-    ContentNodeWasAdded: "content-flow-content-node-was-added",
-    ContentNodeWasRemoved: "content-flow-content-node-was-removed"
-};
-
-WebInspector.ContentFlow.prototype = {
-
-    constructor: WebInspector.ContentFlow,
-    __proto__: WebInspector.Object.prototype,
-
-    // 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: function(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: function(contentNode)
-    {
-        this._contentNodes.push(contentNode);
-        this.dispatchEventToListeners(WebInspector.ContentFlow.Event.ContentNodeWasAdded, {node: contentNode});
-    },
-
-    removeContentNode: function(contentNode)
-    {
-        var index = this._contentNodes.indexOf(contentNode);
-        console.assert(index !== -1);
-        this._contentNodes.splice(index, 1);
-        this.dispatchEventToListeners(WebInspector.ContentFlow.Event.ContentNodeWasRemoved, {node: contentNode});
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/ContentFlowDOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/ContentFlowDOMTreeContentView.js
deleted file mode 100644
index 3dc0a6f7f..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentFlowDOMTreeContentView.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * 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.ContentFlowDOMTreeContentView = function(contentFlow)
-{
-    console.assert(contentFlow);
-
-    WebInspector.DOMTreeContentView.call(this, contentFlow);
-
-    contentFlow.addEventListener(WebInspector.ContentFlow.Event.ContentNodeWasAdded, this._contentNodeWasAdded, this);
-    contentFlow.addEventListener(WebInspector.ContentFlow.Event.ContentNodeWasRemoved, this._contentNodeWasRemoved, this);
-
-    this._createContentTrees();
-};
-
-WebInspector.ContentFlowDOMTreeContentView.prototype = {
-    constructor: WebInspector.ContentFlowDOMTreeContentView,
-    __proto__: WebInspector.DOMTreeContentView.prototype,
-
-    // Public
-
-    closed: function()
-    {
-        this.representedObject.removeEventListener(WebInspector.ContentFlow.Event.ContentNodeWasAdded, this._contentNodeWasAdded, this);
-        this.representedObject.removeEventListener(WebInspector.ContentFlow.Event.ContentNodeWasRemoved, this._contentNodeWasRemoved, this);
-        WebInspector.DOMTreeContentView.prototype.closed.call(this);
-    },
-
-    getSearchContextNodes: function(callback)
-    {
-        callback(this.domTreeOutline.children.map(function(treeOutline) {
-            return treeOutline.representedObject.id;
-        }));
-    },
-
-    // Private
-
-    _createContentTrees: function()
-    {
-        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: function(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: function(event)
-    {
-        var treeElement = this.domTreeOutline.findTreeElement(event.data.node);
-        console.assert(treeElement);
-        this.domTreeOutline.removeChild(treeElement);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/ContentFlowIcon.css b/Source/WebInspectorUI/UserInterface/ContentFlowIcon.css
deleted file mode 100644
index b26e766cc..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentFlowIcon.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * 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/ContentFlowTreeElement.js b/Source/WebInspectorUI/UserInterface/ContentFlowTreeElement.js
deleted file mode 100644
index 766ff7ef2..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentFlowTreeElement.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * 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 = function(representedObject)
-{
-    console.assert(representedObject instanceof WebInspector.ContentFlow);
-    WebInspector.GeneralTreeElement.call(this, [WebInspector.ContentFlowTreeElement.StyleClassName, WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName], representedObject.name, null, representedObject, false);
-
-    this.small = true;
-};
-
-WebInspector.ContentFlowTreeElement.ContentFlowIconStyleClassName = "content-flow-icon";
-
-WebInspector.ContentFlowTreeElement.prototype = {
-    constructor: WebInspector.ContentFlowTreeElement
-};
-
-WebInspector.ContentFlowTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ContentView.js b/Source/WebInspectorUI/UserInterface/ContentView.js
deleted file mode 100644
index 29ab214b7..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentView.js
+++ /dev/null
@@ -1,318 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.TimelineRecording)
-            return new WebInspector.TimelineContentView(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.FrameDOMTreeContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.LogObject)
-            return new WebInspector.LogContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.JavaScriptProfileObject)
-            return new WebInspector.JavaScriptProfileView(representedObject);
-
-        if (representedObject instanceof WebInspector.CanvasProfileObject)
-            return new WebInspector.CanvasProfileView(representedObject);
-
-        if (representedObject instanceof WebInspector.ContentFlow)
-            return new WebInspector.ContentFlowDOMTreeContentView(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.TimelineRecording)
-        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.JavaScriptProfileObject)
-        return true;
-    if (representedObject instanceof WebInspector.CanvasProfileObject)
-        return true;
-    if (representedObject instanceof WebInspector.ContentFlow)
-        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.
-    },
-
-    saveToCookie: function(cookie)
-    {
-        // Implemented by subclasses.
-    },
-
-    restoreFromCookie: function(cookie)
-    {
-        // 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 a532c0b41..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentViewContainer.js
+++ /dev/null
@@ -1,413 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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].contentView;
-    },
-
-    get currentBackForwardEntry()
-    {
-        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, cookie)
-    {
-        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;
-
-        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))
-            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]);
-        }
-
-        // Associate with the new content view.
-        contentView._parentContainer = this;
-
-        this.showBackForwardEntryForIndex(newIndex);
-
-        return contentView;
-    },
-
-    showBackForwardEntryForIndex: 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 previousEntry = this.currentBackForwardEntry;
-        if (previousEntry)
-            this._hideEntry(previousEntry);
-
-        this._currentIndex = index;
-        var currentEntry = this.currentBackForwardEntry;
-        console.assert(currentEntry);
-
-        this._showEntry(currentEntry);
-
-        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._hideEntry(this.currentBackForwardEntry);
-
-        // 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].contentView === oldContentView)
-                this._backForwardList[i].contentView = newContentView;
-        }
-
-        // Re-show the current entry, because its content view instance was replaced.
-        if (currentlyShowing) {
-            this._showEntry(this.currentBackForwardEntry);
-            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].contentView instanceof constructor)) {
-                allSamePrototype = false;
-                break;
-            }
-        }
-
-        if (allSamePrototype) {
-            this.closeAllContentViews();
-            return;
-        }
-
-        var oldCurrentContentView = 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 === oldCurrentContentView)
-                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);
-
-            // 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 !== oldCurrentContentView || backForwardListDidChange) {
-            this._showEntry(currentEntry);
-            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 entry = this._backForwardList[i];
-            if (i === this._currentIndex)
-                this._hideEntry(entry);
-            this._disassociateFromContentView(entry.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.showBackForwardEntryForIndex(this._currentIndex - 1);
-    },
-
-    goForward: function()
-    {
-        if (!this.canGoForward())
-            return;
-        this.showBackForwardEntryForIndex(this._currentIndex + 1);
-    },
-
-    shown: function()
-    {
-        var currentEntry = this.currentBackForwardEntry;
-        if (!currentEntry)
-            return;
-
-        this._showEntry(currentEntry);
-    },
-
-    hidden: function()
-    {
-        var currentEntry = this.currentBackForwardEntry;
-        if (!currentEntry)
-            return;
-
-        this._hideEntry(currentEntry);
-    },
-
-    // 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();
-    },
-
-    _showEntry: function(entry)
-    {
-        console.assert(entry instanceof WebInspector.BackForwardEntry);
-
-        this._addContentViewElement(entry.contentView);
-        entry.prepareToShow();
-    },
-
-    _hideEntry: function(entry)
-    {
-        console.assert(entry instanceof WebInspector.BackForwardEntry);
-
-        entry.prepareToHide();
-        this._removeContentViewElement(entry.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 16c862cad..000000000
--- a/Source/WebInspectorUI/UserInterface/ContextMenu.js
+++ /dev/null
@@ -1,299 +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 = {
-
-    // Public
-
-    nextId: function()
-    {
-        return this._id++;
-    },
-
-    show: function()
-    {
-        console.assert(this._event instanceof MouseEvent);
-
-        var menuObject = this._buildDescriptor();
-
-        if (menuObject.length) {
-            WebInspector._contextMenu = 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: function(event)
-    {
-        this._event.target.removeEventListener("contextmenu", this, true);
-        InspectorFrontendHost.showContextMenu(event, this._menuObject);
-        delete this._menuObject;
-
-        event.stopImmediatePropagation();
-    },
-
-    // Private
-
-    _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..99c62738c
--- /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)).catch(handlePromiseException);
+        }.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..b4b86f9d3
--- /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();
+
+        this._script.target.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/BreakpointLogMessageLexer.js b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointLogMessageLexer.js
new file mode 100644
index 000000000..071704a6b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointLogMessageLexer.js
@@ -0,0 +1,197 @@
+/*
+ * 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.BreakpointLogMessageLexer = class BreakpointLogMessageLexer extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._stateFunctions = {
+            [WebInspector.BreakpointLogMessageLexer.State.Expression]: this._expression,
+            [WebInspector.BreakpointLogMessageLexer.State.PlainText]: this._plainText,
+            [WebInspector.BreakpointLogMessageLexer.State.PossiblePlaceholder]: this._possiblePlaceholder,
+            [WebInspector.BreakpointLogMessageLexer.State.RegExpOrStringLiteral]: this._regExpOrStringLiteral,
+        };
+
+        this.reset();
+    }
+
+    // Public
+
+    tokenize(input)
+    {
+        this.reset();
+        this._input = input;
+
+        while (this._index < this._input.length) {
+            let stateFunction = this._stateFunctions[this._states.lastValue];
+            console.assert(stateFunction);
+            if (!stateFunction) {
+                this.reset();
+                return null;
+            }
+
+            stateFunction.call(this);
+        }
+
+        // Needed for trailing plain text.
+        this._finishPlainText();
+
+        return this._tokens;
+    }
+
+    reset()
+    {
+        this._input = "";
+        this._buffer = "";
+
+        this._index = 0;
+        this._states = [WebInspector.BreakpointLogMessageLexer.State.PlainText];
+        this._literalStartCharacter = "";
+        this._curlyBraceDepth = 0;
+        this._tokens = [];
+    }
+
+    // Private
+
+     _finishPlainText()
+    {
+        this._appendToken(WebInspector.BreakpointLogMessageLexer.TokenType.PlainText);
+    }
+
+    _finishExpression()
+    {
+        this._appendToken(WebInspector.BreakpointLogMessageLexer.TokenType.Expression);
+    }
+
+    _appendToken(type)
+    {
+        if (!this._buffer)
+            return;
+
+        this._tokens.push({type, data: this._buffer});
+        this._buffer = "";
+    }
+
+    _consume()
+    {
+        console.assert(this._index < this._input.length);
+
+        let character = this._peek();
+        this._index++;
+        return character;
+    }
+
+    _peek()
+    {
+        return this._input[this._index] || null;
+    }
+
+    // States
+
+    _expression()
+    {
+        let character = this._consume();
+
+        if (character === "}") {
+            if (this._curlyBraceDepth === 0) {
+                this._finishExpression();
+
+                console.assert(this._states.lastValue === WebInspector.BreakpointLogMessageLexer.State.Expression);
+                this._states.pop();
+                return;
+            }
+
+            this._curlyBraceDepth--;
+        }
+
+        this._buffer += character;
+
+        if (character === "/" || character === "\"" || character === "'") {
+            this._literalStartCharacter = character;
+            this._states.push(WebInspector.BreakpointLogMessageLexer.State.RegExpOrStringLiteral);
+        } else if (character === "{")
+            this._curlyBraceDepth++;
+    }
+
+    _plainText()
+    {
+        let character = this._peek();
+
+        if (character === "$")
+            this._states.push(WebInspector.BreakpointLogMessageLexer.State.PossiblePlaceholder);
+        else {
+            this._buffer += character;
+            this._consume();
+        }
+    }
+
+    _possiblePlaceholder()
+    {
+        let character = this._consume();
+        console.assert(character === "$");
+        let nextCharacter = this._peek();
+
+        console.assert(this._states.lastValue === WebInspector.BreakpointLogMessageLexer.State.PossiblePlaceholder);
+        this._states.pop();
+
+        if (nextCharacter === "{") {
+            this._finishPlainText();
+            this._consume();
+            this._states.push(WebInspector.BreakpointLogMessageLexer.State.Expression);
+        } else
+            this._buffer += character;
+    }
+
+    _regExpOrStringLiteral()
+    {
+        let character = this._consume();
+        this._buffer += character;
+
+        if (character === "\\") {
+            if (this._peek() !== null)
+                this._buffer += this._consume();
+            return;
+        }
+
+        if (character === this._literalStartCharacter) {
+            console.assert(this._states.lastValue === WebInspector.BreakpointLogMessageLexer.State.RegExpOrStringLiteral);
+            this._states.pop();
+        }
+    }
+};
+
+WebInspector.BreakpointLogMessageLexer.State = {
+    Expression: Symbol("expression"),
+    PlainText: Symbol("plain-text"),
+    PossiblePlaceholder: Symbol("possible-placeholder"),
+    RegExpOrStringLiteral: Symbol("regexp-or-string-literal"),
+};
+
+WebInspector.BreakpointLogMessageLexer.TokenType = {
+    PlainText: "token-type-plain-text",
+    Expression: "token-type-expression",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
new file mode 100644
index 000000000..1b30fc98c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
@@ -0,0 +1,382 @@
+/*
+ * 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(() => {
+            this._conditionCodeMirror.refresh();
+            this._conditionCodeMirror.focus();
+        }, 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)
+    {
+        if (change.update) {
+            let newText = change.text.join("").replace(/\n/g, "");
+            change.update(change.from, change.to, [newText]);
+        }
+
+        return true;
+    }
+
+    _conditionCodeMirrorEscapeOrEnterKey()
+    {
+        if (!this._popover)
+            return;
+
+        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..8e101e31f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CSSStyleManager.js
@@ -0,0 +1,551 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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", source);
+            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);
+        }
+    }
+
+    mediaTypeChanged()
+    {
+        // Act the same as if media queries changed.
+        this.mediaQueryResultChanged();
+    }
+
+    // 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..e79da97f9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.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.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;
+    }
+
+    popoverDidDismiss(popover)
+    {
+        this._bezierEditor.removeListeners();
+    }
+
+    // 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..b45846fd5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.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.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);
+        this._colorPicker.addEventListener(WebInspector.ColorPicker.Event.FormatChanged, (event) => popover.update());
+        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..33d7ccbd6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js
@@ -0,0 +1,875 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 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 [];
+
+        // Don't complete in the middle of a property name.
+        if (/^[a-z]/i.test(suffix))
+            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. Likewise if the suffix starts with an open
+            // paren we are changing a function name so don't add a suffix.
+            this._implicitSuffix = " ";
+            if (suffix === ";")
+                this._implicitSuffix = this._noEndingSemicolon ? "" : ";";
+            else if (suffix.startsWith("("))
+                this._implicitSuffix = "";
+
+            // Don't use an implicit suffix if it would be the same as the existing suffix.
+            if (this._implicitSuffix === suffix)
+                this._implicitSuffix = "";
+
+            let completions = WebInspector.CSSKeywordCompletions.forProperty(propertyName).startsWith(this._prefix);
+
+            if (suffix.startsWith("("))
+                completions = completions.map((x) => x.replace(/\(\)$/, ""));
+
+            return completions;
+        }
+
+        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 === "]";
+
+        // FIXME: Include module keywords if we know this is a module environment.
+        // var moduleKeywords = ["default", "export", "import"];
+
+        var allKeywords = [
+            "break", "case", "catch", "class", "const", "continue", "debugger", "default",
+            "delete", "do", "else", "extends", "false", "finally", "for", "function",
+            "if", "in", "Infinity", "instanceof", "let", "NaN", "new", "null", "of",
+            "return", "static", "super", "switch", "this", "throw", "true", "try",
+            "typeof", "undefined", "var", "void", "while", "with", "yield"
+        ];
+        var valueKeywords = ["false", "Infinity", "NaN", "null", "this", "true", "undefined"];
+
+        var allowedKeywordsInsideBlocks = allKeywords.keySet();
+        var allowedKeywordsWhenDeclaringVariable = valueKeywords.keySet();
+        var allowedKeywordsInsideParenthesis = valueKeywords.concat(["class", "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", "yield"]);
+            break;
+
+        case "{":
+            matchKeywords(["do", "else", "finally", "return", "try", "yield"]);
+            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..3496ac437
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorEditingController.js
@@ -0,0 +1,200 @@
+/*
+ * 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()
+    {
+        if (!this.cssClassName)
+            return;
+
+        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)
+    {
+        if (!this._hoverMenu)
+            return;
+
+        this._hoverMenu.dismiss(discrete);
+    }
+
+    popoverWillPresent(popover)
+    {
+        // Implemented by subclasses.
+    }
+
+    popoverDidPresent(popover)
+    {
+        // Implemented by subclasses.
+    }
+
+    popoverDidDismiss(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);
+        this.popoverDidDismiss();
+
+        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/CodeMirrorSpringEditingController.js b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorSpringEditingController.js
new file mode 100644
index 000000000..7f1f91f14
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorSpringEditingController.js
@@ -0,0 +1,63 @@
+/*
+ * 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.CodeMirrorSpringEditingController = class CodeMirrorSpringEditingController extends WebInspector.CodeMirrorEditingController
+{
+    // Public
+
+    get initialValue()
+    {
+        return WebInspector.Spring.fromString(this.text);
+    }
+
+    get cssClassName()
+    {
+        return "spring";
+    }
+
+    popoverWillPresent(popover)
+    {
+        this._springEditor = new WebInspector.SpringEditor;
+        this._springEditor.addEventListener(WebInspector.SpringEditor.Event.SpringChanged, this._springEditorSpringChanged, this);
+        popover.content = this._springEditor.element;
+    }
+
+    popoverDidPresent(popover)
+    {
+        this._springEditor.spring = this.value;
+    }
+
+    popoverDidDismiss(popover)
+    {
+        this._springEditor.removeListeners();
+    }
+
+    // Private
+
+    _springEditorSpringChanged(event)
+    {
+        this.value = event.data.spring;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTextKillController.js b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTextKillController.js
new file mode 100644
index 000000000..8cd0b7300
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTextKillController.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.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),
+            // 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 (deleteLine).
+            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..4d4fdac99
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTokenTrackingController.js
@@ -0,0 +1,618 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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()
+    {
+        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()
+    {
+        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 (/\bmeta\b/.test(token.type)) {
+            let nextTokenPosition = Object.shallowCopy(position);
+            nextTokenPosition.ch = tokenInfo.token.end + 1;
+
+            let nextToken = this._codeMirror.getTokenAt(nextTokenPosition);
+            if (nextToken && nextToken.type && !/\bmeta\b/.test(nextToken.type)) {
+                console.assert(tokenInfo.token.end === nextToken.start);
+
+                tokenInfo.token.type = nextToken.type;
+                tokenInfo.token.string = tokenInfo.token.string + nextToken.string;
+                tokenInfo.token.end = nextToken.end;
+            }
+        } else {
+            let previousTokenPosition = Object.shallowCopy(position);
+            previousTokenPosition.ch = tokenInfo.token.start - 1;
+
+            let previousToken = this._codeMirror.getTokenAt(previousTokenPosition);
+            if (previousToken && previousToken.type && /\bmeta\b/.test(previousToken.type)) {
+                console.assert(tokenInfo.token.start === previousToken.end);
+
+                tokenInfo.token.string = previousToken.string + tokenInfo.token.string;
+                tokenInfo.token.start = previousToken.start;
+            }
+        }
+
+        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..c7c4003de
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js
@@ -0,0 +1,795 @@
+/*
+ * 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;
+        this._loadNodeAttributesTimeout = 0;
+
+        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 (this._loadNodeAttributesTimeout)
+            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 = 0;
+
+        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});
+    }
+
+    _customElementStateChanged(elementId, newState)
+    {
+        const node = this._idToDOMNode[elementId];
+        node._customElementState = newState;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.CustomElementStateChanged, {node});
+    }
+
+    _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 shouldRevealConsole = false;
+                WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(WebInspector.UIString("Selected Element"), remoteObject, specialLogStyles, shouldRevealConsole);
+            });
+        }
+
+        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)
+    {
+        if (enabled === this._inspectModeEnabled)
+            return;
+
+        DOMAgent.setInspectModeEnabled(enabled, this._buildHighlightConfig(), (error) => {
+            this._inspectModeEnabled = error ? false : enabled;
+            this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.InspectModeStateChanged);
+        });
+    }
+
+    _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((node, i) => 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(remoteObject, callback)
+    {
+        console.assert(remoteObject.type === "object");
+        console.assert(remoteObject.subtype === "array");
+
+        let length = remoteObject.size;
+        if (!length) {
+            callback(null, []);
+            return;
+        }
+
+        let nodes;
+        let received = 0;
+        let lastError = null;
+        let 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(remoteObject.objectId, function(error, properties) {
+            if (error) {
+                callback(error);
+                return;
+            }
+
+            nodes = new Array(length);
+            for (let i = 0; i < length; ++i) {
+                let nodeProperty = properties.get(String(i));
+                console.assert(nodeProperty.value.type === "object");
+                console.assert(nodeProperty.value.subtype === "node");
+                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;
+            }
+
+            var evalParameters = {
+                objectId: remoteObject.objectId,
+                functionDeclaration: appendWebInspectorSourceURL(inspectedPage_node_getFlowInfo.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;
+            }
+
+            this._coerceRemoteArrayOfDOMNodes(regionsProperty.value, function(error, nodes) {
+                result.regions = nodes;
+                resultReadyCallback(error, result);
+            });
+        }
+
+        function inspectedPage_node_getFlowInfo()
+        {
+            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 = Array.from(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",
+    CustomElementStateChanged: "dom-tree-manager-custom-element-state-changed",
+    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..827263add
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js
@@ -0,0 +1,1217 @@
+/*
+ * 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.DebuggerManager = class DebuggerManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        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.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingWillStart, this._timelineCapturingWillStart, this);
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._timelineCapturingStopped, this);
+
+        WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Event.TargetRemoved, this._targetRemoved, this);
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        this._breakpointsSetting = new WebInspector.Setting("breakpoints", []);
+        this._breakpointsEnabledSetting = new WebInspector.Setting("breakpoints-enabled", true);
+        this._allExceptionsBreakpointEnabledSetting = new WebInspector.Setting("break-on-all-exceptions", false);
+        this._allUncaughtExceptionsBreakpointEnabledSetting = new WebInspector.Setting("break-on-all-uncaught-exceptions", false);
+        this._assertionsBreakpointEnabledSetting = new WebInspector.Setting("break-on-assertions", false);
+        this._asyncStackTraceDepthSetting = new WebInspector.Setting("async-stack-trace-depth", 200);
+
+        let 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._assertionsBreakpoint = new WebInspector.Breakpoint(specialBreakpointLocation, !this._assertionsBreakpointEnabledSetting.value);
+        this._assertionsBreakpoint.resolved = true;
+
+        this._breakpoints = [];
+        this._breakpointContentIdentifierMap = new Map;
+        this._breakpointScriptIdentifierMap = new Map;
+        this._breakpointIdMap = new Map;
+
+        this._breakOnExceptionsState = "none";
+        this._updateBreakOnExceptionsState();
+
+        this._nextBreakpointActionIdentifier = 1;
+
+        this._activeCallFrame = null;
+
+        this._internalWebKitScripts = [];
+        this._targetDebuggerDataMap = new Map;
+        this._targetDebuggerDataMap.set(WebInspector.mainTarget, new WebInspector.DebuggerData(WebInspector.mainTarget));
+
+        // Restore the correct breakpoints enabled setting if Web Inspector had
+        // previously been left in a state where breakpoints were temporarily disabled.
+        this._temporarilyDisabledBreakpointsRestoreSetting = new WebInspector.Setting("temporarily-disabled-breakpoints-restore", null);
+        if (this._temporarilyDisabledBreakpointsRestoreSetting.value !== null) {
+            this._breakpointsEnabledSetting.value = this._temporarilyDisabledBreakpointsRestoreSetting.value;
+            this._temporarilyDisabledBreakpointsRestoreSetting.value = null;
+        }
+
+        DebuggerAgent.setBreakpointsActive(this._breakpointsEnabledSetting.value);
+        DebuggerAgent.setPauseOnExceptions(this._breakOnExceptionsState);
+
+        // COMPATIBILITY (iOS 10): DebuggerAgent.setPauseOnAssertions did not exist yet.
+        if (DebuggerAgent.setPauseOnAssertions)
+            DebuggerAgent.setPauseOnAssertions(this._assertionsBreakpointEnabledSetting.value);
+
+        // COMPATIBILITY (iOS 10): Debugger.setAsyncStackTraceDepth did not exist yet.
+        if (DebuggerAgent.setAsyncStackTraceDepth)
+            DebuggerAgent.setAsyncStackTraceDepth(this._asyncStackTraceDepthSetting.value);
+
+        this._ignoreBreakpointDisplayLocationDidChangeEvent = false;
+
+        function restoreBreakpointsSoon() {
+            this._restoringBreakpoints = true;
+            for (let 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 paused()
+    {
+        for (let [target, targetData] of this._targetDebuggerDataMap) {
+            if (targetData.paused)
+                return true;
+        }
+
+        return false;
+    }
+
+    get activeCallFrame()
+    {
+        return this._activeCallFrame;
+    }
+
+    set activeCallFrame(callFrame)
+    {
+        if (callFrame === this._activeCallFrame)
+            return;
+
+        this._activeCallFrame = callFrame || null;
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
+    }
+
+    dataForTarget(target)
+    {
+        let targetData = this._targetDebuggerDataMap.get(target);
+        if (targetData)
+            return targetData;
+
+        targetData = new WebInspector.DebuggerData(target);
+        this._targetDebuggerDataMap.set(target, targetData);
+        return targetData;
+    }
+
+    get allExceptionsBreakpoint()
+    {
+        return this._allExceptionsBreakpoint;
+    }
+
+    get allUncaughtExceptionsBreakpoint()
+    {
+        return this._allUncaughtExceptionsBreakpoint;
+    }
+
+    get assertionsBreakpoint()
+    {
+        return this._assertionsBreakpoint;
+    }
+
+    get breakpoints()
+    {
+        return this._breakpoints;
+    }
+
+    breakpointForIdentifier(id)
+    {
+        return this._breakpointIdMap.get(id) || null;
+    }
+
+    breakpointsForSourceCode(sourceCode)
+    {
+        console.assert(sourceCode instanceof WebInspector.Resource || sourceCode instanceof WebInspector.Script);
+
+        if (sourceCode instanceof WebInspector.SourceMapResource) {
+            let originalSourceCodeBreakpoints = this.breakpointsForSourceCode(sourceCode.sourceMap.originalSourceCode);
+            return originalSourceCodeBreakpoints.filter(function(breakpoint) {
+                return breakpoint.sourceCodeLocation.displaySourceCode === sourceCode;
+            });
+        }
+
+        let contentIdentifierBreakpoints = this._breakpointContentIdentifierMap.get(sourceCode.contentIdentifier);
+        if (contentIdentifierBreakpoints) {
+            this._associateBreakpointsWithSourceCode(contentIdentifierBreakpoints, sourceCode);
+            return contentIdentifierBreakpoints;
+        }
+
+        if (sourceCode instanceof WebInspector.Script) {
+            let scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap.get(sourceCode.id);
+            if (scriptIdentifierBreakpoints) {
+                this._associateBreakpointsWithSourceCode(scriptIdentifierBreakpoints, sourceCode);
+                return scriptIdentifierBreakpoints;
+            }
+        }
+
+        return [];
+    }
+
+    isBreakpointRemovable(breakpoint)
+    {
+        return breakpoint !== this._allExceptionsBreakpoint
+            && breakpoint !== this._allUncaughtExceptionsBreakpoint
+            && breakpoint !== this._assertionsBreakpoint;
+    }
+
+    isBreakpointEditable(breakpoint)
+    {
+        return this.isBreakpointRemovable(breakpoint);
+    }
+
+    get breakpointsEnabled()
+    {
+        return this._breakpointsEnabledSetting.value;
+    }
+
+    set breakpointsEnabled(enabled)
+    {
+        if (this._breakpointsEnabledSetting.value === enabled)
+            return;
+
+        console.assert(!(enabled && this.breakpointsDisabledTemporarily), "Should not enable breakpoints when we are temporarily disabling breakpoints.");
+        if (enabled && this.breakpointsDisabledTemporarily)
+            return;
+
+        this._breakpointsEnabledSetting.value = enabled;
+
+        this._updateBreakOnExceptionsState();
+
+        for (let target of WebInspector.targets) {
+            target.DebuggerAgent.setBreakpointsActive(enabled);
+            target.DebuggerAgent.setPauseOnExceptions(this._breakOnExceptionsState);
+        }
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointsEnabledDidChange);
+    }
+
+    get breakpointsDisabledTemporarily()
+    {
+        return this._temporarilyDisabledBreakpointsRestoreSetting.value !== null;
+    }
+
+    scriptForIdentifier(id, target)
+    {
+        console.assert(target instanceof WebInspector.Target);
+        return this.dataForTarget(target).scriptForIdentifier(id);
+    }
+
+    scriptsForURL(url, target)
+    {
+        // FIXME: This may not be safe. A Resource's URL may differ from a Script's URL.
+        console.assert(target instanceof WebInspector.Target);
+        return this.dataForTarget(target).scriptsForURL(url);
+    }
+
+    get searchableScripts()
+    {
+        return this.knownNonResourceScripts.filter((script) => !!script.contentIdentifier);
+    }
+
+    get knownNonResourceScripts()
+    {
+        let knownScripts = [];
+
+        for (let [target, targetData] of this._targetDebuggerDataMap) {
+            for (let script of targetData.scripts) {
+                if (script.resource)
+                    continue;
+                if (!WebInspector.isDebugUIEnabled() && isWebKitInternalScript(script.sourceURL))
+                    continue;
+                knownScripts.push(script);
+            }
+        }
+
+        return knownScripts;
+    }
+
+    get asyncStackTraceDepth()
+    {
+        return this._asyncStackTraceDepthSetting.value;
+    }
+
+    set asyncStackTraceDepth(x)
+    {
+        if (this._asyncStackTraceDepthSetting.value === x)
+            return;
+
+        this._asyncStackTraceDepthSetting.value = x;
+
+        for (let target of WebInspector.targets)
+            target.DebuggerAgent.setAsyncStackTraceDepth(this._asyncStackTraceDepthSetting.value);
+    }
+
+    pause()
+    {
+        if (this.paused)
+            return Promise.resolve();
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.WaitingToPause);
+
+        let listener = new WebInspector.EventListener(this, true);
+
+        let managerResult = new Promise(function(resolve, reject) {
+            listener.connect(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.Paused, resolve);
+        });
+
+        let promises = [];
+        for (let [target, targetData] of this._targetDebuggerDataMap)
+            promises.push(targetData.pauseIfNeeded());
+
+        return Promise.all([managerResult, ...promises]);
+    }
+
+    resume()
+    {
+        if (!this.paused)
+            return Promise.resolve();
+
+        let listener = new WebInspector.EventListener(this, true);
+
+        let managerResult = new Promise(function(resolve, reject) {
+            listener.connect(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.Resumed, resolve);
+        });
+
+        let promises = [];
+        for (let [target, targetData] of this._targetDebuggerDataMap)
+            promises.push(targetData.resumeIfNeeded());
+
+        return Promise.all([managerResult, ...promises]);
+    }
+
+    stepOver()
+    {
+        if (!this.paused)
+            return Promise.reject(new Error("Cannot step over because debugger is not paused."));
+
+        let listener = new WebInspector.EventListener(this, true);
+
+        let managerResult = new Promise(function(resolve, reject) {
+            listener.connect(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, resolve);
+        });
+
+        let protocolResult = this._activeCallFrame.target.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."));
+
+        let listener = new WebInspector.EventListener(this, true);
+
+        let managerResult = new Promise(function(resolve, reject) {
+            listener.connect(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, resolve);
+        });
+
+        let protocolResult = this._activeCallFrame.target.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."));
+
+        let listener = new WebInspector.EventListener(this, true);
+
+        let managerResult = new Promise(function(resolve, reject) {
+            listener.connect(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, resolve);
+        });
+
+        let protocolResult = this._activeCallFrame.target.DebuggerAgent.stepOut()
+            .catch(function(error) {
+                listener.disconnect();
+                console.error("DebuggerManager.stepOut failed: ", error);
+                throw error;
+            });
+
+        return Promise.all([managerResult, protocolResult]);
+    }
+
+    continueUntilNextRunLoop(target)
+    {
+        return this.dataForTarget(target).continueUntilNextRunLoop();
+    }
+
+    continueToLocation(script, lineNumber, columnNumber)
+    {
+        return script.target.DebuggerAgent.continueToLocation({scriptId: script.id, lineNumber, columnNumber});
+    }
+
+    addBreakpoint(breakpoint, shouldSpeculativelyResolve)
+    {
+        console.assert(breakpoint instanceof WebInspector.Breakpoint);
+        if (!breakpoint)
+            return;
+
+        if (breakpoint.contentIdentifier) {
+            let contentIdentifierBreakpoints = this._breakpointContentIdentifierMap.get(breakpoint.contentIdentifier);
+            if (!contentIdentifierBreakpoints) {
+                contentIdentifierBreakpoints = [];
+                this._breakpointContentIdentifierMap.set(breakpoint.contentIdentifier, contentIdentifierBreakpoints);
+            }
+            contentIdentifierBreakpoints.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);
+
+        if (!breakpoint.disabled) {
+            const specificTarget = undefined;
+            this._setBreakpoint(breakpoint, specificTarget, () => {
+                if (shouldSpeculativelyResolve)
+                    breakpoint.resolved = true;
+            });
+        }
+
+        this._saveBreakpoints();
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointAdded, {breakpoint});
+    }
+
+    removeBreakpoint(breakpoint)
+    {
+        console.assert(breakpoint instanceof WebInspector.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.contentIdentifier) {
+            let contentIdentifierBreakpoints = this._breakpointContentIdentifierMap.get(breakpoint.contentIdentifier);
+            if (contentIdentifierBreakpoints) {
+                contentIdentifierBreakpoints.remove(breakpoint);
+                if (!contentIdentifierBreakpoints.length)
+                    this._breakpointContentIdentifierMap.delete(breakpoint.contentIdentifier);
+            }
+        }
+
+        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});
+    }
+
+    nextBreakpointActionIdentifier()
+    {
+        return this._nextBreakpointActionIdentifier++;
+    }
+
+    initializeTarget(target)
+    {
+        let DebuggerAgent = target.DebuggerAgent;
+        let targetData = this.dataForTarget(target);
+
+        // Initialize global state.
+        DebuggerAgent.enable();
+        DebuggerAgent.setBreakpointsActive(this._breakpointsEnabledSetting.value);
+        DebuggerAgent.setPauseOnAssertions(this._assertionsBreakpointEnabledSetting.value);
+        DebuggerAgent.setPauseOnExceptions(this._breakOnExceptionsState);
+        DebuggerAgent.setAsyncStackTraceDepth(this._asyncStackTraceDepthSetting.value);
+
+        if (this.paused)
+            targetData.pauseIfNeeded();
+
+        // Initialize breakpoints.
+        this._restoringBreakpoints = true;
+        for (let breakpoint of this._breakpoints) {
+            if (breakpoint.disabled)
+                continue;
+            if (!breakpoint.contentIdentifier)
+                continue;
+            this._setBreakpoint(breakpoint, target);
+        }
+        this._restoringBreakpoints = false;
+    }
+
+    // Protected (Called from WebInspector.DebuggerObserver)
+
+    breakpointResolved(target, 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) {
+            let sourceCodeLocation = this._sourceCodeLocationFromPayload(target, location);
+            breakpoint.sourceCodeLocation.sourceCode = sourceCodeLocation.sourceCode;
+        }
+
+        breakpoint.resolved = true;
+    }
+
+    reset()
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        let wasPaused = this.paused;
+
+        WebInspector.Script.resetUniqueDisplayNameNumbers();
+
+        this._internalWebKitScripts = [];
+        this._targetDebuggerDataMap.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 (let breakpoint of this._breakpoints) {
+            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(target, callFramesPayload, reason, data, asyncStackTracePayload)
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        if (this._delayedResumeTimeout) {
+            clearTimeout(this._delayedResumeTimeout);
+            this._delayedResumeTimeout = undefined;
+        }
+
+        let wasPaused = this.paused;
+        let targetData = this._targetDebuggerDataMap.get(target);
+
+        let callFrames = [];
+        let pauseReason = this._pauseReasonFromPayload(reason);
+        let pauseData = data || null;
+
+        for (var i = 0; i < callFramesPayload.length; ++i) {
+            var callFramePayload = callFramesPayload[i];
+            var sourceCodeLocation = this._sourceCodeLocationFromPayload(target, 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() && isWebKitInternalScript(sourceCodeLocation.sourceCode.sourceURL))
+                continue;
+
+            let scopeChain = this._scopeChainFromPayload(target, callFramePayload.scopeChain);
+            let callFrame = WebInspector.CallFrame.fromDebuggerPayload(target, callFramePayload, scopeChain, sourceCodeLocation);
+            callFrames.push(callFrame);
+        }
+
+        let activeCallFrame = callFrames[0];
+
+        if (!activeCallFrame) {
+            // FIXME: This may not be safe for multiple threads/targets.
+            // This indicates we were pausing in internal scripts only (Injected Scripts).
+            // Just resume and skip past this pause. We should be fixing the backend to
+            // not send such pauses.
+            if (wasPaused)
+                target.DebuggerAgent.continueUntilNextRunLoop();
+            else
+                target.DebuggerAgent.resume();
+            this._didResumeInternal(target);
+            return;
+        }
+
+        let asyncStackTrace = WebInspector.StackTrace.fromPayload(target, asyncStackTracePayload);
+        targetData.updateForPause(callFrames, pauseReason, pauseData, asyncStackTrace);
+
+        // Pause other targets because at least one target has paused.
+        // FIXME: Should this be done on the backend?
+        for (let [otherTarget, otherTargetData] of this._targetDebuggerDataMap)
+            otherTargetData.pauseIfNeeded();
+
+        let activeCallFrameDidChange = this._activeCallFrame && this._activeCallFrame.target === target;
+        if (activeCallFrameDidChange)
+            this._activeCallFrame = activeCallFrame;
+        else if (!wasPaused) {
+            this._activeCallFrame = activeCallFrame;
+            activeCallFrameDidChange = true;
+        }
+
+        if (!wasPaused)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Paused);
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.CallFramesDidChange, {target});
+
+        if (activeCallFrameDidChange)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
+    }
+
+    debuggerDidResume(target)
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        // COMPATIBILITY (iOS 10): Debugger.resumed event was ambiguous. When stepping
+        // we would receive a Debugger.resumed and we would not know if it really meant
+        // the backend resumed or would pause again due to a step. Legacy backends wait
+        // 50ms, and treat it as a real resume if we haven't paused in that time frame.
+        // This delay ensures the user interface does not flash between brief steps
+        // or successive breakpoints.
+        if (!DebuggerAgent.setPauseOnAssertions) {
+            this._delayedResumeTimeout = setTimeout(this._didResumeInternal.bind(this, target), 50);
+            return;
+        }
+
+        this._didResumeInternal(target);
+    }
+
+    playBreakpointActionSound(breakpointActionIdentifier)
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        InspectorFrontendHost.beep();
+    }
+
+    scriptDidParse(target, scriptIdentifier, url, startLine, startColumn, endLine, endColumn, isModule, isContentScript, sourceURL, sourceMapURL)
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        // Don't add the script again if it is already known.
+        let targetData = this.dataForTarget(target);
+        let existingScript = targetData.scriptForIdentifier(scriptIdentifier);
+        if (existingScript) {
+            console.assert(existingScript.url === (url || null));
+            console.assert(existingScript.range.startLine === startLine);
+            console.assert(existingScript.range.startColumn === startColumn);
+            console.assert(existingScript.range.endLine === endLine);
+            console.assert(existingScript.range.endColumn === endColumn);
+            return;
+        }
+
+        if (!WebInspector.isDebugUIEnabled() && isWebKitInternalScript(sourceURL))
+            return;
+
+        let range = new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
+        let sourceType = isModule ? WebInspector.Script.SourceType.Module : WebInspector.Script.SourceType.Program;
+        let script = new WebInspector.Script(target, scriptIdentifier, range, url, sourceType, isContentScript, sourceURL, sourceMapURL);
+
+        targetData.addScript(script);
+
+        if (target !== WebInspector.mainTarget && !target.mainResource) {
+            // FIXME: <https://webkit.org/b/164427> Web Inspector: WorkerTarget's mainResource should be a Resource not a Script
+            // We make the main resource of a WorkerTarget the Script instead of the Resource
+            // because the frontend may not be informed of the Resource. We should guarantee
+            // the frontend is informed of the Resource.
+            if (script.url === target.name) {
+                target.mainResource = script;
+                if (script.resource)
+                    target.resourceCollection.remove(script.resource);
+            }
+        }
+
+        if (isWebKitInternalScript(script.sourceURL)) {
+            this._internalWebKitScripts.push(script);
+            if (!WebInspector.isDebugUIEnabled())
+                return;
+        }
+
+        // Console expressions are not added to the UI by default.
+        if (isWebInspectorConsoleEvaluationScript(script.sourceURL))
+            return;
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ScriptAdded, {script});
+
+        if (target !== WebInspector.mainTarget && !script.isMainResource() && !script.resource)
+            target.addScript(script);
+    }
+
+    // Private
+
+    _sourceCodeLocationFromPayload(target, payload)
+    {
+        let targetData = this.dataForTarget(target);
+        let script = targetData.scriptForIdentifier(payload.scriptId);
+        if (!script)
+            return null;
+
+        return script.createSourceCodeLocation(payload.lineNumber, payload.columnNumber);
+    }
+
+    _scopeChainFromPayload(target, payload)
+    {
+        let scopeChain = [];
+        for (let i = 0; i < payload.length; ++i)
+            scopeChain.push(this._scopeChainNodeFromPayload(target, payload[i]));
+        return scopeChain;
+    }
+
+    _scopeChainNodeFromPayload(target, 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);
+        }
+
+        let object = WebInspector.RemoteObject.fromPayload(payload.object, target);
+        return new WebInspector.ScopeChainNode(type, [object], payload.name, payload.location, payload.empty);
+    }
+
+    _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;
+        }
+    }
+
+    _debuggerBreakpointOptions(breakpoint)
+    {
+        const templatePlaceholderRegex = /\$\{.*?\}/;
+
+        let options = breakpoint.options;
+        let invalidActions = [];
+
+        for (let action of options.actions) {
+            if (action.type !== WebInspector.BreakpointAction.Type.Log)
+                continue;
+
+            if (!templatePlaceholderRegex.test(action.data))
+                continue;
+
+            let lexer = new WebInspector.BreakpointLogMessageLexer;
+            let tokens = lexer.tokenize(action.data);
+            if (!tokens) {
+                invalidActions.push(action);
+                continue;
+            }
+
+            let templateLiteral = tokens.reduce((text, token) => {
+                if (token.type === WebInspector.BreakpointLogMessageLexer.TokenType.PlainText)
+                    return text + token.data.escapeCharacters("`\\");
+                if (token.type === WebInspector.BreakpointLogMessageLexer.TokenType.Expression)
+                    return text + "${" + token.data + "}";
+                return text;
+            }, "");
+
+            action.data = "console.log(`" + templateLiteral + "`)";
+            action.type = WebInspector.BreakpointAction.Type.Evaluate;
+        }
+
+        const onlyFirst = true;
+        for (let invalidAction of invalidActions)
+            options.actions.remove(invalidAction, onlyFirst);
+
+        return options;
+    }
+
+    _setBreakpoint(breakpoint, specificTarget, callback)
+    {
+        console.assert(!breakpoint.disabled);
+
+        if (breakpoint.disabled)
+            return;
+
+        if (!this._restoringBreakpoints && !this.breakpointsDisabledTemporarily) {
+            // 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(target, 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 (let location of locations)
+                this.breakpointResolved(target, 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.
+        // When setting for a new target, don't change the resolved target.
+        if (!specificTarget)
+            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.
+        let options;
+        if (DebuggerAgent.BreakpointActionType) {
+            options = this._debuggerBreakpointOptions(breakpoint);
+            if (options.actions.length) {
+                for (let action of options.actions)
+                    action.type = this._debuggerBreakpointActionType(action.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.contentIdentifier) {
+            let targets = specificTarget ? [specificTarget] : WebInspector.targets;
+            for (let target of targets) {
+                target.DebuggerAgent.setBreakpointByUrl.invoke({
+                    lineNumber: breakpoint.sourceCodeLocation.lineNumber,
+                    url: breakpoint.contentIdentifier,
+                    urlRegex: undefined,
+                    columnNumber: breakpoint.sourceCodeLocation.columnNumber,
+                    condition: breakpoint.condition,
+                    options
+                }, didSetBreakpoint.bind(this, target), target.DebuggerAgent);
+            }
+        } else if (breakpoint.scriptIdentifier) {
+            let target = breakpoint.target;
+            target.DebuggerAgent.setBreakpoint.invoke({
+                location: {scriptId: breakpoint.scriptIdentifier, lineNumber: breakpoint.sourceCodeLocation.lineNumber, columnNumber: breakpoint.sourceCodeLocation.columnNumber},
+                condition: breakpoint.condition,
+                options
+            }, didSetBreakpoint.bind(this, target), target.DebuggerAgent);
+        }
+    }
+
+    _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();
+        }
+
+        if (breakpoint.contentIdentifier) {
+            for (let target of WebInspector.targets)
+                target.DebuggerAgent.removeBreakpoint(breakpoint.identifier, didRemoveBreakpoint.bind(this));
+        } else if (breakpoint.scriptIdentifier) {
+            let target = breakpoint.target;
+            target.DebuggerAgent.removeBreakpoint(breakpoint.identifier, didRemoveBreakpoint.bind(this));
+        }
+    }
+
+    _breakpointDisplayLocationDidChange(event)
+    {
+        if (this._ignoreBreakpointDisplayLocationDidChangeEvent)
+            return;
+
+        let 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.breakpointsDisabledTemporarily)
+                this.breakpointsEnabled = true;
+            this._allExceptionsBreakpointEnabledSetting.value = !breakpoint.disabled;
+            this._updateBreakOnExceptionsState();
+            for (let target of WebInspector.targets)
+                target.DebuggerAgent.setPauseOnExceptions(this._breakOnExceptionsState);
+            return;
+        }
+
+        if (breakpoint === this._allUncaughtExceptionsBreakpoint) {
+            if (!breakpoint.disabled && !this.breakpointsDisabledTemporarily)
+                this.breakpointsEnabled = true;
+            this._allUncaughtExceptionsBreakpointEnabledSetting.value = !breakpoint.disabled;
+            this._updateBreakOnExceptionsState();
+            for (let target of WebInspector.targets)
+                target.DebuggerAgent.setPauseOnExceptions(this._breakOnExceptionsState);
+            return;
+        }
+
+        if (breakpoint === this._assertionsBreakpoint) {
+            if (!breakpoint.disabled && !this.breakpointsDisabledTemporarily)
+                this.breakpointsEnabled = true;
+            this._assertionsBreakpointEnabledSetting.value = !breakpoint.disabled;
+            for (let target of WebInspector.targets)
+                target.DebuggerAgent.setPauseOnAssertions(this._assertionsBreakpointEnabledSetting.value);
+            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 properties and get a new id.
+            this._setBreakpoint(breakpoint);
+        }
+    }
+
+    _startDisablingBreakpointsTemporarily()
+    {
+        console.assert(!this.breakpointsDisabledTemporarily, "Already temporarily disabling breakpoints.");
+        if (this.breakpointsDisabledTemporarily)
+            return;
+
+        this._temporarilyDisabledBreakpointsRestoreSetting.value = this._breakpointsEnabledSetting.value;
+
+        this.breakpointsEnabled = false;
+    }
+
+    _stopDisablingBreakpointsTemporarily()
+    {
+        console.assert(this.breakpointsDisabledTemporarily, "Was not temporarily disabling breakpoints.");
+        if (!this.breakpointsDisabledTemporarily)
+            return;
+
+        let restoreState = this._temporarilyDisabledBreakpointsRestoreSetting.value;
+        this._temporarilyDisabledBreakpointsRestoreSetting.value = null;
+
+        this.breakpointsEnabled = restoreState;
+    }
+
+    _timelineCapturingWillStart(event)
+    {
+        this._startDisablingBreakpointsTemporarily();
+
+        if (this.paused)
+            this.resume();
+    }
+
+    _timelineCapturingStopped(event)
+    {
+        this._stopDisablingBreakpointsTemporarily();
+    }
+
+    _targetRemoved(event)
+    {
+        let wasPaused = this.paused;
+
+        this._targetDebuggerDataMap.delete(event.data.target);
+
+        if (!this.paused && wasPaused)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Resumed);
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this._didResumeInternal(WebInspector.mainTarget);
+    }
+
+    _didResumeInternal(target)
+    {
+        if (!this.paused)
+            return;
+
+        if (this._delayedResumeTimeout) {
+            clearTimeout(this._delayedResumeTimeout);
+            this._delayedResumeTimeout = undefined;
+        }
+
+        let activeCallFrameDidChange = false;
+        if (this._activeCallFrame && this._activeCallFrame.target === target) {
+            this._activeCallFrame = null;
+            activeCallFrameDidChange = true;
+        }
+
+        this.dataForTarget(target).updateForResume();
+
+        if (!this.paused)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Resumed);
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.CallFramesDidChange, {target});
+
+        if (activeCallFrameDidChange)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
+    }
+
+    _updateBreakOnExceptionsState()
+    {
+        let state = "none";
+
+        if (this._breakpointsEnabledSetting.value) {
+            if (!this._allExceptionsBreakpoint.disabled)
+                state = "all";
+            else if (!this._allUncaughtExceptionsBreakpoint.disabled)
+                state = "uncaught";
+        }
+
+        this._breakOnExceptionsState = state;
+
+        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;
+        }
+    }
+
+    _saveBreakpoints()
+    {
+        if (this._restoringBreakpoints)
+            return;
+
+        let breakpointsToSave = this._breakpoints.filter((breakpoint) => !!breakpoint.contentIdentifier);
+        let serializedBreakpoints = breakpointsToSave.map((breakpoint) => breakpoint.info);
+        this._breakpointsSetting.value = serializedBreakpoints;
+    }
+
+    _associateBreakpointsWithSourceCode(breakpoints, sourceCode)
+    {
+        this._ignoreBreakpointDisplayLocationDidChangeEvent = true;
+
+        for (let breakpoint of breakpoints) {
+            if (!breakpoint.sourceCodeLocation.sourceCode)
+                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.contentIdentifier === sourceCode.contentIdentifier);
+        }
+
+        this._ignoreBreakpointDisplayLocationDidChangeEvent = false;
+    }
+
+    _debugUIEnabledDidChange()
+    {
+        let eventType = WebInspector.isDebugUIEnabled() ? WebInspector.DebuggerManager.Event.ScriptAdded : WebInspector.DebuggerManager.Event.ScriptRemoved;
+        for (let script of this._internalWebKitScripts)
+            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..4ad3a2ab3
--- /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/FormatterSourceMap.js b/Source/WebInspectorUI/UserInterface/Controllers/FormatterSourceMap.js
new file mode 100644
index 000000000..e320ba1ce
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/FormatterSourceMap.js
@@ -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.
+ */
+
+WebInspector.FormatterSourceMap = class FormatterSourceMap extends WebInspector.Object
+{
+    constructor(originalLineEndings, formattedLineEndings, mapping)
+    {
+        super();
+
+        this._originalLineEndings = originalLineEndings;
+        this._formattedLineEndings = formattedLineEndings;
+        this._mapping = mapping;
+    }
+
+    // Static
+
+    static fromSourceMapData({originalLineEndings, formattedLineEndings, mapping})
+    {
+        return new WebInspector.FormatterSourceMap(originalLineEndings, formattedLineEndings, 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..2fa0c936f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js
@@ -0,0 +1,640 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = new Map;
+        this._mainFrame = null;
+        this._resourceRequestIdentifierMap = new Map;
+        this._orphanedResources = new Map;
+
+        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()
+    {
+        return [...this._frameIdentifierMap.values()];
+    }
+
+    frameForIdentifier(frameId)
+    {
+        return this._frameIdentifierMap.get(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._addNewResourceToFrameOrTarget(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);
+
+        this._frameIdentifierMap.delete(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, targetId)
+    {
+        // 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);
+        let resource = this._resourceRequestIdentifierMap.get(requestIdentifier);
+        if (resource) {
+            // This is an existing request which is being redirected, update the resource.
+            console.assert(redirectResponse);
+            console.assert(!targetId);
+            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._addNewResourceToFrameOrTarget(requestIdentifier, frameIdentifier, loaderIdentifier, request.url, type, request.method, request.headers, request.postData, elapsedTime, null, null, initiatorSourceCodeLocation, originalRequestWillBeSentTimestamp, targetId);
+
+        // Associate the resource with the requestIdentifier so it can be found in future loading events.
+        this._resourceRequestIdentifierMap.set(requestIdentifier, resource);
+    }
+
+    markResourceRequestAsServedFromMemoryCache(requestIdentifier)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        let resource = this._resourceRequestIdentifierMap.get(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(!this._resourceRequestIdentifierMap.has(requestIdentifier));
+
+        var elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);
+        var initiatorSourceCodeLocation = this._initiatorSourceCodeLocationFromPayload(initiator);
+        var response = cachedResourcePayload.response;
+        var resource = this._addNewResourceToFrameOrTarget(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, response.timing);
+        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);
+        let resource = this._resourceRequestIdentifierMap.get(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.set(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._addNewResourceToFrameOrTarget(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.set(requestIdentifier, resource);
+        }
+
+        if (response.fromDiskCache)
+            resource.markAsCached();
+
+        resource.updateForResponse(response.url, response.mimeType, type, response.headers, response.status, response.statusText, elapsedTime, response.timing);
+    }
+
+    resourceRequestDidReceiveData(requestIdentifier, dataLength, encodedDataLength, timestamp)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        let resource = this._resourceRequestIdentifierMap.get(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.
+        let resource = this._resourceRequestIdentifierMap.get(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);
+
+        this._resourceRequestIdentifierMap.delete(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.
+        let resource = this._resourceRequestIdentifierMap.get(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();
+
+        this._resourceRequestIdentifierMap.delete(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(WebInspector.mainTarget, 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);
+    }
+
+    adoptOrphanedResourcesForTarget(target)
+    {
+        let resources = this._orphanedResources.take(target.identifier);
+        if (!resources)
+            return;
+
+        for (let resource of resources)
+            target.adoptResource(resource);
+    }
+
+    // Private
+
+    _addNewResourceToFrameOrTarget(requestIdentifier, frameIdentifier, loaderIdentifier, url, type, requestMethod, requestHeaders, requestData, elapsedTime, frameName, frameSecurityOrigin, initiatorSourceCodeLocation, originalRequestWillBeSentTimestamp, targetId)
+    {
+        console.assert(!this._waitingForMainFrameResourceTreePayload);
+
+        let resource = null;
+
+        let 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, targetId, requestIdentifier, requestMethod, requestHeaders, requestData, elapsedTime, initiatorSourceCodeLocation, originalRequestWillBeSentTimestamp);
+                if (resource.target === WebInspector.mainTarget)
+                    this._addResourceToFrame(frame, resource);
+                else if (resource.target)
+                    resource.target.addResource(resource);
+                else
+                    this._addOrphanedResource(resource, targetId);
+            }
+        } else {
+            // This is a new request for a new frame, which is always the main resource.
+            console.assert(!targetId);
+            resource = new WebInspector.Resource(url, null, type, loaderIdentifier, targetId, requestIdentifier, requestMethod, requestHeaders, requestData, elapsedTime, initiatorSourceCodeLocation, originalRequestWillBeSentTimestamp);
+            frame = new WebInspector.Frame(frameIdentifier, frameName, frameSecurityOrigin, loaderIdentifier, resource);
+            this._frameIdentifierMap.set(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);
+    }
+
+    _addResourceToTarget(target, resource)
+    {
+        console.assert(target !== WebInspector.mainTarget);
+        console.assert(resource);
+
+        target.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, WebInspector.mainTarget)[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 = new Map;
+        this._frameIdentifierMap = new Map;
+
+        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.set(frame.id, frame);
+
+        mainResource.markAsFinished();
+
+        return frame;
+    }
+
+    _createResource(payload, framePayload)
+    {
+        var resource = new WebInspector.Resource(payload.url, payload.mimeType, payload.type, framePayload.loaderId, payload.targetId);
+
+        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);
+            if (resource.target === WebInspector.mainTarget)
+                frame.addResource(resource);
+            else if (resource.target)
+                resource.target.addResource(resource);
+            else
+                this._addOrphanedResource(resource, resourcePayload.targetId);
+
+            if (resourcePayload.failed || resourcePayload.canceled)
+                resource.markAsFailed(resourcePayload.canceled);
+            else
+                resource.markAsFinished();
+        }
+
+        this._dispatchFrameWasAddedEvent(frame);
+
+        return frame;
+    }
+
+    _addOrphanedResource(resource, targetId)
+    {
+        let resources = this._orphanedResources.get(targetId);
+        if (!resources) {
+            resources = [];
+            this._orphanedResources.set(targetId, resources);
+        }
+
+        resources.push(resource);
+    }
+
+    _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..cc8449cf3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/HeapManager.js
@@ -0,0 +1,53 @@
+/*
+ * 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(target, payload)
+    {
+        // Called from WebInspector.HeapObserver.
+
+        // FIXME: <https://webkit.org/b/167323> Web Inspector: Enable Memory profiling in Workers
+        if (target !== WebInspector.mainTarget)
+            return;
+
+        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..a589adb38
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/IssueManager.js
@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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();
+    }
+
+    static issueMatchSourceCode(issue, sourceCode)
+    {
+        if (sourceCode instanceof WebInspector.SourceMapResource)
+            return issue.sourceCodeLocation && issue.sourceCodeLocation.displaySourceCode === sourceCode;
+        if (sourceCode instanceof WebInspector.Resource)
+            return issue.url === sourceCode.url && (!issue.sourceCodeLocation || issue.sourceCodeLocation.sourceCode === sourceCode);
+        if (sourceCode instanceof WebInspector.Script)
+            return issue.sourceCodeLocation && issue.sourceCodeLocation.sourceCode === sourceCode;
+        return false;
+    }
+
+    // Public
+
+    initialize()
+    {
+        this._issues = [];
+
+        this.dispatchEventToListeners(WebInspector.IssueManager.Event.Cleared);
+    }
+
+    issueWasAdded(consoleMessage)
+    {
+        let issue = new WebInspector.IssueMessage(consoleMessage);
+
+        this._issues.push(issue);
+
+        this.dispatchEventToListeners(WebInspector.IssueManager.Event.IssueWasAdded, {issue});
+    }
+
+    issuesForSourceCode(sourceCode)
+    {
+        var issues = [];
+
+        for (var i = 0; i < this._issues.length; ++i) {
+            var issue = this._issues[i];
+            if (WebInspector.IssueManager.issueMatchSourceCode(issue, sourceCode))
+                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..72621324c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/JavaScriptLogViewController.js
@@ -0,0 +1,350 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.messagesAlternateClearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "L", this.requestClearMessages.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.requestClearMessages.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._pendingMessages = [];
+        this._scheduledRenderIdentifier = 0;
+
+        this.startNewSession();
+    }
+
+    // Public
+
+    get prompt()
+    {
+        return this._prompt;
+    }
+
+    get currentConsoleGroup()
+    {
+        return this._currentConsoleGroup;
+    }
+
+    clear()
+    {
+        this._cleared = true;
+
+        const clearPreviousSessions = true;
+        this.startNewSession(clearPreviousSessions, {newSessionReason: WebInspector.ConsoleSession.NewSessionReason.ConsoleCleared});
+    }
+
+    startNewSession(clearPreviousSessions = false, data = {})
+    {
+        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;
+        }
+
+        // First session shows the time when the console was opened.
+        if (!this._sessions.length)
+            data.timestamp = Date.now();
+
+        let lastSession = this._sessions.lastValue;
+
+        // Remove empty session.
+        if (lastSession && !lastSession.hasMessages()) {
+            this._sessions.pop();
+            lastSession.element.remove();
+        }
+
+        let consoleSession = new WebInspector.ConsoleSession(data);
+
+        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, shouldRevealConsole)
+    {
+        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.target, result, false, savedResultIndex, shouldRevealConsole);
+            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);
+    }
+
+    requestClearMessages()
+    {
+        WebInspector.logManager.requestClearMessages();
+    }
+
+    // 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);
+        }
+
+        WebInspector.runtimeManager.activeExecutionContext.target.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 shouldRevealConsole = true;
+            let commandResultMessage = new WebInspector.ConsoleCommandResultMessage(result.target, result, wasThrown, savedResultIndex, shouldRevealConsole);
+            let commandResultMessageView = new WebInspector.ConsoleMessageView(commandResultMessage);
+            this._appendConsoleMessageView(commandResultMessageView, true);
+        }
+
+        let options = {
+            objectGroup: WebInspector.RuntimeManager.ConsoleObjectGroup,
+            includeCommandLineAPI: true,
+            doNotPauseOnExceptionsAndMuteConsole: false,
+            returnByValue: false,
+            generatePreview: true,
+            saveResult: true,
+            sourceURLAppender: appendWebInspectorConsoleEvaluationSourceURL,
+        };
+
+        WebInspector.runtimeManager.evaluateInInspectedWindow(text, options, printResult.bind(this));
+    }
+
+    // Private
+
+    _handleFindNextShortcut()
+    {
+        this.delegate.highlightNextSearchMatch();
+    }
+
+    _handleFindPreviousShortcut()
+    {
+        this.delegate.highlightPreviousSearchMatch();
+    }
+
+    _appendConsoleMessageView(messageView, repeatCountWasInterrupted)
+    {
+        this._pendingMessages.push(messageView);
+
+        this._cleared = false;
+        this._repeatCountWasInterrupted = repeatCountWasInterrupted || false;
+
+        if (!repeatCountWasInterrupted)
+            this._previousMessageView = messageView;
+
+        if (messageView.message && messageView.message.source !== WebInspector.ConsoleMessage.MessageSource.JS)
+            this._lastCommitted = "";
+
+        if (WebInspector.consoleContentView.visible)
+            this.renderPendingMessagesSoon();
+
+        if (!WebInspector.isShowingConsoleTab() && messageView.message && messageView.message.shouldRevealConsole)
+            WebInspector.showSplitConsole();
+    }
+
+    renderPendingMessages()
+    {
+        if (this._scheduledRenderIdentifier) {
+            cancelAnimationFrame(this._scheduledRenderIdentifier);
+            this._scheduledRenderIdentifier = 0;
+        }
+
+        if (this._pendingMessages.length === 0)
+            return;
+
+        const maxMessagesPerFrame = 100;
+        let messages = this._pendingMessages.splice(0, maxMessagesPerFrame);
+
+        let lastMessageView = messages.lastValue;
+        let isCommandView = lastMessageView instanceof WebInspector.ConsoleCommandView;
+        let shouldScrollToBottom = isCommandView || lastMessageView.message.type === WebInspector.ConsoleMessage.MessageType.Result || this.isScrolledToBottom();
+
+        for (let messageView of messages) {
+            messageView.render();
+            this._didRenderConsoleMessageView(messageView);
+        }
+
+        if (shouldScrollToBottom)
+            this.scrollToBottom();
+
+        WebInspector.quickConsole.needsLayout();
+
+        if (this._pendingMessages.length > 0)
+            this.renderPendingMessagesSoon();
+    }
+
+    renderPendingMessagesSoon()
+    {
+        if (this._scheduledRenderIdentifier)
+            return;
+
+        this._scheduledRenderIdentifier = requestAnimationFrame(() => this.renderPendingMessages());
+    }
+
+    _didRenderConsoleMessageView(messageView)
+    {
+        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 (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..134b2f032
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/JavaScriptRuntimeCompletionProvider.js
@@ -0,0 +1,307 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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 {
+            let options = {objectGroup: "completion", includeCommandLineAPI: true, doNotPauseOnExceptionsAndMuteConsole: true, returnByValue: false, generatePreview: false, saveResult: false};
+            WebInspector.runtimeManager.evaluateInInspectedWindow(base, options, 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")) {
+                WebInspector.runtimeManager.activeExecutionContext.target.RuntimeAgent.releaseObjectGroup("completion");
+
+                updateLastPropertyNames.call(this, {});
+                completionController.updateCompletions(defaultCompletions);
+
+                return;
+            }
+
+            function inspectedPage_evalResult_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 inspectedPage_evalResult_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(inspectedPage_evalResult_getArrayCompletions, undefined, receivedArrayPropertyNames.bind(this));
+            else if (result.type === "object" || result.type === "function")
+                result.callFunctionJSON(inspectedPage_evalResult_getCompletions, undefined, receivedPropertyNames.bind(this));
+            else if (result.type === "string" || result.type === "number" || result.type === "boolean" || result.type === "symbol") {
+                let options = {objectGroup: "completion", includeCommandLineAPI: false, doNotPauseOnExceptionsAndMuteConsole: true, returnByValue: false, generatePreview: false, saveResult: false};
+                WebInspector.runtimeManager.evaluateInInspectedWindow("(" + inspectedPage_evalResult_getCompletions + ")(\"" + result.type + "\")", options, 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);
+
+            WebInspector.runtimeManager.activeExecutionContext.target.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) {
+                    let targetData = WebInspector.debuggerManager.dataForTarget(WebInspector.runtimeManager.activeExecutionContext.target);
+                    if (targetData.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..3b917bbbd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/LogManager.js
@@ -0,0 +1,129 @@
+/*
+ * 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;
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    }
+
+    // Public
+
+    messageWasAdded(target, 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((x) => WebInspector.RemoteObject.fromPayload(x, target));
+
+        let message = new WebInspector.ConsoleMessage(target, source, level, text, type, url, line, column, repeatCount, parameters, stackTrace, null);
+
+        this.dispatchEventToListeners(WebInspector.LogManager.Event.MessageAdded, {message});
+
+        if (message.level === "warning" || message.level === "error")
+            WebInspector.issueManager.issueWasAdded(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 (!WebInspector.settings.clearLogOnNavigate.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;
+
+        for (let target of WebInspector.targets)
+            target.ConsoleAgent.clearMessages();
+    }
+
+    // Private
+
+    _mainResourceDidChange(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        this._isNewPageOrReload = true;
+
+        let timestamp = Date.now();
+        let wasReloaded = event.data.oldMainResource && event.data.oldMainResource.url === event.target.mainResource.url;
+        this.dispatchEventToListeners(WebInspector.LogManager.Event.SessionStarted, {timestamp, wasReloaded});
+
+        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/MemoryManager.js b/Source/WebInspectorUI/UserInterface/Controllers/MemoryManager.js
new file mode 100644
index 000000000..ecb07eacb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/MemoryManager.js
@@ -0,0 +1,49 @@
+/*
+ * 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.MemoryManager = class MemoryManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        if (window.MemoryAgent)
+            MemoryAgent.enable();
+    }
+
+    // Public
+
+    memoryPressure(timestamp, protocolSeverity)
+    {
+        // Called from WebInspector.MemoryObserver.
+
+        let memoryPressureEvent = WebInspector.MemoryPressureEvent.fromPayload(timestamp, protocolSeverity);
+        this.dispatchEventToListeners(WebInspector.MemoryManager.Event.MemoryPressure, {memoryPressureEvent});
+    }
+};
+
+WebInspector.MemoryManager.Event = {
+    MemoryPressure: "memory-manager-memory-pressure",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/ProbeManager.js b/Source/WebInspectorUI/UserInterface/Controllers/ProbeManager.js
new file mode 100644
index 000000000..b7f100fba
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/ProbeManager.js
@@ -0,0 +1,177 @@
+/*
+ * 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(target, sample)
+    {
+        console.assert(this._probesByIdentifier.has(sample.probeId), "Unknown probe identifier specified for sample: ", sample);
+        let probe = this._probesByIdentifier.get(sample.probeId);
+        let elapsedTime = WebInspector.timelineManager.computeElapsedTime(sample.timestamp);
+        let object = WebInspector.RemoteObject.fromPayload(sample.payload, target);
+        probe.addSample(new WebInspector.ProbeSample(sample.sampleId, sample.batchId, elapsedTime, object));
+    }
+
+    // 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..ab04ddf10
--- /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/ResourceQueryController.js b/Source/WebInspectorUI/UserInterface/Controllers/ResourceQueryController.js
new file mode 100644
index 000000000..171165f32
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/ResourceQueryController.js
@@ -0,0 +1,203 @@
+/*
+ * 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.ResourceQueryController = class ResourceQueryController extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._resourceDataMap = new Map;
+    }
+
+    // Public
+
+    addResource(resource)
+    {
+        this._resourceDataMap.set(resource, {});
+    }
+
+    removeResource(resource)
+    {
+        this._resourceDataMap.delete(resource);
+    }
+
+    reset()
+    {
+        this._resourceDataMap.clear();
+    }
+
+    executeQuery(query)
+    {
+        if (!query || !this._resourceDataMap.size)
+            return [];
+
+        query = query.removeWhitespace().toLowerCase();
+
+        let cookie = null;
+        if (query.includes(":")) {
+            let [newQuery, lineNumber, columnNumber] = query.split(":");
+            query = newQuery;
+            lineNumber = lineNumber ? parseInt(lineNumber, 10) - 1 : 0;
+            columnNumber = columnNumber ? parseInt(columnNumber, 10) - 1 : 0;
+            cookie = {lineNumber, columnNumber};
+        }
+
+        let results = [];
+        for (let [resource, cachedData] of this._resourceDataMap) {
+            if (!cachedData.searchString) {
+                let displayName = resource.displayName;
+                cachedData.searchString = displayName.toLowerCase();
+                cachedData.specialCharacterIndices = this._findSpecialCharacterIndices(displayName);
+            }
+
+            let matches = this._findQueryMatches(query, cachedData.searchString, cachedData.specialCharacterIndices);
+            if (matches.length)
+                results.push(new WebInspector.ResourceQueryResult(resource, matches, cookie));
+        }
+
+        // Resources are sorted in descending order by rank. Resources of equal
+        // rank are sorted by display name.
+        return results.sort((a, b) => {
+            if (a.rank === b.rank)
+                return a.resource.displayName.localeCompare(b.resource.displayName);
+            return b.rank - a.rank;
+        });
+    }
+
+    // Private
+
+    _findQueryMatches(query, searchString, specialCharacterIndices)
+    {
+        let matches = [];
+        let queryIndex = 0;
+        let searchIndex = 0;
+        let specialIndex = 0;
+        let deadBranches = new Array(query.length).fill(Infinity);
+        let type = WebInspector.ResourceQueryMatch.Type.Special;
+
+        function pushMatch(index)
+        {
+            matches.push(new WebInspector.ResourceQueryMatch(type, index, queryIndex));
+            searchIndex = index + 1;
+            queryIndex++;
+        }
+
+        function matchNextSpecialCharacter()
+        {
+            if (specialIndex >= specialCharacterIndices.length)
+                return false;
+
+            let originalSpecialIndex = specialIndex;
+            while (specialIndex < specialCharacterIndices.length) {
+                // Normal character matching can move past special characters,
+                // so advance the special character index if it's before the
+                // current search string position.
+                let index = specialCharacterIndices[specialIndex++];
+                if (index < searchIndex)
+                    continue;
+
+                if (query[queryIndex] === searchString[index]) {
+                    pushMatch(index);
+                    return true;
+                }
+            }
+
+            specialIndex = originalSpecialIndex;
+            return false;
+        }
+
+        function backtrack()
+        {
+            while (matches.length) {
+                queryIndex--;
+
+                let lastMatch = matches.pop();
+                if (lastMatch.type !== WebInspector.ResourceQueryMatch.Type.Special)
+                    continue;
+
+                deadBranches[lastMatch.queryIndex] = lastMatch.index;
+                searchIndex = matches.lastValue ? matches.lastValue.index + 1 : 0;
+                return true;
+            }
+
+            return false;
+        }
+
+        while (queryIndex < query.length && searchIndex < searchString.length) {
+            if (type === WebInspector.ResourceQueryMatch.Type.Special && !matchNextSpecialCharacter())
+                type = WebInspector.ResourceQueryMatch.Type.Normal;
+
+            if (type === WebInspector.ResourceQueryMatch.Type.Normal) {
+                let index = searchString.indexOf(query[queryIndex], searchIndex);
+                if (index >= 0 && index < deadBranches[queryIndex]) {
+                    pushMatch(index);
+                    type = WebInspector.ResourceQueryMatch.Type.Special;
+                } else if (!backtrack())
+                    return [];
+            }
+        }
+
+        if (queryIndex < query.length)
+            return [];
+
+        return matches;
+    }
+
+    _findSpecialCharacterIndices(string)
+    {
+        if (!string.length)
+            return [];
+
+        const filenameSeparators = "_.-";
+
+        // Special characters include the following:
+        // 1. The first character.
+        // 2. Uppercase characters that follow a lowercase letter.
+        // 3. Filename separators and the first character following the separator.
+        let indices = [0];
+
+        for (let i = 1; i < string.length; ++i) {
+            let character = string[i];
+            let isSpecial = false;
+
+            if (filenameSeparators.includes(character))
+                isSpecial = true;
+            else {
+                let previousCharacter = string[i - 1];
+                let previousCharacterIsSeparator = filenameSeparators.includes(previousCharacter);
+                if (previousCharacterIsSeparator)
+                    isSpecial = true;
+                else if (character.isUpperCase() && previousCharacter.isLowerCase())
+                    isSpecial = true;
+            }
+
+            if (isSpecial)
+                indices.push(i);
+        }
+
+        return indices;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/RuntimeManager.js b/Source/WebInspectorUI/UserInterface/Controllers/RuntimeManager.js
new file mode 100644
index 000000000..a10541422
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/RuntimeManager.js
@@ -0,0 +1,262 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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();
+
+        this._activeExecutionContext = WebInspector.mainTarget.executionContext;
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ExecutionContextsCleared, this._frameExecutionContextsCleared, this);
+    }
+
+    // Public
+
+    get activeExecutionContext()
+    {
+        return this._activeExecutionContext;
+    }
+
+    set activeExecutionContext(executionContext)
+    {
+        if (this._activeExecutionContext === executionContext)
+            return;
+
+        this._activeExecutionContext = executionContext;
+
+        this.dispatchEventToListeners(WebInspector.RuntimeManager.Event.ActiveExecutionContextChanged);
+    }
+
+    evaluateInInspectedWindow(expression, options, callback)
+    {
+        let {objectGroup, includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole, returnByValue, generatePreview, saveResult, sourceURLAppender} = options;
+
+        includeCommandLineAPI = includeCommandLineAPI || false;
+        doNotPauseOnExceptionsAndMuteConsole = doNotPauseOnExceptionsAndMuteConsole || false;
+        returnByValue = returnByValue || false;
+        generatePreview = generatePreview || false;
+        saveResult = saveResult || false;
+        sourceURLAppender = sourceURLAppender || appendWebInspectorSourceURL;
+
+        console.assert(objectGroup, "RuntimeManager.evaluateInInspectedWindow should always be called with an objectGroup");
+        console.assert(typeof sourceURLAppender === "function");
+
+        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 + ")";
+        } else if (/\bawait\b/.test(expression)) {
+            // Transform `await <expr>` into an async function assignment.
+            expression = this._tryApplyAwaitConvenience(expression);
+        }
+
+        expression = sourceURLAppender(expression);
+
+        let target = this._activeExecutionContext.target;
+        let executionContextId = this._activeExecutionContext.id;
+
+        if (WebInspector.debuggerManager.activeCallFrame) {
+            target = WebInspector.debuggerManager.activeCallFrame.target;
+            executionContextId = target.executionContext.id;
+        }
+
+        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, target), wasThrown, savedResultIndex);
+        }
+
+        if (WebInspector.debuggerManager.activeCallFrame) {
+            // COMPATIBILITY (iOS 8): "saveResult" did not exist.
+            target.DebuggerAgent.evaluateOnCallFrame.invoke({callFrameId: WebInspector.debuggerManager.activeCallFrame.id, expression, objectGroup, includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole, returnByValue, generatePreview, saveResult}, evalCallback.bind(this), target.DebuggerAgent);
+            return;
+        }
+
+        // COMPATIBILITY (iOS 8): "saveResult" did not exist.
+        target.RuntimeAgent.evaluate.invoke({expression, objectGroup, includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole, contextId: executionContextId, returnByValue, generatePreview, saveResult}, evalCallback.bind(this), target.RuntimeAgent);
+    }
+
+    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);
+        }
+
+        let target = this._activeExecutionContext.target;
+        let executionContextId = this._activeExecutionContext.id;
+
+        if (remoteObject.objectId)
+            target.RuntimeAgent.saveResult(remoteObject.asCallArgument(), mycallback);
+        else
+            target.RuntimeAgent.saveResult(remoteObject.asCallArgument(), executionContextId, mycallback);
+    }
+
+    getPropertiesForRemoteObject(objectId, callback)
+    {
+        this._activeExecutionContext.target.RuntimeAgent.getProperties(objectId, function(error, result) {
+            if (error) {
+                callback(error);
+                return;
+            }
+
+            let properties = new Map;
+            for (let property of result)
+                properties.set(property.name, property);
+
+            callback(null, properties);
+        });
+    }
+
+    // Private
+
+    _frameExecutionContextsCleared(event)
+    {
+        let contexts = event.data.contexts || [];
+
+        let currentContextWasDestroyed = contexts.some((context) => context.id === this._activeExecutionContext.id);
+        if (currentContextWasDestroyed)
+            this.activeExecutionContext = WebInspector.mainTarget.executionContext;
+    }
+
+    _tryApplyAwaitConvenience(originalExpression)
+    {
+        let esprimaSyntaxTree;
+
+        // Do not transform if the original code parses just fine.
+        try {
+            esprima.parse(originalExpression);
+            return originalExpression;
+        } catch (error) { }
+
+        // Do not transform if the async function version does not parse.
+        try {
+            esprimaSyntaxTree = esprima.parse("(async function(){" + originalExpression + "})");
+        } catch (error) {
+            return originalExpression;
+        }
+
+        // Assert expected AST produced by our wrapping code.
+        console.assert(esprimaSyntaxTree.type === "Program");
+        console.assert(esprimaSyntaxTree.body.length === 1);
+        console.assert(esprimaSyntaxTree.body[0].type === "ExpressionStatement");
+        console.assert(esprimaSyntaxTree.body[0].expression.type === "FunctionExpression");
+        console.assert(esprimaSyntaxTree.body[0].expression.async);
+        console.assert(esprimaSyntaxTree.body[0].expression.body.type === "BlockStatement");
+
+        // Do not transform if there is more than one statement.
+        let asyncFunctionBlock = esprimaSyntaxTree.body[0].expression.body;
+        if (asyncFunctionBlock.body.length !== 1)
+            return originalExpression;
+
+        // Extract the variable name for transformation.
+        let variableName;
+        let anonymous = false;
+        let declarationKind = "var";
+        let awaitPortion;
+        let statement = asyncFunctionBlock.body[0];
+        if (statement.type === "ExpressionStatement"
+            && statement.expression.type === "AwaitExpression") {
+            // await <expr>
+            anonymous = true;
+        } else if (statement.type === "ExpressionStatement"
+            && statement.expression.type === "AssignmentExpression"
+            && statement.expression.right.type === "AwaitExpression"
+            && statement.expression.left.type === "Identifier") {
+            // x = await <expr>
+            variableName = statement.expression.left.name;
+            awaitPortion = originalExpression.substring(originalExpression.indexOf("await"));
+        } else if (statement.type === "VariableDeclaration"
+            && statement.declarations.length === 1
+            && statement.declarations[0].init.type === "AwaitExpression"
+            && statement.declarations[0].id.type === "Identifier") {
+            // var x = await <expr>
+            variableName = statement.declarations[0].id.name;
+            declarationKind = statement.kind;
+            awaitPortion = originalExpression.substring(originalExpression.indexOf("await"));
+        } else {
+            // Do not transform if this was not one of the simple supported syntaxes.
+            return originalExpression;
+        }
+
+        if (anonymous) {
+            return `
+(async function() {
+    try {
+        let result = ${originalExpression};
+        console.info("%o", result);
+    } catch (e) {
+        console.error(e);
+    }
+})();
+undefined`;
+        }
+
+        return `${declarationKind} ${variableName};
+(async function() {
+    try {
+        ${variableName} = ${awaitPortion};
+        console.info("%o", ${variableName});
+    } catch (e) {
+        console.error(e);
+    }
+})();
+undefined;`;
+    }
+};
+
+WebInspector.RuntimeManager.ConsoleObjectGroup = "console";
+WebInspector.RuntimeManager.TopLevelExecutionContextIdentifier = undefined;
+
+WebInspector.RuntimeManager.Event = {
+    DidEvaluate: Symbol("runtime-manager-did-evaluate"),
+    DefaultExecutionContextChanged: Symbol("runtime-manager-default-execution-context-changed"),
+    ActiveExecutionContextChanged: Symbol("runtime-manager-active-execution-context-changed"),
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/SourceMapManager.js b/Source/WebInspectorUI/UserInterface/Controllers/SourceMapManager.js
new file mode 100644
index 000000000..6bb8cefba
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/SourceMapManager.js
@@ -0,0 +1,186 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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)
+    {
+        // The baseURL could have come from a "//# sourceURL". Attempt to get a
+        // reasonable absolute URL for the base by using the main resource's URL.
+        if (WebInspector.frameResourceManager.mainFrame)
+            baseURL = absoluteURL(baseURL, WebInspector.frameResourceManager.mainFrame.url);
+
+        if (sourceMapURL.startsWith("data:")) {
+            this._loadAndParseSourceMap(sourceMapURL, baseURL, originalSourceCode);
+            return;
+        }
+
+        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..a267dcb85
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/StorageManager.js
@@ -0,0 +1,336 @@
+/*
+ * 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});
+    }
+
+    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);
+    }
+
+    clearObjectStore(objectStore)
+    {
+        let securityOrigin = objectStore.parentDatabase.securityOrigin;
+        let databaseName = objectStore.parentDatabase.name;
+        let objectStoreName = objectStore.name;
+
+        IndexedDBAgent.clearObjectStore(securityOrigin, databaseName, objectStoreName);
+    }
+
+    // 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 IndexedDBAgent.KeyPathType.Null:
+                return null;
+            case IndexedDBAgent.KeyPathType.String:
+                return keyPathPayload.string;
+            case IndexedDBAgent.KeyPathType.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/TargetManager.js b/Source/WebInspectorUI/UserInterface/Controllers/TargetManager.js
new file mode 100644
index 000000000..7e987d4dd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/TargetManager.js
@@ -0,0 +1,75 @@
+/*
+ * 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.TargetManager = class TargetManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        console.assert(WebInspector.mainTarget);
+
+        this._targets = new Set([WebInspector.mainTarget]);
+    }
+
+    // Public
+
+    get targets()
+    {
+        return this._targets;
+    }
+
+    targetForIdentifier(targetId)
+    {
+        if (!targetId)
+            return null;
+
+        for (let target of this._targets) {
+            if (target.identifier === targetId)
+                return target;
+        }
+
+        return null;
+    }
+
+    addTarget(target)
+    {
+        this._targets.add(target);
+
+        this.dispatchEventToListeners(WebInspector.TargetManager.Event.TargetAdded, {target});
+    }
+
+    removeTarget(target)
+    {
+        this._targets.delete(target);
+
+        this.dispatchEventToListeners(WebInspector.TargetManager.Event.TargetRemoved, {target});
+    }
+};
+
+WebInspector.TargetManager.Event = {
+    TargetAdded: Symbol("target-manager-target-added"),
+    TargetRemoved: Symbol("target-manager-target-removed"),
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js b/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
new file mode 100644
index 000000000..e03ba9ba2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
@@ -0,0 +1,1091 @@
+/*
+ * 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.TimelineManager = class TimelineManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ProvisionalLoadStarted, this._provisionalLoadStarted, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
+        WebInspector.Target.addEventListener(WebInspector.Target.Event.ResourceAdded, this._resourceWasAdded, this);
+
+        WebInspector.heapManager.addEventListener(WebInspector.HeapManager.Event.GarbageCollected, this._garbageCollected, this);
+        WebInspector.memoryManager.addEventListener(WebInspector.MemoryManager.Event.MemoryPressure, this._memoryPressure, this);
+
+        this._enabledTimelineTypesSetting = new WebInspector.Setting("enabled-instrument-types", WebInspector.TimelineManager.defaultTimelineTypes());
+        this._updateAutoCaptureInstruments();
+
+        this._persistentNetworkTimeline = new WebInspector.NetworkTimeline;
+
+        this._isCapturing = false;
+        this._initiatedByBackendStart = false;
+        this._initiatedByBackendStop = false;
+        this._waitingForCapturingStartedEvent = false;
+        this._isCapturingPageReload = false;
+        this._autoCaptureOnPageLoad = false;
+        this._mainResourceForAutoCapturing = null;
+        this._shouldSetAutoCapturingMainResource = false;
+        this._boundStopCapturing = this.stopCapturing.bind(this);
+
+        this._webTimelineScriptRecordsExpectingScriptProfilerEvents = null;
+        this._scriptProfilerRecords = null;
+
+        this._stopCapturingTimeout = undefined;
+        this._deadTimeTimeout = undefined;
+        this._lastDeadTimeTickle = 0;
+
+        this.reset();
+    }
+
+    // Static
+
+    static defaultTimelineTypes()
+    {
+        if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript) {
+            let defaultTypes = [WebInspector.TimelineRecord.Type.Script];
+            if (WebInspector.HeapAllocationsInstrument.supported())
+                defaultTypes.push(WebInspector.TimelineRecord.Type.HeapAllocations);
+            return defaultTypes;
+        }
+
+        let defaultTypes = [
+            WebInspector.TimelineRecord.Type.Network,
+            WebInspector.TimelineRecord.Type.Layout,
+            WebInspector.TimelineRecord.Type.Script,
+        ];
+
+        if (WebInspector.FPSInstrument.supported())
+            defaultTypes.push(WebInspector.TimelineRecord.Type.RenderingFrame);
+
+        return defaultTypes;
+    }
+
+    static availableTimelineTypes()
+    {
+        let types = WebInspector.TimelineManager.defaultTimelineTypes();
+        if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
+            return types;
+
+        if (WebInspector.MemoryInstrument.supported())
+            types.push(WebInspector.TimelineRecord.Type.Memory);
+
+        if (WebInspector.HeapAllocationsInstrument.supported())
+            types.push(WebInspector.TimelineRecord.Type.HeapAllocations);
+
+        return types;
+    }
+
+    // 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)
+    {
+        autoCapture = !!autoCapture;
+
+        if (this._autoCaptureOnPageLoad === autoCapture)
+            return;
+
+        this._autoCaptureOnPageLoad = autoCapture;
+
+        if (window.TimelineAgent && TimelineAgent.setAutoCaptureEnabled)
+            TimelineAgent.setAutoCaptureEnabled(this._autoCaptureOnPageLoad);
+    }
+
+    get enabledTimelineTypes()
+    {
+        let availableTimelineTypes = WebInspector.TimelineManager.availableTimelineTypes();
+        return this._enabledTimelineTypesSetting.value.filter((type) => availableTimelineTypes.includes(type));
+    }
+
+    set enabledTimelineTypes(x)
+    {
+        this._enabledTimelineTypesSetting.value = x || [];
+
+        this._updateAutoCaptureInstruments();
+    }
+
+    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._waitingForCapturingStartedEvent = true;
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.CapturingWillStart);
+
+        this._activeRecording.start(this._initiatedByBackendStart);
+    }
+
+    stopCapturing()
+    {
+        console.assert(this._isCapturing, "TimelineManager is not capturing.");
+
+        this._activeRecording.stop(this._initiatedByBackendStop);
+
+        // 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)
+    {
+        // Called from WebInspector.TimelineObserver.
+
+        if (this._isCapturing)
+            return;
+
+        this._waitingForCapturingStartedEvent = false;
+        this._isCapturing = true;
+
+        this._lastDeadTimeTickle = 0;
+
+        if (startTime)
+            this.activeRecording.initializeTimeBoundsIfNecessary(startTime);
+
+        this._webTimelineScriptRecordsExpectingScriptProfilerEvents = [];
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.CapturingStarted, {startTime});
+    }
+
+    capturingStopped(endTime)
+    {
+        // Called from WebInspector.TimelineObserver.
+
+        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._shouldSetAutoCapturingMainResource = false;
+        this._mainResourceForAutoCapturing = null;
+        this._initiatedByBackendStart = false;
+        this._initiatedByBackendStop = false;
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.CapturingStopped, {endTime});
+    }
+
+    autoCaptureStarted()
+    {
+        // Called from WebInspector.TimelineObserver.
+
+        if (this._isCapturing)
+            this.stopCapturing();
+
+        this._initiatedByBackendStart = true;
+
+        // We may already have an fresh TimelineRecording created if autoCaptureStarted is received
+        // between sending the Timeline.start command and receiving Timeline.capturingStarted event.
+        // In that case, there is no need to call startCapturing again. Reuse the fresh recording.
+        if (!this._waitingForCapturingStartedEvent) {
+            const createNewRecording = true;
+            this.startCapturing(createNewRecording);
+        }
+
+        this._shouldSetAutoCapturingMainResource = true;
+    }
+
+    programmaticCaptureStarted()
+    {
+        // Called from WebInspector.TimelineObserver.
+
+        this._initiatedByBackendStart = true;
+
+        this._activeRecording.addScriptInstrumentForProgrammaticCapture();
+
+        const createNewRecording = false;
+        this.startCapturing(createNewRecording);
+    }
+
+    programmaticCaptureStopped()
+    {
+        // Called from WebInspector.TimelineObserver.
+
+        this._initiatedByBackendStop = true;
+
+        // FIXME: This is purely to avoid a noisy assert. Previously
+        // it was impossible to stop without stopping from the UI.
+        console.assert(!this._isCapturing);
+        this._isCapturing = true;
+
+        this.stopCapturing();
+    }
+
+    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.
+    }
+
+    heapTrackingStarted(timestamp, snapshot)
+    {
+        // Called from WebInspector.HeapObserver.
+
+        this._addRecord(new WebInspector.HeapAllocationsTimelineRecord(timestamp, snapshot));
+
+        this.capturingStarted(timestamp);
+    }
+
+    heapTrackingCompleted(timestamp, snapshot)
+    {
+        // Called from WebInspector.HeapObserver.
+
+        this._addRecord(new WebInspector.HeapAllocationsTimelineRecord(timestamp, snapshot));
+    }
+
+    heapSnapshotAdded(timestamp, snapshot)
+    {
+        // Called from WebInspector.HeapAllocationsInstrument.
+
+        this._addRecord(new WebInspector.HeapAllocationsTimelineRecord(timestamp, snapshot));
+    }
+
+    // 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;
+            // COMPATIBILITY (iOS 9): With the Sampling Profiler, profiles no longer include legacy profile data.
+            console.assert(profileData || TimelineAgent.setInstruments);
+            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.
+            var 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;
+
+        let instruments = this.enabledTimelineTypes.map((type) => WebInspector.Instrument.createForTimelineType(type));
+        let identifier = this._nextRecordingIdentifier++;
+        let 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._mainResourceForAutoCapturing && WebInspector.TimelineRecording.isLegacy) {
+            console.assert(this._mainResourceForAutoCapturing.originalRequestWillBeSentTimestamp);
+            this._activeRecording.setLegacyBaseTimestamp(this._mainResourceForAutoCapturing.originalRequestWillBeSentTimestamp);
+            this._mainResourceForAutoCapturing._requestSentTimestamp = 0;
+        }
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingLoaded, {oldRecording});
+    }
+
+    _callFramesFromPayload(payload)
+    {
+        if (!payload)
+            return null;
+
+        return payload.map((x) => WebInspector.CallFrame.fromPayload(WebInspector.assumingMainTarget(), x));
+    }
+
+    _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();
+    }
+
+    _attemptAutoCapturingForFrame(frame)
+    {
+        if (!this._autoCaptureOnPageLoad)
+            return false;
+
+        if (!frame.isMainFrame())
+            return false;
+
+        // COMPATIBILITY (iOS 9): Timeline.setAutoCaptureEnabled did not exist.
+        // Perform auto capture in the frontend.
+        if (!TimelineAgent.setAutoCaptureEnabled)
+            return this._legacyAttemptStartAutoCapturingForFrame(frame);
+
+        if (!this._shouldSetAutoCapturingMainResource)
+            return false;
+
+        console.assert(this._isCapturing, "We saw autoCaptureStarted so we should already be capturing");
+
+        let mainResource = frame.provisionalMainResource || frame.mainResource;
+        if (mainResource === this._mainResourceForAutoCapturing)
+            return false;
+
+        let oldMainResource = frame.mainResource || null;
+        this._isCapturingPageReload = oldMainResource !== null && oldMainResource.url === mainResource.url;
+
+        this._mainResourceForAutoCapturing = mainResource;
+
+        this._addRecord(new WebInspector.ResourceTimelineRecord(mainResource));
+
+        this._resetAutoRecordingMaxTimeTimeout();
+
+        this._shouldSetAutoCapturingMainResource = false;
+
+        return true;
+    }
+
+    _legacyAttemptStartAutoCapturingForFrame(frame)
+    {
+        if (this._isCapturing && !this._mainResourceForAutoCapturing)
+            return false;
+
+        let mainResource = frame.provisionalMainResource || frame.mainResource;
+        if (mainResource === this._mainResourceForAutoCapturing)
+            return false;
+
+        let oldMainResource = frame.mainResource || null;
+        this._isCapturingPageReload = oldMainResource !== null && oldMainResource.url === mainResource.url;
+
+        if (this._isCapturing)
+            this.stopCapturing();
+
+        this._mainResourceForAutoCapturing = mainResource;
+
+        this._loadNewRecording();
+
+        this.startCapturing();
+
+        this._addRecord(new WebInspector.ResourceTimelineRecord(mainResource));
+
+        this._resetAutoRecordingMaxTimeTimeout();
+
+        return true;
+    }
+
+    _stopAutoRecordingSoon()
+    {
+        // Only auto stop when auto capturing.
+        if (!this._isCapturing || !this._mainResourceForAutoCapturing)
+            return;
+
+        if (this._stopCapturingTimeout)
+            clearTimeout(this._stopCapturingTimeout);
+        this._stopCapturingTimeout = setTimeout(this._boundStopCapturing, WebInspector.TimelineManager.MaximumAutoRecordDurationAfterLoadEvent);
+    }
+
+    _resetAutoRecordingMaxTimeTimeout()
+    {
+        if (this._stopCapturingTimeout)
+            clearTimeout(this._stopCapturingTimeout);
+        this._stopCapturingTimeout = setTimeout(this._boundStopCapturing, WebInspector.TimelineManager.MaximumAutoRecordDuration);
+    }
+
+    _resetAutoRecordingDeadTimeTimeout()
+    {
+        // Only monitor dead time when auto capturing.
+        if (!this._isCapturing || !this._mainResourceForAutoCapturing)
+            return;
+
+        // Avoid unnecessary churning of timeout identifier by not tickling until 10ms have passed.
+        let now = Date.now();
+        if (now <= this._lastDeadTimeTickle)
+            return;
+        this._lastDeadTimeTickle = now + 10;
+
+        if (this._deadTimeTimeout)
+            clearTimeout(this._deadTimeTimeout);
+        this._deadTimeTimeout = setTimeout(this._boundStopCapturing, WebInspector.TimelineManager.DeadTimeRequiredToStopAutoRecordingEarly);
+    }
+
+    _provisionalLoadStarted(event)
+    {
+        this._attemptAutoCapturingForFrame(event.target);
+    }
+
+    _mainResourceDidChange(event)
+    {
+        let frame = event.target;
+        if (frame.isMainFrame() && WebInspector.settings.clearNetworkOnNavigate.value)
+            this._persistentNetworkTimeline.reset();
+
+        let mainResource = frame.mainResource;
+        let 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._attemptAutoCapturingForFrame(frame))
+            return;
+
+        if (!this._isCapturing)
+            return;
+
+        if (mainResource === this._mainResourceForAutoCapturing)
+            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));
+    }
+
+    _memoryPressure(event)
+    {
+        if (!this._isCapturing)
+            return;
+
+        this.activeRecording.addMemoryPressureEvent(event.data.memoryPressureEvent);
+    }
+
+    _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;
+        }
+    }
+
+    scriptProfilerProgrammaticCaptureStarted()
+    {
+        // FIXME: <https://webkit.org/b/158753> Generalize the concept of Instruments on the backend to work equally for JSContext and Web inspection
+        console.assert(WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript);
+        console.assert(!this._isCapturing);
+
+        this.programmaticCaptureStarted();
+    }
+
+    scriptProfilerProgrammaticCaptureStopped()
+    {
+        // FIXME: <https://webkit.org/b/158753> Generalize the concept of Instruments on the backend to work equally for JSContext and Web inspection
+        console.assert(WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript);
+        console.assert(this._isCapturing);
+
+        this.programmaticCaptureStopped();
+    }
+
+    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) {
+            let {stackTraces} = samples;
+            let topDownCallingContextTree = this.activeRecording.topDownCallingContextTree;
+            let bottomUpCallingContextTree = this.activeRecording.bottomUpCallingContextTree;
+            let topFunctionsTopDownCallingContextTree = this.activeRecording.topFunctionsTopDownCallingContextTree;
+            let topFunctionsBottomUpCallingContextTree = this.activeRecording.topFunctionsBottomUpCallingContextTree;
+
+            // Calculate a per-sample duration.
+            let timestampIndex = 0;
+            let timestampCount = stackTraces.length;
+            let sampleDurations = new Array(timestampCount);
+            let sampleDurationIndex = 0;
+            const defaultDuration = 1 / 1000; // 1ms.
+            for (let i = 0; i < this._scriptProfilerRecords.length; ++i) {
+                let record = this._scriptProfilerRecords[i];
+
+                // Use a default duration for timestamps recorded outside of ScriptProfiler events.
+                while (timestampIndex < timestampCount && stackTraces[timestampIndex].timestamp < record.startTime) {
+                    sampleDurations[sampleDurationIndex++] = defaultDuration;
+                    timestampIndex++;
+                }
+
+                // Average the duration per sample across all samples during the record.
+                let samplesInRecord = 0;
+                while (timestampIndex < timestampCount && stackTraces[timestampIndex].timestamp < record.endTime) {
+                    timestampIndex++;
+                    samplesInRecord++;
+                }
+                if (samplesInRecord) {
+                    let averageDuration = (record.endTime - record.startTime) / samplesInRecord;
+                    sampleDurations.fill(averageDuration, sampleDurationIndex, sampleDurationIndex + samplesInRecord);
+                    sampleDurationIndex += samplesInRecord;
+                }
+            }
+
+            // Use a default duration for timestamps recorded outside of ScriptProfiler events.
+            if (timestampIndex < timestampCount)
+                sampleDurations.fill(defaultDuration, sampleDurationIndex);
+
+            for (let i = 0; i < stackTraces.length; i++) {
+                topDownCallingContextTree.updateTreeWithStackTrace(stackTraces[i], sampleDurations[i]);
+                bottomUpCallingContextTree.updateTreeWithStackTrace(stackTraces[i], sampleDurations[i]);
+                topFunctionsTopDownCallingContextTree.updateTreeWithStackTrace(stackTraces[i], sampleDurations[i]);
+                topFunctionsBottomUpCallingContextTree.updateTreeWithStackTrace(stackTraces[i], sampleDurations[i]);
+            }
+
+            // FIXME: This transformation should not be needed after introducing ProfileView.
+            // Once we eliminate ProfileNodeTreeElements and ProfileNodeDataGridNodes.
+            // <https://webkit.org/b/154973> Web Inspector: Timelines UI redesign: Remove TimelineSidebarPanel
+            for (let i = 0; i < this._scriptProfilerRecords.length; ++i) {
+                let record = this._scriptProfilerRecords[i];
+                record.profilePayload = topDownCallingContextTree.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
+    }
+
+    _updateAutoCaptureInstruments()
+    {
+        if (!window.TimelineAgent)
+            return;
+
+        if (!TimelineAgent.setInstruments)
+            return;
+
+        let instrumentSet = new Set;
+        let enabledTimelineTypes = this._enabledTimelineTypesSetting.value;
+
+        for (let timelineType of enabledTimelineTypes) {
+            switch (timelineType) {
+            case WebInspector.TimelineRecord.Type.Script:
+                instrumentSet.add(TimelineAgent.Instrument.ScriptProfiler);
+                break;
+            case WebInspector.TimelineRecord.Type.HeapAllocations:
+                instrumentSet.add(TimelineAgent.Instrument.Heap);
+                break;
+            case WebInspector.TimelineRecord.Type.Network:
+            case WebInspector.TimelineRecord.Type.RenderingFrame:
+            case WebInspector.TimelineRecord.Type.Layout:
+                instrumentSet.add(TimelineAgent.Instrument.Timeline);
+                break;
+            case WebInspector.TimelineRecord.Type.Memory:
+                instrumentSet.add(TimelineAgent.Instrument.Memory);
+                break;
+            }
+        }
+
+        TimelineAgent.setInstruments([...instrumentSet]);
+    }
+};
+
+WebInspector.TimelineManager.Event = {
+    RecordingCreated: "timeline-manager-recording-created",
+    RecordingLoaded: "timeline-manager-recording-loaded",
+    CapturingWillStart: "timeline-manager-capturing-will-start",
+    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..7b820bbec
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/TypeTokenAnnotator.js
@@ -0,0 +1,199 @@
+/*
+ * 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((syntaxTree) => {
+                // After requesting the tree, we still might get a null tree from a parse error.
+                if (syntaxTree)
+                    this.insertAnnotations();
+            });
+            return;
+        }
+
+        if (!scriptSyntaxTree.parsedSuccessfully)
+            return;
+
+        var {startOffset, endOffset} = this.sourceCodeTextEditor.visibleRangeOffsets();
+
+        var startTime = Date.now();
+        var allNodesInRange = scriptSyntaxTree.filterByRange(startOffset, endOffset);
+        scriptSyntaxTree.updateTypes(allNodesInRange, (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);
+
+            let totalTime = Date.now() - startTime;
+            let timeoutTime = Number.constrain(8 * totalTime, 500, 2000);
+            this._timeoutIdentifier = setTimeout(() => {
+                this._timeoutIdentifier = null;
+                this.insertAnnotations();
+            }, timeoutTime);
+        });
+    }
+
+    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..d2a40b9d4
--- /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 null;
+
+        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/Controllers/WorkerManager.js b/Source/WebInspectorUI/UserInterface/Controllers/WorkerManager.js
new file mode 100644
index 000000000..99cd3f6ee
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/WorkerManager.js
@@ -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.
+ */
+
+WebInspector.WorkerManager = class WorkerManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._connections = new Map;
+
+        if (window.WorkerAgent)
+            WorkerAgent.enable();
+    }
+
+    // Public
+
+    workerCreated(workerId, url)
+    {
+        let connection = new InspectorBackend.WorkerConnection(workerId);
+        let workerTarget = new WebInspector.WorkerTarget(workerId, url, connection);
+        WebInspector.targetManager.addTarget(workerTarget);
+
+        this._connections.set(workerId, connection);
+
+        // Unpause the worker now that we have sent all initialization messages.
+        WorkerAgent.initialized(workerId);
+    }
+
+    workerTerminated(workerId)
+    {
+        let connection = this._connections.take(workerId);
+
+        WebInspector.targetManager.removeTarget(connection.target);
+    }
+
+    dispatchMessageFromWorker(workerId, message)
+    {
+        let connection = this._connections.get(workerId);
+
+        console.assert(connection);
+        if (!connection)
+            return;
+
+        connection.dispatch(message);
+    }
+};
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 f378dd641..000000000
--- a/Source/WebInspectorUI/UserInterface/CookieStorageContentView.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.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)
-        {
-            if (error)
-                return;
-
-            this._cookies = this._filterCookies(cookies);
-            this._rebuildTable();
-        }
-
-        PageAgent.getCookies(callback.bind(this));
-    },
-
-    updateLayout: function()
-    {
-        if (this._dataGrid)
-            this._dataGrid.updateLayout();
-    },
-
-    saveToCookie: function(cookie)
-    {
-        cookie.type = WebInspector.ContentViewCookieType.CookieStorage;
-        cookie.host = this.representedObject.host;
-    },
-
-    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 d1ca96eb0..000000000
--- a/Source/WebInspectorUI/UserInterface/CookieStorageObject.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.CookieStorageObject = function(host)
-{
-    this._host = host;
-};
-
-WebInspector.CookieStorageObject.TypeIdentifier = "cookie-storage";
-WebInspector.CookieStorageObject.CookieHostCookieKey = "cookie-storage-host";
-
-WebInspector.CookieStorageObject.prototype = {
-    constructor: WebInspector.CookieStorageObject,
-
-    get host()
-    {
-        return this._host;
-    },
-    
-    saveIdentityToCookie: function(cookie)
-    {
-        cookie[WebInspector.CookieStorageObject.CookieHostCookieKey] = 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 3062852e5..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.svg", "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 d5c5801b5..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 9b9e8e8d6..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.
-
-    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 31ba7fa5b..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMStorageContentView.js
+++ /dev/null
@@ -1,230 +0,0 @@
-/*
- * 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.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));
-    },
-
-    saveToCookie: function(cookie)
-    {
-        cookie.type = WebInspector.ContentViewCookieType.DOMStorage;
-        cookie.isLocalStorage = this.representedObject.isLocalStorage();
-        cookie.host = this.representedObject.host;
-    },
-
-    itemsCleared: function()
-    {
-        this._dataGrid.removeChildren();
-        this._dataGrid.addCreationNode(false);
-    },
-
-    itemRemoved: function(key)
-    {
-        for (var i = 0; i < this._dataGrid.children.length; ++i) {
-            var childNode = this._dataGrid.children[i];
-            if (childNode.data[0] === key) {
-                this._dataGrid.removeChild(childNode);
-                return;
-            }
-        }
-    },
-
-    itemAdded: function(key, value)
-    {
-        for (var i = 0; i < this._dataGrid.children.length; ++i) {
-            if (this._dataGrid.children[i][0] === key)
-                return;
-        }
-
-        var data = {};
-        data[0] = key;
-        data[1] = value;
-
-        var childNode = new WebInspector.DataGridNode(data, false);
-
-        this._dataGrid.insertChild(childNode, this._dataGrid.children.length - 1);
-        if (this._dataGrid.sortOrder)
-            this._sortDataGrid();
-    },
-
-    itemUpdated: function(key, oldValue, value)
-    {
-        var keyFound = false;
-        for (var i = 0; i < this._dataGrid.children.length; ++i) {
-            var childNode = this._dataGrid.children[i];
-            if (childNode.data[0] === key) {
-                if (keyFound) {
-                    this._dataGrid.removeChild(childNode);
-                    return;
-                }
-
-                keyFound = true;
-                childNode.data[1] = value;
-                childNode.refresh();
-            }
-        }
-    },
-
-    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 d6fd1e046..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMStorageObject.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.DOMStorageObject = function(id, host, isLocalStorage)
-{
-    this._id = id;
-    this._host = host;
-    this._isLocalStorage = isLocalStorage;
-};
-
-WebInspector.DOMStorageObject.TypeIdentifier = "dom-storage";
-WebInspector.DOMStorageObject.HostCookieKey = "dom-storage-object-host";
-WebInspector.DOMStorageObject.LocalStorageCookieKey = "dom-storage-object-local-storage";
-
-WebInspector.DOMStorageObject.prototype = {
-    constructor: WebInspector.DOMStorageObject,
-    
-    get id()
-    {
-        return this._id;
-    },
-
-    get host()
-    {
-        return this._host;
-    },
-
-    saveIdentityToCookie: function(cookie)
-    {
-        cookie[WebInspector.DOMStorageObject.HostCookieKey] = this.host;
-        cookie[WebInspector.DOMStorageObject.LocalStorageCookieKey] = this.isLocalStorage();
-    },
-
-    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 9b1b15d3a..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMStorageObserver.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * 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 = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.DOMStorageObserver.prototype = {
-    constructor: WebInspector.DOMStorageObserver,
-
-    // Events defined by the "DOMStorage" domain.
-
-    // 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)
-    {
-        WebInspector.storageManager.domStorageItemsCleared(storageId);
-    },
-
-    domStorageItemRemoved: function(storageId, key)
-    {
-        WebInspector.storageManager.domStorageItemRemoved(storageId, key);
-    },
-
-    domStorageItemAdded: function(storageId, key, value)
-    {
-        WebInspector.storageManager.domStorageItemAdded(storageId, key, value);
-    },
-
-    domStorageItemUpdated: function(storageId, key, oldValue, value)
-    {
-        WebInspector.storageManager.domStorageItemUpdated(storageId, key, oldValue, value);
-    }
-};
-
-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 9e2a6d5d4..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTree.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.DOMTree = function(frame)
-{
-    WebInspector.Object.call(this);
-
-    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);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.DOMTree);
-
-WebInspector.DOMTree.Event = {
-    RootDOMNodeInvalidated: "dom-tree-root-dom-node-invalidated",
-    ContentFlowWasAdded: "dom-tree-content-flow-was-added",
-    ContentFlowWasRemoved: "dom-tree-content-flow-was-removed"
-};
-
-WebInspector.DOMTree.prototype = {
-    constructor: WebInspector.DOMTree,
-
-    // Public
-
-    get frame()
-    {
-        return this._frame;
-    },
-
-    get flowMap()
-    {
-        return this._flowMap;
-    },
-
-    get flowsCount()
-    {
-        return Object.keys(this._flowMap).length;
-    },
-
-    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();
-        }
-    },
-
-    requestContentFlowList: function()
-    {
-        this.requestRootDOMNode(function(rootNode) {
-            // Let the backend know we are interested about the named flow events for this document.
-            WebInspector.domTreeManager.getNamedFlowCollection(rootNode.id);
-        });
-    },
-
-    _isContentFlowInCurrentDocument: function(flow)
-    {
-        return this._rootDOMNode && this._rootDOMNode.id === flow.documentNodeIdentifier;
-    },
-
-    _contentFlowListWasUpdated: function(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: function(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: flow});
-    },
-
-    _contentFlowWasRemoved: function(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: flow});
-    }
-};
-
-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 6ed7c3675..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeContentView.js
+++ /dev/null
@@ -1,426 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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(representedObject)
-{
-    console.assert(representedObject);
-
-    WebInspector.ContentView.call(this, representedObject);
-
-    this._compositingBordersButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("layer-borders", WebInspector.UIString("Show compositing borders"), WebInspector.UIString("Hide compositing borders"), "Images/LayerBorders.svg", 16, 16);
-    this._compositingBordersButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleCompositingBorders, this);
-    this._compositingBordersButtonNavigationItem.enabled = !!PageAgent.getCompositingBordersVisible;
-
-    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", 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._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;
-};
-
-WebInspector.DOMTreeContentView.StyleClassName = "dom-tree";
-
-WebInspector.DOMTreeContentView.prototype = {
-    constructor: WebInspector.DOMTreeContentView,
-    __proto__: WebInspector.ContentView.prototype,
-
-    // Public
-
-    get navigationItems()
-    {
-        return [this._showsShadowDOMButtonNavigationItem, this._compositingBordersButtonNavigationItem];
-    },
-
-    get domTreeOutline()
-    {
-        return this._domTreeOutline;
-    },
-
-    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()
-    {
-        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 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: 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();
-        }
-
-        function contextNodesReady(nodeIds)
-        {
-            DOMAgent.performSearch(query, nodeIds, searchResultsReady.bind(this));
-        }
-
-        this.getSearchContextNodes(contextNodesReady.bind(this));
-    },
-
-    getSearchContextNodes: function(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: 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));
-    },
-
-    _restoreSelectedNodeAfterUpdate: function(documentURL, defaultNode)
-    {
-        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)
-        {
-            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: function(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: 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;
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeDataGrid.css b/Source/WebInspectorUI/UserInterface/DOMTreeDataGrid.css
deleted file mode 100644
index 0c2766aa3..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeDataGrid.css
+++ /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.
- */
-
- .dom-tree-data-grid .data-grid {
-    position: relative;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    /* Turn off the default borders, we want to snap to edges. */
-    border: none;
-}
-
-.dom-tree-data-grid .data-grid table.data {
-    background-size: 100% 44px;
-}
-
-.dom-tree-data-grid .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;
-}
-
-.dom-tree-data-grid .data-container tr {
-    height: 22px;
-}
-
-.dom-tree-data-grid .data-container td > div {
-    display: -webkit-flex;
-    width: 100%;
-    height: 100%;
-    -webkit-align-items: center;
-    -webkit-justify-content: flex-end;
-}
-
-.dom-tree-data-grid .data-container .name-column {
-    padding-right: 0;
-}
-
-.dom-tree-data-grid .data-container .name-column .icon {
-    vertical-align: top;
-    width: 16px;
-    height: 16px;
-    /* FIXME: There can be multiple types of DOM nodes that we might need to support in the future. */
-    content: url(Images/DOMElement.svg);
-}
-
-.dom-tree-data-grid .data-container .name-column .label {
-    -webkit-flex: 1;
-    padding: 0 4px;
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.dom-tree-data-grid .data-container tr:hover .name-column .label {
-    padding-right: 0;
-}
-
-.dom-tree-data-grid .data-container .go-to-arrow {
-    display: none;
-}
-
-.dom-tree-data-grid .data-container tr:hover .go-to-arrow {
-    display: block;
-}
-
-.dom-tree-data-grid .data-container tbody > tr:nth-child(2n) {
-    background-color: white;
-}
-
-.dom-tree-data-grid .data-container tbody > tr:nth-child(2n+1) {
-    background-color: rgb(243, 246, 250);
-}
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeDataGrid.js b/Source/WebInspectorUI/UserInterface/DOMTreeDataGrid.js
deleted file mode 100644
index e9783cf05..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeDataGrid.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * 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.
- */
-
-WebInspector.DOMTreeDataGrid = function() {
-    WebInspector.DataGrid.call(this, {
-        name: { title: WebInspector.UIString("Node"), sortable: false }
-    });
-
-    this._previousHoveredElement = null;
-
-    this.element.classList.add("dom-tree-data-grid");
-
-    this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
-    this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
-};
-
-WebInspector.DOMTreeDataGrid.prototype = {
-    constructor: WebInspector.DOMTreeDataGrid,
-    __proto__: WebInspector.DataGrid.prototype,
-
-    _onmousemove: function(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: function(event) {
-        if (!this._previousHoveredElement)
-            return;
-        WebInspector.domTreeManager.hideDOMNodeHighlight();
-        this._previousHoveredElement = null;
-    }
-};
-
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeDataGridNode.js b/Source/WebInspectorUI/UserInterface/DOMTreeDataGridNode.js
deleted file mode 100644
index 0a978e30f..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeDataGridNode.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * 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.
- */
-
-WebInspector.DOMTreeDataGridNode = function(domNode)
-{
-    WebInspector.DataGridNode.call(this);
-
-    this._nameLabel = null;
-    this._domNode = domNode;
-    this._updateNodeName();
-};
-
-WebInspector.DOMTreeDataGridNode.prototype = {
-    constructor: WebInspector.DOMTreeDataGridNode,
-    __proto__: WebInspector.DataGridNode.prototype,
-
-    get domNode()
-    {
-        return this._domNode;
-    },
-
-    // DataGridNode Overrides.
-
-    createCellContent: function(columnIdentifier, cell)
-    {
-        if (columnIdentifier !== "name")
-            return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
-
-        var cell = this._makeNameCell();
-        this._updateNameCellData();
-        return cell;
-    },
-
-    // Private
-
-    _updateNodeName: function()
-    {
-        this.data = {name: WebInspector.displayNameForNode(this._domNode)};
-    },
-
-    _makeNameCell: function()
-    {
-        var fragment = document.createDocumentFragment();
-
-        fragment.appendChild(document.createElement("img")).className = "icon";
-
-        this._nameLabel = document.createElement("div");
-        this._nameLabel.className = "label";
-        fragment.appendChild(this._nameLabel);
-
-        var goToButton = fragment.appendChild(WebInspector.createGoToArrowButton());
-        goToButton.addEventListener("click", this._goToArrowWasClicked.bind(this), false);
-
-        return fragment;
-    },
-
-    _updateNameCellData: function()
-    {
-        this._nameLabel.textContent = this.data.name;
-    },
-
-    _goToArrowWasClicked: function()
-    {
-        WebInspector.resourceSidebarPanel.showMainFrameDOMTree(this._domNode, true);
-    }
-};
-
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/DOMTreeElement.js
deleted file mode 100644
index 07bd89e31..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeElement.js
+++ /dev/null
@@ -1,1319 +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;
-        this.listItemElement.addEventListener("dragstart", this);
-    },
-
-    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;
-    },
-
-    ondeselect: function(treeElement)
-    {
-        this.treeOutline.selectDOMNode(null);
-    },
-
-    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);
-    },
-
-    handleEvent: function(event)
-    {
-        if (event.type === "dragstart" && this._editing)
-            event.preventDefault();
-    }
-}
-
-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 30d51da48..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 3f3e06db0..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeManager.js
+++ /dev/null
@@ -1,833 +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 = {};
-    this._flows = new Map;
-    this._contentNodesToFlowsMap = new Map;
-}
-
-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",
-    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",
-    RegionLayoutUpdated: "dom-tree-manager-region-layout-updated",
-    RegionOversetChanged: "dom-tree-manager-region-overset-changed"
-};
-
-WebInspector.DOMTreeManager._flowPayloadHashKey = function(flowPayload)
-{
-    // Use the flow node id, to avoid collisions when we change main document id.
-    return flowPayload.documentNodeId + ":" + flowPayload.name;
-};
-
-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)
-    {
-        this._removeContentNodeFromFlowIfNeeded(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;
-    },
-
-    _createContentFlowFromPayload: function(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: function(contentFlow, flowPayload)
-    {
-        console.assert(contentFlow.contentNodes.length === flowPayload.content.length);
-        for (var i = 0; i < contentFlow.contentNodes.length; ++i)
-            console.assert(contentFlow.contentNodes[i].id === flowPayload.content[i]);
-
-        // FIXME: Collect the regions from the payload.
-        contentFlow.overset = flowPayload.overset;
-    },
-
-    getNamedFlowCollection: function(documentNodeIdentifier)
-    {
-        function onNamedFlowCollectionAvailable(error, flows)
-        {
-            if (error) {
-                console.error("Error while getting the named flows for document " + documentNodeIdentifier + ": " + 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: documentNodeIdentifier, flows: contentFlows});
-        }
-        CSSAgent.getNamedFlowCollection(documentNodeIdentifier, onNamedFlowCollectionAvailable.bind(this));
-    },
-
-    namedFlowCreated: function(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: function(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: function(flowPayload)
-    {
-        var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey(flowPayload);
-        console.assert(this._flows.has(flowKey));
-        this._updateContentFlowFromPayload(this._flows.get(flowKey), flowPayload);
-    },
-
-    regionLayoutUpdated: function(flowPayload)
-    {
-        this._sendNamedFlowUpdateEvents(flowPayload);
-    },
-
-    regionOversetChanged: function(flowPayload)
-    {
-        this._sendNamedFlowUpdateEvents(flowPayload);
-    },
-
-    registeredNamedFlowContentElement: function(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: function(node)
-    {
-        if (!this._contentNodesToFlowsMap.has(node.id))
-            return;
-        var flow = this._contentNodesToFlowsMap.get(node.id);
-        this._contentNodesToFlowsMap.delete(node.id);
-        flow.removeContentNode(node);
-    },
-
-    unregisteredNamedFlowContentElement: function(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: function(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: function(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: 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;
-        }
-    }
-}
-
-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 17fa5f3cc..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js
+++ /dev/null
@@ -1,588 +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(WebInspector.DOMTreeOutline.StyleClassName);
-    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.StyleClassName = "dom-tree-outline";
-
-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.
-        // Note that _revealAndSelectNode will not do anything for a null node.
-        if (!node || 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 fad8b3d0d..000000000
--- a/Source/WebInspectorUI/UserInterface/DashboardManager.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.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;
-
-        this._view.resourcesCount = 1;
-        this._view.resourcesSize = WebInspector.frameResourceManager.mainFrame.mainResource.size || 0;
-
-        // Only update the time if we are recording the timeline.
-        if (!WebInspector.timelineManager.recordingEnabled) {
-            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;
-    },
-
-    _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 mainFrame = WebInspector.frameResourceManager.mainFrame;
-        var mainFrameStartTime = mainFrame.mainResource.firstTimestamp;
-        var mainFrameLoadEventTime = mainFrame.loadEventTimestamp;
-
-        if (isNaN(mainFrameStartTime) || isNaN(mainFrameLoadEventTime)) {
-            this._view.time = duration / 1000;
-            return;
-        }
-
-        this._view.time = mainFrameLoadEventTime - mainFrameStartTime;
-
-        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 c754f3b6d..000000000
--- a/Source/WebInspectorUI/UserInterface/DashboardView.css
+++ /dev/null
@@ -1,243 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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,
-body.javascript .toolbar .dashboard {
-    width: 175px;
-}
-
-body.web .toolbar.collapsed .dashboard > .time,
-body.web .toolbar.collapsed .dashboard > .resourcesSize,
-body.web .toolbar.collapsed .dashboard > .logs {
-    display: none;
-}
-
-body.javascript .toolbar .dashboard > .time,
-body.javascript .toolbar .dashboard > .resourcesSize,
-body.javascript .toolbar .dashboard > .resourcesCount {
-    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;
-}
-
-/* Styles for the pulsing animated state of console items */
-
-.toolbar .dashboard > .item.pulsing {
-    -webkit-animation-name: console-item-pulse;
-    -webkit-animation-duration: 0.75s;
-}
-
-@-webkit-keyframes console-item-pulse {
-    50% { opacity: 0.6; }
-}
diff --git a/Source/WebInspectorUI/UserInterface/DashboardView.js b/Source/WebInspectorUI/UserInterface/DashboardView.js
deleted file mode 100644
index 982839b21..000000000
--- a/Source/WebInspectorUI/UserInterface/DashboardView.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.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._setConsoleItemValue("logs", logs);
-    },
-
-    get issues()
-    {
-        return this._issues;
-    },
-
-    set issues(issues)
-    {
-        this._setConsoleItemValue("issues", issues);
-    },
-
-    get errors()
-    {
-        return this._errors;
-    },
-
-    set errors(errors)
-    {
-        this._setConsoleItemValue("errors", errors);
-    },
-
-    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.timelineSidebarPanel;
-    },
-
-    _consoleItemWasClicked: function(scope)
-    {
-        WebInspector.showConsoleView(scope);
-    },
-
-    _setConsoleItemValue: function(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("webkitAnimationEnd", 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("webkitAnimationEnd", animationEnded);
-        
-        container.classList.add("pulsing");
-    },
-
-    _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 0a2e21908..000000000
--- a/Source/WebInspectorUI/UserInterface/DataGrid.css
+++ /dev/null
@@ -1,337 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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.no-header > table.header {
-    display: none;
-}
-
-.data-grid.no-header .data-container {
-    top: 0;
-}
-
-.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, 0 0, 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 52e5f09ab..000000000
--- a/Source/WebInspectorUI/UserInterface/DataGrid.js
+++ /dev/null
@@ -1,1872 +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;
-        if (column.aligned)
-            cell.classList.add(column.aligned);
-        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";
-        td.__columnIdentifier = columnIdentifier;
-        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;
-
-    for (var columnIdentifier in columns) {
-        if (columns[columnIdentifier].hidden)
-            this._hideColumn(columnIdentifier);
-    }
-
-    this._generateSortIndicatorImagesIfNeeded();
-}
-
-WebInspector.DataGrid.Event = {
-    DidLayout: "datagrid-did-layout",
-    SortChanged: "datagrid-sort-changed",
-    SelectedNodeChanged: "datagrid-selected-node-changed",
-    ExpandedNode: "datagrid-expanded-node",
-    CollapsedNode: "datagrid-collapsed-node"
-};
-
-/**
- * @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.
-
-        var columnIdentifier = element.__columnIdentifier;
-
-        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 headerCell = this.headerTableBody.rows[0].cells[i]
-                if (this._isColumnVisible(headerCell.columnIdentifier)) {
-                    var columnWidth = headerCell.offsetWidth;
-                    var percentWidth = ((columnWidth / tableWidth) * 100) + "%";
-                    this._headerTableColumnGroup.children[i].style.width = percentWidth;
-                    this._dataTableColumnGroup.children[i].style.width = percentWidth;
-                } else {
-                    this._headerTableColumnGroup.children[i].style.width = 0;
-                    this._dataTableColumnGroup.children[i].style.width = 0;
-                }
-            }
-
-            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;
-                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.svg", specifications, 9, 8, "data-grid-sort-indicator-down-");
-        generateColoredImagesForCSS("Images/SortIndicatorUpArrow.svg", 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 = element.__columnIdentifier;
-                    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 = {
-    get selectable()
-    {
-        return !this._element || !this._element.classList.contains("hidden");
-    },
-
-    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";
-        cell.__columnIdentifier = columnIdentifier;
-
-        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] || "\u200b"; // Zero width space to keep the cell from collapsing.
-    },
-
-    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");
-
-        if (this.dataGrid)
-            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.CollapsedNode, {dataGridNode: this});
-    },
-
-    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");
-
-        if (this.dataGrid)
-            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.ExpandedNode, {dataGridNode: this});
-    },
-
-    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 4cada73ec..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.svg);
-}
-
-.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.svg);
-}
-
-.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/Error.svg);
-    background-size: 10px 10px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseContentView.js b/Source/WebInspectorUI/UserInterface/DatabaseContentView.js
deleted file mode 100644
index 597d614cf..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseContentView.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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,
-
-    // Public
-
-    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();
-        }
-    },
-
-    saveToCookie: function(cookie)
-    {
-        cookie.type = WebInspector.ContentViewCookieType.Database;
-        cookie.host = this.representedObject.host;
-        cookie.name = this.representedObject.name;
-    },
-
-    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));
-    },
-
-    // Private
-
-    _messagesClicked: function()
-    {
-        this.prompt.focus();
-    },
-
-    _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 018159767..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseObject.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.TypeIdentifier = "database";
-WebInspector.DatabaseObject.HostCookieKey = "database-object-host";
-WebInspector.DatabaseObject.NameCookieKey = "database-object-name";
-
-WebInspector.DatabaseObject.prototype = {
-    constructor: WebInspector.DatabaseObject,
-    
-    // Public
-
-    get id()
-    {
-        return this._id;
-    },
-
-    get host()
-    {
-        return this._host;
-    },
-
-    get name()
-    {
-        return this._name;
-    },
-    
-    get version()
-    {
-        return this._version;
-    },
-    
-    saveIdentityToCookie: function(cookie)
-    {
-        cookie[WebInspector.DatabaseObject.HostCookieKey] = this.host;
-        cookie[WebInspector.DatabaseObject.NameCookieKey] = this.name;
-    },
-
-    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 bc134ae80..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.
-
-    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 699917d3b..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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();
-    },
-
-    saveToCookie: function(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: 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 5e61d258e..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseTableObject.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.DatabaseTableObject = function(name, database)
-{
-    console.assert(database instanceof WebInspector.DatabaseObject);
-    
-    this._name = name;
-    this._database = database;
-};
-
-WebInspector.DatabaseTableObject.TypeIdentifier = "database-table";
-WebInspector.DatabaseTableObject.NameCookieKey = "database-table-object-name";
-
-WebInspector.DatabaseTableObject.prototype = {
-    constructor: WebInspector.DatabaseTableObject,
-    
-    get name()
-    {
-        return this._name;
-    },
-    
-    get database()
-    {
-        return this._database;
-    },
-
-    saveIdentityToCookie: function(cookie)
-    {
-        cookie[WebInspector.DatabaseTableObject.NameCookieKey] = this.name;
-    },
-};
-
-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..f54d93ae7
--- /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..8b7e01dd0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css
@@ -0,0 +1,114 @@
+/*
+ * 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%);
+    overflow: scroll;
+}
+
+.uncaught-exception-sheet {
+    padding: 50px 55px 50px 65px;
+    font-family: '-webkit-system-font';
+    font-size: 11pt;
+    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;
+    white-space: pre;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.js b/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.js
new file mode 100644
index 000000000..43ce09db6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.js
@@ -0,0 +1,275 @@
+/*
+ * 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 handleError(error) {
+    handleUncaughtExceptionRecord({
+        message: error.message,
+        url: parseURL(error.sourceURL).lastPathComponent,
+        lineNumber: error.line,
+        columnNumber: error.column,
+        stack: error.stack,
+        details: error.details,
+    });
+}
+
+function handleUncaughtException(event) {
+    handleUncaughtExceptionRecord({
+        message: event.message,
+        url: parseURL(event.filename).lastPathComponent,
+        lineNumber: event.lineno,
+        columnNumber: event.colno,
+        stack: typeof event.error === "object" && event.error !== null ? event.error.stack : null,
+    });
+}
+
+function handleUncaughtExceptionRecord(exceptionRecord) {
+    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();
+    }
+
+    function formattedEntry(entry) {
+        const indent = "    ";
+        let lines = [`${entry.message} (at ${entry.url}:${entry.lineNumber}:${entry.columnNumber})`];
+        if (entry.stack) {
+            let stackLines = entry.stack.split(/\n/g);
+            for (let stackLine of stackLines) {
+                let atIndex = stackLine.indexOf("@");
+                let slashIndex = Math.max(stackLine.lastIndexOf("/"), atIndex);
+                let functionName = stackLine.substring(0, atIndex) || "?";
+                let location = stackLine.substring(slashIndex + 1, stackLine.length);
+                lines.push(`${indent}${functionName} @ ${location}`);
+            }
+        }
+
+        if (entry.details) {
+            lines.push("");
+            lines.push("Additional Details:");
+            for (let key in entry.details) {
+                let value = entry.details[key];
+                lines.push(`${indent}${key} --> ${value}`);
+            }
+        }
+
+        return lines.join("\n");
+    }
+
+    let inspectedPageURL = null;
+    try {
+        inspectedPageURL = WebInspector.frameResourceManager.mainFrame.url;
+    } catch (e) { }
+
+    let topLevelItems = [
+        `Inspected URL:        ${inspectedPageURL || "(unknown)"}`,
+        `Loading completed:    ${!!loadCompleted}`,
+        `Frontend User Agent:  ${window.navigator.userAgent}`,
+    ];
+
+    function stringifyAndTruncateObject(object) {
+        let string = JSON.stringify(object);
+        return string.length > 500 ? string.substr(0, 500) + "…" : string;
+    }
+
+    if (InspectorBackend && InspectorBackend.currentDispatchState) {
+        let state = InspectorBackend.currentDispatchState;
+        if (state.event) {
+            topLevelItems.push("Dispatch Source:      Protocol Event");
+            topLevelItems.push("");
+            topLevelItems.push("Protocol Event:");
+            topLevelItems.push(stringifyAndTruncateObject(state.event));
+        }
+        if (state.response) {
+            topLevelItems.push("Dispatch Source:      Protocol Command Response");
+            topLevelItems.push("");
+            topLevelItems.push("Protocol Command Response:");
+            topLevelItems.push(stringifyAndTruncateObject(state.response));
+        }
+        if (state.request) {
+            topLevelItems.push("");
+            topLevelItems.push("Protocol Command Request:");
+            topLevelItems.push(stringifyAndTruncateObject(state.request));
+        }
+    }
+
+    let formattedErrorDetails = window.__uncaughtExceptions.map((entry) => formattedEntry(entry));
+    let detailsForBugReport = formattedErrorDetails.map((line) => ` - ${line}`).join("\n");
+    topLevelItems.push("");
+    topLevelItems.push("Uncaught Exceptions:");
+    topLevelItems.push(detailsForBugReport);
+
+    let encodedBugDescription = encodeURIComponent(`-------
+${topLevelItems.join("\n")}
+-------
+
+* 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 encodedInspectedURL = encodeURIComponent(inspectedPageURL || "http://");
+    let prefilledBugReportLink = `https://bugs.webkit.org/enter_bug.cgi?alias=&assigned_to=webkit-unassigned%40lists.webkit.org&attach_text=&blocked=&bug_file_loc=${encodedInspectedURL}&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);
+window.handlePromiseException = window.handleInternalException = handleError;
+
+})();
diff --git a/Source/WebInspectorUI/UserInterface/DebuggerManager.js b/Source/WebInspectorUI/UserInterface/DebuggerManager.js
deleted file mode 100644
index cfd219538..000000000
--- a/Source/WebInspectorUI/UserInterface/DebuggerManager.js
+++ /dev/null
@@ -1,702 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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);
-
-    if (window.DebuggerAgent)
-        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._breakpointEditablePropertyDidChange, this);
-    WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._breakpointEditablePropertyDidChange, this);
-    WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ActionsDidChange, this._breakpointEditablePropertyDidChange, 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);
-
-    if (window.DebuggerAgent)
-        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] || [];
-    },
-
-    continueToLocation: function(scriptIdentifier, lineNumber, columnNumber)
-    {
-        DebuggerAgent.continueToLocation({scriptId: scriptIdentifier, lineNumber: lineNumber, columnNumber: columnNumber});
-    },
-
-    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);
-            // Exclude the case where the call frame is in the inspector code.
-            if (!sourceCodeLocation || !sourceCodeLocation._sourceCode || !sourceCodeLocation._sourceCode._url || sourceCodeLocation._sourceCode._url.indexOf("__WebInspector") === 0)
-                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);
-        }
-
-        if (!this._callFrames.length) {
-            this.resume();
-            return;
-        }
-
-        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);
-    },
-
-    _debuggerBreakpointActionType: function(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;
-        default:
-            console.assert(false);
-            return DebuggerAgent.BreakpointActionType.Log;
-        }
-    },
-
-    _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;
-
-        // Convert BreakpointAction types to DebuggerAgent protocol types.
-        // NOTE: Breakpoint.options returns new objects each time, so it is safe to modify.
-        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: 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: options
-            }, didSetBreakpoint.bind(this));
-        }
-    },
-
-    _removeBreakpoint: function(breakpoint, callback)
-    {
-        console.assert(breakpoint.id);
-
-        if (!breakpoint.id)
-            return;
-
-        function didRemoveBreakpoint(error)
-        {
-            if (error)
-                console.error(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);
-    },
-
-    _breakpointEditablePropertyDidChange: 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 0b8f54cc5..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.
-
-    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 a45891454..000000000
--- a/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.js
+++ /dev/null
@@ -1,558 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.svg", "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);
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
-
-    this._pauseOrResumeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "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.CommandOrControl, WebInspector.KeyboardShortcut.Key.Slash, this._debuggerPauseResumeButtonClicked.bind(this));
-    this._stepOverAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.SingleQuote, this._debuggerStepOverButtonClicked.bind(this));
-    this._stepIntoAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this._debuggerStepIntoButtonClicked.bind(this));
-    this._stepOutAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, 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.svg", 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.svg", "Images/Resume.svg", 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.svg", 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.svg", 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.svg", 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.SelectedAllExceptionsCookieKey = "debugger-sidebar-panel-all-exceptions-breakpoint";
-WebInspector.DebuggerSidebarPanel.SelectedAllUncaughtExceptionsCookieKey = "debugger-sidebar-panel-all-uncaught-exceptions-breakpoint";
-
-WebInspector.DebuggerSidebarPanel.prototype = {
-    constructor: WebInspector.DebuggerSidebarPanel,
-
-    // Public
-
-    treeElementForRepresentedObject: function(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: function(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;
-
-        if (representedObject === WebInspector.debuggerManager.allUncaughtExceptionsBreakpoint)
-            cookie[WebInspector.DebuggerSidebarPanel.SelectedAllUncaughtExceptionsCookieKey] = true;
-
-        WebInspector.NavigationSidebarPanel.prototype.saveStateToCookie.call(this, cookie);
-    },
-
-    restoreStateFromCookie: function(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
-            WebInspector.NavigationSidebarPanel.prototype.restoreStateFromCookie.call(this, cookie, relaxedMatchDelay);
-    },
-
-    // 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;        
-    },
-
-    _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);
-    },
-
-    _debuggerActiveCallFrameDidChange: function()
-    {
-        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: 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 a04f7eabc..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSection.css
+++ /dev/null
@@ -1,260 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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-size: 11px;
-    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 0b1296578..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSection.js
+++ /dev/null
@@ -1,175 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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._element.classList.add(identifier);
-
-    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.svg", specifications, 13, 13, WebInspector.DetailsSection.DisclosureTriangleOpenCanvasIdentifier);
-        generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.svg", 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 119299940..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
new file mode 100644
index 000000000..766132177
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/LICENSE
@@ -0,0 +1,19 @@
+Copyright (C) 2016 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
+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/CodeMirror/clojure.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/clojure.js
index ee22a12fe..ed6af2c83 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(" ");
@@ -16,14 +31,70 @@ CodeMirror.defineMode("clojure", function () {
     var atoms = makeKeywords("true false nil");
 
     var keywords = makeKeywords(
-      "defn defn- def def- defonce defmulti defmethod defmacro defstruct deftype defprotocol defrecord defproject deftest slice defalias defhinted defmacro- defn-memo defnk defnk defonce- defunbound defunbound- defvar defvar- let letfn do case cond condp for loop recur when when-not when-let when-first if if-let if-not . .. -> ->> doto and or dosync doseq dotimes dorun doall load import unimport ns in-ns refer try catch finally throw with-open with-local-vars binding gen-class gen-and-load-class gen-and-save-class handler-case handle");
+      "defn defn- def def- defonce defmulti defmethod defmacro defstruct deftype defprotocol defrecord defproject deftest " +
+      "slice defalias defhinted defmacro- defn-memo defnk defnk defonce- defunbound defunbound- defvar defvar- let letfn " +
+      "do case cond condp for loop recur when when-not when-let when-first if if-let if-not . .. -> ->> doto and or dosync " +
+      "doseq dotimes dorun doall load import unimport ns in-ns refer try catch finally throw with-open with-local-vars " +
+      "binding gen-class gen-and-load-class gen-and-save-class handler-case handle");
 
     var builtins = makeKeywords(
-        "* *' *1 *2 *3 *agent* *allow-unresolved-vars* *assert* *clojure-version* *command-line-args* *compile-files* *compile-path* *compiler-options* *data-readers* *e *err* *file* *flush-on-newline* *fn-loader* *in* *math-context* *ns* *out* *print-dup* *print-length* *print-level* *print-meta* *print-readably* *read-eval* *source-path* *unchecked-math* *use-context-classloader* *verbose-defrecords* *warn-on-reflection* + +' - -' -> ->> ->ArrayChunk ->Vec ->VecNode ->VecSeq -cache-protocol-fn -reset-methods .. / < <= = == > >= EMPTY-NODE accessor aclone add-classpath add-watch agent agent-error agent-errors aget alength alias all-ns alter alter-meta! alter-var-root amap ancestors and apply areduce array-map aset aset-boolean aset-byte aset-char aset-double aset-float aset-int aset-long aset-short assert assoc assoc! assoc-in associative? atom await await-for await1 bases bean bigdec bigint biginteger binding bit-and bit-and-not bit-clear bit-flip bit-not bit-or bit-set bit-shift-left bit-shift-right bit-test bit-xor boolean boolean-array booleans bound-fn bound-fn* bound? butlast byte byte-array bytes case cast char char-array char-escape-string char-name-string char? chars chunk chunk-append chunk-buffer chunk-cons chunk-first chunk-next chunk-rest chunked-seq? class class? clear-agent-errors clojure-version coll? comment commute comp comparator compare compare-and-set! compile complement concat cond condp conj conj! cons constantly construct-proxy contains? count counted? create-ns create-struct cycle dec dec' decimal? declare default-data-readers definline definterface defmacro defmethod defmulti defn defn- defonce defprotocol defrecord defstruct deftype delay delay? deliver denominator deref derive descendants destructure disj disj! dissoc dissoc! distinct distinct? doall dorun doseq dosync dotimes doto double double-array doubles drop drop-last drop-while empty empty? ensure enumeration-seq error-handler error-mode eval even? every-pred every? ex-data ex-info extend extend-protocol extend-type extenders extends? false? ffirst file-seq filter filterv find find-keyword find-ns find-protocol-impl find-protocol-method find-var first flatten float float-array float? floats flush fn fn? fnext fnil for force format frequencies future future-call future-cancel future-cancelled? future-done? future? gen-class gen-interface gensym get get-in get-method get-proxy-class get-thread-bindings get-validator group-by hash hash-combine hash-map hash-set identical? identity if-let if-not ifn? import in-ns inc inc' init-proxy instance? int int-array integer? interleave intern interpose into into-array ints io! isa? iterate iterator-seq juxt keep keep-indexed key keys keyword keyword? last lazy-cat lazy-seq let letfn line-seq list list* list? load load-file load-reader load-string loaded-libs locking long long-array longs loop macroexpand macroexpand-1 make-array make-hierarchy map map-indexed map? mapcat mapv max max-key memfn memoize merge merge-with meta method-sig methods min min-key mod munge name namespace namespace-munge neg? newline next nfirst nil? nnext not not-any? not-empty not-every? not= ns ns-aliases ns-imports ns-interns ns-map ns-name ns-publics ns-refers ns-resolve ns-unalias ns-unmap nth nthnext nthrest num number? numerator object-array odd? or parents partial partition partition-all partition-by pcalls peek persistent! pmap pop pop! pop-thread-bindings pos? pr pr-str prefer-method prefers primitives-classnames print print-ctor print-dup print-method print-simple print-str printf println println-str prn prn-str promise proxy proxy-call-with-super proxy-mappings proxy-name proxy-super push-thread-bindings pvalues quot rand rand-int rand-nth range ratio? rational? rationalize re-find re-groups re-matcher re-matches re-pattern re-seq read read-line read-string realized? reduce reduce-kv reductions ref ref-history-count ref-max-history ref-min-history ref-set refer refer-clojure reify release-pending-sends rem remove remove-all-methods remove-method remove-ns remove-watch repeat repeatedly replace replicate require reset! reset-meta! resolve rest restart-agent resultset-seq reverse reversible? rseq rsubseq satisfies? second select-keys send send-off seq seq? seque sequence sequential? set set-error-handler! set-error-mode! set-validator! set? short short-array shorts shuffle shutdown-agents slurp some some-fn sort sort-by sorted-map sorted-map-by sorted-set sorted-set-by sorted? special-symbol? spit split-at split-with str string? struct struct-map subs subseq subvec supers swap! symbol symbol? sync take take-last take-nth take-while test the-ns thread-bound? time to-array to-array-2d trampoline transient tree-seq true? type unchecked-add unchecked-add-int unchecked-byte unchecked-char unchecked-dec unchecked-dec-int unchecked-divide-int unchecked-double unchecked-float unchecked-inc unchecked-inc-int unchecked-int unchecked-long unchecked-multiply unchecked-multiply-int unchecked-negate unchecked-negate-int unchecked-remainder-int unchecked-short unchecked-subtract unchecked-subtract-int underive unquote unquote-splicing update-in update-proxy use val vals var-get var-set var? vary-meta vec vector vector-of vector? when when-first when-let when-not while with-bindings with-bindings* with-in-str with-loading-context with-local-vars with-meta with-open with-out-str with-precision with-redefs with-redefs-fn xml-seq zero? zipmap *default-data-reader-fn* as-> cond-> cond->> reduced reduced? send-via set-agent-send-executor! set-agent-send-off-executor! some-> some->>");
+        "* *' *1 *2 *3 *agent* *allow-unresolved-vars* *assert* *clojure-version* *command-line-args* *compile-files* " +
+        "*compile-path* *compiler-options* *data-readers* *e *err* *file* *flush-on-newline* *fn-loader* *in* " +
+        "*math-context* *ns* *out* *print-dup* *print-length* *print-level* *print-meta* *print-readably* *read-eval* " +
+        "*source-path* *unchecked-math* *use-context-classloader* *verbose-defrecords* *warn-on-reflection* + +' - -' -> " +
+        "->> ->ArrayChunk ->Vec ->VecNode ->VecSeq -cache-protocol-fn -reset-methods .. / < <= = == > >= EMPTY-NODE accessor " +
+        "aclone add-classpath add-watch agent agent-error agent-errors aget alength alias all-ns alter alter-meta! " +
+        "alter-var-root amap ancestors and apply areduce array-map aset aset-boolean aset-byte aset-char aset-double " +
+        "aset-float aset-int aset-long aset-short assert assoc assoc! assoc-in associative? atom await await-for await1 " +
+        "bases bean bigdec bigint biginteger binding bit-and bit-and-not bit-clear bit-flip bit-not bit-or bit-set " +
+        "bit-shift-left bit-shift-right bit-test bit-xor boolean boolean-array booleans bound-fn bound-fn* bound? butlast " +
+        "byte byte-array bytes case cat cast char char-array char-escape-string char-name-string char? chars chunk chunk-append " +
+        "chunk-buffer chunk-cons chunk-first chunk-next chunk-rest chunked-seq? class class? clear-agent-errors " +
+        "clojure-version coll? comment commute comp comparator compare compare-and-set! compile complement completing concat cond condp " +
+        "conj conj! cons constantly construct-proxy contains? count counted? create-ns create-struct cycle dec dec' decimal? " +
+        "declare dedupe default-data-readers definline definterface defmacro defmethod defmulti defn defn- defonce defprotocol " +
+        "defrecord defstruct deftype delay delay? deliver denominator deref derive descendants destructure disj disj! dissoc " +
+        "dissoc! distinct distinct? doall dorun doseq dosync dotimes doto double double-array doubles drop drop-last " +
+        "drop-while eduction empty empty? ensure enumeration-seq error-handler error-mode eval even? every-pred every? ex-data ex-info " +
+        "extend extend-protocol extend-type extenders extends? false? ffirst file-seq filter filterv find find-keyword " +
+        "find-ns find-protocol-impl find-protocol-method find-var first flatten float float-array float? floats flush fn fn? " +
+        "fnext fnil for force format frequencies future future-call future-cancel future-cancelled? future-done? future? " +
+        "gen-class gen-interface gensym get get-in get-method get-proxy-class get-thread-bindings get-validator group-by hash " +
+        "hash-combine hash-map hash-set identical? identity if-let if-not ifn? import in-ns inc inc' init-proxy instance? " +
+        "int int-array integer? interleave intern interpose into into-array ints io! isa? iterate iterator-seq juxt keep " +
+        "keep-indexed key keys keyword keyword? last lazy-cat lazy-seq let letfn line-seq list list* list? load load-file " +
+        "load-reader load-string loaded-libs locking long long-array longs loop macroexpand macroexpand-1 make-array " +
+        "make-hierarchy map map-indexed map? mapcat mapv max max-key memfn memoize merge merge-with meta method-sig methods " +
+        "min min-key mod munge name namespace namespace-munge neg? newline next nfirst nil? nnext not not-any? not-empty " +
+        "not-every? not= ns ns-aliases ns-imports ns-interns ns-map ns-name ns-publics ns-refers ns-resolve ns-unalias " +
+        "ns-unmap nth nthnext nthrest num number? numerator object-array odd? or parents partial partition partition-all " +
+        "partition-by pcalls peek persistent! pmap pop pop! pop-thread-bindings pos? pr pr-str prefer-method prefers " +
+        "primitives-classnames print print-ctor print-dup print-method print-simple print-str printf println println-str " +
+        "prn prn-str promise proxy proxy-call-with-super proxy-mappings proxy-name proxy-super push-thread-bindings pvalues " +
+        "quot rand rand-int rand-nth random-sample range ratio? rational? rationalize re-find re-groups re-matcher re-matches re-pattern " +
+        "re-seq read read-line read-string realized? reduce reduce-kv reductions ref ref-history-count ref-max-history " +
+        "ref-min-history ref-set refer refer-clojure reify release-pending-sends rem remove remove-all-methods " +
+        "remove-method remove-ns remove-watch repeat repeatedly replace replicate require reset! reset-meta! resolve rest " +
+        "restart-agent resultset-seq reverse reversible? rseq rsubseq satisfies? second select-keys send send-off seq seq? " +
+        "seque sequence sequential? set set-error-handler! set-error-mode! set-validator! set? short short-array shorts " +
+        "shuffle shutdown-agents slurp some some-fn sort sort-by sorted-map sorted-map-by sorted-set sorted-set-by sorted? " +
+        "special-symbol? spit split-at split-with str string? struct struct-map subs subseq subvec supers swap! symbol " +
+        "symbol? sync take take-last take-nth take-while test the-ns thread-bound? time to-array to-array-2d trampoline transduce " +
+        "transient tree-seq true? type unchecked-add unchecked-add-int unchecked-byte unchecked-char unchecked-dec " +
+        "unchecked-dec-int unchecked-divide-int unchecked-double unchecked-float unchecked-inc unchecked-inc-int " +
+        "unchecked-int unchecked-long unchecked-multiply unchecked-multiply-int unchecked-negate unchecked-negate-int "+
+        "unchecked-remainder-int unchecked-short unchecked-subtract unchecked-subtract-int underive unquote " +
+        "unquote-splicing update update-in update-proxy use val vals var-get var-set var? vary-meta vec vector vector-of " +
+        "vector? volatile! volatile? vreset! vswap! when when-first when-let when-not while with-bindings with-bindings* with-in-str with-loading-context " +
+        "with-local-vars with-meta with-open with-out-str with-precision with-redefs with-redefs-fn xml-seq zero? zipmap " +
+        "*default-data-reader-fn* as-> cond-> cond->> reduced reduced? send-via set-agent-send-executor! " +
+        "set-agent-send-off-executor! some-> some->>");
 
     var indentKeys = makeKeywords(
         // Built-ins
-        "ns fn def defn defmethod bound-fn if if-not case condp when while when-not when-first do future comment doto locking proxy with-open with-precision reify deftype defrecord defprotocol extend extend-protocol extend-type try catch " +
+        "ns fn def defn defmethod bound-fn if if-not case condp when while when-not when-first do future comment doto " +
+        "locking proxy with-open with-precision reify deftype defrecord defprotocol extend extend-protocol extend-type " +
+        "try catch " +
 
         // Binding forms
         "let letfn binding loop for doseq dotimes when-let if-let " +
@@ -44,7 +115,8 @@ CodeMirror.defineMode("clojure", function () {
         sign: /[+-]/,
         exponent: /e/i,
         keyword_char: /[^\s\(\[\;\)\]]/,
-        symbol: /[\w*+!\-\._?:\/]/
+        symbol: /[\w*+!\-\._?:<>\/\xa1-\uffff]/,
+        block_indent: /^(?:def|with)[^\/]+$|\/(?:def|with)/
     };
 
     function stateStack(indent, type, prev) { // represents a state stack object
@@ -81,6 +153,9 @@ CodeMirror.defineMode("clojure", function () {
             if ( '.' == stream.peek() ) {
                 stream.eat('.');
                 stream.eatWhile(tests.digit);
+            } else if ('/' == stream.peek() ) {
+                stream.eat('/');
+                stream.eatWhile(tests.digit);
             }
 
             if ( stream.eat(tests.exponent) ) {
@@ -99,7 +174,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
@@ -124,7 +199,7 @@ CodeMirror.defineMode("clojure", function () {
             }
 
             // skip spaces
-            if (stream.eatSpace()) {
+            if (state.mode != "string" && stream.eatSpace()) {
                 return null;
             }
             var returnType = null;
@@ -172,15 +247,15 @@ CodeMirror.defineMode("clojure", function () {
                         }
 
                         if (keyWord.length > 0 && (indentKeys.propertyIsEnumerable(keyWord) ||
-                                                   /^(?:def|with)/.test(keyWord))) { // indent-word
+                                                   tests.block_indent.test(keyWord))) { // indent-word
                             pushStack(state, indentTemp + INDENT_WORD_SKIP, ch);
                         } else { // non-indent word
                             // we continue eating the spaces
                             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 +280,9 @@ CodeMirror.defineMode("clojure", function () {
                             returnType = BUILTIN;
                         } else if (atoms && atoms.propertyIsEnumerable(stream.current())) {
                             returnType = ATOM;
-                        } else returnType = null;
+                        } else {
+                          returnType = VAR;
+                        }
                     }
             }
 
@@ -217,8 +294,13 @@ CodeMirror.defineMode("clojure", function () {
             return state.indentStack.indent;
         },
 
+        closeBrackets: {pairs: "()[]{}\"\""},
         lineComment: ";;"
     };
 });
 
 CodeMirror.defineMIME("text/x-clojure", "clojure");
+CodeMirror.defineMIME("text/x-clojurescript", "clojure");
+CodeMirror.defineMIME("application/edn", "clojure");
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js
index 88718b772..7c47bcd09 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js
@@ -1,82 +1,202 @@
-(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), "+delete");
+    }
+  }
+
+  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 contractSelection(sel) {
+    var inverted = CodeMirror.cmpPos(sel.anchor, sel.head) > 0;
+    return {anchor: new Pos(sel.anchor.line, sel.anchor.ch + (inverted ? -1 : 1)),
+            head: new Pos(sel.head.line, sel.head.ch + (inverted ? 1 : -1))};
+  }
+
+  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;
+    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 (identical && stringStartsAfter(cm, cur))
+          curType = "both";
+        else 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");
+        sels = cm.listSelections().slice();
+        for (var i = 0; i < sels.length; i++)
+          sels[i] = contractSelection(sels[i]);
+        cm.setSelections(sels);
+      } 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;
+    }
+  }
+
+  function stringStartsAfter(cm, pos) {
+    var token = cm.getTokenAt(Pos(pos.line, pos.ch + 1))
+    return /\bstring/.test(token.type) && token.start == pos.ch
   }
-})();
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css b/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css
index 23eaf74d4..2a6a26228 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,40 +33,93 @@
   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;
+  border: 0 !important;
   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-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: -20px;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  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;}
@@ -79,22 +129,19 @@
 .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 */
@@ -103,30 +150,28 @@ 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;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
 }
 .CodeMirror-sizer {
   position: relative;
+  border-right: 30px solid transparent;
 }
 
 /* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actuall scrolling happens, thus preventing shaking and
+   before actual scrolling happens, thus preventing shaking and
    flickering artifacts. */
 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
   position: absolute;
@@ -152,29 +197,41 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-gutters {
   position: absolute; left: 0; top: 0;
-  padding-bottom: 30px;
+  min-height: 100%;
   z-index: 3;
 }
 .CodeMirror-gutter {
   white-space: normal;
   height: 100%;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  padding-bottom: 30px;
-  margin-bottom: -32px;
   display: inline-block;
-  /* Hack to make IE7 behave */
-  *zoom:1;
-  *display:inline;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+.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 */
@@ -191,22 +248,16 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   z-index: 2;
   position: relative;
   overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
 }
 .CodeMirror-wrap pre {
   word-wrap: break-word;
   white-space: pre-wrap;
   word-break: normal;
 }
-.CodeMirror-code pre {
-  border-right: 30px solid transparent;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.CodeMirror-wrap .CodeMirror-code pre {
-  border-right: none;
-  width: auto;
-}
+
 .CodeMirror-linebackground {
   position: absolute;
   left: 0; right: 0; top: 0; bottom: 0;
@@ -221,8 +272,18 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-widget {}
 
-.CodeMirror-wrap .CodeMirror-scroll {
-  overflow-x: hidden;
+.CodeMirror-code {
+  outline: none;
+}
+
+/* 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 {
@@ -232,32 +293,49 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   overflow: hidden;
   visibility: hidden;
 }
-.CodeMirror-measure pre { position: static; }
 
-.CodeMirror div.CodeMirror-cursor {
+.CodeMirror-cursor {
   position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
   visibility: hidden;
-  border-right: none;
-  width: 0;
+  position: relative;
+  z-index: 3;
 }
-.CodeMirror-focused div.CodeMirror-cursor {
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.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;
   background: rgba(255, 255, 0, .4);
 }
 
-/* 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 46373bfb7..84c881146 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js
@@ -1,5944 +1,9111 @@
-// CodeMirror is the only global var we claim
-window.CodeMirror = (function() {
-  "use strict";
-
-  // BROWSER SNIFFING
-
-  // Crude, but necessary to handle a number of hard-to-feature-detect
-  // bugs and behavior differences.
-  var gecko = /gecko\/\d/i.test(navigator.userAgent);
-  // IE11 currently doesn't count as 'ie', since it has almost none of
-  // the same bugs as earlier versions. Use ie_gt10 to handle
-  // incompatibilities in that version.
-  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_gt10 = /Trident\/([7-9]|\d{2,})\./.test(navigator.userAgent);
-  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 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);
-
-  var ios = /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
-  // 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 = /win/i.test(navigator.platform);
-
-  var opera_version = opera && navigator.userAgent.match(/Version\/(\d*\.\d*)/);
-  if (opera_version) opera_version = Number(opera_version[1]);
-  if (opera_version && opera_version >= 15) { opera = 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);
-
-  // Optimize some code when these features are not used
-  var sawReadOnlySpans = false, sawCollapsedSpans = false;
-
-  // CONSTRUCTOR
-
-  function CodeMirror(place, options) {
-    if (!(this instanceof CodeMirror)) return new CodeMirror(place, options);
-
-    this.options = options = 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];
-    setGuttersForLineNumbers(options);
-
-    var docStart = typeof options.value == "string" ? 0 : options.value.first;
-    var display = this.display = makeDisplay(place, docStart);
-    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";
-
-    var doc = options.value;
-    if (typeof doc == "string") doc = new Doc(options.value, options.mode);
-    operation(this, attachDoc)(this, doc);
-
-    // Override magic textarea content restore that IE sometimes does
-    // on our hidden textarea on reload
-    if (ie) setTimeout(bind(resetInput, this, 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);
-
-    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);
-    })();
-  }
-
-  // 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");
-    d.scrollbarFiller = elt("div", null, "CodeMirror-scrollbar-filler");
-    d.gutterFiller = elt("div", null, "CodeMirror-gutter-filler");
-    // DIVs containing the selection and the actual code
-    d.lineDiv = elt("div", null, "CodeMirror-code");
-    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.measure = 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.mover = elt("div", [elt("div", [d.lineSpace], "CodeMirror-lines")], null, "position: relative");
-    // Set to the height of the text, causes 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.gutters = elt("div", null, "CodeMirror-gutters");
-    d.lineGutter = null;
-    // Provides scrolling
-    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;
-
-    // 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.
-    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;
-
-    // Tracks the maximum line length so that the horizontal scrollbar
-    // can be kept static when scrolling.
-    d.maxLine = null;
-    d.maxLineLength = 0;
-    d.maxLineChanged = false;
-
-    // Used for measuring wheel scrolling granularity
-    d.wheelDX = d.wheelDY = d.wheelStartX = d.wheelStartY = null;
-
-    return d;
-  }
-
-  // STATE UPDATES
-
-  // Used to get the editor into a consistent state again when options change.
-
-  function loadMode(cm) {
-    cm.doc.mode = CodeMirror.getMode(cm.options, cm.doc.modeOption);
-    cm.doc.iter(function(line) {
-      if (line.stateAfter) line.stateAfter = null;
-      if (line.styles) line.styles = null;
-    });
-    cm.doc.frontier = cm.doc.first;
-    startWorker(cm, 100);
-    cm.state.modeGen++;
-    if (cm.curOp) regChange(cm);
-  }
-
-  function wrappingChanged(cm) {
-    if (cm.options.lineWrapping) {
-      cm.display.wrapper.className += " CodeMirror-wrap";
-      cm.display.sizer.style.minWidth = "";
-    } else {
-      cm.display.wrapper.className = cm.display.wrapper.className.replace(" CodeMirror-wrap", "");
-      computeMaxLength(cm);
-    }
-    estimateLineHeights(cm);
-    regChange(cm);
-    clearCaches(cm);
-    setTimeout(function(){updateScrollbars(cm);}, 100);
-  }
-
-  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;
-      else
-        return th;
-    };
-  }
-
-  function estimateLineHeights(cm) {
-    var doc = cm.doc, est = estimateHeight(cm);
-    doc.iter(function(line) {
-      var estHeight = est(line);
-      if (estHeight != line.height) updateLineHeight(line, estHeight);
-    });
-  }
-
-  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-");
-    clearCaches(cm);
-  }
-
-  function guttersChanged(cm) {
-    updateGutters(cm);
-    regChange(cm);
-    setTimeout(function(){alignHorizontally(cm);}, 20);
-  }
-
-  function updateGutters(cm) {
-    var gutters = cm.display.gutters, specs = cm.options.gutters;
-    removeChildren(gutters);
-    for (var i = 0; i < specs.length; ++i) {
-      var gutterClass = specs[i];
-      var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass));
-      if (gutterClass == "CodeMirror-linenumbers") {
-        cm.display.lineGutter = gElt;
-        gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
-      }
-    }
-    gutters.style.display = i ? "" : "none";
-  }
-
-  function lineLength(doc, 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);
-      len += found.from.ch - found.to.ch;
-    }
-    cur = line;
-    while (merged = collapsedSpanAtEnd(cur)) {
-      var found = merged.find();
-      len -= cur.text.length - found.from.ch;
-      cur = getLine(doc, found.to.line);
-      len += cur.text.length - found.to.ch;
-    }
-    return len;
-  }
-
-  function computeMaxLength(cm) {
-    var d = cm.display, doc = cm.doc;
-    d.maxLine = getLine(doc, doc.first);
-    d.maxLineLength = lineLength(doc, d.maxLine);
-    d.maxLineChanged = true;
-    doc.iter(function(line) {
-      var len = lineLength(doc, line);
-      if (len > d.maxLineLength) {
-        d.maxLineLength = len;
-        d.maxLine = line;
+// 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 (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global.CodeMirror = factory());
+}(this, (function () { 'use strict';
+
+// Kludges for bugs and behavior differences that can't be feature
+// detected are enabled based on userAgent etc sniffing.
+var userAgent = navigator.userAgent
+var platform = navigator.platform
+
+var gecko = /gecko\/\d/i.test(userAgent)
+var ie_upto10 = /MSIE \d/.test(userAgent)
+var ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(userAgent)
+var ie = ie_upto10 || ie_11up
+var ie_version = ie && (ie_upto10 ? document.documentMode || 6 : ie_11up[1])
+var webkit = /WebKit\//.test(userAgent)
+var qtwebkit = webkit && /Qt\/\d+\.\d+/.test(userAgent)
+var chrome = /Chrome\//.test(userAgent)
+var presto = /Opera\//.test(userAgent)
+var safari = /Apple Computer/.test(navigator.vendor)
+var mac_geMountainLion = /Mac OS X 1\d\D([8-9]|\d\d)\D/.test(userAgent)
+var phantom = /PhantomJS/.test(userAgent)
+
+var ios = /AppleWebKit/.test(userAgent) && /Mobile\/\w+/.test(userAgent)
+// This is woefully incomplete. Suggestions for alternative methods welcome.
+var mobile = ios || /Android|webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(userAgent)
+var mac = ios || /Mac/.test(platform)
+var chromeOS = /\bCrOS\b/.test(userAgent)
+var windows = /win/i.test(platform)
+
+var presto_version = presto && 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 || presto && (presto_version == null || presto_version < 12.11))
+var captureRightClick = gecko || (ie && ie_version >= 9)
+
+function classTest(cls) { return new RegExp("(^|\\s)" + cls + "(?:$|\\s)\\s*") }
+
+var 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 : "")
+  }
+}
+
+function removeChildren(e) {
+  for (var count = e.childNodes.length; count > 0; --count)
+    { e.removeChild(e.firstChild) }
+  return e
+}
+
+function removeChildrenAndAdd(parent, e) {
+  return removeChildren(parent).appendChild(e)
+}
+
+function elt(tag, content, className, style) {
+  var e = document.createElement(tag)
+  if (className) { e.className = className }
+  if (style) { e.style.cssText = style }
+  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 contains(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() {
+  // IE and Edge may throw an "Unspecified Error" when accessing document.activeElement.
+  // IE < 10 will throw when accessed while the page is loading or in an iframe.
+  // IE > 9 and Edge will throw when accessed in an iframe if document.body is unavailable.
+  var activeElement
+  try {
+    activeElement = document.activeElement
+  } catch(e) {
+    activeElement = document.body || null
+  }
+  while (activeElement && activeElement.root && activeElement.root.activeElement)
+    { activeElement = activeElement.root.activeElement }
+  return activeElement
+}
+
+function addClass(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
+}
+
+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 bind(f) {
+  var args = Array.prototype.slice.call(arguments, 1)
+  return function(){return f.apply(null, args)}
+}
+
+function copyObj(obj, target, overwrite) {
+  if (!target) { target = {} }
+  for (var prop in obj)
+    { if (obj.hasOwnProperty(prop) && (overwrite !== false || !target.hasOwnProperty(prop)))
+      { target[prop] = obj[prop] } }
+  return target
+}
+
+// Counts the column offset in a string, taking tabs into account.
+// Used mostly to find indentation.
+function countColumn(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;;) {
+    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
+  }
+}
+
+function Delayed() {this.id = null}
+Delayed.prototype.set = function(ms, f) {
+  clearTimeout(this.id)
+  this.id = setTimeout(f, ms)
+}
+
+function indexOf(array, elt) {
+  for (var i = 0; i < array.length; ++i)
+    { if (array[i] == elt) { return i } }
+  return -1
+}
+
+// Number of pixels added to scroller and sizer to hide scrollbar
+var scrollerGap = 30
+
+// Returned or thrown by various protocols to signal 'I'm not
+// handling this'.
+var Pass = {toString: function(){return "CodeMirror.Pass"}}
+
+// Reused option objects for setSelection & friends
+var sel_dontScroll = {scroll: false};
+var sel_mouse = {origin: "*mouse"};
+var sel_move = {origin: "+move"};
+// 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 }
+  }
+}
+
+var spaceStrs = [""]
+function spaceStr(n) {
+  while (spaceStrs.length <= n)
+    { spaceStrs.push(lst(spaceStrs) + " ") }
+  return spaceStrs[n]
+}
+
+function lst(arr) { return arr[arr.length-1] }
+
+function map(array, f) {
+  var out = []
+  for (var i = 0; i < array.length; i++) { out[i] = f(array[i], i) }
+  return out
+}
+
+function insertSorted(array, value, score) {
+  var pos = 0, priority = score(value)
+  while (pos < array.length && score(array[pos]) <= priority) { pos++ }
+  array.splice(pos, 0, value)
+}
+
+function nothing() {}
+
+function createObj(base, props) {
+  var inst
+  if (Object.create) {
+    inst = Object.create(base)
+  } else {
+    nothing.prototype = base
+    inst = new nothing()
+  }
+  if (props) { copyObj(props, inst) }
+  return inst
+}
+
+var nonASCIISingleCaseWordChar = /[\u00df\u0587\u0590-\u05f4\u0600-\u06ff\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/;
+function isWordCharBasic(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) {
+  for (var n in obj) { if (obj.hasOwnProperty(n) && obj[n]) { return false } }
+  return true
+}
+
+// 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) }
+
+// 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")
+  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")
+  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.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 document, allowing scrolling.
+  d.sizer = elt("div", [d.mover], "CodeMirror-sizer")
+  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
+  // 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.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
+  // 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
+
+  d.cachedCharWidth = d.cachedTextHeight = d.cachedPaddingH = null
+
+  // Tracks the maximum line length so that the horizontal scrollbar
+  // can be kept static when scrolling.
+  d.maxLine = null
+  d.maxLineLength = 0
+  d.maxLineChanged = false
+
+  // Used for measuring wheel scrolling granularity
+  d.wheelDX = d.wheelDY = d.wheelStartX = d.wheelStartY = null
+
+  // 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)
+}
+
+// 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.") }
+  var chunk = doc
+  while (!chunk.lines) {
+    for (var i = 0;; ++i) {
+      var child = chunk.children[i], sz = child.chunkSize()
+      if (n < sz) { chunk = child; break }
+      n -= sz
+    }
+  }
+  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) {
+    var text = line.text
+    if (n == end.line) { text = text.slice(0, end.ch) }
+    if (n == start.line) { text = text.slice(start.ch) }
+    out.push(text)
+    ++n
+  })
+  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) }) // iter aborts when callback returns truthy value
+  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
+  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)
+  for (var chunk = cur.parent; chunk; cur = chunk, chunk = chunk.parent) {
+    for (var i = 0;; ++i) {
+      if (chunk.children[i] == cur) { break }
+      no += chunk.children[i].chunkSize()
+    }
+  }
+  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$1 = 0; i$1 < chunk.children.length; ++i$1) {
+      var child = chunk.children[i$1], ch = child.height
+      if (h < ch) { chunk = child; continue outer }
+      h -= ch
+      n += child.chunkSize()
+    }
+    return n
+  } while (!chunk.lines)
+  var i = 0
+  for (; i < chunk.lines.length; ++i) {
+    var line = chunk.lines[i], lh = line.height
+    if (h < lh) { break }
+    h -= lh
+  }
+  return n + i
+}
+
+function isLine(doc, l) {return l >= doc.first && l < doc.first + doc.size}
+
+function lineNumberFor(options, i) {
+  return String(options.lineNumberFormatter(i + options.firstLineNumber))
+}
+
+// A Pos instance represents a position within the text.
+function Pos (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.
+function cmp(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 }
+
+// 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 clipPosArray(doc, array) {
+  var out = []
+  for (var i = 0; i < array.length; i++) { out[i] = clipPos(doc, array[i]) }
+  return out
+}
+
+// Optimize some code when these features are not used.
+var sawReadOnlySpans = false;
+var sawCollapsedSpans = false;
+function seeReadOnlySpans() {
+  sawReadOnlySpans = true
+}
+
+function seeCollapsedSpans() {
+  sawCollapsedSpans = true
+}
+
+// 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) {
+  var r
+  for (var 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) {
+  var nw
+  if (old) { for (var i = 0; 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 || 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(new MarkedSpan(marker, span.from, endsAfter ? null : span.to))
+    }
+  } }
+  return nw
+}
+function markedSpansAfter(old, endCh, isInsert) {
+  var nw
+  if (old) { for (var i = 0; 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 || 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(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 = 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)
+
+  // Next, merge those two ends
+  var sameLine = change.text.length == 1, offset = lst(change.text).length + (sameLine ? startCh : 0)
+  if (first) {
+    // Fix up .to properties of first
+    for (var i = 0; i < first.length; ++i) {
+      var span = first[i]
+      if (span.to == null) {
+        var found = getMarkedSpanFor(last, span.marker)
+        if (!found) { span.to = startCh }
+        else if (sameLine) { span.to = found.to == null ? null : found.to + offset }
       }
-    });
-  }
-
-  // Make sure the gutters options contains the element
-  // "CodeMirror-linenumbers" when the lineNumbers option is true.
-  function setGuttersForLineNumbers(options) {
-    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);
-    }
-  }
-
-  // SCROLLBARS
-
-  // 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 = "";
-      d.scrollbarV.firstChild.style.height = "0";
-    }
-    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 = "";
-      d.scrollbarH.firstChild.style.width = "0";
-    }
-    if (needsH && needsV) {
-      d.scrollbarFiller.style.display = "block";
-      d.scrollbarFiller.style.height = d.scrollbarFiller.style.width = scrollbarWidth(d.measure) + "px";
-    } else d.scrollbarFiller.style.display = "";
-    if (needsH && 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";
-    } else d.gutterFiller.style.display = "";
-
-    if (mac_geLion && scrollbarWidth(d.measure) === 0) {
-      d.scrollbarV.style.minWidth = d.scrollbarH.style.minHeight = mac_geMountainLion ? "18px" : "12px";
-      d.scrollbarV.style.pointerEvents = d.scrollbarH.style.pointerEvents = "none";
-    }
-  }
-
-  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;}
-    top = Math.floor(top - paddingTop(display));
-    var bottom = Math.ceil(top + height);
-    return {from: lineAtHeight(doc, top), to: lineAtHeight(doc, bottom)};
-  }
-
-  // LINE NUMBERS
-
-  function alignHorizontally(cm) {
-    var display = cm.display;
-    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;
-    }
-    if (cm.options.fixedGutter)
-      display.gutters.style.left = (comp + gutterW) + "px";
-  }
-
-  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;
-    if (last.length != display.lineNumChars) {
-      var test = display.measure.appendChild(elt("div", [elt("div", last)],
-                                                 "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.lineNumWidth = display.lineNumInnerWidth + padding;
-      display.lineNumChars = display.lineNumInnerWidth ? last.length : -1;
-      display.lineGutter.style.width = display.lineNumWidth + "px";
-      return true;
     }
-    return false;
-  }
-
-  function lineNumberFor(options, i) {
-    return String(options.lineNumberFormatter(i + options.firstLineNumber));
   }
-  function compensateForHScroll(display) {
-    return getRect(display.scroller).left - getRect(display.sizer).left;
-  }
-
-  // DISPLAY DRAWING
-
-  function updateDisplay(cm, changes, viewPort, forced) {
-    var oldFrom = cm.display.showingFrom, oldTo = cm.display.showingTo, updated;
-    var visible = visibleLines(cm.display, cm.doc, viewPort);
-    for (var first = true;; first = false) {
-      var oldWidth = cm.display.scroller.clientWidth;
-      if (!updateDisplayInner(cm, changes, visible, forced)) break;
-      updated = true;
-      changes = [];
-      updateSelection(cm);
-      updateScrollbars(cm);
-      if (first && cm.options.lineWrapping && oldWidth != cm.display.scroller.clientWidth) {
-        forced = true;
-        continue;
-      }
-      forced = false;
-
-      // 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;
-    }
-
-    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);
-    }
-    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, forced) {
-    var display = cm.display, doc = cm.doc;
-    if (!display.wrapper.clientWidth) {
-      display.showingFrom = display.showingTo = doc.first;
-      display.viewOffset = 0;
-      return;
-    }
-
-    // Bail out if the visible area is already rendered and nothing changed.
-    if (!forced && 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";
-
-    // 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 && changes[i].from < positionsChangedFrom) { positionsChangedFrom = changes[i].from; }
-
-    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);
-    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; }
+  if (last) {
+    // Fix up .from in last (or move them into first in case of sameLine)
+    for (var i$1 = 0; i$1 < last.length; ++i$1) {
+      var span$1 = last[i$1]
+      if (span$1.to != null) { span$1.to += offset }
+      if (span$1.from == null) {
+        var found$1 = getMarkedSpanFor(first, span$1.marker)
+        if (!found$1) {
+          span$1.from = offset
+          if (sameLine) { (first || (first = [])).push(span$1) }
         }
+      } else {
+        span$1.from += offset
+        if (sameLine) { (first || (first = [])).push(span$1) }
       }
-
-    // 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 (!forced && intactLines == to - from && from == display.showingFrom && to == display.showingTo) {
-      updateViewOffset(cm);
-      return;
     }
-    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.
-    if (different) {
-      display.lastSizeC = display.wrapper.clientHeight;
-      startWorker(cm, 400);
-    }
-    display.showingFrom = from; display.showingTo = to;
-
-    updateHeightsInViewport(cm);
-    updateViewOffset(cm);
-
-    return true;
-  }
-
-  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;
-        height = bot - prevBottom;
-        prevBottom = bot;
+  }
+  // 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) {
+    // Fill gap with whole-line-spans
+    var gap = change.text.length - 2, gapMarkers
+    if (gap > 0 && first)
+      { for (var i$2 = 0; i$2 < first.length; ++i$2)
+        { if (first[i$2].to == null)
+          { (gapMarkers || (gapMarkers = [])).push(new MarkedSpan(first[i$2].marker, null, null)) } } }
+    for (var i$3 = 0; i$3 < gap; ++i$3)
+      { newMarkers.push(gapMarkers) }
+    newMarkers.push(last)
+  }
+  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 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) {
+    if (line.markedSpans) { for (var i = 0; i < line.markedSpans.length; ++i) {
+      var mark = line.markedSpans[i].marker
+      if (mark.readOnly && (!markers || indexOf(markers, mark) == -1))
+        { (markers || (markers = [])).push(mark) }
+    } }
+  })
+  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(0)
+    for (var j = 0; j < parts.length; ++j) {
+      var p = parts[j]
+      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 (dto > 0 || !mk.inclusiveRight && !dto)
+        { newParts.push({from: m.to, to: p.to}) }
+      parts.splice.apply(parts, newParts)
+      j += newParts.length - 1
+    }
+  }
+  return parts
+}
+
+// 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 = (void 0), i = 0; i < sps.length; ++i) {
+    sp = sps[i]
+    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 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 && (sp.marker.inclusiveRight && marker.inclusiveLeft ? cmp(found.to, from) >= 0 : cmp(found.to, from) > 0) ||
+        fromCmp >= 0 && (sp.marker.inclusiveRight && marker.inclusiveLeft ? cmp(found.from, to) <= 0 : cmp(found.from, to) < 0))
+      { return true }
+  } }
+}
+
+// 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 = 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 = (void 0), i = 0; i < sps.length; ++i) {
+    sp = sps[i]
+    if (!sp.marker.collapsed) { continue }
+    if (sp.from == null) { return true }
+    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(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 = (void 0), i = 0; i < line.markedSpans.length; ++i) {
+    sp = line.markedSpans[i]
+    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 }
+  }
+}
+
+// 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) {
+    var line = chunk.lines[i]
+    if (line == lineObj) { break }
+    else { h += line.height }
+  }
+  for (var p = chunk.parent; p; chunk = p, p = chunk.parent) {
+    for (var i$1 = 0; i$1 < p.children.length; ++i$1) {
+      var cur = p.children[i$1]
+      if (cur == chunk) { break }
+      else { h += cur.height }
+    }
+  }
+  return h
+}
+
+// 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(0, true)
+    cur = found.from.line
+    len += found.from.ch - found.to.ch
+  }
+  cur = line
+  while (merged = collapsedSpanAtEnd(cur)) {
+    var found$1 = merged.find(0, true)
+    len -= cur.text.length - found$1.from.ch
+    cur = found$1.to.line
+    len += cur.text.length - found$1.to.ch
+  }
+  return len
+}
+
+// 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(d.maxLine)
+  d.maxLineChanged = true
+  doc.iter(function (line) {
+    var len = lineLength(line)
+    if (len > d.maxLineLength) {
+      d.maxLineLength = len
+      d.maxLine = line
+    }
+  })
+}
+
+// BIDI HELPERS
+
+function iterateBidiSections(order, from, to, f) {
+  if (!order) { return f(from, to, "ltr") }
+  var found = false
+  for (var i = 0; i < order.length; ++i) {
+    var part = order[i]
+    if (part.from < to && part.to > from || from == to && part.to == from) {
+      f(Math.max(part.from, from), Math.min(part.to, to), part.level == 1 ? "rtl" : "ltr")
+      found = true
+    }
+  }
+  if (!found) { f(from, to, "ltr") }
+}
+
+function bidiLeft(part) { return part.level % 2 ? part.to : part.from }
+function bidiRight(part) { return part.level % 2 ? part.from : part.to }
+
+function lineLeft(line) { var order = getOrder(line); return order ? bidiLeft(order[0]) : 0 }
+function lineRight(line) {
+  var order = getOrder(line)
+  if (!order) { return line.text.length }
+  return bidiRight(lst(order))
+}
+
+function compareBidiLevel(order, a, b) {
+  var linedir = order[0].level
+  if (a == linedir) { return true }
+  if (b == linedir) { return false }
+  return a < b
+}
+
+var bidiOther = null
+function getBidiPartAt(order, pos) {
+  var found
+  bidiOther = null
+  for (var i = 0; i < order.length; ++i) {
+    var cur = order[i]
+    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)) {
+        if (cur.from != cur.to) { bidiOther = found }
+        return i
       } else {
-        var box = getRect(node);
-        height = box.bottom - box.top;
-      }
-      var diff = node.lineObj.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;
+        if (cur.from != cur.to) { bidiOther = i }
+        return found
       }
     }
   }
-
-  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});
-        }
+  return found
+}
+
+function moveInLine(line, pos, dir, byUnit) {
+  if (!byUnit) { return pos + dir }
+  do { pos += dir }
+  while (pos > 0 && isExtendingChar(line.text.charAt(pos)))
+  return pos
+}
+
+// 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) }
+  var pos = getBidiPartAt(bidi, start), part = bidi[pos]
+  var target = moveInLine(line, start, part.level % 2 ? -dir : dir, byUnit)
+
+  for (;;) {
+    if (target > part.from && target < part.to) { return target }
+    if (target == part.from || target == part.to) {
+      if (getBidiPartAt(bidi, target) == pos) { return target }
+      part = bidi[pos += dir]
+      return (dir > 0) == part.level % 2 ? part.to : part.from
+    } else {
+      part = bidi[pos += dir]
+      if (!part) { return null }
+      if ((dir > 0) == part.level % 2)
+        { target = moveInLine(line, part.to, -1, byUnit) }
+      else
+        { target = moveInLine(line, part.from, 1, byUnit) }
+    }
+  }
+}
+
+function moveLogically(line, start, dir, byUnit) {
+  var target = start + dir
+  if (byUnit) { while (target > 0 && isExtendingChar(line.text.charAt(target))) { target += dir } }
+  return target < 0 || target > line.text.length ? null : target
+}
+
+// Bidirectional ordering algorithm
+// See http://unicode.org/reports/tr9/tr9-13.html for the algorithm
+// that this (partially) implements.
+
+// One-char codes used for character types:
+// L (L):   Left-to-Right
+// R (R):   Right-to-Left
+// r (AL):  Right-to-Left Arabic
+// 1 (EN):  European Number
+// + (ES):  European Number Separator
+// % (ET):  European Number Terminator
+// n (AN):  Arabic Number
+// , (CS):  Common Number Separator
+// m (NSM): Non-Spacing Mark
+// b (BN):  Boundary Neutral
+// s (B):   Paragraph Separator
+// t (S):   Segment Separator
+// w (WS):  Whitespace
+// N (ON):  Other Neutrals
+
+// Returns null if characters are ordered as they appear
+// (left-to-right), or an array of sections ({from, to, level}
+// 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%%11NLNNN1LNNNNNLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLN"
+  // Character types for codepoints 0x600 to 0x6f9
+  var arabicTypes = "nnnnnnNNr%%r,rNNmmmmmmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmmmnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmnNmmmmmmrrmmNmmmmrr1111111111"
+  function charType(code) {
+    if (code <= 0xf7) { return lowTypes.charAt(code) }
+    else if (0x590 <= code && code <= 0x5f4) { return "R" }
+    else if (0x600 <= code && code <= 0x6f9) { 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" }
+  }
+
+  var bidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
+  var isNeutral = /[stwN]/, isStrong = /[LRr]/, countsAsLeft = /[Lb1n]/, countsAsNum = /[1n]/;
+  // 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 = []
+    for (var i = 0; i < len; ++i)
+      { types.push(charType(str.charCodeAt(i))) }
+
+    // W1. Examine each non-spacing mark (NSM) in the level run, and
+    // change the type of the NSM to the type of the previous
+    // character. If the NSM is at the start of the level run, it will
+    // get the type of sor.
+    for (var i$1 = 0, prev = outerType; i$1 < len; ++i$1) {
+      var type = types[i$1]
+      if (type == "m") { types[i$1] = prev }
+      else { prev = type }
+    }
+
+    // W2. Search backwards from each instance of a European number
+    // until the first strong type (R, L, AL, or sor) is found. If an
+    // AL is found, change the type of the European number to Arabic
+    // number.
+    // W3. Change all ALs to R.
+    for (var i$2 = 0, cur = outerType; i$2 < len; ++i$2) {
+      var type$1 = types[i$2]
+      if (type$1 == "1" && cur == "r") { types[i$2] = "n" }
+      else if (isStrong.test(type$1)) { cur = type$1; if (type$1 == "r") { types[i$2] = "R" } }
+    }
+
+    // W4. A single European separator between two European numbers
+    // changes to a European number. A single common separator between
+    // two numbers of the same type changes to that type.
+    for (var i$3 = 1, prev$1 = types[0]; i$3 < len - 1; ++i$3) {
+      var type$2 = types[i$3]
+      if (type$2 == "+" && prev$1 == "1" && types[i$3+1] == "1") { types[i$3] = "1" }
+      else if (type$2 == "," && prev$1 == types[i$3+1] &&
+               (prev$1 == "1" || prev$1 == "n")) { types[i$3] = prev$1 }
+      prev$1 = type$2
+    }
+
+    // W5. A sequence of European terminators adjacent to European
+    // numbers changes to all European numbers.
+    // W6. Otherwise, separators and terminators change to Other
+    // Neutral.
+    for (var i$4 = 0; i$4 < len; ++i$4) {
+      var type$3 = types[i$4]
+      if (type$3 == ",") { types[i$4] = "N" }
+      else if (type$3 == "%") {
+        var end = (void 0)
+        for (end = i$4 + 1; end < len && types[end] == "%"; ++end) {}
+        var replace = (i$4 && types[i$4-1] == "!") || (end < len && types[end] == "1") ? "1" : "N"
+        for (var j = i$4; j < end; ++j) { types[j] = replace }
+        i$4 = end - 1
       }
-      intact = intact2;
     }
-    return intact;
-  }
 
-  function getDimensions(cm) {
-    var d = cm.display, left = {}, width = {};
-    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;
+    // W7. Search backwards from each instance of a European number
+    // until the first strong type (R, L, or sor) is found. If an L is
+    // found, then change the type of the European number to L.
+    for (var i$5 = 0, cur$1 = outerType; i$5 < len; ++i$5) {
+      var type$4 = types[i$5]
+      if (cur$1 == "L" && type$4 == "1") { types[i$5] = "L" }
+      else if (isStrong.test(type$4)) { cur$1 = type$4 }
+    }
+
+    // N1. A sequence of neutrals takes the direction of the
+    // surrounding strong text if the text on both sides has the same
+    // direction. European and Arabic numbers act as if they were R in
+    // terms of their influence on neutrals. Start-of-level-run (sor)
+    // and end-of-level-run (eor) are used at level run boundaries.
+    // N2. Any remaining neutrals take the embedding direction.
+    for (var i$6 = 0; i$6 < len; ++i$6) {
+      if (isNeutral.test(types[i$6])) {
+        var end$1 = (void 0)
+        for (end$1 = i$6 + 1; end$1 < len && isNeutral.test(types[end$1]); ++end$1) {}
+        var before = (i$6 ? types[i$6-1] : outerType) == "L"
+        var after = (end$1 < len ? types[end$1] : outerType) == "L"
+        var replace$1 = before || after ? "L" : "R"
+        for (var j$1 = i$6; j$1 < end$1; ++j$1) { types[j$1] = replace$1 }
+        i$6 = end$1 - 1
+      }
     }
-    return {fixedPos: compensateForHScroll(d),
-            gutterTotalWidth: d.gutters.offsetWidth,
-            gutterLeft: left,
-            gutterWidth: width,
-            wrapperWidth: d.wrapper.clientWidth};
-  }
-
-  function patchDisplay(cm, from, to, intact, updateNumbersFrom) {
-    var dims = getDimensions(cm);
-    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) {
-        node.style.display = "none";
-        node.lineObj = null;
-      } 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 && 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);
-          }
-        }
-      } 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;
+    // Here we depart from the documented algorithm, in order to avoid
+    // building up an actual levels array. Since there are only three
+    // levels (0, 1, 2) in an implementation that doesn't take
+    // explicit embedding into account, we can build up the order on
+    // the fly, without following the level-based algorithm.
+    var order = [], m
+    for (var i$7 = 0; i$7 < len;) {
+      if (countsAsLeft.test(types[i$7])) {
+        var start = i$7
+        for (++i$7; i$7 < len && countsAsLeft.test(types[i$7]); ++i$7) {}
+        order.push(new BidiSpan(0, start, i$7))
       } 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;
+        var pos = i$7, at = order.length
+        for (++i$7; i$7 < len && types[i$7] != "L"; ++i$7) {}
+        for (var j$2 = pos; j$2 < i$7;) {
+          if (countsAsNum.test(types[j$2])) {
+            if (pos < j$2) { order.splice(at, 0, new BidiSpan(1, pos, j$2)) }
+            var nstart = j$2
+            for (++j$2; j$2 < i$7 && countsAsNum.test(types[j$2]); ++j$2) {}
+            order.splice(at, 0, new BidiSpan(2, nstart, j$2))
+            pos = j$2
+          } else { ++j$2 }
         }
-
-        lineNode.lineObj = line;
+        if (pos < i$7) { order.splice(at, 0, new BidiSpan(1, pos, i$7)) }
       }
-      ++lineN;
-    });
-    while (cur) cur = rm(cur);
-  }
-
-  function buildLineElement(cm, line, lineNo, dims, reuse) {
-    var built = buildLineContent(cm, line), lineElement = built.pre;
-    var markers = line.gutterMarkers, display = cm.display, wrap;
-
-    var bgClass = built.bgClass ? built.bgClass + " " + (line.bgClass || "") : line.bgClass;
-    if (!cm.options.lineNumbers && !markers && !bgClass && !line.wrapClass && !line.widgets)
-      return lineElement;
-
-    // Lines with gutter elements, widgets or a background class need
-    // to be wrapped again, and have the extra elements added to the
-    // wrapper div
-
-    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; }
-        }
+    }
+    if (order[0].level == 1 && (m = str.match(/^\s+/))) {
+      order[0].from = m[0].length
+      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(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(new BidiSpan(order[0].level, len, len)) }
+
+    return order
+  }
+})()
+
+// 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) }
+  return order
+}
+
+// EVENT HANDLING
+
+// Lightweight event framework. on/off also work on DOM nodes,
+// registering native DOM handlers.
+
+var noHandlers = []
+
+var on = function(emitter, type, f) {
+  if (emitter.addEventListener) {
+    emitter.addEventListener(type, f, false)
+  } else if (emitter.attachEvent) {
+    emitter.attachEvent("on" + type, f)
+  } else {
+    var map = emitter._handlers || (emitter._handlers = {})
+    map[type] = (map[type] || noHandlers).concat(f)
+  }
+}
+
+function getHandlers(emitter, type) {
+  return emitter._handlers && emitter._handlers[type] || noHandlers
+}
+
+function off(emitter, type, f) {
+  if (emitter.removeEventListener) {
+    emitter.removeEventListener(type, f, false)
+  } else if (emitter.detachEvent) {
+    emitter.detachEvent("on" + type, f)
+  } else {
+    var map = emitter._handlers, arr = map && map[type]
+    if (arr) {
+      var index = indexOf(arr, f)
+      if (index > -1)
+        { map[type] = arr.slice(0, index).concat(arr.slice(index + 1)) }
+    }
+  }
+}
+
+function signal(emitter, type /*, values...*/) {
+  var handlers = getHandlers(emitter, type)
+  if (!handlers.length) { return }
+  var args = Array.prototype.slice.call(arguments, 2)
+  for (var i = 0; i < handlers.length; ++i) { handlers[i].apply(null, args) }
+}
+
+// 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) || e.codemirrorIgnore
+}
+
+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) {
+  return getHandlers(emitter, type).length > 0
+}
+
+// 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)}
+}
+
+// Due to the fact that we still support jurassic IE versions, some
+// compatibility wrappers are needed.
+
+function e_preventDefault(e) {
+  if (e.preventDefault) { e.preventDefault() }
+  else { e.returnValue = false }
+}
+function e_stopPropagation(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)}
+
+function e_target(e) {return e.target || e.srcElement}
+function e_button(e) {
+  var b = e.which
+  if (b == null) {
+    if (e.button & 1) { b = 1 }
+    else if (e.button & 2) { b = 3 }
+    else if (e.button & 4) { b = 2 }
+  }
+  if (mac && e.ctrlKey && b == 1) { b = 3 }
+  return b
+}
+
+// Detect drag-and-drop
+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 && ie_version < 9) { return false }
+  var div = elt('div')
+  return "draggable" in div || "dragDrop" in div
+}()
+
+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 && ie_version < 8) }
+  }
+  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()
+  var r1 = range(txt, 1, 2).getBoundingClientRect()
+  removeChildren(measure)
+  if (!r0 || r0.left == r0.right) { return false } // Safari returns null in some cases (#2780)
+  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 splitLinesAuto = "\n\nb".split(/\n/).length != 3 ? function (string) {
+  var pos = 0, result = [], l = string.length
+  while (pos <= l) {
+    var nl = string.indexOf("\n", pos)
+    if (nl == -1) { nl = string.length }
+    var line = string.slice(pos, string.charAt(nl - 1) == "\r" ? nl - 1 : nl)
+    var rt = line.indexOf("\r")
+    if (rt != -1) {
+      result.push(line.slice(0, rt))
+      pos += rt + 1
+    } else {
+      result.push(line)
+      pos = nl + 1
+    }
+  }
+  return result
+} : function (string) { return string.split(/\r\n?|\n/); }
+
+var hasSelection = window.getSelection ? function (te) {
+  try { return te.selectionStart != te.selectionEnd }
+  catch(e) { return false }
+} : function (te) {
+  var range
+  try {range = te.ownerDocument.selection.createRange()}
+  catch(e) {}
+  if (!range || range.parentElement() != te) { return false }
+  return range.compareEndPoints("StartToEnd", range) != 0
+}
+
+var hasCopyEvent = (function () {
+  var e = elt("div")
+  if ("oncopy" in e) { return true }
+  e.setAttribute("oncopy", "return;")
+  return typeof e.oncopy == "function"
+})()
+
+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
+}
+
+var modes = {};
+var 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.)
+function defineMode(name, mode) {
+  if (arguments.length > 2)
+    { mode.dependencies = Array.prototype.slice.call(arguments, 2) }
+  modes[name] = mode
+}
+
+function defineMIME(mime, spec) {
+  mimeModes[mime] = spec
+}
+
+// Given a MIME type, a {name, ...options} config object, or a name
+// string, return a mode config object.
+function resolveMode(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)) {
+    return resolveMode("application/xml")
+  } else if (typeof spec == "string" && /^[\w\-]+\/[\w\-]+\+json$/.test(spec)) {
+    return resolveMode("application/json")
+  }
+  if (typeof spec == "string") { return {name: spec} }
+  else { return spec || {name: "null"} }
+}
+
+// Given a mode spec (anything that resolveMode accepts), find and
+// initialize an actual mode object.
+function getMode(options, spec) {
+  spec = resolveMode(spec)
+  var mfactory = modes[spec.name]
+  if (!mfactory) { return getMode(options, "text/plain") }
+  var modeObj = mfactory(options, spec)
+  if (modeExtensions.hasOwnProperty(spec.name)) {
+    var exts = modeExtensions[spec.name]
+    for (var prop in exts) {
+      if (!exts.hasOwnProperty(prop)) { continue }
+      if (modeObj.hasOwnProperty(prop)) { modeObj["_" + prop] = modeObj[prop] }
+      modeObj[prop] = exts[prop]
+    }
+  }
+  modeObj.name = spec.name
+  if (spec.helperType) { modeObj.helperType = spec.helperType }
+  if (spec.modeProps) { for (var prop$1 in spec.modeProps)
+    { modeObj[prop$1] = spec.modeProps[prop$1] } }
+
+  return modeObj
+}
+
+// This can be used to attach properties to mode objects from
+// outside the actual mode definition.
+var modeExtensions = {}
+function extendMode(mode, properties) {
+  var exts = modeExtensions.hasOwnProperty(mode) ? modeExtensions[mode] : (modeExtensions[mode] = {})
+  copyObj(properties, exts)
+}
+
+function copyState(mode, state) {
+  if (state === true) { return state }
+  if (mode.copyState) { return mode.copyState(state) }
+  var nstate = {}
+  for (var n in state) {
+    var val = state[n]
+    if (val instanceof Array) { val = val.concat([]) }
+    nstate[n] = val
+  }
+  return nstate
+}
+
+// Given a mode and a state (for that mode), find the inner mode and
+// state at the position that the state refers to.
+function innerMode(mode, state) {
+  var info
+  while (mode.innerMode) {
+    info = mode.innerMode(state)
+    if (!info || info.mode == mode) { break }
+    state = info.state
+    mode = info.mode
+  }
+  return info || {mode: mode, state: state}
+}
+
+function startState(mode, a1, a2) {
+  return mode.startState ? mode.startState(a1, a2) : true
+}
+
+// STRING STREAM
+
+// Fed to the mode parsers, provides helper functions to make
+// parsers more succinct.
+
+var 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 == this.lineStart},
+  peek: function() {return this.string.charAt(this.pos) || undefined},
+  next: function() {
+    if (this.pos < this.string.length)
+      { return this.string.charAt(this.pos++) }
+  },
+  eat: function(match) {
+    var ch = this.string.charAt(this.pos)
+    var ok
+    if (typeof match == "string") { ok = ch == match }
+    else { ok = ch && (match.test ? match.test(ch) : match(ch)) }
+    if (ok) {++this.pos; return ch}
+  },
+  eatWhile: function(match) {
+    var start = this.pos
+    while (this.eat(match)){}
+    return this.pos > start
+  },
+  eatSpace: function() {
+    var this$1 = this;
+
+    var start = this.pos
+    while (/[\s\u00a0]/.test(this.string.charAt(this.pos))) { ++this$1.pos }
+    return this.pos > start
+  },
+  skipToEnd: function() {this.pos = this.string.length},
+  skipTo: function(ch) {
+    var found = this.string.indexOf(ch, this.pos)
+    if (found > -1) {this.pos = found; return true}
+  },
+  backUp: function(n) {this.pos -= n},
+  column: function() {
+    if (this.lastColumnPos < this.start) {
+      this.lastColumnValue = countColumn(this.string, this.start, this.tabSize, this.lastColumnPos, this.lastColumnValue)
+      this.lastColumnPos = this.start
+    }
+    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)
+  },
+  match: function(pattern, consume, caseInsensitive) {
+    if (typeof pattern == "string") {
+      var cased = function (str) { return caseInsensitive ? str.toLowerCase() : str; }
+      var substr = this.string.substr(this.pos, pattern.length)
+      if (cased(substr) == cased(pattern)) {
+        if (consume !== false) { this.pos += pattern.length }
+        return true
       }
-      reuse.insertBefore(lineElement, insertBefore);
-      if (isOk && widgetsSeen == line.widgets.length) {
-        wrap = reuse;
-        reuse.className = line.wrapClass || "";
+    } else {
+      var match = this.string.slice(this.pos).match(pattern)
+      if (match && match.index > 0) { return null }
+      if (match && consume !== false) { this.pos += match[0].length }
+      return match
+    }
+  },
+  current: function(){return this.string.slice(this.start, this.pos)},
+  hideFirstChars: function(n, inner) {
+    this.lineStart += n
+    try { return inner() }
+    finally { this.lineStart -= n }
+  }
+}
+
+// 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], lineClasses = {}
+  // Compute the base array of styles
+  runMode(cm, line.text, cm.doc.mode, state, function (end, style) { return st.push(end, style); },
+    lineClasses, forceToEnd)
+
+  // Run overlays, adjust style array.
+  var loop = function ( o ) {
+    var overlay = cm.state.overlays[o], i = 1, at = 0
+    runMode(cm, line.text, overlay.mode, true, function (end, style) {
+      var start = i
+      // Ensure there's a token end at the current position, and that i points at it
+      while (at < end) {
+        var i_end = st[i]
+        if (i_end > end)
+          { st.splice(i, 1, end, st[i+1], i_end) }
+        i += 2
+        at = Math.min(end, i_end)
       }
-    }
-    if (!wrap) {
-      wrap = elt("div", null, line.wrapClass, "position: relative");
-      wrap.appendChild(lineElement);
-    }
-    // Kludge to make sure the styled element lies behind the selection (by z-index)
-    if (bgClass)
-      wrap.insertBefore(elt("div", null, bgClass + " CodeMirror-linebackground"), wrap.firstChild);
-    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);
-      if (cm.options.lineNumbers && (!markers || !markers["CodeMirror-linenumbers"]))
-        wrap.lineNumber = gutterWrap.appendChild(
-          elt("div", lineNumberFor(cm.options, lineNo),
-              "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"));
+      if (!style) { return }
+      if (overlay.opaque) {
+        st.splice(start, i - start, end, "overlay " + style)
+        i = start + 2
+      } else {
+        for (; start < i; start += 2) {
+          var cur = st[start+1]
+          st[start+1] = (cur ? cur + " " : "") + "overlay " + style
         }
-    }
-    if (ie_lt8) wrap.style.zIndex = 2;
-    if (line.widgets && wrap != reuse) 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);
-      else
-        wrap.appendChild(node);
-      signalLater(widget, "redraw");
-    }
-    return wrap;
-  }
-
-  function positionLineWidget(widget, node, wrap, dims) {
-    if (widget.noHScroll) {
-      (wrap.alignable || (wrap.alignable = [])).push(node);
-      var width = dims.wrapperWidth;
-      node.style.left = dims.fixedPos + "px";
-      if (!widget.coverGutter) {
-        width -= dims.gutterTotalWidth;
-        node.style.paddingLeft = dims.gutterTotalWidth + "px";
       }
-      node.style.width = width + "px";
+    }, lineClasses)
+  };
+
+  for (var o = 0; o < cm.state.overlays.length; ++o) loop( o );
+
+  return {styles: st, classes: lineClasses.bgClass || lineClasses.textClass ? lineClasses : null}
+}
+
+function getLineStyles(cm, line, updateFrontier) {
+  if (!line.styles || line.styles[0] != cm.state.modeGen) {
+    var state = getStateBefore(cm, lineNo(line))
+    var result = highlightLine(cm, line, line.text.length > cm.options.maxHighlightLength ? copyState(cm.doc.mode, state) : state)
+    line.stateAfter = state
+    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
+}
+
+function getStateBefore(cm, n, precise) {
+  var doc = cm.doc, display = cm.display
+  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.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
+}
+
+// Lightweight form of highlight -- proceed over this line and
+// 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(text, cm.options.tabSize)
+  stream.start = stream.pos = startAt || 0
+  if (text == "") { callBlankLine(mode, state) }
+  while (!stream.eol()) {
+    readToken(mode, stream, state)
+    stream.start = stream.pos
+  }
+}
+
+function callBlankLine(mode, state) {
+  if (mode.blankLine) { return mode.blankLine(state) }
+  if (!mode.innerMode) { return }
+  var inner = 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] = 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) {
+  var getObj = function (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()
+}
+
+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
+}
+
+// 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
+  var inner = cm.options.addModeClass && [null]
+  if (text == "") { extractLineClasses(callBlankLine(mode, state), lineClasses) }
+  while (!stream.eol()) {
+    if (stream.pos > cm.options.maxHighlightLength) {
+      flattenSpans = false
+      if (forceToEnd) { processLine(cm, text, state, stream.pos) }
+      stream.pos = text.length
+      style = null
+    } else {
+      style = extractLineClasses(readToken(mode, stream, state, inner), lineClasses)
     }
-    if (widget.coverGutter) {
-      node.style.zIndex = 5;
-      node.style.position = "relative";
-      if (!widget.noHScroll) node.style.marginLeft = -dims.gutterTotalWidth + "px";
+    if (inner) {
+      var mName = inner[0].name
+      if (mName) { style = "m-" + (style ? mName + " " + style : mName) }
     }
-  }
-
-  // SELECTION / CURSOR
-
-  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";
-
-    // 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";
-    }
-  }
-
-  // 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 = "";
-
-    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"; }
-  }
-
-  // Highlight selection
-  function updateSelectionRange(cm) {
-    var display = cm.display, doc = cm.doc, sel = cm.doc.sel;
-    var fragment = document.createDocumentFragment();
-    var clientWidth = display.lineSpace.offsetWidth, pl = paddingLeft(cm.display);
-
-    function add(left, top, width, bottom) {
-      if (top < 0) top = 0;
-      fragment.appendChild(elt("div", null, "CodeMirror-selected", "position: absolute; left: " + left +
-                               "px; top: " + top + "px; width: " + (width == null ? clientWidth - left : width) +
-                               "px; height: " + (bottom - top) + "px"));
-    }
-
-    function drawForLine(line, fromArg, toArg) {
-      var lineObj = getLine(doc, line);
-      var lineLen = lineObj.text.length;
-      var start, end;
-      function coords(ch, bias) {
-        return charCoords(cm, Pos(line, ch), "div", lineObj, bias);
+    if (!flattenSpans || curStyle != style) {
+      while (curStart < stream.start) {
+        curStart = Math.min(stream.start, curStart + 5000)
+        f(curStart, curStyle)
       }
-
-      iterateBidiSections(getOrder(lineObj), fromArg || 0, toArg == null ? lineLen : toArg, function(from, to, dir) {
-        var leftPos = coords(from, "left"), rightPos, left, right;
-        if (from == to) {
-          rightPos = leftPos;
-          left = right = leftPos.left;
-        } else {
-          rightPos = coords(to - 1, "right");
-          if (dir == "rtl") { var tmp = leftPos; leftPos = rightPos; rightPos = tmp; }
-          left = leftPos.left;
-          right = rightPos.right;
-        }
-        if (fromArg == null && from == 0) left = pl;
-        if (rightPos.top - leftPos.top > 3) { // Different lines, draw top part
-          add(left, leftPos.top, null, leftPos.bottom);
-          left = pl;
-          if (leftPos.bottom < rightPos.top) add(left, leftPos.bottom, null, rightPos.top);
-        }
-        if (toArg == null && to == lineLen) right = clientWidth;
-        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;
-        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);
+      curStyle = style
+    }
+    stream.start = stream.pos
+  }
+  while (curStart < stream.pos) {
+    // Webkit seems to refuse to render text nodes longer than 57444
+    // characters, and returns inaccurate measurements in nodes
+    // starting around 5000 chars.
+    var pos = Math.min(stream.pos, curStart + 5000)
+    f(pos, curStyle)
+    curStart = pos
+  }
+}
+
+// Finds the line to start with when starting a parse. Tries to
+// find a line with a stateAfter, so that it can start with a
+// valid state. If that fails, it returns the line with the
+// smallest indentation, which tends to need the least context to
+// parse correctly.
+function findStartLine(cm, n, precise) {
+  var minindent, minline, doc = cm.doc
+  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 }
+    var indented = countColumn(line.text, null, cm.options.tabSize)
+    if (minline == null || minindent > indented) {
+      minline = search - 1
+      minindent = indented
+    }
+  }
+  return minline
+}
+
+// LINE DATA STRUCTURE
+
+// Line objects. These hold state related to a line, including
+// highlighting info (the styles array).
+function Line(text, markedSpans, estimateHeight) {
+  this.text = text
+  attachMarkedSpans(this, markedSpans)
+  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 }
+  if (line.styles) { line.styles = null }
+  if (line.order != null) { line.order = null }
+  detachMarkedSpans(line)
+  attachMarkedSpans(line, markedSpans)
+  var estHeight = estimateHeight ? estimateHeight(line) : 1
+  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)
+}
+
+// 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 = {};
+var 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,
+                 trailingSpace: false,
+                 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 = (void 0)
+    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 || "") }
+    }
+
+    // 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))) }
+
+    // Store the map and a cache object for the current logical line
+    if (i == 0) {
+      lineView.measure.map = builder.map
+      lineView.measure.cache = {}
     } 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;
-      if (singleVLine) {
-        if (leftEnd.top < rightStart.top - 2) {
-          add(leftEnd.right, leftEnd.top, null, leftEnd.bottom);
-          add(pl, rightStart.top, rightStart.left, rightStart.bottom);
-        } else {
-          add(leftEnd.right, leftEnd.top, rightStart.left - leftEnd.right, leftEnd.bottom);
-        }
+      ;(lineView.measure.maps || (lineView.measure.maps = [])).push(builder.map)
+      ;(lineView.measure.caches || (lineView.measure.caches = [])).push({})
+    }
+  }
+
+  // See issue #2901
+  if (webkit) {
+    var last = builder.content.lastChild
+    if (/\bcm-tab\b/.test(last.className) || (last.querySelector && last.querySelector(".cm-tab")))
+      { 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 }
+  var displayText = builder.splitSpaces ? splitSpaces(text, builder.trailingSpace) : text
+  var special = builder.cm.state.specialChars, mustWrap = false
+  var content
+  if (!special.test(text)) {
+    builder.col += text.length
+    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 {
+    content = document.createDocumentFragment()
+    var pos = 0
+    while (true) {
+      special.lastIndex = pos
+      var m = special.exec(text)
+      var skipped = m ? m.index - pos : text.length - pos
+      if (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 (leftEnd.bottom < rightStart.top)
-        add(pl, leftEnd.bottom, null, rightStart.top);
-    }
-
-    removeChildrenAndAdd(display.selectionDiv, fragment);
-    display.selectionDiv.style.display = "";
-  }
-
-  // Cursor-blinking
-  function restartBlink(cm) {
-    if (!cm.state.focused) return;
-    var display = cm.display;
-    clearInterval(display.blinker);
-    var on = true;
-    display.cursor.style.visibility = display.otherCursor.style.visibility = "";
-    if (cm.options.cursorBlinkRate > 0)
-      display.blinker = setInterval(function() {
-        display.cursor.style.visibility = display.otherCursor.style.visibility = (on = !on) ? "" : "hidden";
-      }, cm.options.cursorBlinkRate);
-  }
-
-  // HIGHLIGHT WORKER
-
-  function startWorker(cm, time) {
-    if (cm.doc.mode.startState && cm.doc.frontier < cm.display.showingTo)
-      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;
-    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 oldStyles = line.styles;
-        line.styles = highlightLine(cm, line, state, true);
-        var ischange = !oldStyles || oldStyles.length != line.styles.length;
-        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});
-        }
-        line.stateAfter = copyState(doc.mode, state);
+      if (!m) { break }
+      pos += skipped + 1
+      var txt$1 = (void 0)
+      if (m[0] == "\t") {
+        var tabSize = builder.cm.options.tabSize, tabWidth = tabSize - builder.col % tabSize
+        txt$1 = content.appendChild(elt("span", spaceStr(tabWidth), "cm-tab"))
+        txt$1.setAttribute("role", "presentation")
+        txt$1.setAttribute("cm-text", "\t")
+        builder.col += tabWidth
+      } else if (m[0] == "\r" || m[0] == "\n") {
+        txt$1 = content.appendChild(elt("span", m[0] == "\r" ? "\u240d" : "\u2424", "cm-invalidchar"))
+        txt$1.setAttribute("cm-text", m[0])
+        builder.col += 1
       } else {
-        processLine(cm, line.text, state);
-        line.stateAfter = doc.frontier % 5 == 0 ? copyState(doc.mode, state) : null;
-      }
-      ++doc.frontier;
-      if (+new Date > end) {
-        startWorker(cm, cm.options.workDelay);
-        return true;
+        txt$1 = builder.cm.options.specialCharPlaceholder(m[0])
+        txt$1.setAttribute("cm-text", m[0])
+        if (ie && ie_version < 9) { content.appendChild(elt("span", [txt$1])) }
+        else { content.appendChild(txt$1) }
+        builder.col += 1
       }
-    });
-    if (changed.length)
-      operation(cm, function() {
-        for (var i = 0; i < changed.length; ++i)
-          regChange(this, changed[i].start, changed[i].end);
-      })();
-  }
-
-  // Finds the line to start with when starting a parse. Tries to
-  // find a line with a stateAfter, so that it can start with a
-  // valid state. If that fails, it returns the line with the
-  // smallest indentation, which tends to need the least context to
-  // parse correctly.
-  function findStartLine(cm, n, precise) {
-    var minindent, minline, doc = cm.doc;
-    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;
-      var indented = countColumn(line.text, null, cm.options.tabSize);
-      if (minline == null || minindent > indented) {
-        minline = search - 1;
-        minindent = indented;
-      }
-    }
-    return minline;
-  }
-
-  function getStateBefore(cm, n, precise) {
-    var doc = cm.doc, display = cm.display;
-    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.text, state);
-      var save = pos == n - 1 || pos % 5 == 0 || pos >= display.showingFrom && pos < display.showingTo;
-      line.stateAfter = save ? copyState(doc.mode, state) : null;
-      ++pos;
-    });
-    if (precise) doc.frontier = pos;
-    return state;
-  }
-
-  // POSITION MEASUREMENT
-
-  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);
-    if (data.crude) {
-      var left = data.left + ch * data.width;
-      return {left: left, right: left + data.width, top: data.top, bottom: data.bottom};
-    }
-
-    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.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.wrapClass};
-    if (cache.length == 16) cache[++cm.display.measureLineCachePos % 16] = memo;
-    else cache.push(memo);
-    return measure;
-  }
-
-  function measureLineInner(cm, line) {
-    if (!cm.options.lineWrapping && line.text.length >= cm.options.crudeMeasuringFrom)
-      return crudelyMeasureLine(cm, line);
-
-    var display = cm.display, measure = emptyArray(line.text.length);
-    var pre = buildLineContent(cm, line, measure, true).pre;
-
-    // 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;
-        }
-        fragment.appendChild(wrap);
-      }
-      pre.appendChild(fragment);
-    }
-
-    removeChildrenAndAdd(display.measure, pre);
-
-    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 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;
-        }
+      builder.map.push(builder.pos, builder.pos + 1, txt$1)
+      builder.pos++
+    }
+  }
+  builder.trailingSpace = displayText.charCodeAt(text.length - 1) == 32
+  if (style || startStyle || endStyle || mustWrap || css) {
+    var fullStyle = style || ""
+    if (startStyle) { fullStyle += startStyle }
+    if (endStyle) { fullStyle += endStyle }
+    var token = elt("span", [content], fullStyle, css)
+    if (title) { token.title = title }
+    return builder.content.appendChild(token)
+  }
+  builder.content.appendChild(content)
+}
+
+function splitSpaces(text, trailingBefore) {
+  if (text.length > 1 && !/  /.test(text)) { return text }
+  var spaceBefore = trailingBefore, result = ""
+  for (var i = 0; i < text.length; i++) {
+    var ch = text.charAt(i)
+    if (ch == " " && spaceBefore && (i == text.length - 1 || text.charCodeAt(i + 1) == 32))
+      { ch = "\u00a0" }
+    result += ch
+    spaceBefore = ch == " "
+  }
+  return result
+}
+
+// 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
+      var part = (void 0)
+      for (var i = 0; i < order.length; i++) {
+        part = order[i]
+        if (part.to > start && part.from <= start) { 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]);
+      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.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) {
+    builder.cm.display.input.setUneditable(widget)
+    builder.content.appendChild(widget)
+  }
+  builder.pos += size
+  builder.trailingSpace = false
+}
+
+// Outputs a number of spans to make up a line, taking highlighting
+// and marked text into account.
+function insertLineContent(line, builder, styles) {
+  var spans = line.markedSpans, allText = line.text, at = 0
+  if (!spans) {
+    for (var i$1 = 1; i$1 < styles.length; i$1+=2)
+      { builder.addToken(builder, allText.slice(at, at = styles[i$1]), interpretTokenStyle(styles[i$1+1], builder.cm.options)) }
+    return
+  }
+
+  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 = css = ""
+      collapsed = null; nextChange = Infinity
+      var foundBookmarks = [], endStyles = (void 0)
+      for (var j = 0; j < spans.length; ++j) {
+        var sp = spans[j], m = sp.marker
+        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 = (css ? css + ";" : "") + m.css }
+          if (m.startStyle && sp.from == pos) { spanStartStyle += " " + m.startStyle }
+          if (m.endStyle && sp.to == nextChange) { (endStyles || (endStyles = [])).push(m.endStyle, sp.to) }
+          if (m.title && !title) { title = m.title }
+          if (m.collapsed && (!collapsed || compareCollapsedMarkers(collapsed.marker, m) < 0))
+            { collapsed = sp }
+        } else if (sp.from > pos && nextChange > sp.from) {
+          nextChange = sp.from
         }
       }
-      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));
-    }
-    removeChildren(cm.display.measure);
-    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);
-    }
-    return data;
-  }
-
-  function crudelyMeasureLine(cm, line) {
-    var copy = new Line(line.text.slice(0, 100), null);
-    if (line.textClass) copy.textClass = line.textClass;
-    var measure = measureLineInner(cm, copy);
-    var left = measureChar(cm, copy, 0, measure, "left");
-    var right = measureChar(cm, copy, 99, measure, "right");
-    return {crude: true, top: left.top, left: left.left, bottom: left.bottom, width: (right.right - left.left) / 100};
-  }
-
-  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;
-    }
-    var cached = !hasBadSpan && findCachedMeasurement(cm, line);
-    if (cached || line.text.length >= cm.options.crudeMeasuringFrom)
-      return measureChar(cm, line, line.text.length, cached && cached.measure, "right").right;
-
-    var pre = buildLineContent(cm, line, null, true).pre;
-    var end = pre.appendChild(zeroWidthElement(cm.display.measure));
-    removeChildrenAndAdd(cm.display.measure, pre);
-    return getRect(end).right - getRect(cm.display.lineDiv).left;
-  }
-
-  function clearCaches(cm) {
-    cm.display.measureLineCache.length = cm.display.measureLineCachePos = 0;
-    cm.display.cachedCharWidth = cm.display.cachedTextHeight = null;
-    if (!cm.options.lineWrapping) cm.display.maxLineChanged = true;
-    cm.display.lineNumChars = null;
-  }
-
-  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"
-  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]);
-      rect.top += size; rect.bottom += size;
-    }
-    if (context == "line") return rect;
-    if (!context) context = "local";
-    var yOff = heightAtLine(cm, lineObj);
-    if (context == "local") yOff += paddingTop(cm.display);
-    else yOff -= cm.display.viewOffset;
-    if (context == "page" || context == "window") {
-      var lOff = getRect(cm.display.lineSpace);
-      yOff += lOff.top + (context == "window" ? 0 : pageScrollY());
-      var xOff = lOff.left + (context == "window" ? 0 : pageScrollX());
-      rect.left += xOff; rect.right += xOff;
-    }
-    rect.top += yOff; rect.bottom += yOff;
-    return rect;
-  }
-
-  // Context may be "window", "page", "div", or "local"/null
-  // Result is in "div" coords
-  function fromCoordSystem(cm, coords, context) {
-    if (context == "div") return coords;
-    var left = coords.left, top = coords.top;
-    // First move into "page" coordinate system
-    if (context == "page") {
-      left -= pageScrollX();
-      top -= pageScrollY();
-    } else if (context == "local" || !context) {
-      var localBox = getRect(cm.display.sizer);
-      left += localBox.left;
-      top += localBox.top;
-    }
-
-    var lineSpaceBox = getRect(cm.display.lineSpace);
-    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);
-  }
-
-  function cursorCoords(cm, pos, context, lineObj, measurement) {
-    lineObj = lineObj || getLine(cm.doc, pos.line);
-    if (!measurement) measurement = measureLine(cm, lineObj);
-    function get(ch, right) {
-      var m = measureChar(cm, lineObj, ch, measurement, right ? "right" : "left");
-      if (right) m.left = m.right; else m.right = m.left;
-      return intoCoordSystem(cm, lineObj, m, context);
-    }
-    function getBidi(ch, partPos) {
-      var part = order[partPos], right = part.level % 2;
-      if (ch == bidiLeft(part) && partPos && part.level < order[partPos - 1].level) {
-        part = order[--partPos];
-        ch = bidiRight(part) - (part.level % 2 ? 0 : 1);
-        right = true;
-      } else if (ch == bidiRight(part) && partPos < order.length - 1 && part.level < order[partPos + 1].level) {
-        part = order[++partPos];
-        ch = bidiLeft(part) - part.level % 2;
-        right = false;
+      if (endStyles) { for (var j$1 = 0; j$1 < endStyles.length; j$1 += 2)
+        { if (endStyles[j$1 + 1] == nextChange) { spanEndStyle += " " + endStyles[j$1] } } }
+
+      if (!collapsed || collapsed.from == pos) { for (var j$2 = 0; j$2 < foundBookmarks.length; ++j$2)
+        { buildCollapsedSpan(builder, 0, foundBookmarks[j$2]) } }
+      if (collapsed && (collapsed.from || 0) == pos) {
+        buildCollapsedSpan(builder, (collapsed.to == null ? len + 1 : collapsed.to) - pos,
+                           collapsed.marker, collapsed.from == null)
+        if (collapsed.to == null) { return }
+        if (collapsed.to == pos) { collapsed = false }
       }
-      if (right && ch == part.to && ch > part.from) return get(ch - 1);
-      return get(ch, right);
-    }
-    var order = getOrder(lineObj), ch = pos.ch;
-    if (!order) return get(ch);
-    var partPos = getBidiPartAt(order, ch);
-    var val = getBidi(ch, partPos);
-    if (bidiOther != null) val.other = getBidi(ch, bidiOther);
-    return val;
-  }
-
-  function PosWithInfo(line, ch, outside, xRel) {
-    var pos = new Pos(line, ch);
-    pos.xRel = xRel;
-    if (outside) pos.outside = true;
-    return pos;
-  }
-
-  // Coords must be lineSpace-local
-  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)
-      return PosWithInfo(doc.first + doc.size - 1, getLine(doc, last).text.length, true, 1);
-    if (x < 0) x = 0;
-
-    for (;;) {
-      var lineObj = getLine(doc, lineNo);
-      var found = coordsCharInner(cm, lineObj, lineNo, x, y);
-      var merged = collapsedSpanAtEnd(lineObj);
-      var mergedPos = merged && merged.find();
-      if (merged && (found.ch > mergedPos.from.ch || found.ch == mergedPos.from.ch && found.xRel > 0))
-        lineNo = mergedPos.to.line;
-      else
-        return found;
-    }
-  }
-
-  function coordsCharInner(cm, lineObj, lineNo, x, y) {
-    var innerOff = y - heightAtLine(cm, lineObj);
-    var wrongLine = false, adjust = 2 * cm.display.wrapper.clientWidth;
-    var measurement = measureLine(cm, lineObj);
-
-    function getX(ch) {
-      var sp = cursorCoords(cm, Pos(lineNo, ch), "line",
-                            lineObj, measurement);
-      wrongLine = true;
-      if (innerOff > sp.bottom) return sp.left - adjust;
-      else if (innerOff < sp.top) return sp.left + adjust;
-      else wrongLine = false;
-      return sp.left;
     }
+    if (pos >= len) { break }
 
-    var bidi = getOrder(lineObj), dist = lineObj.text.length;
-    var from = lineLeft(lineObj), to = lineRight(lineObj);
-    var fromX = getX(from), fromOutside = wrongLine, toX = getX(to), toOutside = wrongLine;
-
-    if (x > toX) return PosWithInfo(lineNo, to, toOutside, 1);
-    // Do a binary search between these bounds.
-    for (;;) {
-      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;
-        var pos = PosWithInfo(lineNo, ch, ch == from ? fromOutside : toOutside,
-                              xDiff < 0 ? -1 : xDiff ? 1 : 0);
-        return pos;
-      }
-      var step = Math.ceil(dist / 2), middle = from + step;
-      if (bidi) {
-        middle = from;
-        for (var i = 0; i < step; ++i) middle = moveVisually(lineObj, middle, 1);
-      }
-      var middleX = getX(middle);
-      if (middleX > x) {to = middle; toX = middleX; if (toOutside = wrongLine) toX += 1000; dist = step;}
-      else {from = middle; fromX = middleX; fromOutside = wrongLine; dist -= step;}
-    }
-  }
-
-  var measureText;
-  function textHeight(display) {
-    if (display.cachedTextHeight != null) return display.cachedTextHeight;
-    if (measureText == null) {
-      measureText = elt("pre");
-      // Measure a bunch of lines, for browsers that compute
-      // fractional heights.
-      for (var i = 0; i < 49; ++i) {
-        measureText.appendChild(document.createTextNode("x"));
-        measureText.appendChild(elt("br"));
+    var upto = Math.min(len, nextChange)
+    while (true) {
+      if (text) {
+        var end = pos + text.length
+        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, css)
+        }
+        if (end >= upto) {text = text.slice(upto - pos); pos = upto; break}
+        pos = end
+        spanStartStyle = ""
       }
-      measureText.appendChild(document.createTextNode("x"));
-    }
-    removeChildrenAndAdd(display.measure, measureText);
-    var height = measureText.offsetHeight / 50;
-    if (height > 3) display.cachedTextHeight = height;
-    removeChildren(display.measure);
-    return height || 1;
-  }
-
-  function charWidth(display) {
-    if (display.cachedCharWidth != null) return display.cachedCharWidth;
-    var anchor = elt("span", "x");
-    var pre = elt("pre", [anchor]);
-    removeChildrenAndAdd(display.measure, pre);
-    var width = anchor.offsetWidth;
-    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.
-
-  var nextOpId = 0;
-  function startOperation(cm) {
-    cm.curOp = {
-      // An array of ranges of lines that have to be updated. See
-      // updateDisplay.
-      changes: [],
-      forceUpdate: false,
-      updateInput: null,
-      userSelChange: null,
-      textChanged: null,
-      selectionChanged: false,
-      cursorActivity: false,
-      updateMaxLine: false,
-      updateScrollPos: false,
-      id: ++nextOpId
-    };
-    if (!delayedCallbackDepth++) delayedCallbacks = [];
-  }
-
-  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 || op.forceUpdate || newScrollPos && newScrollPos.scrollTop != null) {
-      updated = updateDisplay(cm, op.changes, newScrollPos && newScrollPos.scrollTop, op.forceUpdate);
-      if (cm.display.scroller.offsetHeight) cm.doc.scrollTop = cm.display.scroller.scrollTop;
-    }
-    if (!updated && op.selectionChanged) updateSelection(cm);
-    if (op.updateScrollPos) {
-      var top = Math.max(0, Math.min(display.scroller.scrollHeight - display.scroller.clientHeight, newScrollPos.scrollTop));
-      var left = Math.max(0, Math.min(display.scroller.scrollWidth - display.scroller.clientWidth, newScrollPos.scrollLeft));
-      display.scroller.scrollTop = display.scrollbarV.scrollTop = doc.scrollTop = top;
-      display.scroller.scrollLeft = display.scrollbarH.scrollLeft = doc.scrollLeft = left;
-      alignHorizontally(cm);
-      if (op.scrollToPos)
-        scrollPosIntoView(cm, clipPos(cm.doc, op.scrollToPos.from),
-                          clipPos(cm.doc, op.scrollToPos.to), op.scrollToPos.margin);
-    } else if (newScrollPos) {
-      scrollCursorIntoView(cm);
-    }
-    if (op.selectionChanged) restartBlink(cm);
-
-    if (cm.state.focused && op.updateInput)
-      resetInput(cm, op.userSelChange);
-
-    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]();
-  }
-
-  // Wraps a function in an operation. Returns the wrapped function.
-  function operation(cm1, 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;
-    };
-  }
-  function docOperation(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;
-    };
-  }
-  function runInOp(cm, f) {
-    var withOp = !cm.curOp, result;
-    if (withOp) startOperation(cm);
-    try { result = f(); }
-    finally { if (withOp) endOperation(cm); }
-    return result;
-  }
-
-  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});
-  }
-
-  // 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);
-    });
-  }
-
-  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;
-    if (cm.state.pasteIncoming && cm.state.fakedLastChar) {
-      input.value = input.value.substring(0, input.value.length - 1);
-      cm.state.fakedLastChar = 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;
-    }
-
-    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);
-
-    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;
-  }
-
-  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;
-    }
-    cm.display.inaccurateSelection = minimal;
-  }
-
-  function focusInput(cm) {
-    if (cm.options.readOnly != "nocursor" && (!mobile || document.activeElement != cm.display.input))
-      cm.display.input.focus();
-  }
-
-  function isReadOnly(cm) {
-    return cm.options.readOnly || cm.doc.cantEdit;
-  }
-
-  // EVENT HANDLERS
-
-  function registerEventHandlers(cm) {
-    var d = cm.display;
-    on(d.scroller, "mousedown", operation(cm, onMouseDown));
-    if (ie)
-      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);
-      }));
+      text = allText.slice(at, at = styles[i++])
+      style = interpretTokenStyle(styles[i++], builder.cm.options)
+    }
+  }
+}
+
+
+// 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)
+}
+
+// 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 operationGroup = null
+
+function pushOperation(op) {
+  if (operationGroup) {
+    operationGroup.ops.push(op)
+  } else {
+    op.ownsGroup = operationGroup = {
+      ops: [op],
+      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)
+}
+
+function finishOperation(op, endCb) {
+  var group = op.ownsGroup
+  if (!group) { return }
+
+  try { fireCallbacksForOps(group) }
+  finally {
+    operationGroup = null
+    endCb(group)
+  }
+}
+
+var orphanDelayedCallbacks = null
+
+// 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 = getHandlers(emitter, type)
+  if (!arr.length) { return }
+  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)
+  }
+  var loop = function ( i ) {
+    list.push(function () { return arr[i].apply(null, args); })
+  };
+
+  for (var i = 0; i < arr.length; ++i)
+    loop( i );
+}
+
+function fireOrphanDelayed() {
+  var delayed = orphanDelayedCallbacks
+  orphanDelayedCallbacks = null
+  for (var i = 0; i < delayed.length; ++i) { delayed[i]() }
+}
+
+// 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, 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
+}
+
+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)
+  }
+}
+
+// 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
+  }
+  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 wrap$1 = 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$1.insertBefore(gutterWrap, lineView.text)
+    if (lineView.line.gutterClass)
+      { gutterWrap.className += " " + lineView.line.gutterClass }
+    if (cm.options.lineNumbers && (!markers || !markers["CodeMirror-linenumbers"]))
+      { lineView.lineNumber = gutterWrap.appendChild(
+        elt("div", lineNumberFor(cm.options, lineN),
+            "CodeMirror-linenumber CodeMirror-gutter-elt",
+            ("left: " + (dims.gutterLeft["CodeMirror-linenumbers"]) + "px; width: " + (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"))) }
+    } }
+  }
+}
+
+function updateLineWidgets(cm, lineView, dims) {
+  if (lineView.alignable) { lineView.alignable = null }
+  for (var node = lineView.node.firstChild, next = (void 0); node; node = next) {
+    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.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
-      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
-    // 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);});
-
-    on(d.scroller, "scroll", function() {
-      if (d.scroller.clientHeight) {
-        setScrollTop(cm, d.scroller.scrollTop);
-        setScrollLeft(cm, d.scroller.scrollLeft, true);
-        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);
-    });
-
-    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", function() {
-      if (ie && !ie_lt9 && cm.display.inputHasSelection) cm.display.inputHasSelection = null;
-      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() {
-      // Workaround for webkit bug https://bugs.webkit.org/show_bug.cgi?id=90206
-      // Add a char to the end of textarea before paste occur so that
-      // selection doesn't span to the end of textarea.
-      if (webkit && !cm.state.fakedLastChar && !(new Date - cm.state.lastMiddleDown < 200)) {
-        var start = d.input.selectionStart, end = d.input.selectionEnd;
-        d.input.value += "$";
-        d.input.selectionStart = start;
-        d.input.selectionEnd = end;
-        cm.state.fakedLastChar = true;
-      }
-      cm.state.pasteIncoming = true;
-      fastPoll(cm);
-    });
-
-    function prepareCopy() {
-      if (d.inaccurateSelection) {
-        d.prevInput = "";
-        d.inaccurateSelection = false;
-        d.input.value = cm.getSelection();
-        selectInput(d.input);
+      { wrap.appendChild(node) }
+    signalLater(widget, "redraw")
+  }
+}
+
+function positionLineWidget(widget, node, lineView, dims) {
+  if (widget.noHScroll) {
+    ;(lineView.alignable || (lineView.alignable = [])).push(node)
+    var width = dims.wrapperWidth
+    node.style.left = dims.fixedPos + "px"
+    if (!widget.coverGutter) {
+      width -= dims.gutterTotalWidth
+      node.style.paddingLeft = dims.gutterTotalWidth + "px"
+    }
+    node.style.width = width + "px"
+  }
+  if (widget.coverGutter) {
+    node.style.zIndex = 5
+    node.style.position = "relative"
+    if (!widget.noHScroll) { node.style.marginLeft = -dims.gutterTotalWidth + "px" }
+  }
+}
+
+function widgetHeight(widget) {
+  if (widget.height != null) { return widget.height }
+  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.parentNode.offsetHeight
+}
+
+// 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.nodeType == 1 && n.getAttribute("cm-ignore-events") == "true") ||
+        (n.parentNode == display.sizer && n != display.mover))
+      { return true }
+  }
+}
+
+// POSITION MEASUREMENT
+
+function paddingTop(display) {return display.lineSpace.offsetTop}
+function paddingVert(display) {return display.mover.offsetHeight - display.lineSpace.offsetHeight}
+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) }
       }
     }
-    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);
-    });
+    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$1 = 0; i$1 < lineView.rest.length; i$1++)
+    { if (lineNo(lineView.rest[i$1]) > lineN)
+      { return {map: lineView.measure.maps[i$1], cache: lineView.measure.caches[i$1], 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
+  }
+}
+
+// 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, mStart, mEnd
+  // 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) {
+    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}
+}
+
+function getUsefulRect(rects, bias) {
+  var rect = nullRect
+  if (bias == "left") { for (var i = 0; i < rects.length; i++) {
+    if ((rect = rects[i]).left != rect.right) { break }
+  } } else { for (var i$1 = rects.length - 1; i$1 >= 0; i$1--) {
+    if ((rect = rects[i$1]).left != rect.right) { break }
+  } }
+  return rect
+}
+
+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
+
+  var rect
+  if (node.nodeType == 3) { // If it is a text node, use a range to retrieve the coordinates.
+    for (var i$1 = 0; i$1 < 4; i$1++) { // 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
+        { rect = getUsefulRect(range(node, start, end).getClientRects(), bias) }
+      if (rect.left || rect.right || start == 0) { break }
+      end = start
+      start = start - 1
+      collapse = "right"
+    }
+    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() }
   }
-
-  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 (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 }
+  }
+
+  var rtop = rect.top - prepared.rect.top, rbot = rect.bottom - prepared.rect.top
+  var mid = (rtop + rbot) / 2
+  var heights = prepared.view.measure.heights
+  var i = 0
+  for (; 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 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] = {} } }
+  }
+}
+
+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) {
+  clearLineMeasurementCache(cm)
+  cm.display.cachedCharWidth = cm.display.cachedTextHeight = cm.display.cachedPaddingH = null
+  if (!cm.options.lineWrapping) { cm.display.maxLineChanged = true }
+  cm.display.lineNumChars = null
+}
+
+function pageScrollX() { return window.pageXOffset || (document.documentElement || document.body).scrollLeft }
+function pageScrollY() { return window.pageYOffset || (document.documentElement || document.body).scrollTop }
+
+// 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, includeWidgets) {
+  if (!includeWidgets && lineObj.widgets) { for (var i = 0; i < lineObj.widgets.length; ++i) { if (lineObj.widgets[i].above) {
+    var size = widgetHeight(lineObj.widgets[i])
+    rect.top += size; rect.bottom += size
+  } } }
+  if (context == "line") { return rect }
+  if (!context) { context = "local" }
+  var yOff = heightAtLine(lineObj)
+  if (context == "local") { yOff += paddingTop(cm.display) }
+  else { yOff -= cm.display.viewOffset }
+  if (context == "page" || context == "window") {
+    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
+  }
+  rect.top += yOff; rect.bottom += yOff
+  return rect
+}
+
+// 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
+  // First move into "page" coordinate system
+  if (context == "page") {
+    left -= pageScrollX()
+    top -= pageScrollY()
+  } else if (context == "local" || !context) {
+    var localBox = cm.display.sizer.getBoundingClientRect()
+    left += localBox.left
+    top += localBox.top
+  }
+
+  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, bias), context)
+}
+
+// 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 (!preparedMeasure) { preparedMeasure = prepareMeasureForLine(cm, lineObj) }
+  function get(ch, right) {
+    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)
+  }
+  function getBidi(ch, partPos) {
+    var part = order[partPos], right = part.level % 2
+    if (ch == bidiLeft(part) && partPos && part.level < order[partPos - 1].level) {
+      part = order[--partPos]
+      ch = bidiRight(part) - (part.level % 2 ? 0 : 1)
+      right = true
+    } else if (ch == bidiRight(part) && partPos < order.length - 1 && part.level < order[partPos + 1].level) {
+      part = order[++partPos]
+      ch = bidiLeft(part) - part.level % 2
+      right = false
+    }
+    if (right && ch == part.to && ch > part.from) { return get(ch - 1) }
+    return get(ch, right)
+  }
+  var order = getOrder(lineObj), ch = pos.ch
+  if (!order) { return get(ch) }
+  var partPos = getBidiPartAt(order, ch)
+  var val = getBidi(ch, partPos)
+  if (bidiOther != null) { val.other = getBidi(ch, bidiOther) }
+  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 = Pos(line, ch)
+  pos.xRel = xRel
+  if (outside) { pos.outside = true }
+  return pos
+}
+
+// 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 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 found = coordsCharInner(cm, lineObj, lineN, x, y)
+    var merged = collapsedSpanAtEnd(lineObj)
+    var mergedPos = merged && merged.find(0, true)
+    if (merged && (found.ch > mergedPos.from.ch || found.ch == mergedPos.from.ch && found.xRel > 0))
+      { lineN = lineNo(lineObj = mergedPos.to.line) }
+    else
+      { return found }
+  }
+}
+
+function coordsCharInner(cm, lineObj, lineNo, x, y) {
+  var innerOff = y - heightAtLine(lineObj)
+  var wrongLine = false, adjust = 2 * cm.display.wrapper.clientWidth
+  var preparedMeasure = prepareMeasureForLine(cm, lineObj)
+
+  function getX(ch) {
+    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 }
+    else { wrongLine = false }
+    return sp.left
+  }
+
+  var bidi = getOrder(lineObj), dist = lineObj.text.length
+  var from = lineLeft(lineObj), to = lineRight(lineObj)
+  var fromX = getX(from), fromOutside = wrongLine, toX = getX(to), toOutside = wrongLine
+
+  if (x > toX) { return PosWithInfo(lineNo, to, toOutside, 1) }
+  // Do a binary search between these bounds.
+  for (;;) {
+    if (bidi ? to == from || to == moveVisually(lineObj, from, 1) : to - from <= 1) {
+      var ch = x < fromX || x - fromX <= toX - x ? from : to
+      var outside = ch == from ? fromOutside : toOutside
+      var xDiff = x - (ch == from ? fromX : toX)
+      // This is a kludge to handle the case where the coordinates
+      // are after a line-wrapped line. We should replace it with a
+      // more general handling of cursor positions around line
+      // breaks. (Issue #4078)
+      if (toOutside && !bidi && !/\s/.test(lineObj.text.charAt(ch)) && xDiff > 0 &&
+          ch < lineObj.text.length && preparedMeasure.view.measure.heights.length > 1) {
+        var charSize = measureCharPrepared(cm, preparedMeasure, ch, "right")
+        if (innerOff <= charSize.bottom && innerOff >= charSize.top && Math.abs(x - charSize.right) < xDiff) {
+          outside = false
+          ch++
+          xDiff = x - charSize.right
+        }
+      }
+      while (isExtendingChar(lineObj.text.charAt(ch))) { ++ch }
+      var pos = PosWithInfo(lineNo, ch, outside, xDiff < -1 ? -1 : xDiff > 1 ? 1 : 0)
+      return pos
+    }
+    var step = Math.ceil(dist / 2), middle = from + step
+    if (bidi) {
+      middle = from
+      for (var i = 0; i < step; ++i) { middle = moveVisually(lineObj, middle, 1) }
+    }
+    var middleX = getX(middle)
+    if (middleX > x) {to = middle; toX = middleX; if (toOutside = wrongLine) { toX += 1000; } dist = step}
+    else {from = middle; fromX = middleX; fromOutside = wrongLine; dist -= step}
+  }
+}
+
+var measureText
+// Compute the default text height.
+function textHeight(display) {
+  if (display.cachedTextHeight != null) { return display.cachedTextHeight }
+  if (measureText == null) {
+    measureText = elt("pre")
+    // Measure a bunch of lines, for browsers that compute
+    // fractional heights.
+    for (var i = 0; i < 49; ++i) {
+      measureText.appendChild(document.createTextNode("x"))
+      measureText.appendChild(elt("br"))
+    }
+    measureText.appendChild(document.createTextNode("x"))
+  }
+  removeChildrenAndAdd(display.measure, measureText)
+  var height = measureText.offsetHeight / 50
+  if (height > 3) { display.cachedTextHeight = height }
+  removeChildren(display.measure)
+  return height || 1
+}
+
+// Compute the default character width.
+function charWidth(display) {
+  if (display.cachedCharWidth != null) { return display.cachedCharWidth }
+  var anchor = elt("span", "xxxxxxxxxx")
+  var pre = elt("pre", [anchor])
+  removeChildrenAndAdd(display.measure, pre)
+  var rect = anchor.getBoundingClientRect(), width = (rect.right - rect.left) / 10
+  if (width > 2) { display.cachedCharWidth = width }
+  return width || 10
+}
+
+// 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 + n.clientLeft + gutterLeft
+    width[cm.options.gutters[i]] = n.clientWidth
+  }
+  return {fixedPos: compensateForHScroll(d),
+          gutterTotalWidth: d.gutters.offsetWidth,
+          gutterLeft: left,
+          gutterWidth: width,
+          wrapperWidth: d.wrapper.clientWidth}
+}
+
+// Computes display.scroller.scrollLeft + display.gutters.offsetWidth,
+// but using getBoundingClientRect to get a sub-pixel-accurate
+// result.
+function compensateForHScroll(display) {
+  return display.scroller.getBoundingClientRect().left - display.sizer.getBoundingClientRect().left
+}
+
+// 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 }
+
+    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 widgetsHeight + th }
+  }
+}
+
+function estimateLineHeights(cm) {
+  var doc = cm.doc, est = estimateHeight(cm)
+  doc.iter(function (line) {
+    var estHeight = est(line)
+    if (estHeight != line.height) { updateLineHeight(line, estHeight) }
+  })
+}
+
+// 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 && 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 - 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
+}
+
+// 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 updateSelection(cm) {
+  cm.display.input.showSelection(cm.display.input.prepareSelection())
+}
+
+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]
+    if (range.from().line >= cm.display.viewTo || range.to().line < cm.display.viewFrom) { continue }
+    var collapsed = range.empty()
+    if (collapsed || cm.options.showCursorWhenSelecting)
+      { drawSelectionCursor(cm, range.head, curFragment) }
+    if (!collapsed)
+      { drawSelectionRange(cm, range, selFragment) }
   }
+  return result
+}
 
-  function posFromMouse(cm, e, liberal) {
-    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);
-    // 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);
-  }
+// Draws a cursor for the given range
+function drawSelectionCursor(cm, head, output) {
+  var pos = cursorCoords(cm, head, "div", null, null, !cm.options.singleCursorHeightPerLine)
 
-  var lastClick, lastDoubleClick;
-  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 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 (eventInWidget(display, e)) {
-      if (!webkit) {
-        display.scroller.draggable = false;
-        setTimeout(function(){display.scroller.draggable = true;}, 100);
-      }
-      return;
-    }
-    if (clickInGutter(cm, e)) return;
-    var start = posFromMouse(cm, e);
-
-    switch (e_button(e)) {
-    case 3:
-      if (captureMiddleClick) onContextMenu.call(cm, cm, e);
-      return;
-    case 2:
-      if (webkit) cm.state.lastMiddleDown = +new Date;
-      if (start) extendSelection(cm.doc, start);
-      setTimeout(bind(focusInput, cm), 20);
-      e_preventDefault(e);
-      return;
-    }
-    // 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 now = +new Date, type = "single";
-    if (lastDoubleClick && lastDoubleClick.time > now - 400 && posEq(lastDoubleClick.pos, start)) {
-      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)) {
-      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;
-    }
-    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;
+  if (pos.other) {
+    // 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"
+  }
+}
+
+// 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 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;\n                             top: " + top + "px; width: " + (width == null ? rightSide - left : width) + "px;\n                             height: " + (bottom - top) + "px")))
+  }
+
+  function drawForLine(line, fromArg, toArg) {
+    var lineObj = getLine(doc, line)
+    var lineLen = lineObj.text.length
+    var start, end
+    function coords(ch, bias) {
+      return charCoords(cm, Pos(line, ch), "div", lineObj, bias)
+    }
+
+    iterateBidiSections(getOrder(lineObj), fromArg || 0, toArg == null ? lineLen : toArg, function (from, to, dir) {
+      var leftPos = coords(from, "left"), rightPos, left, right
+      if (from == to) {
+        rightPos = leftPos
+        left = right = leftPos.left
+      } else {
+        rightPos = coords(to - 1, "right")
+        if (dir == "rtl") { var tmp = leftPos; leftPos = rightPos; rightPos = tmp }
+        left = leftPos.left
+        right = rightPos.right
       }
-
-      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)));
+      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 = leftSide
+        if (leftPos.bottom < rightPos.top) { add(left, leftPos.bottom, null, rightPos.top) }
       }
-    }
-
-    var editorSize = getRect(display.wrapper);
-    // 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,
-    // if the clear happens after their scheduled firing time).
-    var counter = 0;
-
-    function extend(e) {
-      var curCount = ++counter;
-      var cur = posFromMouse(cm, e, true);
-      if (!cur) return;
-      if (!posEq(cur, last)) {
-        if (!cm.state.focused) onFocus(cm);
-        last = cur;
-        doSelect(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);
+      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 < leftSide + 1) { left = leftSide }
+      add(left, rightPos.top, right - left, rightPos.bottom)
+    })
+    return {start: start, end: end}
+  }
+
+  var sFrom = range.from(), sTo = range.to()
+  if (sFrom.line == sTo.line) {
+    drawForLine(sFrom.line, sFrom.ch, sTo.ch)
+  } else {
+    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(leftSide, rightStart.top, rightStart.left, rightStart.bottom)
       } else {
-        var outside = e.clientY < editorSize.top ? -20 : e.clientY > editorSize.bottom ? 20 : 0;
-        if (outside) setTimeout(operation(cm, function() {
-          if (counter != curCount) return;
-          display.scroller.scrollTop += outside;
-          extend(e);
-        }), 50);
-      }
-    }
-
-    function done(e) {
-      counter = Infinity;
-      e_preventDefault(e);
-      focusInput(cm);
-      off(document, "mousemove", move);
-      off(document, "mouseup", up);
-    }
-
-    var move = operation(cm, function(e) {
-      if (!ie && !e_button(e)) done(e);
-      else extend(e);
-    });
-    var up = operation(cm, done);
-    on(document, "mousemove", move);
-    on(document, "mouseup", up);
-  }
-
-  function gutterEvent(cm, e, type, prevent, signalfn) {
-    try { var mX = e.clientX, mY = e.clientY; }
-    catch(e) { return false; }
-    if (mX >= Math.floor(getRect(cm.display.gutters).right)) return false;
-    if (prevent) e_preventDefault(e);
-
-    var display = cm.display;
-    var lineBox = getRect(display.lineDiv);
-
-    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) {
-        var line = lineAtHeight(cm.doc, mY);
-        var gutter = cm.options.gutters[i];
-        signalfn(cm, type, cm, line, gutter, e);
-        return e_defaultPrevented(e);
+        add(leftEnd.right, leftEnd.top, rightStart.left - leftEnd.right, leftEnd.bottom)
       }
     }
-  }
-
-  function contextMenuInGutter(cm, e) {
-    if (!hasHandler(cm, "gutterContextMenu")) return false;
-    return gutterEvent(cm, e, "gutterContextMenu", false, signal);
-  }
-
-  function clickInGutter(cm, e) {
-    return gutterEvent(cm, e, "gutterClick", true, signalLater);
-  }
-
-  // Kludge to work around strange IE behavior where it'll sometimes
-  // re-fire a series of drag-related events right after the drop (#1551)
-  var lastDrop = 0;
-
-  function onDrop(e) {
-    var cm = this;
-    if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e) || (cm.options.onDragEvent && cm.options.onDragEvent(cm, addStop(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;
-    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() {
-          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");
-          }
-        };
-        reader.readAsText(file);
-      };
-      for (var i = 0; i < n; ++i) loadFile(files[i], i);
+    if (leftEnd.bottom < rightStart.top)
+      { add(leftSide, leftEnd.bottom, null, rightStart.top) }
+  }
+
+  output.appendChild(fragment)
+}
+
+// Cursor-blinking
+function restartBlink(cm) {
+  if (!cm.state.focused) { return }
+  var display = cm.display
+  clearInterval(display.blinker)
+  var on = true
+  display.cursorDiv.style.visibility = ""
+  if (cm.options.cursorBlinkRate > 0)
+    { display.blinker = setInterval(function () { return display.cursorDiv.style.visibility = (on = !on) ? "" : "hidden"; },
+      cm.options.cursorBlinkRate) }
+  else if (cm.options.cursorBlinkRate < 0)
+    { display.cursorDiv.style.visibility = "hidden" }
+}
+
+function ensureFocus(cm) {
+  if (!cm.state.focused) { cm.display.input.focus(); onFocus(cm) }
+}
+
+function delayBlurEvent(cm) {
+  cm.state.delayingBlurEvent = true
+  setTimeout(function () { if (cm.state.delayingBlurEvent) {
+    cm.state.delayingBlurEvent = false
+    onBlur(cm)
+  } }, 100)
+}
+
+function onFocus(cm, e) {
+  if (cm.state.delayingBlurEvent) { cm.state.delayingBlurEvent = false }
+
+  if (cm.options.readOnly == "nocursor") { return }
+  if (!cm.state.focused) {
+    signal(cm, "focus", cm, e)
+    cm.state.focused = 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 () { return cm.display.input.reset(true); }, 20) } // Issue #1730
+    }
+    cm.display.input.receivedFocus()
+  }
+  restartBlink(cm)
+}
+function onBlur(cm, e) {
+  if (cm.state.delayingBlurEvent) { return }
+
+  if (cm.state.focused) {
+    signal(cm, "blur", cm, e)
+    cm.state.focused = false
+    rmClass(cm.display.wrapper, "CodeMirror-focused")
+  }
+  clearInterval(cm.display.blinker)
+  setTimeout(function () { if (!cm.state.focused) { cm.display.shift = false } }, 150)
+}
+
+// Re-align line numbers and gutter marks to compensate for
+// horizontal scrolling.
+function alignHorizontally(cm) {
+  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, left = comp + "px"
+  for (var i = 0; i < view.length; i++) { if (!view[i].hidden) {
+    if (cm.options.fixedGutter) {
+      if (view[i].gutter)
+        { view[i].gutter.style.left = left }
+      if (view[i].gutterBackground)
+        { view[i].gutterBackground.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
+  if (last.length != display.lineNumChars) {
+    var test = display.measure.appendChild(elt("div", [elt("div", last)],
+                                               "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) + 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
+}
+
+// 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 i = 0; i < display.view.length; i++) {
+    var cur = display.view[i], height = (void 0)
+    if (cur.hidden) { continue }
+    if (ie && ie_version < 8) {
+      var bot = cur.node.offsetTop + cur.node.offsetHeight
+      height = bot - prevBottom
+      prevBottom = bot
     } else {
-      // 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))) {
-        cm.state.draggingText(e);
-        // Ensure the editor is re-focused
-        setTimeout(bind(focusInput, cm), 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);
+      var box = cur.node.getBoundingClientRect()
+      height = box.bottom - box.top
+    }
+    var diff = cur.line.height - height
+    if (height < 2) { height = textHeight(display) }
+    if (diff > .001 || diff < -.001) {
+      updateLineHeight(cur.line, height)
+      updateWidgetHeight(cur.line)
+      if (cur.rest) { for (var j = 0; j < cur.rest.length; j++)
+        { updateWidgetHeight(cur.rest[j]) } }
+    }
+  }
+}
+
+// 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.parentNode.offsetHeight } }
+}
+
+// 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 = 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)}
+}
+
+// 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) { updateDisplaySimple(cm, {top: val}) }
+  if (cm.display.scroller.scrollTop != val) { cm.display.scroller.scrollTop = val }
+  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 }
+  cm.display.scrollbars.setScrollLeft(val)
+}
+
+// Since the delta values reported on mouse wheel events are
+// unstandardized between browsers and even browser versions, and
+// generally horribly unpredictable, this code starts by measuring
+// the scroll effect that the first few mouse wheel events have,
+// and, from that, detects the way it can convert deltas to pixel
+// offsets afterwards.
+//
+// The reason we want to know the amount a wheel event will scroll
+// is that it gives us a chance to update the display before the
+// actual scrolling happens, reducing flickering.
+
+var wheelSamples = 0;
+var wheelPixelsPerUnit = null;
+// Fill in a browser-detected starting value on browsers where we
+// know one. These don't have to be accurate -- the result of them
+// being wrong would just be a slight flicker on the first wheel
+// scroll (if it is large enough).
+if (ie) { wheelPixelsPerUnit = -.53 }
+else if (gecko) { wheelPixelsPerUnit = 15 }
+else if (chrome) { wheelPixelsPerUnit = -.7 }
+else if (safari) { wheelPixelsPerUnit = -1/3 }
+
+function wheelEventDelta(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}
+}
+function wheelEventPixels(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
+  var canScrollX = scroll.scrollWidth > scroll.clientWidth
+  var canScrollY = scroll.scrollHeight > scroll.clientHeight
+  if (!(dx && canScrollX || dy && canScrollY)) { return }
+
+  // Webkit browsers on OS X abort momentum scrolls when the target
+  // of the scroll event is removed from the scrollable element.
+  // This hack (see related code in patchDisplay) makes sure the
+  // element is kept around.
+  if (dy && mac && webkit) {
+    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
         }
       }
-      catch(e){}
     }
   }
 
-  function onDragStart(cm, e) {
-    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);
-
-    // 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;");
-      img.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
-      if (opera) {
-        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);
-    }
-  }
-
-  function setScrollTop(cm, val) {
-    if (Math.abs(cm.doc.scrollTop - val) < 2) return;
-    cm.doc.scrollTop = val;
-    if (!gecko) updateDisplay(cm, [], 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, []);
-    startWorker(cm, 100);
-  }
-  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;
-  }
-
-  // Since the delta values reported on mouse wheel events are
-  // unstandardized between browsers and even browser versions, and
-  // generally horribly unpredictable, this code starts by measuring
-  // the scroll effect that the first few mouse wheel events have,
-  // and, from that, detects the way it can convert deltas to pixel
-  // offsets afterwards.
-  //
-  // The reason we want to know the amount a wheel event will scroll
-  // is that it gives us a chance to update the display before the
-  // actual scrolling happens, reducing flickering.
-
-  var wheelSamples = 0, wheelPixelsPerUnit = null;
-  // Fill in a browser-detected starting value on browsers where we
-  // know one. These don't have to be accurate -- the result of them
-  // being wrong would just be a slight flicker on the first wheel
-  // scroll (if it is large enough).
-  if (ie) wheelPixelsPerUnit = -.53;
-  else if (gecko) wheelPixelsPerUnit = 15;
-  else if (chrome) wheelPixelsPerUnit = -.7;
-  else if (safari) wheelPixelsPerUnit = -1/3;
-
-  function onScrollWheel(cm, 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;
-
-    var display = cm.display, scroll = display.scroller;
-    // Quit if there's nothing to scroll here
-    if (!(dx && scroll.scrollWidth > scroll.clientWidth ||
-          dy && scroll.scrollHeight > scroll.clientHeight)) return;
-
-    // Webkit browsers on OS X abort momentum scrolls when the target
-    // of the scroll event is removed from the scrollable element.
-    // 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;
-        }
-      }
+  // On some browsers, horizontal scrolling will cause redraws to
+  // happen before the gutter has been realigned, causing it to
+  // wriggle around in a most unseemly way. When we have an
+  // 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 && !presto && wheelPixelsPerUnit != null) {
+    if (dy && canScrollY)
+      { 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)))
+    // Only prevent default scrolling if vertical scrolling is
+    // actually possible. Otherwise, it causes vertical scroll
+    // jitter on OSX trackpads when deltaX is small and deltaY
+    // is large (issue #3579)
+    if (!dy || (dy && canScrollY))
+      { e_preventDefault(e) }
+    display.wheelStartX = null // Abort measurement, if in progress
+    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) }
+    updateDisplaySimple(cm, {top: top, bottom: bot})
+  }
+
+  if (wheelSamples < 20) {
+    if (display.wheelStartX == null) {
+      display.wheelStartX = scroll.scrollLeft; display.wheelStartY = scroll.scrollTop
+      display.wheelDX = dx; display.wheelDY = dy
+      setTimeout(function () {
+        if (display.wheelStartX == null) { return }
+        var movedX = scroll.scrollLeft - display.wheelStartX
+        var movedY = scroll.scrollTop - display.wheelStartY
+        var sample = (movedY && display.wheelDY && movedY / display.wheelDY) ||
+          (movedX && display.wheelDX && movedX / display.wheelDX)
+        display.wheelStartX = display.wheelStartY = null
+        if (!sample) { return }
+        wheelPixelsPerUnit = (wheelPixelsPerUnit * wheelSamples + sample) / (wheelSamples + 1)
+        ++wheelSamples
+      }, 200)
+    } else {
+      display.wheelDX += dx; display.wheelDY += dy
+    }
+  }
+}
+
+// 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
+  }
+}
+
+var NativeScrollbars = function(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.checkedZeroWidth = 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.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.checkedZeroWidth && measure.clientHeight > 0) {
+    if (sWidth == 0) { this.zeroWidthHack() }
+    this.checkedZeroWidth = true
+  }
+
+  return {right: needsV ? sWidth : 0, bottom: needsH ? sWidth : 0}
+};
+
+NativeScrollbars.prototype.setScrollLeft = function (pos) {
+  if (this.horiz.scrollLeft != pos) { this.horiz.scrollLeft = pos }
+  if (this.disableHoriz) { this.enableZeroWidthBar(this.horiz, this.disableHoriz) }
+};
+
+NativeScrollbars.prototype.setScrollTop = function (pos) {
+  if (this.vert.scrollTop != pos) { this.vert.scrollTop = pos }
+  if (this.disableVert) { this.enableZeroWidthBar(this.vert, this.disableVert) }
+};
+
+NativeScrollbars.prototype.zeroWidthHack = function () {
+  var w = mac && !mac_geMountainLion ? "12px" : "18px"
+  this.horiz.style.height = this.vert.style.width = w
+  this.horiz.style.pointerEvents = this.vert.style.pointerEvents = "none"
+  this.disableHoriz = new Delayed
+  this.disableVert = new Delayed
+};
+
+NativeScrollbars.prototype.enableZeroWidthBar = function (bar, delay) {
+  bar.style.pointerEvents = "auto"
+  function maybeDisable() {
+    // To find out whether the scrollbar is still visible, we
+    // check whether the element under the pixel in the bottom
+    // left corner of the scrollbar box is the scrollbar box
+    // itself (when the bar is still visible) or its filler child
+    // (when the bar is hidden). If it is still visible, we keep
+    // it enabled, if it's hidden, we disable pointer events.
+    var box = bar.getBoundingClientRect()
+    var elt = document.elementFromPoint(box.left + 1, box.bottom - 1)
+    if (elt != bar) { bar.style.pointerEvents = "none" }
+    else { delay.set(1000, maybeDisable) }
+  }
+  delay.set(1000, maybeDisable)
+};
+
+NativeScrollbars.prototype.clear = function () {
+  var parent = this.horiz.parentNode
+  parent.removeChild(this.horiz)
+  parent.removeChild(this.vert)
+};
+
+var NullScrollbars = function () {};
+
+NullScrollbars.prototype.update = function () { return {bottom: 0, right: 0} };
+NullScrollbars.prototype.setScrollLeft = function () {};
+NullScrollbars.prototype.setScrollTop = function () {};
+NullScrollbars.prototype.clear = function () {};
+
+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.
+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"
+  d.heightForcer.style.borderBottom = sizes.bottom + "px solid transparent"
+
+  if (sizes.right && sizes.bottom) {
+    d.scrollbarFiller.style.display = "block"
+    d.scrollbarFiller.style.height = sizes.bottom + "px"
+    d.scrollbarFiller.style.width = sizes.right + "px"
+  } else { d.scrollbarFiller.style.display = "" }
+  if (sizes.bottom && cm.options.coverGutterNextToScrollbar && cm.options.fixedGutter) {
+    d.gutterFiller.style.display = "block"
+    d.gutterFiller.style.height = sizes.bottom + "px"
+    d.gutterFiller.style.width = measure.gutterWidth + "px"
+  } else { d.gutterFiller.style.display = "" }
+}
+
+var 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 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 () { return 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) }
+}
+
+// SCROLLING THINGS INTO VIEW
+
+// 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 }
+
+  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 scrollNode = elt("div", "\u200b", null, ("position: absolute;\n                         top: " + (coords.top - display.viewOffset - paddingTop(cm.display)) + "px;\n                         height: " + (coords.bottom - coords.top + scrollGap(cm) + display.barHeight) + "px;\n                         left: " + (coords.left) + "px; width: 2px;"))
+    cm.display.lineSpace.appendChild(scrollNode)
+    scrollNode.scrollIntoView(doScroll)
+    cm.display.lineSpace.removeChild(scrollNode)
+  }
+}
+
+// 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 }
+  var coords
+  for (var limit = 0; limit < 5; limit++) {
+    var changed = false
+    coords = cursorCoords(cm, pos)
+    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)
+      if (Math.abs(cm.doc.scrollTop - startTop) > 1) { changed = true }
+    }
+    if (scrollPos.scrollLeft != null) {
+      setScrollLeft(cm, scrollPos.scrollLeft)
+      if (Math.abs(cm.doc.scrollLeft - startLeft) > 1) { changed = true }
+    }
+    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 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) {
+    result.scrollTop = atTop ? 0 : y1
+  } else if (y2 > screentop + screen) {
+    var newTop = Math.min(y1, (atBottom ? docBottom : y2) - screen)
+    if (newTop != screentop) { result.scrollTop = newTop }
+  }
+
+  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
+}
+
+// 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}
+}
+
+// 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)
+  }
+}
+
+// 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 nextOpId = 0
+// Start a new operation.
+function startOperation(cm) {
+  cm.curOp = {
+    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
+  }
+  pushOperation(cm.curOp)
+}
+
+// Finish an operation, updating the display and signalling delayed events
+function endOperation(cm) {
+  var op = cm.curOp
+  finishOperation(op, function (group) {
+    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$1 = 0; i$1 < ops.length; i$1++) // Write DOM (maybe)
+    { endOperation_W1(ops[i$1]) }
+  for (var i$2 = 0; i$2 < ops.length; i$2++) // Read DOM
+    { endOperation_R2(ops[i$2]) }
+  for (var i$3 = 0; i$3 < ops.length; i$3++) // Write DOM (maybe)
+    { endOperation_W2(ops[i$3]) }
+  for (var i$4 = 0; i$4 < ops.length; i$4++) // Read DOM
+    { endOperation_finish(ops[i$4]) }
+}
+
+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(op.focus) }
+}
+
+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
+  }
+
+  var takeFocus = op.focus && op.focus == activeElt() && (!document.hasFocus || document.hasFocus())
+  if (op.preparedSelection)
+    { cm.display.input.showSelection(op.preparedSelection, takeFocus) }
+  if (op.updatedDisplay || op.startHeight != cm.doc.height)
+    { updateScrollbars(cm, op.barMeasure) }
+  if (op.updatedDisplay)
+    { setDocumentHeight(cm, op.barMeasure) }
+
+  if (op.selectionChanged) { restartBlink(cm) }
+
+  if (cm.state.focused && op.updateInput)
+    { cm.display.input.reset(op.typing) }
+  if (takeFocus) { 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 - display.scroller.clientWidth, 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$1 = 0; i$1 < unhidden.length; ++i$1)
+    { if (unhidden[i$1].lines.length) { signal(unhidden[i$1], "unhide") } } }
+
+  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(cm, f) {
+  return function() {
+    if (cm.curOp) { return f.apply(cm, arguments) }
+    startOperation(cm)
+    try { return f.apply(cm, arguments) }
+    finally { endOperation(cm) }
+  }
+}
+// Used to add methods to editor and doc instances, wrapping them in
+// operations.
+function methodOp(f) {
+  return function() {
+    if (this.curOp) { return f.apply(this, arguments) }
+    startOperation(this)
+    try { return f.apply(this, arguments) }
+    finally { endOperation(this) }
+  }
+}
+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) }
+  }
+}
+
+// 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 }
+
+  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)
     }
-
-    // On some browsers, horizontal scrolling will cause redraws to
-    // happen before the gutter has been realigned, causing it to
-    // wriggle around in a most unseemly way. When we have an
-    // 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 (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)));
-      e_preventDefault(e);
-      display.wheelStartX = null; // Abort measurement, if in progress
-      return;
-    }
-
-    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});
-    }
-
-    if (wheelSamples < 20) {
-      if (display.wheelStartX == null) {
-        display.wheelStartX = scroll.scrollLeft; display.wheelStartY = scroll.scrollTop;
-        display.wheelDX = dx; display.wheelDY = dy;
-        setTimeout(function() {
-          if (display.wheelStartX == null) return;
-          var movedX = scroll.scrollLeft - display.wheelStartX;
-          var movedY = scroll.scrollTop - display.wheelStartY;
-          var sample = (movedY && display.wheelDY && movedY / display.wheelDY) ||
-            (movedX && display.wheelDX && movedX / display.wheelDX);
-          display.wheelStartX = display.wheelStartY = null;
-          if (!sample) return;
-          wheelPixelsPerUnit = (wheelPixelsPerUnit * wheelSamples + sample) / (wheelSamples + 1);
-          ++wheelSamples;
-        }, 200);
-      } else {
-        display.wheelDX += dx; display.wheelDY += dy;
+  } else if (to >= display.viewTo) { // Bottom overlap
+    var cut$1 = viewCuttingPoint(cm, from, from, -1)
+    if (cut$1) {
+      display.view = display.view.slice(0, cut$1.index)
+      display.viewTo = cut$1.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)
+    }
+  }
+
+  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
+}
+
+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} }
+  var n = cm.display.viewFrom
+  for (var i = 0; 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
+  }
+  return {index: index, lineN: newN}
+}
+
+// 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
+}
+
+// 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
+}
+
+// HIGHLIGHT WORKER
+
+function startWorker(cm, time) {
+  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.viewTo) { return }
+  var end = +new Date + cm.options.workTime
+  var state = copyState(doc.mode, getStateBefore(cm, doc.frontier))
+  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, tooLong = line.text.length > cm.options.maxHighlightLength
+      var highlighted = highlightLine(cm, line, tooLong ? copyState(doc.mode, state) : 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) { changedLines.push(doc.frontier) }
+      line.stateAfter = tooLong ? state : copyState(doc.mode, state)
+    } else {
+      if (line.text.length <= cm.options.maxHighlightLength)
+        { processLine(cm, line.text, state) }
+      line.stateAfter = doc.frontier % 5 == 0 ? copyState(doc.mode, state) : null
+    }
+    ++doc.frontier
+    if (+new Date > end) {
+      startWorker(cm, cm.options.workDelay)
+      return true
+    }
+  })
+  if (changedLines.length) { runInOp(cm, function () {
+    for (var i = 0; i < changedLines.length; i++)
+      { regLineChange(cm, changedLines[i], "text") }
+  }) }
+}
+
+// DISPLAY DRAWING
+
+var DisplayUpdate = function(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 () {
+    var this$1 = this;
+
+  for (var i = 0; i < this.events.length; i++)
+    { signal.apply(null, this$1.events[i]) }
+};
+
+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
+  }
+}
+
+// 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 (update.editorIsHidden) {
+    resetView(cm)
+    return false
+  }
+
+  // Bail out if the visible area is already rendered and nothing changed.
+  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 }
+
+  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(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 = visualLineNo(cm.doc, from)
+    to = visualLineEndNo(cm.doc, to)
+  }
+
+  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.lastWrapHeight = update.wrapperHeight
+    display.lastWrapWidth = update.wrapperWidth
+    startWorker(cm, 400)
+  }
+
+  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)
+    updateScrollbars(cm, barMeasure)
+    setDocumentHeight(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)
+    updateScrollbars(cm, barMeasure)
+    setDocumentHeight(cm, barMeasure)
+    update.finish()
+  }
+}
+
+// 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
+  var container = display.lineDiv, cur = container.firstChild
+
+  function rm(node) {
+    var next = node.nextSibling
+    // Works around a throw-scroll bug in OS X Webkit
+    if (webkit && mac && cm.display.currentWheelTarget == node)
+      { node.style.display = "none" }
+    else
+      { node.parentNode.removeChild(node) }
+    return next
+  }
+
+  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)
       }
-    }
-  }
-
-  function doHandleBinding(cm, bound, dropShift) {
-    if (typeof bound == "string") {
-      bound = commands[bound];
-      if (!bound) return false;
-    }
-    // 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;
-    try {
-      if (isReadOnly(cm)) cm.state.suppressEdits = true;
-      if (dropShift) doc.sel.shift = false;
-      done = bound(cm) != Pass;
-    } finally {
-      doc.sel.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;
-  }
-
-  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);
+      if (updateNumber) {
+        removeChildren(lineView.lineNumber)
+        lineView.lineNumber.appendChild(document.createTextNode(lineNumberFor(cm.options, lineN)))
       }
-    }, 50);
-
-    var name = keyName(e, true), handled = false;
-    if (!name) return false;
-    var keymaps = allKeyMaps(cm);
-
-    if (e.shiftKey) {
-      // 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);
-                });
+      cur = lineView.node.nextSibling
+    }
+    lineN += lineView.size
+  }
+  while (cur) { cur = rm(cur) }
+}
+
+function updateGutterSpace(cm) {
+  var width = cm.display.gutters.offsetWidth
+  cm.display.sizer.style.marginLeft = width + "px"
+}
+
+function setDocumentHeight(cm, measure) {
+  cm.display.sizer.style.minHeight = measure.docHeight + "px"
+  cm.display.heightForcer.style.top = measure.docHeight + "px"
+  cm.display.gutters.style.height = (measure.docHeight + cm.display.barHeight + scrollGap(cm)) + "px"
+}
+
+// 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)
+  var i = 0
+  for (; i < specs.length; ++i) {
+    var gutterClass = specs[i]
+    var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass))
+    if (gutterClass == "CodeMirror-linenumbers") {
+      cm.display.lineGutter = gElt
+      gElt.style.width = (cm.display.lineNumWidth || 1) + "px"
+    }
+  }
+  gutters.style.display = i ? "" : "none"
+  updateGutterSpace(cm)
+}
+
+// Make sure the gutters options contains the element
+// "CodeMirror-linenumbers" when the lineNumbers option is true.
+function setGuttersForLineNumbers(options) {
+  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)
+  }
+}
+
+// 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) {
+    var this$1 = this;
+
+    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$1.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() {
+    var this$1 = this;
+
+    var out = []
+    for (var i = 0; i < this.ranges.length; i++)
+      { out[i] = new Range(copyPos(this$1.ranges[i].anchor), copyPos(this$1.ranges[i].head)) }
+    return new Selection(out, this.primIndex)
+  },
+  somethingSelected: function() {
+    var this$1 = this;
+
+    for (var i = 0; i < this.ranges.length; i++)
+      { if (!this$1.ranges[i].empty()) { return true } }
+    return false
+  },
+  contains: function(pos, end) {
+    var this$1 = this;
+
+    if (!end) { end = pos }
+    for (var i = 0; i < this.ranges.length; i++) {
+      var range = this$1.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)
+}
+
+// Compute the position of the end of a change (its 'to' property
+// refers to the pre-change end).
+function changeEnd(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))
+}
+
+// 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)
+}
+
+// Used to get the editor into a consistent state again when options change.
+
+function loadMode(cm) {
+  cm.doc.mode = 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 }
+  })
+  cm.doc.frontier = cm.doc.first
+  startWorker(cm, 100)
+  cm.state.modeGen++
+  if (cm.curOp) { regChange(cm) }
+}
+
+// DOCUMENT DATA STRUCTURE
+
+// 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) {
+    var result = []
+    for (var i = start; 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
+
+  // 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.
+    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) }
+  } else if (firstLine == lastLine) {
+    if (text.length == 1) {
+      update(firstLine, firstLine.text.slice(0, from.ch) + lastText + firstLine.text.slice(to.ch), lastSpans)
+    } else {
+      var added$1 = linesFor(1, text.length - 1)
+      added$1.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$1)
+    }
+  } else if (text.length == 1) {
+    update(firstLine, firstLine.text.slice(0, from.ch) + text[0] + lastLine.text.slice(to.ch), spansFor(0))
+    doc.remove(from.line + 1, nlines)
+  } else {
+    update(firstLine, firstLine.text.slice(0, from.ch) + text[0], spansFor(0))
+    update(lastLine, lastText + lastLine.text.slice(to.ch), lastSpans)
+    var added$2 = linesFor(1, text.length - 1)
+    if (nlines > 1) { doc.remove(from.line + 1, nlines - 1) }
+    doc.insert(from.line + 1, added$2)
+  }
+
+  signalLater(doc, "change", doc, change)
+}
+
+// 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) {
+      var rel = doc.linked[i]
+      if (rel.doc == skip) { continue }
+      var shared = sharedHist && rel.sharedHist
+      if (sharedHistOnly && !shared) { continue }
+      f(rel.doc, shared)
+      propagate(rel.doc, doc, shared)
+    } }
+  }
+  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) { findMaxLine(cm) }
+  cm.options.mode = doc.modeOption
+  regChange(cm)
+}
+
+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 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) { return attachLocalSpans(doc, histChange, change.from.line, change.to.line + 1); }, true)
+  return histChange
+}
+
+// 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, or 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
+  var last
+
+  if ((hist.lastOp == opId ||
+       hist.lastOrigin == change.origin && change.origin &&
+       ((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
+    last = lst(cur.changes)
+    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)
     } else {
-      handled = lookupKey(name, keymaps, 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;
-  }
-
-  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;
-  }
-
-  var lastStoppedKey = null;
-  function onKeyDown(e) {
-    var cm = this;
-    if (!cm.state.focused) onFocus(cm);
-    if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
-    if (ie && e.keyCode == 27) e.returnValue = false;
-    var code = e.keyCode;
-    // IE does strange things with escape.
-    cm.doc.sel.shift = code == 16 || e.shiftKey;
-    // First give onKeyEvent option a chance to handle this.
-    var handled = handleKeyBinding(cm, e);
-    if (opera) {
-      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("");
-    }
-  }
-
-  function onKeyPress(e) {
-    var cm = this;
-    if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) 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;
-    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);
-  }
-
-  function onFocus(cm) {
-    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";
-      if (!cm.curOp) {
-        resetInput(cm, true);
-        if (webkit) setTimeout(bind(resetInput, cm, true), 0); // Issue #1730
+      // Add new sub-event
+      cur.changes.push(historyChangeFromChange(doc, change))
+    }
+  } 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}
+    hist.done.push(cur)
+    while (hist.done.length > hist.undoDepth) {
+      hist.done.shift()
+      if (!hist.done[0].ranges) { hist.done.shift() }
+    }
+  }
+  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 }
+  var out
+  for (var i = 0; i < spans.length; ++i) {
+    if (spans[i].marker.explicitlyCleared) { if (!out) { out = spans.slice(0, i) } }
+    else if (out) { out.push(spans[i]) }
+  }
+  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 }
+  var nw = []
+  for (var i = 0; i < change.text.length; ++i)
+    { nw.push(removeClearedSpans(found[i])) }
+  return nw
+}
+
+// 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)
+  if (!old) { return stretched }
+  if (!stretched) { return old }
+
+  for (var i = 0; i < old.length; ++i) {
+    var oldCur = old[i], stretchCur = stretched[i]
+    if (oldCur && stretchCur) {
+      spans: for (var j = 0; j < stretchCur.length; ++j) {
+        var span = stretchCur[j]
+        for (var k = 0; k < oldCur.length; ++k)
+          { if (oldCur[k].marker == span.marker) { continue spans } }
+        oldCur.push(span)
       }
-    }
-    slowPoll(cm);
-    restartBlink(cm);
-  }
-  function onBlur(cm) {
-    if (cm.state.focused) {
-      signal(cm, "blur", cm);
-      cm.state.focused = false;
-      cm.display.wrapper.className = cm.display.wrapper.className.replace(" CodeMirror-focused", "");
-    }
-    clearInterval(cm.display.blinker);
-    setTimeout(function() {if (!cm.state.focused) cm.doc.sel.shift = false;}, 150);
-  }
-
-  var detectingSelectAll;
-  function onContextMenu(cm, e) {
-    if (signalDOMEvent(cm, e, "contextmenu")) return;
-    var display = cm.display, sel = cm.doc.sel;
-    if (eventInWidget(display, e) || contextMenuInGutter(cm, e)) return;
-
-    var pos = posFromMouse(cm, e), scrollPos = display.scroller.scrollTop;
-    if (!pos || opera) 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 && (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 = "\u200b" + (posEq(sel.from, sel.to) ? "" : display.input.value);
-        display.prevInput = "\u200b";
-        display.input.selectionStart = 1; display.input.selectionEnd = extval.length;
+    } else if (stretchCur) {
+      old[i] = stretchCur
+    }
+  }
+  return old
+}
+
+// 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, instantiateSel) {
+  var copy = []
+  for (var i = 0; i < events.length; ++i) {
+    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 = (void 0)
+      newChanges.push({from: change.from, to: change.to, text: change.text})
+      if (newGroup) { for (var prop in change) { if (m = prop.match(/^spans_(\d+)$/)) {
+        if (indexOf(newGroup, Number(m[1])) > -1) {
+          lst(newChanges)[prop] = change[prop]
+          delete change[prop]
+        }
+      } } }
+    }
+  }
+  return copy
+}
+
+// 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
       }
     }
-    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);
+    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) {
+  var out = []
+  for (var 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, options) {
+  var obj = {
+    ranges: sel.ranges,
+    update: function(ranges) {
+      var this$1 = this;
+
+      this.ranges = []
+      for (var i = 0; i < ranges.length; i++)
+        { this$1.ranges[i] = new Range(clipPos(doc, ranges[i].anchor),
+                                   clipPos(doc, ranges[i].head)) }
+    },
+    origin: options && options.origin
+  }
+  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, options) }
+
+  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 old = sel.ranges.length == doc.sel.ranges.length && doc.sel.ranges[i]
+    var newAnchor = skipAtomic(doc, range.anchor, old && old.anchor, bias, mayClear)
+    var newHead = skipAtomic(doc, range.head, old && old.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
+}
+
+function skipAtomicInner(doc, pos, oldPos, dir, mayClear) {
+  var line = getLine(doc, pos.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 <= pos.ch : sp.from < pos.ch)) &&
+        (sp.to == null || (m.inclusiveRight ? sp.to >= pos.ch : sp.to > pos.ch))) {
+      if (mayClear) {
+        signal(m, "beforeCursorEnter")
+        if (m.explicitlyCleared) {
+          if (!line.markedSpans) { break }
+          else {--i; continue}
+        }
+      }
+      if (!m.atomic) { continue }
+
+      if (oldPos) {
+        var near = m.find(dir < 0 ? 1 : -1), diff = (void 0)
+        if (dir < 0 ? m.inclusiveRight : m.inclusiveLeft)
+          { near = movePos(doc, near, -dir, near && near.line == pos.line ? line : null) }
+        if (near && near.line == pos.line && (diff = cmp(near, oldPos)) && (dir < 0 ? diff < 0 : diff > 0))
+          { return skipAtomicInner(doc, near, pos, dir, mayClear) }
       }
-    }
 
-    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);
+      var far = m.find(dir < 0 ? -1 : 1)
+      if (dir < 0 ? m.inclusiveLeft : m.inclusiveRight)
+        { far = movePos(doc, far, dir, far.line == pos.line ? line : null) }
+      return far ? skipAtomicInner(doc, far, pos, dir, mayClear) : null
+    }
+  } }
+  return pos
+}
+
+// Ensure a given position is not inside an atomic range.
+function skipAtomic(doc, pos, oldPos, bias, mayClear) {
+  var dir = bias || 1
+  var found = skipAtomicInner(doc, pos, oldPos, dir, mayClear) ||
+      (!mayClear && skipAtomicInner(doc, pos, oldPos, dir, true)) ||
+      skipAtomicInner(doc, pos, oldPos, -dir, mayClear) ||
+      (!mayClear && skipAtomicInner(doc, pos, oldPos, -dir, true))
+  if (!found) {
+    doc.cantEdit = true
+    return Pos(doc.first, 0)
+  }
+  return found
+}
+
+function movePos(doc, pos, dir, line) {
+  if (dir < 0 && pos.ch == 0) {
+    if (pos.line > doc.first) { return clipPos(doc, Pos(pos.line - 1)) }
+    else { return null }
+  } else if (dir > 0 && pos.ch == (line || getLine(doc, pos.line)).text.length) {
+    if (pos.line < doc.first + doc.size - 1) { return Pos(pos.line + 1, 0) }
+    else { return null }
+  } else {
+    return new Pos(pos.line, pos.ch + dir)
+  }
+}
+
+function selectAll(cm) {
+  cm.setSelection(Pos(cm.firstLine(), 0), Pos(cm.lastLine()), sel_dontScroll)
+}
+
+// UPDATING
+
+// Allow "beforeChange" event handlers to influence a change
+function filterChange(doc, change, update) {
+  var obj = {
+    canceled: false,
+    from: change.from,
+    to: change.to,
+    text: change.text,
+    origin: change.origin,
+    cancel: function () { return obj.canceled = true; }
+  }
+  if (update) { obj.update = function (from, to, text, origin) {
+    if (from) { obj.from = clipPos(doc, from) }
+    if (to) { obj.to = clipPos(doc, to) }
+    if (text) { obj.text = text }
+    if (origin !== undefined) { obj.origin = origin }
+  } }
+  signal(doc, "beforeChange", doc, obj)
+  if (doc.cm) { signal(doc.cm, "beforeChange", doc.cm, obj) }
+
+  if (obj.canceled) { return null }
+  return {from: obj.from, to: obj.to, text: obj.text, origin: obj.origin}
+}
+
+// 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, ignoreReadOnly) }
+    if (doc.cm.state.suppressEdits) { return }
+  }
+
+  if (hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange")) {
+    change = filterChange(doc, change, true)
+    if (!change) { return }
+  }
+
+  // Possibly split or suppress the update based on the presence
+  // 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 >= 0; --i)
+      { makeChangeInner(doc, {from: split[i].from, to: split[i].to, text: i ? [""] : change.text}) }
+  } else {
+    makeChangeInner(doc, change)
+  }
+}
+
+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 = []
+
+  linkedDocs(doc, function (doc, sharedHist) {
+    if (!sharedHist && indexOf(rebased, doc.history) == -1) {
+      rebaseHist(doc.history, change)
+      rebased.push(doc.history)
+    }
+    makeChangeSingleDoc(doc, change, null, stretchSpansOverChange(doc, change))
+  })
+}
+
+// Revert a change stored in a document's history.
+function makeChangeFromHistory(doc, type, allowSelectionOnly) {
+  if (doc.cm && doc.cm.state.suppressEdits && !allowSelectionOnly) { 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)
+  var i = 0
+  for (; 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
+
+  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 }
   }
 
-  // UPDATING
+  // 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 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));
-  };
+  var filter = hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange")
 
-  // 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);
+  var loop = function ( i ) {
+    var change = event.changes[i]
+    change.origin = type
+    if (filter && !filterChange(doc, change, false)) {
+      source.length = 0
+      return {}
     }
-    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};
+    antiChanges.push(historyChangeFromChange(doc, change))
 
-    // 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 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 = []
 
-      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)};
-  }
-
-  function filterChange(doc, change, update) {
-    var obj = {
-      canceled: false,
-      from: change.from,
-      to: change.to,
-      text: change.text,
-      origin: change.origin,
-      cancel: function() { this.canceled = true; }
-    };
-    if (update) obj.update = function(from, to, text, origin) {
-      if (from) this.from = clipPos(doc, from);
-      if (to) this.to = clipPos(doc, to);
-      if (text) this.text = text;
-      if (origin !== undefined) this.origin = origin;
-    };
-    signal(doc, "beforeChange", doc, obj);
-    if (doc.cm) signal(doc.cm, "beforeChange", doc.cm, obj);
-
-    if (obj.canceled) return null;
-    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) {
-    if (doc.cm) {
-      if (!doc.cm.curOp) return operation(doc.cm, makeChange)(doc, change, selUpdate, ignoreReadOnly);
-      if (doc.cm.state.suppressEdits) return;
-    }
-
-    if (hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange")) {
-      change = filterChange(doc, change, true);
-      if (!change) return;
-    }
-
-    // Possibly split or suppress the update based on the presence
-    // 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);
-    } else {
-      makeChangeNoReadonly(doc, change, selUpdate);
-    }
-  }
-
-  function makeChangeNoReadonly(doc, change, selUpdate) {
-    if (change.text.length == 1 && change.text[0] == "" && posEq(change.from, change.to)) return;
-    var selAfter = computeSelAfterChange(doc, change, selUpdate);
-    addToHistory(doc, change, selAfter, doc.cm ? doc.cm.curOp.id : NaN);
-
-    makeChangeSingleDoc(doc, change, selAfter, stretchSpansOverChange(doc, change));
-    var rebased = [];
-
-    linkedDocs(doc, function(doc, sharedHist) {
+    // Propagate to the linked documents
+    linkedDocs(doc, function (doc, sharedHist) {
       if (!sharedHist && indexOf(rebased, doc.history) == -1) {
-        rebaseHist(doc.history, change);
-        rebased.push(doc.history);
+        rebaseHist(doc.history, change)
+        rebased.push(doc.history)
       }
-      makeChangeSingleDoc(doc, change, null, stretchSpansOverChange(doc, change));
-    });
-  }
-
-  function makeChangeFromHistory(doc, type) {
-    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 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);
-    hist.generation = event.generation || ++hist.maxGeneration;
-
-    var filter = hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange");
+      makeChangeSingleDoc(doc, change, null, mergeOldSpans(doc, change))
+    })
+  };
 
-    for (var i = event.changes.length - 1; i >= 0; --i) {
-      var change = event.changes[i];
-      change.origin = type;
-      if (filter && !filterChange(doc, change, false)) {
-        (type == "undo" ? hist.done : hist.undone).length = 0;
-        return;
+  for (var i$1 = event.changes.length - 1; i$1 >= 0; --i$1) {
+    var returned = loop( i$1 );
+
+    if ( returned ) return returned.v;
+  }
+}
+
+// Sub-views need their line numbers shifted when text is added
+// above or below them in the parent document.
+function shiftDoc(doc, distance) {
+  if (distance == 0) { return }
+  doc.first += distance
+  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) }
+
+  if (change.to.line < doc.first) {
+    shiftDoc(doc, change.text.length - 1 - (change.to.line - change.from.line))
+    return
+  }
+  if (change.from.line > doc.lastLine()) { return }
+
+  // Clip the change to the size of this doc
+  if (change.from.line < doc.first) {
+    var shift = change.text.length - 1 - (doc.first - change.from.line)
+    shiftDoc(doc, shift)
+    change = {from: Pos(doc.first, 0), to: Pos(change.to.line + shift, change.to.ch),
+              text: [lst(change.text)], origin: change.origin}
+  }
+  var last = doc.lastLine()
+  if (change.to.line > last) {
+    change = {from: change.from, to: Pos(last, getLine(doc, last).text.length),
+              text: [change.text[0]], origin: change.origin}
+  }
+
+  change.removed = getBetween(doc, change.from, change.to)
+
+  if (!selAfter) { selAfter = computeSelAfterChange(doc, change) }
+  if (doc.cm) { makeChangeSingleDocInEditor(doc.cm, change, spans) }
+  else { updateDoc(doc, change, spans) }
+  setSelectionNoUndo(doc, selAfter, sel_dontScroll)
+}
+
+// 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(getLine(doc, from.line)))
+    doc.iter(checkWidthStart, to.line + 1, function (line) {
+      if (line == display.maxLine) {
+        recomputeMaxLength = true
+        return true
       }
-
-      anti.changes.push(historyChangeFromChange(doc, change));
-
-      var after = i ? computeSelAfterChange(doc, change, null)
-                    : {anchor: event.anchorBefore, head: event.headBefore};
-      makeChangeSingleDoc(doc, change, after, mergeOldSpans(doc, change));
-      var rebased = [];
-
-      linkedDocs(doc, function(doc, sharedHist) {
-        if (!sharedHist && indexOf(rebased, doc.history) == -1) {
-          rebaseHist(doc.history, change);
-          rebased.push(doc.history);
-        }
-        makeChangeSingleDoc(doc, change, null, mergeOldSpans(doc, change));
-      });
-    }
+    })
   }
 
-  function shiftDoc(doc, distance) {
-    function shiftPos(pos) {return Pos(pos.line + distance, pos.ch);}
-    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);
-  }
-
-  function makeChangeSingleDoc(doc, change, selAfter, spans) {
-    if (doc.cm && !doc.cm.curOp)
-      return operation(doc.cm, makeChangeSingleDoc)(doc, change, selAfter, spans);
-
-    if (change.to.line < doc.first) {
-      shiftDoc(doc, change.text.length - 1 - (change.to.line - change.from.line));
-      return;
-    }
-    if (change.from.line > doc.lastLine()) return;
-
-    // Clip the change to the size of this doc
-    if (change.from.line < doc.first) {
-      var shift = change.text.length - 1 - (doc.first - change.from.line);
-      shiftDoc(doc, shift);
-      change = {from: Pos(doc.first, 0), to: Pos(change.to.line + shift, change.to.ch),
-                text: [lst(change.text)], origin: change.origin};
-    }
-    var last = doc.lastLine();
-    if (change.to.line > last) {
-      change = {from: change.from, to: Pos(last, getLine(doc, last).text.length),
-                text: [change.text[0]], origin: change.origin};
-    }
+  if (doc.sel.contains(change.from, change.to) > -1)
+    { signalCursorActivity(cm) }
 
-    change.removed = getBetween(doc, change.from, change.to);
+  updateDoc(doc, change, spans, estimateHeight(cm))
 
-    if (!selAfter) selAfter = computeSelAfterChange(doc, change, null);
-    if (doc.cm) makeChangeSingleDocInEditor(doc.cm, change, spans, selAfter);
-    else updateDoc(doc, change, spans, selAfter);
+  if (!cm.options.lineWrapping) {
+    doc.iter(checkWidthStart, from.line + change.text.length, function (line) {
+      var len = lineLength(line)
+      if (len > display.maxLineLength) {
+        display.maxLine = line
+        display.maxLineLength = len
+        display.maxLineChanged = true
+        recomputeMaxLength = false
+      }
+    })
+    if (recomputeMaxLength) { cm.curOp.updateMaxLine = true }
   }
 
-  function makeChangeSingleDocInEditor(cm, change, spans, selAfter) {
-    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)));
-      doc.iter(checkWidthStart, to.line + 1, function(line) {
-        if (line == display.maxLine) {
-          recomputeMaxLength = true;
-          return true;
-        }
-      });
-    }
-
-    if (!posLess(doc.sel.head, change.from) && !posLess(change.to, doc.sel.head))
-      cm.curOp.cursorActivity = true;
+  // Adjust frontier, schedule worker
+  doc.frontier = Math.min(doc.frontier, from.line)
+  startWorker(cm, 400)
 
-    updateDoc(doc, change, spans, selAfter, estimateHeight(cm));
+  var lendiff = change.text.length - (to.line - from.line) - 1
+  // Remember that these lines changed, for updating the display
+  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) }
 
-    if (!cm.options.lineWrapping) {
-      doc.iter(checkWidthStart, from.line + change.text.length, function(line) {
-        var len = lineLength(doc, line);
-        if (len > display.maxLineLength) {
-          display.maxLine = line;
-          display.maxLineLength = len;
-          display.maxLineChanged = true;
-          recomputeMaxLength = false;
-        }
-      });
-      if (recomputeMaxLength) cm.curOp.updateMaxLine = true;
-    }
-
-    // Adjust frontier, schedule worker
-    doc.frontier = Math.min(doc.frontier, from.line);
-    startWorker(cm, 400);
-
-    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;
-    }
-  }
-
-  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);
-  }
-  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;
-        }
+  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 (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})
+}
+
+// Rebasing/resetting history to deal with externally-sourced changes
+
+function rebaseHistSelSingle(pos, from, to, diff) {
+  if (to < pos.line) {
+    pos.line += diff
+  } else if (from < pos.line) {
+    pos.line = from
+    pos.ch = 0
+  }
+}
+
+// Tries to rebase an array of history events given a change in the
+// document. If the change touches the same lines as the event, the
+// event, and everything 'behind' it, is discarded. If the change is
+// before the event, the event's positions are updated. Uses a
+// copy-on-write scheme for the positions, to avoid having to
+// reallocate them all on every rebase, but also avoid problems with
+// shared position objects being unsafely updated.
+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)
       }
-      setSelection(doc, anchor, pos, bias);
-    } else {
-      setSelection(doc, pos, other || pos, bias);
-    }
-    if (doc.cm) doc.cm.curOp.userSelChange = true;
-  }
-
-  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;
-    if (bias == null) bias = posLess(head, sel.head) ? -1 : 1;
-    // 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");
-  }
-
-  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;
+      continue
+    }
+    for (var j$1 = 0; j$1 < sub.changes.length; ++j$1) {
+      var cur = sub.changes[j$1]
+      if (to < cur.from.line) {
+        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 (!ok) {
+      array.splice(0, i + 1)
+      i = 0
+    }
+  }
+}
+
+function rebaseHist(hist, change) {
+  var from = change.from.line, to = change.to.line, diff = change.text.length - (to - from) - 1
+  rebaseHistArray(hist.done, from, to, diff)
+  rebaseHistArray(hist.undone, from, to, diff)
+}
+
+// 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) && doc.cm) { regLineChange(doc.cm, no, changeType) }
+  return line
+}
+
+// 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) {
+  var this$1 = this;
+
+  this.lines = lines
+  this.parent = null
+  var height = 0
+  for (var i = 0; i < lines.length; ++i) {
+    lines[i].parent = this$1
+    height += lines[i].height
+  }
+  this.height = height
+}
+
+LeafChunk.prototype = {
+  chunkSize: function() { return this.lines.length },
+  // Remove the n lines at offset 'at'.
+  removeInner: function(at, n) {
+    var this$1 = this;
+
+    for (var i = at, e = at + n; i < e; ++i) {
+      var line = this$1.lines[i]
+      this$1.height -= line.height
+      cleanUpLine(line)
+      signalLater(line, "delete")
+    }
+    this.lines.splice(at, n)
+  },
+  // Helper used to collapse a small branch into a single leaf.
+  collapse: function(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) {
+    var this$1 = this;
+
+    this.height += height
+    this.lines = this.lines.slice(0, at).concat(lines).concat(this.lines.slice(at))
+    for (var i = 0; i < lines.length; ++i) { lines[i].parent = this$1 }
+  },
+  // Used to iterate over a part of the tree.
+  iterN: function(at, n, op) {
+    var this$1 = this;
+
+    for (var e = at + n; at < e; ++at)
+      { if (op(this$1.lines[at])) { return true } }
+  }
+}
+
+function BranchChunk(children) {
+  var this$1 = this;
+
+  this.children = children
+  var size = 0, height = 0
+  for (var i = 0; i < children.length; ++i) {
+    var ch = children[i]
+    size += ch.chunkSize(); height += ch.height
+    ch.parent = this$1
+  }
+  this.size = size
+  this.height = height
+  this.parent = null
+}
+
+BranchChunk.prototype = {
+  chunkSize: function() { return this.size },
+  removeInner: function(at, n) {
+    var this$1 = this;
+
+    this.size -= n
+    for (var i = 0; i < this.children.length; ++i) {
+      var child = this$1.children[i], sz = child.chunkSize()
+      if (at < sz) {
+        var rm = Math.min(n, sz - at), oldHeight = child.height
+        child.removeInner(at, rm)
+        this$1.height -= oldHeight - child.height
+        if (sz == rm) { this$1.children.splice(i--, 1); child.parent = null }
+        if ((n -= rm) == 0) { break }
+        at = 0
+      } else { at -= sz }
+    }
+    // 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)]
+      this.children[0].parent = this
+    }
+  },
+  collapse: function(lines) {
+    var this$1 = this;
+
+    for (var i = 0; i < this.children.length; ++i) { this$1.children[i].collapse(lines) }
+  },
+  insertInner: function(at, lines, height) {
+    var this$1 = this;
+
+    this.size += lines.length
+    this.height += height
+    for (var i = 0; i < this.children.length; ++i) {
+      var child = this$1.children[i], sz = child.chunkSize()
+      if (at <= sz) {
+        child.insertInner(at, lines, height)
+        if (child.lines && child.lines.length > 50) {
+          // To avoid memory thrashing when child.lines is huge (e.g. first view of a large file), it's never spliced.
+          // Instead, small slices are taken. They're taken in order because sequential memory accesses are fastest.
+          var remaining = child.lines.length % 25 + 25
+          for (var pos = remaining; pos < child.lines.length;) {
+            var leaf = new LeafChunk(child.lines.slice(pos, pos += 25))
+            child.height -= leaf.height
+            this$1.children.splice(++i, 0, leaf)
+            leaf.parent = this$1
           }
+          child.lines = child.lines.slice(0, remaining)
+          this$1.maybeSpill()
         }
+        break
       }
-      return curPos;
+      at -= sz
     }
-  }
-
-  // SCROLLING
-
-  function scrollCursorIntoView(cm) {
-    var coords = scrollPosIntoView(cm, cm.doc.sel.head, null, cm.options.cursorScrollMargin);
-    if (!cm.state.focused) return;
-    var display = cm.display, box = getRect(display.sizer), 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";
+  },
+  // When a node has grown, check whether it should be split.
+  maybeSpill: function() {
+    if (this.children.length <= 10) { return }
+    var me = this
+    do {
+      var spilled = me.children.splice(me.children.length - 5, 5)
+      var sibling = new BranchChunk(spilled)
+      if (!me.parent) { // Become the parent node
+        var copy = new BranchChunk(me.children)
+        copy.parent = me
+        me.children = [copy, sibling]
+        me = copy
+     } else {
+        me.size -= sibling.size
+        me.height -= sibling.height
+        var myIndex = indexOf(me.parent.children, me)
+        me.parent.children.splice(myIndex + 1, 0, sibling)
+      }
+      sibling.parent = me.parent
+    } while (me.children.length > 10)
+    me.parent.maybeSpill()
+  },
+  iterN: function(at, n, op) {
+    var this$1 = this;
+
+    for (var i = 0; i < this.children.length; ++i) {
+      var child = this$1.children[i], sz = child.chunkSize()
+      if (at < sz) {
+        var used = Math.min(n, sz - at)
+        if (child.iterN(at, used, op)) { return true }
+        if ((n -= used) == 0) { break }
+        at = 0
+      } else { at -= sz }
+    }
+  }
+}
+
+// Line widgets are block elements displayed above or below a line.
+
+function LineWidget(doc, node, options) {
+  var this$1 = this;
+
+  if (options) { for (var opt in options) { if (options.hasOwnProperty(opt))
+    { this$1[opt] = options[opt] } } }
+  this.doc = doc
+  this.node = node
+}
+eventMixin(LineWidget)
+
+function adjustScrollWhenAboveVisible(cm, line, diff) {
+  if (heightAtLine(line) < ((cm.curOp && cm.curOp.scrollTop) || cm.doc.scrollTop))
+    { addToScrollPos(cm, null, diff) }
+}
+
+LineWidget.prototype.clear = function() {
+  var this$1 = this;
+
+  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$1) { ws.splice(i--, 1) } }
+  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(line, line.height + diff)
+  if (cm) { runInOp(cm, function () {
+    cm.curOp.forceUpdate = true
+    adjustScrollWhenAboveVisible(cm, line, diff)
+  }) }
+}
+
+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 (cm && !lineIsHidden(doc, line)) {
+      var aboveVisible = heightAtLine(line) < doc.scrollTop
+      updateLineHeight(line, line.height + widgetHeight(widget))
+      if (aboveVisible) { addToScrollPos(cm, null, widget.height) }
+      cm.curOp.forceUpdate = true
+    }
+    return true
+  })
+  return widget
+}
+
+// TEXTMARKERS
+
+// 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.
+
+// 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
+
+function TextMarker(doc, type) {
+  this.lines = []
+  this.type = type
+  this.doc = doc
+  this.id = ++nextMarkerId
+}
+eventMixin(TextMarker)
+
+// Clear the marker.
+TextMarker.prototype.clear = function() {
+  var this$1 = this;
+
+  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$1.lines[i]
+    var span = getMarkedSpanFor(line.markedSpans, this$1)
+    if (cm && !this$1.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 && this$1.collapsed && !lineIsHidden(this$1.doc, line) && cm)
+      { updateLineHeight(line, textHeight(cm.display)) }
+  }
+  if (cm && this.collapsed && !cm.options.lineWrapping) { for (var i$1 = 0; i$1 < this.lines.length; ++i$1) {
+    var visual = visualLine(this$1.lines[i$1]), len = lineLength(visual)
+    if (len > cm.display.maxLineLength) {
+      cm.display.maxLine = visual
+      cm.display.maxLineLength = len
+      cm.display.maxLineChanged = true
+    }
+  } }
+
+  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.doc) }
+  }
+  if (cm) { signalLater(cm, "markerCleared", cm, this) }
+  if (withOp) { endOperation(cm) }
+  if (this.parent) { this.parent.clear() }
+}
+
+// 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) {
+  var this$1 = this;
+
+  if (side == null && this.type == "bookmark") { side = 1 }
+  var from, to
+  for (var i = 0; i < this.lines.length; ++i) {
+    var line = this$1.lines[i]
+    var span = getMarkedSpanFor(line.markedSpans, this$1)
+    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 }
+    }
+  }
+  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(-1, true), widget = this, cm = this.doc.cm
+  if (!pos || !cm) { return }
+  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
+    }
+    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) {
+  if (!this.lines.length && this.doc.cm) {
+    var op = this.doc.cm.curOp
+    if (!op.maybeHiddenMarkers || indexOf(op.maybeHiddenMarkers, this) == -1)
+      { (op.maybeUnhiddenMarkers || (op.maybeUnhiddenMarkers = [])).push(this) }
+  }
+  this.lines.push(line)
+}
+TextMarker.prototype.detachLine = function(line) {
+  this.lines.splice(indexOf(this.lines, line), 1)
+  if (!this.lines.length && this.doc.cm) {
+    var op = this.doc.cm.curOp
+    ;(op.maybeHiddenMarkers || (op.maybeHiddenMarkers = [])).push(this)
+  }
+}
+
+// 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), 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.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") }
+    seeCollapsedSpans()
+  }
+
+  if (marker.addToHistory)
+    { addChangeToHistory(doc, {from: from, to: to, origin: "markText"}, doc.sel, NaN) }
+
+  var curLine = from.line, cm = doc.cm, updateMaxLine
+  doc.iter(curLine, to.line + 1, function (line) {
+    if (cm && marker.collapsed && !cm.options.lineWrapping && visualLine(line) == cm.display.maxLine)
+      { updateMaxLine = true }
+    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) }
+  }) }
+
+  if (marker.clearOnEnter) { on(marker, "beforeCursorEnter", function () { return marker.clear(); }) }
+
+  if (marker.readOnly) {
+    seeReadOnlySpans()
+    if (doc.history.done.length || doc.history.undone.length)
+      { doc.clearHistory() }
+  }
+  if (marker.collapsed) {
+    marker.id = ++nextMarkerId
+    marker.atomic = true
+  }
+  if (cm) {
+    // Sync editor state
+    if (updateMaxLine) { cm.curOp.updateMaxLine = true }
+    if (marker.collapsed)
+      { regChange(cm, from.line, to.line + 1) }
+    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
+
+// A shared marker spans multiple linked documents. It is
+// implemented as a meta-marker-object controlling multiple normal
+// markers.
+function SharedTextMarker(markers, primary) {
+  var this$1 = this;
+
+  this.markers = markers
+  this.primary = primary
+  for (var i = 0; i < markers.length; ++i)
+    { markers[i].parent = this$1 }
+}
+eventMixin(SharedTextMarker)
+
+SharedTextMarker.prototype.clear = function() {
+  var this$1 = this;
+
+  if (this.explicitlyCleared) { return }
+  this.explicitlyCleared = true
+  for (var i = 0; i < this.markers.length; ++i)
+    { this$1.markers[i].clear() }
+  signalLater(this, "clear")
+}
+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.widgetNode
+  linkedDocs(doc, function (doc) {
+    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 } }
+    primary = lst(markers)
+  })
+  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) {
+  var loop = function ( i ) {
+    var marker = markers[i], linked = [marker.primary.doc]
+    linkedDocs(marker.primary.doc, function (d) { return 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)
       }
-      display.cursor.scrollIntoView(doScroll);
-      if (hidden) display.cursor.style.display = "none";
     }
-  }
+  };
 
-  function scrollPosIntoView(cm, pos, end, margin) {
-    if (margin == null) margin = 0;
-    for (;;) {
-      var changed = false, coords = cursorCoords(cm, pos);
-      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);
-        if (Math.abs(cm.doc.scrollTop - startTop) > 1) changed = true;
+  for (var i = 0; i < markers.length; i++) loop( i );
+}
+
+var nextDocId = 0
+var 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.cleanGeneration = 1
+  this.frontier = firstLine
+  var start = Pos(firstLine, 0)
+  this.sel = simpleSelection(start)
+  this.history = new History(null)
+  this.id = ++nextDocId
+  this.modeOption = mode
+  this.lineSep = lineSep
+  this.extend = false
+
+  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; 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 || this.lineSeparator())
+  },
+  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: 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
+    replaceRange(this, code, from, to, origin)
+  },
+  getRange: function(from, to, lineSep) {
+    var lines = getBetween(this, clipPos(this, from), clipPos(this, to))
+    if (lineSep === false) { return lines }
+    return lines.join(lineSep || this.lineSeparator())
+  },
+
+  getLine: function(line) {var l = this.getLineHandle(line); return l && l.text},
+
+  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(line)
+  },
+
+  lineCount: function() {return this.size},
+  firstLine: function() {return this.first},
+  lastLine: function() {return this.first + this.size - 1},
+
+  clipPos: function(pos) {return clipPos(this, pos)},
+
+  getCursor: function(start) {
+    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
+  },
+  listSelections: function() { return this.sel.ranges },
+  somethingSelected: function() {return this.sel.somethingSelected()},
+
+  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)
+  }),
+  extendSelections: docMethodOp(function(heads, options) {
+    extendSelections(this, clipPosArray(this, heads), options)
+  }),
+  extendSelectionsBy: docMethodOp(function(f, options) {
+    var heads = map(this.sel.ranges, f)
+    extendSelections(this, clipPosArray(this, heads), options)
+  }),
+  setSelections: docMethodOp(function(ranges, primary, options) {
+    var this$1 = this;
+
+    if (!ranges.length) { return }
+    var out = []
+    for (var i = 0; i < ranges.length; i++)
+      { out[i] = new Range(clipPos(this$1, ranges[i].anchor),
+                         clipPos(this$1, 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) {
+    var this$1 = this;
+
+    var ranges = this.sel.ranges, lines
+    for (var i = 0; i < ranges.length; i++) {
+      var sel = getBetween(this$1, 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 this$1 = this;
+
+    var parts = [], ranges = this.sel.ranges
+    for (var i = 0; i < ranges.length; i++) {
+      var sel = getBetween(this$1, ranges[i].from(), ranges[i].to())
+      if (lineSep !== false) { sel = sel.join(lineSep || this$1.lineSeparator()) }
+      parts[i] = sel
+    }
+    return parts
+  },
+  replaceSelection: function(code, collapse, origin) {
+    var dup = []
+    for (var i = 0; i < this.sel.ranges.length; i++)
+      { dup[i] = code }
+    this.replaceSelections(dup, collapse, origin || "+input")
+  },
+  replaceSelections: docMethodOp(function(code, collapse, origin) {
+    var this$1 = this;
+
+    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$1.splitLines(code[i]), origin: origin}
+    }
+    var newSel = collapse && collapse != "end" && computeReplacedSel(this, changes, collapse)
+    for (var i$1 = changes.length - 1; i$1 >= 0; i$1--)
+      { makeChange(this$1, changes[i$1]) }
+    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.extend = val},
+  getExtending: function() {return this.extend},
+
+  historySize: function() {
+    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$1 = 0; i$1 < hist.undone.length; i$1++) { if (!hist.undone[i$1].ranges) { ++undone } }
+    return {undo: done, redo: undone}
+  },
+  clearHistory: function() {this.history = new History(this.history.maxGeneration)},
+
+  markClean: function() {
+    this.cleanGeneration = this.changeGeneration(true)
+  },
+  changeGeneration: function(forceSplit) {
+    if (forceSplit)
+      { this.history.lastOp = this.history.lastSelOp = this.history.lastOrigin = null }
+    return this.history.generation
+  },
+  isClean: function (gen) {
+    return this.history.generation == (gen || this.cleanGeneration)
+  },
+
+  getHistory: function() {
+    return {done: copyHistoryArray(this.history.done),
+            undone: copyHistoryArray(this.history.undone)}
+  },
+  setHistory: function(histData) {
+    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)
+  },
+
+  setGutterMarker: docMethodOp(function(line, gutterID, value) {
+    return changeLine(this, line, "gutter", function (line) {
+      var markers = line.gutterMarkers || (line.gutterMarkers = {})
+      markers[gutterID] = value
+      if (!value && isEmpty(markers)) { line.gutterMarkers = null }
+      return true
+    })
+  }),
+
+  clearGutter: docMethodOp(function(gutterID) {
+    var this$1 = this;
+
+    var i = this.first
+    this.iter(function (line) {
+      if (line.gutterMarkers && line.gutterMarkers[gutterID]) {
+        changeLine(this$1, line, "gutter", function () {
+          line.gutterMarkers[gutterID] = null
+          if (isEmpty(line.gutterMarkers)) { line.gutterMarkers = null }
+          return true
+        })
       }
-      if (scrollPos.scrollLeft != null) {
-        setScrollLeft(cm, scrollPos.scrollLeft);
-        if (Math.abs(cm.doc.scrollLeft - startLeft) > 1) changed = true;
+      ++i
+    })
+  }),
+
+  lineInfo: function(line) {
+    var n
+    if (typeof line == "number") {
+      if (!isLine(this, line)) { return null }
+      n = line
+      line = getLine(this, line)
+      if (!line) { return null }
+    } else {
+      n = lineNo(line)
+      if (n == null) { return null }
+    }
+    return {line: n, handle: line, text: line.text, gutterMarkers: line.gutterMarkers,
+            textClass: line.textClass, bgClass: line.bgClass, wrapClass: line.wrapClass,
+            widgets: line.widgets}
+  },
+
+  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
       }
-      if (!changed) return coords;
+      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, options && options.type || "range")
+  },
+  setBookmark: function(pos, options) {
+    var realOpts = {replacedWith: options && (options.nodeType == null ? options.widget : options),
+                    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")
+  },
+  findMarksAt: function(pos) {
+    pos = clipPos(this, pos)
+    var markers = [], spans = getLine(this, pos.line).markedSpans
+    if (spans) { for (var i = 0; i < spans.length; ++i) {
+      var span = spans[i]
+      if ((span.from == null || span.from <= pos.ch) &&
+          (span.to == null || span.to >= pos.ch))
+        { markers.push(span.marker.parent || span.marker) }
+    } }
+    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 (!(span.to != null && lineNo == from.line && from.ch >= span.to ||
+              span.from == null && lineNo != from.line ||
+              span.from != null && 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) {
+      var sps = line.markedSpans
+      if (sps) { for (var i = 0; i < sps.length; ++i)
+        { if (sps[i].from != null) { markers.push(sps[i].marker) } } }
+    })
+    return markers
+  },
+
+  posFromIndex: function(off) {
+    var ch, lineNo = this.first, sepSize = this.lineSeparator().length
+    this.iter(function (line) {
+      var sz = line.text.length + sepSize
+      if (sz > off) { ch = off; return true }
+      off -= sz
+      ++lineNo
+    })
+    return clipPos(this, Pos(lineNo, ch))
+  },
+  indexFromPos: function (coords) {
+    coords = clipPos(this, coords)
+    var index = coords.ch
+    if (coords.line < this.first || coords.ch < 0) { return 0 }
+    var sepSize = this.lineSeparator().length
+    this.iter(this.first, coords.line, function (line) { // iter aborts when callback returns a truthy value
+      index += line.text.length + sepSize
+    })
+    return index
+  },
+
+  copy: function(copyHistory) {
+    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 = this.sel
+    doc.extend = false
+    if (copyHistory) {
+      doc.history.undoDepth = this.history.undoDepth
+      doc.setHistory(this.getHistory())
+    }
+    return doc
+  },
+
+  linkedDoc: function(options) {
+    if (!options) { options = {} }
+    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, 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) {
+    var this$1 = this;
+
+    if (other instanceof CodeMirror) { other = other.doc }
+    if (this.linked) { for (var i = 0; i < this.linked.length; ++i) {
+      var link = this$1.linked[i]
+      if (link.doc != other) { continue }
+      this$1.linked.splice(i, 1)
+      other.unlinkDoc(this$1)
+      detachSharedMarkers(findSharedMarkers(this$1))
+      break
+    } }
+    // If the histories were shared, split them again
+    if (other.history == this.history) {
+      var splitIds = [other.id]
+      linkedDocs(other, function (doc) { return splitIds.push(doc.id); }, true)
+      other.history = new History(null)
+      other.history.done = copyHistoryArray(this.history.done, splitIds)
+      other.history.undone = copyHistoryArray(this.history.undone, splitIds)
+    }
+  },
+  iterLinkedDocs: function(f) {linkedDocs(this, f)},
+
+  getMode: function() {return this.mode},
+  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
+
+// Kludge to work around strange IE behavior where it'll sometimes
+// re-fire a series of drag-related events right after the drop (#1551)
+var lastDrop = 0
+
+function onDrop(e) {
+  var cm = this
+  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 || cm.isReadOnly()) { 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) {
+      if (cm.options.allowDropFileTypes &&
+          indexOf(cm.options.allowDropFileTypes, file.type) == -1)
+        { return }
+
+      var reader = new FileReader
+      reader.onload = operation(cm, function () {
+        var content = reader.result
+        if (/[\x00-\x08\x0e-\x1f]{2}/.test(content)) { content = "" }
+        text[i] = content
+        if (++read == n) {
+          pos = clipPos(cm.doc, pos)
+          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 { // Normal drop
+    // Don't do a replace if the drop happened inside of the selected text.
+    if (cm.state.draggingText && cm.doc.sel.contains(pos) > -1) {
+      cm.state.draggingText(e)
+      // Ensure the editor is re-focused
+      setTimeout(function () { return cm.display.input.focus(); }, 20)
+      return
     }
-  }
-
-  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);
-  }
-
-  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 docBottom = cm.doc.height + paddingVert(display);
-    var atTop = y1 < snapMargin, atBottom = y2 > docBottom - snapMargin;
-    if (y1 < screentop) {
-      result.scrollTop = atTop ? 0 : y1;
-    } else if (y2 > screentop + screen) {
-      var newTop = Math.min(y1, (atBottom ? docBottom : y2) - screen);
-      if (newTop != screentop) result.scrollTop = newTop;
+    try {
+      var text$1 = e.dataTransfer.getData("Text")
+      if (text$1) {
+        var selected
+        if (cm.state.draggingText && !cm.state.draggingText.copy)
+          { selected = cm.listSelections() }
+        setSelectionNoUndo(cm.doc, simpleSelection(pos, pos))
+        if (selected) { for (var i$1 = 0; i$1 < selected.length; ++i$1)
+          { replaceRange(cm.doc, "", selected[i$1].anchor, selected[i$1].head, "drag") } }
+        cm.replaceSelection(text$1, "around", "paste")
+        cm.display.input.focus()
+      }
     }
-
-    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;
+    catch(e){}
+  }
+}
+
+function onDragStart(cm, e) {
+  if (ie && (!cm.state.draggingText || +new Date - lastDrop < 100)) { e_stop(e); return }
+  if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e)) { return }
+
+  e.dataTransfer.setData("Text", cm.getSelection())
+  e.dataTransfer.effectAllowed = "copyMove"
+
+  // 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;")
+    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 (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
+  }
+}
+
+// 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 () { return forEachCodeMirror(onBlur); })
+}
+// 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()
+}
+
+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: ";", 61: "=", 91: "Mod", 92: "Mod", 93: "Mod",
+  106: "*", 107: "=", 109: "-", 110: ".", 111: "/", 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"
+}
+
+// Number keys
+for (var i = 0; i < 10; i++) { keyNames[i + 48] = keyNames[i + 96] = String(i) }
+// Alphabetic keys
+for (var i$1 = 65; i$1 <= 90; i$1++) { keyNames[i$1] = String.fromCharCode(i$1) }
+// Function keys
+for (var i$2 = 1; i$2 <= 12; i$2++) { keyNames[i$2 + 111] = keyNames[i$2 + 63235] = "F" + i$2 }
+
+var keyMap = {}
+
+keyMap.basic = {
+  "Left": "goCharLeft", "Right": "goCharRight", "Up": "goLineUp", "Down": "goLineDown",
+  "End": "goLineEnd", "Home": "goLineStartSmart", "PageUp": "goPageUp", "PageDown": "goPageDown",
+  "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. 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", "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",
+  "Ctrl-O": "openLine"
+}
+keyMap.macDefault = {
+  "Cmd-A": "selectAll", "Cmd-D": "deleteLine", "Cmd-Z": "undo", "Shift-Cmd-Z": "redo", "Cmd-Y": "redo",
+  "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": "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 DISPATCH
+
+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.
+function normalizeKeyMap(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 = (void 0), name = (void 0)
+      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) }
+    }
+    delete keymap[keyname]
+  } }
+  for (var prop in copy) { keymap[prop] = copy[prop] }
+  return keymap
+}
+
+function lookupKey(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 }
+    }
+  }
+}
+
+// Modifier key presses don't count as 'real' key presses for the
+// purpose of keymap fallthrough.
+function isModifierKey(value) {
+  var name = typeof value == "string" ? value : keyNames[value.keyCode]
+  return name == "Ctrl" || name == "Alt" || name == "Shift" || name == "Mod"
+}
+
+// Look up the name of a key as indicated by an event object.
+function keyName(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 && 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
+}
+
+// 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
+      }
     }
-    return result;
-  }
-
-  function updateScrollPos(cm, left, top) {
-    cm.curOp.updateScrollPos = {scrollLeft: left == null ? cm.doc.scrollLeft : left,
-                                scrollTop: top == null ? cm.doc.scrollTop : top};
-  }
+    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)
+  })
+}
+
+// Commands are parameter-less actions that can be performed on an
+// editor, mostly used for keybindings.
+var commands = {
+  selectAll: selectAll,
+  singleSelection: function (cm) { return cm.setSelection(cm.getCursor("anchor"), cm.getCursor("head"), sel_dontScroll); },
+  killLine: function (cm) { return 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) { return deleteNearSelection(cm, function (range) { return ({
+    from: Pos(range.from().line, 0),
+    to: clipPos(cm.doc, Pos(range.to().line + 1, 0))
+  }); }); },
+  delLineLeft: function (cm) { return deleteNearSelection(cm, function (range) { return ({
+    from: Pos(range.from().line, 0), to: range.from()
+  }); }); },
+  delWrappedLineLeft: function (cm) { return 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) { return 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) { return cm.undo(); },
+  redo: function (cm) { return cm.redo(); },
+  undoSelection: function (cm) { return cm.undoSelection(); },
+  redoSelection: function (cm) { return cm.redoSelection(); },
+  goDocStart: function (cm) { return cm.extendSelection(Pos(cm.firstLine(), 0)); },
+  goDocEnd: function (cm) { return cm.extendSelection(Pos(cm.lastLine())); },
+  goLineStart: function (cm) { return cm.extendSelectionsBy(function (range) { return lineStart(cm, range.head.line); },
+    {origin: "+move", bias: 1}
+  ); },
+  goLineStartSmart: function (cm) { return cm.extendSelectionsBy(function (range) { return lineStartSmart(cm, range.head); },
+    {origin: "+move", bias: 1}
+  ); },
+  goLineEnd: function (cm) { return cm.extendSelectionsBy(function (range) { return lineEnd(cm, range.head.line); },
+    {origin: "+move", bias: -1}
+  ); },
+  goLineRight: function (cm) { return 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) { return 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) { return 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) { return cm.moveV(-1, "line"); },
+  goLineDown: function (cm) { return cm.moveV(1, "line"); },
+  goPageUp: function (cm) { return cm.moveV(-1, "page"); },
+  goPageDown: function (cm) { return cm.moveV(1, "page"); },
+  goCharLeft: function (cm) { return cm.moveH(-1, "char"); },
+  goCharRight: function (cm) { return cm.moveH(1, "char"); },
+  goColumnLeft: function (cm) { return cm.moveH(-1, "column"); },
+  goColumnRight: function (cm) { return cm.moveH(1, "column"); },
+  goWordLeft: function (cm) { return cm.moveH(-1, "word"); },
+  goGroupRight: function (cm) { return cm.moveH(1, "group"); },
+  goGroupLeft: function (cm) { return cm.moveH(-1, "group"); },
+  goWordRight: function (cm) { return cm.moveH(1, "word"); },
+  delCharBefore: function (cm) { return cm.deleteH(-1, "char"); },
+  delCharAfter: function (cm) { return cm.deleteH(1, "char"); },
+  delWordBefore: function (cm) { return cm.deleteH(-1, "word"); },
+  delWordAfter: function (cm) { return cm.deleteH(1, "word"); },
+  delGroupBefore: function (cm) { return cm.deleteH(-1, "group"); },
+  delGroupAfter: function (cm) { return cm.deleteH(1, "group"); },
+  indentAuto: function (cm) { return cm.indentSelection("smart"); },
+  indentMore: function (cm) { return cm.indentSelection("add"); },
+  indentLess: function (cm) { return cm.indentSelection("subtract"); },
+  insertTab: function (cm) { return 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(spaceStr(tabSize - col % tabSize))
+    }
+    cm.replaceSelections(spaces)
+  },
+  defaultTab: function (cm) {
+    if (cm.somethingSelected()) { cm.indentSelection("add") }
+    else { cm.execCommand("insertTab") }
+  },
+  // Swap the two chars left and right of each selection's head.
+  // Move cursor behind the two swapped characters afterwards.
+  //
+  // Doesn't consider line feeds a character.
+  // Doesn't scan more than one line above to find a character.
+  // Doesn't do anything on an empty line.
+  // Doesn't do anything with non-empty selections.
+  transposeChars: function (cm) { return runInOp(cm, function () {
+    var ranges = cm.listSelections(), newSel = []
+    for (var i = 0; i < ranges.length; i++) {
+      if (!ranges[i].empty()) { continue }
+      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) {
+            cur = new Pos(cur.line, 1)
+            cm.replaceRange(line.charAt(0) + cm.doc.lineSeparator() +
+                            prev.charAt(prev.length - 1),
+                            Pos(cur.line - 1, prev.length - 1), cur, "+transpose")
+          }
+        }
+      }
+      newSel.push(new Range(cur, cur))
+    }
+    cm.setSelections(newSel)
+  }); },
+  newlineAndIndent: function (cm) { return runInOp(cm, function () {
+    var sels = cm.listSelections()
+    for (var i = sels.length - 1; i >= 0; i--)
+      { cm.replaceRange(cm.doc.lineSeparator(), sels[i].anchor, sels[i].head, "+input") }
+    sels = cm.listSelections()
+    for (var i$1 = 0; i$1 < sels.length; i$1++)
+      { cm.indentLine(sels[i$1].from().line, null, true) }
+    ensureCursorVisible(cm)
+  }); },
+  openLine: function (cm) { return cm.replaceSelection("\n", "start"); },
+  toggleOverwrite: function (cm) { return cm.toggleOverwrite(); }
+}
+
+
+function lineStart(cm, lineN) {
+  var line = getLine(cm.doc, lineN)
+  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 = 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 == 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
+}
+
+// Run a handler that was bound to a key.
+function doHandleBinding(cm, bound, dropShift) {
+  if (typeof bound == "string") {
+    bound = commands[bound]
+    if (!bound) { return false }
+  }
+  // Ensure previous input has been read, so that the handler sees a
+  // consistent view of the document
+  cm.display.input.ensurePolled()
+  var prevShift = cm.display.shift, done = false
+  try {
+    if (cm.isReadOnly()) { cm.state.suppressEdits = true }
+    if (dropShift) { cm.display.shift = false }
+    done = bound(cm) != Pass
+  } finally {
+    cm.display.shift = prevShift
+    cm.state.suppressEdits = false
+  }
+  return done
+}
+
+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 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) }
+
+  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 }
+
+  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-'.
+    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 {
+    return dispatchKey(cm, name, e, function (b) { return doHandleBinding(cm, b); })
+  }
+}
+
+// Handle a key from the keypress event
+function handleCharBinding(cm, e, ch) {
+  return dispatchKey(cm, "'" + ch + "'", e, function (b) { return doHandleBinding(cm, b, true); })
+}
+
+var lastStoppedKey = null
+function onKeyDown(e) {
+  var cm = this
+  cm.curOp.focus = activeElt()
+  if (signalDOMEvent(cm, e)) { return }
+  // IE does strange things with escape.
+  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 (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("", 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 (eventInWidget(cm.display, e) || signalDOMEvent(cm, e) || e.ctrlKey && !e.altKey || mac && e.metaKey) { return }
+  var keyCode = e.keyCode, charCode = e.charCode
+  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)
+  // Some browsers fire keypress events for backspace
+  if (ch == "\x08") { return }
+  if (handleCharBinding(cm, e, ch)) { return }
+  cm.display.input.onKeyPress(e)
+}
+
+// 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) {
+  var cm = this, display = cm.display
+  if (signalDOMEvent(cm, e) || display.activeTouch && display.input.supportsTouch()) { return }
+  display.input.ensurePolled()
+  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 () { return display.scroller.draggable = true; }, 100)
+    }
+    return
+  }
+  if (clickInGutter(cm, e)) { return }
+  var start = posFromMouse(cm, e)
+  window.focus()
+
+  switch (e_button(e)) {
+  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(function () { return display.input.focus(); }, 20)
+    e_preventDefault(e)
+    break
+  case 3:
+    if (captureRightClick) { onContextMenu(cm, e) }
+    else { delayBlurEvent(cm) }
+    break
+  }
+}
+
+var lastClick;
+var lastDoubleClick;
+function leftButtonDown(cm, e, start) {
+  if (ie) { setTimeout(bind(ensureFocus, cm), 0) }
+  else { cm.curOp.focus = activeElt() }
+
+  var now = +new Date, type
+  if (lastDoubleClick && lastDoubleClick.time > now - 400 && cmp(lastDoubleClick.pos, start) == 0) {
+    type = "triple"
+  } else if (lastClick && lastClick.time > now - 400 && cmp(lastClick.pos, start) == 0) {
+    type = "double"
+    lastDoubleClick = {time: now, pos: start}
+  } else {
+    type = "single"
+    lastClick = {time: now, pos: start}
+  }
+
+  var sel = cm.doc.sel, modifier = mac ? e.metaKey : e.ctrlKey, contained
+  if (cm.options.dragDrop && dragAndDrop && !cm.isReadOnly() &&
+      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
+  dragEnd.copy = mac ? e.altKey : e.ctrlKey
+  // 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)
+
+  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 (chromeOS ? e.shiftKey && e.metaKey : 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),
+                 {scroll: false, origin: "*mouse"})
+    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") {
+        var range
+        if (type == "double")
+          { range = cm.findWordAt(pos) }
+        else
+          { 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$1 = startSel.ranges.slice(0)
+      ranges$1[ourIndex] = new Range(clipPos(doc, anchor), head)
+      setSelection(doc, normalizeSelection(ranges$1, ourIndex), sel_mouse)
+    }
+  }
+
+  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,
+  // if the clear happens after their scheduled firing time).
+  var counter = 0
+
+  function extend(e) {
+    var curCount = ++counter
+    var cur = posFromMouse(cm, e, true, type == "rect")
+    if (!cur) { return }
+    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) }
+    } else {
+      var outside = e.clientY < editorSize.top ? -20 : e.clientY > editorSize.bottom ? 20 : 0
+      if (outside) { setTimeout(operation(cm, function () {
+        if (counter != curCount) { return }
+        display.scroller.scrollTop += outside
+        extend(e)
+      }), 50) }
+    }
+  }
+
+  function done(e) {
+    cm.state.selectingText = false
+    counter = Infinity
+    e_preventDefault(e)
+    display.input.focus()
+    off(document, "mousemove", move)
+    off(document, "mouseup", up)
+    doc.history.lastSelOrigin = null
+  }
+
+  var move = operation(cm, function (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)
+}
+
+
+// Determines whether an event happened in the gutter, and fires the
+// handlers for the corresponding event.
+function gutterEvent(cm, e, type, prevent) {
+  var mX, mY
+  try { 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) }
+
+  var display = cm.display
+  var lineBox = display.lineDiv.getBoundingClientRect()
+
+  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 && g.getBoundingClientRect().right >= mX) {
+      var line = lineAtHeight(cm.doc, mY)
+      var gutter = cm.options.gutters[i]
+      signal(cm, type, cm, line, gutter, e)
+      return e_defaultPrevented(e)
+    }
+  }
+}
+
+function clickInGutter(cm, e) {
+  return gutterEvent(cm, e, "gutterClick", true)
+}
+
+// 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 (eventInWidget(cm.display, e) || contextMenuInGutter(cm, e)) { return }
+  if (signalDOMEvent(cm, e, "contextmenu")) { return }
+  cm.display.input.onContextMenu(e)
+}
+
+function contextMenuInGutter(cm, e) {
+  if (!hasHandler(cm, "gutterContextMenu")) { return false }
+  return gutterEvent(cm, e, "gutterContextMenu", false)
+}
+
+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-")
+  clearCaches(cm)
+}
+
+var Init = {toString: function(){return "CodeMirror.Init"}}
+
+var defaults = {}
+var optionHandlers = {}
+
+function defineOptions(CodeMirror) {
+  var optionHandlers = CodeMirror.optionHandlers
 
-  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));
+  function option(name, deflt, handle, notOnInit) {
+    CodeMirror.defaults[name] = deflt
+    if (handle) { optionHandlers[name] =
+      notOnInit ? function (cm, val, old) {if (old != Init) { handle(cm, val, old) }} : handle }
   }
 
-  // API UTILITIES
+  CodeMirror.defineOption = option
 
-  function indentLine(cm, n, how, aggressive) {
-    var doc = cm.doc;
-    if (how == null) how = "add";
-    if (how == "smart") {
-      if (!cm.doc.mode.indent) how = "prev";
-      else var state = getStateBefore(cm, n);
-    }
+  // Passed to option handlers when there is no old value.
+  CodeMirror.Init = Init
 
-    var tabSize = cm.options.tabSize;
-    var line = getLine(doc, n), curSpace = countColumn(line.text, null, tabSize);
-    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) return;
-        how = "prev";
+  // These two are, on init, called from the constructor because they
+  // have to be initialized before the editor can start at all.
+  option("value", "", function (cm, val) { return cm.setValue(val); }, true)
+  option("mode", null, function (cm, val) {
+    cm.doc.modeOption = val
+    loadMode(cm)
+  }, true)
+
+  option("indentUnit", 2, loadMode, true)
+  option("indentWithTabs", false)
+  option("smartIndent", true)
+  option("tabSize", 4, function (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))
       }
-    }
-    if (how == "prev") {
-      if (n > doc.first) indentation = countColumn(getLine(doc, n-1).text, null, tabSize);
-      else indentation = 0;
-    } else if (how == "add") {
-      indentation = curSpace + cm.options.indentUnit;
-    } else if (how == "subtract") {
-      indentation = curSpace - cm.options.indentUnit;
-    } else if (typeof how == "number") {
-      indentation = curSpace + how;
-    }
-    indentation = Math.max(0, indentation);
-
-    var indentString = "", pos = 0;
-    if (cm.options.indentWithTabs)
-      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");
-    else if (doc.sel.head.line == n && doc.sel.head.ch < curSpaceString.length)
-      setSelection(doc, Pos(n, curSpaceString.length), Pos(n, curSpaceString.length), 1);
-    line.stateAfter = null;
-  }
-
-  function changeLine(cm, handle, op) {
-    var no = handle, line = handle, doc = cm.doc;
-    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;
-    return line;
-  }
-
-  function findPosH(doc, pos, dir, unit, visually) {
-    var line = pos.line, ch = pos.ch, origDir = dir;
-    var lineObj = getLine(doc, line);
-    var possible = true;
-    function findNextLine() {
-      var l = line + dir;
-      if (l < doc.first || l >= doc.first + doc.size) return (possible = false);
-      line = l;
-      return lineObj = getLine(doc, l);
-    }
-    function moveOnce(boundToLine) {
-      var next = (visually ? moveVisually : moveLogically)(lineObj, ch, dir, true);
-      if (next == null) {
-        if (!boundToLine && findNextLine()) {
-          if (visually) ch = (dir < 0 ? lineRight : lineLeft)(lineObj);
-          else ch = dir < 0 ? lineObj.text.length : 0;
-        } else return (possible = false);
-      } else ch = next;
-      return true;
-    }
-
-    if (unit == "char") moveOnce();
-    else if (unit == "column") moveOnce(true);
-    else if (unit == "word" || unit == "group") {
-      var sawType = null, group = unit == "group";
-      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
-          : "p";
-        if (sawType && sawType != type) {
-          if (dir < 0) {dir = 1; moveOnce();}
-          break;
-        }
-        if (type) sawType = type;
-        if (dir > 0 && !moveOnce(!first)) break;
+      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", /[\u0000-\u001f\u007f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff]/g, function (cm, val, old) {
+    cm.state.specialChars = new RegExp(val.source + (val.test("\t") ? "" : "|\t"), "g")
+    if (old != Init) { cm.refresh() }
+  })
+  option("specialCharPlaceholder", defaultSpecialCharPlaceholder, function (cm) { return 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("spellcheck", false, function (cm, val) { return cm.getInputField().spellcheck = val; }, true)
+  option("rtlMoveVisually", !windows)
+  option("wholeLineUpdateBefore", true)
+
+  option("theme", "default", function (cm) {
+    themeChanged(cm)
+    guttersChanged(cm)
+  }, true)
+  option("keyMap", "default", function (cm, val, old) {
+    var next = getKeyMap(val)
+    var prev = old != Init && getKeyMap(old)
+    if (prev && prev.detach) { prev.detach(cm, next) }
+    if (next.attach) { next.attach(cm, prev || null) }
+  })
+  option("extraKeys", null)
+
+  option("lineWrapping", false, wrappingChanged, true)
+  option("gutters", [], function (cm) {
+    setGuttersForLineNumbers(cm.options)
+    guttersChanged(cm)
+  }, true)
+  option("fixedGutter", true, function (cm, val) {
+    cm.display.gutters.style.left = val ? compensateForHScroll(cm.display) + "px" : "0"
+    cm.refresh()
+  }, true)
+  option("coverGutterNextToScrollbar", false, function (cm) { return 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)
+  }, true)
+  option("firstLineNumber", 1, guttersChanged, true)
+  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()
+      cm.display.disabled = true
+    } else {
+      cm.display.disabled = false
+    }
+    cm.display.input.readOnlyChanged(val)
+  })
+  option("disableInput", false, function (cm, val) {if (!val) { cm.display.input.reset() }}, true)
+  option("dragDrop", true, dragDropChanged)
+  option("allowDropFileTypes", null)
+
+  option("cursorBlinkRate", 530)
+  option("cursorScrollMargin", 0)
+  option("cursorHeight", 1, updateSelection, true)
+  option("singleCursorHeightPerLine", true, updateSelection, true)
+  option("workTime", 100)
+  option("workDelay", 100)
+  option("flattenSpans", true, resetModeState, true)
+  option("addModeClass", false, resetModeState, true)
+  option("pollInterval", 100)
+  option("undoDepth", 200, function (cm, val) { return cm.doc.history.undoDepth = val; })
+  option("historyEventDelay", 1250)
+  option("viewportMargin", 10, function (cm) { return cm.refresh(); }, true)
+  option("maxHighlightLength", 10000, resetModeState, true)
+  option("moveInputWithCursor", true, function (cm, val) {
+    if (!val) { cm.display.input.resetPosition() }
+  })
+
+  option("tabindex", null, function (cm, val) { return cm.display.input.getField().tabIndex = val || ""; })
+  option("autofocus", null)
+}
+
+function guttersChanged(cm) {
+  updateGutters(cm)
+  regChange(cm)
+  alignHorizontally(cm)
+}
+
+function dragDropChanged(cm, value, old) {
+  var wasOn = old && old != 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)
+  }
+}
+
+function wrappingChanged(cm) {
+  if (cm.options.lineWrapping) {
+    addClass(cm.display.wrapper, "CodeMirror-wrap")
+    cm.display.sizer.style.minWidth = ""
+    cm.display.sizerWidth = null
+  } else {
+    rmClass(cm.display.wrapper, "CodeMirror-wrap")
+    findMaxLine(cm)
+  }
+  estimateLineHeights(cm)
+  regChange(cm)
+  clearCaches(cm)
+  setTimeout(function () { return updateScrollbars(cm); }, 100)
+}
+
+// A CodeMirror instance represents an editor. This is the object
+// that user code is usually dealing with.
+
+function CodeMirror(place, options) {
+  var this$1 = this;
+
+  if (!(this instanceof CodeMirror)) { return new CodeMirror(place, options) }
+
+  this.options = options = options ? copyObj(options) : {}
+  // Determine effective options based on given values and defaults.
+  copyObj(defaults, options, false)
+  setGuttersForLineNumbers(options)
+
+  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)
+  themeChanged(this)
+  if (options.lineWrapping)
+    { this.display.wrapper.className += " CodeMirror-wrap" }
+  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
+  }
+
+  if (options.autofocus && !mobile) { display.input.focus() }
+
+  // Override magic textarea content restore that IE sometimes does
+  // on our hidden textarea on reload
+  if (ie && ie_version < 11) { setTimeout(function () { return this$1.display.input.reset(true); }, 20) }
+
+  registerEventHandlers(this)
+  ensureGlobalHandlers()
+
+  startOperation(this)
+  this.curOp.forceUpdate = true
+  attachDoc(this, doc)
+
+  if ((options.autofocus && !mobile) || this.hasFocus())
+    { setTimeout(bind(onFocus, this), 20) }
+  else
+    { onBlur(this) }
+
+  for (var opt in optionHandlers) { if (optionHandlers.hasOwnProperty(opt))
+    { optionHandlers[opt](this$1, options[opt], Init) } }
+  maybeUpdateLineNumberWidth(this)
+  if (options.finishInit) { options.finishInit(this) }
+  for (var i = 0; i < initHooks.length; ++i) { initHooks[i](this$1) }
+  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" }
+}
+
+// The default configuration options.
+CodeMirror.defaults = defaults
+// Functions to run when options are changed.
+CodeMirror.optionHandlers = optionHandlers
+
+// Attach the necessary event handlers when initializing the editor
+function registerEventHandlers(cm) {
+  var d = cm.display
+  on(d.scroller, "mousedown", operation(cm, onMouseDown))
+  // 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 = cm.findWordAt(pos)
+      extendSelection(cm.doc, word.anchor, word.head)
+    })) }
+  else
+    { on(d.scroller, "dblclick", function (e) { return signalDOMEvent(cm, e) || e_preventDefault(e); }) }
+  // 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 these browsers.
+  if (!captureRightClick) { on(d.scroller, "contextmenu", function (e) { return 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 () { return 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 (!signalDOMEvent(cm, e) && !isMouseLikeTouchEvent(e)) {
+      d.input.ensurePolled()
+      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
       }
     }
-    var result = skipAtomic(doc, Pos(line, ch), origDir, true);
-    if (!possible) result.hitSide = true;
-    return result;
-  }
-
-  function findPosV(cm, pos, dir, unit) {
-    var doc = cm.doc, x = pos.left, y;
-    if (unit == "page") {
-      var pageSize = Math.min(cm.display.wrapper.clientHeight, window.innerHeight || document.documentElement.clientHeight);
-      y = pos.top + dir * (pageSize - (dir < 0 ? 1.5 : .5) * textHeight(cm.display));
-    } else if (unit == "line") {
-      y = dir > 0 ? pos.bottom + 3 : pos.top - 3;
-    }
-    for (;;) {
-      var target = coordsChar(cm, x, y);
-      if (!target.outside) break;
-      if (dir < 0 ? y <= 0 : y >= doc.height) { target.hitSide = true; break; }
-      y += dir * 5;
+  })
+  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)
+      setScrollLeft(cm, d.scroller.scrollLeft, true)
+      signal(cm, "scroll", cm)
+    }
+  })
+
+  // Listen to wheel events in order to try and update the viewport on time.
+  on(d.scroller, "mousewheel", function (e) { return onScrollWheel(cm, e); })
+  on(d.scroller, "DOMMouseScroll", function (e) { return onScrollWheel(cm, e); })
+
+  // Prevent wrapper from ever scrolling
+  on(d.wrapper, "scroll", function () { return d.wrapper.scrollTop = d.wrapper.scrollLeft = 0; })
+
+  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) { return onDragStart(cm, e); },
+    drop: operation(cm, onDrop),
+    leave: function (e) {if (!signalDOMEvent(cm, e)) { clearDragCursor(cm) }}
+  }
+
+  var inp = d.input.getField()
+  on(inp, "keyup", function (e) { return onKeyUp.call(cm, e); })
+  on(inp, "keydown", operation(cm, onKeyDown))
+  on(inp, "keypress", operation(cm, onKeyPress))
+  on(inp, "focus", function (e) { return onFocus(cm, e); })
+  on(inp, "blur", function (e) { return onBlur(cm, e); })
+}
+
+var initHooks = []
+CodeMirror.defineInitHook = function (f) { return initHooks.push(f); }
+
+// 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, state
+  if (how == null) { how = "add" }
+  if (how == "smart") {
+    // 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 (!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"
+    }
+  }
+  if (how == "prev") {
+    if (n > doc.first) { indentation = countColumn(getLine(doc, n-1).text, null, tabSize) }
+    else { indentation = 0 }
+  } else if (how == "add") {
+    indentation = curSpace + cm.options.indentUnit
+  } else if (how == "subtract") {
+    indentation = curSpace - cm.options.indentUnit
+  } else if (typeof how == "number") {
+    indentation = curSpace + how
+  }
+  indentation = Math.max(0, indentation)
+
+  var indentString = "", pos = 0
+  if (cm.options.indentWithTabs)
+    { for (var i = Math.floor(indentation / tabSize); i; --i) {pos += tabSize; indentString += "\t"} }
+  if (pos < indentation) { indentString += spaceStr(indentation - pos) }
+
+  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$1 = 0; i$1 < doc.sel.ranges.length; i$1++) {
+      var range = doc.sel.ranges[i$1]
+      if (range.head.line == n && range.head.ch < curSpaceString.length) {
+        var pos$1 = Pos(n, curSpaceString.length)
+        replaceOneSelection(doc, i$1, new Range(pos$1, pos$1))
+        break
+      }
     }
-    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)};
-  }
+// This will be set to a {lineWise: bool, text: [string]} object, so
+// that, when pasting, we know what kind of selections the copied
+// text was made out of.
+var lastCopied = null
 
-  function selectLine(cm, line) {
-    extendSelection(cm.doc, Pos(line, 0), clipPos(cm.doc, Pos(line + 1, 0)));
-  }
+function setLastCopied(newLastCopied) {
+  lastCopied = newLastCopied
+}
 
-  // PROTOTYPE
+function applyTextInput(cm, inserted, deleted, sel, origin) {
+  var doc = cm.doc
+  cm.display.shift = false
+  if (!sel) { sel = doc.sel }
 
-  // The publicly visible API. Note that operation(null, f) means
-  // 'wrap f in an operation, performed on its `this` parameter'
+  var paste = cm.state.pasteIncoming || origin == "paste"
+  var textLines = splitLinesAuto(inserted), multiPaste = null
+  // When pasing N lines into N selections, insert one line per selection
+  if (paste && sel.ranges.length > 1) {
+    if (lastCopied && lastCopied.text.join("\n") == inserted) {
+      if (sel.ranges.length % lastCopied.text.length == 0) {
+        multiPaste = []
+        for (var i = 0; i < lastCopied.text.length; i++)
+          { multiPaste.push(doc.splitLines(lastCopied.text[i])) }
+      }
+    } else if (textLines.length == sel.ranges.length) {
+      multiPaste = map(textLines, function (l) { return [l]; })
+    }
+  }
+
+  var updateInput
+  // Normal behavior is to insert the new text into every selection
+  for (var i$1 = sel.ranges.length - 1; i$1 >= 0; i$1--) {
+    var range = sel.ranges[i$1]
+    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)) }
+      else if (lastCopied && lastCopied.lineWise && lastCopied.text.join("\n") == inserted)
+        { from = to = Pos(from.line, 0) }
+    }
+    updateInput = cm.curOp.updateInput
+    var changeEvent = {from: from, to: to, text: multiPaste ? multiPaste[i$1 % 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")
+  if (pasted) {
+    e.preventDefault()
+    if (!cm.isReadOnly() && !cm.options.disableInput)
+      { runInOp(cm, function () { return 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, spellcheck) {
+  field.setAttribute("autocorrect", "off")
+  field.setAttribute("autocapitalize", "off")
+  field.setAttribute("spellcheck", !!spellcheck)
+}
+
+function hiddenTextarea() {
+  var te = elt("textarea", null, null, "position: absolute; bottom: -1em; 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
+}
+
+// The publicly visible API. Note that methodOp(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.
+
+function addEditorMethods(CodeMirror) {
+  var optionHandlers = CodeMirror.optionHandlers
+
+  var helpers = CodeMirror.helpers = {}
 
   CodeMirror.prototype = {
     constructor: CodeMirror,
-    focus: function(){window.focus(); focusInput(this); fastPoll(this);},
+    focus: function(){window.focus(); this.display.input.focus()},
 
     setOption: function(option, value) {
-      var options = this.options, old = options[option];
-      if (options[option] == value && option != "mode") return;
-      options[option] = value;
+      var options = this.options, old = options[option]
+      if (options[option] == value && option != "mode") { return }
+      options[option] = value
       if (optionHandlers.hasOwnProperty(option))
-        operation(this, optionHandlers[option])(this, value, old);
+        { operation(this, optionHandlers[option])(this, value, old) }
+      signal(this, "optionChange", this, option)
     },
 
-    getOption: function(option) {return this.options[option];},
-    getDoc: function() {return this.doc;},
+    getOption: function(option) {return this.options[option]},
+    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;
+      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)) {
-          maps.splice(i, 1);
-          return true;
-        }
+        { if (maps[i] == map || maps[i].name == map) {
+          maps.splice(i, 1)
+          return true
+        } }
     },
 
-    addOverlay: operation(null, 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);
+    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.") }
+      insertSorted(this.state.overlays,
+                   {mode: mode, modeSpec: spec, opaque: options && options.opaque,
+                    priority: (options && options.priority) || 0},
+                   function (overlay) { return overlay.priority; })
+      this.state.modeGen++
+      regChange(this)
     }),
-    removeOverlay: operation(null, function(spec) {
-      var overlays = this.state.overlays;
+    removeOverlay: methodOp(function(spec) {
+      var this$1 = this;
+
+      var overlays = this.state.overlays
       for (var i = 0; i < overlays.length; ++i) {
-        var cur = overlays[i].modeSpec;
+        var cur = overlays[i].modeSpec
         if (cur == spec || typeof spec == "string" && cur.name == spec) {
-          overlays.splice(i, 1);
-          this.state.modeGen++;
-          regChange(this);
-          return;
+          overlays.splice(i, 1)
+          this$1.state.modeGen++
+          regChange(this$1)
+          return
         }
       }
     }),
 
-    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 (dir == null) { dir = this.options.smartIndent ? "smart" : "prev" }
+        else { dir = dir ? "add" : "subtract" }
       }
-      if (isLine(this.doc, n)) indentLine(this, n, dir, aggressive);
+      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 this$1 = this;
+
+      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$1.lastLine(), to.line - (to.ch ? 0 : 1)) + 1
+          for (var j = start; j < end; ++j)
+            { indentLine(this$1, j, how) }
+          var newRanges = this$1.doc.sel.ranges
+          if (from.ch == 0 && ranges.length == newRanges.length && newRanges[i].from().ch > 0)
+            { replaceOneSelection(this$1.doc, i, new Range(from, newRanges[i].to()), sel_dontScroll) }
+        } else if (range.head.line > end) {
+          indentLine(this$1, range.head.line, how, true)
+          end = range.head.line
+          if (i == this$1.doc.sel.primIndex) { ensureCursorVisible(this$1) }
+        }
+      }
     }),
 
     // 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 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];
-      }
+      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
+      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 { type = styles[mid * 2 + 2]; break }
+      } }
+      var cut = type ? type.indexOf("overlay ") : -1
+      return cut < 0 ? type : cut == 0 ? null : type.slice(0, cut - 1)
     },
 
     getModeAt: function(pos) {
-      var mode = this.doc.mode;
-      if (!mode.innerMode) return mode;
-      return CodeMirror.innerMode(mode, this.getTokenAt(pos).state).mode;
+      var mode = this.doc.mode
+      if (!mode.innerMode) { return mode }
+      return CodeMirror.innerMode(mode, this.getTokenAt(pos).state).mode
     },
 
     getHelper: function(pos, type) {
-      if (!helpers.hasOwnProperty(type)) return;
-      var help = helpers[type], mode = this.getModeAt(pos);
-      return mode[type] && help[mode[type]] ||
-        mode.helperType && help[mode.helperType] ||
-        help[mode.name];
+      return this.getHelpers(pos, type)[0]
+    },
+
+    getHelpers: function(pos, type) {
+      var this$1 = this;
+
+      var found = []
+      if (!helpers.hasOwnProperty(type)) { return found }
+      var help = helpers[type], mode = this.getModeAt(pos)
+      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$1 = 0; i$1 < help._global.length; i$1++) {
+        var cur = help._global[i$1]
+        if (cur.pred(mode, this$1) && indexOf(found, cur.val) == -1)
+          { found.push(cur.val) }
+      }
+      return found
     },
 
     getStateAfter: function(line, precise) {
-      var doc = this.doc;
-      line = clipLine(doc, line == null ? doc.first + doc.size - 1: line);
-      return getStateBefore(this, line + 1, precise);
+      var doc = this.doc
+      line = clipLine(doc, line == null ? doc.first + doc.size - 1: line)
+      return getStateBefore(this, line + 1, precise)
     },
 
     cursorCoords: function(start, mode) {
-      var pos, sel = this.doc.sel;
-      if (start == null) pos = sel.head;
-      else if (typeof start == "object") pos = clipPos(this.doc, start);
-      else pos = start ? sel.from : sel.to;
-      return cursorCoords(this, pos, mode || "page");
+      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 ? range.from() : range.to() }
+      return cursorCoords(this, pos, mode || "page")
     },
 
     charCoords: function(pos, mode) {
-      return charCoords(this, clipPos(this.doc, pos), mode || "page");
+      return charCoords(this, clipPos(this.doc, pos), mode || "page")
     },
 
     coordsChar: function(coords, mode) {
-      coords = fromCoordSystem(this, coords, mode || "page");
-      return coordsChar(this, coords.left, coords.top);
+      coords = fromCoordSystem(this, coords, mode || "page")
+      return coordsChar(this, coords.left, coords.top)
     },
 
     lineAtHeight: function(height, mode) {
-      height = fromCoordSystem(this, {top: height, left: 0}, mode || "page").top;
-      return lineAtHeight(this.doc, height + this.display.viewOffset);
+      height = fromCoordSystem(this, {top: height, left: 0}, mode || "page").top
+      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);
-    },
-
-    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) {
-        var markers = line.gutterMarkers || (line.gutterMarkers = {});
-        markers[gutterID] = value;
-        if (!value && isEmpty(markers)) line.gutterMarkers = null;
-        return true;
-      });
-    }),
-
-    clearGutter: operation(null, 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);
-          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) {
+    heightAtLine: function(line, mode, includeWidgets) {
+      var end = false, lineObj
       if (typeof line == "number") {
-        if (!isLine(this.doc, line)) return null;
-        var n = line;
-        line = getLine(this.doc, line);
-        if (!line) return null;
+        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 {
-        var n = lineNo(line);
-        if (n == null) return null;
+        lineObj = line
       }
-      return {line: n, handle: line, text: line.text, gutterMarkers: line.gutterMarkers,
-              textClass: line.textClass, bgClass: line.bgClass, wrapClass: line.wrapClass,
-              widgets: line.widgets};
+      return intoCoordSystem(this, lineObj, {top: 0, left: 0}, mode || "page", includeWidgets).top +
+        (end ? this.doc.height - heightAtLine(lineObj) : 0)
     },
 
-    getViewport: function() { return {from: this.display.showingFrom, to: this.display.showingTo};},
+    defaultTextHeight: function() { return textHeight(this.display) },
+    defaultCharWidth: function() { return charWidth(this.display) },
+
+    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";
-      display.sizer.appendChild(node);
+      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;
+        top = pos.top
       } else if (vert == "above" || vert == "near") {
         var vspace = Math.max(display.wrapper.clientHeight, this.doc.height),
-        hspace = Math.max(display.sizer.clientWidth, display.lineSpace.clientWidth);
+        hspace = Math.max(display.sizer.clientWidth, display.lineSpace.clientWidth)
         // Default to positioning above (if specified and possible); otherwise default to positioning below
         if ((vert == 'above' || pos.bottom + node.offsetHeight > vspace) && pos.top > node.offsetHeight)
-          top = pos.top - node.offsetHeight;
+          { top = pos.top - node.offsetHeight }
         else if (pos.bottom + node.offsetHeight <= vspace)
-          top = pos.bottom;
+          { top = pos.bottom }
         if (left + node.offsetWidth > hspace)
-          left = hspace - node.offsetWidth;
+          { left = hspace - node.offsetWidth }
       }
-      node.style.top = top + "px";
-      node.style.left = node.style.right = "";
+      node.style.top = top + "px"
+      node.style.left = node.style.right = ""
       if (horiz == "right") {
-        left = display.sizer.clientWidth - node.offsetWidth;
-        node.style.right = "0px";
+        left = display.sizer.clientWidth - node.offsetWidth
+        node.style.right = "0px"
       } else {
-        if (horiz == "left") left = 0;
-        else if (horiz == "middle") left = (display.sizer.clientWidth - node.offsetWidth) / 2;
-        node.style.left = left + "px";
+        if (horiz == "left") { left = 0 }
+        else if (horiz == "middle") { left = (display.sizer.clientWidth - node.offsetWidth) / 2 }
+        node.style.left = left + "px"
       }
       if (scroll)
-        scrollIntoView(this, left, top, left + node.offsetWidth, top + node.offsetHeight);
+        { 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) {
+      if (commands.hasOwnProperty(cmd))
+        { return commands[cmd].call(null, this) }
+    },
 
-    execCommand: function(cmd) {return commands[cmd](this);},
+    triggerElectric: methodOp(function(text) { triggerElectric(this, text) }),
 
     findPosH: function(from, amount, unit, visually) {
-      var dir = 1;
-      if (amount < 0) { dir = -1; amount = -amount; }
-      for (var i = 0, cur = clipPos(this.doc, from); i < amount; ++i) {
-        cur = findPosH(this.doc, cur, dir, unit, visually);
-        if (cur.hitSide) break;
+      var this$1 = this;
+
+      var dir = 1
+      if (amount < 0) { dir = -1; amount = -amount }
+      var cur = clipPos(this.doc, from)
+      for (var i = 0; i < amount; ++i) {
+        cur = findPosH(this$1.doc, cur, dir, unit, visually)
+        if (cur.hitSide) { break }
       }
-      return cur;
+      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 this$1 = this;
+
+      this.extendSelectionsBy(function (range) {
+        if (this$1.display.shift || this$1.doc.extend || range.empty())
+          { return findPosH(this$1.doc, range.head, dir, unit, this$1.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) {
-      var dir = 1, x = goalColumn;
-      if (amount < 0) { dir = -1; amount = -amount; }
-      for (var i = 0, cur = clipPos(this.doc, from); i < amount; ++i) {
-        var coords = cursorCoords(this, cur, "div");
-        if (x == null) x = coords.left;
-        else coords.left = x;
-        cur = findPosV(this, coords, dir, unit);
-        if (cur.hitSide) break;
+      var this$1 = this;
+
+      var dir = 1, x = goalColumn
+      if (amount < 0) { dir = -1; amount = -amount }
+      var cur = clipPos(this.doc, from)
+      for (var i = 0; i < amount; ++i) {
+        var coords = cursorCoords(this$1, cur, "div")
+        if (x == null) { x = coords.left }
+        else { coords.left = x }
+        cur = findPosV(this$1, coords, dir, unit)
+        if (cur.hitSide) { break }
       }
-      return cur;
+      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 this$1 = this;
+
+      var doc = this.doc, goals = []
+      var collapse = !this.display.shift && !doc.extend && doc.sel.somethingSelected()
+      doc.extendSelectionsBy(function (range) {
+        if (collapse)
+          { return dir < 0 ? range.from() : range.to() }
+        var headPos = cursorCoords(this$1, range.head, "div")
+        if (range.goalColumn != null) { headPos.left = range.goalColumn }
+        goals.push(headPos.left)
+        var pos = findPosV(this$1, headPos, dir, unit)
+        if (unit == "page" && range == doc.sel.primary())
+          { addToScrollPos(this$1, null, charCoords(this$1, 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 (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() },
+    isReadOnly: function() { return !!(this.options.readOnly || this.doc.cantEdit) },
 
-    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(range, margin) {
-      if (range == null) range = {from: this.doc.sel.head, to: null};
-      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;
-      if (!margin) margin = 0;
+    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
 
-      var coords = range;
       if (range.from.line != null) {
-        this.curOp.scrollToPos = {from: range.from, to: range.to, margin: margin};
-        coords = {from: cursorCoords(this, range.from),
-                  to: cursorCoords(this, range.to)};
+        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, Math.min(coords.from.left, coords.to.left),
-                                    Math.min(coords.from.top, coords.to.top) - margin,
-                                    Math.max(coords.from.right, coords.to.right),
-                                    Math.max(coords.from.bottom, coords.to.bottom) + margin);
-      updateScrollPos(this, sPos.scrollLeft, sPos.scrollTop);
     }),
 
-    setSize: operation(null, function(width, height) {
-      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);
-      if (this.options.lineWrapping)
-        this.display.measureLineCache.length = this.display.measureLineCachePos = 0;
-      this.curOp.forceUpdate = true;
+    setSize: methodOp(function(width, height) {
+      var this$1 = this;
+
+      var interpret = function (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) }
+      if (this.options.lineWrapping) { clearLineMeasurementCache(this) }
+      var lineNo = this.display.viewFrom
+      this.doc.iter(lineNo, this.display.viewTo, function (line) {
+        if (line.widgets) { for (var i = 0; i < line.widgets.length; i++)
+          { if (line.widgets[i].noHScroll) { regLineChange(this$1, lineNo, "widget"); break } } }
+        ++lineNo
+      })
+      this.curOp.forceUpdate = true
+      signal(this, "refresh", this)
     }),
 
-    operation: function(f){return runInOp(this, f);},
-
-    refresh: operation(null, function() {
-      var badHeight = this.display.cachedTextHeight == null;
-      clearCaches(this);
-      updateScrollPos(this, this.doc.scrollLeft, this.doc.scrollTop);
-      regChange(this);
-      if (badHeight) estimateLineHeights(this);
+    operation: function(f){return runInOp(this, f)},
+
+    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) {
-      var old = this.doc;
-      old.cm = null;
-      attachDoc(this, doc);
-      clearCaches(this);
-      resetInput(this, true);
-      updateScrollPos(this, doc.scrollLeft, doc.scrollTop);
-      signalLater(this, "swapDoc", this, old);
-      return old;
+    swapDoc: methodOp(function(doc) {
+      var old = this.doc
+      old.cm = null
+      attachDoc(this, doc)
+      clearCaches(this)
+      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;},
-    getWrapperElement: function(){return this.display.wrapper;},
-    getScrollerElement: function(){return this.display.scroller;},
-    getGutterElement: function(){return this.display.gutters;}
-  };
-  eventMixin(CodeMirror);
-
-  // OPTION DEFAULTS
-
-  var optionHandlers = CodeMirror.optionHandlers = {};
-
-  // The default configuration options.
-  var defaults = CodeMirror.defaults = {};
-
-  function option(name, deflt, handle, notOnInit) {
-    CodeMirror.defaults[name] = deflt;
-    if (handle) optionHandlers[name] =
-      notOnInit ? function(cm, val, old) {if (old != Init) handle(cm, val, old);} : handle;
+    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}
   }
+  eventMixin(CodeMirror)
 
-  var Init = CodeMirror.Init = {toString: function(){return "CodeMirror.Init";}};
-
-  // These two are, on init, called from the constructor because they
-  // have to be initialized before the editor can start at all.
-  option("value", "", function(cm, val) {
-    cm.setValue(val);
-  }, true);
-  option("mode", null, function(cm, val) {
-    cm.doc.modeOption = val;
-    loadMode(cm);
-  }, true);
-
-  option("indentUnit", 2, loadMode, true);
-  option("indentWithTabs", false);
-  option("smartIndent", true);
-  option("tabSize", 4, function(cm) {
-    loadMode(cm);
-    clearCaches(cm);
-    regChange(cm);
-  }, true);
-  option("specialChars", /[\t\u0000-\u0019\u00ad\u200b\u2028\u2029\ufeff]/g, function(cm, val) {
-    cm.options.specialChars = new RegExp(val.source + (val.test("\t") ? "" : "|\t"), "g");
-    cm.refresh();
-  }, true);
-  option("specialCharPlaceholder", defaultSpecialCharPlaceholder, function(cm) {cm.refresh();}, true);
-  option("electricChars", true);
-  option("rtlMoveVisually", !windows);
-  option("wholeLineUpdateBefore", true);
-
-  option("theme", "default", function(cm) {
-    themeChanged(cm);
-    guttersChanged(cm);
-  }, true);
-  option("keyMap", "default", keyMapChanged);
-  option("extraKeys", null);
-
-  option("onKeyEvent", null);
-  option("onDragEvent", null);
-
-  option("lineWrapping", false, wrappingChanged, true);
-  option("gutters", [], function(cm) {
-    setGuttersForLineNumbers(cm.options);
-    guttersChanged(cm);
-  }, true);
-  option("fixedGutter", true, function(cm, val) {
-    cm.display.gutters.style.left = val ? compensateForHScroll(cm.display) + "px" : "0";
-    cm.refresh();
-  }, true);
-  option("coverGutterNextToScrollbar", false, updateScrollbars, true);
-  option("lineNumbers", false, function(cm) {
-    setGuttersForLineNumbers(cm.options);
-    guttersChanged(cm);
-  }, true);
-  option("firstLineNumber", 1, guttersChanged, true);
-  option("lineNumberFormatter", function(integer) {return integer;}, guttersChanged, true);
-  option("showCursorWhenSelecting", false, updateSelection, true);
-
-  option("resetSelectionOnContextMenu", true);
-
-  option("readOnly", false, function(cm, val) {
-    if (val == "nocursor") {
-      onBlur(cm);
-      cm.display.input.blur();
-      cm.display.disabled = true;
-    } else {
-      cm.display.disabled = false;
-      if (!val) resetInput(cm, true);
-    }
-  });
-  option("dragDrop", true);
-
-  option("cursorBlinkRate", 530);
-  option("cursorScrollMargin", 0);
-  option("cursorHeight", 1);
-  option("workTime", 100);
-  option("workDelay", 100);
-  option("flattenSpans", true);
-  option("pollInterval", 100);
-  option("undoDepth", 40, function(cm, val){cm.doc.history.undoDepth = val;});
-  option("historyEventDelay", 500);
-  option("viewportMargin", 10, function(cm){cm.refresh();}, true);
-  option("maxHighlightLength", 10000, function(cm){loadMode(cm); cm.refresh();}, true);
-  option("crudeMeasuringFrom", 10000);
-  option("moveInputWithCursor", true, function(cm, val) {
-    if (!val) cm.display.inputDiv.style.top = cm.display.inputDiv.style.left = 0;
-  });
-
-  option("tabindex", null, function(cm, val) {
-    cm.display.input.tabIndex = val || "";
-  });
-  option("autofocus", null);
-
-  // MODE DEFINITION AND QUERYING
-
-  // Known modes, by name and by MIME
-  var modes = CodeMirror.modes = {}, mimeModes = CodeMirror.mimeModes = {};
-
-  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]);
-    }
-    modes[name] = mode;
-  };
-
-  CodeMirror.defineMIME = function(mime, spec) {
-    mimeModes[mime] = spec;
-  };
-
-  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];
-      spec = createObj(found, spec);
-      spec.name = found.name;
-    } else if (typeof spec == "string" && /^[\w\-]+\/[\w\-]+\+xml$/.test(spec)) {
-      return CodeMirror.resolveMode("application/xml");
-    }
-    if (typeof spec == "string") return {name: spec};
-    else return spec || {name: "null"};
-  };
-
-  CodeMirror.getMode = function(options, spec) {
-    var spec = CodeMirror.resolveMode(spec);
-    var mfactory = modes[spec.name];
-    if (!mfactory) return CodeMirror.getMode(options, "text/plain");
-    var modeObj = mfactory(options, spec);
-    if (modeExtensions.hasOwnProperty(spec.name)) {
-      var exts = modeExtensions[spec.name];
-      for (var prop in exts) {
-        if (!exts.hasOwnProperty(prop)) continue;
-        if (modeObj.hasOwnProperty(prop)) modeObj["_" + prop] = modeObj[prop];
-        modeObj[prop] = exts[prop];
-      }
-    }
-    modeObj.name = spec.name;
-
-    return modeObj;
-  };
-
-  CodeMirror.defineMode("null", function() {
-    return {token: function(stream) {stream.skipToEnd();}};
-  });
-  CodeMirror.defineMIME("text/plain", "null");
-
-  var modeExtensions = CodeMirror.modeExtensions = {};
-  CodeMirror.extendMode = function(mode, properties) {
-    var exts = modeExtensions.hasOwnProperty(mode) ? modeExtensions[mode] : (modeExtensions[mode] = {});
-    copyObj(properties, exts);
-  };
-
-  // EXTENSIONS
-
-  CodeMirror.defineExtension = function(name, func) {
-    CodeMirror.prototype[name] = func;
-  };
-  CodeMirror.defineDocExtension = function(name, func) {
-    Doc.prototype[name] = func;
-  };
-  CodeMirror.defineOption = option;
-
-  var initHooks = [];
-  CodeMirror.defineInitHook = function(f) {initHooks.push(f);};
-
-  var helpers = CodeMirror.helpers = {};
   CodeMirror.registerHelper = function(type, name, value) {
-    if (!helpers.hasOwnProperty(type)) helpers[type] = CodeMirror[type] = {};
-    helpers[type][name] = value;
-  };
-
-  // UTILITIES
-
-  CodeMirror.isWordChar = isWordChar;
-
-  // MODE STATE HANDLING
-
-  // Utility functions for working with state. Exported because modes
-  // sometimes need to do this.
-  function copyState(mode, state) {
-    if (state === true) return state;
-    if (mode.copyState) return mode.copyState(state);
-    var nstate = {};
-    for (var n in state) {
-      var val = state[n];
-      if (val instanceof Array) val = val.concat([]);
-      nstate[n] = val;
-    }
-    return nstate;
-  }
-  CodeMirror.copyState = copyState;
-
-  function startState(mode, a1, a2) {
-    return mode.startState ? mode.startState(a1, a2) : true;
-  }
-  CodeMirror.startState = startState;
-
-  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;
-    }
-    return info || {mode: mode, state: state};
-  };
-
-  // STANDARD COMMANDS
-
-  var commands = CodeMirror.commands = {
-    selectAll: function(cm) {cm.setSelection(Pos(cm.firstLine(), 0), Pos(cm.lastLine()));},
-    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");
-    },
-    deleteLine: function(cm) {
-      var l = cm.getCursor().line;
-      cm.replaceRange("", Pos(l, 0), Pos(l), "+delete");
-    },
-    delLineLeft: function(cm) {
-      var cur = cm.getCursor();
-      cm.replaceRange("", Pos(cur.line, 0), cur, "+delete");
-    },
-    undo: function(cm) {cm.undo();},
-    redo: function(cm) {cm.redo();},
-    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));
-    },
-    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);
-    },
-    goLineEnd: function(cm) {
-      cm.extendSelection(lineEnd(cm, cm.getCursor().line));
-    },
-    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"));
-    },
-    goLineLeft: function(cm) {
-      var top = cm.charCoords(cm.getCursor(), "div").top + 5;
-      cm.extendSelection(cm.coordsChar({left: 0, top: top}, "div"));
-    },
-    goLineUp: function(cm) {cm.moveV(-1, "line");},
-    goLineDown: function(cm) {cm.moveV(1, "line");},
-    goPageUp: function(cm) {cm.moveV(-1, "page");},
-    goPageDown: function(cm) {cm.moveV(1, "page");},
-    goCharLeft: function(cm) {cm.moveH(-1, "char");},
-    goCharRight: function(cm) {cm.moveH(1, "char");},
-    goColumnLeft: function(cm) {cm.moveH(-1, "column");},
-    goColumnRight: function(cm) {cm.moveH(1, "column");},
-    goWordLeft: function(cm) {cm.moveH(-1, "word");},
-    goGroupRight: function(cm) {cm.moveH(1, "group");},
-    goGroupLeft: function(cm) {cm.moveH(-1, "group");},
-    goWordRight: function(cm) {cm.moveH(1, "word");},
-    delCharBefore: function(cm) {cm.deleteH(-1, "char");},
-    delCharAfter: function(cm) {cm.deleteH(1, "char");},
-    delWordBefore: function(cm) {cm.deleteH(-1, "word");},
-    delWordAfter: function(cm) {cm.deleteH(1, "word");},
-    delGroupBefore: function(cm) {cm.deleteH(-1, "group");},
-    delGroupAfter: function(cm) {cm.deleteH(1, "group");},
-    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");},
-    defaultTab: function(cm) {
-      if (cm.somethingSelected()) cm.indentSelection("add");
-      else cm.replaceSelection("\t", "end", "+input");
-    },
-    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));
-    },
-    newlineAndIndent: function(cm) {
-      operation(cm, function() {
-        cm.replaceSelection("\n", "end", "+input");
-        cm.indentLine(cm.getCursor().line, null, true);
-      })();
-    },
-    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", "Shift-Backspace": "delCharBefore",
-    "Tab": "defaultTab", "Shift-Tab": "indentAuto",
-    "Enter": "newlineAndIndent", "Insert": "toggleOverwrite"
-  };
-  // Note that the save and find-related commands aren't defined by
-  // default. 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-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",
-    fallthrough: "basic"
-  };
-  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",
-    "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",
-    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;
-      }
-      return false;
-    }
-
-    for (var i = 0; i < maps.length; ++i) {
-      var done = lookup(maps[i]);
-      if (done) return done != "stop";
-    }
-  }
-  function isModifierKey(event) {
-    var name = keyNames[event.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];
-    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;
-    return name;
-  }
-  CodeMirror.lookupKey = lookupKey;
-  CodeMirror.isModifierKey = isModifierKey;
-  CodeMirror.keyName = keyName;
-
-  // FROMTEXTAREA
-
-  CodeMirror.fromTextArea = function(textarea, options) {
-    if (!options) options = {};
-    options.value = textarea.value;
-    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) {}
-      options.autofocus = hasFocus == textarea ||
-        textarea.getAttribute("autofocus") != null && hasFocus == document.body;
-    }
-
-    function save() {textarea.value = cm.getValue();}
-    if (textarea.form) {
-      on(textarea.form, "submit", save);
-      // Deplorable hack to make the submit method do the right thing.
-      if (!options.leaveSubmitMethodAlone) {
-        var form = textarea.form, realSubmit = form.submit;
-        try {
-          var wrappedSubmit = form.submit = function() {
-            save();
-            form.submit = realSubmit;
-            form.submit();
-            form.submit = wrappedSubmit;
-          };
-        } catch(e) {}
-      }
-    }
-
-    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;
-  };
-
-  // STRING STREAM
-
-  // 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) {
-    this.pos = this.start = 0;
-    this.string = string;
-    this.tabSize = tabSize || 8;
-    this.lastColumnPos = this.lastColumnValue = 0;
-  }
-
-  StringStream.prototype = {
-    eol: function() {return this.pos >= this.string.length;},
-    sol: function() {return this.pos == 0;},
-    peek: function() {return this.string.charAt(this.pos) || undefined;},
-    next: function() {
-      if (this.pos < this.string.length)
-        return this.string.charAt(this.pos++);
-    },
-    eat: function(match) {
-      var ch = this.string.charAt(this.pos);
-      if (typeof match == "string") var ok = ch == match;
-      else var ok = ch && (match.test ? match.test(ch) : match(ch));
-      if (ok) {++this.pos; return ch;}
-    },
-    eatWhile: function(match) {
-      var start = this.pos;
-      while (this.eat(match)){}
-      return this.pos > start;
-    },
-    eatSpace: function() {
-      var start = this.pos;
-      while (/[\s\u00a0]/.test(this.string.charAt(this.pos))) ++this.pos;
-      return this.pos > start;
-    },
-    skipToEnd: function() {this.pos = this.string.length;},
-    skipTo: function(ch) {
-      var found = this.string.indexOf(ch, this.pos);
-      if (found > -1) {this.pos = found; return true;}
-    },
-    backUp: function(n) {this.pos -= n;},
-    column: function() {
-      if (this.lastColumnPos < this.start) {
-        this.lastColumnValue = countColumn(this.string, this.start, this.tabSize, this.lastColumnPos, this.lastColumnValue);
-        this.lastColumnPos = this.start;
-      }
-      return this.lastColumnValue;
-    },
-    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;};
-        var substr = this.string.substr(this.pos, pattern.length);
-        if (cased(substr) == cased(pattern)) {
-          if (consume !== false) this.pos += pattern.length;
-          return true;
-        }
-      } else {
-        var match = this.string.slice(this.pos).match(pattern);
-        if (match && match.index > 0) return null;
-        if (match && consume !== false) this.pos += match[0].length;
-        return match;
-      }
-    },
-    current: function(){return this.string.slice(this.start, this.pos);}
-  };
-  CodeMirror.StringStream = StringStream;
-
-  // TEXTMARKERS
-
-  function TextMarker(doc, type) {
-    this.lines = [];
-    this.type = type;
-    this.doc = doc;
-  }
-  CodeMirror.TextMarker = TextMarker;
-  eventMixin(TextMarker);
-
-  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);
-      line.markedSpans = removeMarkedSpan(line.markedSpans, span);
-      if (span.from != null)
-        min = lineNo(line);
-      else if (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);
-      if (len > cm.display.maxLineLength) {
-        cm.display.maxLine = visual;
-        cm.display.maxLineLength = len;
-        cm.display.maxLineChanged = true;
-      }
-    }
-
-    if (min != null && cm) 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 (withOp) endOperation(cm);
-  };
-
-  TextMarker.prototype.find = function() {
-    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 (this.type == "bookmark") return from;
-    return from && {from: from, to: to};
-  };
-
-  TextMarker.prototype.changed = function() {
-    var pos = this.find(), cm = this.doc.cm;
-    if (!pos || !cm) return;
-    if (this.type != "bookmark") pos = pos.from;
-    var line = getLine(this.doc, pos.line);
-    clearCachedMeasurement(cm, line);
-    if (pos.line >= cm.display.showingFrom && pos.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() {
-        cm.curOp.selectionChanged = cm.curOp.forceUpdate = cm.curOp.updateMaxLine = true;
-      });
-    }
-  };
-
-  TextMarker.prototype.attachLine = function(line) {
-    if (!this.lines.length && this.doc.cm) {
-      var op = this.doc.cm.curOp;
-      if (!op.maybeHiddenMarkers || indexOf(op.maybeHiddenMarkers, this) == -1)
-        (op.maybeUnhiddenMarkers || (op.maybeUnhiddenMarkers = [])).push(this);
-    }
-    this.lines.push(line);
-  };
-  TextMarker.prototype.detachLine = function(line) {
-    this.lines.splice(indexOf(this.lines, line), 1);
-    if (!this.lines.length && this.doc.cm) {
-      var op = this.doc.cm.curOp;
-      (op.maybeHiddenMarkers || (op.maybeHiddenMarkers = [])).push(this);
-    }
-  };
-
-  function markText(doc, from, to, options, type) {
-    if (options && options.shared) return markTextShared(doc, from, to, options, type);
-    if (doc.cm && !doc.cm.curOp) return operation(doc.cm, markText)(doc, from, to, options, type);
-
-    var marker = new TextMarker(doc, type);
-    if (posLess(to, from) || posEq(from, to) && type == "range" &&
-        !(options.inclusiveLeft && options.inclusiveRight))
-      return marker;
-    if (options) copyObj(options, marker);
-    if (marker.replacedWith) {
-      marker.collapsed = true;
-      marker.replacedWith = elt("span", [marker.replacedWith], "CodeMirror-widget");
-      if (!options.handleMouseEvents) marker.replacedWith.ignoreEvents = 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);
-
-    var curLine = from.line, size = 0, collapsedAtStart, collapsedAtEnd, 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)
-        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);
-      ++curLine;
-    });
-    if (marker.collapsed) doc.iter(from.line, to.line + 1, function(line) {
-      if (lineIsHidden(doc, line)) updateLineHeight(line, 0);
-    });
-
-    if (marker.clearOnEnter) on(marker, "beforeCursorEnter", function() { marker.clear(); });
-
-    if (marker.readOnly) {
-      sawReadOnlySpans = true;
-      if (doc.history.done.length || doc.history.undone.length)
-        doc.clearHistory();
-    }
-    if (marker.collapsed) {
-      if (collapsedAtStart != collapsedAtEnd)
-        throw new Error("Inserting collapsed marker overlapping an existing one");
-      marker.size = size;
-      marker.atomic = true;
-    }
-    if (cm) {
-      if (updateMaxLine) cm.curOp.updateMaxLine = true;
-      if (marker.className || marker.title || marker.startStyle || marker.endStyle || marker.collapsed)
-        regChange(cm, from.line, to.line + 1);
-      if (marker.atomic) reCheckSelection(cm);
-    }
-    return marker;
-  }
-
-  // SHARED TEXTMARKERS
-
-  function SharedTextMarker(markers, primary) {
-    this.markers = markers;
-    this.primary = primary;
-    for (var i = 0, me = this; i < markers.length; ++i) {
-      markers[i].parent = this;
-      on(markers[i], "clear", function(){me.clear();});
-    }
-  }
-  CodeMirror.SharedTextMarker = SharedTextMarker;
-  eventMixin(SharedTextMarker);
-
-  SharedTextMarker.prototype.clear = function() {
-    if (this.explicitlyCleared) return;
-    this.explicitlyCleared = true;
-    for (var i = 0; i < this.markers.length; ++i)
-      this.markers[i].clear();
-    signalLater(this, "clear");
-  };
-  SharedTextMarker.prototype.find = function() {
-    return this.primary.find();
-  };
-
-  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;
-    linkedDocs(doc, function(doc) {
-      if (widget) options.replacedWith = 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;
-      primary = lst(markers);
-    });
-    return new SharedTextMarker(markers, primary);
-  }
-
-  // TEXTMARKER SPANS
-
-  function getMarkedSpanFor(spans, marker) {
-    if (spans) for (var i = 0; i < spans.length; ++i) {
-      var span = spans[i];
-      if (span.marker == marker) return span;
-    }
-  }
-  function removeMarkedSpan(spans, span) {
-    for (var r, i = 0; i < spans.length; ++i)
-      if (spans[i] != span) (r || (r = [])).push(spans[i]);
-    return r;
-  }
-  function addMarkedSpan(line, span) {
-    line.markedSpans = line.markedSpans ? line.markedSpans.concat([span]) : [span];
-    span.marker.attachLine(line);
-  }
-
-  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.inclusiveLeft && marker.inclusiveRight || marker.type == "bookmark") &&
-          span.from == startCh && (!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});
-      }
-    }
-    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)) {
-        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});
-      }
-    }
-    return nw;
-  }
-
-  function stretchSpansOverChange(doc, change) {
-    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);
-    // Get the spans that 'stick out' on both sides
-    var first = markedSpansBefore(oldFirst, startCh, isInsert);
-    var last = markedSpansAfter(oldLast, endCh, isInsert);
-
-    // Next, merge those two ends
-    var sameLine = change.text.length == 1, offset = lst(change.text).length + (sameLine ? startCh : 0);
-    if (first) {
-      // Fix up .to properties of first
-      for (var i = 0; i < first.length; ++i) {
-        var span = first[i];
-        if (span.to == null) {
-          var found = getMarkedSpanFor(last, span.marker);
-          if (!found) span.to = startCh;
-          else if (sameLine) span.to = found.to == null ? null : found.to + offset;
-        }
-      }
-    }
-    if (last) {
-      // Fix up .from in last (or move them into first in case of sameLine)
-      for (var i = 0; i < last.length; ++i) {
-        var span = last[i];
-        if (span.to != null) span.to += offset;
-        if (span.from == null) {
-          var found = getMarkedSpanFor(first, span.marker);
-          if (!found) {
-            span.from = offset;
-            if (sameLine) (first || (first = [])).push(span);
-          }
-        } else {
-          span.from += offset;
-          if (sameLine) (first || (first = [])).push(span);
-        }
-      }
-    }
-    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;
-    }
-
-    var newMarkers = [first];
-    if (!sameLine) {
-      // Fill gap with whole-line-spans
-      var gap = change.text.length - 2, gapMarkers;
-      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});
-      for (var i = 0; i < gap; ++i)
-        newMarkers.push(gapMarkers);
-      newMarkers.push(last);
-    }
-    return newMarkers;
-  }
-
-  function mergeOldSpans(doc, change) {
-    var old = getOldSpans(doc, change);
-    var stretched = stretchSpansOverChange(doc, change);
-    if (!old) return stretched;
-    if (!stretched) return old;
-
-    for (var i = 0; i < old.length; ++i) {
-      var oldCur = old[i], stretchCur = stretched[i];
-      if (oldCur && stretchCur) {
-        spans: for (var j = 0; j < stretchCur.length; ++j) {
-          var span = stretchCur[j];
-          for (var k = 0; k < oldCur.length; ++k)
-            if (oldCur[k].marker == span.marker) continue spans;
-          oldCur.push(span);
-        }
-      } else if (stretchCur) {
-        old[i] = stretchCur;
-      }
-    }
-    return old;
-  }
-
-  function removeReadOnlyRanges(doc, from, to) {
-    var markers = null;
-    doc.iter(from.line, to.line + 1, function(line) {
-      if (line.markedSpans) for (var i = 0; i < line.markedSpans.length; ++i) {
-        var mark = line.markedSpans[i].marker;
-        if (mark.readOnly && (!markers || indexOf(markers, mark) == -1))
-          (markers || (markers = [])).push(mark);
-      }
-    });
-    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();
-      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))
-          newParts.push({from: p.from, to: m.from});
-        if (posLess(m.to, p.to) || !mk.inclusiveRight && posEq(p.to, m.to))
-          newParts.push({from: m.to, to: p.to});
-        parts.splice.apply(parts, newParts);
-        j += newParts.length - 1;
-      }
-    }
-    return parts;
-  }
-
-  function collapsedSpanAt(line, ch) {
-    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))
-        found = sp.marker;
-    }
-    return found;
-  }
-  function collapsedSpanAtStart(line) { return collapsedSpanAt(line, -1); }
-  function collapsedSpanAtEnd(line) { return collapsedSpanAt(line, line.text.length + 1); }
-
-  function visualLine(doc, line) {
-    var merged;
-    while (merged = collapsedSpanAtStart(line))
-      line = getLine(doc, merged.find().from.line);
-    return line;
-  }
-
-  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.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));
-    }
-    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 &&
-          (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) {
-    if (options) for (var opt in options) if (options.hasOwnProperty(opt))
-      this[opt] = options[opt];
-    this.cm = cm;
-    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;
-    };
-  }
-  LineWidget.prototype.clear = widgetOperation(function() {
-    var ws = this.line.widgets, no = lineNo(this.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;
-    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);
-  });
-
-  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"));
-    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) {
-      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;
-        updateLineHeight(line, line.height + widgetHeight(widget));
-        if (aboveVisible) addToScrollPos(cm, 0, widget.height);
-      }
-      return true;
-    });
-    return widget;
-  }
-
-  // LINE DATA STRUCTURE
-
-  // Line objects. These hold state related to a line, including
-  // highlighting info (the styles array).
-  var Line = CodeMirror.Line = function(text, markedSpans, estimateHeight) {
-    this.text = text;
-    attachMarkedSpans(this, markedSpans);
-    this.height = estimateHeight ? estimateHeight(this) : 1;
-  };
-  eventMixin(Line);
-  Line.prototype.lineNo = function() { return lineNo(this); };
-
-  function updateLine(line, text, markedSpans, estimateHeight) {
-    line.text = text;
-    if (line.stateAfter) line.stateAfter = null;
-    if (line.styles) line.styles = null;
-    if (line.order != null) line.order = null;
-    detachMarkedSpans(line);
-    attachMarkedSpans(line, markedSpans);
-    var estHeight = estimateHeight ? estimateHeight(line) : 1;
-    if (estHeight != line.height) updateLineHeight(line, estHeight);
-  }
-
-  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, 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);
-    while (!stream.eol()) {
-      if (stream.pos > cm.options.maxHighlightLength) {
-        flattenSpans = false;
-        if (forceToEnd) processLine(cm, text, state, stream.pos);
-        stream.pos = text.length;
-        style = null;
-      } else {
-        style = mode.token(stream, state);
-      }
-      if (!flattenSpans || curStyle != style) {
-        if (curStart < stream.start) f(stream.start, curStyle);
-        curStart = stream.start; curStyle = style;
-      }
-      stream.start = stream.pos;
-    }
-    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, 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];
-    // Compute the base array of styles
-    runMode(cm, line.text, cm.doc.mode, state, function(end, style) {
-      st.push(end, style);
-    }, forceToEnd);
-
-    // Run overlays, adjust style array.
-    for (var o = 0; o < cm.state.overlays.length; ++o) {
-      var overlay = cm.state.overlays[o], i = 1, at = 0;
-      runMode(cm, line.text, overlay.mode, true, function(end, style) {
-        var start = i;
-        // Ensure there's a token end at the current position, and that i points at it
-        while (at < end) {
-          var i_end = st[i];
-          if (i_end > end)
-            st.splice(i, 1, end, st[i+1], i_end);
-          i += 2;
-          at = Math.min(end, i_end);
-        }
-        if (!style) return;
-        if (overlay.opaque) {
-          st.splice(start, i - start, end, style);
-          i = start + 2;
-        } else {
-          for (; start < i; start += 2) {
-            var cur = st[start+1];
-            st[start+1] = cur ? cur + " " + style : style;
-          }
-        }
-      });
-    }
-
-    return st;
-  }
-
-  function getLineStyles(cm, line) {
-    if (!line.styles || line.styles[0] != cm.state.modeGen)
-      line.styles = highlightLine(cm, line, line.stateAfter = getStateBefore(cm, lineNo(line)));
-    return line.styles;
-  }
-
-  // Lightweight form of highlight -- proceed over this line and
-  // update state, but don't save a style array.
-  function processLine(cm, text, state, startAt) {
-    var mode = cm.doc.mode;
-    var stream = new StringStream(text, cm.options.tabSize);
-    stream.start = stream.pos = startAt || 0;
-    if (text == "" && mode.blankLine) mode.blankLine(state);
-    while (!stream.eol() && stream.pos <= cm.options.maxHighlightLength) {
-      mode.token(stream, state);
-      stream.start = stream.pos;
-    }
-  }
-
-  var styleToClassCache = {};
-  function interpretTokenStyle(style, builder) {
-    if (!style) return null;
-    for (;;) {
-      var lineClass = style.match(/(?:^|\s)line-(background-)?(\S+)/);
-      if (!lineClass) break;
-      style = style.slice(0, lineClass.index) + style.slice(lineClass.index + lineClass[0].length);
-      var prop = lineClass[1] ? "bgClass" : "textClass";
-      if (builder[prop] == null)
-        builder[prop] = lineClass[2];
-      else if (!(new RegExp("(?:^|\s)" + lineClass[2] + "(?:$|\s)")).test(builder[prop]))
-        builder[prop] += " " + lineClass[2];
-    }
-    return styleToClassCache[style] ||
-      (styleToClassCache[style] = "cm-" + style.replace(/ +/g, " cm-"));
-  }
-
-  function buildLineContent(cm, realLine, measure, copyWidgets) {
-    var merged, line = realLine, empty = true;
-    while (merged = collapsedSpanAtStart(line))
-      line = getLine(cm.doc, merged.find().from.line);
-
-    var builder = {pre: elt("pre"), col: 0, pos: 0,
-                   measure: null, measuredSomething: false, cm: cm,
-                   copyWidgets: copyWidgets};
-
-    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 || ie_gt10) && (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);
+    if (!helpers.hasOwnProperty(type)) { helpers[type] = CodeMirror[type] = {_global: []} }
+    helpers[type][name] = value
+  }
+  CodeMirror.registerGlobalHelper = function(type, name, predicate, value) {
+    CodeMirror.registerHelper(type, name, value)
+    helpers[type]._global.push({pred: predicate, val: value})
+  }
+}
+
+// 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)
+  function findNextLine() {
+    var l = line + dir
+    if (l < doc.first || l >= doc.first + doc.size) { return false }
+    line = l
+    return lineObj = getLine(doc, l)
+  }
+  function moveOnce(boundToLine) {
+    var next = (visually ? moveVisually : moveLogically)(lineObj, ch, dir, true)
+    if (next == null) {
+      if (!boundToLine && findNextLine()) {
+        if (visually) { ch = (dir < 0 ? lineRight : lineLeft)(lineObj) }
+        else { ch = dir < 0 ? lineObj.text.length : 0 }
+      } else { return false }
+    } else { ch = next }
+    return true
+  }
+
+  if (unit == "char") {
+    moveOnce()
+  } 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, 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
       }
-    }
-
-    var textClass = builder.textClass ? builder.textClass + " " + (realLine.textClass || "") : realLine.textClass;
-    if (textClass) builder.pre.className = textClass;
-
-    signal(cm, "renderLine", cm, realLine, builder.pre);
-    return builder;
-  }
-
-  function defaultSpecialCharPlaceholder(ch) {
-    var token = elt("span", "\u2022", "cm-invalidchar");
-    token.title = "\\u" + ch.charCodeAt(0).toString(16);
-    return token;
-  }
 
-  function buildToken(builder, text, style, startStyle, endStyle, title) {
-    if (!text) return;
-    var special = builder.cm.options.specialChars;
-    if (!special.test(text)) {
-      builder.col += text.length;
-      var content = document.createTextNode(text);
+      if (type) { sawType = type }
+      if (dir > 0 && !moveOnce(!first)) { break }
+    }
+  }
+  var result = skipAtomic(doc, Pos(line, ch), pos, origDir, true)
+  if (!cmp(pos, result)) { result.hitSide = true }
+  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") {
+    var pageSize = Math.min(cm.display.wrapper.clientHeight, window.innerHeight || document.documentElement.clientHeight)
+    var moveAmount = Math.max(pageSize - .5 * textHeight(cm.display), 3)
+    y = (dir > 0 ? pos.bottom : pos.top) + dir * moveAmount
+
+  } else if (unit == "line") {
+    y = dir > 0 ? pos.bottom + 3 : pos.top - 3
+  }
+  var target
+  for (;;) {
+    target = coordsChar(cm, x, y)
+    if (!target.outside) { break }
+    if (dir < 0 ? y <= 0 : y >= doc.height) { target.hitSide = true; break }
+    y += dir * 5
+  }
+  return target
+}
+
+// CONTENTEDITABLE INPUT STYLE
+
+var ContentEditableInput = function(cm) {
+  this.cm = cm
+  this.lastAnchorNode = this.lastAnchorOffset = this.lastFocusNode = this.lastFocusOffset = null
+  this.polling = new Delayed()
+  this.composing = null
+  this.gracePeriod = false
+  this.readDOMTimeout = null
+};
+
+ContentEditableInput.prototype.init = function (display) {
+    var this$1 = this;
+
+  var input = this, cm = input.cm
+  var div = input.div = display.lineDiv
+  disableBrowserMagic(div, cm.options.spellcheck)
+
+  on(div, "paste", function (e) {
+    if (signalDOMEvent(cm, e) || handlePaste(e, cm)) { return }
+    // IE doesn't fire input events, so we schedule a read for the pasted content in this way
+    if (ie_version <= 11) { setTimeout(operation(cm, function () {
+      if (!input.pollContent()) { regChange(cm) }
+    }), 20) }
+  })
+
+  on(div, "compositionstart", function (e) {
+    this$1.composing = {data: e.data, done: false}
+  })
+  on(div, "compositionupdate", function (e) {
+    if (!this$1.composing) { this$1.composing = {data: e.data, done: false} }
+  })
+  on(div, "compositionend", function (e) {
+    if (this$1.composing) {
+      if (e.data != this$1.composing.data) { this$1.readFromDOMSoon() }
+      this$1.composing.done = true
+    }
+  })
+
+  on(div, "touchstart", function () { return input.forceCompositionEnd(); })
+
+  on(div, "input", function () {
+    if (!this$1.composing) { this$1.readFromDOMSoon() }
+  })
+
+  function onCopyCut(e) {
+    if (signalDOMEvent(cm, e)) { return }
+    if (cm.somethingSelected()) {
+      setLastCopied({lineWise: false, text: cm.getSelections()})
+      if (e.type == "cut") { cm.replaceSelection("", null, "cut") }
+    } else if (!cm.options.lineWiseCopyCut) {
+      return
     } else {
-      var content = document.createDocumentFragment(), pos = 0;
-      while (true) {
-        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)));
-          builder.col += 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"));
-          builder.col += tabWidth;
-        } else {
-          var token = builder.cm.options.specialCharPlaceholder(m[0]);
-          content.appendChild(token);
-          builder.col += 1;
-        }
+      var ranges = copyableRanges(cm)
+      setLastCopied({lineWise: true, text: ranges.text})
+      if (e.type == "cut") {
+        cm.operation(function () {
+          cm.setSelections(ranges.ranges, 0, sel_dontScroll)
+          cm.replaceSelection("", null, "cut")
+        })
       }
     }
-    if (style || startStyle || endStyle || builder.measure) {
-      var fullStyle = style || "";
-      if (startStyle) fullStyle += startStyle;
-      if (endStyle) fullStyle += endStyle;
-      var token = elt("span", [content], fullStyle);
-      if (title) token.title = title;
-      return builder.pre.appendChild(token);
-    }
-    builder.pre.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"));
+    if (e.clipboardData) {
+      e.clipboardData.clearData()
+      var content = lastCopied.text.join("\n")
+      // iOS exposes the clipboard API, but seems to discard content inserted into it
+      e.clipboardData.setData("Text", content)
+      if (e.clipboardData.getData("Text") == content) {
+        e.preventDefault()
+        return
       }
-      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,}/g, split), style, startStyle, endStyle, title);
-    };
-  }
-
-  function buildCollapsedSpan(builder, size, marker, ignoreWidget) {
-    var widget = !ignoreWidget && marker.replacedWith;
-    if (widget) {
-      if (builder.copyWidgets) widget = widget.cloneNode(true);
-      builder.pre.appendChild(widget);
-      if (builder.measure) {
-        if (size) {
-          builder.measure[builder.pos] = widget;
-        } else {
-          var elt = zeroWidthElement(builder.cm.display.measure);
-          if (marker.type == "bookmark" && !marker.insertLeft)
-            builder.measure[builder.pos] = builder.pre.appendChild(elt);
-          else if (builder.measure[builder.pos])
-            return;
-          else
-            builder.measure[builder.pos] = builder.pre.insertBefore(elt, widget);
-        }
-        builder.measuredSomething = true;
-      }
-    }
-    builder.pos += size;
-  }
-
-  // Outputs a number of spans to make up a line, taking highlighting
-  // and marked text into account.
-  function insertLineContent(line, builder, styles) {
-    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]), interpretTokenStyle(styles[i+1], builder));
-      return;
-    }
-
-    var len = allText.length, pos = 0, i = 1, text = "", style;
-    var nextChange = 0, spanStyle, spanEndStyle, spanStartStyle, title, collapsed;
-    for (;;) {
-      if (nextChange == pos) { // Update current marker set
-        spanStyle = spanEndStyle = spanStartStyle = title = "";
-        collapsed = null; nextChange = Infinity;
-        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.className) spanStyle += " " + m.className;
-            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))
-              collapsed = sp;
-          } else if (sp.from > pos && nextChange > sp.from) {
-            nextChange = sp.from;
-          }
-          if (m.type == "bookmark" && sp.from == pos && m.replacedWith) foundBookmarks.push(m);
-        }
-        if (collapsed && (collapsed.from || 0) == pos) {
-          buildCollapsedSpan(builder, (collapsed.to == null ? len : collapsed.to) - pos,
-                             collapsed.marker, collapsed.from == null);
-          if (collapsed.to == null) return collapsed.marker.find();
-        }
-        if (!collapsed && foundBookmarks.length) for (var j = 0; j < foundBookmarks.length; ++j)
-          buildCollapsedSpan(builder, 0, foundBookmarks[j]);
-      }
-      if (pos >= len) break;
-
-      var upto = Math.min(len, nextChange);
-      while (true) {
-        if (text) {
-          var end = pos + text.length;
-          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);
-          }
-          if (end >= upto) {text = text.slice(upto - pos); pos = upto; break;}
-          pos = end;
-          spanStartStyle = "";
-        }
-        text = allText.slice(at, at = styles[i++]);
-        style = interpretTokenStyle(styles[i++], builder);
-      }
-    }
-  }
-
-  // DOCUMENT DATA STRUCTURE
-
-  function updateDoc(doc, change, markedSpans, selAfter, estimateHeight) {
-    function spansFor(n) {return markedSpans ? markedSpans[n] : null;}
-    function update(line, text, spans) {
-      updateLine(line, text, spans, estimateHeight);
-      signalLater(line, "change", line, change);
     }
-
-    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 == "" &&
-        (!doc.cm || doc.cm.options.wholeLineUpdateBefore)) {
-      // 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));
-      update(lastLine, lastLine.text, lastSpans);
-      if (nlines) doc.remove(from.line, nlines);
-      if (added.length) doc.insert(from.line, added);
-    } else if (firstLine == lastLine) {
-      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));
-        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);
+    // 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.text.join("\n")
+    var hadFocus = document.activeElement
+    selectInput(te)
+    setTimeout(function () {
+      cm.display.lineSpace.removeChild(kludge)
+      hadFocus.focus()
+      if (hadFocus == div) { input.showPrimarySelection() }
+    }, 50)
+  }
+  on(div, "copy", onCopyCut)
+  on(div, "cut", onCopyCut)
+};
+
+ContentEditableInput.prototype.prepareSelection = function () {
+  var result = prepareSelection(this.cm, false)
+  result.focus = this.cm.state.focused
+  return result
+};
+
+ContentEditableInput.prototype.showSelection = function (info, takeFocus) {
+  if (!info || !this.cm.display.view.length) { return }
+  if (info.focus || takeFocus) { this.showPrimarySelection() }
+  this.showMultipleSelections(info)
+};
+
+ContentEditableInput.prototype.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]}
+  }
+
+  var rng
+  try { 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) {
+    if (!gecko && this.cm.state.focused) {
+      sel.collapse(start.node, start.offset)
+      if (!rng.collapsed) {
+        sel.removeAllRanges()
+        sel.addRange(rng)
       }
-    } else if (text.length == 1) {
-      update(firstLine, firstLine.text.slice(0, from.ch) + text[0] + lastLine.text.slice(to.ch), spansFor(0));
-      doc.remove(from.line + 1, nlines);
     } 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));
-      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);
-  }
-
-  function LeafChunk(lines) {
-    this.lines = lines;
-    this.parent = null;
-    for (var i = 0, e = lines.length, height = 0; i < e; ++i) {
-      lines[i].parent = this;
-      height += lines[i].height;
-    }
-    this.height = height;
-  }
-
-  LeafChunk.prototype = {
-    chunkSize: function() { return this.lines.length; },
-    removeInner: function(at, n) {
-      for (var i = at, e = at + n; i < e; ++i) {
-        var line = this.lines[i];
-        this.height -= line.height;
-        cleanUpLine(line);
-        signalLater(line, "delete");
-      }
-      this.lines.splice(at, n);
-    },
-    collapse: function(lines) {
-      lines.splice.apply(lines, [lines.length, 0].concat(this.lines));
-    },
-    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;
-    },
-    iterN: function(at, n, op) {
-      for (var e = at + n; at < e; ++at)
-        if (op(this.lines[at])) return true;
-    }
-  };
-
-  function BranchChunk(children) {
-    this.children = children;
-    var size = 0, height = 0;
-    for (var i = 0, e = children.length; i < e; ++i) {
-      var ch = children[i];
-      size += ch.chunkSize(); height += ch.height;
-      ch.parent = this;
-    }
-    this.size = size;
-    this.height = height;
-    this.parent = null;
-  }
-
-  BranchChunk.prototype = {
-    chunkSize: function() { return this.size; },
-    removeInner: function(at, n) {
-      this.size -= n;
-      for (var i = 0; i < this.children.length; ++i) {
-        var child = this.children[i], sz = child.chunkSize();
-        if (at < sz) {
-          var rm = Math.min(n, sz - at), oldHeight = child.height;
-          child.removeInner(at, rm);
-          this.height -= oldHeight - child.height;
-          if (sz == rm) { this.children.splice(i--, 1); child.parent = null; }
-          if ((n -= rm) == 0) break;
-          at = 0;
-        } else at -= sz;
+      sel.removeAllRanges()
+      sel.addRange(rng)
+    }
+    if (old && sel.anchorNode == null) { sel.addRange(old) }
+    else if (gecko) { this.startGracePeriod() }
+  }
+  this.rememberSelection()
+};
+
+ContentEditableInput.prototype.startGracePeriod = function () {
+    var this$1 = this;
+
+  clearTimeout(this.gracePeriod)
+  this.gracePeriod = setTimeout(function () {
+    this$1.gracePeriod = false
+    if (this$1.selectionChanged())
+      { this$1.cm.operation(function () { return this$1.cm.curOp.selectionChanged = true; }) }
+  }, 20)
+};
+
+ContentEditableInput.prototype.showMultipleSelections = function (info) {
+  removeChildrenAndAdd(this.cm.display.cursorDiv, info.cursors)
+  removeChildrenAndAdd(this.cm.display.selectionDiv, info.selection)
+};
+
+ContentEditableInput.prototype.rememberSelection = function () {
+  var sel = window.getSelection()
+  this.lastAnchorNode = sel.anchorNode; this.lastAnchorOffset = sel.anchorOffset
+  this.lastFocusNode = sel.focusNode; this.lastFocusOffset = sel.focusOffset
+};
+
+ContentEditableInput.prototype.selectionInEditor = function () {
+  var sel = window.getSelection()
+  if (!sel.rangeCount) { return false }
+  var node = sel.getRangeAt(0).commonAncestorContainer
+  return contains(this.div, node)
+};
+
+ContentEditableInput.prototype.focus = function () {
+  if (this.cm.options.readOnly != "nocursor") {
+    if (!this.selectionInEditor())
+      { this.showSelection(this.prepareSelection(), true) }
+    this.div.focus()
+  }
+};
+ContentEditableInput.prototype.blur = function () { this.div.blur() };
+ContentEditableInput.prototype.getField = function () { return this.div };
+
+ContentEditableInput.prototype.supportsTouch = function () { return true };
+
+ContentEditableInput.prototype.receivedFocus = function () {
+  var input = this
+  if (this.selectionInEditor())
+    { this.pollSelection() }
+  else
+    { runInOp(this.cm, function () { return 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)
+};
+
+ContentEditableInput.prototype.selectionChanged = function () {
+  var sel = window.getSelection()
+  return sel.anchorNode != this.lastAnchorNode || sel.anchorOffset != this.lastAnchorOffset ||
+    sel.focusNode != this.lastFocusNode || sel.focusOffset != this.lastFocusOffset
+};
+
+ContentEditableInput.prototype.pollSelection = function () {
+  if (!this.composing && this.readDOMTimeout == null && !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 }
+    }) }
+  }
+};
+
+ContentEditableInput.prototype.pollContent = function () {
+  if (this.readDOMTimeout != null) {
+    clearTimeout(this.readDOMTimeout)
+    this.readDOMTimeout = null
+  }
+
+  var cm = this.cm, display = cm.display, sel = cm.doc.sel.primary()
+  var from = sel.from(), to = sel.to()
+  if (from.ch == 0 && from.line > cm.firstLine())
+    { from = Pos(from.line - 1, getLine(cm.doc, from.line - 1).length) }
+  if (to.ch == getLine(cm.doc, to.line).text.length && to.line < cm.lastLine())
+    { to = Pos(to.line + 1, 0) }
+  if (from.line < display.viewFrom || to.line > display.viewTo - 1) { return false }
+
+  var fromIndex, fromLine, fromNode
+  if (from.line == display.viewFrom || (fromIndex = findViewIndex(cm, from.line)) == 0) {
+    fromLine = lineNo(display.view[0].line)
+    fromNode = display.view[0].node
+  } else {
+    fromLine = lineNo(display.view[fromIndex].line)
+    fromNode = display.view[fromIndex - 1].node.nextSibling
+  }
+  var toIndex = findViewIndex(cm, to.line)
+  var toLine, toNode
+  if (toIndex == display.view.length - 1) {
+    toLine = display.viewTo - 1
+    toNode = display.lineDiv.lastChild
+  } else {
+    toLine = lineNo(display.view[toIndex + 1].line) - 1
+    toNode = display.view[toIndex + 1].node.previousSibling
+  }
+
+  if (!fromNode) { return false }
+  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).replace(/^\u200b+/, "")
+  newText[0] = newText[0].slice(cutFront).replace(/\u200b+$/, "")
+
+  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
+  }
+};
+
+ContentEditableInput.prototype.ensurePolled = function () {
+  this.forceCompositionEnd()
+};
+ContentEditableInput.prototype.reset = function () {
+  this.forceCompositionEnd()
+};
+ContentEditableInput.prototype.forceCompositionEnd = function () {
+  if (!this.composing) { return }
+  clearTimeout(this.readDOMTimeout)
+  this.composing = null
+  if (!this.pollContent()) { regChange(this.cm) }
+  this.div.blur()
+  this.div.focus()
+};
+ContentEditableInput.prototype.readFromDOMSoon = function () {
+    var this$1 = this;
+
+  if (this.readDOMTimeout != null) { return }
+  this.readDOMTimeout = setTimeout(function () {
+    this$1.readDOMTimeout = null
+    if (this$1.composing) {
+      if (this$1.composing.done) { this$1.composing = null }
+      else { return }
+    }
+    if (this$1.cm.isReadOnly() || !this$1.pollContent())
+      { runInOp(this$1.cm, function () { return regChange(this$1.cm); }) }
+  }, 80)
+};
+
+ContentEditableInput.prototype.setUneditable = function (node) {
+  node.contentEditable = "false"
+};
+
+ContentEditableInput.prototype.onKeyPress = function (e) {
+  e.preventDefault()
+  if (!this.cm.isReadOnly())
+    { operation(this.cm, applyTextInput)(this.cm, String.fromCharCode(e.charCode == null ? e.keyCode : e.charCode), 0) }
+};
+
+ContentEditableInput.prototype.readOnlyChanged = function (val) {
+  this.div.contentEditable = String(val != "nocursor")
+};
+
+ContentEditableInput.prototype.onContextMenu = function () {};
+ContentEditableInput.prototype.resetPosition = function () {};
+
+ContentEditableInput.prototype.needsContentAttribute = true
+
+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 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 == "") { text += node.textContent.replace(/\u200b/g, "") }
+        else { text += cmText }
+        return
       }
-      if (this.size - n < 25) {
-        var lines = [];
-        this.collapse(lines);
-        this.children = [new LeafChunk(lines)];
-        this.children[0].parent = this;
+      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
       }
-    },
-    collapse: function(lines) {
-      for (var i = 0, e = this.children.length; i < e; ++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) {
-        var child = this.children[i], sz = child.chunkSize();
-        if (at <= sz) {
-          child.insertInner(at, lines, height);
-          if (child.lines && child.lines.length > 50) {
-            while (child.lines.length > 50) {
-              var spilled = child.lines.splice(child.lines.length - 25, 25);
-              var newleaf = new LeafChunk(spilled);
-              child.height -= newleaf.height;
-              this.children.splice(i + 1, 0, newleaf);
-              newleaf.parent = this;
-            }
-            this.maybeSpill();
-          }
-          break;
-        }
-        at -= sz;
+      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
       }
-    },
-    maybeSpill: function() {
-      if (this.children.length <= 10) return;
-      var me = this;
-      do {
-        var spilled = me.children.splice(me.children.length - 5, 5);
-        var sibling = new BranchChunk(spilled);
-        if (!me.parent) { // Become the parent node
-          var copy = new BranchChunk(me.children);
-          copy.parent = me;
-          me.children = [copy, sibling];
-          me = copy;
-        } else {
-          me.size -= sibling.size;
-          me.height -= sibling.height;
-          var myIndex = indexOf(me.parent.children, me);
-          me.parent.children.splice(myIndex + 1, 0, sibling);
+      text += val
+    }
+  }
+  for (;;) {
+    walk(from)
+    if (from == to) { break }
+    from = from.nextSibling
+  }
+  return text
+}
+
+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)
         }
-        sibling.parent = me.parent;
-      } while (me.children.length > 10);
-      me.parent.maybeSpill();
-    },
-    iterN: function(at, n, op) {
-      for (var i = 0, e = this.children.length; i < e; ++i) {
-        var child = this.children[i], sz = child.chunkSize();
-        if (at < sz) {
-          var used = Math.min(n, sz - at);
-          if (child.iterN(at, used, op)) return true;
-          if ((n -= used) == 0) break;
-          at = 0;
-        } else at -= sz;
       }
     }
-  };
-
-  var nextDocId = 0;
-  var Doc = CodeMirror.Doc = function(text, mode, firstLine) {
-    if (!(this instanceof Doc)) return new Doc(text, mode, firstLine);
-    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.id = ++nextDocId;
-    this.modeOption = mode;
-
-    if (typeof text == "string") text = splitLines(text);
-    updateDoc(this, {from: start, to: start, text: text}, null, {head: start, anchor: start});
-  };
-
-  Doc.prototype = createObj(BranchChunk.prototype, {
-    constructor: Doc,
-    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);
-    },
-
-    insert: function(at, lines) {
-      var height = 0;
-      for (var i = 0, e = lines.length; i < e; ++i) height += lines[i].height;
-      this.insertInner(at - this.first, lines, height);
-    },
-    remove: function(at, n) { this.removeInner(at - this.first, n); },
-
-    getValue: function(lineSep) {
-      var lines = getLines(this, this.first, this.first + this.size);
-      if (lineSep === false) return lines;
-      return lines.join(lineSep || "\n");
-    },
-    setValue: 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);
-    },
-    replaceRange: function(code, from, to, origin) {
-      from = clipPos(this, from);
-      to = to ? clipPos(this, to) : from;
-      replaceRange(this, code, from, to, origin);
-    },
-    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");
-    },
-
-    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);
-    },
-
-    lineCount: function() {return this.size;},
-    firstLine: function() {return this.first;},
-    lastLine: function() {return this.first + this.size - 1;},
-
-    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);
-    },
-    somethingSelected: function() {return !posEq(this.sel.head, this.sel.anchor);},
-
-    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);
-    }),
-    setSelection: docOperation(function(anchor, head, bias) {
-      setSelection(this, clipPos(this, anchor), clipPos(this, head || anchor), bias);
-    }),
-    extendSelection: docOperation(function(from, to, bias) {
-      extendSelection(this, clipPos(this, from), to && clipPos(this, to), bias);
-    }),
-
-    getSelection: function(lineSep) {return this.getRange(this.sel.from, this.sel.to, lineSep);},
-    replaceSelection: function(code, collapse, origin) {
-      makeChange(this, {from: this.sel.from, to: this.sel.to, text: splitLines(code), origin: origin}, collapse || "around");
-    },
-    undo: docOperation(function() {makeChangeFromHistory(this, "undo");}),
-    redo: docOperation(function() {makeChangeFromHistory(this, "redo");}),
-
-    setExtending: function(val) {this.sel.extend = val;},
-
-    historySize: function() {
-      var hist = this.history;
-      return {undo: hist.done.length, redo: hist.undone.length};
-    },
-    clearHistory: function() {this.history = makeHistory(this.history.maxGeneration);},
-
-    markClean: function() {
-      this.cleanGeneration = this.changeGeneration();
-    },
-    changeGeneration: function() {
-      this.history.lastOp = this.history.lastOrigin = null;
-      return this.history.generation;
-    },
-    isClean: function (gen) {
-      return this.history.generation == (gen || this.cleanGeneration);
-    },
-
-    getHistory: function() {
-      return {done: copyHistoryArray(this.history.done),
-              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);
-    },
-
-    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};
-      pos = clipPos(this, pos);
-      return markText(this, pos, pos, realOpts, "bookmark");
-    },
-    findMarksAt: function(pos) {
-      pos = clipPos(this, pos);
-      var markers = [], spans = getLine(this, pos.line).markedSpans;
-      if (spans) for (var i = 0; i < spans.length; ++i) {
-        var span = spans[i];
-        if ((span.from == null || span.from <= pos.ch) &&
-            (span.to == null || span.to >= pos.ch))
-          markers.push(span.marker.parent || span.marker);
-      }
-      return markers;
-    },
-    getAllMarks: function() {
-      var markers = [];
-      this.iter(function(line) {
-        var sps = line.markedSpans;
-        if (sps) for (var i = 0; i < sps.length; ++i)
-          if (sps[i].from != null) markers.push(sps[i].marker);
-      });
-      return markers;
-    },
-
-    posFromIndex: function(off) {
-      var ch, lineNo = this.first;
-      this.iter(function(line) {
-        var sz = line.text.length + 1;
-        if (sz > off) { ch = off; return true; }
-        off -= sz;
-        ++lineNo;
-      });
-      return clipPos(this, Pos(lineNo, ch));
-    },
-    indexFromPos: function (coords) {
-      coords = clipPos(this, coords);
-      var index = coords.ch;
-      if (coords.line < this.first || coords.ch < 0) return 0;
-      this.iter(this.first, coords.line, function (line) {
-        index += line.text.length + 1;
-      });
-      return index;
-    },
-
-    copy: function(copyHistory) {
-      var doc = new Doc(getLines(this, this.first, this.first + this.size), this.modeOption, this.first);
-      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};
-      if (copyHistory) {
-        doc.history.undoDepth = this.history.undoDepth;
-        doc.setHistory(this.getHistory());
-      }
-      return doc;
-    },
-
-    linkedDoc: function(options) {
-      if (!options) options = {};
-      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);
-      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}];
-      return copy;
-    },
-    unlinkDoc: function(other) {
-      if (other instanceof CodeMirror) other = other.doc;
-      if (this.linked) for (var i = 0; i < this.linked.length; ++i) {
-        var link = this.linked[i];
-        if (link.doc != other) continue;
-        this.linked.splice(i, 1);
-        other.unlinkDoc(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.done = copyHistoryArray(this.history.done, splitIds);
-        other.history.undone = copyHistoryArray(this.history.undone, splitIds);
-      }
-    },
-    iterLinkedDocs: function(f) {linkedDocs(this, f);},
-
-    getMode: function() {return this.mode;},
-    getEditor: function() {return this.cm;}
-  });
-
-  Doc.prototype.eachLine = Doc.prototype.iter;
-
-  // The Doc methods that should be available on CodeMirror instances
-  var dontDelegate = "iter insert remove copy getEditor".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);};
-    })(Doc.prototype[prop]);
-
-  eventMixin(Doc);
-
-  function linkedDocs(doc, f, sharedHistOnly) {
-    function propagate(doc, skip, sharedHist) {
-      if (doc.linked) for (var i = 0; i < doc.linked.length; ++i) {
-        var rel = doc.linked[i];
-        if (rel.doc == skip) continue;
-        var shared = sharedHist && rel.sharedHist;
-        if (sharedHistOnly && !shared) continue;
-        f(rel.doc, shared);
-        propagate(rel.doc, doc, shared);
-      }
-    }
-    propagate(doc, null, true);
-  }
-
-  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);
-    cm.options.mode = doc.modeOption;
-    regChange(cm);
-  }
-
-  // LINE UTILITIES
-
-  function getLine(chunk, n) {
-    n -= chunk.first;
-    while (!chunk.lines) {
-      for (var i = 0;; ++i) {
-        var child = chunk.children[i], sz = child.chunkSize();
-        if (n < sz) { chunk = child; break; }
-        n -= sz;
-      }
-    }
-    return chunk.lines[n];
   }
+  var found = find(textNode, topNode, offset)
+  if (found) { return badPos(found, bad) }
 
-  function getBetween(doc, start, end) {
-    var out = [], n = start.line;
-    doc.iter(start.line, end.line + 1, function(line) {
-      var text = line.text;
-      if (n == end.line) text = text.slice(0, end.ch);
-      if (n == start.line) text = text.slice(start.ch);
-      out.push(text);
-      ++n;
-    });
-    return out;
-  }
-  function getLines(doc, from, to) {
-    var out = [];
-    doc.iter(from, to, function(line) { out.push(line.text); });
-    return out;
-  }
-
-  function updateLineHeight(line, height) {
-    var diff = height - line.height;
-    for (var n = line; n; n = n.parent) n.height += diff;
-  }
-
-  function lineNo(line) {
-    if (line.parent == null) return null;
-    var cur = line.parent, no = indexOf(cur.lines, line);
-    for (var chunk = cur.parent; chunk; cur = chunk, chunk = chunk.parent) {
-      for (var i = 0;; ++i) {
-        if (chunk.children[i] == cur) break;
-        no += chunk.children[i].chunkSize();
-      }
-    }
-    return no + cur.first;
+  // 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 }
   }
-
-  function lineAtHeight(chunk, h) {
-    var n = chunk.first;
-    outer: do {
-      for (var i = 0, e = chunk.children.length; i < e; ++i) {
-        var child = chunk.children[i], ch = child.height;
-        if (h < ch) { chunk = child; continue outer; }
-        h -= ch;
-        n += child.chunkSize();
-      }
-      return n;
-    } while (!chunk.lines);
-    for (var i = 0, e = chunk.lines.length; i < e; ++i) {
-      var line = chunk.lines[i], lh = line.height;
-      if (h < lh) break;
-      h -= lh;
-    }
-    return n + i;
-  }
-
-  function heightAtLine(cm, lineObj) {
-    lineObj = visualLine(cm.doc, lineObj);
-
-    var h = 0, chunk = lineObj.parent;
-    for (var i = 0; i < chunk.lines.length; ++i) {
-      var line = chunk.lines[i];
-      if (line == lineObj) break;
-      else h += line.height;
-    }
-    for (var p = chunk.parent; p; chunk = p, p = chunk.parent) {
-      for (var i = 0; i < p.children.length; ++i) {
-        var cur = p.children[i];
-        if (cur == chunk) break;
-        else h += cur.height;
-      }
-    }
-    return h;
-  }
-
-  function getOrder(line) {
-    var order = line.order;
-    if (order == null) order = line.order = bidiOrdering(line.text);
-    return order;
-  }
-
-  // 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 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)};
-    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) {
-    var hist = doc.history;
-    hist.undone.length = 0;
-    var time = +new Date, cur = lst(hist.done);
-
-    if (cur &&
-        (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) == "*"))) {
-      // Merge this change into the last event
-      var last = lst(cur.changes);
-      if (posEq(change.from, change.to) && posEq(change.from, last.to)) {
-        // Optimized case for simple insertion -- don't want to add
-        // new changesets for every character typed
-        last.to = changeEnd(change);
-      } else {
-        // Add new sub-event
-        cur.changes.push(historyChangeFromChange(doc, change));
+  for (var before = topNode.previousSibling, dist$1 = offset; before; before = before.previousSibling) {
+    found = find(before, before.firstChild, -1)
+    if (found)
+      { return badPos(Pos(found.line, found.ch + dist$1), bad) }
+    else
+      { dist$1 += before.textContent.length }
+  }
+}
+
+// TEXTAREA INPUT STYLE
+
+var TextareaInput = function(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
+};
+
+TextareaInput.prototype.init = function (display) {
+    var this$1 = this;
+
+  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 && this$1.hasSelection) { this$1.hasSelection = null }
+    input.poll()
+  })
+
+  on(te, "paste", function (e) {
+    if (signalDOMEvent(cm, e) || handlePaste(e, cm)) { return }
+
+    cm.state.pasteIncoming = true
+    input.fastPoll()
+  })
+
+  function prepareCopyCut(e) {
+    if (signalDOMEvent(cm, e)) { return }
+    if (cm.somethingSelected()) {
+      setLastCopied({lineWise: false, text: cm.getSelections()})
+      if (input.inaccurateSelection) {
+        input.prevInput = ""
+        input.inaccurateSelection = false
+        te.value = lastCopied.text.join("\n")
+        selectInput(te)
       }
-      cur.anchorAfter = selAfter.anchor; cur.headAfter = selAfter.head;
+    } else if (!cm.options.lineWiseCopyCut) {
+      return
     } else {
-      // Can not be merged, start a new event.
-      cur = {changes: [historyChangeFromChange(doc, change)],
-             generation: hist.generation,
-             anchorBefore: doc.sel.anchor, headBefore: doc.sel.head,
-             anchorAfter: selAfter.anchor, headAfter: selAfter.head};
-      hist.done.push(cur);
-      hist.generation = ++hist.maxGeneration;
-      while (hist.done.length > hist.undoDepth)
-        hist.done.shift();
-    }
-    hist.lastTime = time;
-    hist.lastOp = opId;
-    hist.lastOrigin = change.origin;
-  }
-
-  function removeClearedSpans(spans) {
-    if (!spans) return null;
-    for (var i = 0, out; i < spans.length; ++i) {
-      if (spans[i].marker.explicitlyCleared) { if (!out) out = spans.slice(0, i); }
-      else if (out) out.push(spans[i]);
-    }
-    return !out ? spans : out.length ? out : null;
-  }
-
-  function getOldSpans(doc, change) {
-    var found = change["spans_" + doc.id];
-    if (!found) return null;
-    for (var i = 0, nw = []; i < change.text.length; ++i)
-      nw.push(removeClearedSpans(found[i]));
-    return nw;
-  }
-
-  // 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) {
-    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});
-      for (var j = 0; j < changes.length; ++j) {
-        var change = changes[j], m;
-        newChanges.push({from: change.from, to: change.to, text: change.text});
-        if (newGroup) for (var prop in change) if (m = prop.match(/^spans_(\d+)$/)) {
-          if (indexOf(newGroup, Number(m[1])) > -1) {
-            lst(newChanges)[prop] = change[prop];
-            delete change[prop];
-          }
-        }
-      }
-    }
-    return copy;
-  }
-
-  // Rebasing/resetting history to deal with externally-sourced changes
-
-  function rebaseHistSel(pos, from, to, diff) {
-    if (to < pos.line) {
-      pos.line += diff;
-    } else if (from < pos.line) {
-      pos.line = from;
-      pos.ch = 0;
-    }
-  }
-
-  // Tries to rebase an array of history events given a change in the
-  // document. If the change touches the same lines as the event, the
-  // event, and everything 'behind' it, is discarded. If the change is
-  // before the event, the event's positions are updated. Uses a
-  // copy-on-write scheme for the positions, to avoid having to
-  // reallocate them all on every rebase, but also avoid problems with
-  // shared position objects being unsafely updated.
-  function rebaseHistArray(array, from, to, diff) {
-    for (var i = 0; i < array.length; ++i) {
-      var sub = array[i], ok = true;
-      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;
-        } 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;
+      var ranges = copyableRanges(cm)
+      setLastCopied({lineWise: true, text: ranges.text})
+      if (e.type == "cut") {
+        cm.setSelections(ranges.ranges, null, sel_dontScroll)
       } else {
-        rebaseHistSel(sub.anchorBefore); rebaseHistSel(sub.headBefore);
-        rebaseHistSel(sub.anchorAfter); rebaseHistSel(sub.headAfter);
+        input.prevInput = ""
+        te.value = ranges.text.join("\n")
+        selectInput(te)
       }
     }
-  }
-
-  function rebaseHist(hist, change) {
-    var from = change.from.line, to = change.to.line, diff = change.text.length - (to - from) - 1;
-    rebaseHistArray(hist.done, from, to, diff);
-    rebaseHistArray(hist.undone, from, to, diff);
-  }
-
-  // EVENT OPERATORS
-
-  function stopMethod() {e_stop(this);}
-  // Ensure an event has a stop method.
-  function addStop(event) {
-    if (!event.stop) event.stop = stopMethod;
-    return event;
-  }
-
-  function e_preventDefault(e) {
-    if (e.preventDefault) e.preventDefault();
-    else e.returnValue = false;
-  }
-  function e_stopPropagation(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;
-
-  function e_target(e) {return e.target || e.srcElement;}
-  function e_button(e) {
-    var b = e.which;
-    if (b == null) {
-      if (e.button & 1) b = 1;
-      else if (e.button & 2) b = 3;
-      else if (e.button & 4) b = 2;
-    }
-    if (mac && e.ctrlKey && b == 1) b = 3;
-    return b;
-  }
-
-  // EVENT HANDLING
-
-  function on(emitter, type, f) {
-    if (emitter.addEventListener)
-      emitter.addEventListener(type, f, false);
-    else if (emitter.attachEvent)
-      emitter.attachEvent("on" + type, f);
-    else {
-      var map = emitter._handlers || (emitter._handlers = {});
-      var arr = map[type] || (map[type] = []);
-      arr.push(f);
-    }
-  }
-
-  function off(emitter, type, f) {
-    if (emitter.removeEventListener)
-      emitter.removeEventListener(type, f, false);
-    else if (emitter.detachEvent)
-      emitter.detachEvent("on" + type, f);
-    else {
-      var arr = emitter._handlers && emitter._handlers[type];
-      if (!arr) return;
-      for (var i = 0; i < arr.length; ++i)
-        if (arr[i] == f) { arr.splice(i, 1); break; }
-    }
-  }
-
-  function signal(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 delayedCallbacks, delayedCallbackDepth = 0;
-  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);
-    }
-    function bnd(f) {return function(){f.apply(null, args);};};
-    for (var i = 0; i < arr.length; ++i)
-      delayedCallbacks.push(bnd(arr[i]));
-  }
-
-  function signalDOMEvent(cm, e, override) {
-    signal(cm, override || e.type, cm, 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 hasHandler(emitter, type) {
-    var arr = emitter._handlers && emitter._handlers[type];
-    return arr && arr.length > 0;
-  }
-
-  CodeMirror.on = on; CodeMirror.off = off; CodeMirror.signal = signal;
-
-  function eventMixin(ctor) {
-    ctor.prototype.on = function(type, f) {on(this, type, f);};
-    ctor.prototype.off = function(type, f) {off(this, type, f);};
-  }
-
-  // MISC UTILITIES
-
-  // Number of pixels added to scroller and sizer to hide scrollbar
-  var scrollerCutOff = 30;
-
-  // Returned or thrown by various protocols to signal 'I'm not
-  // handling this'.
-  var Pass = CodeMirror.Pass = {toString: function(){return "CodeMirror.Pass";}};
-
-  function Delayed() {this.id = null;}
-  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) {
-    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;
+    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) || signalDOMEvent(cm, 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")
+    if (input.composing) { input.composing.range.clear() }
+    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
+    }
+  })
+};
+
+TextareaInput.prototype.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
+};
+
+TextareaInput.prototype.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)
+TextareaInput.prototype.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
+};
+
+TextareaInput.prototype.getField = function () { return this.textarea };
+
+TextareaInput.prototype.supportsTouch = function () { return false };
+
+TextareaInput.prototype.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
+  }
+};
+
+TextareaInput.prototype.blur = function () { this.textarea.blur() };
+
+TextareaInput.prototype.resetPosition = function () {
+  this.wrapper.style.top = this.wrapper.style.left = 0
+};
+
+TextareaInput.prototype.receivedFocus = function () { this.slowPoll() };
+
+// Poll for input changes, using the normal rate of polling. This
+// runs as long as the editor is focused.
+TextareaInput.prototype.slowPoll = function () {
+    var this$1 = this;
+
+  if (this.pollingFast) { return }
+  this.polling.set(this.cm.options.pollInterval, function () {
+    this$1.poll()
+    if (this$1.cm.state.focused) { this$1.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.
+TextareaInput.prototype.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).
+TextareaInput.prototype.poll = function () {
+    var this$1 = this;
+
+  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) ||
+      cm.isReadOnly() || 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 }
+
+  runInOp(cm, function () {
+    applyTextInput(cm, text.slice(same), prevInput.length - same,
+                   null, this$1.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 = this$1.prevInput = "" }
+    else { this$1.prevInput = text }
+
+    if (this$1.composing) {
+      this$1.composing.range.clear()
+      this$1.composing.range = cm.markText(this$1.composing.start, cm.getCursor("to"),
+                                         {className: "CodeMirror-composing"})
+    }
+  })
+  return true
+};
+
+TextareaInput.prototype.ensurePolled = function () {
+  if (this.pollingFast && this.poll()) { this.pollingFast = false }
+};
+
+TextareaInput.prototype.onKeyPress = function () {
+  if (ie && ie_version >= 9) { this.hasSelection = null }
+  this.fastPoll()
+};
+
+TextareaInput.prototype.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, oldWrapperCSS = input.wrapper.style.cssText
+  input.wrapper.style.cssText = "position: absolute"
+  var wrapperBox = input.wrapper.getBoundingClientRect()
+  te.style.cssText = "position: absolute; width: 30px; height: 30px;\n      top: " + (e.clientY - wrapperBox.top - 5) + "px; left: " + (e.clientX - wrapperBox.left - 5) + "px;\n      z-index: 1000; background: " + (ie ? "rgba(255, 255, 255, .05)" : "transparent") + ";\n      outline: none; border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);"
+  var oldScrollY
+  if (webkit) { 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.cssText = oldWrapperCSS
+    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, selectAll)(cm) }
+        else if (i++ < 10) { display.detectingSelectAll = setTimeout(poll, 500) }
+        else { display.input.reset() }
+      }
+      display.detectingSelectAll = setTimeout(poll, 200)
     }
-    return n;
-  }
-  CodeMirror.countColumn = countColumn;
-
-  var spaceStrs = [""];
-  function spaceStr(n) {
-    while (spaceStrs.length <= n)
-      spaceStrs.push(lst(spaceStrs) + " ");
-    return spaceStrs[n];
   }
 
-  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) {}
+  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)
   }
+};
 
-  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;
-    return -1;
-  }
-
-  function createObj(base, props) {
-    function Obj() {}
-    Obj.prototype = base;
-    var inst = new Obj();
-    if (props) copyObj(props, inst);
-    return inst;
-  }
-
-  function copyObj(obj, target) {
-    if (!target) target = {};
-    for (var prop in obj) if (obj.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) {
-    return /\w/.test(ch) || ch > "\x80" &&
-      (ch.toUpperCase() != ch.toLowerCase() || nonASCIISingleCaseWordChar.test(ch));
-  }
-
-  function isEmpty(obj) {
-    for (var n in obj) if (obj.hasOwnProperty(n) && obj[n]) return false;
-    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\u1DC0–\u1DFF\u20D0–\u20FF\uA670-\uA672\uA674-\uA67D\uA69F\udc00-\udfff\uFE20–\uFE2F]/;
-
-  // DOM UTILITIES
+TextareaInput.prototype.readOnlyChanged = function (val) {
+  if (!val) { this.reset() }
+};
 
-  function elt(tag, content, className, style) {
-    var e = document.createElement(tag);
-    if (className) e.className = className;
-    if (style) e.style.cssText = style;
-    if (typeof content == "string") setTextContent(e, content);
-    else if (content) for (var i = 0; i < content.length; ++i) e.appendChild(content[i]);
-    return e;
-  }
+TextareaInput.prototype.setUneditable = function () {};
 
-  function removeChildren(e) {
-    for (var count = e.childNodes.length; count > 0; --count)
-      e.removeChild(e.firstChild);
-    return e;
-  }
+TextareaInput.prototype.needsContentAttribute = false
 
-  function removeChildrenAndAdd(parent, e) {
-    return removeChildren(parent).appendChild(e);
+function fromTextArea(textarea, options) {
+  options = options ? copyObj(options) : {}
+  options.value = textarea.value
+  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 = activeElt()
+    options.autofocus = hasFocus == textarea ||
+      textarea.getAttribute("autofocus") != null && hasFocus == document.body
   }
 
-  function setTextContent(e, str) {
-    if (ie_lt9) {
-      e.innerHTML = "";
-      e.appendChild(document.createTextNode(str));
-    } else e.textContent = str;
-  }
+  function save() {textarea.value = cm.getValue()}
 
-  function getRect(node) {
-    return node.getBoundingClientRect();
-  }
-  CodeMirror.replaceGetRect = function(f) { getRect = f; };
-
-  // FEATURE DETECTION
-
-  // Detect drag-and-drop
-  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;
-    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) {
-      var result = /\-[^ \-?]|\?[^ !\'\"\),.\-\/:;\?\]\}]/.test(str.slice(i - 1, i + 1));
-      return result;
-    };
-  else if (webkit && /Chrome\/(?:29|[3-9]\d|\d\d\d)\./.test(navigator.userAgent))
-    spanAffectsWrapping = function(str, i) {
-      var code = str.charCodeAt(i - 1);
-      return code >= 8208 && code <= 8212;
-    };
-  else if (webkit)
-    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;
-      }
-      var result = /[~!#%&*)=+}\]\\|\"\.>,:;][({[<]|-[^\-?\.\u2010-\u201f\u2026]|\?[\w~`@#$%\^&*(_=+{[|><]|…[\w~`@#$%\^&*(_=+{[><]/.test(str.slice(i - 1, i + 1));
-      return result;
-    };
-
-  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;
-    }
-    if (zwspSupported) return elt("span", "\u200b");
-    else return elt("span", "\u00a0", null, "display: inline-block; width: 1px; margin-right: -1px");
-  }
-
-  // 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 pos = 0, result = [], l = string.length;
-    while (pos <= l) {
-      var nl = string.indexOf("\n", pos);
-      if (nl == -1) nl = string.length;
-      var line = string.slice(pos, string.charAt(nl - 1) == "\r" ? nl - 1 : nl);
-      var rt = line.indexOf("\r");
-      if (rt != -1) {
-        result.push(line.slice(0, rt));
-        pos += rt + 1;
-      } else {
-        result.push(line);
-        pos = nl + 1;
-      }
-    }
-    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; }
-    catch(e) { return false; }
-  } : function(te) {
-    try {var range = te.ownerDocument.selection.createRange();}
-    catch(e) {}
-    if (!range || range.parentElement() != te) return false;
-    return range.compareEndPoints("StartToEnd", range) != 0;
-  };
-
-  var hasCopyEvent = (function() {
-    var e = elt("div");
-    if ("oncopy" in e) return true;
-    e.setAttribute("oncopy", "return;");
-    return typeof e.oncopy == 'function';
-  })();
-
-  // KEY NAMING
-
-  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"};
-  CodeMirror.keyNames = keyNames;
-  (function() {
-    // Number keys
-    for (var i = 0; i < 10; i++) keyNames[i + 48] = String(i);
-    // Alphabetic keys
-    for (var i = 65; i <= 90; i++) keyNames[i] = String.fromCharCode(i);
-    // Function keys
-    for (var i = 1; i <= 12; i++) keyNames[i + 111] = keyNames[i + 63235] = "F" + i;
-  })();
-
-  // BIDI HELPERS
-
-  function iterateBidiSections(order, from, to, f) {
-    if (!order) return f(from, to, "ltr");
-    var found = false;
-    for (var i = 0; i < order.length; ++i) {
-      var part = order[i];
-      if (part.from < to && part.to > from || from == to && part.to == from) {
-        f(Math.max(part.from, from), Math.min(part.to, to), part.level == 1 ? "rtl" : "ltr");
-        found = true;
-      }
-    }
-    if (!found) f(from, to, "ltr");
-  }
-
-  function bidiLeft(part) { return part.level % 2 ? part.to : part.from; }
-  function bidiRight(part) { return part.level % 2 ? part.from : part.to; }
-
-  function lineLeft(line) { var order = getOrder(line); return order ? bidiLeft(order[0]) : 0; }
-  function lineRight(line) {
-    var order = getOrder(line);
-    if (!order) return line.text.length;
-    return bidiRight(lst(order));
-  }
-
-  function lineStart(cm, lineN) {
-    var line = getLine(cm.doc, lineN);
-    var visual = visualLine(cm.doc, 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 order = getOrder(line);
-    var ch = !order ? line.text.length : order[0].level % 2 ? lineLeft(line) : lineRight(line);
-    return Pos(lineN, ch);
-  }
-
-  function compareBidiLevel(order, a, b) {
-    var linedir = order[0].level;
-    if (a == linedir) return true;
-    if (b == linedir) return false;
-    return a < b;
-  }
-  var bidiOther;
-  function getBidiPartAt(order, pos) {
-    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 (found == null) {
-          found = i;
-        } else if (compareBidiLevel(order, cur.level, order[found].level)) {
-          bidiOther = found;
-          return i;
-        } else {
-          bidiOther = i;
-          return found;
+  var realSubmit
+  if (textarea.form) {
+    on(textarea.form, "submit", save)
+    // Deplorable hack to make the submit method do the right thing.
+    if (!options.leaveSubmitMethodAlone) {
+      var form = textarea.form
+      realSubmit = form.submit
+      try {
+        var wrappedSubmit = form.submit = function () {
+          save()
+          form.submit = realSubmit
+          form.submit()
+          form.submit = wrappedSubmit
         }
-      }
+      } catch(e) {}
     }
-    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)));
-    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.
-  function moveVisually(line, start, dir, byUnit) {
-    var bidi = getOrder(line);
-    if (!bidi) return moveLogically(line, start, dir, byUnit);
-    var pos = getBidiPartAt(bidi, start), part = bidi[pos];
-    var target = moveInLine(line, start, part.level % 2 ? -dir : dir, byUnit);
-
-    for (;;) {
-      if (target > part.from && target < part.to) return target;
-      if (target == part.from || target == part.to) {
-        if (getBidiPartAt(bidi, target) == pos) return target;
-        part = bidi[pos += dir];
-        return (dir > 0) == part.level % 2 ? part.to : part.from;
-      } else {
-        part = bidi[pos += dir];
-        if (!part) return null;
-        if ((dir > 0) == part.level % 2)
-          target = moveInLine(line, part.to, -1, byUnit);
-        else
-          target = moveInLine(line, part.from, 1, byUnit);
+  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 }
       }
     }
   }
 
-  function moveLogically(line, start, dir, byUnit) {
-    var target = start + dir;
-    if (byUnit) while (target > 0 && isExtendingChar.test(line.text.charAt(target))) target += dir;
-    return target < 0 || target > line.text.length ? null : target;
-  }
-
-  // Bidirectional ordering algorithm
-  // See http://unicode.org/reports/tr9/tr9-13.html for the algorithm
-  // that this (partially) implements.
-
-  // One-char codes used for character types:
-  // L (L):   Left-to-Right
-  // R (R):   Right-to-Left
-  // r (AL):  Right-to-Left Arabic
-  // 1 (EN):  European Number
-  // + (ES):  European Number Separator
-  // % (ET):  European Number Terminator
-  // n (AN):  Arabic Number
-  // , (CS):  Common Number Separator
-  // m (NSM): Non-Spacing Mark
-  // b (BN):  Boundary Neutral
-  // s (B):   Paragraph Separator
-  // t (S):   Segment Separator
-  // w (WS):  Whitespace
-  // N (ON):  Other Neutrals
-
-  // Returns null if characters are ordered as they appear
-  // (left-to-right), or an array of sections ({from, to, level}
-  // 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";
-    // Character types for codepoints 0x600 to 0x6ff
-    var arabicTypes = "rrrrrrrrrrrr,rNNmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmrrrrrrrnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmNmmmmrrrrrrrrrrrrrrrrrr";
-    function charType(code) {
-      if (code <= 0xff) 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 return "L";
-    }
-
-    var bidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
-    var isNeutral = /[stwN]/, isStrong = /[LRr]/, countsAsLeft = /[Lb1n]/, countsAsNum = /[1n]/;
-    // Browsers seem to always treat the boundaries of block elements as being L.
-    var outerType = "L";
-
-    return function(str) {
-      if (!bidiRE.test(str)) return false;
-      var len = str.length, types = [];
-      for (var i = 0, type; i < len; ++i)
-        types.push(type = charType(str.charCodeAt(i)));
-
-      // W1. Examine each non-spacing mark (NSM) in the level run, and
-      // change the type of the NSM to the type of the previous
-      // character. If the NSM is at the start of the level run, it will
-      // get the type of sor.
-      for (var i = 0, prev = outerType; i < len; ++i) {
-        var type = types[i];
-        if (type == "m") types[i] = prev;
-        else prev = type;
-      }
-
-      // W2. Search backwards from each instance of a European number
-      // until the first strong type (R, L, AL, or sor) is found. If an
-      // AL is found, change the type of the European number to Arabic
-      // number.
-      // W3. Change all ALs to R.
-      for (var i = 0, cur = outerType; i < len; ++i) {
-        var type = types[i];
-        if (type == "1" && cur == "r") types[i] = "n";
-        else if (isStrong.test(type)) { cur = type; if (type == "r") types[i] = "R"; }
-      }
-
-      // W4. A single European separator between two European numbers
-      // changes to a European number. A single common separator between
-      // two numbers of the same type changes to that type.
-      for (var i = 1, prev = types[0]; i < len - 1; ++i) {
-        var type = types[i];
-        if (type == "+" && prev == "1" && types[i+1] == "1") types[i] = "1";
-        else if (type == "," && prev == types[i+1] &&
-                 (prev == "1" || prev == "n")) types[i] = prev;
-        prev = type;
-      }
-
-      // W5. A sequence of European terminators adjacent to European
-      // numbers changes to all European numbers.
-      // W6. Otherwise, separators and terminators change to Other
-      // Neutral.
-      for (var i = 0; i < len; ++i) {
-        var type = types[i];
-        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";
-          for (var j = i; j < end; ++j) types[j] = replace;
-          i = end - 1;
-        }
-      }
-
-      // W7. Search backwards from each instance of a European number
-      // until the first strong type (R, L, or sor) is found. If an L is
-      // found, then change the type of the European number to L.
-      for (var i = 0, cur = outerType; i < len; ++i) {
-        var type = types[i];
-        if (cur == "L" && type == "1") types[i] = "L";
-        else if (isStrong.test(type)) cur = type;
-      }
-
-      // N1. A sequence of neutrals takes the direction of the
-      // surrounding strong text if the text on both sides has the same
-      // direction. European and Arabic numbers act as if they were R in
-      // terms of their influence on neutrals. Start-of-level-run (sor)
-      // and end-of-level-run (eor) are used at level run boundaries.
-      // N2. Any remaining neutrals take the embedding direction.
-      for (var i = 0; i < len; ++i) {
-        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 replace = before || after ? "L" : "R";
-          for (var j = i; j < end; ++j) types[j] = replace;
-          i = end - 1;
-        }
-      }
-
-      // Here we depart from the documented algorithm, in order to avoid
-      // building up an actual levels array. Since there are only three
-      // levels (0, 1, 2) in an implementation that doesn't take
-      // explicit embedding into account, we can build up the order on
-      // the fly, without following the level-based algorithm.
-      var order = [], m;
-      for (var i = 0; i < len;) {
-        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});
-        } 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});
-              var nstart = j;
-              for (++j; j < i && countsAsNum.test(types[j]); ++j) {}
-              order.splice(at, 0, {from: nstart, to: j, level: 2});
-              pos = j;
-            } else ++j;
-          }
-          if (pos < i) order.splice(at, 0, {from: pos, to: i, level: 1});
-        }
-      }
-      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});
-      }
-      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});
-      }
-      if (order[0].level != lst(order).level)
-        order.push({from: len, to: len, level: order[0].level});
-
-      return order;
-    };
-  })();
-
-  // THE END
-
-  CodeMirror.version = "3.20.0";
-
-  return CodeMirror;
-})();
+  textarea.style.display = "none"
+  var cm = CodeMirror(function (node) { return textarea.parentNode.insertBefore(node, textarea.nextSibling); },
+    options)
+  return cm
+}
+
+function addLegacyProps(CodeMirror) {
+  CodeMirror.off = off
+  CodeMirror.on = on
+  CodeMirror.wheelEventPixels = wheelEventPixels
+  CodeMirror.Doc = Doc
+  CodeMirror.splitLines = splitLinesAuto
+  CodeMirror.countColumn = countColumn
+  CodeMirror.findColumn = findColumn
+  CodeMirror.isWordChar = isWordCharBasic
+  CodeMirror.Pass = Pass
+  CodeMirror.signal = signal
+  CodeMirror.Line = Line
+  CodeMirror.changeEnd = changeEnd
+  CodeMirror.scrollbarModel = scrollbarModel
+  CodeMirror.Pos = Pos
+  CodeMirror.cmpPos = cmp
+  CodeMirror.modes = modes
+  CodeMirror.mimeModes = mimeModes
+  CodeMirror.resolveMode = resolveMode
+  CodeMirror.getMode = getMode
+  CodeMirror.modeExtensions = modeExtensions
+  CodeMirror.extendMode = extendMode
+  CodeMirror.copyState = copyState
+  CodeMirror.startState = startState
+  CodeMirror.innerMode = innerMode
+  CodeMirror.commands = commands
+  CodeMirror.keyMap = keyMap
+  CodeMirror.keyName = keyName
+  CodeMirror.isModifierKey = isModifierKey
+  CodeMirror.lookupKey = lookupKey
+  CodeMirror.normalizeKeyMap = normalizeKeyMap
+  CodeMirror.StringStream = StringStream
+  CodeMirror.SharedTextMarker = SharedTextMarker
+  CodeMirror.TextMarker = TextMarker
+  CodeMirror.LineWidget = LineWidget
+  CodeMirror.e_preventDefault = e_preventDefault
+  CodeMirror.e_stopPropagation = e_stopPropagation
+  CodeMirror.e_stop = e_stop
+  CodeMirror.addClass = addClass
+  CodeMirror.contains = contains
+  CodeMirror.rmClass = rmClass
+  CodeMirror.keyNames = keyNames
+}
+
+// EDITOR CONSTRUCTOR
+
+defineOptions(CodeMirror)
+
+addEditorMethods(CodeMirror)
+
+// 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)}
+  })(Doc.prototype[prop]) } }
+
+eventMixin(Doc)
+
+// INPUT HANDLING
+
+CodeMirror.inputStyles = {"textarea": TextareaInput, "contenteditable": ContentEditableInput}
+
+// MODE DEFINITION AND QUERYING
+
+// 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 }
+  defineMode.apply(this, arguments)
+}
+
+CodeMirror.defineMIME = defineMIME
+
+// Minimal default mode.
+CodeMirror.defineMode("null", function () { return ({token: function (stream) { return stream.skipToEnd(); }}); })
+CodeMirror.defineMIME("text/plain", "null")
+
+// EXTENSIONS
+
+CodeMirror.defineExtension = function (name, func) {
+  CodeMirror.prototype[name] = func
+}
+CodeMirror.defineDocExtension = function (name, func) {
+  Doc.prototype[name] = func
+}
+
+CodeMirror.fromTextArea = fromTextArea
+
+addLegacyProps(CodeMirror)
+
+CodeMirror.version = "5.21.1"
+
+return CodeMirror;
+
+})));
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js
index e8bfe48a2..adf2184fd 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js
@@ -1,18 +1,31 @@
+// 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) {
+(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 = /^(?:->|=>|\+[+=]?|-[\-=]?|\*[\*=]?|\/[\/=]?|[=!]=|<[><]?=?|>>?=?|%=?|&=?|\|=?|\^=?|\~|!|\?)/;
+  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 atProp = /^@[_A-Za-z$][_A-Za-z$0-9]*/;
 
   var wordOperators = wordRegexp(["and", "or", "not",
                                   "is", "isnt", "in",
@@ -21,7 +34,7 @@ CodeMirror.defineMode("coffeescript", function(conf) {
                         "switch", "try", "catch", "finally", "class"];
   var commonKeywords = ["break", "by", "continue", "debugger", "delete",
                         "do", "in", "of", "new", "return", "then",
-                        "this", "throw", "when", "until"];
+                        "this", "@", "throw", "when", "until", "extends"];
 
   var keywords = wordRegexp(indentKeywords.concat(commonKeywords));
 
@@ -119,19 +132,21 @@ CodeMirror.defineMode("coffeescript", function(conf) {
 
     // Handle strings
     if (stream.match(stringPrefixes)) {
-      state.tokenize = tokenFactory(stream.current(), "string");
+      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(), "string-2");
+        state.tokenize = tokenFactory(stream.current(), true, "string-2");
         return state.tokenize(stream, state);
       } else {
         stream.backUp(1);
       }
     }
 
+
+
     // Handle operators and delimiters
     if (stream.match(operators) || stream.match(wordOperators)) {
       return "operator";
@@ -144,6 +159,10 @@ CodeMirror.defineMode("coffeescript", function(conf) {
       return "atom";
     }
 
+    if (stream.match(atProp) || state.prop && stream.match(identifiers)) {
+      return "property";
+    }
+
     if (stream.match(keywords)) {
       return "keyword";
     }
@@ -152,17 +171,12 @@ CodeMirror.defineMode("coffeescript", function(conf) {
       return "variable";
     }
 
-    if (stream.match(properties)) {
-      return "property";
-    }
-
     // Handle non-detected items
     stream.next();
     return ERRORCLASS;
   }
 
-  function tokenFactory(delimiter, outclass) {
-    var singleline = delimiter.length == 1;
+  function tokenFactory(delimiter, singleline, outclass) {
     return function(stream, state) {
       while (!stream.eol()) {
         stream.eatWhile(/[^'"\/\\]/);
@@ -179,7 +193,7 @@ CodeMirror.defineMode("coffeescript", function(conf) {
         }
       }
       if (singleline) {
-        if (conf.mode.singleLineStringErrors) {
+        if (parserConf.singleLineStringErrors) {
           outclass = ERRORCLASS;
         } else {
           state.tokenize = tokenBase;
@@ -205,7 +219,7 @@ CodeMirror.defineMode("coffeescript", function(conf) {
     type = type || "coffee";
     var offset = 0, align = false, alignOffset = null;
     for (var scope = state.scope; scope; scope = scope.prev) {
-      if (scope.type === "coffee") {
+      if (scope.type === "coffee" || scope.type == "}") {
         offset = scope.offset + conf.indentUnit;
         break;
       }
@@ -253,24 +267,11 @@ CodeMirror.defineMode("coffeescript", function(conf) {
     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;
-      }
-    }
-
     // Handle scope changes.
     if (current === "return") {
-      state.dedent += 1;
+      state.dedent = true;
     }
-    if (((current === "->" || current === "=>") &&
-         !state.lambda &&
-         !stream.peek())
+    if (((current === "->" || current === "=>") && stream.eol())
         || style === "indent") {
       indent(stream, state);
     }
@@ -298,9 +299,10 @@ CodeMirror.defineMode("coffeescript", function(conf) {
       if (state.scope.type == current)
         state.scope = state.scope.prev;
     }
-    if (state.dedent > 0 && stream.eol() && state.scope.type == "coffee") {
-      if (state.scope.prev) state.scope = state.scope.prev;
-      state.dedent -= 1;
+    if (state.dedent && stream.eol()) {
+      if (state.scope.type == "coffee" && state.scope.prev)
+        state.scope = state.scope.prev;
+      state.dedent = false;
     }
 
     return style;
@@ -311,8 +313,7 @@ CodeMirror.defineMode("coffeescript", function(conf) {
       return {
         tokenize: tokenBase,
         scope: {offset:basecolumn || 0, type:"coffee", prev: null, align: false},
-        lastToken: null,
-        lambda: false,
+        prop: false,
         dedent: 0
       };
     },
@@ -322,12 +323,9 @@ CodeMirror.defineMode("coffeescript", function(conf) {
       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;
+      if (style && style != "comment") {
+        if (fillAlign) fillAlign.align = true;
+        state.prop = style == "punctuation" && stream.current() == "."
       }
 
       return style;
@@ -352,3 +350,6 @@ CodeMirror.defineMode("coffeescript", function(conf) {
 });
 
 CodeMirror.defineMIME("text/x-coffeescript", "coffeescript");
+CodeMirror.defineMIME("text/coffeescript", "coffeescript");
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/comment.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/comment.js
index cd2123e17..d71cf4360 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,13 +21,40 @@
   }
 
   CodeMirror.commands.toggleComment = function(cm) {
-    var from = cm.getCursor("start"), to = cm.getCursor("end");
-    cm.uncomment(from, to) || cm.lineComment(from, to);
+    cm.toggleComment();
   };
 
+  CodeMirror.defineExtension("toggleComment", function(options) {
+    if (!options) options = noOptions;
+    var cm = this;
+    var minLine = Infinity, ranges = this.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, options)) mode = "un";
+        else { cm.lineComment(from, to, options); mode = "line"; }
+      } else if (mode == "un") {
+        cm.uncomment(from, to, options);
+      } else {
+        cm.lineComment(from, to, options);
+      }
+    }
+  });
+
+  // Rough heuristic to try and detect lines that are part of multi-line string
+  function probablyInsideString(cm, pos, line) {
+    return /\bstring\b/.test(cm.getTokenTypeAt(Pos(pos.line, 0))) && !/^[\'\"`]/.test(line)
+  }
+
   CodeMirror.defineExtension("lineComment", function(from, to, options) {
     if (!options) options = noOptions;
     var self = this, mode = self.getModeAt(from);
+    var firstLine = self.getLine(from.line);
+    if (firstLine == null || probablyInsideString(self, from, firstLine)) return;
+
     var commentString = options.lineComment || mode.lineComment;
     if (!commentString) {
       if (options.blockCommentStart || mode.blockCommentStart) {
@@ -26,15 +63,21 @@
       }
       return;
     }
-    var firstLine = self.getLine(from.line);
-    if (firstLine == null) return;
+
     var end = Math.min(to.ch != 0 || to.line == from.line ? to.line + 1 : to.line, self.lastLine() + 1);
     var pad = options.padding == null ? " " : options.padding;
     var blankLines = options.commentBlankLines || from.line == to.line;
 
     self.operation(function() {
       if (options.indent) {
-        var baseString = firstLine.slice(0, firstNonWS(firstLine));
+        var baseString = null;
+        for (var i = from.line; i < end; ++i) {
+          var line = self.getLine(i);
+          var whitespace = line.slice(0, firstNonWS(line));
+          if (baseString == null || baseString.length > whitespace.length) {
+            baseString = whitespace;
+          }
+        }
         for (var i = from.line; i < end; ++i) {
           var line = self.getLine(i), cut = baseString.length;
           if (!blankLines && !nonWS.test(line)) continue;
@@ -60,6 +103,7 @@
         self.lineComment(from, to, options);
       return;
     }
+    if (/\bcomment\b/.test(self.getTokenTypeAt(Pos(from.line, 0)))) return
 
     var end = Math.min(to.line, self.lastLine());
     if (end != from.line && to.ch == 0 && nonWS.test(self.getLine(end))) --end;
@@ -86,7 +130,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 +140,9 @@
       for (var i = start; i <= end; ++i) {
         var line = self.getLine(i);
         var found = line.indexOf(lineString);
-        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 && !/comment/.test(self.getTokenTypeAt(Pos(i, found + 1)))) found = -1;
+        if (found == -1 && nonWS.test(line)) break lineComment;
+        if (found > -1 && nonWS.test(line.slice(0, found))) break lineComment;
         lines.push(line);
       }
       self.operation(function() {
@@ -118,13 +163,29 @@
     var endString = options.blockCommentEnd || mode.blockCommentEnd;
     if (!startString || !endString) return false;
     var lead = options.blockCommentLead || mode.blockCommentLead;
-    var startLine = self.getLine(start), endLine = end == start ? startLine : self.getLine(end);
-    var open = startLine.indexOf(startString), close = endLine.lastIndexOf(endString);
+    var startLine = self.getLine(start), open = startLine.indexOf(startString)
+    if (open == -1) return false
+    var endLine = end == start ? startLine : self.getLine(end)
+    var close = endLine.indexOf(endString, end == start ? open + startString.length : 0);
     if (close == -1 && start != end) {
       endLine = self.getLine(--end);
-      close = endLine.lastIndexOf(endString);
+      close = endLine.indexOf(endString);
     }
-    if (open == -1 || close == -1) return false;
+    if (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 +203,4 @@
     });
     return true;
   });
-})();
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js
index d8c30cf33..a1d5a388e 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js
@@ -1,308 +1,407 @@
-CodeMirror.defineMode("css", function(config, parserConfig) {
-  "use strict";
+// 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", function(config, parserConfig) {
+  var inline = parserConfig.inline
   if (!parserConfig.propertyKeywords) parserConfig = CodeMirror.resolveMode("text/css");
 
-  var indentUnit = config.indentUnit || config.tabSize || 2,
-      hooks = parserConfig.hooks || {},
-      atMediaTypes = parserConfig.atMediaTypes || {},
-      atMediaFeatures = parserConfig.atMediaFeatures || {},
+  var indentUnit = config.indentUnit,
+      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,
+      supportsAtComponent = parserConfig.supportsAtComponent === true;
 
+  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) || ch == "." && stream.eat(/\d/)) {
+    } 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, indent) {
+    state.context = new Context(type, stream.indentation() + (indent === false ? 0 : indentUnit), state.context);
+    return type;
+  }
+
+  function popContext(state) {
+    if (state.context.prev)
+      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 (supportsAtComponent && /@component/.test(type)) {
+      return pushContext(state, stream, "atComponentBlock");
+    } else if (/^@(-moz-)?document$/.test(type)) {
+      return pushContext(state, stream, "documentTypes");
+    } else if (/^@(media|supports|(-moz-)?document|import)$/.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,4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/.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.documentTypes = function(type, stream, state) {
+    if (type == "word" && documentTypes.hasOwnProperty(stream.current())) {
+      override = "tag";
+      return state.context.type;
+    } else {
+      return states.atBlock(type, stream, state);
+    }
+  };
+
+  states.atBlock = function(type, stream, state) {
+    if (type == "(") return pushContext(state, stream, "atBlock_parens");
+    if (type == "}" || type == ";") return popAndPass(type, stream, state);
+    if (type == "{") return popContext(state) && pushContext(state, stream, allowNested ? "block" : "top");
+
+    if (type == "interpolation") return pushContext(state, stream, "interpolation");
+
+    if (type == "word") {
+      var word = stream.current().toLowerCase();
+      if (word == "only" || word == "not" || word == "and" || word == "or")
+        override = "keyword";
+      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.atComponentBlock = function(type, stream, state) {
+    if (type == "}")
+      return popAndPass(type, stream, state);
+    if (type == "{")
+      return popContext(state) && pushContext(state, stream, allowNested ? "block" : "top", false);
+    if (type == "word")
+      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: inline ? "block" : "top",
+              stateArg: null,
+              context: new Context(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[state.stack.length-1] = "@media{";
-        }
-        else {
-          var newContext = allowNested ? "block" : "rule";
-          state.stack.push(newContext);
-        }
-      }
-      else if (type == "}") {
-        if (context == "interpolation") style = "operator";
-        // Pop off end of array until { is reached
-        while(state.stack.length){
-          var removed = state.stack.pop();
-          if(removed.indexOf("{") > -1 || removed == "block" || removed == "rule"){
-            break;
-          }
-        }
-      }
-      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[state.stack.length-1] = "@mediaType";
-      else if (context == "@mediaType" && stream.current() == ",")
-        state.stack[state.stack.length-1] = "@media";
-      else if (type == "(") {
-        if (context == "@media" || context == "@mediaType") {
-          // Make sure @mediaType is used to avoid error on {
-          state.stack[state.stack.length-1] = "@mediaType";
-          state.stack.push("@mediaType(");
-        }
-        else state.stack.push("(");
-      }
-      else if (type == ")") {
-        // Pop off end of array until ( is reached
-        while(state.stack.length){
-          var removed = state.stack.pop();
-          if(removed.indexOf("(") > -1){
-            break;
-          }
-        }
-      }
-      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[n-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) {
+        if (ch == "}" && (cx.type == "block" || cx.type == "top" ||
+                          cx.type == "interpolation" || cx.type == "restricted_atBlock")) {
+          // Resume indentation from parent context.
+          cx = cx.prev;
+          indent = cx.indent;
+        } else if (ch == ")" && (cx.type == "parens" || cx.type == "atBlock_parens") ||
+            ch == "{" && (cx.type == "at" || cx.type == "atBlock")) {
+          // Dedent relative to current context.
+          indent = Math.max(0, cx.indent - indentUnit);
+          cx = cx.prev;
+        }
+      }
+      return indent;
     },
 
     electricChars: "}",
@@ -312,21 +411,24 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
   };
 });
 
-(function() {
   function keySet(array) {
     var keys = {};
     for (var i = 0; i < array.length; ++i) {
-      keys[array[i]] = true;
+      keys[array[i].toLowerCase()] = true;
     }
     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",
@@ -334,17 +436,24 @@ CodeMirror.defineMode("css", 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",
-    "background-image", "background-origin", "background-position",
+    "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-blend-mode", "background-clip",
+    "background-color", "background-image", "background-origin", "background-position",
     "background-repeat", "background-size", "baseline-shift", "binding",
     "bleed", "bookmark-label", "bookmark-level", "bookmark-state",
     "bookmark-target", "border", "border-bottom", "border-bottom-color",
@@ -374,20 +483,22 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
     "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-rows", "grid-column", "grid-column-end", "grid-column-gap",
+    "grid-column-start", "grid-gap", "grid-row", "grid-row-end", "grid-row-gap",
+    "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",
     "line-stacking-shift", "line-stacking-strategy", "list-style",
     "list-style-image", "list-style-position", "list-style-type", "margin",
     "margin-bottom", "margin-left", "margin-right", "margin-top",
-    "marker-offset", "marks", "marquee-direction", "marquee-loop",
+    "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",
@@ -398,8 +509,8 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
     "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-inside", "shape-outside", "size",
-    "speak", "speak-as", "speak-header",
+    "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",
@@ -411,23 +522,41 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
     "text-wrap", "top", "transform", "transform-origin", "transform-style",
     "transition", "transition-delay", "transition-duration",
     "transition-property", "transition-timing-function", "unicode-bidi",
-    "vertical-align", "visibility", "voice-balance", "voice-duration",
+    "user-select", "vertical-align", "visibility", "voice-balance", "voice-duration",
     "voice-family", "voice-pitch", "voice-range", "voice-rate", "voice-stress",
-    "voice-volume", "volume", "white-space", "widows", "width", "word-break",
-    "word-spacing", "word-wrap", "z-index", "zoom",
+    "voice-volume", "volume", "white-space", "widows", "width", "will-change", "word-break",
+    "word-spacing", "word-wrap", "z-index",
     // 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 colorKeywords = keySet([
+  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_ = [
     "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige",
     "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown",
     "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue",
@@ -449,54 +578,58 @@ CodeMirror.defineMode("css", 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", "avoid-column", "avoid-page",
+    "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", "button", "button-bevel",
-    "buttonface", "buttonhighlight", "buttonshadow", "buttontext", "cambodian",
+    "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", "column", "compact", "condensed", "contain", "content",
-    "content-box", "context-menu", "continuous", "copy", "cover", "crop",
-    "cross", "crosshair", "currentcolor", "cursive", "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",
+    "col-resize", "collapse", "color", "color-burn", "color-dodge", "column", "column-reverse",
+    "compact", "condensed", "contain", "content", "contents",
+    "content-box", "context-menu", "continuous", "copy", "counter", "counters", "cover", "crop",
+    "cross", "crosshair", "currentcolor", "cursive", "cyclic", "darken", "dashed", "decimal",
+    "decimal-leading-zero", "default", "default-button", "dense", "destination-atop",
+    "destination-in", "destination-out", "destination-over", "devanagari", "difference",
+    "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",
-    "forwards", "from", "geometricPrecision", "georgian", "graytext", "groove",
-    "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hebrew",
+    "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et", "ethiopic-halehame-tig",
+    "ethiopic-numeric", "ew-resize", "exclusion", "expanded", "extends", "extra-condensed",
+    "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "flex", "flex-end", "flex-start", "footnotes",
+    "forwards", "from", "geometricPrecision", "georgian", "graytext", "grid", "groove",
+    "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hard-light", "hebrew",
     "help", "hidden", "hide", "higher", "highlight", "highlighttext",
-    "hiragana", "hiragana-iroha", "horizontal", "hsl", "hsla", "icon", "ignore",
+    "hiragana", "hiragana-iroha", "horizontal", "hsl", "hsla", "hue", "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", "keep-all", "khmer",
-    "landscape", "lao", "large", "larger", "left", "level", "lighter",
-    "line-through", "linear", "lines", "list-item", "listbox", "listitem",
+    "inline-block", "inline-flex", "inline-grid", "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", "lighten",
+    "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", "luminosity", "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",
@@ -505,41 +638,54 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
     "media-volume-slider-container", "media-volume-sliderthumb", "medium",
     "menu", "menulist", "menulist-button", "menulist-text",
     "menulist-textfield", "menutext", "message-box", "middle", "min-intrinsic",
-    "mix", "mongolian", "monospace", "move", "multiple", "myanmar", "n-resize",
+    "mix", "mongolian", "monospace", "move", "multiple", "multiply", "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", "opacity", "open-quote",
     "optimizeLegibility", "optimizeSpeed", "oriya", "oromo", "outset",
     "outside", "outside-shape", "overlay", "overline", "padding", "padding-box",
-    "painted", "page", "paused", "persian", "plus-darker", "plus-lighter", "pointer",
-    "polygon", "portrait", "pre", "pre-line", "pre-wrap", "preserve-3d", "progress", "push-button",
-    "radio", "read-only", "read-write", "read-write-plaintext-only", "rectangle", "region",
-    "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",
+    "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", "saturation", "scale", "scale3d", "scaleX", "scaleY", "scaleZ", "screen",
+    "scroll", "scrollbar", "scroll-position", "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",
+    "small", "small-caps", "small-caption", "smaller", "soft-light", "solid", "somali",
+    "source-atop", "source-in", "source-out", "source-over", "space", "space-around", "space-between", "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",
-    "transparent", "ultra-condensed", "ultra-expanded", "underline", "up",
+    "trad-chinese-formal", "trad-chinese-informal", "transform",
+    "translate", "translate3d", "translateX", "translateY", "translateZ",
+    "transparent", "ultra-condensed", "ultra-expanded", "underline", "unset", "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", "wrap", "wrap-reverse", "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;
@@ -554,66 +700,79 @@ CodeMirror.defineMode("css", 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"
   });
 
   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: {
+    tokenHooks: {
+      "/": function(stream, state) {
+        if (stream.eat("/")) {
+          stream.skipToEnd();
+          return ["comment", "comment"];
+        } else if (stream.eat("*")) {
+          state.tokenize = tokenCComment;
+          return tokenCComment(stream, state);
+        } else {
+          return ["operator", "operator"];
+        }
+      },
       ":": function(stream) {
-        if (stream.match(/\s*{/)) {
+        if (stream.match(/\s*\{/))
           return [null, "{"];
-        }
         return false;
       },
       "$": function(stream) {
         stream.match(/^[\w-]+/);
-        if (stream.peek() == ":") {
-          return ["variable", "variable-definition"];
-        }
-        return ["variable", "variable"];
-      },
-      ",": function(stream, state) {
-        if (state.stack[state.stack.length - 1] == "propertyValue" && stream.match(/^ *\$/, false)) {
-          return ["operator", ";"];
-        }
+        if (stream.match(/^\s*:/, false))
+          return ["variable-2", "variable-definition"];
+        return ["variable-2", "variable"];
       },
+      "#": function(stream) {
+        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();
@@ -625,15 +784,42 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
           return ["operator", "operator"];
         }
       },
-      "#": function(stream) {
-        if (stream.eat("{")) {
-          return ["operator", "interpolation"];
-        } else {
-          stream.eatWhile(/[\w\\\-]/);
-          return ["atom", "hash"];
-        }
+      "@": 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"
+    name: "css",
+    helperType: "less"
+  });
+
+  CodeMirror.defineMIME("text/x-gss", {
+    documentTypes: documentTypes,
+    mediaTypes: mediaTypes,
+    mediaFeatures: mediaFeatures,
+    propertyKeywords: propertyKeywords,
+    nonStandardPropertyKeywords: nonStandardPropertyKeywords,
+    fontProperties: fontProperties,
+    counterDescriptors: counterDescriptors,
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords,
+    supportsAtComponent: true,
+    tokenHooks: {
+      "/": function(stream, state) {
+        if (!stream.eat("*")) return false;
+        state.tokenize = tokenCComment;
+        return tokenCComment(stream, state);
+      }
+    },
+    name: "css",
+    helperType: "gss"
   });
-})();
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js
index b59ef37ed..eb21fcc14 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js
@@ -1,104 +1,152 @@
-CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
-  var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
-  var cssMode = CodeMirror.getMode(config, "css");
-
-  var scriptTypes = [], scriptTypesConf = parserConfig && parserConfig.scriptTypes;
-  scriptTypes.push({matches: /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^$/i,
-                    mode: CodeMirror.getMode(config, "javascript")});
-  if (scriptTypesConf) for (var i = 0; i < scriptTypesConf.length; ++i) {
-    var conf = scriptTypesConf[i];
-    scriptTypes.push({matches: conf.matches, mode: conf.mode && CodeMirror.getMode(config, conf.mode)});
-  }
-  scriptTypes.push({matches: /./,
-                    mode: CodeMirror.getMode(config, "text/plain")});
-
-  function html(stream, state) {
-    var tagName = state.htmlState.tagName;
-    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
-      var scriptType = stream.string.slice(Math.max(0, stream.pos - 100), stream.pos).match(/\btype\s*=\s*("[^"]+"|'[^']+'|\S+)[^<]*$/i);
-      scriptType = scriptType ? scriptType[1] : "";
-      if (scriptType && /[\"\']/.test(scriptType.charAt(0))) scriptType = scriptType.slice(1, scriptType.length - 1);
-      for (var i = 0; i < scriptTypes.length; ++i) {
-        var tp = scriptTypes[i];
-        if (typeof tp.matches == "string" ? scriptType == tp.matches : tp.matches.test(scriptType)) {
-          if (tp.mode) {
-            state.token = script;
-            state.localMode = tp.mode;
-            state.localState = tp.mode.startState && tp.mode.startState(htmlMode.indent(state.htmlState, ""));
-          }
-          break;
-        }
-      }
-    } else if (tagName == "style" && /\btag\b/.test(style) && stream.current() == ">") {
-      state.token = css;
-      state.localMode = cssMode;
-      state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
-    }
-    return style;
-  }
+// 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";
+
+  var defaultTags = {
+    script: [
+      ["lang", /(javascript|babel)/i, "javascript"],
+      ["type", /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^$/i, "javascript"],
+      ["type", /./, "text/plain"],
+      [null, null, "javascript"]
+    ],
+    style:  [
+      ["lang", /^css$/i, "css"],
+      ["type", /^(text\/)?(x-)?(stylesheet|css)$/i, "css"],
+      ["type", /./, "text/plain"],
+      [null, null, "css"]
+    ]
+  };
+
   function maybeBackup(stream, pat, style) {
-    var cur = stream.current();
-    var close = cur.search(pat), m;
-    if (close > -1) stream.backUp(cur.length - close);
-    else if (m = cur.match(/<\/?$/)) {
+    var cur = stream.current(), close = cur.search(pat);
+    if (close > -1) {
+      stream.backUp(cur.length - close);
+    } else if (cur.match(/<\/?$/)) {
       stream.backUp(cur.length);
       if (!stream.match(pat, false)) stream.match(cur);
     }
     return style;
   }
-  function script(stream, state) {
-    if (stream.match(/^<\/\s*script\s*>/i, false)) {
-      state.token = html;
-      state.localState = state.localMode = null;
-      return html(stream, state);
-    }
-    return maybeBackup(stream, /<\/\s*script\s*>/,
-                       state.localMode.token(stream, state.localState));
+
+  var attrRegexpCache = {};
+  function getAttrRegexp(attr) {
+    var regexp = attrRegexpCache[attr];
+    if (regexp) return regexp;
+    return attrRegexpCache[attr] = new RegExp("\\s+" + attr + "\\s*=\\s*('|\")?([^'\"]+)('|\")?\\s*");
+  }
+
+  function getAttrValue(text, attr) {
+    var match = text.match(getAttrRegexp(attr))
+    return match ? /^\s*(.*?)\s*$/.exec(match[2])[1] : ""
+  }
+
+  function getTagRegexp(tagName, anchored) {
+    return new RegExp((anchored ? "^" : "") + "<\/\s*" + tagName + "\s*>", "i");
   }
-  function css(stream, state) {
-    if (stream.match(/^<\/\s*style\s*>/i, false)) {
-      state.token = html;
-      state.localState = state.localMode = null;
-      return html(stream, state);
+
+  function addTags(from, to) {
+    for (var tag in from) {
+      var dest = to[tag] || (to[tag] = []);
+      var source = from[tag];
+      for (var i = source.length - 1; i >= 0; i--)
+        dest.unshift(source[i])
     }
-    return maybeBackup(stream, /<\/\s*style\s*>/,
-                       cssMode.token(stream, state.localState));
   }
 
-  return {
-    startState: function() {
-      var state = htmlMode.startState();
-      return {token: html, localMode: null, localState: null, htmlState: state};
-    },
-
-    copyState: function(state) {
-      if (state.localState)
-        var local = CodeMirror.copyState(state.localMode, state.localState);
-      return {token: state.token, localMode: state.localMode, localState: local,
-              htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
-    },
-
-    token: function(stream, state) {
-      return state.token(stream, state);
-    },
-
-    indent: function(state, textAfter) {
-      if (!state.localMode || /^\s*<\//.test(textAfter))
-        return htmlMode.indent(state.htmlState, textAfter);
-      else if (state.localMode.indent)
-        return state.localMode.indent(state.localState, textAfter);
-      else
-        return CodeMirror.Pass;
-    },
-
-    electricChars: "/{}:",
-
-    innerMode: function(state) {
-      return {state: state.localState || state.htmlState, mode: state.localMode || htmlMode};
+  function findMatchingMode(tagInfo, tagText) {
+    for (var i = 0; i < tagInfo.length; i++) {
+      var spec = tagInfo[i];
+      if (!spec[0] || spec[1].test(getAttrValue(tagText, spec[0]))) return spec[2];
     }
-  };
-}, "xml", "javascript", "css");
+  }
+
+  CodeMirror.defineMode("htmlmixed", function (config, parserConfig) {
+    var htmlMode = CodeMirror.getMode(config, {
+      name: "xml",
+      htmlMode: true,
+      multilineTagIndentFactor: parserConfig.multilineTagIndentFactor,
+      multilineTagIndentPastTag: parserConfig.multilineTagIndentPastTag
+    });
+
+    var tags = {};
+    var configTags = parserConfig && parserConfig.tags, configScript = parserConfig && parserConfig.scriptTypes;
+    addTags(defaultTags, tags);
+    if (configTags) addTags(configTags, tags);
+    if (configScript) for (var i = configScript.length - 1; i >= 0; i--)
+      tags.script.unshift(["type", configScript[i].matches, configScript[i].mode])
+
+    function html(stream, state) {
+      var style = htmlMode.token(stream, state.htmlState), tag = /\btag\b/.test(style), tagName
+      if (tag && !/[<>\s\/]/.test(stream.current()) &&
+          (tagName = state.htmlState.tagName && state.htmlState.tagName.toLowerCase()) &&
+          tags.hasOwnProperty(tagName)) {
+        state.inTag = tagName + " "
+      } else if (state.inTag && tag && />$/.test(stream.current())) {
+        var inTag = /^([\S]+) (.*)/.exec(state.inTag)
+        state.inTag = null
+        var modeSpec = stream.current() == ">" && findMatchingMode(tags[inTag[1]], inTag[2])
+        var mode = CodeMirror.getMode(config, modeSpec)
+        var endTagA = getTagRegexp(inTag[1], true), endTag = getTagRegexp(inTag[1], false);
+        state.token = function (stream, state) {
+          if (stream.match(endTagA, false)) {
+            state.token = html;
+            state.localState = state.localMode = null;
+            return null;
+          }
+          return maybeBackup(stream, endTag, state.localMode.token(stream, state.localState));
+        };
+        state.localMode = mode;
+        state.localState = CodeMirror.startState(mode, htmlMode.indent(state.htmlState, ""));
+      } else if (state.inTag) {
+        state.inTag += stream.current()
+        if (stream.eol()) state.inTag += " "
+      }
+      return style;
+    };
+
+    return {
+      startState: function () {
+        var state = CodeMirror.startState(htmlMode);
+        return {token: html, inTag: null, localMode: null, localState: null, htmlState: state};
+      },
+
+      copyState: function (state) {
+        var local;
+        if (state.localState) {
+          local = CodeMirror.copyState(state.localMode, state.localState);
+        }
+        return {token: state.token, inTag: state.inTag,
+                localMode: state.localMode, localState: local,
+                htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
+      },
+
+      token: function (stream, state) {
+        return state.token(stream, state);
+      },
+
+      indent: function (state, textAfter) {
+        if (!state.localMode || /^\s*<\//.test(textAfter))
+          return htmlMode.indent(state.htmlState, textAfter);
+        else if (state.localMode.indent)
+          return state.localMode.indent(state.localState, textAfter);
+        else
+          return CodeMirror.Pass;
+      },
+
+      innerMode: function (state) {
+        return {state: state.localState || state.htmlState, mode: state.localMode || htmlMode};
+      }
+    };
+  }, "xml", "javascript", "css");
 
-CodeMirror.defineMIME("text/html", "htmlmixed");
+  CodeMirror.defineMIME("text/html", "htmlmixed");
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js
index f27c06346..10419bf9d 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js
@@ -1,10 +1,28 @@
-// TODO actually recognize syntax of TypeScript constructs
+// 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";
+
+function expressionAllowed(stream, state, backUp) {
+  return /^(?:operator|sof|keyword c|case|new|[\[{}\(,;:]|=>)$/.test(state.lastType) ||
+    (state.lastType == "quasi" && /\{\s*$/.test(stream.string.slice(0, stream.pos - (backUp || 0))))
+}
 
 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,14 +33,15 @@ 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": kw("new"), "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"), "module": kw("module"), "class": kw("class"), "super": kw("atom"),
-      "yield": C, "export": kw("export"), "import": kw("import"), "extends": C
+      "this": kw("this"), "class": kw("class"), "super": kw("atom"),
+      "yield": C, "export": kw("export"), "import": kw("import"), "extends": C,
+      "await": C, "async": kw("async")
     };
 
     // Extend the 'normal' keywords with the TypeScript language extensions
@@ -30,18 +49,24 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       var type = {type: "variable", style: "variable-3"};
       var tsKeywords = {
         // object-like things
-        "interface": kw("interface"),
-        "extends": kw("extends"),
-        "constructor": kw("constructor"),
+        "interface": kw("class"),
+        "implements": C,
+        "namespace": C,
+        "module": kw("module"),
+        "enum": kw("module"),
+        "type": kw("type"),
 
         // scope modifiers
-        "public": kw("public"),
-        "private": kw("private"),
-        "protected": kw("protected"),
-        "static": kw("static"),
+        "public": kw("modifier"),
+        "private": kw("modifier"),
+        "protected": kw("modifier"),
+        "abstract": kw("modifier"),
+
+        // operators
+        "as": operator,
 
         // types
-        "string": type, "number": type, "bool": type, "any": type
+        "string": type, "number": type, "boolean": type, "any": type
       };
 
       for (var attr in tsKeywords) {
@@ -53,15 +78,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 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
@@ -83,10 +111,16 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     } else if (/[\[\]{}\(\),;\:\.]/.test(ch)) {
       return ret(ch);
     } else if (ch == "=" && stream.eat(">")) {
-      return ret("=>");
+      return ret("=>", "operator");
     } else if (ch == "0" && stream.eat(/x/i)) {
       stream.eatWhile(/[\da-f]/i);
       return ret("number", "number");
+    } else if (ch == "0" && stream.eat(/o/i)) {
+      stream.eatWhile(/[0-7]/i);
+      return ret("number", "number");
+    } else if (ch == "0" && stream.eat(/b/i)) {
+      stream.eatWhile(/[01]/i);
+      return ret("number", "number");
     } else if (/\d/.test(ch)) {
       stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
       return ret("number", "number");
@@ -97,14 +131,13 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       } else if (stream.eat("/")) {
         stream.skipToEnd();
         return ret("comment", "comment");
-      } else if (state.lastType == "operator" || state.lastType == "keyword c" ||
-               state.lastType == "sof" || /^[\[{}\(,;:]$/.test(state.lastType)) {
-        nextUntilUnescaped(stream, "/");
-        stream.eatWhile(/[gimy]/); // 'y' is "sticky" option in Mozilla
+      } else if (expressionAllowed(stream, state, 1)) {
+        readRegexp(stream);
+        stream.match(/^\b(([gimyu])(?![gimyu]*\2))+\b/);
         return ret("regexp", "string-2");
       } else {
         stream.eatWhile(isOperatorChar);
-        return ret("operator", null, stream.current());
+        return ret("operator", "operator", stream.current());
       }
     } else if (ch == "`") {
       state.tokenize = tokenQuasi;
@@ -113,10 +146,11 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       stream.skipToEnd();
       return ret("error", "error");
     } else if (isOperatorChar.test(ch)) {
-      stream.eatWhile(isOperatorChar);
-      return ret("operator", null, stream.current());
-    } else {
-      stream.eatWhile(/[\w\$_]/);
+      if (ch != ">" || !state.lexical || state.lexical.type != ">")
+        stream.eatWhile(isOperatorChar);
+      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);
@@ -125,8 +159,16 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
 
   function tokenString(quote) {
     return function(stream, state) {
-      if (!nextUntilUnescaped(stream, quote))
+      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");
     };
   }
@@ -168,17 +210,24 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     var arrow = stream.string.indexOf("=>", stream.start);
     if (arrow < 0) return;
 
+    if (isTS) { // Try to skip TypeScript return type declarations after the arguments
+      var m = /:\s*(?:\w+(?:<[^>]*>|\[\])?|\{[^}]*\})\s*$/.exec(stream.string.slice(stream.start, arrow))
+      if (m) arrow = m.index
+    }
+
     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;
+        if (--depth == 0) { if (ch == "(") sawSomething = true; break; }
       } else if (bracket >= 3 && bracket < 6) {
         ++depth;
-      } else if (/[$\w]/.test(ch)) {
+      } else if (wordRE.test(ch)) {
         sawSomething = true;
+      } else if (/["'\/]/.test(ch)) {
+        return;
       } else if (sawSomething && !depth) {
         ++pos;
         break;
@@ -189,7 +238,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
 
   // 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;
@@ -213,7 +262,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     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;
@@ -247,8 +296,8 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       return false;
     }
     var state = cx.state;
+    cx.marked = "def";
     if (state.context) {
-      cx.marked = "def";
       if (inList(state.localVars)) return;
       state.localVars = {name: varname, next: state.localVars};
     } else {
@@ -273,6 +322,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;
@@ -289,33 +340,40 @@ 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, 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 a") return cont(pushlex("form"), parenExpr, 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"), parenExpr, statement, poplex, maybeelse);
+    }
     if (type == "function") return cont(functiondef);
-    if (type == "for") return cont(pushlex("form"), forspec, 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("{"),
+    if (type == "switch") return cont(pushlex("form"), parenExpr, pushlex("}", "switch"), expect("{"),
                                       block, poplex, poplex);
     if (type == "case") return cont(expression, expect(":"));
     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, objlit, poplex);
-    if (type == "export") return cont(pushlex("form"), afterExport, poplex);
-    if (type == "import") return cont(pushlex("form"), afterImport, poplex);
+    if (type == "class") return cont(pushlex("form"), className, poplex);
+    if (type == "export") return cont(pushlex("stat"), afterExport, poplex);
+    if (type == "import") return cont(pushlex("stat"), afterImport, poplex);
+    if (type == "module") return cont(pushlex("form"), pattern, pushlex("}"), expect("{"), block, poplex, poplex)
+    if (type == "type") return cont(typeexpr, expect("operator"), typeexpr, expect(";"));
+    if (type == "async") return cont(statement)
     return pass(pushlex("stat"), expression, expect(";"), poplex);
   }
   function expression(type) {
@@ -324,21 +382,28 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   function expressionNoComma(type) {
     return expressionInner(type, true);
   }
+  function parenExpr(type) {
+    if (type != "(") return pass()
+    return cont(pushlex(")"), expression, expect(")"), poplex)
+  }
   function expressionInner(type, noComma) {
     if (cx.state.fatArrowAt == cx.stream.start) {
       var body = noComma ? arrowBodyNoComma : arrowBody;
-      if (type == "(") return cont(pushcontext, commasep(pattern, ")"), expect("=>"), body, popcontext);
+      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 == "keyword c") return cont(noComma ? maybeexpressionNoComma : maybeexpression);
-    if (type == "(") return cont(pushlex(")"), maybeexpression, comprehension, expect(")"), poplex, maybeop);
+    if (type == "function") return cont(functiondef, maybeop);
+    if (type == "class") return cont(pushlex("form"), classExpression, poplex);
+    if (type == "keyword c" || type == "async") return cont(noComma ? maybeexpressionNoComma : maybeexpression);
+    if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeop);
     if (type == "operator" || type == "spread") return cont(noComma ? expressionNoComma : expression);
-    if (type == "[") return cont(pushlex("]"), expressionNoComma, maybeArrayComprehension, poplex, maybeop);
-    if (type == "{") return cont(commasep(objprop, "}"), maybeop);
+    if (type == "[") return cont(pushlex("]"), arrayLiteral, poplex, maybeop);
+    if (type == "{") return contCommasep(objprop, "}", null, maybeop);
+    if (type == "quasi") return pass(quasi, maybeop);
+    if (type == "new") return cont(maybeTarget(noComma));
     return cont();
   }
   function maybeexpression(type) {
@@ -357,39 +422,49 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   function maybeoperatorNoComma(type, value, noComma) {
     var me = noComma == false ? maybeoperatorComma : maybeoperatorNoComma;
     var expr = noComma == false ? expression : expressionNoComma;
-    if (value == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
+    if (type == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
     if (type == "operator") {
       if (/\+\+|--/.test(value)) return cont(me);
       if (value == "?") return cont(expression, expect(":"), expr);
       return cont(expr);
     }
-    if (type == "quasi") { cx.cc.push(me); return quasi(value); }
+    if (type == "quasi") { return pass(quasi, me); }
     if (type == ";") return;
-    if (type == "(") return cont(commasep(expressionNoComma, ")", "call"), 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(value) {
-    if (!value) debugger;
-    if (value.slice(value.length - 2) != "${") return cont();
+  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();
+      return cont(quasi);
     }
   }
   function arrowBody(type) {
     findFatArrow(cx.stream, cx.state);
-    if (type == "{") return pass(statement);
-    return pass(expression);
+    return pass(type == "{" ? statement : expression);
   }
   function arrowBodyNoComma(type) {
     findFatArrow(cx.stream, cx.state);
-    if (type == "{") return pass(statement);
-    return pass(expressionNoComma);
+    return pass(type == "{" ? statement : expressionNoComma);
+  }
+  function maybeTarget(noComma) {
+    return function(type) {
+      if (type == ".") return cont(noComma ? targetNoComma : target);
+      else return pass(noComma ? expressionNoComma : expression);
+    };
+  }
+  function target(_, value) {
+    if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorComma); }
+  }
+  function targetNoComma(_, value) {
+    if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorNoComma); }
   }
   function maybelabel(type) {
     if (type == ":") return cont(poplex, statement);
@@ -399,15 +474,27 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     if (type == "variable") {cx.marked = "property"; return cont();}
   }
   function objprop(type, value) {
-    if (type == "variable") {
+    if (type == "async") {
+      cx.marked = "property";
+      return cont(objprop);
+    } else 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 == "modifier") {
+      return cont(objprop)
     } else if (type == "[") {
       return cont(expression, expect("]"), afterprop);
+    } else if (type == "spread") {
+      return cont(expression);
+    } else if (type == ":") {
+      return pass(afterprop)
     }
-    if (atomicTypes.hasOwnProperty(type)) return cont(afterprop);
   }
   function getterSetter(type) {
     if (type != "variable") return pass(afterprop);
@@ -418,39 +505,74 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     if (type == ":") return cont(expressionNoComma);
     if (type == "(") return pass(functiondef);
   }
-  function commasep(what, end, info) {
-    function proceed(type) {
+  function commasep(what, end) {
+    function proceed(type, value) {
       if (type == ",") {
         var lex = cx.state.lexical;
         if (lex.info == "call") lex.pos = (lex.pos || 0) + 1;
-        return cont(what, proceed);
+        return cont(function(type, value) {
+          if (type == end || value == end) return pass()
+          return pass(what)
+        }, proceed);
       }
-      if (type == end) return cont();
+      if (type == end || value == end) return cont();
       return cont(expect(end));
     }
-    return function(type) {
-      if (type == end) return cont();
-      if (info === false) return pass(what, proceed);
-      return pass(pushlex(end, info), what, proceed, poplex);
+    return function(type, value) {
+      if (type == end || value == end) return cont();
+      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 (isTS && type == ":") return cont(typedef);
+  function maybetype(type, value) {
+    if (isTS) {
+      if (type == ":") return cont(typeexpr);
+      if (value == "?") return cont(maybetype);
+    }
+  }
+  function typeexpr(type) {
+    if (type == "variable") {cx.marked = "variable-3"; return cont(afterType);}
+    if (type == "string" || type == "number" || type == "atom") return cont(afterType);
+    if (type == "{") return cont(commasep(typeprop, "}"))
+    if (type == "(") return cont(commasep(typearg, ")"), maybeReturnType)
+  }
+  function maybeReturnType(type) {
+    if (type == "=>") return cont(typeexpr)
+  }
+  function typeprop(type) {
+    if (type == "variable" || cx.style == "keyword") {
+      cx.marked = "property"
+      return cont(typeprop)
+    } else if (type == ":") {
+      return cont(typeexpr)
+    }
+  }
+  function typearg(type) {
+    if (type == "variable") return cont(typearg)
+    else if (type == ":") return cont(typeexpr)
   }
-  function typedef(type) {
-    if (type == "variable"){cx.marked = "variable-3"; return cont();}
+  function afterType(type, value) {
+    if (value == "<") return cont(pushlex(">"), commasep(typeexpr, ">"), poplex, afterType)
+    if (value == "|" || type == ".") return cont(typeexpr)
+    if (type == "[") return cont(expect("]"), afterType)
   }
   function vardef() {
     return pass(pattern, maybetype, maybeAssign, vardefCont);
   }
   function pattern(type, value) {
+    if (type == "modifier") return cont(pattern)
     if (type == "variable") { register(value); return cont(); }
-    if (type == "[") return cont(commasep(pattern, "]"));
-    if (type == "{") return cont(commasep(proppattern, "}"));
+    if (type == "spread") return cont(pattern);
+    if (type == "[") return contCommasep(pattern, "]");
+    if (type == "{") return contCommasep(proppattern, "}");
   }
   function proppattern(type, value) {
     if (type == "variable" && !cx.stream.match(/^\s*:/, false)) {
@@ -458,6 +580,8 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       return cont(maybeAssign);
     }
     if (type == "variable") cx.marked = "property";
+    if (type == "spread") return cont(pattern);
+    if (type == "}") return pass();
     return cont(expect(":"), pattern, maybeAssign);
   }
   function maybeAssign(_type, value) {
@@ -467,10 +591,10 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     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(")"));
+    if (type == "(") return cont(pushlex(")"), forspec1, expect(")"), poplex);
   }
   function forspec1(type) {
     if (type == "var") return cont(vardef, expect(";"), forspec2);
@@ -493,24 +617,46 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   function functiondef(type, value) {
     if (value == "*") {cx.marked = "keyword"; return cont(functiondef);}
     if (type == "variable") {register(value); return cont(functiondef);}
-    if (type == "(") return cont(pushcontext, commasep(funarg, ")"), statement, popcontext);
+    if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, maybetype, statement, popcontext);
   }
   function funarg(type) {
     if (type == "spread") return cont(funarg);
-    return pass(pattern, maybetype);
+    return pass(pattern, maybetype, maybeAssign);
+  }
+  function classExpression(type, value) {
+    // Class expressions may have an optional name.
+    if (type == "variable") return className(type, value);
+    return classNameAfter(type, value);
   }
   function className(type, value) {
     if (type == "variable") {register(value); return cont(classNameAfter);}
   }
-  function classNameAfter(_type, value) {
-    if (value == "extends") return cont(expression);
-  }
-  function objlit(type) {
-    if (type == "{") return cont(commasep(objprop, "}"));
+  function classNameAfter(type, value) {
+    if (value == "extends" || value == "implements") return cont(isTS ? typeexpr : expression, classNameAfter);
+    if (type == "{") return cont(pushlex("}"), classBody, poplex);
+  }
+  function classBody(type, value) {
+    if (type == "variable" || cx.style == "keyword") {
+      if ((value == "static" || value == "get" || value == "set" ||
+           (isTS && (value == "public" || value == "private" || value == "protected" || value == "readonly" || value == "abstract"))) &&
+          cx.stream.match(/^\s+[\w$\xa1-\uffff]/, false)) {
+        cx.marked = "keyword";
+        return cont(classBody);
+      }
+      cx.marked = "property";
+      return cont(isTS ? classfield : functiondef, classBody);
+    }
+    if (value == "*") {
+      cx.marked = "keyword";
+      return cont(classBody);
+    }
+    if (type == ";") return cont(classBody);
+    if (type == "}") return cont();
   }
-  function afterModule(type, value) {
-    if (type == "string") return cont(statement);
-    if (type == "variable") { register(value); return cont(maybeFrom); }
+  function classfield(type, value) {
+    if (value == "?") return cont(classfield)
+    if (type == ":") return cont(typeexpr, maybeAssign)
+    return pass(functiondef)
   }
   function afterExport(_type, value) {
     if (value == "*") { cx.marked = "keyword"; return cont(maybeFrom, expect(";")); }
@@ -522,21 +668,26 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     return pass(importSpec, maybeFrom);
   }
   function importSpec(type, value) {
-    if (type == "{") return cont(commasep(importSpec, "}"));
+    if (type == "{") return contCommasep(importSpec, "}");
     if (type == "variable") register(value);
-    return cont();
+    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 maybeArrayComprehension(type) {
-    if (type == "for") return pass(comprehension);
-    if (type == ",") return cont(commasep(expressionNoComma, "]", false));
-    return pass(commasep(expressionNoComma, "]", false));
+  function arrayLiteral(type) {
+    if (type == "]") return cont();
+    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
@@ -550,9 +701,10 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
         lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
         localVars: parserConfig.localVars,
         context: parserConfig.localVars && {vars: parserConfig.localVars},
-        indented: 0
+        indented: basecolumn || 0
       };
-      if (parserConfig.globalVars) state.globalVars = parserConfig.globalVars;
+      if (parserConfig.globalVars && typeof parserConfig.globalVars == "object")
+        state.globalVars = parserConfig.globalVars;
       return state;
     },
 
@@ -573,14 +725,18 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     indent: function(state, textAfter) {
       if (state.tokenize == tokenComment) return CodeMirror.Pass;
       if (state.tokenize != tokenBase) return 0;
-      var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical;
+      var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical, top
       // 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) break;
       }
-      if (lexical.type == "stat" && firstChar == "}") lexical = lexical.prev;
+      while ((lexical.type == "stat" || lexical.type == "form") &&
+             (firstChar == "}" || ((top = state.cc[state.cc.length - 1]) &&
+                                   (top == maybeoperatorComma || top == maybeoperatorNoComma) &&
+                                   !/^[,\.=+\-*:?[\(]/.test(textAfter))))
+        lexical = lexical.prev;
       if (statementIndent && lexical.type == ")" && lexical.prev.type == "stat")
         lexical = lexical.prev;
       var type = lexical.type, closing = firstChar == type;
@@ -589,29 +745,43 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       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",
-    jsonMode: jsonMode
+    jsonldMode: jsonldMode,
+    jsonMode: jsonMode,
+
+    expressionAllowed: expressionAllowed,
+    skipExpression: function(state) {
+      var top = state.cc[state.cc.length - 1]
+      if (top == expression || top == expressionNoComma) state.cc.pop()
+    }
   };
 });
 
+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 da3907485..000000000
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js
+++ /dev/null
@@ -1,346 +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");
-      if(ch === ",")return ret(null, ch);
-      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 == "(")return ret("string", "string"); // allow url(../image.png)
-      stream.eatWhile(/[\a-zA-Z0-9\-_]/);
-      if(stream.peek() === " ")stream.eatSpace();
-      if(stream.peek() === ")" || type === ":")return ret("number", "unit");//rgba(0,0,0,.25);
-      else if(stream.current().length >1){
-        if(state.stack[state.stack.length-1] === "rule" && stream.peek().match(/{|,|\+|\(/) === null)return ret("number", "unit");
-      }
-      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()) ){
-            if(type === "select-op")return ret("number", "unit"); else 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", stream.current());
-        }
-      } else {//when not a valid hexvalue length
-        stream.eatWhile(/[\w\\\-]/);
-        if(state.stack[state.stack.length-1] === "rule")return ret("atom", stream.current());return ret("atom", stream.current());
-        return ret("atom", "tag");
-      }
-    } else if (ch == "&") {
-      stream.eatWhile(/[\w\-]/);
-      return ret(null, ch);
-    } else {
-      stream.eatWhile(/[\w\\\-_%.{]/);
-      if(stream.current().match(/\\/) !== null){
-        if(stream.current().charAt(stream.current().length-1) === "\\"){
-          stream.eat(/\'|\"|\)|\(/);
-          while(stream.eatWhile(/[\w\\\-_%.{]/)){
-            stream.eat(/\'|\"|\)|\(/);
-          }
-          return ret("string", stream.current());
-        }
-      } //else if(type === "tag")return ret("tag", "tag");
-        else if(type == "string"){
-        if(state.stack[state.stack.length-1] === "{" && stream.peek() === ":")return ret("variable", "variable");
-        if(stream.peek() === "/")stream.eatWhile(/[\w\\\-_%.{:\/]/);
-        return ret(type, stream.current());
-      } else if(stream.current().match(/(^http$|^https$)/) != null){
-        stream.eatWhile(/[\w\\\-_%.{:\/]/);
-        if(stream.peek() === "/")stream.eatWhile(/[\w\\\-_%.{:\/]/);
-        return ret("string", "string");
-      } else if(stream.peek() == "<" || stream.peek() == ">" || stream.peek() == "+"){
-        if(type === "(" && (stream.current() === "n" || stream.current() === "-n"))return ret("string", stream.current());
-        return ret("tag", "tag");
-      } else if( /\(/.test(stream.peek()) ){
-        if(stream.current() === "when")return ret("variable","variable");
-        else if(state.stack[state.stack.length-1] === "@media" && stream.current() === "and")return ret("variable",stream.current());
-        return ret(null, ch);
-      } else if (stream.peek() == "/" && state.stack[state.stack.length-1] !== undefined){ // url(dir/center/image.png)
-        if(stream.peek() === "/")stream.eatWhile(/[\w\\\-_%.{:\/]/);
-        return ret("string", stream.current());
-      } 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);
-        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);
-        else if(state.stack[state.stack.length-1] === "border-color" || state.stack[state.stack.length-1] === "background-position" || state.stack[state.stack.length-1] === "font-family")return ret(null, stream.current());
-        else if(type === "tag")return ret("tag", "tag");
-        else if((type === ":" || type === "unit") && state.stack[state.stack.length-1] === "rule")return ret(null, stream.current());
-        else if(state.stack[state.stack.length-1] === "rule" && type === "tag")return ret("string", stream.current());
-        else if(state.stack[state.stack.length-1] === ";" && type === ":")return ret(null, stream.current());
-        //else if(state.stack[state.stack.length-1] === ";" || type === "")return ret("variable", stream.current());
-        else if(stream.peek() === "#" && type !== undefined && type.match(/\+|,|tag|select\-op|}|{|;/g) === null)return ret("string", stream.current());
-        else if(type === "variable")return ret(null, stream.current());
-        else if(state.stack[state.stack.length-1] === "{" && type === "comment")return ret("variable", stream.current());
-        else if(state.stack.length === 0 && (type === ";" || type === "comment"))return ret("tag", stream.current());
-        else if((state.stack[state.stack.length-1] === "{" || type === ";") && state.stack[state.stack.length-1] !== "@media{")return ret("variable", stream.current());
-        else if(state.stack[state.stack.length-2] === "{" && state.stack[state.stack.length-1] === ";")return ret("variable", stream.current());
-
-        return ret("tag", "tag");
-      } else if(type == "compare" || type == "a" || type == "("){
-        return ret("string", "string");
-      } else if(type == "|" || stream.current() == "-" || type == "["){
-        if(type == "|" && stream.peek().match(/\]|=|\~/) !== null)return ret("number", stream.current());
-        else if(type == "|" )return ret("tag", "tag");
-        else if(type == "["){
-          stream.eatWhile(/\w\-/);
-          return ret("number", stream.current());
-        }
-        return ret(null, ch);
-      } else if((stream.peek() == ":") || ( stream.eatSpace() && 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 if(state.stack[state.stack.length-1]  === "font-family" || state.stack[state.stack.length-1]  === "background-position" || state.stack[state.stack.length-1]  === "border-color"){
-        return ret(null, null);
-      } else {
-
-        if(state.stack[state.stack.length-1] === null && type === ":")return ret(null, stream.current());
-
-        //else if((type === ")" && state.stack[state.stack.length-1] === "rule") || (state.stack[state.stack.length-2] === "{" && state.stack[state.stack.length-1] === "rule" && type === "variable"))return ret(null, stream.current());
-
-        else if(/\^|\$/.test(stream.current()) && stream.peek().match(/\~|=/) !== null)return ret("string", "string");//att^=val
-
-        else if(type === "unit" && state.stack[state.stack.length-1] === "rule")return ret(null, "unit");
-        else if(type === "unit" && state.stack[state.stack.length-1] === ";")return ret(null, "unit");
-        else if(type === ")" && state.stack[state.stack.length-1] === "rule")return ret(null, "unit");
-        else if(type && type.match("@") !== null  && state.stack[state.stack.length-1] === "rule")return ret(null, "unit");
-        //else if(type === "unit" && state.stack[state.stack.length-1] === "rule")return ret(null, stream.current());
-
-        else if((type === ";" || type === "}" || type === ",") && state.stack[state.stack.length-1] === ";")return ret("tag", stream.current());
-        else if((type === ";" && stream.peek() !== undefined && stream.peek().match(/{|./) === null) || (type === ";" && stream.eatSpace() && stream.peek().match(/{|./) === null))return ret("variable", stream.current());
-        else if((type === "@media" && state.stack[state.stack.length-1] === "@media") || type === "@namespace")return ret("tag", stream.current());
-
-        else if(type === "{"  && state.stack[state.stack.length-1] === ";" && stream.peek() === "{")return ret("tag", "tag");
-        else if((type === "{" || type === ":") && state.stack[state.stack.length-1] === ";")return ret(null, stream.current());
-        else if((state.stack[state.stack.length-1] === "{" && stream.eatSpace() && stream.peek().match(/.|#/) === null) || type === "select-op"  || (state.stack[state.stack.length-1] === "rule" && type === ",") )return ret("tag", "tag");
-        else if(type === "variable" && state.stack[state.stack.length-1] === "rule")return ret("tag", "tag");
-        else if((stream.eatSpace() && stream.peek() === "{") || stream.eol() || stream.peek() === "{")return ret("tag", "tag");
-        //this one messes up indentation
-        //else if((type === "}" && stream.peek() !== ":") || (type === "}" && stream.eatSpace() && stream.peek() !== ":"))return(type, "tag");
-
-        else if(type === ")" && (stream.current() == "and" || stream.current() == "and "))return ret("variable", "variable");
-        else if(type === ")" && (stream.current() == "when" || stream.current() == "when "))return ret("variable", "variable");
-        else if(type === ")" || type === "comment" || type === "{")return ret("tag", "tag");
-        else if(stream.sol())return ret("tag", "tag");
-        else if((stream.eatSpace() && stream.peek() === "#") || stream.peek() === "#")return ret("tag", "tag");
-        else if(state.stack.length === 0)return ret("tag", "tag");
-        else if(type === ";" && stream.peek() !== undefined && stream.peek().match(/^[.|\#]/g) !== null)return ret("tag", "tag");
-
-        else if(type === ":"){stream.eatSpace();return ret(null, stream.current());}
-
-        else if(stream.current() === "and " || stream.current() === "and")return ret("variable", stream.current());
-        else if(type === ";" && state.stack[state.stack.length-1] === "{")return ret("variable", stream.current());
-
-        else if(state.stack[state.stack.length-1] === "rule")return ret(null, stream.current());
-
-        return ret("tag", stream.current());
-      }
-    }
-  }
-
-  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 (stream.current() === "font-family") state.stack[state.stack.length-1] = "font-family";
-      else if (stream.current() === "background-position") state.stack[state.stack.length-1] = "background-position";
-      else if (stream.current() === "border-color") state.stack[state.stack.length-1] = "border-color";
-      else if (context == "{" && type != "comment" && type !== "tag") state.stack.push("rule");
-      else if (stream.peek() === ":" && stream.current().match(/@|#/) === null) style = type;
-      if(type === ";" && (state.stack[state.stack.length-1] == "font-family" || state.stack[state.stack.length-1] == "background-position" || state.stack[state.stack.length-1] == "border-color"))state.stack[state.stack.length-1] = stream.current();
-      else if(type === "tag" && stream.peek() === ")" && stream.current().match(/\:/) === null){type = null; style = null;}
-      // ????
-      else if((type === "variable" && stream.peek() === ")") || (type === "variable" && stream.eatSpace() && stream.peek() === ")"))return ret(null,stream.current());
-      return style;
-    },
-
-    indent: function(state, textAfter) {
-      var n = state.stack.length;
-      if (/^\}/.test(textAfter))
-        n -= state.stack[state.stack.length-1] === "rule" ? 2 : 1;
-      else if (state.stack[state.stack.length-2] === "{")
-        n -= state.stack[state.stack.length-1] === "rule" ? 1 : 0;
-      return state.baseIndent + n * indentUnit;
-    },
-
-    electricChars: "}",
-    blockCommentStart: "/*",
-    blockCommentEnd: "*/",
-    lineComment: "//"
-  };
-});
-
-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..1e363f876 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,16 +46,16 @@
       stream.next();
       return 'error';
     };
-    external = {
+    var external = {
       startState: function(){
         return {
           next: 'start',
-          lastToken: null
+          lastToken: {style: null, indent: 0, content: ""}
         };
       },
       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/mark-selection.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/mark-selection.js
new file mode 100644
index 000000000..5c42d21eb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/mark-selection.js
@@ -0,0 +1,118 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+// Because sometimes you need to mark the selected *text*.
+//
+// Adds an option 'styleSelectedText' which, when enabled, gives
+// selected text the CSS class given as option value, or
+// "CodeMirror-selectedtext" when the value is not a string.
+
+(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.defineOption("styleSelectedText", false, function(cm, val, old) {
+    var prev = old && old != CodeMirror.Init;
+    if (val && !prev) {
+      cm.state.markedSelection = [];
+      cm.state.markedSelectionStyle = typeof val == "string" ? val : "CodeMirror-selectedtext";
+      reset(cm);
+      cm.on("cursorActivity", onCursorActivity);
+      cm.on("change", onChange);
+    } else if (!val && prev) {
+      cm.off("cursorActivity", onCursorActivity);
+      cm.off("change", onChange);
+      clear(cm);
+      cm.state.markedSelection = cm.state.markedSelectionStyle = null;
+    }
+  });
+
+  function onCursorActivity(cm) {
+    cm.operation(function() { update(cm); });
+  }
+
+  function onChange(cm) {
+    if (cm.state.markedSelection.length)
+      cm.operation(function() { clear(cm); });
+  }
+
+  var CHUNK_SIZE = 8;
+  var Pos = CodeMirror.Pos;
+  var cmp = CodeMirror.cmpPos;
+
+  function coverRange(cm, from, to, addAt) {
+    if (cmp(from, to) == 0) return;
+    var array = cm.state.markedSelection;
+    var cls = cm.state.markedSelectionStyle;
+    for (var line = from.line;;) {
+      var start = line == from.line ? from : Pos(line, 0);
+      var endLine = line + CHUNK_SIZE, atEnd = endLine >= to.line;
+      var end = atEnd ? to : Pos(endLine, 0);
+      var mark = cm.markText(start, end, {className: cls});
+      if (addAt == null) array.push(mark);
+      else array.splice(addAt++, 0, mark);
+      if (atEnd) break;
+      line = endLine;
+    }
+  }
+
+  function clear(cm) {
+    var array = cm.state.markedSelection;
+    for (var i = 0; i < array.length; ++i) array[i].clear();
+    array.length = 0;
+  }
+
+  function reset(cm) {
+    clear(cm);
+    var ranges = cm.listSelections();
+    for (var i = 0; i < ranges.length; i++)
+      coverRange(cm, ranges[i].from(), ranges[i].to());
+  }
+
+  function update(cm) {
+    if (!cm.somethingSelected()) return clear(cm);
+    if (cm.listSelections().length > 1) return reset(cm);
+
+    var from = cm.getCursor("start"), to = cm.getCursor("end");
+
+    var array = cm.state.markedSelection;
+    if (!array.length) return coverRange(cm, from, to);
+
+    var coverStart = array[0].find(), coverEnd = array[array.length - 1].find();
+    if (!coverStart || !coverEnd || to.line - from.line < CHUNK_SIZE ||
+        cmp(from, coverEnd.to) >= 0 || cmp(to, coverStart.from) <= 0)
+      return reset(cm);
+
+    while (cmp(from, coverStart.from) > 0) {
+      array.shift().clear();
+      coverStart = array[0].find();
+    }
+    if (cmp(from, coverStart.from) < 0) {
+      if (coverStart.to.line - from.line < CHUNK_SIZE) {
+        array.shift().clear();
+        coverRange(cm, from, coverStart.to, 0);
+      } else {
+        coverRange(cm, from, coverStart.from, 0);
+      }
+    }
+
+    while (cmp(to, coverEnd.to) < 0) {
+      array.pop().clear();
+      coverEnd = array[array.length - 1].find();
+    }
+    if (cmp(to, coverEnd.to) > 0) {
+      if (to.line - coverEnd.from.line < CHUNK_SIZE) {
+        array.pop().clear();
+        coverRange(cm, coverEnd.from, to);
+      } else {
+        coverRange(cm, coverEnd.to, to);
+      }
+    }
+  }
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js
index 9d9b3882f..76754ed55 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js
@@ -1,79 +1,111 @@
-(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 maxScanLines = (state && state.maxScanLines) || 100;
 
-    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 + maxScanLines, cm.lineCount()) : Math.max(-1, i - maxScanLines); 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);
     });
   }
 
   CodeMirror.defineOption("matchBrackets", false, function(cm, val, old) {
-    if (old && old != CodeMirror.Init)
+    if (old && old != CodeMirror.Init) {
       cm.off("cursorActivity", doMatchBrackets);
+      if (currentlyHighlighted) {currentlyHighlighted(); currentlyHighlighted = null;}
+    }
     if (val) {
       cm.state.matchBrackets = typeof val == "object" ? val : {};
       cm.on("cursorActivity", doMatchBrackets);
@@ -81,7 +113,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..4a9f99a07 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;
     },
 
@@ -52,8 +76,15 @@ CodeMirror.overlayMode = CodeMirror.overlayParser = function(base, overlay, comb
     innerMode: function(state) { return {state: state.base, mode: base}; },
 
     blankLine: function(state) {
-      if (base.blankLine) base.blankLine(state.base);
-      if (overlay.blankLine) overlay.blankLine(state.overlay);
+      var baseToken, overlayToken;
+      if (base.blankLine) baseToken = base.blankLine(state.base);
+      if (overlay.blankLine) overlayToken = overlay.blankLine(state.overlay);
+
+      return overlayToken == null ?
+        baseToken :
+        (combine && baseToken != null ? baseToken + " " + overlayToken : overlayToken);
     }
   };
 };
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js
index 748afe727..2f8b1f84a 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js
@@ -1,13 +1,25 @@
-(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("blur", onBlur);
       cm.on("change", onChange);
+      cm.on("swapDoc", onChange);
       onChange(cm);
     } else if (!val && prev) {
       cm.off("blur", onBlur);
       cm.off("change", onChange);
+      cm.off("swapDoc", onChange);
       clearPlaceholder(cm);
       var wrapper = cm.getWrapperElement();
       wrapper.className = wrapper.className.replace(" CodeMirror-empty", "");
@@ -27,7 +39,9 @@
     var elt = cm.state.placeholder = document.createElement("pre");
     elt.style.cssText = "height: 0; overflow: visible";
     elt.className = "CodeMirror-placeholder";
-    elt.appendChild(document.createTextNode(cm.getOption("placeholder")));
+    var placeHolder = cm.getOption("placeholder")
+    if (typeof placeHolder == "string") placeHolder = document.createTextNode(placeHolder)
+    elt.appendChild(placeHolder)
     cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
   }
 
@@ -45,4 +59,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 7aafa2ad8..a51c6d0d5 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/runmode.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/runmode.js
@@ -1,9 +1,22 @@
+// 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);
   var ie_lt9 = ie && (document.documentMode == null || document.documentMode < 9);
 
-  if (callback.nodeType == 1) {
+  if (callback.appendChild) {
     var tabSize = (options && options.tabSize) || CodeMirror.defaults.tabSize;
     var node = callback, col = 0;
     node.innerHTML = "";
@@ -43,10 +56,11 @@ 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, state);
@@ -54,3 +68,5 @@ CodeMirror.runMode = function(string, modespec, callback, options) {
     }
   }
 };
+
+});
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 c034d5865..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 3be68caa1..32ced3e9d 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";
 
@@ -19,13 +32,13 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
       if (result !== false) return result;
     }
 
-    if (support.hexNumber == true &&
+    if (support.hexNumber &&
       ((ch == "0" && stream.match(/^[xX][0-9a-fA-F]+/))
       || (ch == "x" || ch == "X") && stream.match(/^'[0-9a-fA-F]+'/))) {
       // hex
       // ref: http://dev.mysql.com/doc/refman/5.5/en/hexadecimal-literals.html
       return "number";
-    } else if (support.binaryNumber == true &&
+    } else if (support.binaryNumber &&
       (((ch == "b" || ch == "B") && stream.match(/^'[01]+'/))
       || (ch == "0" && stream.match(/^b[01]+/)))) {
       // bitstring
@@ -35,7 +48,7 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
       // numbers
       // ref: http://dev.mysql.com/doc/refman/5.5/en/number-literals.html
           stream.match(/^[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?/);
-      support.decimallessFloat == true && stream.eat('.');
+      support.decimallessFloat && stream.eat('.');
       return "number";
     } else if (ch == "?" && (stream.eatSpace() || stream.eol() || stream.eat(";"))) {
       // placeholders
@@ -45,14 +58,14 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
       // ref: http://dev.mysql.com/doc/refman/5.5/en/string-literals.html
       state.tokenize = tokenLiteral(ch);
       return state.tokenize(stream, state);
-    } else if ((((support.nCharCast == true && (ch == "n" || ch == "N"))
-        || (support.charsetCast == true && ch == "_" && stream.match(/[a-z][a-z0-9]*/i)))
+    } else if ((((support.nCharCast && (ch == "n" || ch == "N"))
+        || (support.charsetCast && ch == "_" && stream.match(/[a-z][a-z0-9]*/i)))
         && (stream.peek() == "'" || stream.peek() == '"'))) {
       // charset casting: _utf8'str', N'str', n'str'
       // ref: http://dev.mysql.com/doc/refman/5.5/en/string-literals.html
       return "keyword";
     } else if (/^[\(\),\;\[\]]/.test(ch)) {
-      // no highlightning
+      // no highlighting
       return null;
     } else if (support.commentSlashSlash && ch == "/" && stream.eat("/")) {
       // 1-line comment
@@ -71,12 +84,12 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
       return state.tokenize(stream, state);
     } else if (ch == ".") {
       // .1 for 0.1
-      if (support.zerolessFloat == true && stream.match(/^(?:\d+(?:e[+-]?\d+)?)/i)) {
+      if (support.zerolessFloat && stream.match(/^(?:\d+(?:e[+-]?\d+)?)/i)) {
         return "number";
       }
       // .table_name (ODBC)
       // // ref: http://dev.mysql.com/doc/refman/5.6/en/identifier-qualifiers.html
-      if (support.ODBCdotTable == true && stream.match(/^[a-zA-Z_]+/)) {
+      if (support.ODBCdotTable && stream.match(/^[a-zA-Z_]+/)) {
         return "variable-2";
       }
     } else if (operatorChars.test(ch)) {
@@ -178,8 +191,9 @@ 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: "/*",
@@ -199,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
@@ -242,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 limit ";
 
   // turn a space-separated list into an array
   function set(str) {
@@ -265,7 +280,7 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
   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"),
+    keywords: set(sqlKeywords + "begin trigger proc view index for add constraint key primary foreign collate clustered nonclustered declare exec"),
     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: /^[*+\-%<>!=]/,
@@ -278,7 +293,7 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
   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 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 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"),
+    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: /^[*+\-%<>!=&|^]/,
@@ -312,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"),
@@ -325,22 +340,55 @@ 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"),
-    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 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"),
+    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 length lengthb 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")
+  });
+
+  CodeMirror.defineMIME("text/x-pgsql", {
+    name: "sql",
+    client: set("source"),
+    // http://www.postgresql.org/docs/9.5/static/sql-keywords-appendix.html
+    keywords: set(sqlKeywords + "a abort abs absent absolute access according action ada add admin after aggregate all allocate also always analyse analyze any are array array_agg array_max_cardinality asensitive assertion assignment asymmetric at atomic attribute attributes authorization avg backward base64 before begin begin_frame begin_partition bernoulli binary bit_length blob blocked bom both breadth c cache call called cardinality cascade cascaded case cast catalog catalog_name ceil ceiling chain characteristics characters character_length character_set_catalog character_set_name character_set_schema char_length check checkpoint class class_origin clob close cluster coalesce cobol collate collation collation_catalog collation_name collation_schema collect column columns column_name command_function command_function_code comment comments commit committed concurrently condition condition_number configuration conflict connect connection connection_name constraint constraints constraint_catalog constraint_name constraint_schema constructor contains content continue control conversion convert copy corr corresponding cost covar_pop covar_samp cross csv cube cume_dist current current_catalog current_date current_default_transform_group current_path current_role current_row current_schema current_time current_timestamp current_transform_group_for_type current_user cursor cursor_name cycle data database datalink datetime_interval_code datetime_interval_precision day db deallocate dec declare default defaults deferrable deferred defined definer degree delimiter delimiters dense_rank depth deref derived describe descriptor deterministic diagnostics dictionary disable discard disconnect dispatch dlnewcopy dlpreviouscopy dlurlcomplete dlurlcompleteonly dlurlcompletewrite dlurlpath dlurlpathonly dlurlpathwrite dlurlscheme dlurlserver dlvalue do document domain dynamic dynamic_function dynamic_function_code each element else empty enable encoding encrypted end end-exec end_frame end_partition enforced enum equals escape event every except exception exclude excluding exclusive exec execute exists exp explain expression extension external extract false family fetch file filter final first first_value flag float floor following for force foreign fortran forward found frame_row free freeze fs full function functions fusion g general generated get global go goto grant granted greatest grouping groups handler header hex hierarchy hold hour id identity if ignore ilike immediate immediately immutable implementation implicit import including increment indent index indexes indicator inherit inherits initially inline inner inout input insensitive instance instantiable instead integrity intersect intersection invoker isnull isolation k key key_member key_type label lag language large last last_value lateral lead leading leakproof least left length level library like_regex link listen ln load local localtime localtimestamp location locator lock locked logged lower m map mapping match matched materialized max maxvalue max_cardinality member merge message_length message_octet_length message_text method min minute minvalue mod mode modifies module month more move multiset mumps name names namespace national natural nchar nclob nesting new next nfc nfd nfkc nfkd nil no none normalize normalized nothing notify notnull nowait nth_value ntile null nullable nullif nulls number object occurrences_regex octets octet_length of off offset oids old only open operator option options ordering ordinality others out outer output over overlaps overlay overriding owned owner p pad parameter parameter_mode parameter_name parameter_ordinal_position parameter_specific_catalog parameter_specific_name parameter_specific_schema parser partial partition pascal passing passthrough password percent percentile_cont percentile_disc percent_rank period permission placing plans pli policy portion position position_regex power precedes preceding prepare prepared preserve primary prior privileges procedural procedure program public quote range rank read reads reassign recheck recovery recursive ref references referencing refresh regr_avgx regr_avgy regr_count regr_intercept regr_r2 regr_slope regr_sxx regr_sxy regr_syy reindex relative release rename repeatable replace replica requiring reset respect restart restore restrict result return returned_cardinality returned_length returned_octet_length returned_sqlstate returning returns revoke right role rollback rollup routine routine_catalog routine_name routine_schema row rows row_count row_number rule savepoint scale schema schema_name scope scope_catalog scope_name scope_schema scroll search second section security selective self sensitive sequence sequences serializable server server_name session session_user setof sets share show similar simple size skip snapshot some source space specific specifictype specific_name sql sqlcode sqlerror sqlexception sqlstate sqlwarning sqrt stable standalone start state statement static statistics stddev_pop stddev_samp stdin stdout storage strict strip structure style subclass_origin submultiset substring substring_regex succeeds sum symmetric sysid system system_time system_user t tables tablesample tablespace table_name temp template temporary then ties timezone_hour timezone_minute to token top_level_count trailing transaction transactions_committed transactions_rolled_back transaction_active transform transforms translate translate_regex translation treat trigger trigger_catalog trigger_name trigger_schema trim trim_array true truncate trusted type types uescape unbounded uncommitted under unencrypted unique unknown unlink unlisten unlogged unnamed unnest until untyped upper uri usage user user_defined_type_catalog user_defined_type_code user_defined_type_name user_defined_type_schema using vacuum valid validate validator value value_of varbinary variadic var_pop var_samp verbose version versioning view views volatile when whenever whitespace width_bucket window within work wrapper write xmlagg xmlattributes xmlbinary xmlcast xmlcomment xmlconcat xmldeclaration xmldocument xmlelement xmlexists xmlforest xmliterate xmlnamespaces xmlparse xmlpi xmlquery xmlroot xmlschema xmlserialize xmltable xmltext xmlvalidate year yes loop repeat"),
+    // http://www.postgresql.org/docs/9.5/static/datatype.html
+    builtin: set("bigint int8 bigserial serial8 bit varying varbit boolean bool box bytea character char varchar cidr circle date double precision float8 inet integer int int4 interval json jsonb line lseg macaddr money numeric decimal path pg_lsn point polygon real float4 smallint int2 smallserial serial2 serial serial4 text time without zone with timetz timestamp timestamptz tsquery tsvector txid_snapshot uuid xml"),
+    atoms: set("false true null unknown"),
+    operatorChars: /^[*+\-%<>!=&|^\/#@?~]/,
+    dateSQL: set("date time timestamp"),
+    support: set("ODBCdotTable decimallessFloat zerolessFloat binaryNumber hexNumber nCharCast charsetCast")
+  });
+
+  // Google's SQL-like query language, GQL
+  CodeMirror.defineMIME("text/x-gql", {
+    name: "sql",
+    keywords: set("ancestor and asc by contains desc descendant distinct from group has in is limit offset on order select superset where"),
+    atoms: set("false true"),
+    builtin: set("blob datetime first key __key__ string integer double boolean null"),
+    operatorChars: /^[*+\-%<>!=]/
+  });
 }());
 
+});
+
 /*
   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/sublime.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/sublime.js
new file mode 100644
index 000000000..c5d2906bc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/sublime.js
@@ -0,0 +1,588 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+// A rough approximation of Sublime Text's keybindings
+// Depends on addon/search/searchcursor.js and optionally addon/dialog/dialogs.js
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../lib/codemirror"), require("../addon/search/searchcursor"), require("../addon/edit/matchbrackets"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../lib/codemirror", "../addon/search/searchcursor", "../addon/edit/matchbrackets"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+
+  var map = CodeMirror.keyMap.sublime = {fallthrough: "default"};
+  var cmds = CodeMirror.commands;
+  var Pos = CodeMirror.Pos;
+  var mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
+  var ctrl = mac ? "Cmd-" : "Ctrl-";
+
+  // This is not exactly Sublime's algorithm. I couldn't make heads or tails of that.
+  function findPosSubword(doc, start, dir) {
+    if (dir < 0 && start.ch == 0) return doc.clipPos(Pos(start.line - 1));
+    var line = doc.getLine(start.line);
+    if (dir > 0 && start.ch >= line.length) return doc.clipPos(Pos(start.line + 1, 0));
+    var state = "start", type;
+    for (var pos = start.ch, e = dir < 0 ? 0 : line.length, i = 0; pos != e; pos += dir, i++) {
+      var next = line.charAt(dir < 0 ? pos - 1 : pos);
+      var cat = next != "_" && CodeMirror.isWordChar(next) ? "w" : "o";
+      if (cat == "w" && next.toUpperCase() == next) cat = "W";
+      if (state == "start") {
+        if (cat != "o") { state = "in"; type = cat; }
+      } else if (state == "in") {
+        if (type != cat) {
+          if (type == "w" && cat == "W" && dir < 0) pos--;
+          if (type == "W" && cat == "w" && dir > 0) { type = "w"; continue; }
+          break;
+        }
+      }
+    }
+    return Pos(start.line, pos);
+  }
+
+  function moveSubword(cm, dir) {
+    cm.extendSelectionsBy(function(range) {
+      if (cm.display.shift || cm.doc.extend || range.empty())
+        return findPosSubword(cm.doc, range.head, dir);
+      else
+        return dir < 0 ? range.from() : range.to();
+    });
+  }
+
+  var goSubwordCombo = mac ? "Ctrl-" : "Alt-";
+
+  cmds[map[goSubwordCombo + "Left"] = "goSubwordLeft"] = function(cm) { moveSubword(cm, -1); };
+  cmds[map[goSubwordCombo + "Right"] = "goSubwordRight"] = function(cm) { moveSubword(cm, 1); };
+
+  if (mac) map["Cmd-Left"] = "goLineStartSmart";
+
+  var scrollLineCombo = mac ? "Ctrl-Alt-" : "Ctrl-";
+
+  cmds[map[scrollLineCombo + "Up"] = "scrollLineUp"] = function(cm) {
+    var info = cm.getScrollInfo();
+    if (!cm.somethingSelected()) {
+      var visibleBottomLine = cm.lineAtHeight(info.top + info.clientHeight, "local");
+      if (cm.getCursor().line >= visibleBottomLine)
+        cm.execCommand("goLineUp");
+    }
+    cm.scrollTo(null, info.top - cm.defaultTextHeight());
+  };
+  cmds[map[scrollLineCombo + "Down"] = "scrollLineDown"] = function(cm) {
+    var info = cm.getScrollInfo();
+    if (!cm.somethingSelected()) {
+      var visibleTopLine = cm.lineAtHeight(info.top, "local")+1;
+      if (cm.getCursor().line <= visibleTopLine)
+        cm.execCommand("goLineDown");
+    }
+    cm.scrollTo(null, info.top + cm.defaultTextHeight());
+  };
+
+  cmds[map["Shift-" + ctrl + "L"] = "splitSelectionByLine"] = function(cm) {
+    var ranges = cm.listSelections(), lineRanges = [];
+    for (var i = 0; i < ranges.length; i++) {
+      var from = ranges[i].from(), to = ranges[i].to();
+      for (var line = from.line; line <= to.line; ++line)
+        if (!(to.line > from.line && line == to.line && to.ch == 0))
+          lineRanges.push({anchor: line == from.line ? from : Pos(line, 0),
+                           head: line == to.line ? to : Pos(line)});
+    }
+    cm.setSelections(lineRanges, 0);
+  };
+
+  map["Shift-Tab"] = "indentLess";
+
+  cmds[map["Esc"] = "singleSelectionTop"] = function(cm) {
+    var range = cm.listSelections()[0];
+    cm.setSelection(range.anchor, range.head, {scroll: false});
+  };
+
+  cmds[map[ctrl + "L"] = "selectLine"] = function(cm) {
+    var ranges = cm.listSelections(), extended = [];
+    for (var i = 0; i < ranges.length; i++) {
+      var range = ranges[i];
+      extended.push({anchor: Pos(range.from().line, 0),
+                     head: Pos(range.to().line + 1, 0)});
+    }
+    cm.setSelections(extended);
+  };
+
+  map["Shift-Ctrl-K"] = "deleteLine";
+
+  function insertLine(cm, above) {
+    if (cm.isReadOnly()) return CodeMirror.Pass
+    cm.operation(function() {
+      var len = cm.listSelections().length, newSelection = [], last = -1;
+      for (var i = 0; i < len; i++) {
+        var head = cm.listSelections()[i].head;
+        if (head.line <= last) continue;
+        var at = Pos(head.line + (above ? 0 : 1), 0);
+        cm.replaceRange("\n", at, null, "+insertLine");
+        cm.indentLine(at.line, null, true);
+        newSelection.push({head: at, anchor: at});
+        last = head.line + 1;
+      }
+      cm.setSelections(newSelection);
+    });
+    cm.execCommand("indentAuto");
+  }
+
+  cmds[map[ctrl + "Enter"] = "insertLineAfter"] = function(cm) { return insertLine(cm, false); };
+
+  cmds[map["Shift-" + ctrl + "Enter"] = "insertLineBefore"] = function(cm) { return insertLine(cm, true); };
+
+  function wordAt(cm, pos) {
+    var start = pos.ch, end = start, line = cm.getLine(pos.line);
+    while (start && CodeMirror.isWordChar(line.charAt(start - 1))) --start;
+    while (end < line.length && CodeMirror.isWordChar(line.charAt(end))) ++end;
+    return {from: Pos(pos.line, start), to: Pos(pos.line, end), word: line.slice(start, end)};
+  }
+
+  cmds[map[ctrl + "D"] = "selectNextOccurrence"] = function(cm) {
+    var from = cm.getCursor("from"), to = cm.getCursor("to");
+    var fullWord = cm.state.sublimeFindFullWord == cm.doc.sel;
+    if (CodeMirror.cmpPos(from, to) == 0) {
+      var word = wordAt(cm, from);
+      if (!word.word) return;
+      cm.setSelection(word.from, word.to);
+      fullWord = true;
+    } else {
+      var text = cm.getRange(from, to);
+      var query = fullWord ? new RegExp("\\b" + text + "\\b") : text;
+      var cur = cm.getSearchCursor(query, to);
+      if (cur.findNext()) {
+        cm.addSelection(cur.from(), cur.to());
+      } else {
+        cur = cm.getSearchCursor(query, Pos(cm.firstLine(), 0));
+        if (cur.findNext())
+          cm.addSelection(cur.from(), cur.to());
+      }
+    }
+    if (fullWord)
+      cm.state.sublimeFindFullWord = cm.doc.sel;
+  };
+
+  var mirror = "(){}[]";
+  function selectBetweenBrackets(cm) {
+    var ranges = cm.listSelections(), newRanges = []
+    for (var i = 0; i < ranges.length; i++) {
+      var range = ranges[i], pos = range.head, opening = cm.scanForBracket(pos, -1);
+      if (!opening) return false;
+      for (;;) {
+        var closing = cm.scanForBracket(pos, 1);
+        if (!closing) return false;
+        if (closing.ch == mirror.charAt(mirror.indexOf(opening.ch) + 1)) {
+          newRanges.push({anchor: Pos(opening.pos.line, opening.pos.ch + 1),
+                          head: closing.pos});
+          break;
+        }
+        pos = Pos(closing.pos.line, closing.pos.ch + 1);
+      }
+    }
+    cm.setSelections(newRanges);
+    return true;
+  }
+
+  cmds[map["Shift-" + ctrl + "Space"] = "selectScope"] = function(cm) {
+    selectBetweenBrackets(cm) || cm.execCommand("selectAll");
+  };
+  cmds[map["Shift-" + ctrl + "M"] = "selectBetweenBrackets"] = function(cm) {
+    if (!selectBetweenBrackets(cm)) return CodeMirror.Pass;
+  };
+
+  cmds[map[ctrl + "M"] = "goToBracket"] = function(cm) {
+    cm.extendSelectionsBy(function(range) {
+      var next = cm.scanForBracket(range.head, 1);
+      if (next && CodeMirror.cmpPos(next.pos, range.head) != 0) return next.pos;
+      var prev = cm.scanForBracket(range.head, -1);
+      return prev && Pos(prev.pos.line, prev.pos.ch + 1) || range.head;
+    });
+  };
+
+  var swapLineCombo = mac ? "Cmd-Ctrl-" : "Shift-Ctrl-";
+
+  cmds[map[swapLineCombo + "Up"] = "swapLineUp"] = function(cm) {
+    if (cm.isReadOnly()) return CodeMirror.Pass
+    var ranges = cm.listSelections(), linesToMove = [], at = cm.firstLine() - 1, newSels = [];
+    for (var i = 0; i < ranges.length; i++) {
+      var range = ranges[i], from = range.from().line - 1, to = range.to().line;
+      newSels.push({anchor: Pos(range.anchor.line - 1, range.anchor.ch),
+                    head: Pos(range.head.line - 1, range.head.ch)});
+      if (range.to().ch == 0 && !range.empty()) --to;
+      if (from > at) linesToMove.push(from, to);
+      else if (linesToMove.length) linesToMove[linesToMove.length - 1] = to;
+      at = to;
+    }
+    cm.operation(function() {
+      for (var i = 0; i < linesToMove.length; i += 2) {
+        var from = linesToMove[i], to = linesToMove[i + 1];
+        var line = cm.getLine(from);
+        cm.replaceRange("", Pos(from, 0), Pos(from + 1, 0), "+swapLine");
+        if (to > cm.lastLine())
+          cm.replaceRange("\n" + line, Pos(cm.lastLine()), null, "+swapLine");
+        else
+          cm.replaceRange(line + "\n", Pos(to, 0), null, "+swapLine");
+      }
+      cm.setSelections(newSels);
+      cm.scrollIntoView();
+    });
+  };
+
+  cmds[map[swapLineCombo + "Down"] = "swapLineDown"] = function(cm) {
+    if (cm.isReadOnly()) return CodeMirror.Pass
+    var ranges = cm.listSelections(), linesToMove = [], at = cm.lastLine() + 1;
+    for (var i = ranges.length - 1; i >= 0; i--) {
+      var range = ranges[i], from = range.to().line + 1, to = range.from().line;
+      if (range.to().ch == 0 && !range.empty()) from--;
+      if (from < at) linesToMove.push(from, to);
+      else if (linesToMove.length) linesToMove[linesToMove.length - 1] = to;
+      at = to;
+    }
+    cm.operation(function() {
+      for (var i = linesToMove.length - 2; i >= 0; i -= 2) {
+        var from = linesToMove[i], to = linesToMove[i + 1];
+        var line = cm.getLine(from);
+        if (from == cm.lastLine())
+          cm.replaceRange("", Pos(from - 1), Pos(from), "+swapLine");
+        else
+          cm.replaceRange("", Pos(from, 0), Pos(from + 1, 0), "+swapLine");
+        cm.replaceRange(line + "\n", Pos(to, 0), null, "+swapLine");
+      }
+      cm.scrollIntoView();
+    });
+  };
+
+  cmds[map[ctrl + "/"] = "toggleCommentIndented"] = function(cm) {
+    cm.toggleComment({ indent: true });
+  }
+
+  cmds[map[ctrl + "J"] = "joinLines"] = function(cm) {
+    var ranges = cm.listSelections(), joined = [];
+    for (var i = 0; i < ranges.length; i++) {
+      var range = ranges[i], from = range.from();
+      var start = from.line, end = range.to().line;
+      while (i < ranges.length - 1 && ranges[i + 1].from().line == end)
+        end = ranges[++i].to().line;
+      joined.push({start: start, end: end, anchor: !range.empty() && from});
+    }
+    cm.operation(function() {
+      var offset = 0, ranges = [];
+      for (var i = 0; i < joined.length; i++) {
+        var obj = joined[i];
+        var anchor = obj.anchor && Pos(obj.anchor.line - offset, obj.anchor.ch), head;
+        for (var line = obj.start; line <= obj.end; line++) {
+          var actual = line - offset;
+          if (line == obj.end) head = Pos(actual, cm.getLine(actual).length + 1);
+          if (actual < cm.lastLine()) {
+            cm.replaceRange(" ", Pos(actual), Pos(actual + 1, /^\s*/.exec(cm.getLine(actual + 1))[0].length));
+            ++offset;
+          }
+        }
+        ranges.push({anchor: anchor || head, head: head});
+      }
+      cm.setSelections(ranges, 0);
+    });
+  };
+
+  cmds[map["Shift-" + ctrl + "D"] = "duplicateLine"] = function(cm) {
+    cm.operation(function() {
+      var rangeCount = cm.listSelections().length;
+      for (var i = 0; i < rangeCount; i++) {
+        var range = cm.listSelections()[i];
+        if (range.empty())
+          cm.replaceRange(cm.getLine(range.head.line) + "\n", Pos(range.head.line, 0));
+        else
+          cm.replaceRange(cm.getRange(range.from(), range.to()), range.from());
+      }
+      cm.scrollIntoView();
+    });
+  };
+
+  if (!mac) map[ctrl + "T"] = "transposeChars";
+
+  function sortLines(cm, caseSensitive) {
+    if (cm.isReadOnly()) return CodeMirror.Pass
+    var ranges = cm.listSelections(), toSort = [], selected;
+    for (var i = 0; i < ranges.length; i++) {
+      var range = ranges[i];
+      if (range.empty()) continue;
+      var from = range.from().line, to = range.to().line;
+      while (i < ranges.length - 1 && ranges[i + 1].from().line == to)
+        to = range[++i].to().line;
+      toSort.push(from, to);
+    }
+    if (toSort.length) selected = true;
+    else toSort.push(cm.firstLine(), cm.lastLine());
+
+    cm.operation(function() {
+      var ranges = [];
+      for (var i = 0; i < toSort.length; i += 2) {
+        var from = toSort[i], to = toSort[i + 1];
+        var start = Pos(from, 0), end = Pos(to);
+        var lines = cm.getRange(start, end, false);
+        if (caseSensitive)
+          lines.sort();
+        else
+          lines.sort(function(a, b) {
+            var au = a.toUpperCase(), bu = b.toUpperCase();
+            if (au != bu) { a = au; b = bu; }
+            return a < b ? -1 : a == b ? 0 : 1;
+          });
+        cm.replaceRange(lines, start, end);
+        if (selected) ranges.push({anchor: start, head: end});
+      }
+      if (selected) cm.setSelections(ranges, 0);
+    });
+  }
+
+  cmds[map["F9"] = "sortLines"] = function(cm) { sortLines(cm, true); };
+  cmds[map[ctrl + "F9"] = "sortLinesInsensitive"] = function(cm) { sortLines(cm, false); };
+
+  cmds[map["F2"] = "nextBookmark"] = function(cm) {
+    var marks = cm.state.sublimeBookmarks;
+    if (marks) while (marks.length) {
+      var current = marks.shift();
+      var found = current.find();
+      if (found) {
+        marks.push(current);
+        return cm.setSelection(found.from, found.to);
+      }
+    }
+  };
+
+  cmds[map["Shift-F2"] = "prevBookmark"] = function(cm) {
+    var marks = cm.state.sublimeBookmarks;
+    if (marks) while (marks.length) {
+      marks.unshift(marks.pop());
+      var found = marks[marks.length - 1].find();
+      if (!found)
+        marks.pop();
+      else
+        return cm.setSelection(found.from, found.to);
+    }
+  };
+
+  cmds[map[ctrl + "F2"] = "toggleBookmark"] = function(cm) {
+    var ranges = cm.listSelections();
+    var marks = cm.state.sublimeBookmarks || (cm.state.sublimeBookmarks = []);
+    for (var i = 0; i < ranges.length; i++) {
+      var from = ranges[i].from(), to = ranges[i].to();
+      var found = cm.findMarks(from, to);
+      for (var j = 0; j < found.length; j++) {
+        if (found[j].sublimeBookmark) {
+          found[j].clear();
+          for (var k = 0; k < marks.length; k++)
+            if (marks[k] == found[j])
+              marks.splice(k--, 1);
+          break;
+        }
+      }
+      if (j == found.length)
+        marks.push(cm.markText(from, to, {sublimeBookmark: true, clearWhenEmpty: false}));
+    }
+  };
+
+  cmds[map["Shift-" + ctrl + "F2"] = "clearBookmarks"] = function(cm) {
+    var marks = cm.state.sublimeBookmarks;
+    if (marks) for (var i = 0; i < marks.length; i++) marks[i].clear();
+    marks.length = 0;
+  };
+
+  cmds[map["Alt-F2"] = "selectBookmarks"] = function(cm) {
+    var marks = cm.state.sublimeBookmarks, ranges = [];
+    if (marks) for (var i = 0; i < marks.length; i++) {
+      var found = marks[i].find();
+      if (!found)
+        marks.splice(i--, 0);
+      else
+        ranges.push({anchor: found.from, head: found.to});
+    }
+    if (ranges.length)
+      cm.setSelections(ranges, 0);
+  };
+
+  map["Alt-Q"] = "wrapLines";
+
+  var cK = ctrl + "K ";
+
+  function modifyWordOrSelection(cm, mod) {
+    cm.operation(function() {
+      var ranges = cm.listSelections(), indices = [], replacements = [];
+      for (var i = 0; i < ranges.length; i++) {
+        var range = ranges[i];
+        if (range.empty()) { indices.push(i); replacements.push(""); }
+        else replacements.push(mod(cm.getRange(range.from(), range.to())));
+      }
+      cm.replaceSelections(replacements, "around", "case");
+      for (var i = indices.length - 1, at; i >= 0; i--) {
+        var range = ranges[indices[i]];
+        if (at && CodeMirror.cmpPos(range.head, at) > 0) continue;
+        var word = wordAt(cm, range.head);
+        at = word.from;
+        cm.replaceRange(mod(word.word), word.from, word.to);
+      }
+    });
+  }
+
+  map[cK + ctrl + "Backspace"] = "delLineLeft";
+
+  cmds[map["Backspace"] = "smartBackspace"] = function(cm) {
+    if (cm.somethingSelected()) return CodeMirror.Pass;
+
+    cm.operation(function() {
+      var cursors = cm.listSelections();
+      var indentUnit = cm.getOption("indentUnit");
+
+      for (var i = cursors.length - 1; i >= 0; i--) {
+        var cursor = cursors[i].head;
+        var toStartOfLine = cm.getRange({line: cursor.line, ch: 0}, cursor);
+        var column = CodeMirror.countColumn(toStartOfLine, null, cm.getOption("tabSize"));
+
+        // Delete by one character by default
+        var deletePos = cm.findPosH(cursor, -1, "char", false);
+
+        if (toStartOfLine && !/\S/.test(toStartOfLine) && column % indentUnit == 0) {
+          var prevIndent = new Pos(cursor.line,
+            CodeMirror.findColumn(toStartOfLine, column - indentUnit, indentUnit));
+
+          // Smart delete only if we found a valid prevIndent location
+          if (prevIndent.ch != cursor.ch) deletePos = prevIndent;
+        }
+
+        cm.replaceRange("", deletePos, cursor, "+delete");
+      }
+    });
+  };
+
+  cmds[map[cK + ctrl + "K"] = "delLineRight"] = function(cm) {
+    cm.operation(function() {
+      var ranges = cm.listSelections();
+      for (var i = ranges.length - 1; i >= 0; i--)
+        cm.replaceRange("", ranges[i].anchor, Pos(ranges[i].to().line), "+delete");
+      cm.scrollIntoView();
+    });
+  };
+
+  cmds[map[cK + ctrl + "U"] = "upcaseAtCursor"] = function(cm) {
+    modifyWordOrSelection(cm, function(str) { return str.toUpperCase(); });
+  };
+  cmds[map[cK + ctrl + "L"] = "downcaseAtCursor"] = function(cm) {
+    modifyWordOrSelection(cm, function(str) { return str.toLowerCase(); });
+  };
+
+  cmds[map[cK + ctrl + "Space"] = "setSublimeMark"] = function(cm) {
+    if (cm.state.sublimeMark) cm.state.sublimeMark.clear();
+    cm.state.sublimeMark = cm.setBookmark(cm.getCursor());
+  };
+  cmds[map[cK + ctrl + "A"] = "selectToSublimeMark"] = function(cm) {
+    var found = cm.state.sublimeMark && cm.state.sublimeMark.find();
+    if (found) cm.setSelection(cm.getCursor(), found);
+  };
+  cmds[map[cK + ctrl + "W"] = "deleteToSublimeMark"] = function(cm) {
+    var found = cm.state.sublimeMark && cm.state.sublimeMark.find();
+    if (found) {
+      var from = cm.getCursor(), to = found;
+      if (CodeMirror.cmpPos(from, to) > 0) { var tmp = to; to = from; from = tmp; }
+      cm.state.sublimeKilled = cm.getRange(from, to);
+      cm.replaceRange("", from, to);
+    }
+  };
+  cmds[map[cK + ctrl + "X"] = "swapWithSublimeMark"] = function(cm) {
+    var found = cm.state.sublimeMark && cm.state.sublimeMark.find();
+    if (found) {
+      cm.state.sublimeMark.clear();
+      cm.state.sublimeMark = cm.setBookmark(cm.getCursor());
+      cm.setCursor(found);
+    }
+  };
+  cmds[map[cK + ctrl + "Y"] = "sublimeYank"] = function(cm) {
+    if (cm.state.sublimeKilled != null)
+      cm.replaceSelection(cm.state.sublimeKilled, null, "paste");
+  };
+
+  map[cK + ctrl + "G"] = "clearBookmarks";
+  cmds[map[cK + ctrl + "C"] = "showInCenter"] = function(cm) {
+    var pos = cm.cursorCoords(null, "local");
+    cm.scrollTo(null, (pos.top + pos.bottom) / 2 - cm.getScrollInfo().clientHeight / 2);
+  };
+
+  var selectLinesCombo = mac ? "Ctrl-Shift-" : "Ctrl-Alt-";
+  cmds[map[selectLinesCombo + "Up"] = "selectLinesUpward"] = function(cm) {
+    cm.operation(function() {
+      var ranges = cm.listSelections();
+      for (var i = 0; i < ranges.length; i++) {
+        var range = ranges[i];
+        if (range.head.line > cm.firstLine())
+          cm.addSelection(Pos(range.head.line - 1, range.head.ch));
+      }
+    });
+  };
+  cmds[map[selectLinesCombo + "Down"] = "selectLinesDownward"] = function(cm) {
+    cm.operation(function() {
+      var ranges = cm.listSelections();
+      for (var i = 0; i < ranges.length; i++) {
+        var range = ranges[i];
+        if (range.head.line < cm.lastLine())
+          cm.addSelection(Pos(range.head.line + 1, range.head.ch));
+      }
+    });
+  };
+
+  function getTarget(cm) {
+    var from = cm.getCursor("from"), to = cm.getCursor("to");
+    if (CodeMirror.cmpPos(from, to) == 0) {
+      var word = wordAt(cm, from);
+      if (!word.word) return;
+      from = word.from;
+      to = word.to;
+    }
+    return {from: from, to: to, query: cm.getRange(from, to), word: word};
+  }
+
+  function findAndGoTo(cm, forward) {
+    var target = getTarget(cm);
+    if (!target) return;
+    var query = target.query;
+    var cur = cm.getSearchCursor(query, forward ? target.to : target.from);
+
+    if (forward ? cur.findNext() : cur.findPrevious()) {
+      cm.setSelection(cur.from(), cur.to());
+    } else {
+      cur = cm.getSearchCursor(query, forward ? Pos(cm.firstLine(), 0)
+                                              : cm.clipPos(Pos(cm.lastLine())));
+      if (forward ? cur.findNext() : cur.findPrevious())
+        cm.setSelection(cur.from(), cur.to());
+      else if (target.word)
+        cm.setSelection(target.from, target.to);
+    }
+  };
+  cmds[map[ctrl + "F3"] = "findUnder"] = function(cm) { findAndGoTo(cm, true); };
+  cmds[map["Shift-" + ctrl + "F3"] = "findUnderPrevious"] = function(cm) { findAndGoTo(cm,false); };
+  cmds[map["Alt-F3"] = "findAllUnder"] = function(cm) {
+    var target = getTarget(cm);
+    if (!target) return;
+    var cur = cm.getSearchCursor(target.query);
+    var matches = [];
+    var primaryIndex = -1;
+    while (cur.findNext()) {
+      matches.push({anchor: cur.from(), head: cur.to()});
+      if (cur.from().line <= target.from.line && cur.from().ch <= target.from.ch)
+        primaryIndex++;
+    }
+    cm.setSelections(matches, primaryIndex);
+  };
+
+  map["Shift-" + ctrl + "["] = "fold";
+  map["Shift-" + ctrl + "]"] = "unfold";
+  map[cK + ctrl + "0"] = map[cK + ctrl + "J"] = "unfoldAll";
+
+  map[ctrl + "I"] = "findIncremental";
+  map["Shift-" + ctrl + "I"] = "findIncrementalReverse";
+  map[ctrl + "H"] = "replace";
+  map["F3"] = "findNext";
+  map["Shift-F3"] = "findPrev";
+
+  CodeMirror.normalizeKeyMap(map);
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js
index 4f49e07fa..f987a3a3c 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js
@@ -1,51 +1,69 @@
-CodeMirror.defineMode("xml", function(config, parserConfig) {
-  var indentUnit = config.indentUnit;
-  var multilineTagIndentFactor = parserConfig.multilineTagIndentFactor || 1;
-  var multilineTagIndentPastTag = parserConfig.multilineTagIndentPastTag || true;
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
 
-  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},
-    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},
-    contextGrabbers: {
-      'dd': {'dd': true, 'dt': true},
-      'dt': {'dd': true, 'dt': true},
-      'li': {'li': true},
-      'option': {'option': true, 'optgroup': true},
-      'optgroup': {'optgroup': true},
-      'p': {'address': true, 'article': true, 'aside': true, 'blockquote': true, 'dir': true,
-            'div': true, 'dl': true, 'fieldset': true, 'footer': true, 'form': true,
-            'h1': true, 'h2': true, 'h3': true, 'h4': true, 'h5': true, 'h6': true,
-            'header': true, 'hgroup': true, 'hr': true, 'menu': true, 'nav': true, 'ol': true,
-            'p': true, 'pre': true, 'section': true, 'table': true, 'ul': true},
-      'rp': {'rp': true, 'rt': true},
-      'rt': {'rp': true, 'rt': true},
-      'tbody': {'tbody': true, 'tfoot': true},
-      'td': {'td': true, 'th': true},
-      'tfoot': {'tbody': true},
-      'th': {'td': true, 'th': true},
-      'thead': {'tbody': true, 'tfoot': true},
-      'tr': {'tr': true}
-    },
-    doNotIndent: {"pre": true},
-    allowUnquoted: true,
-    allowMissing: true
-  } : {
-    autoSelfClosers: {},
-    implicitlyClosed: {},
-    contextGrabbers: {},
-    doNotIndent: {},
-    allowUnquoted: false,
-    allowMissing: false
-  };
-  var alignCDATA = parserConfig.alignCDATA;
+(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 htmlConfig = {
+  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, '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},
+  contextGrabbers: {
+    'dd': {'dd': true, 'dt': true},
+    'dt': {'dd': true, 'dt': true},
+    'li': {'li': true},
+    'option': {'option': true, 'optgroup': true},
+    'optgroup': {'optgroup': true},
+    'p': {'address': true, 'article': true, 'aside': true, 'blockquote': true, 'dir': true,
+          'div': true, 'dl': true, 'fieldset': true, 'footer': true, 'form': true,
+          'h1': true, 'h2': true, 'h3': true, 'h4': true, 'h5': true, 'h6': true,
+          'header': true, 'hgroup': true, 'hr': true, 'menu': true, 'nav': true, 'ol': true,
+          'p': true, 'pre': true, 'section': true, 'table': true, 'ul': true},
+    'rp': {'rp': true, 'rt': true},
+    'rt': {'rp': true, 'rt': true},
+    'tbody': {'tbody': true, 'tfoot': true},
+    'td': {'td': true, 'th': true},
+    'tfoot': {'tbody': true},
+    'th': {'td': true, 'th': true},
+    'thead': {'tbody': true, 'tfoot': true},
+    'tr': {'tr': true}
+  },
+  doNotIndent: {"pre": true},
+  allowUnquoted: true,
+  allowMissing: true,
+  caseFold: true
+}
+
+var xmlConfig = {
+  autoSelfClosers: {},
+  implicitlyClosed: {},
+  contextGrabbers: {},
+  doNotIndent: {},
+  allowUnquoted: false,
+  allowMissing: false,
+  caseFold: false
+}
+
+CodeMirror.defineMode("xml", function(editorConf, config_) {
+  var indentUnit = editorConf.indentUnit
+  var config = {}
+  var defaults = config_.htmlMode ? htmlConfig : xmlConfig
+  for (var prop in defaults) config[prop] = defaults[prop]
+  for (var prop in config_) config[prop] = config_[prop]
 
   // Return variables for tokenizers
-  var tagName, type;
+  var type, setStyle;
 
   function inText(stream, state) {
     function chain(parser) {
@@ -72,14 +90,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 "tag error";
-        type = isClose ? "closeTag" : "openTag";
+        type = stream.eat("/") ? "closeTag" : "openTag";
         state.tokenize = inTag;
-        return "tag";
+        return "tag bracket";
       }
     } else if (ch == "&") {
       var ok;
@@ -98,26 +111,29 @@ 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 == "<") {
       state.tokenize = inText;
+      state.state = baseState;
+      state.tagName = state.tagStart = null;
       var next = state.tokenize(stream, state);
-      return next ? next + " error" : "error";
+      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";
     }
   }
@@ -169,139 +185,143 @@ 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 cont() {
-    pass.apply(null, arguments);
-    return true;
+  function Context(state, tagName, startOfLine) {
+    this.prev = state.context;
+    this.tagName = tagName;
+    this.indent = state.indented;
+    this.startOfLine = startOfLine;
+    if (config.doNotIndent.hasOwnProperty(tagName) || (state.context && state.context.noIndent))
+      this.noIndent = true;
   }
-
-  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(state) {
+    if (state.context) state.context = state.context.prev;
   }
-  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 (!config.contextGrabbers.hasOwnProperty(parentTagName) ||
+          !config.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 &&
+          config.implicitlyClosed.hasOwnProperty(state.context.tagName))
+        popContext(state);
+      if ((state.context && state.context.tagName == tagName) || config.matchClosing === false) {
+        setStyle = "tag";
+        return closeState;
+      } else {
+        setStyle = "tag error";
+        return closeStateErr;
       }
-      popContext();
+    } else {
+      setStyle = "error";
+      return closeStateErr;
+    }
+  }
+
+  function closeState(type, _stream, state) {
+    if (type != "endTag") {
+      setStyle = "error";
+      return closeState;
     }
+    popContext(state);
+    return baseState;
+  }
+  function closeStateErr(type, stream, state) {
+    setStyle = "error";
+    return closeState(type, stream, state);
   }
 
-  function attributes(type) {
-    if (type == "word") {setStyle = "attribute"; return cont(attribute, attributes);}
-    if (type == "endTag" || type == "selfcloseTag") return pass();
+  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" ||
+          config.autoSelfClosers.hasOwnProperty(tagName)) {
+        maybePopContext(state, tagName);
+      } else {
+        maybePopContext(state, tagName);
+        state.context = new Context(state, tagName, tagStart == state.indented);
+      }
+      return baseState;
+    }
     setStyle = "error";
-    return cont(attributes);
+    return attrState;
   }
-  function attribute(type) {
-    if (type == "equals") return cont(attvalue, attributes);
-    if (!Kludges.allowMissing) setStyle = "error";
-    else if (type == "word") {setStyle = "attribute"; return cont(attribute, attributes);}
-    return (type == "endTag" || type == "selfcloseTag") ? pass() : cont();
+  function attrEqState(type, stream, state) {
+    if (type == "equals") return attrValueState;
+    if (!config.allowMissing) setStyle = "error";
+    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" && config.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};
+    startState: function(baseIndent) {
+      var state = {tokenize: inText,
+                   state: baseState,
+                   indented: baseIndent || 0,
+                   tagName: null, tagStart: null,
+                   context: null}
+      if (baseIndent != null) state.baseIndent = baseIndent
+      return state
     },
 
     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;
-      if (setStyle)
-        style = setStyle == "error" ? style + " error" : setStyle;
       return style;
     },
 
@@ -309,33 +329,60 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
       var context = state.context;
       // Indent multi-line strings (e.g. css).
       if (state.tokenize.isInAttribute) {
-        return state.stringStartCol + 1;
+        if (state.tagStart == state.indented)
+          return state.stringStartCol + 1;
+        else
+          return state.indented + indentUnit;
       }
-      if ((state.tokenize != inTag && state.tokenize != inText) ||
-          context && context.noIndent)
+      if (context && context.noIndent) return CodeMirror.Pass;
+      if (state.tokenize != inTag && state.tokenize != inText)
         return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
       // Indent the starts of attribute names.
       if (state.tagName) {
-        if (multilineTagIndentPastTag)
+        if (config.multilineTagIndentPastTag !== false)
           return state.tagStart + state.tagName.length + 2;
         else
-          return state.tagStart + indentUnit * multilineTagIndentFactor;
+          return state.tagStart + indentUnit * (config.multilineTagIndentFactor || 1);
       }
-      if (alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
-      if (context && /^<\//.test(textAfter))
-        context = context.prev;
-      while (context && !context.startOfLine)
+      if (config.alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
+      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 (config.implicitlyClosed.hasOwnProperty(context.tagName)) {
+            context = context.prev;
+          } else {
+            break;
+          }
+        }
+      } else if (tagAfter) { // Opening tag spotted
+        while (context) {
+          var grabbers = config.contextGrabbers[context.tagName];
+          if (grabbers && grabbers.hasOwnProperty(tagAfter[2]))
+            context = context.prev;
+          else
+            break;
+        }
+      }
+      while (context && context.prev && !context.startOfLine)
         context = context.prev;
       if (context) return context.indent + indentUnit;
-      else return 0;
+      else return state.baseIndent || 0;
     },
 
-    electricChars: "/",
+    electricInput: /<\/[\s\w:]+>$/,
     blockCommentStart: "<!--",
     blockCommentEnd: "-->",
 
-    configuration: parserConfig.htmlMode ? "html" : "xml",
-    helperType: parserConfig.htmlMode ? "html" : "xml"
+    configuration: config.htmlMode ? "html" : "xml",
+    helperType: config.htmlMode ? "html" : "xml",
+
+    skipAttribute: function(state) {
+      if (state.state == attrValueState)
+        state.state = attrState
+    }
   };
 });
 
@@ -343,3 +390,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..7a55160f5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/Esprima/LICENSE
@@ -0,0 +1,21 @@
+Copyright JS Foundation and other contributors, https://js.foundation/
+
+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..67e39265e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/Esprima/esprima.js
@@ -0,0 +1,6768 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+/* istanbul ignore next */
+    if(typeof exports === 'object' && typeof module === 'object')
+        module.exports = factory();
+    else if(typeof define === 'function' && define.amd)
+        define([], factory);
+/* istanbul ignore next */
+    else if(typeof exports === 'object')
+        exports["esprima"] = factory();
+    else
+        root["esprima"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/     // The module cache
+/******/     var installedModules = {};
+
+/******/     // The require function
+/******/     function __webpack_require__(moduleId) {
+
+/******/         // Check if module is in cache
+/* istanbul ignore if */
+/******/         if(installedModules[moduleId])
+/******/             return installedModules[moduleId].exports;
+
+/******/         // Create a new module (and put it into the cache)
+/******/         var module = installedModules[moduleId] = {
+/******/             exports: {},
+/******/             id: moduleId,
+/******/             loaded: false
+/******/         };
+
+/******/         // Execute the module function
+/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/         // Flag the module as loaded
+/******/         module.loaded = true;
+
+/******/         // Return the exports of the module
+/******/         return module.exports;
+/******/     }
+
+
+/******/     // expose the modules object (__webpack_modules__)
+/******/     __webpack_require__.m = modules;
+
+/******/     // expose the module cache
+/******/     __webpack_require__.c = installedModules;
+
+/******/     // __webpack_public_path__
+/******/     __webpack_require__.p = "";
+
+/******/     // Load entry module and return exports
+/******/     return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+    /*
+      Copyright JS Foundation and other contributors, https://js.foundation/
+
+      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.
+    */
+    "use strict";
+    var comment_handler_1 = __webpack_require__(1);
+    var jsx_parser_1 = __webpack_require__(3);
+    var parser_1 = __webpack_require__(8);
+    var tokenizer_1 = __webpack_require__(15);
+    function parse(code, options, delegate) {
+        var commentHandler = null;
+        var proxyDelegate = function (node, metadata) {
+            if (delegate) {
+                delegate(node, metadata);
+            }
+            if (commentHandler) {
+                commentHandler.visit(node, metadata);
+            }
+        };
+        var parserDelegate = (typeof delegate === 'function') ? proxyDelegate : null;
+        var collectComment = false;
+        if (options) {
+            collectComment = (typeof options.comment === 'boolean' && options.comment);
+            var attachComment = (typeof options.attachComment === 'boolean' && options.attachComment);
+            if (collectComment || attachComment) {
+                commentHandler = new comment_handler_1.CommentHandler();
+                commentHandler.attach = attachComment;
+                options.comment = true;
+                parserDelegate = proxyDelegate;
+            }
+        }
+        var isModule = false;
+        if (options && typeof options.sourceType === 'string') {
+            isModule = (options.sourceType === 'module');
+        }
+        var parser;
+        if (options && typeof options.jsx === 'boolean' && options.jsx) {
+            parser = new jsx_parser_1.JSXParser(code, options, parserDelegate);
+        }
+        else {
+            parser = new parser_1.Parser(code, options, parserDelegate);
+        }
+        var program = isModule ? parser.parseModule() : parser.parseScript();
+        var ast = program;
+        if (collectComment && commentHandler) {
+            ast.comments = commentHandler.comments;
+        }
+        if (parser.config.tokens) {
+            ast.tokens = parser.tokens;
+        }
+        if (parser.config.tolerant) {
+            ast.errors = parser.errorHandler.errors;
+        }
+        return ast;
+    }
+    exports.parse = parse;
+    function parseModule(code, options, delegate) {
+        var parsingOptions = options || {};
+        parsingOptions.sourceType = 'module';
+        return parse(code, parsingOptions, delegate);
+    }
+    exports.parseModule = parseModule;
+    function parseScript(code, options, delegate) {
+        var parsingOptions = options || {};
+        parsingOptions.sourceType = 'script';
+        return parse(code, parsingOptions, delegate);
+    }
+    exports.parseScript = parseScript;
+    function tokenize(code, options, delegate) {
+        var tokenizer = new tokenizer_1.Tokenizer(code, options);
+        var tokens;
+        tokens = [];
+        try {
+            while (true) {
+                var token = tokenizer.getNextToken();
+                if (!token) {
+                    break;
+                }
+                if (delegate) {
+                    token = delegate(token);
+                }
+                tokens.push(token);
+            }
+        }
+        catch (e) {
+            tokenizer.errorHandler.tolerate(e);
+        }
+        if (tokenizer.errorHandler.tolerant) {
+            tokens.errors = tokenizer.errors();
+        }
+        return tokens;
+    }
+    exports.tokenize = tokenize;
+    var syntax_1 = __webpack_require__(2);
+    exports.Syntax = syntax_1.Syntax;
+    // Sync with *.json manifests.
+    exports.version = '4.0.0-dev';
+
+
+/***/ },
+/* 1 */
+/***/ function(module, exports, __webpack_require__) {
+
+    "use strict";
+    var syntax_1 = __webpack_require__(2);
+    var CommentHandler = (function () {
+        function CommentHandler() {
+            this.attach = false;
+            this.comments = [];
+            this.stack = [];
+            this.leading = [];
+            this.trailing = [];
+        }
+        CommentHandler.prototype.insertInnerComments = function (node, metadata) {
+            //  innnerComments for properties empty block
+            //  `function a() {/** comments **\/}`
+            if (node.type === syntax_1.Syntax.BlockStatement && node.body.length === 0) {
+                var innerComments = [];
+                for (var i = this.leading.length - 1; i >= 0; --i) {
+                    var entry = this.leading[i];
+                    if (metadata.end.offset >= entry.start) {
+                        innerComments.unshift(entry.comment);
+                        this.leading.splice(i, 1);
+                        this.trailing.splice(i, 1);
+                    }
+                }
+                if (innerComments.length) {
+                    node.innerComments = innerComments;
+                }
+            }
+        };
+        CommentHandler.prototype.findTrailingComments = function (metadata) {
+            var trailingComments = [];
+            if (this.trailing.length > 0) {
+                for (var i = this.trailing.length - 1; i >= 0; --i) {
+                    var entry_1 = this.trailing[i];
+                    if (entry_1.start >= metadata.end.offset) {
+                        trailingComments.unshift(entry_1.comment);
+                    }
+                }
+                this.trailing.length = 0;
+                return trailingComments;
+            }
+            var entry = this.stack[this.stack.length - 1];
+            if (entry && entry.node.trailingComments) {
+                var firstComment = entry.node.trailingComments[0];
+                if (firstComment && firstComment.range[0] >= metadata.end.offset) {
+                    trailingComments = entry.node.trailingComments;
+                    delete entry.node.trailingComments;
+                }
+            }
+            return trailingComments;
+        };
+        CommentHandler.prototype.findLeadingComments = function (metadata) {
+            var leadingComments = [];
+            var target;
+            while (this.stack.length > 0) {
+                var entry = this.stack[this.stack.length - 1];
+                if (entry && entry.start >= metadata.start.offset) {
+                    target = entry.node;
+                    this.stack.pop();
+                }
+                else {
+                    break;
+                }
+            }
+            if (target) {
+                var count = target.leadingComments ? target.leadingComments.length : 0;
+                for (var i = count - 1; i >= 0; --i) {
+                    var comment = target.leadingComments[i];
+                    if (comment.range[1] <= metadata.start.offset) {
+                        leadingComments.unshift(comment);
+                        target.leadingComments.splice(i, 1);
+                    }
+                }
+                if (target.leadingComments && target.leadingComments.length === 0) {
+                    delete target.leadingComments;
+                }
+                return leadingComments;
+            }
+            for (var i = this.leading.length - 1; i >= 0; --i) {
+                var entry = this.leading[i];
+                if (entry.start <= metadata.start.offset) {
+                    leadingComments.unshift(entry.comment);
+                    this.leading.splice(i, 1);
+                }
+            }
+            return leadingComments;
+        };
+        CommentHandler.prototype.visitNode = function (node, metadata) {
+            if (node.type === syntax_1.Syntax.Program && node.body.length > 0) {
+                return;
+            }
+            this.insertInnerComments(node, metadata);
+            var trailingComments = this.findTrailingComments(metadata);
+            var leadingComments = this.findLeadingComments(metadata);
+            if (leadingComments.length > 0) {
+                node.leadingComments = leadingComments;
+            }
+            if (trailingComments.length > 0) {
+                node.trailingComments = trailingComments;
+            }
+            this.stack.push({
+                node: node,
+                start: metadata.start.offset
+            });
+        };
+        CommentHandler.prototype.visitComment = function (node, metadata) {
+            var type = (node.type[0] === 'L') ? 'Line' : 'Block';
+            var comment = {
+                type: type,
+                value: node.value
+            };
+            if (node.range) {
+                comment.range = node.range;
+            }
+            if (node.loc) {
+                comment.loc = node.loc;
+            }
+            this.comments.push(comment);
+            if (this.attach) {
+                var entry = {
+                    comment: {
+                        type: type,
+                        value: node.value,
+                        range: [metadata.start.offset, metadata.end.offset]
+                    },
+                    start: metadata.start.offset
+                };
+                if (node.loc) {
+                    entry.comment.loc = node.loc;
+                }
+                node.type = type;
+                this.leading.push(entry);
+                this.trailing.push(entry);
+            }
+        };
+        CommentHandler.prototype.visit = function (node, metadata) {
+            if (node.type === 'LineComment') {
+                this.visitComment(node, metadata);
+            }
+            else if (node.type === 'BlockComment') {
+                this.visitComment(node, metadata);
+            }
+            else if (this.attach) {
+                this.visitNode(node, metadata);
+            }
+        };
+        return CommentHandler;
+    }());
+    exports.CommentHandler = CommentHandler;
+
+
+/***/ },
+/* 2 */
+/***/ function(module, exports) {
+
+    "use strict";
+    exports.Syntax = {
+        AssignmentExpression: 'AssignmentExpression',
+        AssignmentPattern: 'AssignmentPattern',
+        ArrayExpression: 'ArrayExpression',
+        ArrayPattern: 'ArrayPattern',
+        ArrowFunctionExpression: 'ArrowFunctionExpression',
+        AwaitExpression: 'AwaitExpression',
+        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',
+        Import: 'Import',
+        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',
+        RestProperty: 'RestProperty',
+        ReturnStatement: 'ReturnStatement',
+        SequenceExpression: 'SequenceExpression',
+        SpreadElement: 'SpreadElement',
+        SpreadProperty: 'SpreadProperty',
+        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'
+    };
+
+
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+    "use strict";
+/* istanbul ignore next */
+    var __extends = (this && this.__extends) || function (d, b) {
+        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+    var character_1 = __webpack_require__(4);
+    var JSXNode = __webpack_require__(5);
+    var jsx_syntax_1 = __webpack_require__(6);
+    var Node = __webpack_require__(7);
+    var parser_1 = __webpack_require__(8);
+    var token_1 = __webpack_require__(13);
+    var xhtml_entities_1 = __webpack_require__(14);
+    token_1.TokenName[100 /* Identifier */] = 'JSXIdentifier';
+    token_1.TokenName[101 /* Text */] = 'JSXText';
+    // Fully qualified element name, e.g. <svg:path> returns "svg:path"
+    function getQualifiedElementName(elementName) {
+        var qualifiedName;
+        switch (elementName.type) {
+            case jsx_syntax_1.JSXSyntax.JSXIdentifier:
+                var id = elementName;
+                qualifiedName = id.name;
+                break;
+            case jsx_syntax_1.JSXSyntax.JSXNamespacedName:
+                var ns = elementName;
+                qualifiedName = getQualifiedElementName(ns.namespace) + ':' +
+                    getQualifiedElementName(ns.name);
+                break;
+            case jsx_syntax_1.JSXSyntax.JSXMemberExpression:
+                var expr = elementName;
+                qualifiedName = getQualifiedElementName(expr.object) + '.' +
+                    getQualifiedElementName(expr.property);
+                break;
+            /* istanbul ignore next */
+            default:
+                break;
+        }
+        return qualifiedName;
+    }
+    var JSXParser = (function (_super) {
+        __extends(JSXParser, _super);
+        function JSXParser(code, options, delegate) {
+            return _super.call(this, code, options, delegate) || this;
+        }
+        JSXParser.prototype.parsePrimaryExpression = function () {
+            return this.match('<') ? this.parseJSXRoot() : _super.prototype.parsePrimaryExpression.call(this);
+        };
+        JSXParser.prototype.startJSX = function () {
+            // Unwind the scanner before the lookahead token.
+            this.scanner.index = this.startMarker.index;
+            this.scanner.lineNumber = this.startMarker.line;
+            this.scanner.lineStart = this.startMarker.index - this.startMarker.column;
+        };
+        JSXParser.prototype.finishJSX = function () {
+            // Prime the next lookahead.
+            this.nextToken();
+        };
+        JSXParser.prototype.reenterJSX = function () {
+            this.startJSX();
+            this.expectJSX('}');
+            // Pop the closing '}' added from the lookahead.
+            if (this.config.tokens) {
+                this.tokens.pop();
+            }
+        };
+        JSXParser.prototype.createJSXNode = function () {
+            this.collectComments();
+            return {
+                index: this.scanner.index,
+                line: this.scanner.lineNumber,
+                column: this.scanner.index - this.scanner.lineStart
+            };
+        };
+        JSXParser.prototype.createJSXChildNode = function () {
+            return {
+                index: this.scanner.index,
+                line: this.scanner.lineNumber,
+                column: this.scanner.index - this.scanner.lineStart
+            };
+        };
+        JSXParser.prototype.scanXHTMLEntity = function (quote) {
+            var result = '&';
+            var valid = true;
+            var terminated = false;
+            var numeric = false;
+            var hex = false;
+            while (!this.scanner.eof() && valid && !terminated) {
+                var ch = this.scanner.source[this.scanner.index];
+                if (ch === quote) {
+                    break;
+                }
+                terminated = (ch === ';');
+                result += ch;
+                ++this.scanner.index;
+                if (!terminated) {
+                    switch (result.length) {
+                        case 2:
+                            // e.g. '&#123;'
+                            numeric = (ch === '#');
+                            break;
+                        case 3:
+                            if (numeric) {
+                                // e.g. '&#x41;'
+                                hex = (ch === 'x');
+                                valid = hex || character_1.Character.isDecimalDigit(ch.charCodeAt(0));
+                                numeric = numeric && !hex;
+                            }
+                            break;
+                        default:
+                            valid = valid && !(numeric && !character_1.Character.isDecimalDigit(ch.charCodeAt(0)));
+                            valid = valid && !(hex && !character_1.Character.isHexDigit(ch.charCodeAt(0)));
+                            break;
+                    }
+                }
+            }
+            if (valid && terminated && result.length > 2) {
+                // e.g. '&#x41;' becomes just '#x41'
+                var str = result.substr(1, result.length - 2);
+                if (numeric && str.length > 1) {
+                    result = String.fromCharCode(parseInt(str.substr(1), 10));
+                }
+                else if (hex && str.length > 2) {
+                    result = String.fromCharCode(parseInt('0' + str.substr(1), 16));
+                }
+                else if (!numeric && !hex && xhtml_entities_1.XHTMLEntities[str]) {
+                    result = xhtml_entities_1.XHTMLEntities[str];
+                }
+            }
+            return result;
+        };
+        // Scan the next JSX token. This replaces Scanner#lex when in JSX mode.
+        JSXParser.prototype.lexJSX = function () {
+            var cp = this.scanner.source.charCodeAt(this.scanner.index);
+            // < > / : = { }
+            if (cp === 60 || cp === 62 || cp === 47 || cp === 58 || cp === 61 || cp === 123 || cp === 125) {
+                var value = this.scanner.source[this.scanner.index++];
+                return {
+                    type: 7 /* Punctuator */,
+                    value: value,
+                    lineNumber: this.scanner.lineNumber,
+                    lineStart: this.scanner.lineStart,
+                    start: this.scanner.index - 1,
+                    end: this.scanner.index
+                };
+            }
+            // " '
+            if (cp === 34 || cp === 39) {
+                var start = this.scanner.index;
+                var quote = this.scanner.source[this.scanner.index++];
+                var str = '';
+                while (!this.scanner.eof()) {
+                    var ch = this.scanner.source[this.scanner.index++];
+                    if (ch === quote) {
+                        break;
+                    }
+                    else if (ch === '&') {
+                        str += this.scanXHTMLEntity(quote);
+                    }
+                    else {
+                        str += ch;
+                    }
+                }
+                return {
+                    type: 8 /* StringLiteral */,
+                    value: str,
+                    lineNumber: this.scanner.lineNumber,
+                    lineStart: this.scanner.lineStart,
+                    start: start,
+                    end: this.scanner.index
+                };
+            }
+            // ... or .
+            if (cp === 46) {
+                var n1 = this.scanner.source.charCodeAt(this.scanner.index + 1);
+                var n2 = this.scanner.source.charCodeAt(this.scanner.index + 2);
+                var value = (n1 === 46 && n2 === 46) ? '...' : '.';
+                var start = this.scanner.index;
+                this.scanner.index += value.length;
+                return {
+                    type: 7 /* Punctuator */,
+                    value: value,
+                    lineNumber: this.scanner.lineNumber,
+                    lineStart: this.scanner.lineStart,
+                    start: start,
+                    end: this.scanner.index
+                };
+            }
+            // `
+            if (cp === 96) {
+                // Only placeholder, since it will be rescanned as a real assignment expression.
+                return {
+                    type: 10 /* Template */,
+                    value: '',
+                    lineNumber: this.scanner.lineNumber,
+                    lineStart: this.scanner.lineStart,
+                    start: this.scanner.index,
+                    end: this.scanner.index
+                };
+            }
+            // Identifer can not contain backslash (char code 92).
+            if (character_1.Character.isIdentifierStart(cp) && (cp !== 92)) {
+                var start = this.scanner.index;
+                ++this.scanner.index;
+                while (!this.scanner.eof()) {
+                    var ch = this.scanner.source.charCodeAt(this.scanner.index);
+                    if (character_1.Character.isIdentifierPart(ch) && (ch !== 92)) {
+                        ++this.scanner.index;
+                    }
+                    else if (ch === 45) {
+                        // Hyphen (char code 45) can be part of an identifier.
+                        ++this.scanner.index;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                var id = this.scanner.source.slice(start, this.scanner.index);
+                return {
+                    type: 100 /* Identifier */,
+                    value: id,
+                    lineNumber: this.scanner.lineNumber,
+                    lineStart: this.scanner.lineStart,
+                    start: start,
+                    end: this.scanner.index
+                };
+            }
+            return this.scanner.throwUnexpectedToken();
+        };
+        JSXParser.prototype.nextJSXToken = function () {
+            this.collectComments();
+            this.startMarker.index = this.scanner.index;
+            this.startMarker.line = this.scanner.lineNumber;
+            this.startMarker.column = this.scanner.index - this.scanner.lineStart;
+            var token = this.lexJSX();
+            this.lastMarker.index = this.scanner.index;
+            this.lastMarker.line = this.scanner.lineNumber;
+            this.lastMarker.column = this.scanner.index - this.scanner.lineStart;
+            if (this.config.tokens) {
+                this.tokens.push(this.convertToken(token));
+            }
+            return token;
+        };
+        JSXParser.prototype.nextJSXText = function () {
+            this.startMarker.index = this.scanner.index;
+            this.startMarker.line = this.scanner.lineNumber;
+            this.startMarker.column = this.scanner.index - this.scanner.lineStart;
+            var start = this.scanner.index;
+            var text = '';
+            while (!this.scanner.eof()) {
+                var ch = this.scanner.source[this.scanner.index];
+                if (ch === '{' || ch === '<') {
+                    break;
+                }
+                ++this.scanner.index;
+                text += ch;
+                if (character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
+                    ++this.scanner.lineNumber;
+                    if (ch === '\r' && this.scanner.source[this.scanner.index] === '\n') {
+                        ++this.scanner.index;
+                    }
+                    this.scanner.lineStart = this.scanner.index;
+                }
+            }
+            this.lastMarker.index = this.scanner.index;
+            this.lastMarker.line = this.scanner.lineNumber;
+            this.lastMarker.column = this.scanner.index - this.scanner.lineStart;
+            var token = {
+                type: 101 /* Text */,
+                value: text,
+                lineNumber: this.scanner.lineNumber,
+                lineStart: this.scanner.lineStart,
+                start: start,
+                end: this.scanner.index
+            };
+            if ((text.length > 0) && this.config.tokens) {
+                this.tokens.push(this.convertToken(token));
+            }
+            return token;
+        };
+        JSXParser.prototype.peekJSXToken = function () {
+            var state = this.scanner.saveState();
+            this.scanner.scanComments();
+            var next = this.lexJSX();
+            this.scanner.restoreState(state);
+            return next;
+        };
+        // Expect the next JSX token to match the specified punctuator.
+        // If not, an exception will be thrown.
+        JSXParser.prototype.expectJSX = function (value) {
+            var token = this.nextJSXToken();
+            if (token.type !== 7 /* Punctuator */ || token.value !== value) {
+                this.throwUnexpectedToken(token);
+            }
+        };
+        // Return true if the next JSX token matches the specified punctuator.
+        JSXParser.prototype.matchJSX = function (value) {
+            var next = this.peekJSXToken();
+            return next.type === 7 /* Punctuator */ && next.value === value;
+        };
+        JSXParser.prototype.parseJSXIdentifier = function () {
+            var node = this.createJSXNode();
+            var token = this.nextJSXToken();
+            if (token.type !== 100 /* Identifier */) {
+                this.throwUnexpectedToken(token);
+            }
+            return this.finalize(node, new JSXNode.JSXIdentifier(token.value));
+        };
+        JSXParser.prototype.parseJSXElementName = function () {
+            var node = this.createJSXNode();
+            var elementName = this.parseJSXIdentifier();
+            if (this.matchJSX(':')) {
+                var namespace = elementName;
+                this.expectJSX(':');
+                var name_1 = this.parseJSXIdentifier();
+                elementName = this.finalize(node, new JSXNode.JSXNamespacedName(namespace, name_1));
+            }
+            else if (this.matchJSX('.')) {
+                while (this.matchJSX('.')) {
+                    var object = elementName;
+                    this.expectJSX('.');
+                    var property = this.parseJSXIdentifier();
+                    elementName = this.finalize(node, new JSXNode.JSXMemberExpression(object, property));
+                }
+            }
+            return elementName;
+        };
+        JSXParser.prototype.parseJSXAttributeName = function () {
+            var node = this.createJSXNode();
+            var attributeName;
+            var identifier = this.parseJSXIdentifier();
+            if (this.matchJSX(':')) {
+                var namespace = identifier;
+                this.expectJSX(':');
+                var name_2 = this.parseJSXIdentifier();
+                attributeName = this.finalize(node, new JSXNode.JSXNamespacedName(namespace, name_2));
+            }
+            else {
+                attributeName = identifier;
+            }
+            return attributeName;
+        };
+        JSXParser.prototype.parseJSXStringLiteralAttribute = function () {
+            var node = this.createJSXNode();
+            var token = this.nextJSXToken();
+            if (token.type !== 8 /* StringLiteral */) {
+                this.throwUnexpectedToken(token);
+            }
+            var raw = this.getTokenRaw(token);
+            return this.finalize(node, new Node.Literal(token.value, raw));
+        };
+        JSXParser.prototype.parseJSXExpressionAttribute = function () {
+            var node = this.createJSXNode();
+            this.expectJSX('{');
+            this.finishJSX();
+            if (this.match('}')) {
+                this.tolerateError('JSX attributes must only be assigned a non-empty expression');
+            }
+            var expression = this.parseAssignmentExpression();
+            this.reenterJSX();
+            return this.finalize(node, new JSXNode.JSXExpressionContainer(expression));
+        };
+        JSXParser.prototype.parseJSXAttributeValue = function () {
+            return this.matchJSX('{') ? this.parseJSXExpressionAttribute() :
+                this.matchJSX('<') ? this.parseJSXElement() : this.parseJSXStringLiteralAttribute();
+        };
+        JSXParser.prototype.parseJSXNameValueAttribute = function () {
+            var node = this.createJSXNode();
+            var name = this.parseJSXAttributeName();
+            var value = null;
+            if (this.matchJSX('=')) {
+                this.expectJSX('=');
+                value = this.parseJSXAttributeValue();
+            }
+            return this.finalize(node, new JSXNode.JSXAttribute(name, value));
+        };
+        JSXParser.prototype.parseJSXSpreadAttribute = function () {
+            var node = this.createJSXNode();
+            this.expectJSX('{');
+            this.expectJSX('...');
+            this.finishJSX();
+            var argument = this.parseAssignmentExpression();
+            this.reenterJSX();
+            return this.finalize(node, new JSXNode.JSXSpreadAttribute(argument));
+        };
+        JSXParser.prototype.parseJSXAttributes = function () {
+            var attributes = [];
+            while (!this.matchJSX('/') && !this.matchJSX('>')) {
+                var attribute = this.matchJSX('{') ? this.parseJSXSpreadAttribute() :
+                    this.parseJSXNameValueAttribute();
+                attributes.push(attribute);
+            }
+            return attributes;
+        };
+        JSXParser.prototype.parseJSXOpeningElement = function () {
+            var node = this.createJSXNode();
+            this.expectJSX('<');
+            var name = this.parseJSXElementName();
+            var attributes = this.parseJSXAttributes();
+            var selfClosing = this.matchJSX('/');
+            if (selfClosing) {
+                this.expectJSX('/');
+            }
+            this.expectJSX('>');
+            return this.finalize(node, new JSXNode.JSXOpeningElement(name, selfClosing, attributes));
+        };
+        JSXParser.prototype.parseJSXBoundaryElement = function () {
+            var node = this.createJSXNode();
+            this.expectJSX('<');
+            if (this.matchJSX('/')) {
+                this.expectJSX('/');
+                var name_3 = this.parseJSXElementName();
+                this.expectJSX('>');
+                return this.finalize(node, new JSXNode.JSXClosingElement(name_3));
+            }
+            var name = this.parseJSXElementName();
+            var attributes = this.parseJSXAttributes();
+            var selfClosing = this.matchJSX('/');
+            if (selfClosing) {
+                this.expectJSX('/');
+            }
+            this.expectJSX('>');
+            return this.finalize(node, new JSXNode.JSXOpeningElement(name, selfClosing, attributes));
+        };
+        JSXParser.prototype.parseJSXEmptyExpression = function () {
+            var node = this.createJSXChildNode();
+            this.collectComments();
+            this.lastMarker.index = this.scanner.index;
+            this.lastMarker.line = this.scanner.lineNumber;
+            this.lastMarker.column = this.scanner.index - this.scanner.lineStart;
+            return this.finalize(node, new JSXNode.JSXEmptyExpression());
+        };
+        JSXParser.prototype.parseJSXExpressionContainer = function () {
+            var node = this.createJSXNode();
+            this.expectJSX('{');
+            var expression;
+            if (this.matchJSX('}')) {
+                expression = this.parseJSXEmptyExpression();
+                this.expectJSX('}');
+            }
+            else {
+                this.finishJSX();
+                expression = this.parseAssignmentExpression();
+                this.reenterJSX();
+            }
+            return this.finalize(node, new JSXNode.JSXExpressionContainer(expression));
+        };
+        JSXParser.prototype.parseJSXChildren = function () {
+            var children = [];
+            while (!this.scanner.eof()) {
+                var node = this.createJSXChildNode();
+                var token = this.nextJSXText();
+                if (token.start < token.end) {
+                    var raw = this.getTokenRaw(token);
+                    var child = this.finalize(node, new JSXNode.JSXText(token.value, raw));
+                    children.push(child);
+                }
+                if (this.scanner.source[this.scanner.index] === '{') {
+                    var container = this.parseJSXExpressionContainer();
+                    children.push(container);
+                }
+                else {
+                    break;
+                }
+            }
+            return children;
+        };
+        JSXParser.prototype.parseComplexJSXElement = function (el) {
+            var stack = [];
+            while (!this.scanner.eof()) {
+                el.children = el.children.concat(this.parseJSXChildren());
+                var node = this.createJSXChildNode();
+                var element = this.parseJSXBoundaryElement();
+                if (element.type === jsx_syntax_1.JSXSyntax.JSXOpeningElement) {
+                    var opening = element;
+                    if (opening.selfClosing) {
+                        var child = this.finalize(node, new JSXNode.JSXElement(opening, [], null));
+                        el.children.push(child);
+                    }
+                    else {
+                        stack.push(el);
+                        el = { node: node, opening: opening, closing: null, children: [] };
+                    }
+                }
+                if (element.type === jsx_syntax_1.JSXSyntax.JSXClosingElement) {
+                    el.closing = element;
+                    var open_1 = getQualifiedElementName(el.opening.name);
+                    var close_1 = getQualifiedElementName(el.closing.name);
+                    if (open_1 !== close_1) {
+                        this.tolerateError('Expected corresponding JSX closing tag for %0', open_1);
+                    }
+                    if (stack.length > 0) {
+                        var child = this.finalize(el.node, new JSXNode.JSXElement(el.opening, el.children, el.closing));
+                        el = stack[stack.length - 1];
+                        el.children.push(child);
+                        stack.pop();
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            return el;
+        };
+        JSXParser.prototype.parseJSXElement = function () {
+            var node = this.createJSXNode();
+            var opening = this.parseJSXOpeningElement();
+            var children = [];
+            var closing = null;
+            if (!opening.selfClosing) {
+                var el = this.parseComplexJSXElement({ node: node, opening: opening, closing: closing, children: children });
+                children = el.children;
+                closing = el.closing;
+            }
+            return this.finalize(node, new JSXNode.JSXElement(opening, children, closing));
+        };
+        JSXParser.prototype.parseJSXRoot = function () {
+            // Pop the opening '<' added from the lookahead.
+            if (this.config.tokens) {
+                this.tokens.pop();
+            }
+            this.startJSX();
+            var element = this.parseJSXElement();
+            this.finishJSX();
+            return element;
+        };
+        return JSXParser;
+    }(parser_1.Parser));
+    exports.JSXParser = JSXParser;
+
+
+/***/ },
+/* 4 */
+/***/ function(module, exports) {
+
+    "use strict";
+    // See also tools/generate-unicode-regex.js.
+    var Regex = {
+        // Unicode v8.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-\u08B4\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\u0AF9\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-\u0C5A\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\u0D5F-\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-\u13F5\u13F8-\u13FD\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\u19B0-\u19C9\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-\u9FD5\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AD\uA7B0-\uA7B7\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\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-\uAB65\uAB70-\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\uDCE0-\uDCF2\uDCF4\uDCF5\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\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF19]|\uD806[\uDCA0-\uDCDF\uDCFF\uDEC0-\uDEF8]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\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\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1]|\uD87E[\uDC00-\uDE1D]/,
+        // Unicode v8.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-\u08B4\u08E3-\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\u0AF9\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-\u0C5A\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\u0D5F-\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-\u13F5\u13F8-\u13FD\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-\u9FD5\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66F\uA674-\uA67D\uA67F-\uA6F1\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AD\uA7B0-\uA7B7\uA7F7-\uA827\uA840-\uA873\uA880-\uA8C4\uA8D0-\uA8D9\uA8E0-\uA8F7\uA8FB\uA8FD\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-\uAB65\uAB70-\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-\uFE2F\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\uDCE0-\uDCF2\uDCF4\uDCF5\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\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC00-\uDC46\uDC66-\uDC6F\uDC7F-\uDCBA\uDCD0-\uDCE8\uDCF0-\uDCF9\uDD00-\uDD34\uDD36-\uDD3F\uDD50-\uDD73\uDD76\uDD80-\uDDC4\uDDCA-\uDDCC\uDDD0-\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE37\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEEA\uDEF0-\uDEF9\uDF00-\uDF03\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3C-\uDF44\uDF47\uDF48\uDF4B-\uDF4D\uDF50\uDF57\uDF5D-\uDF63\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC80-\uDCC5\uDCC7\uDCD0-\uDCD9\uDD80-\uDDB5\uDDB8-\uDDC0\uDDD8-\uDDDD\uDE00-\uDE40\uDE44\uDE50-\uDE59\uDE80-\uDEB7\uDEC0-\uDEC9\uDF00-\uDF19\uDF1D-\uDF2B\uDF30-\uDF39]|\uD806[\uDCA0-\uDCE9\uDCFF\uDEC0-\uDEF8]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\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]|\uD836[\uDE00-\uDE36\uDE3B-\uDE6C\uDE75\uDE84\uDE9B-\uDE9F\uDEA1-\uDEAF]|\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\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1]|\uD87E[\uDC00-\uDE1D]|\uDB40[\uDD00-\uDDEF]/
+    };
+    exports.Character = {
+        /* tslint:disable:no-bitwise */
+        fromCodePoint: function (cp) {
+            return (cp < 0x10000) ? String.fromCharCode(cp) :
+                String.fromCharCode(0xD800 + ((cp - 0x10000) >> 10)) +
+                    String.fromCharCode(0xDC00 + ((cp - 0x10000) & 1023));
+        },
+        // https://tc39.github.io/ecma262/#sec-white-space
+        isWhiteSpace: function (cp) {
+            return (cp === 0x20) || (cp === 0x09) || (cp === 0x0B) || (cp === 0x0C) || (cp === 0xA0) ||
+                (cp >= 0x1680 && [0x1680, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, 0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF].indexOf(cp) >= 0);
+        },
+        // https://tc39.github.io/ecma262/#sec-line-terminators
+        isLineTerminator: function (cp) {
+            return (cp === 0x0A) || (cp === 0x0D) || (cp === 0x2028) || (cp === 0x2029);
+        },
+        // https://tc39.github.io/ecma262/#sec-names-and-keywords
+        isIdentifierStart: function (cp) {
+            return (cp === 0x24) || (cp === 0x5F) ||
+                (cp >= 0x41 && cp <= 0x5A) ||
+                (cp >= 0x61 && cp <= 0x7A) ||
+                (cp === 0x5C) ||
+                ((cp >= 0x80) && Regex.NonAsciiIdentifierStart.test(exports.Character.fromCodePoint(cp)));
+        },
+        isIdentifierPart: function (cp) {
+            return (cp === 0x24) || (cp === 0x5F) ||
+                (cp >= 0x41 && cp <= 0x5A) ||
+                (cp >= 0x61 && cp <= 0x7A) ||
+                (cp >= 0x30 && cp <= 0x39) ||
+                (cp === 0x5C) ||
+                ((cp >= 0x80) && Regex.NonAsciiIdentifierPart.test(exports.Character.fromCodePoint(cp)));
+        },
+        // https://tc39.github.io/ecma262/#sec-literals-numeric-literals
+        isDecimalDigit: function (cp) {
+            return (cp >= 0x30 && cp <= 0x39); // 0..9
+        },
+        isHexDigit: function (cp) {
+            return (cp >= 0x30 && cp <= 0x39) ||
+                (cp >= 0x41 && cp <= 0x46) ||
+                (cp >= 0x61 && cp <= 0x66); // a..f
+        },
+        isOctalDigit: function (cp) {
+            return (cp >= 0x30 && cp <= 0x37); // 0..7
+        }
+    };
+
+
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
+
+    "use strict";
+    var jsx_syntax_1 = __webpack_require__(6);
+    /* tslint:disable:max-classes-per-file */
+    var JSXClosingElement = (function () {
+        function JSXClosingElement(name) {
+            this.type = jsx_syntax_1.JSXSyntax.JSXClosingElement;
+            this.name = name;
+        }
+        return JSXClosingElement;
+    }());
+    exports.JSXClosingElement = JSXClosingElement;
+    var JSXElement = (function () {
+        function JSXElement(openingElement, children, closingElement) {
+            this.type = jsx_syntax_1.JSXSyntax.JSXElement;
+            this.openingElement = openingElement;
+            this.children = children;
+            this.closingElement = closingElement;
+        }
+        return JSXElement;
+    }());
+    exports.JSXElement = JSXElement;
+    var JSXEmptyExpression = (function () {
+        function JSXEmptyExpression() {
+            this.type = jsx_syntax_1.JSXSyntax.JSXEmptyExpression;
+        }
+        return JSXEmptyExpression;
+    }());
+    exports.JSXEmptyExpression = JSXEmptyExpression;
+    var JSXExpressionContainer = (function () {
+        function JSXExpressionContainer(expression) {
+            this.type = jsx_syntax_1.JSXSyntax.JSXExpressionContainer;
+            this.expression = expression;
+        }
+        return JSXExpressionContainer;
+    }());
+    exports.JSXExpressionContainer = JSXExpressionContainer;
+    var JSXIdentifier = (function () {
+        function JSXIdentifier(name) {
+            this.type = jsx_syntax_1.JSXSyntax.JSXIdentifier;
+            this.name = name;
+        }
+        return JSXIdentifier;
+    }());
+    exports.JSXIdentifier = JSXIdentifier;
+    var JSXMemberExpression = (function () {
+        function JSXMemberExpression(object, property) {
+            this.type = jsx_syntax_1.JSXSyntax.JSXMemberExpression;
+            this.object = object;
+            this.property = property;
+        }
+        return JSXMemberExpression;
+    }());
+    exports.JSXMemberExpression = JSXMemberExpression;
+    var JSXAttribute = (function () {
+        function JSXAttribute(name, value) {
+            this.type = jsx_syntax_1.JSXSyntax.JSXAttribute;
+            this.name = name;
+            this.value = value;
+        }
+        return JSXAttribute;
+    }());
+    exports.JSXAttribute = JSXAttribute;
+    var JSXNamespacedName = (function () {
+        function JSXNamespacedName(namespace, name) {
+            this.type = jsx_syntax_1.JSXSyntax.JSXNamespacedName;
+            this.namespace = namespace;
+            this.name = name;
+        }
+        return JSXNamespacedName;
+    }());
+    exports.JSXNamespacedName = JSXNamespacedName;
+    var JSXOpeningElement = (function () {
+        function JSXOpeningElement(name, selfClosing, attributes) {
+            this.type = jsx_syntax_1.JSXSyntax.JSXOpeningElement;
+            this.name = name;
+            this.selfClosing = selfClosing;
+            this.attributes = attributes;
+        }
+        return JSXOpeningElement;
+    }());
+    exports.JSXOpeningElement = JSXOpeningElement;
+    var JSXSpreadAttribute = (function () {
+        function JSXSpreadAttribute(argument) {
+            this.type = jsx_syntax_1.JSXSyntax.JSXSpreadAttribute;
+            this.argument = argument;
+        }
+        return JSXSpreadAttribute;
+    }());
+    exports.JSXSpreadAttribute = JSXSpreadAttribute;
+    var JSXText = (function () {
+        function JSXText(value, raw) {
+            this.type = jsx_syntax_1.JSXSyntax.JSXText;
+            this.value = value;
+            this.raw = raw;
+        }
+        return JSXText;
+    }());
+    exports.JSXText = JSXText;
+
+
+/***/ },
+/* 6 */
+/***/ function(module, exports) {
+
+    "use strict";
+    exports.JSXSyntax = {
+        JSXAttribute: 'JSXAttribute',
+        JSXClosingElement: 'JSXClosingElement',
+        JSXElement: 'JSXElement',
+        JSXEmptyExpression: 'JSXEmptyExpression',
+        JSXExpressionContainer: 'JSXExpressionContainer',
+        JSXIdentifier: 'JSXIdentifier',
+        JSXMemberExpression: 'JSXMemberExpression',
+        JSXNamespacedName: 'JSXNamespacedName',
+        JSXOpeningElement: 'JSXOpeningElement',
+        JSXSpreadAttribute: 'JSXSpreadAttribute',
+        JSXText: 'JSXText'
+    };
+
+
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
+
+    "use strict";
+    var syntax_1 = __webpack_require__(2);
+    /* tslint:disable:max-classes-per-file */
+    var ArrayExpression = (function () {
+        function ArrayExpression(elements) {
+            this.type = syntax_1.Syntax.ArrayExpression;
+            this.elements = elements;
+        }
+        return ArrayExpression;
+    }());
+    exports.ArrayExpression = ArrayExpression;
+    var ArrayPattern = (function () {
+        function ArrayPattern(elements) {
+            this.type = syntax_1.Syntax.ArrayPattern;
+            this.elements = elements;
+        }
+        return ArrayPattern;
+    }());
+    exports.ArrayPattern = ArrayPattern;
+    var ArrowFunctionExpression = (function () {
+        function ArrowFunctionExpression(params, body, expression) {
+            this.type = syntax_1.Syntax.ArrowFunctionExpression;
+            this.id = null;
+            this.params = params;
+            this.body = body;
+            this.generator = false;
+            this.expression = expression;
+            this.async = false;
+        }
+        return ArrowFunctionExpression;
+    }());
+    exports.ArrowFunctionExpression = ArrowFunctionExpression;
+    var AssignmentExpression = (function () {
+        function AssignmentExpression(operator, left, right) {
+            this.type = syntax_1.Syntax.AssignmentExpression;
+            this.operator = operator;
+            this.left = left;
+            this.right = right;
+        }
+        return AssignmentExpression;
+    }());
+    exports.AssignmentExpression = AssignmentExpression;
+    var AssignmentPattern = (function () {
+        function AssignmentPattern(left, right) {
+            this.type = syntax_1.Syntax.AssignmentPattern;
+            this.left = left;
+            this.right = right;
+        }
+        return AssignmentPattern;
+    }());
+    exports.AssignmentPattern = AssignmentPattern;
+    var AsyncArrowFunctionExpression = (function () {
+        function AsyncArrowFunctionExpression(params, body, expression) {
+            this.type = syntax_1.Syntax.ArrowFunctionExpression;
+            this.id = null;
+            this.params = params;
+            this.body = body;
+            this.generator = false;
+            this.expression = expression;
+            this.async = true;
+        }
+        return AsyncArrowFunctionExpression;
+    }());
+    exports.AsyncArrowFunctionExpression = AsyncArrowFunctionExpression;
+    var AsyncFunctionDeclaration = (function () {
+        function AsyncFunctionDeclaration(id, params, body) {
+            this.type = syntax_1.Syntax.FunctionDeclaration;
+            this.id = id;
+            this.params = params;
+            this.body = body;
+            this.generator = false;
+            this.expression = false;
+            this.async = true;
+        }
+        return AsyncFunctionDeclaration;
+    }());
+    exports.AsyncFunctionDeclaration = AsyncFunctionDeclaration;
+    var AsyncFunctionExpression = (function () {
+        function AsyncFunctionExpression(id, params, body) {
+            this.type = syntax_1.Syntax.FunctionExpression;
+            this.id = id;
+            this.params = params;
+            this.body = body;
+            this.generator = false;
+            this.expression = false;
+            this.async = true;
+        }
+        return AsyncFunctionExpression;
+    }());
+    exports.AsyncFunctionExpression = AsyncFunctionExpression;
+    var AwaitExpression = (function () {
+        function AwaitExpression(argument) {
+            this.type = syntax_1.Syntax.AwaitExpression;
+            this.argument = argument;
+        }
+        return AwaitExpression;
+    }());
+    exports.AwaitExpression = AwaitExpression;
+    var BinaryExpression = (function () {
+        function BinaryExpression(operator, left, right) {
+            var logical = (operator === '||' || operator === '&&');
+            this.type = logical ? syntax_1.Syntax.LogicalExpression : syntax_1.Syntax.BinaryExpression;
+            this.operator = operator;
+            this.left = left;
+            this.right = right;
+        }
+        return BinaryExpression;
+    }());
+    exports.BinaryExpression = BinaryExpression;
+    var BlockStatement = (function () {
+        function BlockStatement(body) {
+            this.type = syntax_1.Syntax.BlockStatement;
+            this.body = body;
+        }
+        return BlockStatement;
+    }());
+    exports.BlockStatement = BlockStatement;
+    var BreakStatement = (function () {
+        function BreakStatement(label) {
+            this.type = syntax_1.Syntax.BreakStatement;
+            this.label = label;
+        }
+        return BreakStatement;
+    }());
+    exports.BreakStatement = BreakStatement;
+    var CallExpression = (function () {
+        function CallExpression(callee, args) {
+            this.type = syntax_1.Syntax.CallExpression;
+            this.callee = callee;
+            this.arguments = args;
+        }
+        return CallExpression;
+    }());
+    exports.CallExpression = CallExpression;
+    var CatchClause = (function () {
+        function CatchClause(param, body) {
+            this.type = syntax_1.Syntax.CatchClause;
+            this.param = param;
+            this.body = body;
+        }
+        return CatchClause;
+    }());
+    exports.CatchClause = CatchClause;
+    var ClassBody = (function () {
+        function ClassBody(body) {
+            this.type = syntax_1.Syntax.ClassBody;
+            this.body = body;
+        }
+        return ClassBody;
+    }());
+    exports.ClassBody = ClassBody;
+    var ClassDeclaration = (function () {
+        function ClassDeclaration(id, superClass, body) {
+            this.type = syntax_1.Syntax.ClassDeclaration;
+            this.id = id;
+            this.superClass = superClass;
+            this.body = body;
+        }
+        return ClassDeclaration;
+    }());
+    exports.ClassDeclaration = ClassDeclaration;
+    var ClassExpression = (function () {
+        function ClassExpression(id, superClass, body) {
+            this.type = syntax_1.Syntax.ClassExpression;
+            this.id = id;
+            this.superClass = superClass;
+            this.body = body;
+        }
+        return ClassExpression;
+    }());
+    exports.ClassExpression = ClassExpression;
+    var ComputedMemberExpression = (function () {
+        function ComputedMemberExpression(object, property) {
+            this.type = syntax_1.Syntax.MemberExpression;
+            this.computed = true;
+            this.object = object;
+            this.property = property;
+        }
+        return ComputedMemberExpression;
+    }());
+    exports.ComputedMemberExpression = ComputedMemberExpression;
+    var ConditionalExpression = (function () {
+        function ConditionalExpression(test, consequent, alternate) {
+            this.type = syntax_1.Syntax.ConditionalExpression;
+            this.test = test;
+            this.consequent = consequent;
+            this.alternate = alternate;
+        }
+        return ConditionalExpression;
+    }());
+    exports.ConditionalExpression = ConditionalExpression;
+    var ContinueStatement = (function () {
+        function ContinueStatement(label) {
+            this.type = syntax_1.Syntax.ContinueStatement;
+            this.label = label;
+        }
+        return ContinueStatement;
+    }());
+    exports.ContinueStatement = ContinueStatement;
+    var DebuggerStatement = (function () {
+        function DebuggerStatement() {
+            this.type = syntax_1.Syntax.DebuggerStatement;
+        }
+        return DebuggerStatement;
+    }());
+    exports.DebuggerStatement = DebuggerStatement;
+    var Directive = (function () {
+        function Directive(expression, directive) {
+            this.type = syntax_1.Syntax.ExpressionStatement;
+            this.expression = expression;
+            this.directive = directive;
+        }
+        return Directive;
+    }());
+    exports.Directive = Directive;
+    var DoWhileStatement = (function () {
+        function DoWhileStatement(body, test) {
+            this.type = syntax_1.Syntax.DoWhileStatement;
+            this.body = body;
+            this.test = test;
+        }
+        return DoWhileStatement;
+    }());
+    exports.DoWhileStatement = DoWhileStatement;
+    var EmptyStatement = (function () {
+        function EmptyStatement() {
+            this.type = syntax_1.Syntax.EmptyStatement;
+        }
+        return EmptyStatement;
+    }());
+    exports.EmptyStatement = EmptyStatement;
+    var ExportAllDeclaration = (function () {
+        function ExportAllDeclaration(source) {
+            this.type = syntax_1.Syntax.ExportAllDeclaration;
+            this.source = source;
+        }
+        return ExportAllDeclaration;
+    }());
+    exports.ExportAllDeclaration = ExportAllDeclaration;
+    var ExportDefaultDeclaration = (function () {
+        function ExportDefaultDeclaration(declaration) {
+            this.type = syntax_1.Syntax.ExportDefaultDeclaration;
+            this.declaration = declaration;
+        }
+        return ExportDefaultDeclaration;
+    }());
+    exports.ExportDefaultDeclaration = ExportDefaultDeclaration;
+    var ExportNamedDeclaration = (function () {
+        function ExportNamedDeclaration(declaration, specifiers, source) {
+            this.type = syntax_1.Syntax.ExportNamedDeclaration;
+            this.declaration = declaration;
+            this.specifiers = specifiers;
+            this.source = source;
+        }
+        return ExportNamedDeclaration;
+    }());
+    exports.ExportNamedDeclaration = ExportNamedDeclaration;
+    var ExportSpecifier = (function () {
+        function ExportSpecifier(local, exported) {
+            this.type = syntax_1.Syntax.ExportSpecifier;
+            this.exported = exported;
+            this.local = local;
+        }
+        return ExportSpecifier;
+    }());
+    exports.ExportSpecifier = ExportSpecifier;
+    var ExpressionStatement = (function () {
+        function ExpressionStatement(expression) {
+            this.type = syntax_1.Syntax.ExpressionStatement;
+            this.expression = expression;
+        }
+        return ExpressionStatement;
+    }());
+    exports.ExpressionStatement = ExpressionStatement;
+    var ForInStatement = (function () {
+        function ForInStatement(left, right, body) {
+            this.type = syntax_1.Syntax.ForInStatement;
+            this.left = left;
+            this.right = right;
+            this.body = body;
+            this.each = false;
+        }
+        return ForInStatement;
+    }());
+    exports.ForInStatement = ForInStatement;
+    var ForOfStatement = (function () {
+        function ForOfStatement(left, right, body) {
+            this.type = syntax_1.Syntax.ForOfStatement;
+            this.left = left;
+            this.right = right;
+            this.body = body;
+        }
+        return ForOfStatement;
+    }());
+    exports.ForOfStatement = ForOfStatement;
+    var ForStatement = (function () {
+        function ForStatement(init, test, update, body) {
+            this.type = syntax_1.Syntax.ForStatement;
+            this.init = init;
+            this.test = test;
+            this.update = update;
+            this.body = body;
+        }
+        return ForStatement;
+    }());
+    exports.ForStatement = ForStatement;
+    var FunctionDeclaration = (function () {
+        function FunctionDeclaration(id, params, body, generator) {
+            this.type = syntax_1.Syntax.FunctionDeclaration;
+            this.id = id;
+            this.params = params;
+            this.body = body;
+            this.generator = generator;
+            this.expression = false;
+            this.async = false;
+        }
+        return FunctionDeclaration;
+    }());
+    exports.FunctionDeclaration = FunctionDeclaration;
+    var FunctionExpression = (function () {
+        function FunctionExpression(id, params, body, generator) {
+            this.type = syntax_1.Syntax.FunctionExpression;
+            this.id = id;
+            this.params = params;
+            this.body = body;
+            this.generator = generator;
+            this.expression = false;
+            this.async = false;
+        }
+        return FunctionExpression;
+    }());
+    exports.FunctionExpression = FunctionExpression;
+    var Identifier = (function () {
+        function Identifier(name) {
+            this.type = syntax_1.Syntax.Identifier;
+            this.name = name;
+        }
+        return Identifier;
+    }());
+    exports.Identifier = Identifier;
+    var IfStatement = (function () {
+        function IfStatement(test, consequent, alternate) {
+            this.type = syntax_1.Syntax.IfStatement;
+            this.test = test;
+            this.consequent = consequent;
+            this.alternate = alternate;
+        }
+        return IfStatement;
+    }());
+    exports.IfStatement = IfStatement;
+    var Import = (function () {
+        function Import() {
+            this.type = syntax_1.Syntax.Import;
+        }
+        return Import;
+    }());
+    exports.Import = Import;
+    var ImportDeclaration = (function () {
+        function ImportDeclaration(specifiers, source) {
+            this.type = syntax_1.Syntax.ImportDeclaration;
+            this.specifiers = specifiers;
+            this.source = source;
+        }
+        return ImportDeclaration;
+    }());
+    exports.ImportDeclaration = ImportDeclaration;
+    var ImportDefaultSpecifier = (function () {
+        function ImportDefaultSpecifier(local) {
+            this.type = syntax_1.Syntax.ImportDefaultSpecifier;
+            this.local = local;
+        }
+        return ImportDefaultSpecifier;
+    }());
+    exports.ImportDefaultSpecifier = ImportDefaultSpecifier;
+    var ImportNamespaceSpecifier = (function () {
+        function ImportNamespaceSpecifier(local) {
+            this.type = syntax_1.Syntax.ImportNamespaceSpecifier;
+            this.local = local;
+        }
+        return ImportNamespaceSpecifier;
+    }());
+    exports.ImportNamespaceSpecifier = ImportNamespaceSpecifier;
+    var ImportSpecifier = (function () {
+        function ImportSpecifier(local, imported) {
+            this.type = syntax_1.Syntax.ImportSpecifier;
+            this.local = local;
+            this.imported = imported;
+        }
+        return ImportSpecifier;
+    }());
+    exports.ImportSpecifier = ImportSpecifier;
+    var LabeledStatement = (function () {
+        function LabeledStatement(label, body) {
+            this.type = syntax_1.Syntax.LabeledStatement;
+            this.label = label;
+            this.body = body;
+        }
+        return LabeledStatement;
+    }());
+    exports.LabeledStatement = LabeledStatement;
+    var Literal = (function () {
+        function Literal(value, raw) {
+            this.type = syntax_1.Syntax.Literal;
+            this.value = value;
+            this.raw = raw;
+        }
+        return Literal;
+    }());
+    exports.Literal = Literal;
+    var MetaProperty = (function () {
+        function MetaProperty(meta, property) {
+            this.type = syntax_1.Syntax.MetaProperty;
+            this.meta = meta;
+            this.property = property;
+        }
+        return MetaProperty;
+    }());
+    exports.MetaProperty = MetaProperty;
+    var MethodDefinition = (function () {
+        function MethodDefinition(key, computed, value, kind, isStatic) {
+            this.type = syntax_1.Syntax.MethodDefinition;
+            this.key = key;
+            this.computed = computed;
+            this.value = value;
+            this.kind = kind;
+            this.static = isStatic;
+        }
+        return MethodDefinition;
+    }());
+    exports.MethodDefinition = MethodDefinition;
+    var Module = (function () {
+        function Module(body) {
+            this.type = syntax_1.Syntax.Program;
+            this.body = body;
+            this.sourceType = 'module';
+        }
+        return Module;
+    }());
+    exports.Module = Module;
+    var NewExpression = (function () {
+        function NewExpression(callee, args) {
+            this.type = syntax_1.Syntax.NewExpression;
+            this.callee = callee;
+            this.arguments = args;
+        }
+        return NewExpression;
+    }());
+    exports.NewExpression = NewExpression;
+    var ObjectExpression = (function () {
+        function ObjectExpression(properties) {
+            this.type = syntax_1.Syntax.ObjectExpression;
+            this.properties = properties;
+        }
+        return ObjectExpression;
+    }());
+    exports.ObjectExpression = ObjectExpression;
+    var ObjectPattern = (function () {
+        function ObjectPattern(properties) {
+            this.type = syntax_1.Syntax.ObjectPattern;
+            this.properties = properties;
+        }
+        return ObjectPattern;
+    }());
+    exports.ObjectPattern = ObjectPattern;
+    var Property = (function () {
+        function Property(kind, key, computed, value, method, shorthand) {
+            this.type = syntax_1.Syntax.Property;
+            this.key = key;
+            this.computed = computed;
+            this.value = value;
+            this.kind = kind;
+            this.method = method;
+            this.shorthand = shorthand;
+        }
+        return Property;
+    }());
+    exports.Property = Property;
+    var RegexLiteral = (function () {
+        function RegexLiteral(value, raw, pattern, flags) {
+            this.type = syntax_1.Syntax.Literal;
+            this.value = value;
+            this.raw = raw;
+            this.regex = { pattern: pattern, flags: flags };
+        }
+        return RegexLiteral;
+    }());
+    exports.RegexLiteral = RegexLiteral;
+    var RestElement = (function () {
+        function RestElement(argument) {
+            this.type = syntax_1.Syntax.RestElement;
+            this.argument = argument;
+        }
+        return RestElement;
+    }());
+    exports.RestElement = RestElement;
+    var RestProperty = (function () {
+        function RestProperty(argument) {
+            this.type = syntax_1.Syntax.RestProperty;
+            this.argument = argument;
+        }
+        return RestProperty;
+    }());
+    exports.RestProperty = RestProperty;
+    var ReturnStatement = (function () {
+        function ReturnStatement(argument) {
+            this.type = syntax_1.Syntax.ReturnStatement;
+            this.argument = argument;
+        }
+        return ReturnStatement;
+    }());
+    exports.ReturnStatement = ReturnStatement;
+    var Script = (function () {
+        function Script(body) {
+            this.type = syntax_1.Syntax.Program;
+            this.body = body;
+            this.sourceType = 'script';
+        }
+        return Script;
+    }());
+    exports.Script = Script;
+    var SequenceExpression = (function () {
+        function SequenceExpression(expressions) {
+            this.type = syntax_1.Syntax.SequenceExpression;
+            this.expressions = expressions;
+        }
+        return SequenceExpression;
+    }());
+    exports.SequenceExpression = SequenceExpression;
+    var SpreadElement = (function () {
+        function SpreadElement(argument) {
+            this.type = syntax_1.Syntax.SpreadElement;
+            this.argument = argument;
+        }
+        return SpreadElement;
+    }());
+    exports.SpreadElement = SpreadElement;
+    var SpreadProperty = (function () {
+        function SpreadProperty(argument) {
+            this.type = syntax_1.Syntax.SpreadProperty;
+            this.argument = argument;
+        }
+        return SpreadProperty;
+    }());
+    exports.SpreadProperty = SpreadProperty;
+    var StaticMemberExpression = (function () {
+        function StaticMemberExpression(object, property) {
+            this.type = syntax_1.Syntax.MemberExpression;
+            this.computed = false;
+            this.object = object;
+            this.property = property;
+        }
+        return StaticMemberExpression;
+    }());
+    exports.StaticMemberExpression = StaticMemberExpression;
+    var Super = (function () {
+        function Super() {
+            this.type = syntax_1.Syntax.Super;
+        }
+        return Super;
+    }());
+    exports.Super = Super;
+    var SwitchCase = (function () {
+        function SwitchCase(test, consequent) {
+            this.type = syntax_1.Syntax.SwitchCase;
+            this.test = test;
+            this.consequent = consequent;
+        }
+        return SwitchCase;
+    }());
+    exports.SwitchCase = SwitchCase;
+    var SwitchStatement = (function () {
+        function SwitchStatement(discriminant, cases) {
+            this.type = syntax_1.Syntax.SwitchStatement;
+            this.discriminant = discriminant;
+            this.cases = cases;
+        }
+        return SwitchStatement;
+    }());
+    exports.SwitchStatement = SwitchStatement;
+    var TaggedTemplateExpression = (function () {
+        function TaggedTemplateExpression(tag, quasi) {
+            this.type = syntax_1.Syntax.TaggedTemplateExpression;
+            this.tag = tag;
+            this.quasi = quasi;
+        }
+        return TaggedTemplateExpression;
+    }());
+    exports.TaggedTemplateExpression = TaggedTemplateExpression;
+    var TemplateElement = (function () {
+        function TemplateElement(value, tail) {
+            this.type = syntax_1.Syntax.TemplateElement;
+            this.value = value;
+            this.tail = tail;
+        }
+        return TemplateElement;
+    }());
+    exports.TemplateElement = TemplateElement;
+    var TemplateLiteral = (function () {
+        function TemplateLiteral(quasis, expressions) {
+            this.type = syntax_1.Syntax.TemplateLiteral;
+            this.quasis = quasis;
+            this.expressions = expressions;
+        }
+        return TemplateLiteral;
+    }());
+    exports.TemplateLiteral = TemplateLiteral;
+    var ThisExpression = (function () {
+        function ThisExpression() {
+            this.type = syntax_1.Syntax.ThisExpression;
+        }
+        return ThisExpression;
+    }());
+    exports.ThisExpression = ThisExpression;
+    var ThrowStatement = (function () {
+        function ThrowStatement(argument) {
+            this.type = syntax_1.Syntax.ThrowStatement;
+            this.argument = argument;
+        }
+        return ThrowStatement;
+    }());
+    exports.ThrowStatement = ThrowStatement;
+    var TryStatement = (function () {
+        function TryStatement(block, handler, finalizer) {
+            this.type = syntax_1.Syntax.TryStatement;
+            this.block = block;
+            this.handler = handler;
+            this.finalizer = finalizer;
+        }
+        return TryStatement;
+    }());
+    exports.TryStatement = TryStatement;
+    var UnaryExpression = (function () {
+        function UnaryExpression(operator, argument) {
+            this.type = syntax_1.Syntax.UnaryExpression;
+            this.operator = operator;
+            this.argument = argument;
+            this.prefix = true;
+        }
+        return UnaryExpression;
+    }());
+    exports.UnaryExpression = UnaryExpression;
+    var UpdateExpression = (function () {
+        function UpdateExpression(operator, argument, prefix) {
+            this.type = syntax_1.Syntax.UpdateExpression;
+            this.operator = operator;
+            this.argument = argument;
+            this.prefix = prefix;
+        }
+        return UpdateExpression;
+    }());
+    exports.UpdateExpression = UpdateExpression;
+    var VariableDeclaration = (function () {
+        function VariableDeclaration(declarations, kind) {
+            this.type = syntax_1.Syntax.VariableDeclaration;
+            this.declarations = declarations;
+            this.kind = kind;
+        }
+        return VariableDeclaration;
+    }());
+    exports.VariableDeclaration = VariableDeclaration;
+    var VariableDeclarator = (function () {
+        function VariableDeclarator(id, init) {
+            this.type = syntax_1.Syntax.VariableDeclarator;
+            this.id = id;
+            this.init = init;
+        }
+        return VariableDeclarator;
+    }());
+    exports.VariableDeclarator = VariableDeclarator;
+    var WhileStatement = (function () {
+        function WhileStatement(test, body) {
+            this.type = syntax_1.Syntax.WhileStatement;
+            this.test = test;
+            this.body = body;
+        }
+        return WhileStatement;
+    }());
+    exports.WhileStatement = WhileStatement;
+    var WithStatement = (function () {
+        function WithStatement(object, body) {
+            this.type = syntax_1.Syntax.WithStatement;
+            this.object = object;
+            this.body = body;
+        }
+        return WithStatement;
+    }());
+    exports.WithStatement = WithStatement;
+    var YieldExpression = (function () {
+        function YieldExpression(argument, delegate) {
+            this.type = syntax_1.Syntax.YieldExpression;
+            this.argument = argument;
+            this.delegate = delegate;
+        }
+        return YieldExpression;
+    }());
+    exports.YieldExpression = YieldExpression;
+
+
+/***/ },
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+    "use strict";
+    var assert_1 = __webpack_require__(9);
+    var error_handler_1 = __webpack_require__(10);
+    var messages_1 = __webpack_require__(11);
+    var Node = __webpack_require__(7);
+    var scanner_1 = __webpack_require__(12);
+    var syntax_1 = __webpack_require__(2);
+    var token_1 = __webpack_require__(13);
+    var ArrowParameterPlaceHolder = 'ArrowParameterPlaceHolder';
+    var Parser = (function () {
+        function Parser(code, options, delegate) {
+            if (options === void 0) { options = {}; }
+            this.config = {
+                range: (typeof options.range === 'boolean') && options.range,
+                loc: (typeof options.loc === 'boolean') && options.loc,
+                source: null,
+                tokens: (typeof options.tokens === 'boolean') && options.tokens,
+                comment: (typeof options.comment === 'boolean') && options.comment,
+                tolerant: (typeof options.tolerant === 'boolean') && options.tolerant
+            };
+            if (this.config.loc && options.source && options.source !== null) {
+                this.config.source = String(options.source);
+            }
+            this.delegate = delegate;
+            this.errorHandler = new error_handler_1.ErrorHandler();
+            this.errorHandler.tolerant = this.config.tolerant;
+            this.scanner = new scanner_1.Scanner(code, this.errorHandler);
+            this.scanner.trackComment = this.config.comment;
+            this.operatorPrecedence = {
+                ')': 0,
+                ';': 0,
+                ',': 0,
+                '=': 0,
+                ']': 0,
+                '||': 1,
+                '&&': 2,
+                '|': 3,
+                '^': 4,
+                '&': 5,
+                '==': 6,
+                '!=': 6,
+                '===': 6,
+                '!==': 6,
+                '<': 7,
+                '>': 7,
+                '<=': 7,
+                '>=': 7,
+                '<<': 8,
+                '>>': 8,
+                '>>>': 8,
+                '+': 9,
+                '-': 9,
+                '*': 11,
+                '/': 11,
+                '%': 11
+            };
+            this.lookahead = {
+                type: 2 /* EOF */,
+                value: '',
+                lineNumber: this.scanner.lineNumber,
+                lineStart: 0,
+                start: 0,
+                end: 0
+            };
+            this.hasLineTerminator = false;
+            this.context = {
+                isModule: false,
+                await: false,
+                allowIn: true,
+                allowStrictDirective: true,
+                allowYield: true,
+                firstCoverInitializedNameError: null,
+                isAssignmentTarget: false,
+                isBindingElement: false,
+                inFunctionBody: false,
+                inIteration: false,
+                inSwitch: false,
+                labelSet: {},
+                strict: false
+            };
+            this.tokens = [];
+            this.startMarker = {
+                index: 0,
+                line: this.scanner.lineNumber,
+                column: 0
+            };
+            this.lastMarker = {
+                index: 0,
+                line: this.scanner.lineNumber,
+                column: 0
+            };
+            this.nextToken();
+            this.lastMarker = {
+                index: this.scanner.index,
+                line: this.scanner.lineNumber,
+                column: this.scanner.index - this.scanner.lineStart
+            };
+        }
+        Parser.prototype.throwError = function (messageFormat) {
+            var values = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                values[_i - 1] = arguments[_i];
+            }
+            var args = Array.prototype.slice.call(arguments, 1);
+            var msg = messageFormat.replace(/%(\d)/g, function (whole, idx) {
+                assert_1.assert(idx < args.length, 'Message reference must be in range');
+                return args[idx];
+            });
+            var index = this.lastMarker.index;
+            var line = this.lastMarker.line;
+            var column = this.lastMarker.column + 1;
+            throw this.errorHandler.createError(index, line, column, msg);
+        };
+        Parser.prototype.tolerateError = function (messageFormat) {
+            var values = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                values[_i - 1] = arguments[_i];
+            }
+            var args = Array.prototype.slice.call(arguments, 1);
+            var msg = messageFormat.replace(/%(\d)/g, function (whole, idx) {
+                assert_1.assert(idx < args.length, 'Message reference must be in range');
+                return args[idx];
+            });
+            var index = this.lastMarker.index;
+            var line = this.scanner.lineNumber;
+            var column = this.lastMarker.column + 1;
+            this.errorHandler.tolerateError(index, line, column, msg);
+        };
+        // Throw an exception because of the token.
+        Parser.prototype.unexpectedTokenError = function (token, message) {
+            var msg = message || messages_1.Messages.UnexpectedToken;
+            var value;
+            if (token) {
+                if (!message) {
+                    msg = (token.type === 2 /* EOF */) ? messages_1.Messages.UnexpectedEOS :
+                        (token.type === 3 /* Identifier */) ? messages_1.Messages.UnexpectedIdentifier :
+                            (token.type === 6 /* NumericLiteral */) ? messages_1.Messages.UnexpectedNumber :
+                                (token.type === 8 /* StringLiteral */) ? messages_1.Messages.UnexpectedString :
+                                    (token.type === 10 /* Template */) ? messages_1.Messages.UnexpectedTemplate :
+                                        messages_1.Messages.UnexpectedToken;
+                    if (token.type === 4 /* Keyword */) {
+                        if (this.scanner.isFutureReservedWord(token.value)) {
+                            msg = messages_1.Messages.UnexpectedReserved;
+                        }
+                        else if (this.context.strict && this.scanner.isStrictModeReservedWord(token.value)) {
+                            msg = messages_1.Messages.StrictReservedWord;
+                        }
+                    }
+                }
+                value = token.value;
+            }
+            else {
+                value = 'ILLEGAL';
+            }
+            msg = msg.replace('%0', value);
+            if (token && typeof token.lineNumber === 'number') {
+                var index = token.start;
+                var line = token.lineNumber;
+                var lastMarkerLineStart = this.lastMarker.index - this.lastMarker.column;
+                var column = token.start - lastMarkerLineStart + 1;
+                return this.errorHandler.createError(index, line, column, msg);
+            }
+            else {
+                var index = this.lastMarker.index;
+                var line = this.lastMarker.line;
+                var column = this.lastMarker.column + 1;
+                return this.errorHandler.createError(index, line, column, msg);
+            }
+        };
+        Parser.prototype.throwUnexpectedToken = function (token, message) {
+            throw this.unexpectedTokenError(token, message);
+        };
+        Parser.prototype.tolerateUnexpectedToken = function (token, message) {
+            this.errorHandler.tolerate(this.unexpectedTokenError(token, message));
+        };
+        Parser.prototype.collectComments = function () {
+            if (!this.config.comment) {
+                this.scanner.scanComments();
+            }
+            else {
+                var comments = this.scanner.scanComments();
+                if (comments.length > 0 && this.delegate) {
+                    for (var i = 0; i < comments.length; ++i) {
+                        var e = comments[i];
+                        var node = void 0;
+                        node = {
+                            type: e.multiLine ? 'BlockComment' : 'LineComment',
+                            value: this.scanner.source.slice(e.slice[0], e.slice[1])
+                        };
+                        if (this.config.range) {
+                            node.range = e.range;
+                        }
+                        if (this.config.loc) {
+                            node.loc = e.loc;
+                        }
+                        var metadata = {
+                            start: {
+                                line: e.loc.start.line,
+                                column: e.loc.start.column,
+                                offset: e.range[0]
+                            },
+                            end: {
+                                line: e.loc.end.line,
+                                column: e.loc.end.column,
+                                offset: e.range[1]
+                            }
+                        };
+                        this.delegate(node, metadata);
+                    }
+                }
+            }
+        };
+        // From internal representation to an external structure
+        Parser.prototype.getTokenRaw = function (token) {
+            return this.scanner.source.slice(token.start, token.end);
+        };
+        Parser.prototype.convertToken = function (token) {
+            var t = {
+                type: token_1.TokenName[token.type],
+                value: this.getTokenRaw(token)
+            };
+            if (this.config.range) {
+                t.range = [token.start, token.end];
+            }
+            if (this.config.loc) {
+                t.loc = {
+                    start: {
+                        line: this.startMarker.line,
+                        column: this.startMarker.column
+                    },
+                    end: {
+                        line: this.scanner.lineNumber,
+                        column: this.scanner.index - this.scanner.lineStart
+                    }
+                };
+            }
+            if (token.type === 9 /* RegularExpression */) {
+                var pattern = token.pattern;
+                var flags = token.flags;
+                t.regex = { pattern: pattern, flags: flags };
+            }
+            return t;
+        };
+        Parser.prototype.nextToken = function () {
+            var token = this.lookahead;
+            this.lastMarker.index = this.scanner.index;
+            this.lastMarker.line = this.scanner.lineNumber;
+            this.lastMarker.column = this.scanner.index - this.scanner.lineStart;
+            this.collectComments();
+            if (this.scanner.index !== this.startMarker.index) {
+                this.startMarker.index = this.scanner.index;
+                this.startMarker.line = this.scanner.lineNumber;
+                this.startMarker.column = this.scanner.index - this.scanner.lineStart;
+            }
+            var next = this.scanner.lex();
+            this.hasLineTerminator = (token.lineNumber !== next.lineNumber);
+            if (next && this.context.strict && next.type === 3 /* Identifier */) {
+                if (this.scanner.isStrictModeReservedWord(next.value)) {
+                    next.type = 4 /* Keyword */;
+                }
+            }
+            this.lookahead = next;
+            if (this.config.tokens && next.type !== 2 /* EOF */) {
+                this.tokens.push(this.convertToken(next));
+            }
+            return token;
+        };
+        Parser.prototype.nextRegexToken = function () {
+            this.collectComments();
+            var token = this.scanner.scanRegExp();
+            if (this.config.tokens) {
+                // Pop the previous token, '/' or '/='
+                // This is added from the lookahead token.
+                this.tokens.pop();
+                this.tokens.push(this.convertToken(token));
+            }
+            // Prime the next lookahead.
+            this.lookahead = token;
+            this.nextToken();
+            return token;
+        };
+        Parser.prototype.createNode = function () {
+            return {
+                index: this.startMarker.index,
+                line: this.startMarker.line,
+                column: this.startMarker.column
+            };
+        };
+        Parser.prototype.startNode = function (token) {
+            return {
+                index: token.start,
+                line: token.lineNumber,
+                column: token.start - token.lineStart
+            };
+        };
+        Parser.prototype.finalize = function (marker, node) {
+            if (this.config.range) {
+                node.range = [marker.index, this.lastMarker.index];
+            }
+            if (this.config.loc) {
+                node.loc = {
+                    start: {
+                        line: marker.line,
+                        column: marker.column,
+                    },
+                    end: {
+                        line: this.lastMarker.line,
+                        column: this.lastMarker.column
+                    }
+                };
+                if (this.config.source) {
+                    node.loc.source = this.config.source;
+                }
+            }
+            if (this.delegate) {
+                var metadata = {
+                    start: {
+                        line: marker.line,
+                        column: marker.column,
+                        offset: marker.index
+                    },
+                    end: {
+                        line: this.lastMarker.line,
+                        column: this.lastMarker.column,
+                        offset: this.lastMarker.index
+                    }
+                };
+                this.delegate(node, metadata);
+            }
+            return node;
+        };
+        // Expect the next token to match the specified punctuator.
+        // If not, an exception will be thrown.
+        Parser.prototype.expect = function (value) {
+            var token = this.nextToken();
+            if (token.type !== 7 /* Punctuator */ || token.value !== value) {
+                this.throwUnexpectedToken(token);
+            }
+        };
+        // Quietly expect a comma when in tolerant mode, otherwise delegates to expect().
+        Parser.prototype.expectCommaSeparator = function () {
+            if (this.config.tolerant) {
+                var token = this.lookahead;
+                if (token.type === 7 /* Punctuator */ && token.value === ',') {
+                    this.nextToken();
+                }
+                else if (token.type === 7 /* Punctuator */ && token.value === ';') {
+                    this.nextToken();
+                    this.tolerateUnexpectedToken(token);
+                }
+                else {
+                    this.tolerateUnexpectedToken(token, messages_1.Messages.UnexpectedToken);
+                }
+            }
+            else {
+                this.expect(',');
+            }
+        };
+        // Expect the next token to match the specified keyword.
+        // If not, an exception will be thrown.
+        Parser.prototype.expectKeyword = function (keyword) {
+            var token = this.nextToken();
+            if (token.type !== 4 /* Keyword */ || token.value !== keyword) {
+                this.throwUnexpectedToken(token);
+            }
+        };
+        // Return true if the next token matches the specified punctuator.
+        Parser.prototype.match = function (value) {
+            return this.lookahead.type === 7 /* Punctuator */ && this.lookahead.value === value;
+        };
+        // Return true if the next token matches the specified keyword
+        Parser.prototype.matchKeyword = function (keyword) {
+            return this.lookahead.type === 4 /* Keyword */ && this.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)
+        Parser.prototype.matchContextualKeyword = function (keyword) {
+            return this.lookahead.type === 3 /* Identifier */ && this.lookahead.value === keyword;
+        };
+        // Return true if the next token is an assignment operator
+        Parser.prototype.matchAssign = function () {
+            if (this.lookahead.type !== 7 /* Punctuator */) {
+                return false;
+            }
+            var op = this.lookahead.value;
+            return op === '=' ||
+                op === '*=' ||
+                op === '**=' ||
+                op === '/=' ||
+                op === '%=' ||
+                op === '+=' ||
+                op === '-=' ||
+                op === '<<=' ||
+                op === '>>=' ||
+                op === '>>>=' ||
+                op === '&=' ||
+                op === '^=' ||
+                op === '|=';
+        };
+        // 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.
+        Parser.prototype.isolateCoverGrammar = function (parseFunction) {
+            var previousIsBindingElement = this.context.isBindingElement;
+            var previousIsAssignmentTarget = this.context.isAssignmentTarget;
+            var previousFirstCoverInitializedNameError = this.context.firstCoverInitializedNameError;
+            this.context.isBindingElement = true;
+            this.context.isAssignmentTarget = true;
+            this.context.firstCoverInitializedNameError = null;
+            var result = parseFunction.call(this);
+            if (this.context.firstCoverInitializedNameError !== null) {
+                this.throwUnexpectedToken(this.context.firstCoverInitializedNameError);
+            }
+            this.context.isBindingElement = previousIsBindingElement;
+            this.context.isAssignmentTarget = previousIsAssignmentTarget;
+            this.context.firstCoverInitializedNameError = previousFirstCoverInitializedNameError;
+            return result;
+        };
+        Parser.prototype.inheritCoverGrammar = function (parseFunction) {
+            var previousIsBindingElement = this.context.isBindingElement;
+            var previousIsAssignmentTarget = this.context.isAssignmentTarget;
+            var previousFirstCoverInitializedNameError = this.context.firstCoverInitializedNameError;
+            this.context.isBindingElement = true;
+            this.context.isAssignmentTarget = true;
+            this.context.firstCoverInitializedNameError = null;
+            var result = parseFunction.call(this);
+            this.context.isBindingElement = this.context.isBindingElement && previousIsBindingElement;
+            this.context.isAssignmentTarget = this.context.isAssignmentTarget && previousIsAssignmentTarget;
+            this.context.firstCoverInitializedNameError = previousFirstCoverInitializedNameError || this.context.firstCoverInitializedNameError;
+            return result;
+        };
+        Parser.prototype.consumeSemicolon = function () {
+            if (this.match(';')) {
+                this.nextToken();
+            }
+            else if (!this.hasLineTerminator) {
+                if (this.lookahead.type !== 2 /* EOF */ && !this.match('}')) {
+                    this.throwUnexpectedToken(this.lookahead);
+                }
+                this.lastMarker.index = this.startMarker.index;
+                this.lastMarker.line = this.startMarker.line;
+                this.lastMarker.column = this.startMarker.column;
+            }
+        };
+        // https://tc39.github.io/ecma262/#sec-primary-expression
+        Parser.prototype.parsePrimaryExpression = function () {
+            var node = this.createNode();
+            var expr;
+            var token, raw;
+            switch (this.lookahead.type) {
+                case 3 /* Identifier */:
+                    if ((this.context.isModule || this.context.await) && this.lookahead.value === 'await') {
+                        this.tolerateUnexpectedToken(this.lookahead);
+                    }
+                    expr = this.matchAsyncFunction() ? this.parseFunctionExpression() : this.finalize(node, new Node.Identifier(this.nextToken().value));
+                    break;
+                case 6 /* NumericLiteral */:
+                case 8 /* StringLiteral */:
+                    if (this.context.strict && this.lookahead.octal) {
+                        this.tolerateUnexpectedToken(this.lookahead, messages_1.Messages.StrictOctalLiteral);
+                    }
+                    this.context.isAssignmentTarget = false;
+                    this.context.isBindingElement = false;
+                    token = this.nextToken();
+                    raw = this.getTokenRaw(token);
+                    expr = this.finalize(node, new Node.Literal(token.value, raw));
+                    break;
+                case 1 /* BooleanLiteral */:
+                    this.context.isAssignmentTarget = false;
+                    this.context.isBindingElement = false;
+                    token = this.nextToken();
+                    raw = this.getTokenRaw(token);
+                    expr = this.finalize(node, new Node.Literal(token.value === 'true', raw));
+                    break;
+                case 5 /* NullLiteral */:
+                    this.context.isAssignmentTarget = false;
+                    this.context.isBindingElement = false;
+                    token = this.nextToken();
+                    raw = this.getTokenRaw(token);
+                    expr = this.finalize(node, new Node.Literal(null, raw));
+                    break;
+                case 10 /* Template */:
+                    expr = this.parseTemplateLiteral();
+                    break;
+                case 7 /* Punctuator */:
+                    switch (this.lookahead.value) {
+                        case '(':
+                            this.context.isBindingElement = false;
+                            expr = this.inheritCoverGrammar(this.parseGroupExpression);
+                            break;
+                        case '[':
+                            expr = this.inheritCoverGrammar(this.parseArrayInitializer);
+                            break;
+                        case '{':
+                            expr = this.inheritCoverGrammar(this.parseObjectInitializer);
+                            break;
+                        case '/':
+                        case '/=':
+                            this.context.isAssignmentTarget = false;
+                            this.context.isBindingElement = false;
+                            this.scanner.index = this.startMarker.index;
+                            token = this.nextRegexToken();
+                            raw = this.getTokenRaw(token);
+                            expr = this.finalize(node, new Node.RegexLiteral(token.regex, raw, token.pattern, token.flags));
+                            break;
+                        default:
+                            expr = this.throwUnexpectedToken(this.nextToken());
+                    }
+                    break;
+                case 4 /* Keyword */:
+                    if (!this.context.strict && this.context.allowYield && this.matchKeyword('yield')) {
+                        expr = this.parseIdentifierName();
+                    }
+                    else if (!this.context.strict && this.matchKeyword('let')) {
+                        expr = this.finalize(node, new Node.Identifier(this.nextToken().value));
+                    }
+                    else {
+                        this.context.isAssignmentTarget = false;
+                        this.context.isBindingElement = false;
+                        if (this.matchKeyword('function')) {
+                            expr = this.parseFunctionExpression();
+                        }
+                        else if (this.matchKeyword('this')) {
+                            this.nextToken();
+                            expr = this.finalize(node, new Node.ThisExpression());
+                        }
+                        else if (this.matchKeyword('class')) {
+                            expr = this.parseClassExpression();
+                        }
+                        else if (this.matchImportCall()) {
+                            expr = this.parseImportCall();
+                        }
+                        else {
+                            expr = this.throwUnexpectedToken(this.nextToken());
+                        }
+                    }
+                    break;
+                default:
+                    expr = this.throwUnexpectedToken(this.nextToken());
+            }
+            return expr;
+        };
+        // https://tc39.github.io/ecma262/#sec-array-initializer
+        Parser.prototype.parseSpreadElement = function () {
+            var node = this.createNode();
+            this.expect('...');
+            var arg = this.inheritCoverGrammar(this.parseAssignmentExpression);
+            return this.finalize(node, new Node.SpreadElement(arg));
+        };
+        Parser.prototype.parseArrayInitializer = function () {
+            var node = this.createNode();
+            var elements = [];
+            this.expect('[');
+            while (!this.match(']')) {
+                if (this.match(',')) {
+                    this.nextToken();
+                    elements.push(null);
+                }
+                else if (this.match('...')) {
+                    var element = this.parseSpreadElement();
+                    if (!this.match(']')) {
+                        this.context.isAssignmentTarget = false;
+                        this.context.isBindingElement = false;
+                        this.expect(',');
+                    }
+                    elements.push(element);
+                }
+                else {
+                    elements.push(this.inheritCoverGrammar(this.parseAssignmentExpression));
+                    if (!this.match(']')) {
+                        this.expect(',');
+                    }
+                }
+            }
+            this.expect(']');
+            return this.finalize(node, new Node.ArrayExpression(elements));
+        };
+        // https://tc39.github.io/ecma262/#sec-object-initializer
+        Parser.prototype.parsePropertyMethod = function (params) {
+            this.context.isAssignmentTarget = false;
+            this.context.isBindingElement = false;
+            var previousStrict = this.context.strict;
+            var previousAllowStrictDirective = this.context.allowStrictDirective;
+            this.context.allowStrictDirective = params.simple;
+            var body = this.isolateCoverGrammar(this.parseFunctionSourceElements);
+            if (this.context.strict && params.firstRestricted) {
+                this.tolerateUnexpectedToken(params.firstRestricted, params.message);
+            }
+            if (this.context.strict && params.stricted) {
+                this.tolerateUnexpectedToken(params.stricted, params.message);
+            }
+            this.context.strict = previousStrict;
+            this.context.allowStrictDirective = previousAllowStrictDirective;
+            return body;
+        };
+        Parser.prototype.parsePropertyMethodFunction = function () {
+            var isGenerator = false;
+            var node = this.createNode();
+            var previousAllowYield = this.context.allowYield;
+            this.context.allowYield = false;
+            var params = this.parseFormalParameters();
+            var method = this.parsePropertyMethod(params);
+            this.context.allowYield = previousAllowYield;
+            return this.finalize(node, new Node.FunctionExpression(null, params.params, method, isGenerator));
+        };
+        Parser.prototype.parsePropertyMethodAsyncFunction = function () {
+            var node = this.createNode();
+            var previousAllowYield = this.context.allowYield;
+            var previousAwait = this.context.await;
+            this.context.allowYield = false;
+            this.context.await = true;
+            var params = this.parseFormalParameters();
+            var method = this.parsePropertyMethod(params);
+            this.context.allowYield = previousAllowYield;
+            this.context.await = previousAwait;
+            return this.finalize(node, new Node.AsyncFunctionExpression(null, params.params, method));
+        };
+        Parser.prototype.parseObjectPropertyKey = function () {
+            var node = this.createNode();
+            var token = this.nextToken();
+            var key;
+            switch (token.type) {
+                case 8 /* StringLiteral */:
+                case 6 /* NumericLiteral */:
+                    if (this.context.strict && token.octal) {
+                        this.tolerateUnexpectedToken(token, messages_1.Messages.StrictOctalLiteral);
+                    }
+                    var raw = this.getTokenRaw(token);
+                    key = this.finalize(node, new Node.Literal(token.value, raw));
+                    break;
+                case 3 /* Identifier */:
+                case 1 /* BooleanLiteral */:
+                case 5 /* NullLiteral */:
+                case 4 /* Keyword */:
+                    key = this.finalize(node, new Node.Identifier(token.value));
+                    break;
+                case 7 /* Punctuator */:
+                    if (token.value === '[') {
+                        key = this.isolateCoverGrammar(this.parseAssignmentExpression);
+                        this.expect(']');
+                    }
+                    else {
+                        key = this.throwUnexpectedToken(token);
+                    }
+                    break;
+                default:
+                    key = this.throwUnexpectedToken(token);
+            }
+            return key;
+        };
+        Parser.prototype.isPropertyKey = function (key, value) {
+            return (key.type === syntax_1.Syntax.Identifier && key.name === value) ||
+                (key.type === syntax_1.Syntax.Literal && key.value === value);
+        };
+        Parser.prototype.parseObjectProperty = function (hasProto) {
+            var node = this.createNode();
+            var token = this.lookahead;
+            var kind;
+            var key = null;
+            var value = null;
+            var computed = false;
+            var method = false;
+            var shorthand = false;
+            var isAsync = false;
+            if (token.type === 3 /* Identifier */) {
+                var id = token.value;
+                this.nextToken();
+                if (id === 'async' && !this.hasLineTerminator) {
+                    computed = this.match('[');
+                    if (computed) {
+                        isAsync = true;
+                        key = this.parseObjectPropertyKey();
+                    }
+                    else {
+                        var punctuator = this.lookahead.value;
+                        if (punctuator !== ':' && punctuator !== '(' && punctuator !== '*') {
+                            isAsync = true;
+                            token = this.lookahead;
+                            id = token.value;
+                            this.nextToken();
+                        }
+                        key = this.finalize(node, new Node.Identifier(id));
+                    }
+                }
+                else {
+                    key = this.finalize(node, new Node.Identifier(id));
+                }
+            }
+            else if (this.match('*')) {
+                this.nextToken();
+            }
+            else {
+                computed = this.match('[');
+                key = this.parseObjectPropertyKey();
+            }
+            var lookaheadPropertyKey = this.qualifiedPropertyName(this.lookahead);
+            if (token.type === 3 /* Identifier */ && !isAsync && token.value === 'get' && lookaheadPropertyKey) {
+                kind = 'get';
+                computed = this.match('[');
+                key = this.parseObjectPropertyKey();
+                this.context.allowYield = false;
+                value = this.parseGetterMethod();
+            }
+            else if (token.type === 3 /* Identifier */ && !isAsync && token.value === 'set' && lookaheadPropertyKey) {
+                kind = 'set';
+                computed = this.match('[');
+                key = this.parseObjectPropertyKey();
+                value = this.parseSetterMethod();
+            }
+            else if (token.type === 7 /* Punctuator */ && token.value === '*' && lookaheadPropertyKey) {
+                kind = 'init';
+                computed = this.match('[');
+                key = this.parseObjectPropertyKey();
+                value = this.parseGeneratorMethod();
+                method = true;
+            }
+            else {
+                if (!key) {
+                    this.throwUnexpectedToken(this.lookahead);
+                }
+                kind = 'init';
+                if (this.match(':') && !isAsync) {
+                    if (!computed && this.isPropertyKey(key, '__proto__')) {
+                        if (hasProto.value) {
+                            this.tolerateError(messages_1.Messages.DuplicateProtoProperty);
+                        }
+                        hasProto.value = true;
+                    }
+                    this.nextToken();
+                    value = this.inheritCoverGrammar(this.parseAssignmentExpression);
+                }
+                else if (this.match('(')) {
+                    value = isAsync ? this.parsePropertyMethodAsyncFunction() : this.parsePropertyMethodFunction();
+                    method = true;
+                }
+                else if (token.type === 3 /* Identifier */) {
+                    var id = this.finalize(node, new Node.Identifier(token.value));
+                    if (this.match('=')) {
+                        this.context.firstCoverInitializedNameError = this.lookahead;
+                        this.nextToken();
+                        shorthand = true;
+                        var init = this.isolateCoverGrammar(this.parseAssignmentExpression);
+                        value = this.finalize(node, new Node.AssignmentPattern(id, init));
+                    }
+                    else {
+                        shorthand = true;
+                        value = id;
+                    }
+                }
+                else {
+                    this.throwUnexpectedToken(this.nextToken());
+                }
+            }
+            return this.finalize(node, new Node.Property(kind, key, computed, value, method, shorthand));
+        };
+        Parser.prototype.parseSpreadProperty = function () {
+            var node = this.createNode();
+            this.expect('...');
+            var arg = this.inheritCoverGrammar(this.parseAssignmentExpression);
+            return this.finalize(node, new Node.SpreadProperty(arg));
+        };
+        Parser.prototype.parseObjectInitializer = function () {
+            var node = this.createNode();
+            this.expect('{');
+            var properties = [];
+            var hasProto = { value: false };
+            while (!this.match('}')) {
+                properties.push(this.match('...') ? this.parseSpreadProperty() : this.parseObjectProperty(hasProto));
+                if (!this.match('}')) {
+                    this.expectCommaSeparator();
+                }
+            }
+            this.expect('}');
+            return this.finalize(node, new Node.ObjectExpression(properties));
+        };
+        // https://tc39.github.io/ecma262/#sec-template-literals
+        Parser.prototype.parseTemplateHead = function () {
+            assert_1.assert(this.lookahead.head, 'Template literal must start with a template head');
+            var node = this.createNode();
+            var token = this.nextToken();
+            var raw = token.value;
+            var cooked = token.cooked;
+            return this.finalize(node, new Node.TemplateElement({ raw: raw, cooked: cooked }, token.tail));
+        };
+        Parser.prototype.parseTemplateElement = function () {
+            if (this.lookahead.type !== 10 /* Template */) {
+                this.throwUnexpectedToken();
+            }
+            var node = this.createNode();
+            var token = this.nextToken();
+            var raw = token.value;
+            var cooked = token.cooked;
+            return this.finalize(node, new Node.TemplateElement({ raw: raw, cooked: cooked }, token.tail));
+        };
+        Parser.prototype.parseTemplateLiteral = function () {
+            var node = this.createNode();
+            var expressions = [];
+            var quasis = [];
+            var quasi = this.parseTemplateHead();
+            quasis.push(quasi);
+            while (!quasi.tail) {
+                expressions.push(this.parseExpression());
+                quasi = this.parseTemplateElement();
+                quasis.push(quasi);
+            }
+            return this.finalize(node, new Node.TemplateLiteral(quasis, expressions));
+        };
+        // https://tc39.github.io/ecma262/#sec-grouping-operator
+        Parser.prototype.reinterpretExpressionAsPattern = function (expr) {
+            switch (expr.type) {
+                case syntax_1.Syntax.Identifier:
+                case syntax_1.Syntax.MemberExpression:
+                case syntax_1.Syntax.RestElement:
+                case syntax_1.Syntax.AssignmentPattern:
+                    break;
+                case syntax_1.Syntax.SpreadElement:
+                    expr.type = syntax_1.Syntax.RestElement;
+                    this.reinterpretExpressionAsPattern(expr.argument);
+                    break;
+                case syntax_1.Syntax.SpreadProperty:
+                    expr.type = syntax_1.Syntax.RestProperty;
+                    this.reinterpretExpressionAsPattern(expr.argument);
+                    break;
+                case syntax_1.Syntax.ArrayExpression:
+                    expr.type = syntax_1.Syntax.ArrayPattern;
+                    for (var i = 0; i < expr.elements.length; i++) {
+                        if (expr.elements[i] !== null) {
+                            this.reinterpretExpressionAsPattern(expr.elements[i]);
+                        }
+                    }
+                    break;
+                case syntax_1.Syntax.ObjectExpression:
+                    expr.type = syntax_1.Syntax.ObjectPattern;
+                    for (var i = 0; i < expr.properties.length; i++) {
+                        var property = expr.properties[i];
+                        this.reinterpretExpressionAsPattern(property.type === syntax_1.Syntax.SpreadProperty ? property : property.value);
+                    }
+                    break;
+                case syntax_1.Syntax.AssignmentExpression:
+                    expr.type = syntax_1.Syntax.AssignmentPattern;
+                    delete expr.operator;
+                    this.reinterpretExpressionAsPattern(expr.left);
+                    break;
+                default:
+                    // Allow other node type for tolerant parsing.
+                    break;
+            }
+        };
+        Parser.prototype.parseGroupExpression = function () {
+            var expr;
+            this.expect('(');
+            if (this.match(')')) {
+                this.nextToken();
+                if (!this.match('=>')) {
+                    this.expect('=>');
+                }
+                expr = {
+                    type: ArrowParameterPlaceHolder,
+                    params: [],
+                    async: false
+                };
+            }
+            else {
+                var startToken = this.lookahead;
+                var params = [];
+                if (this.match('...')) {
+                    expr = this.parseRestElement(params);
+                    this.expect(')');
+                    if (!this.match('=>')) {
+                        this.expect('=>');
+                    }
+                    expr = {
+                        type: ArrowParameterPlaceHolder,
+                        params: [expr],
+                        async: false
+                    };
+                }
+                else {
+                    var arrow = false;
+                    this.context.isBindingElement = true;
+                    expr = this.inheritCoverGrammar(this.parseAssignmentExpression);
+                    if (this.match(',')) {
+                        var expressions = [];
+                        this.context.isAssignmentTarget = false;
+                        expressions.push(expr);
+                        while (this.lookahead.type !== 2 /* EOF */) {
+                            if (!this.match(',')) {
+                                break;
+                            }
+                            this.nextToken();
+                            if (this.match(')')) {
+                                this.nextToken();
+                                for (var i = 0; i < expressions.length; i++) {
+                                    this.reinterpretExpressionAsPattern(expressions[i]);
+                                }
+                                arrow = true;
+                                expr = {
+                                    type: ArrowParameterPlaceHolder,
+                                    params: expressions,
+                                    async: false
+                                };
+                            }
+                            else if (this.match('...')) {
+                                if (!this.context.isBindingElement) {
+                                    this.throwUnexpectedToken(this.lookahead);
+                                }
+                                expressions.push(this.parseRestElement(params));
+                                this.expect(')');
+                                if (!this.match('=>')) {
+                                    this.expect('=>');
+                                }
+                                this.context.isBindingElement = false;
+                                for (var i = 0; i < expressions.length; i++) {
+                                    this.reinterpretExpressionAsPattern(expressions[i]);
+                                }
+                                arrow = true;
+                                expr = {
+                                    type: ArrowParameterPlaceHolder,
+                                    params: expressions,
+                                    async: false
+                                };
+                            }
+                            else {
+                                expressions.push(this.inheritCoverGrammar(this.parseAssignmentExpression));
+                            }
+                            if (arrow) {
+                                break;
+                            }
+                        }
+                        if (!arrow) {
+                            expr = this.finalize(this.startNode(startToken), new Node.SequenceExpression(expressions));
+                        }
+                    }
+                    if (!arrow) {
+                        this.expect(')');
+                        if (this.match('=>')) {
+                            if (expr.type === syntax_1.Syntax.Identifier && expr.name === 'yield') {
+                                arrow = true;
+                                expr = {
+                                    type: ArrowParameterPlaceHolder,
+                                    params: [expr],
+                                    async: false
+                                };
+                            }
+                            if (!arrow) {
+                                if (!this.context.isBindingElement) {
+                                    this.throwUnexpectedToken(this.lookahead);
+                                }
+                                if (expr.type === syntax_1.Syntax.SequenceExpression) {
+                                    for (var i = 0; i < expr.expressions.length; i++) {
+                                        this.reinterpretExpressionAsPattern(expr.expressions[i]);
+                                    }
+                                }
+                                else {
+                                    this.reinterpretExpressionAsPattern(expr);
+                                }
+                                var params_1 = (expr.type === syntax_1.Syntax.SequenceExpression ? expr.expressions : [expr]);
+                                expr = {
+                                    type: ArrowParameterPlaceHolder,
+                                    params: params_1,
+                                    async: false
+                                };
+                            }
+                        }
+                        this.context.isBindingElement = false;
+                    }
+                }
+            }
+            return expr;
+        };
+        // https://tc39.github.io/ecma262/#sec-left-hand-side-expressions
+        Parser.prototype.parseArguments = function () {
+            this.expect('(');
+            var args = [];
+            if (!this.match(')')) {
+                while (true) {
+                    var expr = this.match('...') ? this.parseSpreadElement() :
+                        this.isolateCoverGrammar(this.parseAssignmentExpression);
+                    args.push(expr);
+                    if (this.match(')')) {
+                        break;
+                    }
+                    this.expectCommaSeparator();
+                    if (this.match(')')) {
+                        break;
+                    }
+                }
+            }
+            this.expect(')');
+            return args;
+        };
+        Parser.prototype.isIdentifierName = function (token) {
+            return token.type === 3 /* Identifier */ ||
+                token.type === 4 /* Keyword */ ||
+                token.type === 1 /* BooleanLiteral */ ||
+                token.type === 5 /* NullLiteral */;
+        };
+        Parser.prototype.parseIdentifierName = function () {
+            var node = this.createNode();
+            var token = this.nextToken();
+            if (!this.isIdentifierName(token)) {
+                this.throwUnexpectedToken(token);
+            }
+            return this.finalize(node, new Node.Identifier(token.value));
+        };
+        Parser.prototype.parseNewExpression = function () {
+            var node = this.createNode();
+            var id = this.parseIdentifierName();
+            assert_1.assert(id.name === 'new', 'New expression must start with `new`');
+            var expr;
+            if (this.match('.')) {
+                this.nextToken();
+                if (this.lookahead.type === 3 /* Identifier */ && this.context.inFunctionBody && this.lookahead.value === 'target') {
+                    var property = this.parseIdentifierName();
+                    expr = new Node.MetaProperty(id, property);
+                }
+                else {
+                    this.throwUnexpectedToken(this.lookahead);
+                }
+            }
+            else if (this.matchKeyword('import')) {
+                this.throwUnexpectedToken(this.lookahead);
+            }
+            else {
+                var callee = this.isolateCoverGrammar(this.parseLeftHandSideExpression);
+                var args = this.match('(') ? this.parseArguments() : [];
+                expr = new Node.NewExpression(callee, args);
+                this.context.isAssignmentTarget = false;
+                this.context.isBindingElement = false;
+            }
+            return this.finalize(node, expr);
+        };
+        Parser.prototype.parseAsyncArgument = function () {
+            var arg = this.parseAssignmentExpression();
+            this.context.firstCoverInitializedNameError = null;
+            return arg;
+        };
+        Parser.prototype.parseAsyncArguments = function () {
+            this.expect('(');
+            var args = [];
+            if (!this.match(')')) {
+                while (true) {
+                    var expr = this.match('...') ? this.parseSpreadElement() :
+                        this.isolateCoverGrammar(this.parseAsyncArgument);
+                    args.push(expr);
+                    if (this.match(')')) {
+                        break;
+                    }
+                    this.expectCommaSeparator();
+                    if (this.match(')')) {
+                        break;
+                    }
+                }
+            }
+            this.expect(')');
+            return args;
+        };
+        Parser.prototype.matchImportCall = function () {
+            var match = this.matchKeyword('import');
+            if (match) {
+                var state = this.scanner.saveState();
+                this.scanner.scanComments();
+                var next = this.scanner.lex();
+                this.scanner.restoreState(state);
+                match = (next.type === 7 /* Punctuator */) && (next.value === '(');
+            }
+            return match;
+        };
+        Parser.prototype.parseImportCall = function () {
+            var node = this.createNode();
+            this.expectKeyword('import');
+            return this.finalize(node, new Node.Import());
+        };
+        Parser.prototype.parseLeftHandSideExpressionAllowCall = function () {
+            var startToken = this.lookahead;
+            var maybeAsync = this.matchContextualKeyword('async');
+            var previousAllowIn = this.context.allowIn;
+            this.context.allowIn = true;
+            var expr;
+            if (this.matchKeyword('super') && this.context.inFunctionBody) {
+                expr = this.createNode();
+                this.nextToken();
+                expr = this.finalize(expr, new Node.Super());
+                if (!this.match('(') && !this.match('.') && !this.match('[')) {
+                    this.throwUnexpectedToken(this.lookahead);
+                }
+            }
+            else {
+                expr = this.inheritCoverGrammar(this.matchKeyword('new') ? this.parseNewExpression : this.parsePrimaryExpression);
+            }
+            while (true) {
+                if (this.match('.')) {
+                    this.context.isBindingElement = false;
+                    this.context.isAssignmentTarget = true;
+                    this.expect('.');
+                    var property = this.parseIdentifierName();
+                    expr = this.finalize(this.startNode(startToken), new Node.StaticMemberExpression(expr, property));
+                }
+                else if (this.match('(')) {
+                    var asyncArrow = maybeAsync && (startToken.lineNumber === this.lookahead.lineNumber);
+                    this.context.isBindingElement = false;
+                    this.context.isAssignmentTarget = false;
+                    var args = asyncArrow ? this.parseAsyncArguments() : this.parseArguments();
+                    if (expr.type === syntax_1.Syntax.Import && args.length !== 1) {
+                        this.tolerateError(messages_1.Messages.BadImportCallArity);
+                    }
+                    expr = this.finalize(this.startNode(startToken), new Node.CallExpression(expr, args));
+                    if (asyncArrow && this.match('=>')) {
+                        expr = {
+                            type: ArrowParameterPlaceHolder,
+                            params: args,
+                            async: true
+                        };
+                    }
+                }
+                else if (this.match('[')) {
+                    this.context.isBindingElement = false;
+                    this.context.isAssignmentTarget = true;
+                    this.expect('[');
+                    var property = this.isolateCoverGrammar(this.parseExpression);
+                    this.expect(']');
+                    expr = this.finalize(this.startNode(startToken), new Node.ComputedMemberExpression(expr, property));
+                }
+                else if (this.lookahead.type === 10 /* Template */ && this.lookahead.head) {
+                    var quasi = this.parseTemplateLiteral();
+                    expr = this.finalize(this.startNode(startToken), new Node.TaggedTemplateExpression(expr, quasi));
+                }
+                else {
+                    break;
+                }
+            }
+            this.context.allowIn = previousAllowIn;
+            return expr;
+        };
+        Parser.prototype.parseSuper = function () {
+            var node = this.createNode();
+            this.expectKeyword('super');
+            if (!this.match('[') && !this.match('.')) {
+                this.throwUnexpectedToken(this.lookahead);
+            }
+            return this.finalize(node, new Node.Super());
+        };
+        Parser.prototype.parseLeftHandSideExpression = function () {
+            assert_1.assert(this.context.allowIn, 'callee of new expression always allow in keyword.');
+            var node = this.startNode(this.lookahead);
+            var expr = (this.matchKeyword('super') && this.context.inFunctionBody) ? this.parseSuper() :
+                this.inheritCoverGrammar(this.matchKeyword('new') ? this.parseNewExpression : this.parsePrimaryExpression);
+            while (true) {
+                if (this.match('[')) {
+                    this.context.isBindingElement = false;
+                    this.context.isAssignmentTarget = true;
+                    this.expect('[');
+                    var property = this.isolateCoverGrammar(this.parseExpression);
+                    this.expect(']');
+                    expr = this.finalize(node, new Node.ComputedMemberExpression(expr, property));
+                }
+                else if (this.match('.')) {
+                    this.context.isBindingElement = false;
+                    this.context.isAssignmentTarget = true;
+                    this.expect('.');
+                    var property = this.parseIdentifierName();
+                    expr = this.finalize(node, new Node.StaticMemberExpression(expr, property));
+                }
+                else if (this.lookahead.type === 10 /* Template */ && this.lookahead.head) {
+                    var quasi = this.parseTemplateLiteral();
+                    expr = this.finalize(node, new Node.TaggedTemplateExpression(expr, quasi));
+                }
+                else {
+                    break;
+                }
+            }
+            return expr;
+        };
+        // https://tc39.github.io/ecma262/#sec-update-expressions
+        Parser.prototype.parseUpdateExpression = function () {
+            var expr;
+            var startToken = this.lookahead;
+            if (this.match('++') || this.match('--')) {
+                var node = this.startNode(startToken);
+                var token = this.nextToken();
+                expr = this.inheritCoverGrammar(this.parseUnaryExpression);
+                if (this.context.strict && expr.type === syntax_1.Syntax.Identifier && this.scanner.isRestrictedWord(expr.name)) {
+                    this.tolerateError(messages_1.Messages.StrictLHSPrefix);
+                }
+                if (!this.context.isAssignmentTarget) {
+                    this.tolerateError(messages_1.Messages.InvalidLHSInAssignment);
+                }
+                var prefix = true;
+                expr = this.finalize(node, new Node.UpdateExpression(token.value, expr, prefix));
+                this.context.isAssignmentTarget = false;
+                this.context.isBindingElement = false;
+            }
+            else {
+                expr = this.inheritCoverGrammar(this.parseLeftHandSideExpressionAllowCall);
+                if (!this.hasLineTerminator && this.lookahead.type === 7 /* Punctuator */) {
+                    if (this.match('++') || this.match('--')) {
+                        if (this.context.strict && expr.type === syntax_1.Syntax.Identifier && this.scanner.isRestrictedWord(expr.name)) {
+                            this.tolerateError(messages_1.Messages.StrictLHSPostfix);
+                        }
+                        if (!this.context.isAssignmentTarget) {
+                            this.tolerateError(messages_1.Messages.InvalidLHSInAssignment);
+                        }
+                        this.context.isAssignmentTarget = false;
+                        this.context.isBindingElement = false;
+                        var operator = this.nextToken().value;
+                        var prefix = false;
+                        expr = this.finalize(this.startNode(startToken), new Node.UpdateExpression(operator, expr, prefix));
+                    }
+                }
+            }
+            return expr;
+        };
+        // https://tc39.github.io/ecma262/#sec-unary-operators
+        Parser.prototype.parseAwaitExpression = function () {
+            var node = this.createNode();
+            this.nextToken();
+            var argument = this.parseUnaryExpression();
+            return this.finalize(node, new Node.AwaitExpression(argument));
+        };
+        Parser.prototype.parseUnaryExpression = function () {
+            var expr;
+            if (this.match('+') || this.match('-') || this.match('~') || this.match('!') ||
+                this.matchKeyword('delete') || this.matchKeyword('void') || this.matchKeyword('typeof')) {
+                var node = this.startNode(this.lookahead);
+                var token = this.nextToken();
+                expr = this.inheritCoverGrammar(this.parseUnaryExpression);
+                expr = this.finalize(node, new Node.UnaryExpression(token.value, expr));
+                if (this.context.strict && expr.operator === 'delete' && expr.argument.type === syntax_1.Syntax.Identifier) {
+                    this.tolerateError(messages_1.Messages.StrictDelete);
+                }
+                this.context.isAssignmentTarget = false;
+                this.context.isBindingElement = false;
+            }
+            else if (this.context.await && this.matchContextualKeyword('await')) {
+                expr = this.parseAwaitExpression();
+            }
+            else {
+                expr = this.parseUpdateExpression();
+            }
+            return expr;
+        };
+        Parser.prototype.parseExponentiationExpression = function () {
+            var startToken = this.lookahead;
+            var expr = this.inheritCoverGrammar(this.parseUnaryExpression);
+            if (expr.type !== syntax_1.Syntax.UnaryExpression && this.match('**')) {
+                this.nextToken();
+                this.context.isAssignmentTarget = false;
+                this.context.isBindingElement = false;
+                var left = expr;
+                var right = this.isolateCoverGrammar(this.parseExponentiationExpression);
+                expr = this.finalize(this.startNode(startToken), new Node.BinaryExpression('**', left, right));
+            }
+            return expr;
+        };
+        // https://tc39.github.io/ecma262/#sec-exp-operator
+        // https://tc39.github.io/ecma262/#sec-multiplicative-operators
+        // https://tc39.github.io/ecma262/#sec-additive-operators
+        // https://tc39.github.io/ecma262/#sec-bitwise-shift-operators
+        // https://tc39.github.io/ecma262/#sec-relational-operators
+        // https://tc39.github.io/ecma262/#sec-equality-operators
+        // https://tc39.github.io/ecma262/#sec-binary-bitwise-operators
+        // https://tc39.github.io/ecma262/#sec-binary-logical-operators
+        Parser.prototype.binaryPrecedence = function (token) {
+            var op = token.value;
+            var precedence;
+            if (token.type === 7 /* Punctuator */) {
+                precedence = this.operatorPrecedence[op] || 0;
+            }
+            else if (token.type === 4 /* Keyword */) {
+                precedence = (op === 'instanceof' || (this.context.allowIn && op === 'in')) ? 7 : 0;
+            }
+            else {
+                precedence = 0;
+            }
+            return precedence;
+        };
+        Parser.prototype.parseBinaryExpression = function () {
+            var startToken = this.lookahead;
+            var expr = this.inheritCoverGrammar(this.parseExponentiationExpression);
+            var token = this.lookahead;
+            var prec = this.binaryPrecedence(token);
+            if (prec > 0) {
+                this.nextToken();
+                this.context.isAssignmentTarget = false;
+                this.context.isBindingElement = false;
+                var markers = [startToken, this.lookahead];
+                var left = expr;
+                var right = this.isolateCoverGrammar(this.parseExponentiationExpression);
+                var stack = [left, token.value, right];
+                var precedences = [prec];
+                while (true) {
+                    prec = this.binaryPrecedence(this.lookahead);
+                    if (prec <= 0) {
+                        break;
+                    }
+                    // Reduce: make a binary expression from the three topmost entries.
+                    while ((stack.length > 2) && (prec <= precedences[precedences.length - 1])) {
+                        right = stack.pop();
+                        var operator = stack.pop();
+                        precedences.pop();
+                        left = stack.pop();
+                        markers.pop();
+                        var node = this.startNode(markers[markers.length - 1]);
+                        stack.push(this.finalize(node, new Node.BinaryExpression(operator, left, right)));
+                    }
+                    // Shift.
+                    stack.push(this.nextToken().value);
+                    precedences.push(prec);
+                    markers.push(this.lookahead);
+                    stack.push(this.isolateCoverGrammar(this.parseExponentiationExpression));
+                }
+                // Final reduce to clean-up the stack.
+                var i = stack.length - 1;
+                expr = stack[i];
+                markers.pop();
+                while (i > 1) {
+                    var node = this.startNode(markers.pop());
+                    var operator = stack[i - 1];
+                    expr = this.finalize(node, new Node.BinaryExpression(operator, stack[i - 2], expr));
+                    i -= 2;
+                }
+            }
+            return expr;
+        };
+        // https://tc39.github.io/ecma262/#sec-conditional-operator
+        Parser.prototype.parseConditionalExpression = function () {
+            var startToken = this.lookahead;
+            var expr = this.inheritCoverGrammar(this.parseBinaryExpression);
+            if (this.match('?')) {
+                this.nextToken();
+                var previousAllowIn = this.context.allowIn;
+                this.context.allowIn = true;
+                var consequent = this.isolateCoverGrammar(this.parseAssignmentExpression);
+                this.context.allowIn = previousAllowIn;
+                this.expect(':');
+                var alternate = this.isolateCoverGrammar(this.parseAssignmentExpression);
+                expr = this.finalize(this.startNode(startToken), new Node.ConditionalExpression(expr, consequent, alternate));
+                this.context.isAssignmentTarget = false;
+                this.context.isBindingElement = false;
+            }
+            return expr;
+        };
+        // https://tc39.github.io/ecma262/#sec-assignment-operators
+        Parser.prototype.checkPatternParam = function (options, param) {
+            switch (param.type) {
+                case syntax_1.Syntax.Identifier:
+                    this.validateParam(options, param, param.name);
+                    break;
+                case syntax_1.Syntax.RestElement:
+                case syntax_1.Syntax.RestProperty:
+                    this.checkPatternParam(options, param.argument);
+                    break;
+                case syntax_1.Syntax.AssignmentPattern:
+                    this.checkPatternParam(options, param.left);
+                    break;
+                case syntax_1.Syntax.ArrayPattern:
+                    for (var i = 0; i < param.elements.length; i++) {
+                        if (param.elements[i] !== null) {
+                            this.checkPatternParam(options, param.elements[i]);
+                        }
+                    }
+                    break;
+                case syntax_1.Syntax.ObjectPattern:
+                    for (var i = 0; i < param.properties.length; i++) {
+                        var property = param.properties[i];
+                        this.checkPatternParam(options, (property.type === syntax_1.Syntax.RestProperty) ? property : property.value);
+                    }
+                    break;
+                default:
+                    break;
+            }
+            options.simple = options.simple && (param instanceof Node.Identifier);
+        };
+        Parser.prototype.reinterpretAsCoverFormalsList = function (expr) {
+            var params = [expr];
+            var options;
+            var asyncArrow = false;
+            switch (expr.type) {
+                case syntax_1.Syntax.Identifier:
+                    break;
+                case ArrowParameterPlaceHolder:
+                    params = expr.params;
+                    asyncArrow = expr.async;
+                    break;
+                default:
+                    return null;
+            }
+            options = {
+                simple: true,
+                paramSet: {}
+            };
+            for (var i = 0; i < params.length; ++i) {
+                var param = params[i];
+                if (param.type === syntax_1.Syntax.AssignmentPattern) {
+                    if (param.right.type === syntax_1.Syntax.YieldExpression) {
+                        if (param.right.argument) {
+                            this.throwUnexpectedToken(this.lookahead);
+                        }
+                        param.right.type = syntax_1.Syntax.Identifier;
+                        param.right.name = 'yield';
+                        delete param.right.argument;
+                        delete param.right.delegate;
+                    }
+                }
+                else if (asyncArrow && param.type === syntax_1.Syntax.Identifier && param.name === 'await') {
+                    this.throwUnexpectedToken(this.lookahead);
+                }
+                this.checkPatternParam(options, param);
+                params[i] = param;
+            }
+            if (this.context.strict || !this.context.allowYield) {
+                for (var i = 0; i < params.length; ++i) {
+                    var param = params[i];
+                    if (param.type === syntax_1.Syntax.YieldExpression) {
+                        this.throwUnexpectedToken(this.lookahead);
+                    }
+                }
+            }
+            if (options.message === messages_1.Messages.StrictParamDupe) {
+                var token = this.context.strict ? options.stricted : options.firstRestricted;
+                this.throwUnexpectedToken(token, options.message);
+            }
+            return {
+                simple: options.simple,
+                params: params,
+                stricted: options.stricted,
+                firstRestricted: options.firstRestricted,
+                message: options.message
+            };
+        };
+        Parser.prototype.parseAssignmentExpression = function () {
+            var expr;
+            if (!this.context.allowYield && this.matchKeyword('yield')) {
+                expr = this.parseYieldExpression();
+            }
+            else {
+                var startToken = this.lookahead;
+                var token = startToken;
+                expr = this.parseConditionalExpression();
+                if (token.type === 3 /* Identifier */ && (token.lineNumber === this.lookahead.lineNumber) && token.value === 'async' && (this.lookahead.type === 3 /* Identifier */)) {
+                    var arg = this.parsePrimaryExpression();
+                    expr = {
+                        type: ArrowParameterPlaceHolder,
+                        params: [arg],
+                        async: true
+                    };
+                }
+                if (expr.type === ArrowParameterPlaceHolder || this.match('=>')) {
+                    // https://tc39.github.io/ecma262/#sec-arrow-function-definitions
+                    this.context.isAssignmentTarget = false;
+                    this.context.isBindingElement = false;
+                    var isAsync = expr.async;
+                    var list = this.reinterpretAsCoverFormalsList(expr);
+                    if (list) {
+                        if (this.hasLineTerminator) {
+                            this.tolerateUnexpectedToken(this.lookahead);
+                        }
+                        this.context.firstCoverInitializedNameError = null;
+                        var previousStrict = this.context.strict;
+                        var previousAllowStrictDirective = this.context.allowStrictDirective;
+                        this.context.allowStrictDirective = list.simple;
+                        var previousAllowYield = this.context.allowYield;
+                        var previousAwait = this.context.await;
+                        this.context.allowYield = true;
+                        this.context.await = isAsync;
+                        var node = this.startNode(startToken);
+                        this.expect('=>');
+                        var body = this.match('{') ? this.parseFunctionSourceElements() :
+                            this.isolateCoverGrammar(this.parseAssignmentExpression);
+                        var expression = body.type !== syntax_1.Syntax.BlockStatement;
+                        if (this.context.strict && list.firstRestricted) {
+                            this.throwUnexpectedToken(list.firstRestricted, list.message);
+                        }
+                        if (this.context.strict && list.stricted) {
+                            this.tolerateUnexpectedToken(list.stricted, list.message);
+                        }
+                        expr = isAsync ? this.finalize(node, new Node.AsyncArrowFunctionExpression(list.params, body, expression)) :
+                            this.finalize(node, new Node.ArrowFunctionExpression(list.params, body, expression));
+                        this.context.strict = previousStrict;
+                        this.context.allowStrictDirective = previousAllowStrictDirective;
+                        this.context.allowYield = previousAllowYield;
+                        this.context.await = previousAwait;
+                    }
+                }
+                else {
+                    if (this.matchAssign()) {
+                        if (!this.context.isAssignmentTarget) {
+                            this.tolerateError(messages_1.Messages.InvalidLHSInAssignment);
+                        }
+                        if (this.context.strict && expr.type === syntax_1.Syntax.Identifier) {
+                            var id = expr;
+                            if (this.scanner.isRestrictedWord(id.name)) {
+                                this.tolerateUnexpectedToken(token, messages_1.Messages.StrictLHSAssignment);
+                            }
+                            if (this.scanner.isStrictModeReservedWord(id.name)) {
+                                this.tolerateUnexpectedToken(token, messages_1.Messages.StrictReservedWord);
+                            }
+                        }
+                        if (!this.match('=')) {
+                            this.context.isAssignmentTarget = false;
+                            this.context.isBindingElement = false;
+                        }
+                        else {
+                            this.reinterpretExpressionAsPattern(expr);
+                        }
+                        token = this.nextToken();
+                        var operator = token.value;
+                        var right = this.isolateCoverGrammar(this.parseAssignmentExpression);
+                        expr = this.finalize(this.startNode(startToken), new Node.AssignmentExpression(operator, expr, right));
+                        this.context.firstCoverInitializedNameError = null;
+                    }
+                }
+            }
+            return expr;
+        };
+        // https://tc39.github.io/ecma262/#sec-comma-operator
+        Parser.prototype.parseExpression = function () {
+            var startToken = this.lookahead;
+            var expr = this.isolateCoverGrammar(this.parseAssignmentExpression);
+            if (this.match(',')) {
+                var expressions = [];
+                expressions.push(expr);
+                while (this.lookahead.type !== 2 /* EOF */) {
+                    if (!this.match(',')) {
+                        break;
+                    }
+                    this.nextToken();
+                    expressions.push(this.isolateCoverGrammar(this.parseAssignmentExpression));
+                }
+                expr = this.finalize(this.startNode(startToken), new Node.SequenceExpression(expressions));
+            }
+            return expr;
+        };
+        // https://tc39.github.io/ecma262/#sec-block
+        Parser.prototype.parseStatementListItem = function () {
+            var statement;
+            this.context.isAssignmentTarget = true;
+            this.context.isBindingElement = true;
+            if (this.lookahead.type === 4 /* Keyword */) {
+                switch (this.lookahead.value) {
+                    case 'export':
+                        if (!this.context.isModule) {
+                            this.tolerateUnexpectedToken(this.lookahead, messages_1.Messages.IllegalExportDeclaration);
+                        }
+                        statement = this.parseExportDeclaration();
+                        break;
+                    case 'import':
+                        if (this.matchImportCall()) {
+                            statement = this.parseExpressionStatement();
+                        }
+                        else {
+                            if (!this.context.isModule) {
+                                this.tolerateUnexpectedToken(this.lookahead, messages_1.Messages.IllegalImportDeclaration);
+                            }
+                            statement = this.parseImportDeclaration();
+                        }
+                        break;
+                    case 'const':
+                        statement = this.parseLexicalDeclaration({ inFor: false });
+                        break;
+                    case 'function':
+                        statement = this.parseFunctionDeclaration();
+                        break;
+                    case 'class':
+                        statement = this.parseClassDeclaration();
+                        break;
+                    case 'let':
+                        statement = this.isLexicalDeclaration() ? this.parseLexicalDeclaration({ inFor: false }) : this.parseStatement();
+                        break;
+                    default:
+                        statement = this.parseStatement();
+                        break;
+                }
+            }
+            else {
+                statement = this.parseStatement();
+            }
+            return statement;
+        };
+        Parser.prototype.parseBlock = function () {
+            var node = this.createNode();
+            this.expect('{');
+            var block = [];
+            while (true) {
+                if (this.match('}')) {
+                    break;
+                }
+                block.push(this.parseStatementListItem());
+            }
+            this.expect('}');
+            return this.finalize(node, new Node.BlockStatement(block));
+        };
+        // https://tc39.github.io/ecma262/#sec-let-and-const-declarations
+        Parser.prototype.parseLexicalBinding = function (kind, options) {
+            var node = this.createNode();
+            var params = [];
+            var id = this.parsePattern(params, kind);
+            if (this.context.strict && id.type === syntax_1.Syntax.Identifier) {
+                if (this.scanner.isRestrictedWord(id.name)) {
+                    this.tolerateError(messages_1.Messages.StrictVarName);
+                }
+            }
+            var init = null;
+            if (kind === 'const') {
+                if (!this.matchKeyword('in') && !this.matchContextualKeyword('of')) {
+                    if (this.match('=')) {
+                        this.nextToken();
+                        init = this.isolateCoverGrammar(this.parseAssignmentExpression);
+                    }
+                    else {
+                        this.throwError(messages_1.Messages.DeclarationMissingInitializer, 'const');
+                    }
+                }
+            }
+            else if ((!options.inFor && id.type !== syntax_1.Syntax.Identifier) || this.match('=')) {
+                this.expect('=');
+                init = this.isolateCoverGrammar(this.parseAssignmentExpression);
+            }
+            return this.finalize(node, new Node.VariableDeclarator(id, init));
+        };
+        Parser.prototype.parseBindingList = function (kind, options) {
+            var list = [this.parseLexicalBinding(kind, options)];
+            while (this.match(',')) {
+                this.nextToken();
+                list.push(this.parseLexicalBinding(kind, options));
+            }
+            return list;
+        };
+        Parser.prototype.isLexicalDeclaration = function () {
+            var state = this.scanner.saveState();
+            this.scanner.scanComments();
+            var next = this.scanner.lex();
+            this.scanner.restoreState(state);
+            return (next.type === 3 /* Identifier */) ||
+                (next.type === 7 /* Punctuator */ && next.value === '[') ||
+                (next.type === 7 /* Punctuator */ && next.value === '{') ||
+                (next.type === 4 /* Keyword */ && next.value === 'let') ||
+                (next.type === 4 /* Keyword */ && next.value === 'yield');
+        };
+        Parser.prototype.parseLexicalDeclaration = function (options) {
+            var node = this.createNode();
+            var kind = this.nextToken().value;
+            assert_1.assert(kind === 'let' || kind === 'const', 'Lexical declaration must be either let or const');
+            var declarations = this.parseBindingList(kind, options);
+            this.consumeSemicolon();
+            return this.finalize(node, new Node.VariableDeclaration(declarations, kind));
+        };
+        // https://tc39.github.io/ecma262/#sec-destructuring-binding-patterns
+        Parser.prototype.parseBindingRestElement = function (params, kind) {
+            var node = this.createNode();
+            this.expect('...');
+            var arg = this.parsePattern(params, kind);
+            return this.finalize(node, new Node.RestElement(arg));
+        };
+        Parser.prototype.parseArrayPattern = function (params, kind) {
+            var node = this.createNode();
+            this.expect('[');
+            var elements = [];
+            while (!this.match(']')) {
+                if (this.match(',')) {
+                    this.nextToken();
+                    elements.push(null);
+                }
+                else {
+                    if (this.match('...')) {
+                        elements.push(this.parseBindingRestElement(params, kind));
+                        break;
+                    }
+                    else {
+                        elements.push(this.parsePatternWithDefault(params, kind));
+                    }
+                    if (!this.match(']')) {
+                        this.expect(',');
+                    }
+                }
+            }
+            this.expect(']');
+            return this.finalize(node, new Node.ArrayPattern(elements));
+        };
+        Parser.prototype.parsePropertyPattern = function (params, kind) {
+            var node = this.createNode();
+            var computed = false;
+            var shorthand = false;
+            var method = false;
+            var key;
+            var value;
+            if (this.lookahead.type === 3 /* Identifier */) {
+                var keyToken = this.lookahead;
+                key = this.parseVariableIdentifier();
+                var init = this.finalize(node, new Node.Identifier(keyToken.value));
+                if (this.match('=')) {
+                    params.push(keyToken);
+                    shorthand = true;
+                    this.nextToken();
+                    var expr = this.parseAssignmentExpression();
+                    value = this.finalize(this.startNode(keyToken), new Node.AssignmentPattern(init, expr));
+                }
+                else if (!this.match(':')) {
+                    params.push(keyToken);
+                    shorthand = true;
+                    value = init;
+                }
+                else {
+                    this.expect(':');
+                    value = this.parsePatternWithDefault(params, kind);
+                }
+            }
+            else {
+                computed = this.match('[');
+                key = this.parseObjectPropertyKey();
+                this.expect(':');
+                value = this.parsePatternWithDefault(params, kind);
+            }
+            return this.finalize(node, new Node.Property('init', key, computed, value, method, shorthand));
+        };
+        Parser.prototype.parseRestProperty = function (params, kind) {
+            var node = this.createNode();
+            this.expect('...');
+            var arg = this.parsePattern(params);
+            if (this.match('=')) {
+                this.throwError(messages_1.Messages.DefaultRestProperty);
+            }
+            if (!this.match('}')) {
+                this.throwError(messages_1.Messages.PropertyAfterRestProperty);
+            }
+            return this.finalize(node, new Node.RestProperty(arg));
+        };
+        Parser.prototype.parseObjectPattern = function (params, kind) {
+            var node = this.createNode();
+            var properties = [];
+            this.expect('{');
+            while (!this.match('}')) {
+                properties.push(this.match('...') ? this.parseRestProperty(params, kind) : this.parsePropertyPattern(params, kind));
+                if (!this.match('}')) {
+                    this.expect(',');
+                }
+            }
+            this.expect('}');
+            return this.finalize(node, new Node.ObjectPattern(properties));
+        };
+        Parser.prototype.parsePattern = function (params, kind) {
+            var pattern;
+            if (this.match('[')) {
+                pattern = this.parseArrayPattern(params, kind);
+            }
+            else if (this.match('{')) {
+                pattern = this.parseObjectPattern(params, kind);
+            }
+            else {
+                if (this.matchKeyword('let') && (kind === 'const' || kind === 'let')) {
+                    this.tolerateUnexpectedToken(this.lookahead, messages_1.Messages.LetInLexicalBinding);
+                }
+                params.push(this.lookahead);
+                pattern = this.parseVariableIdentifier(kind);
+            }
+            return pattern;
+        };
+        Parser.prototype.parsePatternWithDefault = function (params, kind) {
+            var startToken = this.lookahead;
+            var pattern = this.parsePattern(params, kind);
+            if (this.match('=')) {
+                this.nextToken();
+                var previousAllowYield = this.context.allowYield;
+                this.context.allowYield = true;
+                var right = this.isolateCoverGrammar(this.parseAssignmentExpression);
+                this.context.allowYield = previousAllowYield;
+                pattern = this.finalize(this.startNode(startToken), new Node.AssignmentPattern(pattern, right));
+            }
+            return pattern;
+        };
+        // https://tc39.github.io/ecma262/#sec-variable-statement
+        Parser.prototype.parseVariableIdentifier = function (kind) {
+            var node = this.createNode();
+            var token = this.nextToken();
+            if (token.type === 4 /* Keyword */ && token.value === 'yield') {
+                if (this.context.strict) {
+                    this.tolerateUnexpectedToken(token, messages_1.Messages.StrictReservedWord);
+                }
+                else if (!this.context.allowYield) {
+                    this.throwUnexpectedToken(token);
+                }
+            }
+            else if (token.type !== 3 /* Identifier */) {
+                if (this.context.strict && token.type === 4 /* Keyword */ && this.scanner.isStrictModeReservedWord(token.value)) {
+                    this.tolerateUnexpectedToken(token, messages_1.Messages.StrictReservedWord);
+                }
+                else {
+                    if (this.context.strict || token.value !== 'let' || kind !== 'var') {
+                        this.throwUnexpectedToken(token);
+                    }
+                }
+            }
+            else if ((this.context.isModule || this.context.await) && token.type === 3 /* Identifier */ && token.value === 'await') {
+                this.tolerateUnexpectedToken(token);
+            }
+            return this.finalize(node, new Node.Identifier(token.value));
+        };
+        Parser.prototype.parseVariableDeclaration = function (options) {
+            var node = this.createNode();
+            var params = [];
+            var id = this.parsePattern(params, 'var');
+            if (this.context.strict && id.type === syntax_1.Syntax.Identifier) {
+                if (this.scanner.isRestrictedWord(id.name)) {
+                    this.tolerateError(messages_1.Messages.StrictVarName);
+                }
+            }
+            var init = null;
+            if (this.match('=')) {
+                this.nextToken();
+                init = this.isolateCoverGrammar(this.parseAssignmentExpression);
+            }
+            else if (id.type !== syntax_1.Syntax.Identifier && !options.inFor) {
+                this.expect('=');
+            }
+            return this.finalize(node, new Node.VariableDeclarator(id, init));
+        };
+        Parser.prototype.parseVariableDeclarationList = function (options) {
+            var opt = { inFor: options.inFor };
+            var list = [];
+            list.push(this.parseVariableDeclaration(opt));
+            while (this.match(',')) {
+                this.nextToken();
+                list.push(this.parseVariableDeclaration(opt));
+            }
+            return list;
+        };
+        Parser.prototype.parseVariableStatement = function () {
+            var node = this.createNode();
+            this.expectKeyword('var');
+            var declarations = this.parseVariableDeclarationList({ inFor: false });
+            this.consumeSemicolon();
+            return this.finalize(node, new Node.VariableDeclaration(declarations, 'var'));
+        };
+        // https://tc39.github.io/ecma262/#sec-empty-statement
+        Parser.prototype.parseEmptyStatement = function () {
+            var node = this.createNode();
+            this.expect(';');
+            return this.finalize(node, new Node.EmptyStatement());
+        };
+        // https://tc39.github.io/ecma262/#sec-expression-statement
+        Parser.prototype.parseExpressionStatement = function () {
+            var node = this.createNode();
+            var expr = this.parseExpression();
+            this.consumeSemicolon();
+            return this.finalize(node, new Node.ExpressionStatement(expr));
+        };
+        // https://tc39.github.io/ecma262/#sec-if-statement
+        Parser.prototype.parseIfClause = function () {
+            if (this.context.strict && this.matchKeyword('function')) {
+                this.tolerateError(messages_1.Messages.StrictFunction);
+            }
+            return this.parseStatement();
+        };
+        Parser.prototype.parseIfStatement = function () {
+            var node = this.createNode();
+            var consequent;
+            var alternate = null;
+            this.expectKeyword('if');
+            this.expect('(');
+            var test = this.parseExpression();
+            if (!this.match(')') && this.config.tolerant) {
+                this.tolerateUnexpectedToken(this.nextToken());
+                consequent = this.finalize(this.createNode(), new Node.EmptyStatement());
+            }
+            else {
+                this.expect(')');
+                consequent = this.parseIfClause();
+                if (this.matchKeyword('else')) {
+                    this.nextToken();
+                    alternate = this.parseIfClause();
+                }
+            }
+            return this.finalize(node, new Node.IfStatement(test, consequent, alternate));
+        };
+        // https://tc39.github.io/ecma262/#sec-do-while-statement
+        Parser.prototype.parseDoWhileStatement = function () {
+            var node = this.createNode();
+            this.expectKeyword('do');
+            var previousInIteration = this.context.inIteration;
+            this.context.inIteration = true;
+            var body = this.parseStatement();
+            this.context.inIteration = previousInIteration;
+            this.expectKeyword('while');
+            this.expect('(');
+            var test = this.parseExpression();
+            if (!this.match(')') && this.config.tolerant) {
+                this.tolerateUnexpectedToken(this.nextToken());
+            }
+            else {
+                this.expect(')');
+                if (this.match(';')) {
+                    this.nextToken();
+                }
+            }
+            return this.finalize(node, new Node.DoWhileStatement(body, test));
+        };
+        // https://tc39.github.io/ecma262/#sec-while-statement
+        Parser.prototype.parseWhileStatement = function () {
+            var node = this.createNode();
+            var body;
+            this.expectKeyword('while');
+            this.expect('(');
+            var test = this.parseExpression();
+            if (!this.match(')') && this.config.tolerant) {
+                this.tolerateUnexpectedToken(this.nextToken());
+                body = this.finalize(this.createNode(), new Node.EmptyStatement());
+            }
+            else {
+                this.expect(')');
+                var previousInIteration = this.context.inIteration;
+                this.context.inIteration = true;
+                body = this.parseStatement();
+                this.context.inIteration = previousInIteration;
+            }
+            return this.finalize(node, new Node.WhileStatement(test, body));
+        };
+        // https://tc39.github.io/ecma262/#sec-for-statement
+        // https://tc39.github.io/ecma262/#sec-for-in-and-for-of-statements
+        Parser.prototype.parseForStatement = function () {
+            var init = null;
+            var test = null;
+            var update = null;
+            var forIn = true;
+            var left, right;
+            var node = this.createNode();
+            this.expectKeyword('for');
+            this.expect('(');
+            if (this.match(';')) {
+                this.nextToken();
+            }
+            else {
+                if (this.matchKeyword('var')) {
+                    init = this.createNode();
+                    this.nextToken();
+                    var previousAllowIn = this.context.allowIn;
+                    this.context.allowIn = false;
+                    var declarations = this.parseVariableDeclarationList({ inFor: true });
+                    this.context.allowIn = previousAllowIn;
+                    if (declarations.length === 1 && this.matchKeyword('in')) {
+                        var decl = declarations[0];
+                        if (decl.init && (decl.id.type === syntax_1.Syntax.ArrayPattern || decl.id.type === syntax_1.Syntax.ObjectPattern || this.context.strict)) {
+                            this.tolerateError(messages_1.Messages.ForInOfLoopInitializer, 'for-in');
+                        }
+                        init = this.finalize(init, new Node.VariableDeclaration(declarations, 'var'));
+                        this.nextToken();
+                        left = init;
+                        right = this.parseExpression();
+                        init = null;
+                    }
+                    else if (declarations.length === 1 && declarations[0].init === null && this.matchContextualKeyword('of')) {
+                        init = this.finalize(init, new Node.VariableDeclaration(declarations, 'var'));
+                        this.nextToken();
+                        left = init;
+                        right = this.parseAssignmentExpression();
+                        init = null;
+                        forIn = false;
+                    }
+                    else {
+                        init = this.finalize(init, new Node.VariableDeclaration(declarations, 'var'));
+                        this.expect(';');
+                    }
+                }
+                else if (this.matchKeyword('const') || this.matchKeyword('let')) {
+                    init = this.createNode();
+                    var kind = this.nextToken().value;
+                    if (!this.context.strict && this.lookahead.value === 'in') {
+                        init = this.finalize(init, new Node.Identifier(kind));
+                        this.nextToken();
+                        left = init;
+                        right = this.parseExpression();
+                        init = null;
+                    }
+                    else {
+                        var previousAllowIn = this.context.allowIn;
+                        this.context.allowIn = false;
+                        var declarations = this.parseBindingList(kind, { inFor: true });
+                        this.context.allowIn = previousAllowIn;
+                        if (declarations.length === 1 && declarations[0].init === null && this.matchKeyword('in')) {
+                            init = this.finalize(init, new Node.VariableDeclaration(declarations, kind));
+                            this.nextToken();
+                            left = init;
+                            right = this.parseExpression();
+                            init = null;
+                        }
+                        else if (declarations.length === 1 && declarations[0].init === null && this.matchContextualKeyword('of')) {
+                            init = this.finalize(init, new Node.VariableDeclaration(declarations, kind));
+                            this.nextToken();
+                            left = init;
+                            right = this.parseAssignmentExpression();
+                            init = null;
+                            forIn = false;
+                        }
+                        else {
+                            this.consumeSemicolon();
+                            init = this.finalize(init, new Node.VariableDeclaration(declarations, kind));
+                        }
+                    }
+                }
+                else {
+                    var initStartToken = this.lookahead;
+                    var previousAllowIn = this.context.allowIn;
+                    this.context.allowIn = false;
+                    init = this.inheritCoverGrammar(this.parseAssignmentExpression);
+                    this.context.allowIn = previousAllowIn;
+                    if (this.matchKeyword('in')) {
+                        if (!this.context.isAssignmentTarget || init.type === syntax_1.Syntax.AssignmentExpression) {
+                            this.tolerateError(messages_1.Messages.InvalidLHSInForIn);
+                        }
+                        this.nextToken();
+                        this.reinterpretExpressionAsPattern(init);
+                        left = init;
+                        right = this.parseExpression();
+                        init = null;
+                    }
+                    else if (this.matchContextualKeyword('of')) {
+                        if (!this.context.isAssignmentTarget || init.type === syntax_1.Syntax.AssignmentExpression) {
+                            this.tolerateError(messages_1.Messages.InvalidLHSInForLoop);
+                        }
+                        this.nextToken();
+                        this.reinterpretExpressionAsPattern(init);
+                        left = init;
+                        right = this.parseAssignmentExpression();
+                        init = null;
+                        forIn = false;
+                    }
+                    else {
+                        if (this.match(',')) {
+                            var initSeq = [init];
+                            while (this.match(',')) {
+                                this.nextToken();
+                                initSeq.push(this.isolateCoverGrammar(this.parseAssignmentExpression));
+                            }
+                            init = this.finalize(this.startNode(initStartToken), new Node.SequenceExpression(initSeq));
+                        }
+                        this.expect(';');
+                    }
+                }
+            }
+            if (typeof left === 'undefined') {
+                if (!this.match(';')) {
+                    test = this.parseExpression();
+                }
+                this.expect(';');
+                if (!this.match(')')) {
+                    update = this.parseExpression();
+                }
+            }
+            var body;
+            if (!this.match(')') && this.config.tolerant) {
+                this.tolerateUnexpectedToken(this.nextToken());
+                body = this.finalize(this.createNode(), new Node.EmptyStatement());
+            }
+            else {
+                this.expect(')');
+                var previousInIteration = this.context.inIteration;
+                this.context.inIteration = true;
+                body = this.isolateCoverGrammar(this.parseStatement);
+                this.context.inIteration = previousInIteration;
+            }
+            return (typeof left === 'undefined') ?
+                this.finalize(node, new Node.ForStatement(init, test, update, body)) :
+                forIn ? this.finalize(node, new Node.ForInStatement(left, right, body)) :
+                    this.finalize(node, new Node.ForOfStatement(left, right, body));
+        };
+        // https://tc39.github.io/ecma262/#sec-continue-statement
+        Parser.prototype.parseContinueStatement = function () {
+            var node = this.createNode();
+            this.expectKeyword('continue');
+            var label = null;
+            if (this.lookahead.type === 3 /* Identifier */ && !this.hasLineTerminator) {
+                var id = this.parseVariableIdentifier();
+                label = id;
+                var key = '$' + id.name;
+                if (!Object.prototype.hasOwnProperty.call(this.context.labelSet, key)) {
+                    this.throwError(messages_1.Messages.UnknownLabel, id.name);
+                }
+            }
+            this.consumeSemicolon();
+            if (label === null && !this.context.inIteration) {
+                this.throwError(messages_1.Messages.IllegalContinue);
+            }
+            return this.finalize(node, new Node.ContinueStatement(label));
+        };
+        // https://tc39.github.io/ecma262/#sec-break-statement
+        Parser.prototype.parseBreakStatement = function () {
+            var node = this.createNode();
+            this.expectKeyword('break');
+            var label = null;
+            if (this.lookahead.type === 3 /* Identifier */ && !this.hasLineTerminator) {
+                var id = this.parseVariableIdentifier();
+                var key = '$' + id.name;
+                if (!Object.prototype.hasOwnProperty.call(this.context.labelSet, key)) {
+                    this.throwError(messages_1.Messages.UnknownLabel, id.name);
+                }
+                label = id;
+            }
+            this.consumeSemicolon();
+            if (label === null && !this.context.inIteration && !this.context.inSwitch) {
+                this.throwError(messages_1.Messages.IllegalBreak);
+            }
+            return this.finalize(node, new Node.BreakStatement(label));
+        };
+        // https://tc39.github.io/ecma262/#sec-return-statement
+        Parser.prototype.parseReturnStatement = function () {
+            if (!this.context.inFunctionBody) {
+                this.tolerateError(messages_1.Messages.IllegalReturn);
+            }
+            var node = this.createNode();
+            this.expectKeyword('return');
+            var hasArgument = !this.match(';') && !this.match('}') &&
+                !this.hasLineTerminator && this.lookahead.type !== 2 /* EOF */;
+            var argument = hasArgument ? this.parseExpression() : null;
+            this.consumeSemicolon();
+            return this.finalize(node, new Node.ReturnStatement(argument));
+        };
+        // https://tc39.github.io/ecma262/#sec-with-statement
+        Parser.prototype.parseWithStatement = function () {
+            if (this.context.strict) {
+                this.tolerateError(messages_1.Messages.StrictModeWith);
+            }
+            var node = this.createNode();
+            var body;
+            this.expectKeyword('with');
+            this.expect('(');
+            var object = this.parseExpression();
+            if (!this.match(')') && this.config.tolerant) {
+                this.tolerateUnexpectedToken(this.nextToken());
+                body = this.finalize(this.createNode(), new Node.EmptyStatement());
+            }
+            else {
+                this.expect(')');
+                body = this.parseStatement();
+            }
+            return this.finalize(node, new Node.WithStatement(object, body));
+        };
+        // https://tc39.github.io/ecma262/#sec-switch-statement
+        Parser.prototype.parseSwitchCase = function () {
+            var node = this.createNode();
+            var test;
+            if (this.matchKeyword('default')) {
+                this.nextToken();
+                test = null;
+            }
+            else {
+                this.expectKeyword('case');
+                test = this.parseExpression();
+            }
+            this.expect(':');
+            var consequent = [];
+            while (true) {
+                if (this.match('}') || this.matchKeyword('default') || this.matchKeyword('case')) {
+                    break;
+                }
+                consequent.push(this.parseStatementListItem());
+            }
+            return this.finalize(node, new Node.SwitchCase(test, consequent));
+        };
+        Parser.prototype.parseSwitchStatement = function () {
+            var node = this.createNode();
+            this.expectKeyword('switch');
+            this.expect('(');
+            var discriminant = this.parseExpression();
+            this.expect(')');
+            var previousInSwitch = this.context.inSwitch;
+            this.context.inSwitch = true;
+            var cases = [];
+            var defaultFound = false;
+            this.expect('{');
+            while (true) {
+                if (this.match('}')) {
+                    break;
+                }
+                var clause = this.parseSwitchCase();
+                if (clause.test === null) {
+                    if (defaultFound) {
+                        this.throwError(messages_1.Messages.MultipleDefaultsInSwitch);
+                    }
+                    defaultFound = true;
+                }
+                cases.push(clause);
+            }
+            this.expect('}');
+            this.context.inSwitch = previousInSwitch;
+            return this.finalize(node, new Node.SwitchStatement(discriminant, cases));
+        };
+        // https://tc39.github.io/ecma262/#sec-labelled-statements
+        Parser.prototype.parseLabelledStatement = function () {
+            var node = this.createNode();
+            var expr = this.parseExpression();
+            var statement;
+            if ((expr.type === syntax_1.Syntax.Identifier) && this.match(':')) {
+                this.nextToken();
+                var id = expr;
+                var key = '$' + id.name;
+                if (Object.prototype.hasOwnProperty.call(this.context.labelSet, key)) {
+                    this.throwError(messages_1.Messages.Redeclaration, 'Label', id.name);
+                }
+                this.context.labelSet[key] = true;
+                var body = void 0;
+                if (this.matchKeyword('class')) {
+                    this.tolerateUnexpectedToken(this.lookahead);
+                    body = this.parseClassDeclaration();
+                }
+                else if (this.matchKeyword('function')) {
+                    var token = this.lookahead;
+                    var declaration = this.parseFunctionDeclaration();
+                    if (this.context.strict) {
+                        this.tolerateUnexpectedToken(token, messages_1.Messages.StrictFunction);
+                    }
+                    else if (declaration.generator) {
+                        this.tolerateUnexpectedToken(token, messages_1.Messages.GeneratorInLegacyContext);
+                    }
+                    body = declaration;
+                }
+                else {
+                    body = this.parseStatement();
+                }
+                delete this.context.labelSet[key];
+                statement = new Node.LabeledStatement(id, body);
+            }
+            else {
+                this.consumeSemicolon();
+                statement = new Node.ExpressionStatement(expr);
+            }
+            return this.finalize(node, statement);
+        };
+        // https://tc39.github.io/ecma262/#sec-throw-statement
+        Parser.prototype.parseThrowStatement = function () {
+            var node = this.createNode();
+            this.expectKeyword('throw');
+            if (this.hasLineTerminator) {
+                this.throwError(messages_1.Messages.NewlineAfterThrow);
+            }
+            var argument = this.parseExpression();
+            this.consumeSemicolon();
+            return this.finalize(node, new Node.ThrowStatement(argument));
+        };
+        // https://tc39.github.io/ecma262/#sec-try-statement
+        Parser.prototype.parseCatchClause = function () {
+            var node = this.createNode();
+            this.expectKeyword('catch');
+            this.expect('(');
+            if (this.match(')')) {
+                this.throwUnexpectedToken(this.lookahead);
+            }
+            var params = [];
+            var param = this.parsePattern(params);
+            var paramMap = {};
+            for (var i = 0; i < params.length; i++) {
+                var key = '$' + params[i].value;
+                if (Object.prototype.hasOwnProperty.call(paramMap, key)) {
+                    this.tolerateError(messages_1.Messages.DuplicateBinding, params[i].value);
+                }
+                paramMap[key] = true;
+            }
+            if (this.context.strict && param.type === syntax_1.Syntax.Identifier) {
+                if (this.scanner.isRestrictedWord(param.name)) {
+                    this.tolerateError(messages_1.Messages.StrictCatchVariable);
+                }
+            }
+            this.expect(')');
+            var body = this.parseBlock();
+            return this.finalize(node, new Node.CatchClause(param, body));
+        };
+        Parser.prototype.parseFinallyClause = function () {
+            this.expectKeyword('finally');
+            return this.parseBlock();
+        };
+        Parser.prototype.parseTryStatement = function () {
+            var node = this.createNode();
+            this.expectKeyword('try');
+            var block = this.parseBlock();
+            var handler = this.matchKeyword('catch') ? this.parseCatchClause() : null;
+            var finalizer = this.matchKeyword('finally') ? this.parseFinallyClause() : null;
+            if (!handler && !finalizer) {
+                this.throwError(messages_1.Messages.NoCatchOrFinally);
+            }
+            return this.finalize(node, new Node.TryStatement(block, handler, finalizer));
+        };
+        // https://tc39.github.io/ecma262/#sec-debugger-statement
+        Parser.prototype.parseDebuggerStatement = function () {
+            var node = this.createNode();
+            this.expectKeyword('debugger');
+            this.consumeSemicolon();
+            return this.finalize(node, new Node.DebuggerStatement());
+        };
+        // https://tc39.github.io/ecma262/#sec-ecmascript-language-statements-and-declarations
+        Parser.prototype.parseStatement = function () {
+            var statement;
+            switch (this.lookahead.type) {
+                case 1 /* BooleanLiteral */:
+                case 5 /* NullLiteral */:
+                case 6 /* NumericLiteral */:
+                case 8 /* StringLiteral */:
+                case 10 /* Template */:
+                case 9 /* RegularExpression */:
+                    statement = this.parseExpressionStatement();
+                    break;
+                case 7 /* Punctuator */:
+                    var value = this.lookahead.value;
+                    if (value === '{') {
+                        statement = this.parseBlock();
+                    }
+                    else if (value === '(') {
+                        statement = this.parseExpressionStatement();
+                    }
+                    else if (value === ';') {
+                        statement = this.parseEmptyStatement();
+                    }
+                    else {
+                        statement = this.parseExpressionStatement();
+                    }
+                    break;
+                case 3 /* Identifier */:
+                    statement = this.matchAsyncFunction() ? this.parseFunctionDeclaration() : this.parseLabelledStatement();
+                    break;
+                case 4 /* Keyword */:
+                    switch (this.lookahead.value) {
+                        case 'break':
+                            statement = this.parseBreakStatement();
+                            break;
+                        case 'continue':
+                            statement = this.parseContinueStatement();
+                            break;
+                        case 'debugger':
+                            statement = this.parseDebuggerStatement();
+                            break;
+                        case 'do':
+                            statement = this.parseDoWhileStatement();
+                            break;
+                        case 'for':
+                            statement = this.parseForStatement();
+                            break;
+                        case 'function':
+                            statement = this.parseFunctionDeclaration();
+                            break;
+                        case 'if':
+                            statement = this.parseIfStatement();
+                            break;
+                        case 'return':
+                            statement = this.parseReturnStatement();
+                            break;
+                        case 'switch':
+                            statement = this.parseSwitchStatement();
+                            break;
+                        case 'throw':
+                            statement = this.parseThrowStatement();
+                            break;
+                        case 'try':
+                            statement = this.parseTryStatement();
+                            break;
+                        case 'var':
+                            statement = this.parseVariableStatement();
+                            break;
+                        case 'while':
+                            statement = this.parseWhileStatement();
+                            break;
+                        case 'with':
+                            statement = this.parseWithStatement();
+                            break;
+                        default:
+                            statement = this.parseExpressionStatement();
+                            break;
+                    }
+                    break;
+                default:
+                    statement = this.throwUnexpectedToken(this.lookahead);
+            }
+            return statement;
+        };
+        // https://tc39.github.io/ecma262/#sec-function-definitions
+        Parser.prototype.parseFunctionSourceElements = function () {
+            var node = this.createNode();
+            this.expect('{');
+            var body = this.parseDirectivePrologues();
+            var previousLabelSet = this.context.labelSet;
+            var previousInIteration = this.context.inIteration;
+            var previousInSwitch = this.context.inSwitch;
+            var previousInFunctionBody = this.context.inFunctionBody;
+            this.context.labelSet = {};
+            this.context.inIteration = false;
+            this.context.inSwitch = false;
+            this.context.inFunctionBody = true;
+            while (this.lookahead.type !== 2 /* EOF */) {
+                if (this.match('}')) {
+                    break;
+                }
+                body.push(this.parseStatementListItem());
+            }
+            this.expect('}');
+            this.context.labelSet = previousLabelSet;
+            this.context.inIteration = previousInIteration;
+            this.context.inSwitch = previousInSwitch;
+            this.context.inFunctionBody = previousInFunctionBody;
+            return this.finalize(node, new Node.BlockStatement(body));
+        };
+        Parser.prototype.validateParam = function (options, param, name) {
+            var key = '$' + name;
+            if (this.context.strict) {
+                if (this.scanner.isRestrictedWord(name)) {
+                    options.stricted = param;
+                    options.message = messages_1.Messages.StrictParamName;
+                }
+                if (Object.prototype.hasOwnProperty.call(options.paramSet, key)) {
+                    options.stricted = param;
+                    options.message = messages_1.Messages.StrictParamDupe;
+                }
+            }
+            else if (!options.firstRestricted) {
+                if (this.scanner.isRestrictedWord(name)) {
+                    options.firstRestricted = param;
+                    options.message = messages_1.Messages.StrictParamName;
+                }
+                else if (this.scanner.isStrictModeReservedWord(name)) {
+                    options.firstRestricted = param;
+                    options.message = messages_1.Messages.StrictReservedWord;
+                }
+                else if (Object.prototype.hasOwnProperty.call(options.paramSet, key)) {
+                    options.stricted = param;
+                    options.message = messages_1.Messages.StrictParamDupe;
+                }
+            }
+            /* istanbul ignore next */
+            if (typeof Object.defineProperty === 'function') {
+                Object.defineProperty(options.paramSet, key, { value: true, enumerable: true, writable: true, configurable: true });
+            }
+            else {
+                options.paramSet[key] = true;
+            }
+        };
+        Parser.prototype.parseRestElement = function (params) {
+            var node = this.createNode();
+            this.expect('...');
+            var arg = this.parsePattern(params);
+            if (this.match('=')) {
+                this.throwError(messages_1.Messages.DefaultRestParameter);
+            }
+            if (!this.match(')')) {
+                this.throwError(messages_1.Messages.ParameterAfterRestParameter);
+            }
+            return this.finalize(node, new Node.RestElement(arg));
+        };
+        Parser.prototype.parseFormalParameter = function (options) {
+            var params = [];
+            var param = this.match('...') ? this.parseRestElement(params) : this.parsePatternWithDefault(params);
+            for (var i = 0; i < params.length; i++) {
+                this.validateParam(options, params[i], params[i].value);
+            }
+            options.simple = options.simple && (param instanceof Node.Identifier);
+            options.params.push(param);
+        };
+        Parser.prototype.parseFormalParameters = function (firstRestricted) {
+            var options;
+            options = {
+                simple: true,
+                params: [],
+                firstRestricted: firstRestricted
+            };
+            this.expect('(');
+            if (!this.match(')')) {
+                options.paramSet = {};
+                while (this.lookahead.type !== 2 /* EOF */) {
+                    this.parseFormalParameter(options);
+                    if (this.match(')')) {
+                        break;
+                    }
+                    this.expect(',');
+                    if (this.match(')')) {
+                        break;
+                    }
+                }
+            }
+            this.expect(')');
+            return {
+                simple: options.simple,
+                params: options.params,
+                stricted: options.stricted,
+                firstRestricted: options.firstRestricted,
+                message: options.message
+            };
+        };
+        Parser.prototype.matchAsyncFunction = function () {
+            var match = this.matchContextualKeyword('async');
+            if (match) {
+                var state = this.scanner.saveState();
+                this.scanner.scanComments();
+                var next = this.scanner.lex();
+                this.scanner.restoreState(state);
+                match = (state.lineNumber === next.lineNumber) && (next.type === 4 /* Keyword */) && (next.value === 'function');
+            }
+            return match;
+        };
+        Parser.prototype.parseFunctionDeclaration = function (identifierIsOptional) {
+            var node = this.createNode();
+            var isAsync = this.matchContextualKeyword('async');
+            if (isAsync) {
+                this.nextToken();
+            }
+            this.expectKeyword('function');
+            var isGenerator = isAsync ? false : this.match('*');
+            if (isGenerator) {
+                this.nextToken();
+            }
+            var message;
+            var id = null;
+            var firstRestricted = null;
+            if (!identifierIsOptional || !this.match('(')) {
+                var token = this.lookahead;
+                id = this.parseVariableIdentifier();
+                if (this.context.strict) {
+                    if (this.scanner.isRestrictedWord(token.value)) {
+                        this.tolerateUnexpectedToken(token, messages_1.Messages.StrictFunctionName);
+                    }
+                }
+                else {
+                    if (this.scanner.isRestrictedWord(token.value)) {
+                        firstRestricted = token;
+                        message = messages_1.Messages.StrictFunctionName;
+                    }
+                    else if (this.scanner.isStrictModeReservedWord(token.value)) {
+                        firstRestricted = token;
+                        message = messages_1.Messages.StrictReservedWord;
+                    }
+                }
+            }
+            var previousAllowAwait = this.context.await;
+            var previousAllowYield = this.context.allowYield;
+            this.context.await = isAsync;
+            this.context.allowYield = !isGenerator;
+            var formalParameters = this.parseFormalParameters(firstRestricted);
+            var params = formalParameters.params;
+            var stricted = formalParameters.stricted;
+            firstRestricted = formalParameters.firstRestricted;
+            if (formalParameters.message) {
+                message = formalParameters.message;
+            }
+            var previousStrict = this.context.strict;
+            var previousAllowStrictDirective = this.context.allowStrictDirective;
+            this.context.allowStrictDirective = formalParameters.simple;
+            var body = this.parseFunctionSourceElements();
+            if (this.context.strict && firstRestricted) {
+                this.throwUnexpectedToken(firstRestricted, message);
+            }
+            if (this.context.strict && stricted) {
+                this.tolerateUnexpectedToken(stricted, message);
+            }
+            this.context.strict = previousStrict;
+            this.context.allowStrictDirective = previousAllowStrictDirective;
+            this.context.await = previousAllowAwait;
+            this.context.allowYield = previousAllowYield;
+            return isAsync ? this.finalize(node, new Node.AsyncFunctionDeclaration(id, params, body)) :
+                this.finalize(node, new Node.FunctionDeclaration(id, params, body, isGenerator));
+        };
+        Parser.prototype.parseFunctionExpression = function () {
+            var node = this.createNode();
+            var isAsync = this.matchContextualKeyword('async');
+            if (isAsync) {
+                this.nextToken();
+            }
+            this.expectKeyword('function');
+            var isGenerator = isAsync ? false : this.match('*');
+            if (isGenerator) {
+                this.nextToken();
+            }
+            var message;
+            var id = null;
+            var firstRestricted;
+            var previousAllowAwait = this.context.await;
+            var previousAllowYield = this.context.allowYield;
+            this.context.await = isAsync;
+            this.context.allowYield = !isGenerator;
+            if (!this.match('(')) {
+                var token = this.lookahead;
+                id = (!this.context.strict && !isGenerator && this.matchKeyword('yield')) ? this.parseIdentifierName() : this.parseVariableIdentifier();
+                if (this.context.strict) {
+                    if (this.scanner.isRestrictedWord(token.value)) {
+                        this.tolerateUnexpectedToken(token, messages_1.Messages.StrictFunctionName);
+                    }
+                }
+                else {
+                    if (this.scanner.isRestrictedWord(token.value)) {
+                        firstRestricted = token;
+                        message = messages_1.Messages.StrictFunctionName;
+                    }
+                    else if (this.scanner.isStrictModeReservedWord(token.value)) {
+                        firstRestricted = token;
+                        message = messages_1.Messages.StrictReservedWord;
+                    }
+                }
+            }
+            var formalParameters = this.parseFormalParameters(firstRestricted);
+            var params = formalParameters.params;
+            var stricted = formalParameters.stricted;
+            firstRestricted = formalParameters.firstRestricted;
+            if (formalParameters.message) {
+                message = formalParameters.message;
+            }
+            var previousStrict = this.context.strict;
+            var previousAllowStrictDirective = this.context.allowStrictDirective;
+            this.context.allowStrictDirective = formalParameters.simple;
+            var body = this.parseFunctionSourceElements();
+            if (this.context.strict && firstRestricted) {
+                this.throwUnexpectedToken(firstRestricted, message);
+            }
+            if (this.context.strict && stricted) {
+                this.tolerateUnexpectedToken(stricted, message);
+            }
+            this.context.strict = previousStrict;
+            this.context.allowStrictDirective = previousAllowStrictDirective;
+            this.context.await = previousAllowAwait;
+            this.context.allowYield = previousAllowYield;
+            return isAsync ? this.finalize(node, new Node.AsyncFunctionExpression(id, params, body)) :
+                this.finalize(node, new Node.FunctionExpression(id, params, body, isGenerator));
+        };
+        // https://tc39.github.io/ecma262/#sec-directive-prologues-and-the-use-strict-directive
+        Parser.prototype.parseDirective = function () {
+            var token = this.lookahead;
+            var node = this.createNode();
+            var expr = this.parseExpression();
+            var directive = (expr.type === syntax_1.Syntax.Literal) ? this.getTokenRaw(token).slice(1, -1) : null;
+            this.consumeSemicolon();
+            return this.finalize(node, directive ? new Node.Directive(expr, directive) : new Node.ExpressionStatement(expr));
+        };
+        Parser.prototype.parseDirectivePrologues = function () {
+            var firstRestricted = null;
+            var body = [];
+            while (true) {
+                var token = this.lookahead;
+                if (token.type !== 8 /* StringLiteral */) {
+                    break;
+                }
+                var statement = this.parseDirective();
+                body.push(statement);
+                var directive = statement.directive;
+                if (typeof directive !== 'string') {
+                    break;
+                }
+                if (directive === 'use strict') {
+                    this.context.strict = true;
+                    if (firstRestricted) {
+                        this.tolerateUnexpectedToken(firstRestricted, messages_1.Messages.StrictOctalLiteral);
+                    }
+                    if (!this.context.allowStrictDirective) {
+                        this.tolerateUnexpectedToken(token, messages_1.Messages.IllegalLanguageModeDirective);
+                    }
+                }
+                else {
+                    if (!firstRestricted && token.octal) {
+                        firstRestricted = token;
+                    }
+                }
+            }
+            return body;
+        };
+        // https://tc39.github.io/ecma262/#sec-method-definitions
+        Parser.prototype.qualifiedPropertyName = function (token) {
+            switch (token.type) {
+                case 3 /* Identifier */:
+                case 8 /* StringLiteral */:
+                case 1 /* BooleanLiteral */:
+                case 5 /* NullLiteral */:
+                case 6 /* NumericLiteral */:
+                case 4 /* Keyword */:
+                    return true;
+                case 7 /* Punctuator */:
+                    return token.value === '[';
+                default:
+                    break;
+            }
+            return false;
+        };
+        Parser.prototype.parseGetterMethod = function () {
+            var node = this.createNode();
+            var isGenerator = false;
+            var previousAllowYield = this.context.allowYield;
+            this.context.allowYield = false;
+            var formalParameters = this.parseFormalParameters();
+            if (formalParameters.params.length > 0) {
+                this.tolerateError(messages_1.Messages.BadGetterArity);
+            }
+            var method = this.parsePropertyMethod(formalParameters);
+            this.context.allowYield = previousAllowYield;
+            return this.finalize(node, new Node.FunctionExpression(null, formalParameters.params, method, isGenerator));
+        };
+        Parser.prototype.parseSetterMethod = function () {
+            var node = this.createNode();
+            var isGenerator = false;
+            var previousAllowYield = this.context.allowYield;
+            this.context.allowYield = false;
+            var formalParameters = this.parseFormalParameters();
+            if (formalParameters.params.length !== 1) {
+                this.tolerateError(messages_1.Messages.BadSetterArity);
+            }
+            else if (formalParameters.params[0] instanceof Node.RestElement) {
+                this.tolerateError(messages_1.Messages.BadSetterRestParameter);
+            }
+            var method = this.parsePropertyMethod(formalParameters);
+            this.context.allowYield = previousAllowYield;
+            return this.finalize(node, new Node.FunctionExpression(null, formalParameters.params, method, isGenerator));
+        };
+        Parser.prototype.parseGeneratorMethod = function () {
+            var node = this.createNode();
+            var isGenerator = true;
+            var previousAllowYield = this.context.allowYield;
+            this.context.allowYield = true;
+            var params = this.parseFormalParameters();
+            this.context.allowYield = false;
+            var method = this.parsePropertyMethod(params);
+            this.context.allowYield = previousAllowYield;
+            return this.finalize(node, new Node.FunctionExpression(null, params.params, method, isGenerator));
+        };
+        // https://tc39.github.io/ecma262/#sec-generator-function-definitions
+        Parser.prototype.isStartOfExpression = function () {
+            var start = true;
+            var value = this.lookahead.value;
+            switch (this.lookahead.type) {
+                case 7 /* Punctuator */:
+                    start = (value === '[') || (value === '(') || (value === '{') ||
+                        (value === '+') || (value === '-') ||
+                        (value === '!') || (value === '~') ||
+                        (value === '++') || (value === '--') ||
+                        (value === '/') || (value === '/='); // regular expression literal
+                    break;
+                case 4 /* Keyword */:
+                    start = (value === 'class') || (value === 'delete') ||
+                        (value === 'function') || (value === 'let') || (value === 'new') ||
+                        (value === 'super') || (value === 'this') || (value === 'typeof') ||
+                        (value === 'void') || (value === 'yield');
+                    break;
+                default:
+                    break;
+            }
+            return start;
+        };
+        Parser.prototype.parseYieldExpression = function () {
+            var node = this.createNode();
+            this.expectKeyword('yield');
+            var argument = null;
+            var delegate = false;
+            if (!this.hasLineTerminator) {
+                var previousAllowYield = this.context.allowYield;
+                this.context.allowYield = false;
+                delegate = this.match('*');
+                if (delegate) {
+                    this.nextToken();
+                    argument = this.parseAssignmentExpression();
+                }
+                else if (this.isStartOfExpression()) {
+                    argument = this.parseAssignmentExpression();
+                }
+                this.context.allowYield = previousAllowYield;
+            }
+            return this.finalize(node, new Node.YieldExpression(argument, delegate));
+        };
+        // https://tc39.github.io/ecma262/#sec-class-definitions
+        Parser.prototype.parseClassElement = function (hasConstructor) {
+            var token = this.lookahead;
+            var node = this.createNode();
+            var kind = '';
+            var key = null;
+            var value = null;
+            var computed = false;
+            var method = false;
+            var isStatic = false;
+            var isAsync = false;
+            if (this.match('*')) {
+                this.nextToken();
+            }
+            else {
+                computed = this.match('[');
+                key = this.parseObjectPropertyKey();
+                var id = key;
+                if (id.name === 'static' && (this.qualifiedPropertyName(this.lookahead) || this.match('*'))) {
+                    token = this.lookahead;
+                    isStatic = true;
+                    computed = this.match('[');
+                    if (this.match('*')) {
+                        this.nextToken();
+                    }
+                    else {
+                        key = this.parseObjectPropertyKey();
+                    }
+                }
+                if ((token.type === 3 /* Identifier */) && !this.hasLineTerminator && (token.value === 'async')) {
+                    var punctuator = this.lookahead.value;
+                    if (punctuator !== ':' && punctuator !== '(' && punctuator !== '*') {
+                        isAsync = true;
+                        token = this.lookahead;
+                        key = this.parseObjectPropertyKey();
+                        if (token.type === 3 /* Identifier */) {
+                            if (token.value === 'get' || token.value === 'set') {
+                                this.tolerateUnexpectedToken(token);
+                            }
+                            else if (token.value === 'constructor') {
+                                this.tolerateUnexpectedToken(token, messages_1.Messages.ConstructorIsAsync);
+                            }
+                        }
+                    }
+                }
+            }
+            var lookaheadPropertyKey = this.qualifiedPropertyName(this.lookahead);
+            if (token.type === 3 /* Identifier */) {
+                if (token.value === 'get' && lookaheadPropertyKey) {
+                    kind = 'get';
+                    computed = this.match('[');
+                    key = this.parseObjectPropertyKey();
+                    this.context.allowYield = false;
+                    value = this.parseGetterMethod();
+                }
+                else if (token.value === 'set' && lookaheadPropertyKey) {
+                    kind = 'set';
+                    computed = this.match('[');
+                    key = this.parseObjectPropertyKey();
+                    value = this.parseSetterMethod();
+                }
+            }
+            else if (token.type === 7 /* Punctuator */ && token.value === '*' && lookaheadPropertyKey) {
+                kind = 'init';
+                computed = this.match('[');
+                key = this.parseObjectPropertyKey();
+                value = this.parseGeneratorMethod();
+                method = true;
+            }
+            if (!kind && key && this.match('(')) {
+                kind = 'init';
+                value = isAsync ? this.parsePropertyMethodAsyncFunction() : this.parsePropertyMethodFunction();
+                method = true;
+            }
+            if (!kind) {
+                this.throwUnexpectedToken(this.lookahead);
+            }
+            if (kind === 'init') {
+                kind = 'method';
+            }
+            if (!computed) {
+                if (isStatic && this.isPropertyKey(key, 'prototype')) {
+                    this.throwUnexpectedToken(token, messages_1.Messages.StaticPrototype);
+                }
+                if (!isStatic && this.isPropertyKey(key, 'constructor')) {
+                    if (kind !== 'method' || !method || (value && value.generator)) {
+                        this.throwUnexpectedToken(token, messages_1.Messages.ConstructorSpecialMethod);
+                    }
+                    if (hasConstructor.value) {
+                        this.throwUnexpectedToken(token, messages_1.Messages.DuplicateConstructor);
+                    }
+                    else {
+                        hasConstructor.value = true;
+                    }
+                    kind = 'constructor';
+                }
+            }
+            return this.finalize(node, new Node.MethodDefinition(key, computed, value, kind, isStatic));
+        };
+        Parser.prototype.parseClassElementList = function () {
+            var body = [];
+            var hasConstructor = { value: false };
+            this.expect('{');
+            while (!this.match('}')) {
+                if (this.match(';')) {
+                    this.nextToken();
+                }
+                else {
+                    body.push(this.parseClassElement(hasConstructor));
+                }
+            }
+            this.expect('}');
+            return body;
+        };
+        Parser.prototype.parseClassBody = function () {
+            var node = this.createNode();
+            var elementList = this.parseClassElementList();
+            return this.finalize(node, new Node.ClassBody(elementList));
+        };
+        Parser.prototype.parseClassDeclaration = function (identifierIsOptional) {
+            var node = this.createNode();
+            var previousStrict = this.context.strict;
+            this.context.strict = true;
+            this.expectKeyword('class');
+            var id = (identifierIsOptional && (this.lookahead.type !== 3 /* Identifier */)) ? null : this.parseVariableIdentifier();
+            var superClass = null;
+            if (this.matchKeyword('extends')) {
+                this.nextToken();
+                superClass = this.isolateCoverGrammar(this.parseLeftHandSideExpressionAllowCall);
+            }
+            var classBody = this.parseClassBody();
+            this.context.strict = previousStrict;
+            return this.finalize(node, new Node.ClassDeclaration(id, superClass, classBody));
+        };
+        Parser.prototype.parseClassExpression = function () {
+            var node = this.createNode();
+            var previousStrict = this.context.strict;
+            this.context.strict = true;
+            this.expectKeyword('class');
+            var id = (this.lookahead.type === 3 /* Identifier */) ? this.parseVariableIdentifier() : null;
+            var superClass = null;
+            if (this.matchKeyword('extends')) {
+                this.nextToken();
+                superClass = this.isolateCoverGrammar(this.parseLeftHandSideExpressionAllowCall);
+            }
+            var classBody = this.parseClassBody();
+            this.context.strict = previousStrict;
+            return this.finalize(node, new Node.ClassExpression(id, superClass, classBody));
+        };
+        // https://tc39.github.io/ecma262/#sec-scripts
+        // https://tc39.github.io/ecma262/#sec-modules
+        Parser.prototype.parseModule = function () {
+            this.context.strict = true;
+            this.context.isModule = true;
+            var node = this.createNode();
+            var body = this.parseDirectivePrologues();
+            while (this.lookahead.type !== 2 /* EOF */) {
+                body.push(this.parseStatementListItem());
+            }
+            return this.finalize(node, new Node.Module(body));
+        };
+        Parser.prototype.parseScript = function () {
+            var node = this.createNode();
+            var body = this.parseDirectivePrologues();
+            while (this.lookahead.type !== 2 /* EOF */) {
+                body.push(this.parseStatementListItem());
+            }
+            return this.finalize(node, new Node.Script(body));
+        };
+        // https://tc39.github.io/ecma262/#sec-imports
+        Parser.prototype.parseModuleSpecifier = function () {
+            var node = this.createNode();
+            if (this.lookahead.type !== 8 /* StringLiteral */) {
+                this.throwError(messages_1.Messages.InvalidModuleSpecifier);
+            }
+            var token = this.nextToken();
+            var raw = this.getTokenRaw(token);
+            return this.finalize(node, new Node.Literal(token.value, raw));
+        };
+        // import {<foo as bar>} ...;
+        Parser.prototype.parseImportSpecifier = function () {
+            var node = this.createNode();
+            var imported;
+            var local;
+            if (this.lookahead.type === 3 /* Identifier */) {
+                imported = this.parseVariableIdentifier();
+                local = imported;
+                if (this.matchContextualKeyword('as')) {
+                    this.nextToken();
+                    local = this.parseVariableIdentifier();
+                }
+            }
+            else {
+                imported = this.parseIdentifierName();
+                local = imported;
+                if (this.matchContextualKeyword('as')) {
+                    this.nextToken();
+                    local = this.parseVariableIdentifier();
+                }
+                else {
+                    this.throwUnexpectedToken(this.nextToken());
+                }
+            }
+            return this.finalize(node, new Node.ImportSpecifier(local, imported));
+        };
+        // {foo, bar as bas}
+        Parser.prototype.parseNamedImports = function () {
+            this.expect('{');
+            var specifiers = [];
+            while (!this.match('}')) {
+                specifiers.push(this.parseImportSpecifier());
+                if (!this.match('}')) {
+                    this.expect(',');
+                }
+            }
+            this.expect('}');
+            return specifiers;
+        };
+        // import <foo> ...;
+        Parser.prototype.parseImportDefaultSpecifier = function () {
+            var node = this.createNode();
+            var local = this.parseIdentifierName();
+            return this.finalize(node, new Node.ImportDefaultSpecifier(local));
+        };
+        // import <* as foo> ...;
+        Parser.prototype.parseImportNamespaceSpecifier = function () {
+            var node = this.createNode();
+            this.expect('*');
+            if (!this.matchContextualKeyword('as')) {
+                this.throwError(messages_1.Messages.NoAsAfterImportNamespace);
+            }
+            this.nextToken();
+            var local = this.parseIdentifierName();
+            return this.finalize(node, new Node.ImportNamespaceSpecifier(local));
+        };
+        Parser.prototype.parseImportDeclaration = function () {
+            if (this.context.inFunctionBody) {
+                this.throwError(messages_1.Messages.IllegalImportDeclaration);
+            }
+            var node = this.createNode();
+            this.expectKeyword('import');
+            var src;
+            var specifiers = [];
+            if (this.lookahead.type === 8 /* StringLiteral */) {
+                // import 'foo';
+                src = this.parseModuleSpecifier();
+            }
+            else {
+                if (this.match('{')) {
+                    // import {bar}
+                    specifiers = specifiers.concat(this.parseNamedImports());
+                }
+                else if (this.match('*')) {
+                    // import * as foo
+                    specifiers.push(this.parseImportNamespaceSpecifier());
+                }
+                else if (this.isIdentifierName(this.lookahead) && !this.matchKeyword('default')) {
+                    // import foo
+                    specifiers.push(this.parseImportDefaultSpecifier());
+                    if (this.match(',')) {
+                        this.nextToken();
+                        if (this.match('*')) {
+                            // import foo, * as foo
+                            specifiers.push(this.parseImportNamespaceSpecifier());
+                        }
+                        else if (this.match('{')) {
+                            // import foo, {bar}
+                            specifiers = specifiers.concat(this.parseNamedImports());
+                        }
+                        else {
+                            this.throwUnexpectedToken(this.lookahead);
+                        }
+                    }
+                }
+                else {
+                    this.throwUnexpectedToken(this.nextToken());
+                }
+                if (!this.matchContextualKeyword('from')) {
+                    var message = this.lookahead.value ? messages_1.Messages.UnexpectedToken : messages_1.Messages.MissingFromClause;
+                    this.throwError(message, this.lookahead.value);
+                }
+                this.nextToken();
+                src = this.parseModuleSpecifier();
+            }
+            this.consumeSemicolon();
+            return this.finalize(node, new Node.ImportDeclaration(specifiers, src));
+        };
+        // https://tc39.github.io/ecma262/#sec-exports
+        Parser.prototype.parseExportSpecifier = function () {
+            var node = this.createNode();
+            var local = this.parseIdentifierName();
+            var exported = local;
+            if (this.matchContextualKeyword('as')) {
+                this.nextToken();
+                exported = this.parseIdentifierName();
+            }
+            return this.finalize(node, new Node.ExportSpecifier(local, exported));
+        };
+        Parser.prototype.parseExportDeclaration = function () {
+            if (this.context.inFunctionBody) {
+                this.throwError(messages_1.Messages.IllegalExportDeclaration);
+            }
+            var node = this.createNode();
+            this.expectKeyword('export');
+            var exportDeclaration;
+            if (this.matchKeyword('default')) {
+                // export default ...
+                this.nextToken();
+                if (this.matchKeyword('function')) {
+                    // export default function foo () {}
+                    // export default function () {}
+                    var declaration = this.parseFunctionDeclaration(true);
+                    exportDeclaration = this.finalize(node, new Node.ExportDefaultDeclaration(declaration));
+                }
+                else if (this.matchKeyword('class')) {
+                    // export default class foo {}
+                    var declaration = this.parseClassDeclaration(true);
+                    exportDeclaration = this.finalize(node, new Node.ExportDefaultDeclaration(declaration));
+                }
+                else if (this.matchContextualKeyword('async')) {
+                    // export default async function f () {}
+                    // export default async function () {}
+                    // export default async x => x
+                    var declaration = this.matchAsyncFunction() ? this.parseFunctionDeclaration(true) : this.parseAssignmentExpression();
+                    exportDeclaration = this.finalize(node, new Node.ExportDefaultDeclaration(declaration));
+                }
+                else {
+                    if (this.matchContextualKeyword('from')) {
+                        this.throwError(messages_1.Messages.UnexpectedToken, this.lookahead.value);
+                    }
+                    // export default {};
+                    // export default [];
+                    // export default (1 + 2);
+                    var declaration = this.match('{') ? this.parseObjectInitializer() :
+                        this.match('[') ? this.parseArrayInitializer() : this.parseAssignmentExpression();
+                    this.consumeSemicolon();
+                    exportDeclaration = this.finalize(node, new Node.ExportDefaultDeclaration(declaration));
+                }
+            }
+            else if (this.match('*')) {
+                // export * from 'foo';
+                this.nextToken();
+                if (!this.matchContextualKeyword('from')) {
+                    var message = this.lookahead.value ? messages_1.Messages.UnexpectedToken : messages_1.Messages.MissingFromClause;
+                    this.throwError(message, this.lookahead.value);
+                }
+                this.nextToken();
+                var src = this.parseModuleSpecifier();
+                this.consumeSemicolon();
+                exportDeclaration = this.finalize(node, new Node.ExportAllDeclaration(src));
+            }
+            else if (this.lookahead.type === 4 /* Keyword */) {
+                // export var f = 1;
+                var declaration = void 0;
+                switch (this.lookahead.value) {
+                    case 'let':
+                    case 'const':
+                        declaration = this.parseLexicalDeclaration({ inFor: false });
+                        break;
+                    case 'var':
+                    case 'class':
+                    case 'function':
+                        declaration = this.parseStatementListItem();
+                        break;
+                    default:
+                        this.throwUnexpectedToken(this.lookahead);
+                }
+                exportDeclaration = this.finalize(node, new Node.ExportNamedDeclaration(declaration, [], null));
+            }
+            else if (this.matchAsyncFunction()) {
+                var declaration = this.parseFunctionDeclaration();
+                exportDeclaration = this.finalize(node, new Node.ExportNamedDeclaration(declaration, [], null));
+            }
+            else {
+                var specifiers = [];
+                var source = null;
+                var isExportFromIdentifier = false;
+                this.expect('{');
+                while (!this.match('}')) {
+                    isExportFromIdentifier = isExportFromIdentifier || this.matchKeyword('default');
+                    specifiers.push(this.parseExportSpecifier());
+                    if (!this.match('}')) {
+                        this.expect(',');
+                    }
+                }
+                this.expect('}');
+                if (this.matchContextualKeyword('from')) {
+                    // export {default} from 'foo';
+                    // export {foo} from 'foo';
+                    this.nextToken();
+                    source = this.parseModuleSpecifier();
+                    this.consumeSemicolon();
+                }
+                else if (isExportFromIdentifier) {
+                    // export {default}; // missing fromClause
+                    var message = this.lookahead.value ? messages_1.Messages.UnexpectedToken : messages_1.Messages.MissingFromClause;
+                    this.throwError(message, this.lookahead.value);
+                }
+                else {
+                    // export {foo};
+                    this.consumeSemicolon();
+                }
+                exportDeclaration = this.finalize(node, new Node.ExportNamedDeclaration(null, specifiers, source));
+            }
+            return exportDeclaration;
+        };
+        return Parser;
+    }());
+    exports.Parser = Parser;
+
+
+/***/ },
+/* 9 */
+/***/ function(module, exports) {
+
+    // 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.
+    "use strict";
+    function assert(condition, message) {
+        /* istanbul ignore if */
+        if (!condition) {
+            throw new Error('ASSERT: ' + message);
+        }
+    }
+    exports.assert = assert;
+
+
+/***/ },
+/* 10 */
+/***/ function(module, exports) {
+
+    /* tslint:disable:max-classes-per-file */
+    "use strict";
+    var ErrorHandler = (function () {
+        function ErrorHandler() {
+            this.errors = [];
+            this.tolerant = false;
+        }
+        ErrorHandler.prototype.recordError = function (error) {
+            this.errors.push(error);
+        };
+        ErrorHandler.prototype.tolerate = function (error) {
+            if (this.tolerant) {
+                this.recordError(error);
+            }
+            else {
+                throw error;
+            }
+        };
+        ErrorHandler.prototype.constructError = function (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 });
+                }
+            }
+            /* istanbul ignore next */
+            return error;
+        };
+        ErrorHandler.prototype.createError = function (index, line, col, description) {
+            var msg = 'Line ' + line + ': ' + description;
+            var error = this.constructError(msg, col);
+            error.index = index;
+            error.lineNumber = line;
+            error.description = description;
+            return error;
+        };
+        ErrorHandler.prototype.throwError = function (index, line, col, description) {
+            throw this.createError(index, line, col, description);
+        };
+        ErrorHandler.prototype.tolerateError = function (index, line, col, description) {
+            var error = this.createError(index, line, col, description);
+            if (this.tolerant) {
+                this.recordError(error);
+            }
+            else {
+                throw error;
+            }
+        };
+        return ErrorHandler;
+    }());
+    exports.ErrorHandler = ErrorHandler;
+
+
+/***/ },
+/* 11 */
+/***/ function(module, exports) {
+
+    "use strict";
+    // Error messages should be identical to V8.
+    exports.Messages = {
+        BadImportCallArity: 'Unexpected token',
+        BadGetterArity: 'Getter must not have any formal parameters',
+        BadSetterArity: 'Setter must have exactly one formal parameter',
+        BadSetterRestParameter: 'Setter function argument must not be a rest parameter',
+        ConstructorIsAsync: 'Class constructor may not be an async method',
+        ConstructorSpecialMethod: 'Class constructor may not be an accessor',
+        DeclarationMissingInitializer: 'Missing initializer in %0 declaration',
+        DefaultRestParameter: 'Unexpected token =',
+        DefaultRestProperty: 'Unexpected token =',
+        DuplicateBinding: 'Duplicate binding %0',
+        DuplicateConstructor: 'A class may only have one constructor',
+        DuplicateProtoProperty: 'Duplicate __proto__ fields are not allowed in object literals',
+        ForInOfLoopInitializer: '%0 loop variable declaration may not have an initializer',
+        GeneratorInLegacyContext: 'Generator declarations are not allowed in legacy contexts',
+        IllegalBreak: 'Illegal break statement',
+        IllegalContinue: 'Illegal continue statement',
+        IllegalExportDeclaration: 'Unexpected token',
+        IllegalImportDeclaration: 'Unexpected token',
+        IllegalLanguageModeDirective: 'Illegal \'use strict\' directive in function with non-simple parameter list',
+        IllegalReturn: 'Illegal return statement',
+        InvalidEscapedReservedWord: 'Keyword must not contain escaped characters',
+        InvalidHexEscapeSequence: 'Invalid hexadecimal escape sequence',
+        InvalidLHSInAssignment: 'Invalid left-hand side in assignment',
+        InvalidLHSInForIn: 'Invalid left-hand side in for-in',
+        InvalidLHSInForLoop: 'Invalid left-hand side in for-loop',
+        InvalidModuleSpecifier: 'Unexpected token',
+        InvalidRegExp: 'Invalid regular expression',
+        LetInLexicalBinding: 'let is disallowed as a lexically bound name',
+        MissingFromClause: 'Unexpected token',
+        MultipleDefaultsInSwitch: 'More than one default clause in switch statement',
+        NewlineAfterThrow: 'Illegal newline after throw',
+        NoAsAfterImportNamespace: 'Unexpected token',
+        NoCatchOrFinally: 'Missing catch or finally after try',
+        ParameterAfterRestParameter: 'Rest parameter must be last formal parameter',
+        PropertyAfterRestProperty: 'Unexpected token',
+        Redeclaration: '%0 \'%1\' has already been declared',
+        StaticPrototype: 'Classes may not have static property named prototype',
+        StrictCatchVariable: 'Catch variable may not be eval or arguments in strict mode',
+        StrictDelete: 'Delete of an unqualified identifier in strict mode.',
+        StrictFunction: 'In strict mode code, functions can only be declared at top level or inside a block',
+        StrictFunctionName: 'Function name may not be eval or arguments 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',
+        StrictModeWith: 'Strict mode code may not include a with statement',
+        StrictOctalLiteral: 'Octal literals are not allowed in strict mode.',
+        StrictParamDupe: 'Strict mode function may not have duplicate parameter names',
+        StrictParamName: 'Parameter name eval or arguments is not allowed in strict mode',
+        StrictReservedWord: 'Use of future reserved word in strict mode',
+        StrictVarName: 'Variable name may not be eval or arguments in strict mode',
+        TemplateOctalLiteral: 'Octal literals are not allowed in template strings.',
+        UnexpectedEOS: 'Unexpected end of input',
+        UnexpectedIdentifier: 'Unexpected identifier',
+        UnexpectedNumber: 'Unexpected number',
+        UnexpectedReserved: 'Unexpected reserved word',
+        UnexpectedString: 'Unexpected string',
+        UnexpectedTemplate: 'Unexpected quasi %0',
+        UnexpectedToken: 'Unexpected token %0',
+        UnexpectedTokenIllegal: 'Unexpected token ILLEGAL',
+        UnknownLabel: 'Undefined label \'%0\'',
+        UnterminatedRegExp: 'Invalid regular expression: missing /'
+    };
+
+
+/***/ },
+/* 12 */
+/***/ function(module, exports, __webpack_require__) {
+
+    "use strict";
+    var assert_1 = __webpack_require__(9);
+    var character_1 = __webpack_require__(4);
+    var messages_1 = __webpack_require__(11);
+    function hexValue(ch) {
+        return '0123456789abcdef'.indexOf(ch.toLowerCase());
+    }
+    function octalValue(ch) {
+        return '01234567'.indexOf(ch);
+    }
+    var Scanner = (function () {
+        function Scanner(code, handler) {
+            this.source = code;
+            this.errorHandler = handler;
+            this.trackComment = false;
+            this.length = code.length;
+            this.index = 0;
+            this.lineNumber = (code.length > 0) ? 1 : 0;
+            this.lineStart = 0;
+            this.curlyStack = [];
+        }
+        Scanner.prototype.saveState = function () {
+            return {
+                index: this.index,
+                lineNumber: this.lineNumber,
+                lineStart: this.lineStart
+            };
+        };
+        Scanner.prototype.restoreState = function (state) {
+            this.index = state.index;
+            this.lineNumber = state.lineNumber;
+            this.lineStart = state.lineStart;
+        };
+        Scanner.prototype.eof = function () {
+            return this.index >= this.length;
+        };
+        Scanner.prototype.throwUnexpectedToken = function (message) {
+            if (message === void 0) { message = messages_1.Messages.UnexpectedTokenIllegal; }
+            return this.errorHandler.throwError(this.index, this.lineNumber, this.index - this.lineStart + 1, message);
+        };
+        Scanner.prototype.tolerateUnexpectedToken = function (message) {
+            if (message === void 0) { message = messages_1.Messages.UnexpectedTokenIllegal; }
+            this.errorHandler.tolerateError(this.index, this.lineNumber, this.index - this.lineStart + 1, message);
+        };
+        // https://tc39.github.io/ecma262/#sec-comments
+        Scanner.prototype.skipSingleLineComment = function (offset) {
+            var comments = [];
+            var start, loc;
+            if (this.trackComment) {
+                comments = [];
+                start = this.index - offset;
+                loc = {
+                    start: {
+                        line: this.lineNumber,
+                        column: this.index - this.lineStart - offset
+                    },
+                    end: {}
+                };
+            }
+            while (!this.eof()) {
+                var ch = this.source.charCodeAt(this.index);
+                ++this.index;
+                if (character_1.Character.isLineTerminator(ch)) {
+                    if (this.trackComment) {
+                        loc.end = {
+                            line: this.lineNumber,
+                            column: this.index - this.lineStart - 1
+                        };
+                        var entry = {
+                            multiLine: false,
+                            slice: [start + offset, this.index - 1],
+                            range: [start, this.index - 1],
+                            loc: loc
+                        };
+                        comments.push(entry);
+                    }
+                    if (ch === 13 && this.source.charCodeAt(this.index) === 10) {
+                        ++this.index;
+                    }
+                    ++this.lineNumber;
+                    this.lineStart = this.index;
+                    return comments;
+                }
+            }
+            if (this.trackComment) {
+                loc.end = {
+                    line: this.lineNumber,
+                    column: this.index - this.lineStart
+                };
+                var entry = {
+                    multiLine: false,
+                    slice: [start + offset, this.index],
+                    range: [start, this.index],
+                    loc: loc
+                };
+                comments.push(entry);
+            }
+            return comments;
+        };
+        Scanner.prototype.skipMultiLineComment = function () {
+            var comments = [];
+            var start, loc;
+            if (this.trackComment) {
+                comments = [];
+                start = this.index - 2;
+                loc = {
+                    start: {
+                        line: this.lineNumber,
+                        column: this.index - this.lineStart - 2
+                    },
+                    end: {}
+                };
+            }
+            while (!this.eof()) {
+                var ch = this.source.charCodeAt(this.index);
+                if (character_1.Character.isLineTerminator(ch)) {
+                    if (ch === 0x0D && this.source.charCodeAt(this.index + 1) === 0x0A) {
+                        ++this.index;
+                    }
+                    ++this.lineNumber;
+                    ++this.index;
+                    this.lineStart = this.index;
+                }
+                else if (ch === 0x2A) {
+                    // Block comment ends with '*/'.
+                    if (this.source.charCodeAt(this.index + 1) === 0x2F) {
+                        this.index += 2;
+                        if (this.trackComment) {
+                            loc.end = {
+                                line: this.lineNumber,
+                                column: this.index - this.lineStart
+                            };
+                            var entry = {
+                                multiLine: true,
+                                slice: [start + 2, this.index - 2],
+                                range: [start, this.index],
+                                loc: loc
+                            };
+                            comments.push(entry);
+                        }
+                        return comments;
+                    }
+                    ++this.index;
+                }
+                else {
+                    ++this.index;
+                }
+            }
+            // Ran off the end of the file - the whole thing is a comment
+            if (this.trackComment) {
+                loc.end = {
+                    line: this.lineNumber,
+                    column: this.index - this.lineStart
+                };
+                var entry = {
+                    multiLine: true,
+                    slice: [start + 2, this.index],
+                    range: [start, this.index],
+                    loc: loc
+                };
+                comments.push(entry);
+            }
+            this.tolerateUnexpectedToken();
+            return comments;
+        };
+        Scanner.prototype.scanComments = function () {
+            var comments;
+            if (this.trackComment) {
+                comments = [];
+            }
+            var start = (this.index === 0);
+            while (!this.eof()) {
+                var ch = this.source.charCodeAt(this.index);
+                if (character_1.Character.isWhiteSpace(ch)) {
+                    ++this.index;
+                }
+                else if (character_1.Character.isLineTerminator(ch)) {
+                    ++this.index;
+                    if (ch === 0x0D && this.source.charCodeAt(this.index) === 0x0A) {
+                        ++this.index;
+                    }
+                    ++this.lineNumber;
+                    this.lineStart = this.index;
+                    start = true;
+                }
+                else if (ch === 0x2F) {
+                    ch = this.source.charCodeAt(this.index + 1);
+                    if (ch === 0x2F) {
+                        this.index += 2;
+                        var comment = this.skipSingleLineComment(2);
+                        if (this.trackComment) {
+                            comments = comments.concat(comment);
+                        }
+                        start = true;
+                    }
+                    else if (ch === 0x2A) {
+                        this.index += 2;
+                        var comment = this.skipMultiLineComment();
+                        if (this.trackComment) {
+                            comments = comments.concat(comment);
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+                else if (start && ch === 0x2D) {
+                    // U+003E is '>'
+                    if ((this.source.charCodeAt(this.index + 1) === 0x2D) && (this.source.charCodeAt(this.index + 2) === 0x3E)) {
+                        // '-->' is a single-line comment
+                        this.index += 3;
+                        var comment = this.skipSingleLineComment(3);
+                        if (this.trackComment) {
+                            comments = comments.concat(comment);
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+                else if (ch === 0x3C) {
+                    if (this.source.slice(this.index + 1, this.index + 4) === '!--') {
+                        this.index += 4; // `<!--`
+                        var comment = this.skipSingleLineComment(4);
+                        if (this.trackComment) {
+                            comments = comments.concat(comment);
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+            return comments;
+        };
+        // https://tc39.github.io/ecma262/#sec-future-reserved-words
+        Scanner.prototype.isFutureReservedWord = function (id) {
+            switch (id) {
+                case 'enum':
+                case 'export':
+                case 'import':
+                case 'super':
+                    return true;
+                default:
+                    return false;
+            }
+        };
+        Scanner.prototype.isStrictModeReservedWord = function (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;
+            }
+        };
+        Scanner.prototype.isRestrictedWord = function (id) {
+            return id === 'eval' || id === 'arguments';
+        };
+        // https://tc39.github.io/ecma262/#sec-keywords
+        Scanner.prototype.isKeyword = function (id) {
+            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;
+            }
+        };
+        Scanner.prototype.codePointAt = function (i) {
+            var cp = this.source.charCodeAt(i);
+            if (cp >= 0xD800 && cp <= 0xDBFF) {
+                var second = this.source.charCodeAt(i + 1);
+                if (second >= 0xDC00 && second <= 0xDFFF) {
+                    var first = cp;
+                    cp = (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+                }
+            }
+            return cp;
+        };
+        Scanner.prototype.scanHexEscape = function (prefix) {
+            var len = (prefix === 'u') ? 4 : 2;
+            var code = 0;
+            for (var i = 0; i < len; ++i) {
+                if (!this.eof() && character_1.Character.isHexDigit(this.source.charCodeAt(this.index))) {
+                    code = code * 16 + hexValue(this.source[this.index++]);
+                }
+                else {
+                    return null;
+                }
+            }
+            return String.fromCharCode(code);
+        };
+        Scanner.prototype.scanUnicodeCodePointEscape = function () {
+            var ch = this.source[this.index];
+            var code = 0;
+            // At least, one hex digit is required.
+            if (ch === '}') {
+                this.throwUnexpectedToken();
+            }
+            while (!this.eof()) {
+                ch = this.source[this.index++];
+                if (!character_1.Character.isHexDigit(ch.charCodeAt(0))) {
+                    break;
+                }
+                code = code * 16 + hexValue(ch);
+            }
+            if (code > 0x10FFFF || ch !== '}') {
+                this.throwUnexpectedToken();
+            }
+            return character_1.Character.fromCodePoint(code);
+        };
+        Scanner.prototype.getIdentifier = function () {
+            var start = this.index++;
+            while (!this.eof()) {
+                var ch = this.source.charCodeAt(this.index);
+                if (ch === 0x5C) {
+                    // Blackslash (U+005C) marks Unicode escape sequence.
+                    this.index = start;
+                    return this.getComplexIdentifier();
+                }
+                else if (ch >= 0xD800 && ch < 0xDFFF) {
+                    // Need to handle surrogate pairs.
+                    this.index = start;
+                    return this.getComplexIdentifier();
+                }
+                if (character_1.Character.isIdentifierPart(ch)) {
+                    ++this.index;
+                }
+                else {
+                    break;
+                }
+            }
+            return this.source.slice(start, this.index);
+        };
+        Scanner.prototype.getComplexIdentifier = function () {
+            var cp = this.codePointAt(this.index);
+            var id = character_1.Character.fromCodePoint(cp);
+            this.index += id.length;
+            // '\u' (U+005C, U+0075) denotes an escaped character.
+            var ch;
+            if (cp === 0x5C) {
+                if (this.source.charCodeAt(this.index) !== 0x75) {
+                    this.throwUnexpectedToken();
+                }
+                ++this.index;
+                if (this.source[this.index] === '{') {
+                    ++this.index;
+                    ch = this.scanUnicodeCodePointEscape();
+                }
+                else {
+                    ch = this.scanHexEscape('u');
+                    if (ch === null || ch === '\\' || !character_1.Character.isIdentifierStart(ch.charCodeAt(0))) {
+                        this.throwUnexpectedToken();
+                    }
+                }
+                id = ch;
+            }
+            while (!this.eof()) {
+                cp = this.codePointAt(this.index);
+                if (!character_1.Character.isIdentifierPart(cp)) {
+                    break;
+                }
+                ch = character_1.Character.fromCodePoint(cp);
+                id += ch;
+                this.index += ch.length;
+                // '\u' (U+005C, U+0075) denotes an escaped character.
+                if (cp === 0x5C) {
+                    id = id.substr(0, id.length - 1);
+                    if (this.source.charCodeAt(this.index) !== 0x75) {
+                        this.throwUnexpectedToken();
+                    }
+                    ++this.index;
+                    if (this.source[this.index] === '{') {
+                        ++this.index;
+                        ch = this.scanUnicodeCodePointEscape();
+                    }
+                    else {
+                        ch = this.scanHexEscape('u');
+                        if (ch === null || ch === '\\' || !character_1.Character.isIdentifierPart(ch.charCodeAt(0))) {
+                            this.throwUnexpectedToken();
+                        }
+                    }
+                    id += ch;
+                }
+            }
+            return id;
+        };
+        Scanner.prototype.octalToDecimal = function (ch) {
+            // \0 is not octal escape sequence
+            var octal = (ch !== '0');
+            var code = octalValue(ch);
+            if (!this.eof() && character_1.Character.isOctalDigit(this.source.charCodeAt(this.index))) {
+                octal = true;
+                code = code * 8 + octalValue(this.source[this.index++]);
+                // 3 digits are only allowed when string starts
+                // with 0, 1, 2, 3
+                if ('0123'.indexOf(ch) >= 0 && !this.eof() && character_1.Character.isOctalDigit(this.source.charCodeAt(this.index))) {
+                    code = code * 8 + octalValue(this.source[this.index++]);
+                }
+            }
+            return {
+                code: code,
+                octal: octal
+            };
+        };
+        // https://tc39.github.io/ecma262/#sec-names-and-keywords
+        Scanner.prototype.scanIdentifier = function () {
+            var type;
+            var start = this.index;
+            // Backslash (U+005C) starts an escaped character.
+            var id = (this.source.charCodeAt(start) === 0x5C) ? this.getComplexIdentifier() : this.getIdentifier();
+            // There is no keyword or literal with only one character.
+            // Thus, it must be an identifier.
+            if (id.length === 1) {
+                type = 3 /* Identifier */;
+            }
+            else if (this.isKeyword(id)) {
+                type = 4 /* Keyword */;
+            }
+            else if (id === 'null') {
+                type = 5 /* NullLiteral */;
+            }
+            else if (id === 'true' || id === 'false') {
+                type = 1 /* BooleanLiteral */;
+            }
+            else {
+                type = 3 /* Identifier */;
+            }
+            if (type !== 3 /* Identifier */ && (start + id.length !== this.index)) {
+                var restore = this.index;
+                this.index = start;
+                this.tolerateUnexpectedToken(messages_1.Messages.InvalidEscapedReservedWord);
+                this.index = restore;
+            }
+            return {
+                type: type,
+                value: id,
+                lineNumber: this.lineNumber,
+                lineStart: this.lineStart,
+                start: start,
+                end: this.index
+            };
+        };
+        // https://tc39.github.io/ecma262/#sec-punctuators
+        Scanner.prototype.scanPunctuator = function () {
+            var start = this.index;
+            // Check for most common single-character punctuators.
+            var str = this.source[this.index];
+            switch (str) {
+                case '(':
+                case '{':
+                    if (str === '{') {
+                        this.curlyStack.push('{');
+                    }
+                    ++this.index;
+                    break;
+                case '.':
+                    ++this.index;
+                    if (this.source[this.index] === '.' && this.source[this.index + 1] === '.') {
+                        // Spread operator: ...
+                        this.index += 2;
+                        str = '...';
+                    }
+                    break;
+                case '}':
+                    ++this.index;
+                    this.curlyStack.pop();
+                    break;
+                case ')':
+                case ';':
+                case ',':
+                case '[':
+                case ']':
+                case ':':
+                case '?':
+                case '~':
+                    ++this.index;
+                    break;
+                default:
+                    // 4-character punctuator.
+                    str = this.source.substr(this.index, 4);
+                    if (str === '>>>=') {
+                        this.index += 4;
+                    }
+                    else {
+                        // 3-character punctuators.
+                        str = str.substr(0, 3);
+                        if (str === '===' || str === '!==' || str === '>>>' ||
+                            str === '<<=' || str === '>>=' || str === '**=') {
+                            this.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 === '=>' || str === '**') {
+                                this.index += 2;
+                            }
+                            else {
+                                // 1-character punctuators.
+                                str = this.source[this.index];
+                                if ('<>=!+-*%&|^/'.indexOf(str) >= 0) {
+                                    ++this.index;
+                                }
+                            }
+                        }
+                    }
+            }
+            if (this.index === start) {
+                this.throwUnexpectedToken();
+            }
+            return {
+                type: 7 /* Punctuator */,
+                value: str,
+                lineNumber: this.lineNumber,
+                lineStart: this.lineStart,
+                start: start,
+                end: this.index
+            };
+        };
+        // https://tc39.github.io/ecma262/#sec-literals-numeric-literals
+        Scanner.prototype.scanHexLiteral = function (start) {
+            var num = '';
+            while (!this.eof()) {
+                if (!character_1.Character.isHexDigit(this.source.charCodeAt(this.index))) {
+                    break;
+                }
+                num += this.source[this.index++];
+            }
+            if (num.length === 0) {
+                this.throwUnexpectedToken();
+            }
+            if (character_1.Character.isIdentifierStart(this.source.charCodeAt(this.index))) {
+                this.throwUnexpectedToken();
+            }
+            return {
+                type: 6 /* NumericLiteral */,
+                value: parseInt('0x' + num, 16),
+                lineNumber: this.lineNumber,
+                lineStart: this.lineStart,
+                start: start,
+                end: this.index
+            };
+        };
+        Scanner.prototype.scanBinaryLiteral = function (start) {
+            var num = '';
+            var ch;
+            while (!this.eof()) {
+                ch = this.source[this.index];
+                if (ch !== '0' && ch !== '1') {
+                    break;
+                }
+                num += this.source[this.index++];
+            }
+            if (num.length === 0) {
+                // only 0b or 0B
+                this.throwUnexpectedToken();
+            }
+            if (!this.eof()) {
+                ch = this.source.charCodeAt(this.index);
+                /* istanbul ignore else */
+                if (character_1.Character.isIdentifierStart(ch) || character_1.Character.isDecimalDigit(ch)) {
+                    this.throwUnexpectedToken();
+                }
+            }
+            return {
+                type: 6 /* NumericLiteral */,
+                value: parseInt(num, 2),
+                lineNumber: this.lineNumber,
+                lineStart: this.lineStart,
+                start: start,
+                end: this.index
+            };
+        };
+        Scanner.prototype.scanOctalLiteral = function (prefix, start) {
+            var num = '';
+            var octal = false;
+            if (character_1.Character.isOctalDigit(prefix.charCodeAt(0))) {
+                octal = true;
+                num = '0' + this.source[this.index++];
+            }
+            else {
+                ++this.index;
+            }
+            while (!this.eof()) {
+                if (!character_1.Character.isOctalDigit(this.source.charCodeAt(this.index))) {
+                    break;
+                }
+                num += this.source[this.index++];
+            }
+            if (!octal && num.length === 0) {
+                // only 0o or 0O
+                this.throwUnexpectedToken();
+            }
+            if (character_1.Character.isIdentifierStart(this.source.charCodeAt(this.index)) || character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
+                this.throwUnexpectedToken();
+            }
+            return {
+                type: 6 /* NumericLiteral */,
+                value: parseInt(num, 8),
+                octal: octal,
+                lineNumber: this.lineNumber,
+                lineStart: this.lineStart,
+                start: start,
+                end: this.index
+            };
+        };
+        Scanner.prototype.isImplicitOctalLiteral = function () {
+            // Implicit octal, unless there is a non-octal digit.
+            // (Annex B.1.1 on Numeric Literals)
+            for (var i = this.index + 1; i < this.length; ++i) {
+                var ch = this.source[i];
+                if (ch === '8' || ch === '9') {
+                    return false;
+                }
+                if (!character_1.Character.isOctalDigit(ch.charCodeAt(0))) {
+                    return true;
+                }
+            }
+            return true;
+        };
+        Scanner.prototype.scanNumericLiteral = function () {
+            var start = this.index;
+            var ch = this.source[start];
+            assert_1.assert(character_1.Character.isDecimalDigit(ch.charCodeAt(0)) || (ch === '.'), 'Numeric literal must start with a decimal digit or a decimal point');
+            var num = '';
+            if (ch !== '.') {
+                num = this.source[this.index++];
+                ch = this.source[this.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 (num === '0') {
+                    if (ch === 'x' || ch === 'X') {
+                        ++this.index;
+                        return this.scanHexLiteral(start);
+                    }
+                    if (ch === 'b' || ch === 'B') {
+                        ++this.index;
+                        return this.scanBinaryLiteral(start);
+                    }
+                    if (ch === 'o' || ch === 'O') {
+                        return this.scanOctalLiteral(ch, start);
+                    }
+                    if (ch && character_1.Character.isOctalDigit(ch.charCodeAt(0))) {
+                        if (this.isImplicitOctalLiteral()) {
+                            return this.scanOctalLiteral(ch, start);
+                        }
+                    }
+                }
+                while (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
+                    num += this.source[this.index++];
+                }
+                ch = this.source[this.index];
+            }
+            if (ch === '.') {
+                num += this.source[this.index++];
+                while (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
+                    num += this.source[this.index++];
+                }
+                ch = this.source[this.index];
+            }
+            if (ch === 'e' || ch === 'E') {
+                num += this.source[this.index++];
+                ch = this.source[this.index];
+                if (ch === '+' || ch === '-') {
+                    num += this.source[this.index++];
+                }
+                if (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
+                    while (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
+                        num += this.source[this.index++];
+                    }
+                }
+                else {
+                    this.throwUnexpectedToken();
+                }
+            }
+            if (character_1.Character.isIdentifierStart(this.source.charCodeAt(this.index))) {
+                this.throwUnexpectedToken();
+            }
+            return {
+                type: 6 /* NumericLiteral */,
+                value: parseFloat(num),
+                lineNumber: this.lineNumber,
+                lineStart: this.lineStart,
+                start: start,
+                end: this.index
+            };
+        };
+        // https://tc39.github.io/ecma262/#sec-literals-string-literals
+        Scanner.prototype.scanStringLiteral = function () {
+            var start = this.index;
+            var quote = this.source[start];
+            assert_1.assert((quote === '\'' || quote === '"'), 'String literal must starts with a quote');
+            ++this.index;
+            var octal = false;
+            var str = '';
+            while (!this.eof()) {
+                var ch = this.source[this.index++];
+                if (ch === quote) {
+                    quote = '';
+                    break;
+                }
+                else if (ch === '\\') {
+                    ch = this.source[this.index++];
+                    if (!ch || !character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
+                        switch (ch) {
+                            case 'u':
+                                if (this.source[this.index] === '{') {
+                                    ++this.index;
+                                    str += this.scanUnicodeCodePointEscape();
+                                }
+                                else {
+                                    var unescaped_1 = this.scanHexEscape(ch);
+                                    if (unescaped_1 === null) {
+                                        this.throwUnexpectedToken();
+                                    }
+                                    str += unescaped_1;
+                                }
+                                break;
+                            case 'x':
+                                var unescaped = this.scanHexEscape(ch);
+                                if (unescaped === null) {
+                                    this.throwUnexpectedToken(messages_1.Messages.InvalidHexEscapeSequence);
+                                }
+                                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;
+                                this.tolerateUnexpectedToken();
+                                break;
+                            default:
+                                if (ch && character_1.Character.isOctalDigit(ch.charCodeAt(0))) {
+                                    var octToDec = this.octalToDecimal(ch);
+                                    octal = octToDec.octal || octal;
+                                    str += String.fromCharCode(octToDec.code);
+                                }
+                                else {
+                                    str += ch;
+                                }
+                                break;
+                        }
+                    }
+                    else {
+                        ++this.lineNumber;
+                        if (ch === '\r' && this.source[this.index] === '\n') {
+                            ++this.index;
+                        }
+                        this.lineStart = this.index;
+                    }
+                }
+                else if (character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
+                    break;
+                }
+                else {
+                    str += ch;
+                }
+            }
+            if (quote !== '') {
+                this.index = start;
+                this.throwUnexpectedToken();
+            }
+            return {
+                type: 8 /* StringLiteral */,
+                value: str,
+                octal: octal,
+                lineNumber: this.lineNumber,
+                lineStart: this.lineStart,
+                start: start,
+                end: this.index
+            };
+        };
+        // https://tc39.github.io/ecma262/#sec-template-literal-lexical-components
+        Scanner.prototype.scanTemplate = function () {
+            var cooked = '';
+            var terminated = false;
+            var start = this.index;
+            var head = (this.source[start] === '`');
+            var tail = false;
+            var rawOffset = 2;
+            ++this.index;
+            while (!this.eof()) {
+                var ch = this.source[this.index++];
+                if (ch === '`') {
+                    rawOffset = 1;
+                    tail = true;
+                    terminated = true;
+                    break;
+                }
+                else if (ch === '$') {
+                    if (this.source[this.index] === '{') {
+                        this.curlyStack.push('${');
+                        ++this.index;
+                        terminated = true;
+                        break;
+                    }
+                    cooked += ch;
+                }
+                else if (ch === '\\') {
+                    ch = this.source[this.index++];
+                    if (!character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
+                        switch (ch) {
+                            case 'n':
+                                cooked += '\n';
+                                break;
+                            case 'r':
+                                cooked += '\r';
+                                break;
+                            case 't':
+                                cooked += '\t';
+                                break;
+                            case 'u':
+                                if (this.source[this.index] === '{') {
+                                    ++this.index;
+                                    cooked += this.scanUnicodeCodePointEscape();
+                                }
+                                else {
+                                    var restore = this.index;
+                                    var unescaped_2 = this.scanHexEscape(ch);
+                                    if (unescaped_2 !== null) {
+                                        cooked += unescaped_2;
+                                    }
+                                    else {
+                                        this.index = restore;
+                                        cooked += ch;
+                                    }
+                                }
+                                break;
+                            case 'x':
+                                var unescaped = this.scanHexEscape(ch);
+                                if (unescaped === null) {
+                                    this.throwUnexpectedToken(messages_1.Messages.InvalidHexEscapeSequence);
+                                }
+                                cooked += unescaped;
+                                break;
+                            case 'b':
+                                cooked += '\b';
+                                break;
+                            case 'f':
+                                cooked += '\f';
+                                break;
+                            case 'v':
+                                cooked += '\v';
+                                break;
+                            default:
+                                if (ch === '0') {
+                                    if (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
+                                        // Illegal: \01 \02 and so on
+                                        this.throwUnexpectedToken(messages_1.Messages.TemplateOctalLiteral);
+                                    }
+                                    cooked += '\0';
+                                }
+                                else if (character_1.Character.isOctalDigit(ch.charCodeAt(0))) {
+                                    // Illegal: \1 \2
+                                    this.throwUnexpectedToken(messages_1.Messages.TemplateOctalLiteral);
+                                }
+                                else {
+                                    cooked += ch;
+                                }
+                                break;
+                        }
+                    }
+                    else {
+                        ++this.lineNumber;
+                        if (ch === '\r' && this.source[this.index] === '\n') {
+                            ++this.index;
+                        }
+                        this.lineStart = this.index;
+                    }
+                }
+                else if (character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
+                    ++this.lineNumber;
+                    if (ch === '\r' && this.source[this.index] === '\n') {
+                        ++this.index;
+                    }
+                    this.lineStart = this.index;
+                    cooked += '\n';
+                }
+                else {
+                    cooked += ch;
+                }
+            }
+            if (!terminated) {
+                this.throwUnexpectedToken();
+            }
+            if (!head) {
+                this.curlyStack.pop();
+            }
+            return {
+                type: 10 /* Template */,
+                value: this.source.slice(start + 1, this.index - rawOffset),
+                cooked: cooked,
+                head: head,
+                tail: tail,
+                lineNumber: this.lineNumber,
+                lineStart: this.lineStart,
+                start: start,
+                end: this.index
+            };
+        };
+        // https://tc39.github.io/ecma262/#sec-literals-regular-expression-literals
+        Scanner.prototype.testRegExp = function (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';
+            var tmp = pattern;
+            var self = this;
+            if (flags.indexOf('u') >= 0) {
+                tmp = tmp
+                    .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) {
+                        self.throwUnexpectedToken(messages_1.Messages.InvalidRegExp);
+                    }
+                    if (codePoint <= 0xFFFF) {
+                        return String.fromCharCode(codePoint);
+                    }
+                    return astralSubstitute;
+                })
+                    .replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, astralSubstitute);
+            }
+            // First, detect invalid regular expressions.
+            try {
+                RegExp(tmp);
+            }
+            catch (e) {
+                this.throwUnexpectedToken(messages_1.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) {
+                /* istanbul ignore next */
+                return null;
+            }
+        };
+        Scanner.prototype.scanRegExpBody = function () {
+            var ch = this.source[this.index];
+            assert_1.assert(ch === '/', 'Regular expression literal must start with a slash');
+            var str = this.source[this.index++];
+            var classMarker = false;
+            var terminated = false;
+            while (!this.eof()) {
+                ch = this.source[this.index++];
+                str += ch;
+                if (ch === '\\') {
+                    ch = this.source[this.index++];
+                    // https://tc39.github.io/ecma262/#sec-literals-regular-expression-literals
+                    if (character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
+                        this.throwUnexpectedToken(messages_1.Messages.UnterminatedRegExp);
+                    }
+                    str += ch;
+                }
+                else if (character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
+                    this.throwUnexpectedToken(messages_1.Messages.UnterminatedRegExp);
+                }
+                else if (classMarker) {
+                    if (ch === ']') {
+                        classMarker = false;
+                    }
+                }
+                else {
+                    if (ch === '/') {
+                        terminated = true;
+                        break;
+                    }
+                    else if (ch === '[') {
+                        classMarker = true;
+                    }
+                }
+            }
+            if (!terminated) {
+                this.throwUnexpectedToken(messages_1.Messages.UnterminatedRegExp);
+            }
+            // Exclude leading and trailing slash.
+            return str.substr(1, str.length - 2);
+        };
+        Scanner.prototype.scanRegExpFlags = function () {
+            var str = '';
+            var flags = '';
+            while (!this.eof()) {
+                var ch = this.source[this.index];
+                if (!character_1.Character.isIdentifierPart(ch.charCodeAt(0))) {
+                    break;
+                }
+                ++this.index;
+                if (ch === '\\' && !this.eof()) {
+                    ch = this.source[this.index];
+                    if (ch === 'u') {
+                        ++this.index;
+                        var restore = this.index;
+                        var char = this.scanHexEscape('u');
+                        if (char !== null) {
+                            flags += char;
+                            for (str += '\\u'; restore < this.index; ++restore) {
+                                str += this.source[restore];
+                            }
+                        }
+                        else {
+                            this.index = restore;
+                            flags += 'u';
+                            str += '\\u';
+                        }
+                        this.tolerateUnexpectedToken();
+                    }
+                    else {
+                        str += '\\';
+                        this.tolerateUnexpectedToken();
+                    }
+                }
+                else {
+                    flags += ch;
+                    str += ch;
+                }
+            }
+            return flags;
+        };
+        Scanner.prototype.scanRegExp = function () {
+            var start = this.index;
+            var pattern = this.scanRegExpBody();
+            var flags = this.scanRegExpFlags();
+            var value = this.testRegExp(pattern, flags);
+            return {
+                type: 9 /* RegularExpression */,
+                value: '',
+                pattern: pattern,
+                flags: flags,
+                regex: value,
+                lineNumber: this.lineNumber,
+                lineStart: this.lineStart,
+                start: start,
+                end: this.index
+            };
+        };
+        Scanner.prototype.lex = function () {
+            if (this.eof()) {
+                return {
+                    type: 2 /* EOF */,
+                    value: '',
+                    lineNumber: this.lineNumber,
+                    lineStart: this.lineStart,
+                    start: this.index,
+                    end: this.index
+                };
+            }
+            var cp = this.source.charCodeAt(this.index);
+            if (character_1.Character.isIdentifierStart(cp)) {
+                return this.scanIdentifier();
+            }
+            // Very common: ( and ) and ;
+            if (cp === 0x28 || cp === 0x29 || cp === 0x3B) {
+                return this.scanPunctuator();
+            }
+            // String literal starts with single quote (U+0027) or double quote (U+0022).
+            if (cp === 0x27 || cp === 0x22) {
+                return this.scanStringLiteral();
+            }
+            // Dot (.) U+002E can also start a floating-point number, hence the need
+            // to check the next character.
+            if (cp === 0x2E) {
+                if (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index + 1))) {
+                    return this.scanNumericLiteral();
+                }
+                return this.scanPunctuator();
+            }
+            if (character_1.Character.isDecimalDigit(cp)) {
+                return this.scanNumericLiteral();
+            }
+            // Template literals start with ` (U+0060) for template head
+            // or } (U+007D) for template middle or template tail.
+            if (cp === 0x60 || (cp === 0x7D && this.curlyStack[this.curlyStack.length - 1] === '${')) {
+                return this.scanTemplate();
+            }
+            // Possible identifier start in a surrogate pair.
+            if (cp >= 0xD800 && cp < 0xDFFF) {
+                if (character_1.Character.isIdentifierStart(this.codePointAt(this.index))) {
+                    return this.scanIdentifier();
+                }
+            }
+            return this.scanPunctuator();
+        };
+        return Scanner;
+    }());
+    exports.Scanner = Scanner;
+
+
+/***/ },
+/* 13 */
+/***/ function(module, exports) {
+
+    "use strict";
+    ;
+    exports.TokenName = {};
+    exports.TokenName[1 /* BooleanLiteral */] = 'Boolean';
+    exports.TokenName[2 /* EOF */] = '<end>';
+    exports.TokenName[3 /* Identifier */] = 'Identifier';
+    exports.TokenName[4 /* Keyword */] = 'Keyword';
+    exports.TokenName[5 /* NullLiteral */] = 'Null';
+    exports.TokenName[6 /* NumericLiteral */] = 'Numeric';
+    exports.TokenName[7 /* Punctuator */] = 'Punctuator';
+    exports.TokenName[8 /* StringLiteral */] = 'String';
+    exports.TokenName[9 /* RegularExpression */] = 'RegularExpression';
+    exports.TokenName[10 /* Template */] = 'Template';
+
+
+/***/ },
+/* 14 */
+/***/ function(module, exports) {
+
+    // Generated by generate-xhtml-entities.js. DO NOT MODIFY!
+    "use strict";
+    exports.XHTMLEntities = {
+        quot: '\u0022',
+        amp: '\u0026',
+        apos: '\u0027',
+        gt: '\u003E',
+        nbsp: '\u00A0',
+        iexcl: '\u00A1',
+        cent: '\u00A2',
+        pound: '\u00A3',
+        curren: '\u00A4',
+        yen: '\u00A5',
+        brvbar: '\u00A6',
+        sect: '\u00A7',
+        uml: '\u00A8',
+        copy: '\u00A9',
+        ordf: '\u00AA',
+        laquo: '\u00AB',
+        not: '\u00AC',
+        shy: '\u00AD',
+        reg: '\u00AE',
+        macr: '\u00AF',
+        deg: '\u00B0',
+        plusmn: '\u00B1',
+        sup2: '\u00B2',
+        sup3: '\u00B3',
+        acute: '\u00B4',
+        micro: '\u00B5',
+        para: '\u00B6',
+        middot: '\u00B7',
+        cedil: '\u00B8',
+        sup1: '\u00B9',
+        ordm: '\u00BA',
+        raquo: '\u00BB',
+        frac14: '\u00BC',
+        frac12: '\u00BD',
+        frac34: '\u00BE',
+        iquest: '\u00BF',
+        Agrave: '\u00C0',
+        Aacute: '\u00C1',
+        Acirc: '\u00C2',
+        Atilde: '\u00C3',
+        Auml: '\u00C4',
+        Aring: '\u00C5',
+        AElig: '\u00C6',
+        Ccedil: '\u00C7',
+        Egrave: '\u00C8',
+        Eacute: '\u00C9',
+        Ecirc: '\u00CA',
+        Euml: '\u00CB',
+        Igrave: '\u00CC',
+        Iacute: '\u00CD',
+        Icirc: '\u00CE',
+        Iuml: '\u00CF',
+        ETH: '\u00D0',
+        Ntilde: '\u00D1',
+        Ograve: '\u00D2',
+        Oacute: '\u00D3',
+        Ocirc: '\u00D4',
+        Otilde: '\u00D5',
+        Ouml: '\u00D6',
+        times: '\u00D7',
+        Oslash: '\u00D8',
+        Ugrave: '\u00D9',
+        Uacute: '\u00DA',
+        Ucirc: '\u00DB',
+        Uuml: '\u00DC',
+        Yacute: '\u00DD',
+        THORN: '\u00DE',
+        szlig: '\u00DF',
+        agrave: '\u00E0',
+        aacute: '\u00E1',
+        acirc: '\u00E2',
+        atilde: '\u00E3',
+        auml: '\u00E4',
+        aring: '\u00E5',
+        aelig: '\u00E6',
+        ccedil: '\u00E7',
+        egrave: '\u00E8',
+        eacute: '\u00E9',
+        ecirc: '\u00EA',
+        euml: '\u00EB',
+        igrave: '\u00EC',
+        iacute: '\u00ED',
+        icirc: '\u00EE',
+        iuml: '\u00EF',
+        eth: '\u00F0',
+        ntilde: '\u00F1',
+        ograve: '\u00F2',
+        oacute: '\u00F3',
+        ocirc: '\u00F4',
+        otilde: '\u00F5',
+        ouml: '\u00F6',
+        divide: '\u00F7',
+        oslash: '\u00F8',
+        ugrave: '\u00F9',
+        uacute: '\u00FA',
+        ucirc: '\u00FB',
+        uuml: '\u00FC',
+        yacute: '\u00FD',
+        thorn: '\u00FE',
+        yuml: '\u00FF',
+        OElig: '\u0152',
+        oelig: '\u0153',
+        Scaron: '\u0160',
+        scaron: '\u0161',
+        Yuml: '\u0178',
+        fnof: '\u0192',
+        circ: '\u02C6',
+        tilde: '\u02DC',
+        Alpha: '\u0391',
+        Beta: '\u0392',
+        Gamma: '\u0393',
+        Delta: '\u0394',
+        Epsilon: '\u0395',
+        Zeta: '\u0396',
+        Eta: '\u0397',
+        Theta: '\u0398',
+        Iota: '\u0399',
+        Kappa: '\u039A',
+        Lambda: '\u039B',
+        Mu: '\u039C',
+        Nu: '\u039D',
+        Xi: '\u039E',
+        Omicron: '\u039F',
+        Pi: '\u03A0',
+        Rho: '\u03A1',
+        Sigma: '\u03A3',
+        Tau: '\u03A4',
+        Upsilon: '\u03A5',
+        Phi: '\u03A6',
+        Chi: '\u03A7',
+        Psi: '\u03A8',
+        Omega: '\u03A9',
+        alpha: '\u03B1',
+        beta: '\u03B2',
+        gamma: '\u03B3',
+        delta: '\u03B4',
+        epsilon: '\u03B5',
+        zeta: '\u03B6',
+        eta: '\u03B7',
+        theta: '\u03B8',
+        iota: '\u03B9',
+        kappa: '\u03BA',
+        lambda: '\u03BB',
+        mu: '\u03BC',
+        nu: '\u03BD',
+        xi: '\u03BE',
+        omicron: '\u03BF',
+        pi: '\u03C0',
+        rho: '\u03C1',
+        sigmaf: '\u03C2',
+        sigma: '\u03C3',
+        tau: '\u03C4',
+        upsilon: '\u03C5',
+        phi: '\u03C6',
+        chi: '\u03C7',
+        psi: '\u03C8',
+        omega: '\u03C9',
+        thetasym: '\u03D1',
+        upsih: '\u03D2',
+        piv: '\u03D6',
+        ensp: '\u2002',
+        emsp: '\u2003',
+        thinsp: '\u2009',
+        zwnj: '\u200C',
+        zwj: '\u200D',
+        lrm: '\u200E',
+        rlm: '\u200F',
+        ndash: '\u2013',
+        mdash: '\u2014',
+        lsquo: '\u2018',
+        rsquo: '\u2019',
+        sbquo: '\u201A',
+        ldquo: '\u201C',
+        rdquo: '\u201D',
+        bdquo: '\u201E',
+        dagger: '\u2020',
+        Dagger: '\u2021',
+        bull: '\u2022',
+        hellip: '\u2026',
+        permil: '\u2030',
+        prime: '\u2032',
+        Prime: '\u2033',
+        lsaquo: '\u2039',
+        rsaquo: '\u203A',
+        oline: '\u203E',
+        frasl: '\u2044',
+        euro: '\u20AC',
+        image: '\u2111',
+        weierp: '\u2118',
+        real: '\u211C',
+        trade: '\u2122',
+        alefsym: '\u2135',
+        larr: '\u2190',
+        uarr: '\u2191',
+        rarr: '\u2192',
+        darr: '\u2193',
+        harr: '\u2194',
+        crarr: '\u21B5',
+        lArr: '\u21D0',
+        uArr: '\u21D1',
+        rArr: '\u21D2',
+        dArr: '\u21D3',
+        hArr: '\u21D4',
+        forall: '\u2200',
+        part: '\u2202',
+        exist: '\u2203',
+        empty: '\u2205',
+        nabla: '\u2207',
+        isin: '\u2208',
+        notin: '\u2209',
+        ni: '\u220B',
+        prod: '\u220F',
+        sum: '\u2211',
+        minus: '\u2212',
+        lowast: '\u2217',
+        radic: '\u221A',
+        prop: '\u221D',
+        infin: '\u221E',
+        ang: '\u2220',
+        and: '\u2227',
+        or: '\u2228',
+        cap: '\u2229',
+        cup: '\u222A',
+        int: '\u222B',
+        there4: '\u2234',
+        sim: '\u223C',
+        cong: '\u2245',
+        asymp: '\u2248',
+        ne: '\u2260',
+        equiv: '\u2261',
+        le: '\u2264',
+        ge: '\u2265',
+        sub: '\u2282',
+        sup: '\u2283',
+        nsub: '\u2284',
+        sube: '\u2286',
+        supe: '\u2287',
+        oplus: '\u2295',
+        otimes: '\u2297',
+        perp: '\u22A5',
+        sdot: '\u22C5',
+        lceil: '\u2308',
+        rceil: '\u2309',
+        lfloor: '\u230A',
+        rfloor: '\u230B',
+        loz: '\u25CA',
+        spades: '\u2660',
+        clubs: '\u2663',
+        hearts: '\u2665',
+        diams: '\u2666',
+        lang: '\u27E8',
+        rang: '\u27E9'
+    };
+
+
+/***/ },
+/* 15 */
+/***/ function(module, exports, __webpack_require__) {
+
+    "use strict";
+    var error_handler_1 = __webpack_require__(10);
+    var scanner_1 = __webpack_require__(12);
+    var token_1 = __webpack_require__(13);
+    var Reader = (function () {
+        function Reader() {
+            this.values = [];
+            this.curly = this.paren = -1;
+        }
+        // A function following one of those tokens is an expression.
+        Reader.prototype.beforeFunctionExpression = function (t) {
+            return ['(', '{', '[', 'in', 'typeof', 'instanceof', 'new',
+                'return', 'case', 'delete', 'throw', 'void',
+                // assignment operators
+                '=', '+=', '-=', '*=', '**=', '/=', '%=', '<<=', '>>=', '>>>=',
+                '&=', '|=', '^=', ',',
+                // binary/unary operators
+                '+', '-', '*', '**', '/', '%', '++', '--', '<<', '>>', '>>>', '&',
+                '|', '^', '!', '~', '&&', '||', '?', ':', '===', '==', '>=',
+                '<=', '<', '>', '!=', '!=='].indexOf(t) >= 0;
+        };
+        // Determine if forward slash (/) is an operator or part of a regular expression
+        // https://github.com/mozilla/sweet.js/wiki/design
+        Reader.prototype.isRegexStart = function () {
+            var previous = this.values[this.values.length - 1];
+            var regex = (previous !== null);
+            switch (previous) {
+                case 'this':
+                case ']':
+                    regex = false;
+                    break;
+                case ')':
+                    var check = this.values[this.paren - 1];
+                    regex = (check === 'if' || check === 'while' || check === 'for' || check === 'with');
+                    break;
+                case '}':
+                    // Dividing a function by anything makes little sense,
+                    // but we have to check for that.
+                    regex = false;
+                    if (this.values[this.curly - 3] === 'function') {
+                        // Anonymous function, e.g. function(){} /42
+                        var check_1 = this.values[this.curly - 4];
+                        regex = check_1 ? !this.beforeFunctionExpression(check_1) : false;
+                    }
+                    else if (this.values[this.curly - 4] === 'function') {
+                        // Named function, e.g. function f(){} /42/
+                        var check_2 = this.values[this.curly - 5];
+                        regex = check_2 ? !this.beforeFunctionExpression(check_2) : true;
+                    }
+                    break;
+                default:
+                    break;
+            }
+            return regex;
+        };
+        Reader.prototype.push = function (token) {
+            if (token.type === 7 /* Punctuator */ || token.type === 4 /* Keyword */) {
+                if (token.value === '{') {
+                    this.curly = this.values.length;
+                }
+                else if (token.value === '(') {
+                    this.paren = this.values.length;
+                }
+                this.values.push(token.value);
+            }
+            else {
+                this.values.push(null);
+            }
+        };
+        return Reader;
+    }());
+    var Tokenizer = (function () {
+        function Tokenizer(code, config) {
+            this.errorHandler = new error_handler_1.ErrorHandler();
+            this.errorHandler.tolerant = config ? (typeof config.tolerant === 'boolean' && config.tolerant) : false;
+            this.scanner = new scanner_1.Scanner(code, this.errorHandler);
+            this.scanner.trackComment = config ? (typeof config.comment === 'boolean' && config.comment) : false;
+            this.trackRange = config ? (typeof config.range === 'boolean' && config.range) : false;
+            this.trackLoc = config ? (typeof config.loc === 'boolean' && config.loc) : false;
+            this.buffer = [];
+            this.reader = new Reader();
+        }
+        Tokenizer.prototype.errors = function () {
+            return this.errorHandler.errors;
+        };
+        Tokenizer.prototype.getNextToken = function () {
+            if (this.buffer.length === 0) {
+                var comments = this.scanner.scanComments();
+                if (this.scanner.trackComment) {
+                    for (var i = 0; i < comments.length; ++i) {
+                        var e = comments[i];
+                        var value = this.scanner.source.slice(e.slice[0], e.slice[1]);
+                        var comment = {
+                            type: e.multiLine ? 'BlockComment' : 'LineComment',
+                            value: value
+                        };
+                        if (this.trackRange) {
+                            comment.range = e.range;
+                        }
+                        if (this.trackLoc) {
+                            comment.loc = e.loc;
+                        }
+                        this.buffer.push(comment);
+                    }
+                }
+                if (!this.scanner.eof()) {
+                    var loc = void 0;
+                    if (this.trackLoc) {
+                        loc = {
+                            start: {
+                                line: this.scanner.lineNumber,
+                                column: this.scanner.index - this.scanner.lineStart
+                            },
+                            end: {}
+                        };
+                    }
+                    var token = void 0;
+                    if (this.scanner.source[this.scanner.index] === '/') {
+                        token = this.reader.isRegexStart() ? this.scanner.scanRegExp() : this.scanner.scanPunctuator();
+                    }
+                    else {
+                        token = this.scanner.lex();
+                    }
+                    this.reader.push(token);
+                    var entry = {
+                        type: token_1.TokenName[token.type],
+                        value: this.scanner.source.slice(token.start, token.end)
+                    };
+                    if (this.trackRange) {
+                        entry.range = [token.start, token.end];
+                    }
+                    if (this.trackLoc) {
+                        loc.end = {
+                            line: this.scanner.lineNumber,
+                            column: this.scanner.index - this.scanner.lineStart
+                        };
+                        entry.loc = loc;
+                    }
+                    if (token.type === 9 /* RegularExpression */) {
+                        var pattern = token.pattern;
+                        var flags = token.flags;
+                        entry.regex = { pattern: pattern, flags: flags };
+                    }
+                    this.buffer.push(entry);
+                }
+            }
+            return this.buffer.shift();
+        };
+        return Tokenizer;
+    }());
+    exports.Tokenizer = Tokenizer;
+
+
+/***/ }
+/******/ ])
+});
+;
diff --git a/Source/WebInspectorUI/UserInterface/FilterBar.css b/Source/WebInspectorUI/UserInterface/FilterBar.css
deleted file mode 100644
index 5b8de3324..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.svg);
-
-    -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 173611dfd..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;
-
-    transition-property: top;
-    transition-duration: 200ms;
-    transition-timing-function: ease-in;
-
-    z-index: 500;
-}
-
-.find-banner.showing {
-    top: 0;
-    transition-timing-function: ease-out;
-}
-
-.find-banner.no-find-banner-transition,
-.supports-find-banner.no-find-banner-transition {
-    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: 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 d676aba92..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.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._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.svg", specifications, 7, 7, "find-banner-previous-arrow-");
-        generateColoredImagesForCSS("Images/ForwardArrow.svg", 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 2c74a7f10..000000000
--- a/Source/WebInspectorUI/UserInterface/FontResourceContentView.css
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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;
-}
-
-.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 1a32243f6..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.mimeTypeComponents.type === "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 72d9a1572..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 d2b611b7c..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 7e62a99d8..000000000
--- a/Source/WebInspectorUI/UserInterface/Frame.js
+++ /dev/null
@@ -1,501 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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._domContentReadyEventTimestamp = NaN;
-    this._loadEventTimestamp = NaN;
-
-    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",
-    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.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;
-
-        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: 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;
-    },
-
-    get domContentReadyEventTimestamp()
-    {
-        return this._domContentReadyEventTimestamp;
-    },
-
-    get loadEventTimestamp()
-    {
-        return this._loadEventTimestamp;
-    },
-
-    isMainFrame: function()
-    {
-        return this._isMainFrame;
-    },
-
-    markAsMainFrame: function()
-    {
-        this._isMainFrame = true;
-    },
-
-    unmarkAsMainFrame: function()
-    {
-        this._isMainFrame = false;
-    },
-
-    markDOMContentReadyEvent: function(timestamp)
-    {
-        this._domContentReadyEventTimestamp = timestamp || NaN;
-    },
-
-    markLoadEvent: function(timestamp)
-    {
-        this._loadEventTimestamp = timestamp || NaN;
-    },
-
-    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);
-            this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalResourceWasAdded, {resource: resource});
-        } 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);
-    },
-
-    saveIdentityToCookie: function(cookie)
-    {
-        cookie[WebInspector.Frame.MainResourceURLCookieKey] = this.mainResource.url;
-    },
-
-    // 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 d96f32c02..000000000
--- a/Source/WebInspectorUI/UserInterface/FrameContentView.js
+++ /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.
- */
-
-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 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;
-    },
-
-    saveToCookie: function(cookie)
-    {
-        cookie.type = WebInspector.ContentViewCookieType.Resource;
-        cookie.subview = this._currentContentViewSetting.value;
-        if (!this.representedObject.isMainFrame())
-            cookie.url = this.representedObject.url;
-    },
-
-    restoreFromCookie: function(cookie)
-    {
-        var shownView = this._showContentViewForIdentifier(cookie.subview);
-        if ("lineNumber" in cookie && "columnNumber" in cookie)
-            this.showSourceCode(new WebInspector.SourceCodePosition(cookie.lineNumber, cookie.columnNumber));
-    },
-
-    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;
-
-        return resourceContentView.showResponse(positionToReveal, textRangeToSelect, forceUnformatted);
-    },
-
-    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/FrameDOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/FrameDOMTreeContentView.js
deleted file mode 100644
index a921be7c9..000000000
--- a/Source/WebInspectorUI/UserInterface/FrameDOMTreeContentView.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.FrameDOMTreeContentView = function(domTree)
-{
-    console.assert(domTree);
-
-    WebInspector.DOMTreeContentView.call(this, domTree);
-
-    this._domTree = domTree;
-    this._domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
-
-    this._requestRootDOMNode();
-};
-
-
-WebInspector.FrameDOMTreeContentView.prototype = {
-    constructor: WebInspector.FrameDOMTreeContentView,
-    __proto__: WebInspector.DOMTreeContentView.prototype,
-
-    // Public
-
-    get domTree()
-    {
-        return this._domTree;
-    },
-
-    closed: function()
-    {
-        this._domTree.removeEventListener(null, null, this);
-        WebInspector.DOMTreeContentView.prototype.closed.call(this);
-    },
-
-    getSearchContextNodes: function(callback)
-    {
-        this._domTree.requestRootDOMNode(function(rootDOMNode) {
-            callback([rootDOMNode.id]);
-        });
-    },
-
-    // Private
-
-    _rootDOMNodeAvailable: function(rootDOMNode)
-    {
-        this.domTreeOutline.rootDOMNode = rootDOMNode;
-
-        if (!rootDOMNode) {
-            this.domTreeOutline.selectDOMNode(null, false);
-            return;
-        }
-
-        this._restoreSelectedNodeAfterUpdate(this._domTree.frame.url, rootDOMNode.body || rootDOMNode.documentElement);
-    },
-
-    _rootDOMNodeInvalidated: function(event)
-    {
-        this._requestRootDOMNode();
-    },
-
-    _requestRootDOMNode: function()
-    {
-        this._domTree.requestRootDOMNode(this._rootDOMNodeAvailable.bind(this));
-    }
-
-};
diff --git a/Source/WebInspectorUI/UserInterface/FrameResourceManager.js b/Source/WebInspectorUI/UserInterface/FrameResourceManager.js
deleted file mode 100644
index 2c556f2be..000000000
--- a/Source/WebInspectorUI/UserInterface/FrameResourceManager.js
+++ /dev/null
@@ -1,586 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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);
-
-    if (window.PageAgent)
-        PageAgent.enable();
-    if (window.NetworkAgent)
-        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;
-        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: 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);
-            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, initiator)
-    {
-        // 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;
-        }
-
-        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, timestamp, null, null, initiatorSourceCodeLocation);
-
-        // 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, 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 initiatorSourceCodeLocation = this._initiatorSourceCodeLocationFromPayload(initiator);
-
-        var response = cachedResourcePayload.response;
-        var resource = this._addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, cachedResourcePayload.url, cachedResourcePayload.type, null, null, timestamp, null, null, initiatorSourceCodeLocation);
-        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, initiatorSourceCodeLocation)
-    {
-        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, initiatorSourceCodeLocation);
-                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, initiatorSourceCodeLocation);
-            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);
-    },
-
-    _initiatorSourceCodeLocationFromPayload: function(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: 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 24d69f088..000000000
--- a/Source/WebInspectorUI/UserInterface/FrameTreeElement.js
+++ /dev/null
@@ -1,631 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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);
-
-    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;
-        WebInspector.notifications.addEventListener(WebInspector.Notification.PageArchiveStarted, this._pageArchiveStarted, this);
-        WebInspector.notifications.addEventListener(WebInspector.Notification.PageArchiveEnded, this._pageArchiveEnded, 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);
-    },
-
-    // Called from ResourceTreeElement.
-
-    updateStatusForMainFrame: function()
-    {
-        function loadedImages()
-        {
-            if (!this._reloadButton || !this._downloadButton)
-                return;
-
-            var fragment = document.createDocumentFragment("div");
-            fragment.appendChild(this._downloadButton.element);
-            fragment.appendChild(this._reloadButton.element);
-            this.status = fragment;
-
-            delete this._loadingMainFrameButtons;
-        }
-
-        if (this._reloadButton && this._downloadButton) {
-            loadedImages.call(this);
-            return;
-        }
-
-        if (!this._loadingMainFrameButtons) {
-            this._loadingMainFrameButtons = true;
-
-            var tooltip = WebInspector.UIString("Reload page (%s)\nReload ignoring cache (%s)").format(WebInspector._reloadPageKeyboardShortcut.displayName, WebInspector._reloadPageIgnoringCacheKeyboardShortcut.displayName);
-            wrappedSVGDocument("Images/Reload.svg", null, tooltip, function(element) {
-                this._reloadButton = new WebInspector.TreeElementStatusButton(element);
-                this._reloadButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._reloadPageClicked, this);
-                loadedImages.call(this);
-            }.bind(this));
-
-            wrappedSVGDocument("Images/DownloadArrow.svg", null, WebInspector.UIString("Download Web Archive"), function(element) {
-                this._downloadButton = new WebInspector.TreeElementStatusButton(element);
-                this._downloadButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._downloadButtonClicked, this);
-                this._updateDownloadButton();
-                loadedImages.call(this);
-            }.bind(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]);
-        }
-
-        var flowMap = this._frame.domTree.flowMap;
-        for (var flowKey in flowMap)
-            this._addTreeElementForRepresentedObject(flowMap[flowKey]);
-    },
-
-    onexpand: function()
-    {
-        this._expandedSetting.value = true;
-        this._frame.domTree.requestContentFlowList();
-    },
-
-    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();
-
-        if (this._frame.isMainFrame())
-            this._updateDownloadButton();
-
-        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);
-    },
-
-    _childContentFlowWasAdded: function(event)
-    {
-        this._addRepresentedObjectToNewChildQueue(event.data.flow);
-    },
-
-    _childContentFlowWasRemoved: function(event)
-    {
-        this._removeChildForRepresentedObject(event.data.flow);
-    },
-
-    _rootDOMNodeInvalidated: function() {
-        if (this.expanded)
-            this._frame.domTree.requestContentFlowList();
-    },
-
-    _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 || representedObject instanceof WebInspector.ContentFlow);
-        if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.ContentFlow))
-            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 || representedObject instanceof WebInspector.ContentFlow);
-        if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.ContentFlow))
-            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);
-            else if (representedObject instanceof WebInspector.ContentFlow)
-                childTreeElement = new WebInspector.ContentFlowTreeElement(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));
-    },
-
-    _compareResourceTreeElements: function(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 just compare the titles.
-            return a.mainTitle.localeCompare(b.mainTitle);
-        }
-
-        // 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;
-    },
-
-    _insertResourceTreeElement: function(parentTreeElement, childTreeElement)
-    {
-        console.assert(!childTreeElement.parent);
-        parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, this._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.ContentFlow) {
-            if (!this._flowsFolderTreeElement)
-                this._flowsFolderTreeElement = createFolderTreeElement.call(this, "flows", WebInspector.UIString("Flows"));
-            return this._flowsFolderTreeElement;
-        }
-
-        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;
-        var frame = this._frame;
-
-        function pushResourceType(type) {
-            // There are some other properties on WebInspector.Resource.Type that we need to skip, like private data and functions
-            if (type.charAt(0) === "_")
-                return false;
-
-            // Only care about the values that are strings, not functions, etc.
-            var typeValue = WebInspector.Resource.Type[type];
-            if (typeof typeValue !== "string")
-                return false;
-
-            return pushCategory(frame.resourcesWithType(typeValue).length);
-        }
-
-        function pushCategory(resourceCount)
-        {
-            if (!resourceCount)
-                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 (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;
-                return false;
-            }
-
-            // Check if this is a medium category.
-            if (resourceCount >= WebInspector.FrameTreeElement.MediumChildCountThreshold) {
-                // If this is the medium category that puts us over the maximum allowed, make folders.
-                return ++numberOfMediumCategories >= WebInspector.FrameTreeElement.NumberOfMediumCategoriesThreshold;
-            }
-
-            // This is a small category.
-            ++numberOfSmallCategories;
-            return false;
-        }
-
-        // Iterate over all the available resource types.
-        return pushCategory(frame.childFrames.length) || pushCategory(frame.domTree.flowsCount) || Object.keys(WebInspector.Resource.Type).some(pushResourceType);
-    },
-
-    _reloadPageClicked: function(event)
-    {
-        // Ignore cache when the shift key is pressed.
-        PageAgent.reload(event.data.shiftKey);
-    },
-
-    _downloadButtonClicked: function(event)
-    {
-        WebInspector.archiveMainFrame();
-    },
-
-    _updateDownloadButton: function()
-    {
-        console.assert(this._frame.isMainFrame());
-        if (!this._downloadButton)
-            return;
-
-        if (!PageAgent.archive) {
-            this._downloadButton.hidden = true;
-            return;
-        }
-
-        if (this._downloadingPage) {
-            this._downloadButton.enabled = false;
-            return;
-        }
-
-        this._downloadButton.enabled = WebInspector.canArchiveMainFrame();
-    },
-
-    _pageArchiveStarted: function(event)
-    {
-        this._downloadingPage = true;
-        this._updateDownloadButton();
-    },
-
-    _pageArchiveEnded: function(event)
-    {
-        this._downloadingPage = false;
-        this._updateDownloadButton();
-    }
-};
-
-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 11c1bf0b8..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, 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: 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 837083934..000000000
--- a/Source/WebInspectorUI/UserInterface/GeneralTreeElementPathComponent.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.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()
-    {
-        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: 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 84f28eec2..000000000
--- a/Source/WebInspectorUI/UserInterface/Geometry.js
+++ /dev/null
@@ -1,255 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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
-        );
-    },
-
-    pad: function(padding)
-    {
-        return new WebInspector.Rect(
-            this.origin.x - padding,
-            this.origin.y - padding,
-            this.size.width + padding * 2,
-            this.size.height + padding * 2
-        );
-    },
-
-    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/GoToLineDialog.css b/Source/WebInspectorUI/UserInterface/GoToLineDialog.css
deleted file mode 100644
index a1b37f352..000000000
--- a/Source/WebInspectorUI/UserInterface/GoToLineDialog.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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;
-    -webkit-transform: translate(-50%, -50%);
-    padding: 3px;
-    border-radius: 5px;
-    background-color: rgba(232, 232, 232, 0.95);
-    border: 1px rgb(218, 218, 218) solid;
-    box-shadow: 1px 5px 20px 3px rgba(0, 0, 0, 0.33);
-}
-
-.go-to-line-dialog > div {
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-    background-color: white;
-    border: 1px rgb(206, 206, 206) solid;
-}
-
-.go-to-line-dialog > div > input {
-    position: absolute;
-    left: 2px;
-    right: 36px;
-    border: none;
-    background-color: transparent;
-    font-family: "Lucida Grande", sans-serif;
-    font-size: 20px;
-    color: rgb(12, 12, 12);
-    padding: 0 0 1px 5px;
-    outline: none;
-}
-
-.go-to-line-dialog > div > input::-webkit-input-placeholder {
-    color: rgb(133, 133, 133);
-}
-
-.go-to-line-dialog > div > img {
-    position: absolute;
-    top: 9px;
-    right: 12px;
-    padding: 2px;
-    border-radius: 9px;
-    width: 18px;
-    height: 18px;
-    background-color: rgb(188, 188, 188);
-    display: none;
-    content: url(Images/CloseWhite.svg);
-}
-
-.go-to-line-dialog > div > img:active {
-    background-color: rgb(140, 140, 140);
-}
-
-.go-to-line-dialog.non-empty > div > img {
-    display: block;
-}
diff --git a/Source/WebInspectorUI/UserInterface/GoToLineDialog.js b/Source/WebInspectorUI/UserInterface/GoToLineDialog.js
deleted file mode 100644
index 18dbd3510..000000000
--- a/Source/WebInspectorUI/UserInterface/GoToLineDialog.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = function()
-{
-    WebInspector.Object.call(this);
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.GoToLineDialog.StyleClassName;
-
-    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);
-}
-
-WebInspector.GoToLineDialog.StyleClassName = "go-to-line-dialog";
-WebInspector.GoToLineDialog.NonEmptyClassName = "non-empty";
-
-WebInspector.GoToLineDialog.prototype = {
-    constructor: WebInspector.GoToLineDialog,
-
-    __proto__: WebInspector.Object.prototype,
-
-    // Public
-
-    present: function(parent)
-    {
-        parent.appendChild(this._element);
-        this._input.focus();
-        this._clear();
-    },
-
-    dismiss: function()
-    {
-        var parent = this._element.parentNode;
-        if (!parent)
-            return;
-
-        parent.removeChild(this._element);
-
-        if (this.delegate && typeof this.delegate.goToLineDialogWasDismissed === "function")
-            this.delegate.goToLineDialogWasDismissed(this);
-    },
-
-    // Protected
-
-    handleEvent: function(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: function(event)
-    {
-        if (this._input.value === "")
-            this._element.classList.remove(WebInspector.GoToLineDialog.NonEmptyClassName);
-        else
-            this._element.classList.add(WebInspector.GoToLineDialog.NonEmptyClassName);
-    },
-
-    _handleKeydownEvent: function(event)
-    {
-        if (event.keyCode === WebInspector.KeyboardShortcut.Key.Escape.keyCode) {
-            if (this._input.value === "")
-                this.dismiss();
-            else
-                this._clear();
-        } 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: function(event)
-    {
-        this.dismiss();
-    },
-
-    _handleMousedownEvent: function(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: function(event)
-    {
-        this._clear();
-    },
-
-    _clear: function()
-    {
-        this._input.value = "";
-        this._element.classList.remove(WebInspector.GoToLineDialog.NonEmptyClassName);
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.css b/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.css
deleted file mode 100644
index 9c582ff49..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.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/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/HoverMenu.css b/Source/WebInspectorUI/UserInterface/HoverMenu.css
deleted file mode 100644
index b3031f3d0..000000000
--- a/Source/WebInspectorUI/UserInterface/HoverMenu.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.
- */
-
-.hover-menu {
-    position: absolute;
-    display: -webkit-flex;
-
-    /* Exceptionally use content-box such that the frame set is that of the highlighted string
-       and styling adds the required padding around it */
-    box-sizing: content-box;
-
-    /* Position the icon to the right of the menu and centered vertically */
-    -webkit-justify-content: flex-end;
-    -webkit-align-items: center;
-
-    /* Provide extra room for the icon */
-    padding-left: 2px;
-    padding-right: 16px;
-
-    min-height: 17px;
-
-    border-radius: 4px;
-    border: 2px solid rgba(0, 0, 0, 0.22);
-    
-    -webkit-transform: translate3d(-3px, -5px, 0);
-
-    pointer-events: none;
-    opacity: 0;
-
-    transition: opacity 350ms;
-}
-
-.hover-menu.visible {
-    opacity: 1;
-}
-
-.hover-menu > img {
-    width: 15px;
-    height: 13px;
-    -webkit-transform: translateX(14px);
-    content: -webkit-image-set(url(Images/HoverMenuButton.png) 1x, url(Images/HoverMenuButton@2x.png) 2x);
-}
-
-.hover-menu.visible > img {
-    pointer-events: all;
-}
diff --git a/Source/WebInspectorUI/UserInterface/HoverMenu.js b/Source/WebInspectorUI/UserInterface/HoverMenu.js
deleted file mode 100644
index 47514fbe9..000000000
--- a/Source/WebInspectorUI/UserInterface/HoverMenu.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.HoverMenu = function(delegate)
-{
-    WebInspector.Object.call(this);
-
-    this.delegate = delegate;
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.HoverMenu.StyleClassName;
-    this._element.addEventListener("transitionend", this, true);
-
-    this._button = this._element.appendChild(document.createElement("img"));
-    this._button.addEventListener("click", this);
-}
-
-WebInspector.HoverMenu.StyleClassName = "hover-menu";
-WebInspector.HoverMenu.VisibleClassName = "visible";
-
-WebInspector.HoverMenu.prototype = {
-    constructor: WebInspector.HoverMenu,
-    __proto__: WebInspector.Object.prototype,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    present: function(targetFrame)
-    {
-        var style = this._element.style;
-        style.left = Math.ceil(targetFrame.origin.x) + "px";
-        style.top = Math.ceil(targetFrame.origin.y) + "px";
-        style.width = Math.ceil(targetFrame.size.width) + "px";
-        style.height = Math.ceil(targetFrame.size.height) + "px";
-
-        var element = this._element;
-        document.body.appendChild(element);
-        setTimeout(function() {
-            element.classList.add(WebInspector.HoverMenu.VisibleClassName);
-        });
-
-        window.addEventListener("scroll", this, true);
-    },
-
-    dismiss: function()
-    {
-        if (this._element.parentNode !== document.body)
-            return;
-
-        this._element.classList.remove(WebInspector.HoverMenu.VisibleClassName);
-
-        window.removeEventListener("scroll", this, true);
-    },
-
-    // Protected
-
-    handleEvent: function(event)
-    {
-        switch (event.type) {
-        case "scroll":
-            if (!this._element.contains(event.target))
-                this.dismiss();
-            break;
-        case "click":
-            this._handleClickEvent(event);
-            break;
-        case "transitionend":
-            if (!this._element.classList.contains(WebInspector.HoverMenu.VisibleClassName))
-                this._element.remove();
-            break;
-        }
-    },
-
-    // Private
-
-    _handleClickEvent: function(event)
-    {
-        if (this.delegate && typeof this.delegate.hoverMenuButtonWasPressed === "function")
-            this.delegate.hoverMenuButtonWasPressed(this);
-    }
-}
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 e5e8774c1..000000000
--- a/Source/WebInspectorUI/UserInterface/ImageUtilities.js
+++ /dev/null
@@ -1,730 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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);
-    }
-}
-
-
-var svgImageCache = {};
-
-function loadSVGImageDocumentElement(url, callback)
-{
-    function invokeCallbackWithDocument(svgText) {
-        var parser = new DOMParser;
-        var doc = parser.parseFromString(svgText, "image/svg+xml");
-        callback(doc.documentElement);
-    }
-
-    function imageLoad(event) {
-        if (xhr.status === 0 || xhr.status === 200) {
-            var svgText = xhr.responseText;
-            svgImageCache[url] = svgText;
-            invokeCallbackWithDocument(svgText);
-        } else {
-            console.error("Unexpected XHR status (" + xhr.status + ") loading SVG image: " + url);
-            callback(null);
-        }
-    }
-
-    function imageError(event) {
-        console.error("Unexpected failure loading SVG image: " + url);
-        callback(null);
-    }
-
-    var cachedSVGText = svgImageCache[url];
-    if (cachedSVGText) {
-        invokeCallbackWithDocument(cachedSVGText);
-        return;
-    }
-
-    var xhr = new XMLHttpRequest;
-    xhr.open("GET", url, true);
-    xhr.addEventListener("load", imageLoad);
-    xhr.addEventListener("error", imageError);
-    xhr.send();
-}
-
-function wrappedSVGDocument(url, className, title, callback)
-{
-    loadSVGImageDocumentElement(url, function(svgDocument) {
-        if (!svgDocument) {
-            callback(null);
-            return;
-        }
-
-        var wrapper = document.createElement("div");
-        if (className)
-            wrapper.className = className;
-        if (title)
-            wrapper.title = title;
-        wrapper.appendChild(svgDocument);
-
-        callback(wrapper);
-    });
-}
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/Assertion.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Assertion.svg
new file mode 100644
index 000000000..e3f17473c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Assertion.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="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/BackArrow.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BackArrow.svg
deleted file mode 100644
index dddaa6dcd..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/BackArrow.svg
+++ /dev/null
@@ -1,156 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="9"
-   height="9"
-   id="svg2987">
-  <defs
-     id="defs2989">
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-8-0"
-       xlink:href="#linearGradient4022-2-0-9-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-1,0,0,1,63,0)" />
-    <linearGradient
-       id="linearGradient4022-2-0-9-1">
-      <stop
-         id="stop4024-2-8-8-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-0-8"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0">
-      <stop
-         id="stop4024-2-8"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5066">
-      <stop
-         id="stop5068"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3083"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3097"
-       xlink:href="#linearGradient5066"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-22.424752,-224.73565)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-2"
-       xlink:href="#linearGradient4022-2-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0-4">
-      <stop
-         id="stop4024-2-8-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4886"
-       xlink:href="#linearGradient5066-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient5066-5">
-      <stop
-         id="stop5068-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-3"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-  </defs>
-  <metadata
-     id="metadata2992">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="M 6.34375,0 C 6.2009183,0.03400528 6.0686562,0.11115813 5.96875,0.21875 l -3.75,3.75 -0.5,0.53125 0.5,0.53125 3.75,3.75 C 6.1086414,8.9190777 6.3036185,8.9993624 6.5,9 l 0.03125,0 0.0625,0 0.65625,0 0,-0.5625 0,-0.09375 C 7.2858715,8.1070742 7.2019527,7.8553177 7.03125,7.6875 L 3.84375,4.5 7.03125,1.28125 C 7.170132,1.1421608 7.2506759,0.94655417 7.25,0.75 L 7.25,0.59375 7.25,0 6.65625,0 6.5625,0 6.5,0 6.40625,0 z"
-     id="path6040"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-</svg>
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/BottomUpTree.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BottomUpTree.svg
deleted file mode 100644
index e7204b6ae..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/BottomUpTree.svg
+++ /dev/null
@@ -1,73 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3051">
-  <defs
-     id="defs3053">
-    <linearGradient
-       x1="7.0862341"
-       y1="-0.4476825"
-       x2="7.0862341"
-       y2="9.954217"
-       id="linearGradient4994"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#4f9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#8ae234;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-  </defs>
-  <metadata
-     id="metadata3056">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 6.012158,14 0,-4.0121577 1.604864,0 0,-1.6048635 -3.574469,0 -0.401216,0 0,-0.401216 0,-1.9696049 -1.641337,0 0,-3.9756849 4.012158,0 0,3.9756849 -1.568389,0 0,1.5683891 7.185411,0 0,-1.5683891 -1.604864,0 L 10.024316,2 14,2 l 0,4.0121579 -1.568389,0 0,1.9696049 0,0.401216 -0.401215,0 -3.610943,0 0,1.6048635 1.604863,0 0,4.0121577 -4.012158,0 z"
-       id="rect8421-0"
-       style="color:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionAdd.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionAdd.svg
deleted file mode 100644
index e2aecaa92..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionAdd.svg
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3001">
-  <defs
-     id="defs3003" />
-  <metadata
-     id="metadata3006">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="M 7,3 7,7 3,7 3,9 7,9 7,13 9,13 9,9 13,9 13,7 9,7 9,3 7,3 z"
-       id="rect31992"
-       style="color:#bebebe;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionRemove.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionRemove.svg
deleted file mode 100644
index c8ced6079..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionRemove.svg
+++ /dev/null
@@ -1,55 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3001">
-  <defs
-     id="defs3003" />
-  <metadata
-     id="metadata3006">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <rect
-       width="9.9996014"
-       height="2.0002136"
-       x="3.0001984"
-       y="6.9997864"
-       id="rect31984"
-       style="color:#bebebe;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointButton.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointButton.svg
index 261f12d73..5088dc3a9 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointButton.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointButton.svg
@@ -1,159 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="21"
-   height="12"
-   id="svg3029">
-  <defs
-     id="defs3031">
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient6258"
-       xlink:href="#linearGradient7077-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-481.76274,-208.50871)" />
-    <linearGradient
-       id="linearGradient7077-4">
-      <stop
-         id="stop7079-9"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7085-4"
-         style="stop-color:#888a85;stop-opacity:0.89803922"
-         offset="0.61538231" />
-      <stop
-         id="stop7081-6"
-         style="stop-color:#888a85;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient6258-6"
-       xlink:href="#linearGradient7077-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-481.76274,-208.50871)" />
-    <linearGradient
-       id="linearGradient7077-4-5">
-      <stop
-         id="stop7079-9-0"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7085-4-8"
-         style="stop-color:#888a85;stop-opacity:0.89803922"
-         offset="0.61538231" />
-      <stop
-         id="stop7081-6-0"
-         style="stop-color:#888a85;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient6258-5"
-       xlink:href="#linearGradient7077-4-53"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-481.76274,-208.50871)" />
-    <linearGradient
-       id="linearGradient7077-4-53">
-      <stop
-         id="stop7079-9-6"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7085-4-5"
-         style="stop-color:#888a85;stop-opacity:0.89803922"
-         offset="0.61538231" />
-      <stop
-         id="stop7081-6-5"
-         style="stop-color:#888a85;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient6258-9"
-       xlink:href="#linearGradient7077-4-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-481.76274,-208.50871)" />
-    <linearGradient
-       id="linearGradient7077-4-8">
-      <stop
-         id="stop7079-9-5"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7085-4-0"
-         style="stop-color:#888a85;stop-opacity:0.89803922"
-         offset="0.61538231" />
-      <stop
-         id="stop7081-6-8"
-         style="stop-color:#888a85;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-  </defs>
-  <metadata
-     id="metadata3034">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="M 2.925,1 C 2.478193,1 2.074916,1.1360647 1.76875,1.40625 1.462584,1.6764353 1.3,2.0782601 1.3,2.53125 l 0,7.9375 c 0,0.460741 0.129245,0.885666 0.4375,1.15625 C 2.045755,11.895584 2.472087,12 2.925,12 L 10.14375,12 10.3,12 10.425,11.90625 15.4875,6.8125 15.76875,6.53125 15.4875,6.28125 10.425,1.125 10.3,1 10.14375,1 z"
-     id="path6268-2"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.78777313;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  <path
-     d="m 10.146052,0.39388654 5.0713,5.14092096 -5.0713,5.0713055 -7.2048464,0 c -0.7806619,0 -1.2473191,-0.372105 -1.2473191,-1.1324156 l 0,-7.9473633 c 0,-0.72714616 0.4952116,-1.13244756 1.2473191,-1.13244756 z"
-     id="path6268"
-     style="color:#000000;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:#204a87;stroke-width:0.78777313;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
-     d="m 14.705574,5.5000117 -4.7266394,-4.72663902 -7.0899584,0 c -0.7877731,0 -0.7877731,0.78777312 -0.7877731,0.78777312 l 7.8777315,0 z"
-     id="path6270"
-     style="opacity:0.48979594;color:#bebebe;fill:#729fcf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+<?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/BreakpointInactiveButton.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactiveButton.svg
index dca083834..e24177c0a 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactiveButton.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactiveButton.svg
@@ -1,204 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="21"
-   height="12"
-   id="svg3029">
-  <defs
-     id="defs3031">
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient6258"
-       xlink:href="#linearGradient7077-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-481.76274,-208.50871)" />
-    <linearGradient
-       id="linearGradient7077-4">
-      <stop
-         id="stop7079-9"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7085-4"
-         style="stop-color:#888a85;stop-opacity:0.89803922"
-         offset="0.61538231" />
-      <stop
-         id="stop7081-6"
-         style="stop-color:#888a85;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient6258-6"
-       xlink:href="#linearGradient7077-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-481.76274,-208.50871)" />
-    <linearGradient
-       id="linearGradient7077-4-5">
-      <stop
-         id="stop7079-9-0"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7085-4-8"
-         style="stop-color:#888a85;stop-opacity:0.89803922"
-         offset="0.61538231" />
-      <stop
-         id="stop7081-6-0"
-         style="stop-color:#888a85;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient6258-5"
-       xlink:href="#linearGradient7077-4-53"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-481.76274,-208.50871)" />
-    <linearGradient
-       id="linearGradient7077-4-53">
-      <stop
-         id="stop7079-9-6"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7085-4-5"
-         style="stop-color:#888a85;stop-opacity:0.89803922"
-         offset="0.61538231" />
-      <stop
-         id="stop7081-6-5"
-         style="stop-color:#888a85;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient6258-9"
-       xlink:href="#linearGradient7077-4-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-481.76274,-208.50871)" />
-    <linearGradient
-       id="linearGradient7077-4-8">
-      <stop
-         id="stop7079-9-5"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7085-4-0"
-         style="stop-color:#888a85;stop-opacity:0.89803922"
-         offset="0.61538231" />
-      <stop
-         id="stop7081-6-8"
-         style="stop-color:#888a85;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient7077-4-7">
-      <stop
-         id="stop7079-9-7"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7085-4-2"
-         style="stop-color:#888a85;stop-opacity:0.89803922"
-         offset="0.61538231" />
-      <stop
-         id="stop7081-6-9"
-         style="stop-color:#888a85;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient4493"
-       xlink:href="#linearGradient7077-4-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-481.76274,-208.50871)" />
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient4495"
-       xlink:href="#linearGradient7077-4-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-481.76274,-208.50871)" />
-    <radialGradient
-       cx="314"
-       cy="232.05559"
-       r="5.2619252"
-       fx="314"
-       fy="232.05559"
-       id="radialGradient4500"
-       xlink:href="#linearGradient7077-4-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.470582,0,0,1.9004442,-789.60858,-353.70008)" />
-  </defs>
-  <metadata
-     id="metadata3034">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="M 2.925,1 C 2.478192,1 2.074916,1.136064 1.76875,1.40625 1.462584,1.676436 1.3,2.07826 1.3,2.53125 l 0,7.9375 c 0,0.460741 0.160496,0.885666 0.46875,1.15625 C 2.077004,11.895584 2.472087,12 2.925,12 L 10.14375,12 10.3,12 10.425,11.90625 15.4875,6.8125 15.76875,6.53125 15.4875,6.28125 10.425,1.125 10.3,1 10.14375,1 z"
-     id="path6268-0"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.78777313;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  <path
-     d="m 10.146052,0.39388658 5.0713,5.14092122 -5.0713,5.0713052 -7.2048463,0 c -0.780662,0 -1.2473191,-0.372104 -1.2473191,-1.1324157 l 0,-7.9473631 c 0,-0.72714619 0.4952116,-1.13244762 1.2473191,-1.13244762 z"
-     id="path6268"
-     style="color:#000000;fill:#babdb6;fill-opacity:1;fill-rule:nonzero;stroke:#888a85;stroke-width:0.78777313;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
-     d="m 14.705574,5.5000118 -4.7266389,-4.72663912 -7.0899588,0 c -0.7877731,0 -0.7877731,0.78777322 -0.7877731,0.78777322 l 7.8777319,0 z"
-     id="path6270"
-     style="opacity:0.48979594;color:#bebebe;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+<?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
index 84e9dfe12..bdadae5e7 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoints.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoints.svg
@@ -1,52 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3029">
-  <defs
-     id="defs3031" />
-  <metadata
-     id="metadata3034">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="M 10.025,3.125 14.9,8 l -4.875,4.875 -7.3411812,0 C 2.2529256,12.857044 1.9,12.475437 1.9,12.0625 l 0,-8.125 C 1.9,3.5062331 2.1808081,3.125 2.7197313,3.125 z"
-       id="path43079"
-       style="color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  </g>
+<?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/Close.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Close.svg
index 94ef884fd..b9c22f5f1 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Close.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Close.svg
@@ -1,53 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="14"
-   id="svg3791">
-  <defs
-     id="defs3793" />
-  <metadata
-     id="metadata3796">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-2)"
-     id="layer1">
-    <path
-       d="m 4,5 1,0 c 0.01037,-1.2e-4 0.02079,-4.6e-4 0.03125,0 0.254951,0.0112 0.50987,0.12858 0.6875,0.3125 L 8,7.59375 10.3125,5.3125 C 10.578125,5.082 10.759172,5.007 11,5 l 1,0 0,1 c 0,0.28647 -0.03434,0.55065 -0.25,0.75 l -2.28125,2.28125 2.25,2.25 C 11.906938,11.46942 11.999992,11.7347 12,12 l 0,1 -1,0 c -0.265301,-10e-6 -0.530586,-0.0931 -0.71875,-0.28125 L 8,10.4375 5.71875,12.71875 C 5.530586,12.90694 5.26529,13 5,13 l -1,0 0,-1 c -3e-6,-0.26529 0.09306,-0.53058 0.28125,-0.71875 L 6.5625,9.03125 4.28125,6.75 C 4.070508,6.55537 3.97809,6.28075 4,6 L 4,5 z"
-       id="path10839-9"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Andale Mono;-inkscape-font-specification:Andale Mono" />
-  </g>
+<?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/CloseTimeline.png b/Source/WebInspectorUI/UserInterface/Images/gtk/CloseTimeline.png
deleted file mode 100644
index a033c4efa..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/CloseTimeline.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/CloseTimeline@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/CloseTimeline@2x.png
deleted file mode 100644
index 1c395e132..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/CloseTimeline@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/CloseWhite.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/CloseWhite.svg
index 9376b2f64..0039c83ae 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/CloseWhite.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/CloseWhite.svg
@@ -1,53 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="14"
-   id="svg3791">
-  <defs
-     id="defs3793" />
-  <metadata
-     id="metadata3796">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-2)"
-     id="layer1">
-    <path
-       d="m 4,5 1,0 c 0.01037,-1.2e-4 0.02079,-4.6e-4 0.03125,0 0.254951,0.0112 0.50987,0.12858 0.6875,0.3125 L 8,7.59375 10.3125,5.3125 C 10.578125,5.082 10.759172,5.007 11,5 l 1,0 0,1 c 0,0.28647 -0.03434,0.55065 -0.25,0.75 l -2.28125,2.28125 2.25,2.25 C 11.906938,11.46942 11.999992,11.7347 12,12 l 0,1 -1,0 c -0.265301,-10e-6 -0.530586,-0.0931 -0.71875,-0.28125 L 8,10.4375 5.71875,12.71875 C 5.530586,12.90694 5.26529,13 5,13 l -1,0 0,-1 c -3e-6,-0.26529 0.09306,-0.53058 0.28125,-0.71875 L 6.5625,9.03125 4.28125,6.75 C 4.070508,6.55537 3.97809,6.28075 4,6 L 4,5 z"
-       id="path10839-9"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Andale Mono;-inkscape-font-specification:Andale Mono" />
-  </g>
+<?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/Colors.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Colors.png
deleted file mode 100644
index 8a7634561..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Colors.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Colors@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Colors@2x.png
deleted file mode 100644
index 2c12841a0..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Colors@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge.png
deleted file mode 100644
index 2c12841a0..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge@2x.png
deleted file mode 100644
index 02713789a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge@2x.png
+++ /dev/null
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
index 8009d24eb..0f16fc104 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/ContentFlow.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ContentFlow.svg
@@ -1,70 +1,8 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3012">
-  <defs
-     id="defs3014" />
-  <metadata
-     id="metadata3017">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 2.8124436,0.50054895 a 1.0000999,1.0000999 0 0 0 -0.8125,1.00000005 l 0,13 a 1.0000999,1.0000999 0 0 0 1.0000001,1 l 9.9999993,0 a 1.0000999,1.0000999 0 0 0 1,-1 l 0,-9.4375 a 1.0000999,1.0000999 0 0 0 -0.28125,-0.71875 L 10.156194,0.78179895 a 1.0000999,1.0000999 0 0 0 -0.7187503,-0.28125 l -6.4375,0 a 1.0000999,1.0000999 0 0 0 -0.0937,0 1.0000999,1.0000999 0 0 0 -0.0937,0 z m 1.1875001,2.00000005 5,0 0,3 2.9999993,0 0,8 -7.9999993,0 0,-11 z"
-       id="path35724"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1.99999988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="m 9.4172809,6.11099 c -0.8602344,0 -1.55631,0.72246 -1.55631,1.58269 0,0.86024 0.6960756,1.55632 1.55631,1.55632 0.8602351,0 1.5826901,-0.69608 1.5826901,-1.55632 0,-0.86023 -0.722455,-1.58269 -1.5826901,-1.58269 z m 0,1.00237 c 0.3197979,0 0.5803159,0.26053 0.5803159,0.58032 0,0.3198 -0.260518,0.55395 -0.5803159,0.55395 -0.319798,0 -0.553936,-0.23415 -0.553936,-0.55395 0,-0.31979 0.234138,-0.58032 0.553936,-0.58032 z"
-       id="path35728"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1.18468678;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    <rect
-       width="2.0999999"
-       height="5.5"
-       x="4.9999571"
-       y="3.5589108"
-       id="rect35730"
-       style="color:#000000;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    <rect
-       width="6.0000138"
-       height="2.4000001"
-       x="4.9999571"
-       y="10.10043"
-       id="rect35734"
-       style="color:#000000;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  </g>
+<?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/Crosshair.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Crosshair.svg
index 7e86d6987..0212dc075 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Crosshair.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Crosshair.svg
@@ -1,66 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3791">
-  <defs
-     id="defs3793" />
-  <metadata
-     id="metadata3796">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <rect
-       width="15.973606"
-       height="16"
-       rx="0"
-       ry="0"
-       x="0.013196949"
-       y="-8.8214873e-11"
-       id="rect10265"
-       style="color:#bebebe;fill:none;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible" />
-    <path
-       d="M 7.90625,0.46875 C 7.677428,0.51245 7.495897,0.73545 7.5,0.96875 l 0,0.59375 C 4.339213,1.80832 1.823631,4.31572 1.5625,7.46875 l -0.5,0 c -0.03105,-0.003 -0.0627,-0.003 -0.09375,0 C 0.706803,7.49255 0.475471,7.76894 0.5,8.03125 0.52456,8.29356 0.80070315,8.49413 1.0625,8.46875 l 0.5,0 c 0.232558,3.18201 2.7558951,5.75257 5.9375,6 l 0,0.5 C 7.496,15.23291 7.7362559,15.5 8,15.5 c 0.263744,0 0.503724,-0.26709 0.5,-0.53125 l 0,-0.5 c 3.202607,-0.23774 5.750163,-2.82717 5.96875,-6.03125 l 0.53125,0 c 0.263724,0.004 0.5,-0.23582 0.5,-0.5 0,-0.26418 -0.236276,-0.50374 -0.5,-0.5 l -0.53125,0 C 14.192873,4.29142 11.660933,1.79715 8.5,1.5625 l 0,-0.59375 C 8.505,0.67258 8.19673,0.4132 7.90625,0.46875 z m -0.4375,3.125 0,0.5 c -0.004,0.263724 0.23582,0.5 0.5,0.5 0.26418,0 0.50374,-0.236276 0.5,-0.5 l 0,-0.5 C 10.567141,3.8107419 12.203443,5.4112782 12.4375,7.5 l -0.53125,0 c -0.263724,-0.00374 -0.5,0.23582 -0.5,0.5 0,0.26418 0.236276,0.504 0.5,0.5 l 0.53125,0 c -0.22717,2.100544 -1.864105,3.748532 -3.96875,3.96875 l 0,-0.53125 c 0.00374,-0.263724 -0.23582,-0.5 -0.5,-0.5 -0.26418,0 -0.504,0.236276 -0.5,0.5 l 0,0.5 C 5.3889066,12.191828 3.7760764,10.558927 3.5625,8.46875 l 0.5,0 c 0.263724,0.004 0.5,-0.23582 0.5,-0.5 0,-0.26418 -0.236276,-0.50374 -0.5,-0.5 l -0.46875,0 c 0.2524781,-2.0409981 1.8277243,-3.63631 3.875,-3.875 z"
-       id="path4640"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2.15649271;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="m -91,478 a 1,1 0 1 1 -2,0 1,1 0 1 1 2,0 z"
-       transform="translate(99.981204,-470.0431)"
-       id="path5428"
-       style="color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  </g>
+<?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="currentColor" 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 fill="currentColor" 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
index 3cbf16c0a..63d0efda1 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMCharacterData.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMCharacterData.svg
@@ -1,345 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient8358">
-      <stop
-         id="stop8360"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8362"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#f24e4e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#fde7e7;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#fab8b8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#fbc3c3;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#a40000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7822"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7827"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient7830"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient7832"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7842"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-7.1138287"
-       y1="3.9952662"
-       x2="-4.3796625"
-       y2="3.9952662"
-       id="linearGradient8364"
-       xlink:href="#linearGradient8358"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient7830);fill-opacity:1;stroke:url(#linearGradient7832);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient7827);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 8.84375,2.90625 c -3.0469916,0 -5.25,2.2770256 -5.25,5.0625 0,2.734513 2.0914806,5.125 5.15625,5.125 0.8846304,0 1.860731,-0.225265 2.352241,-0.425132 L 11.78125,12.40625 c 0.49406,-0.192107 0.76412,-0.822245 0.5625,-1.3125 L 11.875,9.96875 C 11.682282,9.489458 11.077018,9.2237325 10.59375,9.40625 L 10.120062,9.5853883 C 9.865123,9.7020267 9.3405369,9.78125 9,9.78125 c -0.7341276,0 -1.1718661,-0.2140186 -1.46875,-0.5 -0.2968839,-0.2859814 -0.5,-0.6829263 -0.5,-1.3125 0,-1.0670656 0.5454796,-1.8125 1.78125,-1.8125 0.3688751,0 0.7235045,0.00669 1.46875,0.28125 L 10.5,6.5 c 0.475877,0.164148 1.057253,-0.097471 1.25,-0.5625 l 0.46875,-1.125 C 12.42037,4.3222451 12.15031,3.6921065 11.65625,3.5 L 11.46875,3.4375 C 11.4577,3.43311 11.44853,3.44183 11.4375,3.4375 10.483734,3.0636319 9.5811542,2.90625 8.84375,2.90625 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 8.84375,3.40625 c -2.8203244,0 -4.75,2.0170263 -4.75,4.5625 0,2.502702 1.8270367,4.625 4.65625,4.625 0.8066901,0 1.733218,-0.188338 2.194734,-0.375419 L 11.59375,11.9375 c 0.24703,-0.09605 0.38206,-0.411123 0.28125,-0.65625 l -0.46875,-1.125 C 11.309876,9.9237356 11.019188,9.792926 10.78125,9.875 L 10.5625,9.9375 C 10.002086,10.159551 9.4238705,10.28125 9,10.28125 c -0.8339221,0 -1.4090147,-0.236332 -1.8125,-0.625 C 6.7840147,9.267582 6.53125,8.7071675 6.53125,7.96875 c 0,-1.2943389 0.7988124,-2.3125 2.28125,-2.3125 0.3688754,0 0.8143373,0.013835 1.625,0.3125 l 0.21875,0.0625 C 10.901377,6.1320598 11.216447,5.9970301 11.3125,5.75 L 11.75,4.625 C 11.85081,4.3798725 11.71578,4.0648033 11.46875,3.96875 l -0.1875,-0.0625 c -0.903856,-0.3590662 -1.7532936,-0.5 -2.4375,-0.5 z m 0,1 c 0.4839172,0 1.1237891,0.1234491 1.78125,0.34375 L 10.53125,5 C 9.7674155,4.766698 9.1350983,4.65625 8.8125,4.65625 c -1.975772,0 -3.28125,1.5636144 -3.28125,3.3125 0,0.9561052 0.3208119,1.8122087 0.9375,2.40625 0.6166881,0.594041 1.4977389,0.90625 2.53125,0.90625 0.5045985,0 1.092359,-0.150072 1.65625,-0.34375 L 10.75,11.15625 c -0.697343,0.260541 -1.4140968,0.4375 -2,0.4375 -2.3581012,0 -3.65625,-1.58592 -3.65625,-3.625 0,-2.0654725 1.3830099,-3.5625 3.75,-3.5625 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient7842);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 8.8414986,3.9135453 c -2.5936573,0 -4.2536022,1.763691 -4.2536022,4.0691641 0,2.2708906 1.5792533,4.1037466 4.1729105,4.1037466 0.7377514,0 1.6023061,-0.172911 2.4438041,-0.53026 l 0.207493,-0.08069 -0.461095,-1.141211 -0.207493,0.08069 c -0.610951,0.242075 -1.2219027,0.368876 -1.7291068,0.368876 -1.8674332,0 -2.9740633,-1.1181573 -2.9740633,-2.81268 0,-1.5216123 1.0374657,-2.8011526 2.7665705,-2.8011526 0.3688757,0 0.9337184,3e-7 1.8097986,0.3227665 l 0.21902,0.080692 0.461095,-1.129683 -0.207493,-0.080692 C 10.247839,4.0288194 9.4639763,3.9135453 8.8414986,3.9135453"
-     id="path7836"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
index e42b996bb..bee5ab7b3 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMComment.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMComment.svg
@@ -1,348 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient8896">
-      <stop
-         id="stop8898"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8900"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5676">
-      <stop
-         id="stop5678"
-         style="stop-color:#4e9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5680"
-         style="stop-color:#4e9a06;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#4f9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#8ae234;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#edfae0;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#f2fce8;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#edfae0;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#d9f5bd;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#dff7c7;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#4f9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#8ae234;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.2982244"
-       y1="2.83077"
-       x2="-2.5372779"
-       y2="2.83077"
-       id="linearGradient5690"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.6747751"
-       y1="4.3266273"
-       x2="-2.031734"
-       y2="4.3266273"
-       id="linearGradient8902"
-       xlink:href="#linearGradient8896"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient8908"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient8913"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient8916"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient8918"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient8928"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient8916);fill-opacity:1;stroke:url(#linearGradient8918);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient8913);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 8.84375,2.90625 c -3.0469916,0 -5.25,2.2770256 -5.25,5.0625 0,2.734513 2.0914806,5.125 5.15625,5.125 0.8846304,0 1.860731,-0.225265 2.352241,-0.425132 L 11.78125,12.40625 c 0.49406,-0.192107 0.76412,-0.822245 0.5625,-1.3125 L 11.875,9.96875 C 11.682282,9.489458 11.077018,9.2237325 10.59375,9.40625 L 10.120062,9.5853883 C 9.865123,9.7020267 9.3405369,9.78125 9,9.78125 c -0.7341276,0 -1.1718661,-0.2140186 -1.46875,-0.5 -0.2968839,-0.2859814 -0.5,-0.6829263 -0.5,-1.3125 0,-1.0670656 0.5454796,-1.8125 1.78125,-1.8125 0.3688751,0 0.7235045,0.00669 1.46875,0.28125 L 10.5,6.5 c 0.475877,0.164148 1.057253,-0.097471 1.25,-0.5625 l 0.46875,-1.125 C 12.42037,4.3222451 12.15031,3.6921065 11.65625,3.5 L 11.46875,3.4375 C 11.4577,3.43311 11.44853,3.44183 11.4375,3.4375 10.483734,3.0636319 9.5811542,2.90625 8.84375,2.90625 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 8.84375,3.40625 c -2.8203244,0 -4.75,2.0170263 -4.75,4.5625 0,2.502702 1.8270367,4.625 4.65625,4.625 0.8066901,0 1.733218,-0.188338 2.194734,-0.375419 L 11.59375,11.9375 c 0.24703,-0.09605 0.38206,-0.411123 0.28125,-0.65625 l -0.46875,-1.125 C 11.309876,9.9237356 11.019188,9.792926 10.78125,9.875 L 10.5625,9.9375 C 10.002086,10.159551 9.4238705,10.28125 9,10.28125 c -0.8339221,0 -1.4090147,-0.236332 -1.8125,-0.625 C 6.7840147,9.267582 6.53125,8.7071675 6.53125,7.96875 c 0,-1.2943389 0.7988124,-2.3125 2.28125,-2.3125 0.3688754,0 0.8143373,0.013835 1.625,0.3125 l 0.21875,0.0625 C 10.901377,6.1320598 11.216447,5.9970301 11.3125,5.75 L 11.75,4.625 C 11.85081,4.3798725 11.71578,4.0648033 11.46875,3.96875 l -0.1875,-0.0625 c -0.903856,-0.3590662 -1.7532936,-0.5 -2.4375,-0.5 z m 0,1 c 0.4839172,0 1.1237891,0.1234491 1.78125,0.34375 L 10.53125,5 C 9.7674155,4.766698 9.1350983,4.65625 8.8125,4.65625 c -1.975772,0 -3.28125,1.5636144 -3.28125,3.3125 0,0.9561052 0.3208119,1.8122087 0.9375,2.40625 0.6166881,0.594041 1.4977389,0.90625 2.53125,0.90625 0.5045985,0 1.092359,-0.150072 1.65625,-0.34375 L 10.75,11.15625 c -0.697343,0.260541 -1.4140968,0.4375 -2,0.4375 -2.3581012,0 -3.65625,-1.58592 -3.65625,-3.625 0,-2.0654725 1.3830099,-3.5625 3.75,-3.5625 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient8928);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 8.8414986,3.9135453 c -2.5936573,0 -4.2536022,1.763691 -4.2536022,4.0691641 0,2.2708906 1.5792533,4.1037466 4.1729105,4.1037466 0.7377514,0 1.6023061,-0.172911 2.4438041,-0.53026 l 0.207493,-0.08069 -0.461095,-1.141211 -0.207493,0.08069 c -0.610951,0.242075 -1.2219027,0.368876 -1.7291068,0.368876 -1.8674332,0 -2.9740633,-1.1181573 -2.9740633,-2.81268 0,-1.5216123 1.0374657,-2.8011526 2.7665705,-2.8011526 0.3688757,0 0.9337184,3e-7 1.8097986,0.3227665 l 0.21902,0.080692 0.461095,-1.129683 -0.207493,-0.080692 C 10.247839,4.0288194 9.4639763,3.9135453 8.8414986,3.9135453"
-     id="path8922"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
index 1de21c2ec..c9d356ae2 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMDocument.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMDocument.svg
@@ -1,407 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3601">
-  <defs
-     id="defs3603">
-    <linearGradient
-       id="linearGradient6090">
-      <stop
-         id="stop6092"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6094"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient8412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.9827598,-4.8556584)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient8486"
-       xlink:href="#linearGradient8480"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480">
-      <stop
-         id="stop8482"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient7874"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       id="linearGradient4393-7">
-      <stop
-         id="stop4395-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient7876"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2"
-         style="stop-color:#f2f2f2;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9"
-         style="stop-color:#d9dad8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6"
-         style="stop-color:#dfe0dd;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient7878"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853">
-      <stop
-         id="stop4855"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880-9"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-8">
-      <stop
-         id="stop4855-0"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-6"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3707"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient3734"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3736"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3738"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3740"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3744"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3746"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="-6.0724082"
-       y1="3.0201192"
-       x2="-2.9216745"
-       y2="3.0201192"
-       id="linearGradient4526"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4585"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5185"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.9777341"
-       y1="2.6982248"
-       x2="-4.2471185"
-       y2="2.6982248"
-       id="linearGradient6096"
-       xlink:href="#linearGradient6090"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6767"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient6772"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069527,0,0,0.11066585,23.682408,-4.8510725)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient6775"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient6777"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6794"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6800"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.01152783,-1.3637543e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6846"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.01152783,-1.3637543e-7)" />
-  </defs>
-  <metadata
-     id="metadata3606">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134779 2.112266,2.280564"
-     id="path7868"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.499998"
-     id="rect7870"
-     style="color:#000000;fill:url(#linearGradient6775);fill-opacity:1;stroke:url(#linearGradient6777);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195255,1.4949223 c -1.2946897,0 -2.3246007,1.0324565 -2.3246007,2.3274412 l 0,8.3552715 c 0,1.294985 1.029911,2.327441 2.3246007,2.327441 l 8.3609525,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552715 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609525,0 z"
-     id="path7872-9"
-     style="color:#000000;fill:none;stroke:url(#linearGradient6772);stroke-width:0.98984575;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="M 4.40625,3 C 3.9256176,3.060582 3.5274954,3.5155791 3.53125,4 l 0,8 c 5.24e-5,0.523584 0.4764155,0.999948 1,1 L 6.5,13 c 0.6685874,0 1.4702468,-0.0046 2.3125,-0.21875 l 0,0.03125 c 1.352344,-0.32232 2.336032,-1.145831 2.90625,-2.09375 0.570218,-0.9479189 0.75,-1.9853402 0.75,-2.9375 0,-1.0036947 -0.246209,-2.2186114 -1.09375,-3.1875 C 10.527459,3.6248614 9.1168382,3 7.21875,3 L 4.53125,3 C 4.489638,2.99739 4.447862,2.99739 4.40625,3 z m 2.53125,3.3125 0.3125,0 c 0.7256284,0 1.1351602,0.1504691 1.375,0.375 0.2398398,0.2245309 0.40625,0.5959602 0.40625,1.28125 0,0.5646631 -0.1309306,0.8446272 -0.2907569,1.1070613 C 8.5806667,9.3382455 8.3928909,9.4591946 8.0625,9.5625 7.7572592,9.6579415 7.3308179,9.684385 6.9375,9.6875 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="M 4.40625,3.5 C 4.1883317,3.5561648 4.0241511,3.7750723 4.03125,4 l 0,8 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 L 6.5,12.5 c 0.6685873,0 1.4263161,0.006 2.1875,-0.1875 1.2323675,-0.293725 2.084577,-0.997312 2.59375,-1.84375 0.509173,-0.846438 0.6875,-1.8050805 0.6875,-2.6875 C 11.96875,6.8672993 11.745817,5.7901 11,4.9375 10.254183,4.0849 9.0121736,3.5 7.21875,3.5 l -2.6875,0 C 4.489802,3.49478 4.447698,3.49478 4.40625,3.5 z m 0.625,1 2.1875,0 c 1.5840945,0 2.4888815,0.4737272 3.03125,1.09375 0.542368,0.6200228 0.71875,1.4530374 0.71875,2.1875 0,0.742939 -0.144169,1.5127739 -0.53125,2.15625 -0.387081,0.643476 -0.9763359,1.169716 -1.96875,1.40625 C 7.8697047,11.49605 7.1685871,11.5 6.5,11.5 l -1.46875,0 z m 0.75,0.3125 C 5.5747266,4.880161 5.4267205,5.095443 5.4375,5.3125 l 0,5.375 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 0.90625,0 c 0.4446191,0 1.0541541,7.61e-4 1.65625,-0.1875 0.5950885,-0.18607 1.200618,-0.605214 1.59375,-1.3125 0.180874,-0.3200077 0.4375,-0.8771634 0.4375,-1.71875 0,-0.9714748 -0.283825,-1.8215591 -0.875,-2.375 C 9.0650745,5.0403091 8.227242,4.8125 7.25,4.8125 l -1.3125,0 c -0.051655,-0.00817 -0.1045946,-0.00817 -0.15625,0 z m 0.65625,1 0.8125,0 c 0.8094996,0 1.3617983,0.1970824 1.71875,0.53125 0.3569517,0.3341676 0.5625,0.8443152 0.5625,1.625 0,0.6569709 -0.1624124,1.0397489 -0.3697345,1.388545 C 8.9541934,9.7060911 8.6084592,9.9308761 8.1875,10.0625 c -0.4209592,0.131624 -0.9122893,0.125 -1.34375,0.125 l -0.40625,0 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient6846);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 7.2391931,5.3025939 c 1.7867416,0 2.7896249,0.8991372 2.7896249,2.6512967 0,0.7492788 -0.2074926,1.2334296 -0.3573484,1.4985591 -0.6570598,1.2103733 -1.9366002,1.2449563 -2.81268,1.2449563 l -0.9221902,0 0,-5.3948121 1.3025937,0 m -0.023055,-1.3025936 -2.6974062,0 0,7.9999997 1.9942362,0 c 0.6685872,0 1.3832859,0 2.0634005,-0.172911 2.2247814,-0.530258 2.9048994,-2.4322779 2.9048994,-4.0576364 0,-1.6484133 -0.887612,-3.7694523 -4.2651299,-3.7694523"
-     id="path6840"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
index 1de21c2ec..c9d356ae2 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMDocumentType.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMDocumentType.svg
@@ -1,407 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3601">
-  <defs
-     id="defs3603">
-    <linearGradient
-       id="linearGradient6090">
-      <stop
-         id="stop6092"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6094"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient8412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.9827598,-4.8556584)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient8486"
-       xlink:href="#linearGradient8480"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480">
-      <stop
-         id="stop8482"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient7874"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       id="linearGradient4393-7">
-      <stop
-         id="stop4395-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient7876"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2"
-         style="stop-color:#f2f2f2;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9"
-         style="stop-color:#d9dad8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6"
-         style="stop-color:#dfe0dd;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient7878"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853">
-      <stop
-         id="stop4855"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880-9"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-8">
-      <stop
-         id="stop4855-0"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-6"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3707"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient3734"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3736"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3738"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3740"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3744"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3746"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="-6.0724082"
-       y1="3.0201192"
-       x2="-2.9216745"
-       y2="3.0201192"
-       id="linearGradient4526"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4585"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5185"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.9777341"
-       y1="2.6982248"
-       x2="-4.2471185"
-       y2="2.6982248"
-       id="linearGradient6096"
-       xlink:href="#linearGradient6090"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6767"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient6772"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069527,0,0,0.11066585,23.682408,-4.8510725)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient6775"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient6777"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6794"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6800"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.01152783,-1.3637543e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6846"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.01152783,-1.3637543e-7)" />
-  </defs>
-  <metadata
-     id="metadata3606">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134779 2.112266,2.280564"
-     id="path7868"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.499998"
-     id="rect7870"
-     style="color:#000000;fill:url(#linearGradient6775);fill-opacity:1;stroke:url(#linearGradient6777);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195255,1.4949223 c -1.2946897,0 -2.3246007,1.0324565 -2.3246007,2.3274412 l 0,8.3552715 c 0,1.294985 1.029911,2.327441 2.3246007,2.327441 l 8.3609525,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552715 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609525,0 z"
-     id="path7872-9"
-     style="color:#000000;fill:none;stroke:url(#linearGradient6772);stroke-width:0.98984575;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="M 4.40625,3 C 3.9256176,3.060582 3.5274954,3.5155791 3.53125,4 l 0,8 c 5.24e-5,0.523584 0.4764155,0.999948 1,1 L 6.5,13 c 0.6685874,0 1.4702468,-0.0046 2.3125,-0.21875 l 0,0.03125 c 1.352344,-0.32232 2.336032,-1.145831 2.90625,-2.09375 0.570218,-0.9479189 0.75,-1.9853402 0.75,-2.9375 0,-1.0036947 -0.246209,-2.2186114 -1.09375,-3.1875 C 10.527459,3.6248614 9.1168382,3 7.21875,3 L 4.53125,3 C 4.489638,2.99739 4.447862,2.99739 4.40625,3 z m 2.53125,3.3125 0.3125,0 c 0.7256284,0 1.1351602,0.1504691 1.375,0.375 0.2398398,0.2245309 0.40625,0.5959602 0.40625,1.28125 0,0.5646631 -0.1309306,0.8446272 -0.2907569,1.1070613 C 8.5806667,9.3382455 8.3928909,9.4591946 8.0625,9.5625 7.7572592,9.6579415 7.3308179,9.684385 6.9375,9.6875 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="M 4.40625,3.5 C 4.1883317,3.5561648 4.0241511,3.7750723 4.03125,4 l 0,8 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 L 6.5,12.5 c 0.6685873,0 1.4263161,0.006 2.1875,-0.1875 1.2323675,-0.293725 2.084577,-0.997312 2.59375,-1.84375 0.509173,-0.846438 0.6875,-1.8050805 0.6875,-2.6875 C 11.96875,6.8672993 11.745817,5.7901 11,4.9375 10.254183,4.0849 9.0121736,3.5 7.21875,3.5 l -2.6875,0 C 4.489802,3.49478 4.447698,3.49478 4.40625,3.5 z m 0.625,1 2.1875,0 c 1.5840945,0 2.4888815,0.4737272 3.03125,1.09375 0.542368,0.6200228 0.71875,1.4530374 0.71875,2.1875 0,0.742939 -0.144169,1.5127739 -0.53125,2.15625 -0.387081,0.643476 -0.9763359,1.169716 -1.96875,1.40625 C 7.8697047,11.49605 7.1685871,11.5 6.5,11.5 l -1.46875,0 z m 0.75,0.3125 C 5.5747266,4.880161 5.4267205,5.095443 5.4375,5.3125 l 0,5.375 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 0.90625,0 c 0.4446191,0 1.0541541,7.61e-4 1.65625,-0.1875 0.5950885,-0.18607 1.200618,-0.605214 1.59375,-1.3125 0.180874,-0.3200077 0.4375,-0.8771634 0.4375,-1.71875 0,-0.9714748 -0.283825,-1.8215591 -0.875,-2.375 C 9.0650745,5.0403091 8.227242,4.8125 7.25,4.8125 l -1.3125,0 c -0.051655,-0.00817 -0.1045946,-0.00817 -0.15625,0 z m 0.65625,1 0.8125,0 c 0.8094996,0 1.3617983,0.1970824 1.71875,0.53125 0.3569517,0.3341676 0.5625,0.8443152 0.5625,1.625 0,0.6569709 -0.1624124,1.0397489 -0.3697345,1.388545 C 8.9541934,9.7060911 8.6084592,9.9308761 8.1875,10.0625 c -0.4209592,0.131624 -0.9122893,0.125 -1.34375,0.125 l -0.40625,0 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient6846);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 7.2391931,5.3025939 c 1.7867416,0 2.7896249,0.8991372 2.7896249,2.6512967 0,0.7492788 -0.2074926,1.2334296 -0.3573484,1.4985591 -0.6570598,1.2103733 -1.9366002,1.2449563 -2.81268,1.2449563 l -0.9221902,0 0,-5.3948121 1.3025937,0 m -0.023055,-1.3025936 -2.6974062,0 0,7.9999997 1.9942362,0 c 0.6685872,0 1.3832859,0 2.0634005,-0.172911 2.2247814,-0.530258 2.9048994,-2.4322779 2.9048994,-4.0576364 0,-1.6484133 -0.887612,-3.7694523 -4.2651299,-3.7694523"
-     id="path6840"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
index a29a0e8c8..fba0a631e 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMElement.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMElement.svg
@@ -1,381 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient10015">
-      <stop
-         id="stop10017"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10019"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#f1e9f0;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#f5eff4;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#f1e9f0;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#e1d1e0;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#e6d8e5;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4274"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4280"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="-6.186018"
-       y1="3.5976331"
-       x2="-4.0198994"
-       y2="3.5976331"
-       id="linearGradient10021"
-       xlink:href="#linearGradient10015"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10030"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="M 5.28125,3 C 4.8006176,3.060582 4.4024954,3.5155791 4.40625,4 l 0,8 c 0,0.776731 0.2388401,1 1,1 l 5.1875,0 c 0.523584,-5.2e-5 0.999948,-0.476416 1,-1 l 0,-1.3125 c -5.2e-5,-0.523584 -0.476416,-0.9999476 -1,-1 l -2.78125,0 0,-0.09375 2.375,0 c 0.523584,-5.24e-5 0.999948,-0.4764155 1,-1 l 0,-1.3125 C 11.181289,6.8250542 10.823148,6.3980394 10.375,6.3125 l 0.21875,0 c 0.523584,-5.24e-5 0.999948,-0.4764155 1,-1 l 0,-1.3125 c -5.2e-5,-0.5235845 -0.476416,-0.9999476 -1,-1 L 5.40625,3 C 5.364638,2.99739 5.322862,2.99739 5.28125,3 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="M 5.28125,3.5 C 5.0633317,3.5561648 4.8991511,3.7750723 4.90625,4 l 0,8 c 0,0.385534 0.1060966,0.5 0.5,0.5 l 5.1875,0 c 0.261792,-2.6e-5 0.499974,-0.238208 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.261792 -0.238208,-0.499974 -0.5,-0.5 l -3.28125,0 0,-1.09375 2.875,0 c 0.261792,-2.62e-5 0.499974,-0.2382078 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.2617922 -0.238208,-0.4999738 -0.5,-0.5 l -2.875,0 0,-0.96875 3.28125,0 c 0.261792,-2.62e-5 0.499974,-0.2382078 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.2617922 -0.238208,-0.4999738 -0.5,-0.5 l -5.1875,0 C 5.364802,3.49478 5.322698,3.49478 5.28125,3.5 z m 0.625,1 4.1875,0 0,0.3125 -3.28125,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,1.96875 c 2.62e-5,0.2617922 0.2382078,0.4999738 0.5,0.5 l 2.875,0 0,0.3125 -2.875,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,2.09375 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 3.28125,0 0,0.3125 -4.1875,0 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient10030);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 5.3948126,12 5.2103744,0 0,-1.302594 -3.792507,0 0,-2.0979823 3.377521,0 0,-1.3025936 -3.377521,0 0,-1.9942362 3.792507,0 0,-1.3025936 -5.2103744,0 0,7.9999997"
-     id="path10024"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
index 641663b23..6dd1a7c5f 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMNode.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMNode.svg
@@ -1,389 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3601">
-  <defs
-     id="defs3603">
-    <linearGradient
-       id="linearGradient6090">
-      <stop
-         id="stop6092"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6094"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient8412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.9827598,-4.8556584)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient8486"
-       xlink:href="#linearGradient8480"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480">
-      <stop
-         id="stop8482"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient7874"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       id="linearGradient4393-7">
-      <stop
-         id="stop4395-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient7876"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2"
-         style="stop-color:#f2f2f2;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9"
-         style="stop-color:#d9dad8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6"
-         style="stop-color:#dfe0dd;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient7878"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853">
-      <stop
-         id="stop4855"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880-9"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-8">
-      <stop
-         id="stop4855-0"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-6"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3707"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient3734"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3736"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3738"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3740"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3744"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3746"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="-6.0724082"
-       y1="3.0201192"
-       x2="-2.9216745"
-       y2="3.0201192"
-       id="linearGradient4526"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4585"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5185"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.9777341"
-       y1="2.6982248"
-       x2="-4.2471185"
-       y2="2.6982248"
-       id="linearGradient6096"
-       xlink:href="#linearGradient6090"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10060"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient10065"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069527,0,0,0.11066585,23.682408,-4.8510725)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient10068"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient10070"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10080"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata3606">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134779 2.112266,2.280564"
-     id="path7868"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.499998"
-     id="rect7870"
-     style="color:#000000;fill:url(#linearGradient10068);fill-opacity:1;stroke:url(#linearGradient10070);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195255,1.4949223 c -1.2946897,0 -2.3246007,1.0324565 -2.3246007,2.3274412 l 0,8.3552715 c 0,1.294985 1.029911,2.327441 2.3246007,2.327441 l 8.3609525,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552715 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609525,0 z"
-     id="path7872-9"
-     style="color:#000000;fill:none;stroke:url(#linearGradient10065);stroke-width:0.98984575;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 4.5,3 c -0.6444896,0 -1,0.3180842 -1,1 l 0,8 c 5.24e-5,0.523584 0.4764155,0.999948 1,1 l 1.4375,0 c 0.5235845,-5.2e-5 0.9999476,-0.476416 1,-1 l 0,-2.5625 2,3.09375 C 9.1102061,12.807087 9.4247574,12.988559 9.75,13 l 1.75,0 c 0.523584,-5.2e-5 0.999948,-0.476416 1,-1 l 0,-8 c -5.2e-5,-0.5235845 -0.476416,-0.9999476 -1,-1 l -1.4375,0 c -0.5235845,5.24e-5 -0.9999476,0.4764155 -1,1 l 0,2.5625 -2,-3.09375 C 6.8841192,3.1843062 6.5544978,3.0011832 6.21875,3 z m 1,2 0.1875,0 0.03125,0.0625 C 5.6424523,5.0849051 5.5688435,5.1164518 5.5,5.15625 z m 4.96875,5.84375 c 0.01042,1.63e-4 0.02083,1.63e-4 0.03125,0 L 10.5,11 10.28125,11 10.25,10.90625 c 0.07498,-0.01243 0.148524,-0.03345 0.21875,-0.0625 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Black Olives;-inkscape-font-specification:Black Olives" />
-  <path
-     d="M 4.5,3.5 C 4.114692,3.5 4,3.6800294 4,4 l 0,8 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 1.4375,0 c 0.2617922,-2.6e-5 0.4999738,-0.238208 0.5,-0.5 l 0,-4.21875 2.90625,4.5 C 9.4336596,12.413425 9.5901602,12.497695 9.75,12.5 l 1.75,0 c 0.261792,-2.6e-5 0.499974,-0.238208 0.5,-0.5 L 12,4 C 11.999974,3.7382078 11.761792,3.5000262 11.5,3.5 l -1.4375,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,4.21875 -2.9375,-4.5 C 6.5350904,3.5865746 6.3785898,3.502305 6.21875,3.5 z m 0.5,1 0.9375,0 3.71875,5.71875 c 0.2427911,0.338424 0.897721,0.13517 0.90625,-0.28125 l 0,-5.4375 0.4375,0 0,7 -0.96875,0 -3.6875,-5.71875 C 6.1009589,5.442826 5.4460291,5.6460801 5.4375,6.0625 l 0,5.4375 L 5,11.5 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient10080);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Black Olives;-inkscape-font-specification:Black Olives" />
-  <path
-     d="m 4.5072043,4.0000003 0,7.9999997 1.4178674,0 0,-5.9481266 L 9.7636882,12 l 1.7291068,0 0,-7.9999997 -1.417868,0 0,5.9365992 -3.8616709,-5.9365992 -1.7060518,0"
-     id="path10074"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
index 18bb0aff3..d2c5d55a8 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMTextNode.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMTextNode.svg
@@ -1,363 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient9464">
-      <stop
-         id="stop9466"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop9468"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#f24e4e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#fde7e7;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#fab8b8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#fbc3c3;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#a40000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="-6.8676748"
-       y1="4.3834319"
-       x2="-4.1903138"
-       y2="4.3834319"
-       id="linearGradient9470"
-       xlink:href="#linearGradient9464"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient9479"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 4.65625,3 c -0.7002789,0 -1,0.3361889 -1,1 l 0,1.3125 c 5.24e-5,0.5235845 0.4764155,0.9999476 1,1 l 1.625,0 0,5.6875 c 5.24e-5,0.523584 0.4764155,0.999948 1,1 l 1.4375,0 c 0.5235845,-5.2e-5 0.9999476,-0.476416 1,-1 l 0,-5.6875 1.625,0 c 0.523584,-5.24e-5 0.999948,-0.4764155 1,-1 l 0,-1.3125 c -5.2e-5,-0.5235845 -0.476416,-0.9999476 -1,-1 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 4.65625,3.5 c -0.3097456,0 -0.5,0.1476744 -0.5,0.5 l 0,1.3125 c 2.62e-5,0.2617922 0.2382078,0.4999738 0.5,0.5 l 2.125,0 0,6.1875 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 1.4375,0 c 0.2617922,-2.6e-5 0.4999738,-0.238208 0.5,-0.5 l 0,-6.1875 2.125,0 c 0.261792,-2.62e-5 0.499974,-0.2382078 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.2617922 -0.238208,-0.4999738 -0.5,-0.5 z m 0.5,1 5.6875,0 0,0.3125 -2.125,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,6.1875 -0.4375,0 0,-6.1875 c -2.62e-5,-0.2617922 -0.2382078,-0.4999738 -0.5,-0.5 l -2.125,0 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient9479);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 4.6628244,4.0000003 0,1.3025936 2.628242,0 0,6.6974061 1.4178674,0 0,-6.6974061 2.6282422,0 0,-1.3025936 -6.6743516,0"
-     id="path9473"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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/DOMTree.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMTree.svg
deleted file mode 100644
index 0c69a95bf..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMTree.svg
+++ /dev/null
@@ -1,359 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient8896">
-      <stop
-         id="stop8898"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8900"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5676">
-      <stop
-         id="stop5678"
-         style="stop-color:#4e9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5680"
-         style="stop-color:#4e9a06;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#4f9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#8ae234;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#edfae0;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#f2fce8;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#edfae0;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#d9f5bd;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#dff7c7;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#4f9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#8ae234;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.2982244"
-       y1="2.83077"
-       x2="-2.5372779"
-       y2="2.83077"
-       id="linearGradient5690"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.6747751"
-       y1="4.3266273"
-       x2="-2.031734"
-       y2="4.3266273"
-       id="linearGradient8902"
-       xlink:href="#linearGradient8896"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient8908"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient8913"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient8916"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient8918"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient8928"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="7.0862341"
-       y1="-0.4476825"
-       x2="7.0862341"
-       y2="9.954217"
-       id="linearGradient4994"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient8916);fill-opacity:1;stroke:url(#linearGradient8918);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient8913);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <g
-     id="g4996">
-    <path
-       d="m 6.835951,4.486494 0,2.3494567 0.939783,0 0,0.9397829 -2.093153,0 -0.234946,0 0,0.2349458 0,1.1533698 -0.961141,0 0,2.3280988 2.349457,0 0,-2.3280988 -0.918424,0 0,-0.9184241 4.207664,0 0,0.9184241 -0.939783,0 0,2.3494568 2.328098,0 0,-2.3494568 -0.918424,0 0,-1.1533698 0,-0.2349458 -0.234945,0 -2.114512,0 0,-0.9397829 0.939783,0 0,-2.3494567 -2.349457,0 z"
-       id="rect8421-00"
-       style="color:#bebebe;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    <path
-       d="m 6.835951,4.486494 0,2.3494567 0.939783,0 0,0.9397829 -2.093153,0 -0.234946,0 0,0.2349458 0,1.1533698 -0.961141,0 0,2.3280988 2.349457,0 0,-2.3280988 -0.918424,0 0,-0.9184241 4.207664,0 0,0.9184241 -0.939783,0 0,2.3494568 2.328098,0 0,-2.3494568 -0.918424,0 0,-1.1533698 0,-0.2349458 -0.234945,0 -2.114512,0 0,-0.9397829 0.939783,0 0,-2.3494567 -2.349457,0 z"
-       id="rect8421-4"
-       style="color:#bebebe;fill:none;stroke:url(#linearGradient4994);stroke-width:0.89999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    <path
-       d="m 6.835951,4.486494 0,2.3494567 0.939783,0 0,0.9397829 -2.093153,0 -0.234946,0 0,0.2349458 0,1.1533698 -0.961141,0 0,2.3280988 2.349457,0 0,-2.3280988 -0.918424,0 0,-0.9184241 4.207664,0 0,0.9184241 -0.939783,0 0,2.3494568 2.328098,0 0,-2.3494568 -0.918424,0 0,-1.1533698 0,-0.2349458 -0.234945,0 -2.114512,0 0,-0.9397829 0.939783,0 0,-2.3494567 -2.349457,0 z"
-       id="rect8421-0"
-       style="color:#bebebe;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  </g>
-</svg>
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/DisclosureTriangleSmallClosed.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleSmallClosed.svg
deleted file mode 100644
index 9f2ebacef..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleSmallClosed.svg
+++ /dev/null
@@ -1,53 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="13"
-   height="13"
-   id="svg6674">
-  <defs
-     id="defs6676" />
-  <metadata
-     id="metadata6679">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="matrix(1.2222222,0,0,1.2222222,1.0000001,-7.5555553)"
-     id="layer1-72">
-    <path
-       d="M 2.25,16 6.75,11.5 2.25,7 z"
-       id="path6400-7"
-       style="fill-opacity:1;stroke:none" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleSmallOpen.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleSmallOpen.svg
deleted file mode 100644
index 4d5984012..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleSmallOpen.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="13"
-   height="13"
-   id="svg6674">
-  <defs
-     id="defs6676" />
-  <metadata
-     id="metadata6679">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-3)"
-     id="layer1">
-    <g
-       transform="matrix(1.2222223,0,0,1.2222223,0.99999962,-5.1666676)"
-       id="layer1-7">
-      <path
-         d="m 1.5e-7,9.75 4.49999965,4.5 4.5000001,-4.5 z"
-         id="path6400"
-         style="fill-opacity:1;stroke:none" />
-    </g>
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleTinyClosed.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleTinyClosed.svg
deleted file mode 100644
index 47f917bb9..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleTinyClosed.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="8"
-   height="8"
-   id="svg6674">
-  <defs
-     id="defs6676" />
-  <metadata
-     id="metadata6679">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-8)"
-     id="layer1">
-    <g
-       transform="matrix(0.77777778,0,0,0.77777778,0.49999999,3.0555555)"
-       id="layer1-72">
-      <path
-         d="M 2.25,16 6.75,11.5 2.25,7 z"
-         id="path6400-7"
-         style="fill-opacity:1;stroke:none" />
-    </g>
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleTinyOpen.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleTinyOpen.svg
deleted file mode 100644
index cad2a48b9..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangleTinyOpen.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="8"
-   height="8"
-   id="svg6674">
-  <defs
-     id="defs6676" />
-  <metadata
-     id="metadata6679">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-8)"
-     id="layer1">
-    <g
-       transform="matrix(0.7777778,0,0,0.7777778,0.49999988,2.6666664)"
-       id="layer1-7">
-      <path
-         d="m 1.5e-7,9.75 4.49999965,4.5 4.5000001,-4.5 z"
-         id="path6400"
-         style="fill-opacity:1;stroke:none" />
-    </g>
-  </g>
-</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
index b45d2cd70..5abd0bafd 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DockBottom.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DockBottom.svg
@@ -1,54 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="14"
-   id="svg3020">
-  <defs
-     id="defs3022" />
-  <metadata
-     id="metadata3025">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-2)"
-     id="layer1">
-    <path
-       d="M 2.28125,1 C 1.5934111,1.0555903 0.99702097,1.5950559 1,2.1875 l 0,9.625 c -0.00205,0.03747 -0.00205,0.05628 0,0.09375 L 1,13 l 1.1875,0 0.21875,0 11.1875,0 0.125,0 L 15,13 15,12.03125 c 0.0082,-0.07477 0.0082,-0.143979 0,-0.21875 l 0,-9.625 C 14.999927,1.5592677 14.326365,1.0000628 13.59375,1 L 2.40625,1 C 2.362556,0.99824 2.3249437,0.99824 2.28125,1 z m 5.59375,1.03125 0.625,0 0.03125,0 c 0.7392332,0 1,0.065018 1,0.8125 l 0,1.3125 1.875,-1.90625 c 0.131548,-0.1296029 0.316566,-0.198882 0.5,-0.21875 0.694857,-0.1144009 1.202829,0.956737 0.6875,1.4375 l -1.875,1.875 1.28125,0 c 0.650635,0 0.8125,0.3340245 0.8125,0.96875 l 0,0.6875 -0.75,0 L 12,7 8.8125,7 8.75,7 C 8.732779,7.0005306 8.704721,7.0005306 8.6875,7 l -0.0625,0 -0.75,0 0,-0.65625 C 7.87288,6.3092798 7.87288,6.28447 7.875,6.25 7.864241,6.1728426 7.864241,6.108407 7.875,6.03125 l 0,-3.1875 0,-0.0625 0,-0.75 z M 3,8 13,8 13,11 3,11 3,8 z"
-       transform="translate(0,2)"
-       id="rect13039-7"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
+<?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
index fe6f1d22a..6ec5e98dc 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DockRight.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DockRight.svg
@@ -1,37 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="14"
-   id="svg3020">
-  <defs
-     id="defs3022" />
-  <metadata
-     id="metadata3025">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-2)"
-     id="layer1">
-    <path
-       d="M 2.28125,1 C 1.5934111,1.0555903 0.99702097,1.5950559 1,2.1875 l 0,9.625 c -0.00205,0.03747 -0.00205,0.05628 0,0.09375 L 1,13 l 1.1875,0 0.21875,0 11.1875,0 0.125,0 L 15,13 15,12.03125 c 0.0082,-0.07477 0.0082,-0.143979 0,-0.21875 l 0,-9.625 C 14.999927,1.5592677 14.326365,1.0000628 13.59375,1 L 2.40625,1 C 2.362556,0.99824 2.3249437,0.99824 2.28125,1 z M 4,3 l 0.75,0 0.09375,0 3.1875,0 0.0625,0 c 0.017326,-5.328e-4 0.045174,-5.328e-4 0.0625,0 L 8.21875,3 9,3 9,3.65625 C 9.00211,3.6908655 9.00211,3.715385 9,3.75 9.010826,3.8274825 9.010826,3.922518 9,4 L 9,7.15625 9,7.25 9,8 8.34375,8 8.3125,8 c -0.7437836,0 -1,-0.093119 -1,-0.84375 l 0,-1.28125 -1.875,1.875 C 5.3051426,7.8801481 5.122063,7.980046 4.9375,8 4.2383693,8.1148836 3.7002494,7.045289 4.21875,6.5625 L 6.125,4.65625 l -1.28125,0 C 4.1891106,4.65625 4,4.3248999 4,3.6875 L 4,3 z m 6,0 3,0 0,8 -3,0 0,-8 z"
-       transform="translate(0,2)"
-       id="rect13039-7"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
+<?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/DownloadArrow.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DownloadArrow.svg
index 586a4e603..1a2d57518 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/DownloadArrow.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DownloadArrow.svg
@@ -1,128 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3551">
-  <defs
-     id="defs3553">
-    <linearGradient
-       id="linearGradient4015-7-7-4-9-3-3-4-4-4-6-9-0">
-      <stop
-         id="stop4017-0-8-9-9-0-6-7-8-8-9-4-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4019-0-7-6-9-1-1-6-75-0-6-4-6"
-         style="stop-color:#d3d7cf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4390-1-2-7-2-2-9-8-8">
-      <stop
-         id="stop4392-5-4-1-97-3-2-5-2"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4394-6-5-9-7-9-6-7-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="372.38617"
-       y1="232.81923"
-       x2="372.38617"
-       y2="229.91768"
-       id="linearGradient7597"
-       xlink:href="#linearGradient7159-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.2857142,0,0,1,-107.42854,0)" />
-    <linearGradient
-       id="linearGradient7159-6">
-      <stop
-         id="stop7161-0"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7163-2"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="314.9375"
-       y1="75.4375"
-       x2="314.9375"
-       y2="87.873909"
-       id="linearGradient3661"
-       xlink:href="#linearGradient4390-1-2-7-2-2-9-8-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.52380958,0,0,0.35087741,879.38094,-76.201768)" />
-    <linearGradient
-       x1="372.38617"
-       y1="232.81923"
-       x2="372.38617"
-       y2="229.91768"
-       id="linearGradient3663"
-       xlink:href="#linearGradient7159-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.2857142,0,0,1,-107.42854,0)" />
-    <radialGradient
-       cx="320"
-       cy="57.5"
-       r="13"
-       fx="320"
-       fy="57.5"
-       id="radialGradient3665"
-       xlink:href="#linearGradient4015-7-7-4-9-3-3-4-4-4-6-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.64889975,0,0,0.40561314,162.69993,207.17725)" />
-  </defs>
-  <metadata
-     id="metadata3556">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 4.34375,9 c -0.1048131,0.041893 -0.1945648,0.1204254 -0.25,0.21875 l -1,1.5 C 2.9765858,10.852612 3,10.929871 3,11.21875 2.9987,11.23956 2.9987,11.26044 3,11.28125 L 3,15 13,15 13,11.3125 13,11.25 c 0,-0.379494 0.03493,-0.391559 -0.09375,-0.53125 l -1,-1.5 C 11.800608,9.0579129 11.596071,8.9684278 11.40625,9 11.07899,9.0631144 10.900296,9.5098498 11.09375,9.78125 L 11.90625,11 4.09375,11 4.90625,9.78125 C 5.1357115,9.4586386 4.7953084,8.9267587 4.40625,9 4.385444,8.9987 4.364556,8.9987 4.34375,9 z m 2,3.4375 c 0.0208,-10e-4 0.0417,-10e-4 0.0625,0 0.29096,-0.0556 0.59898,0.20383 0.59375,0.5 L 7,13 9,13 9,12.9375 c -0.004,-0.26416 0.23582,-0.5 0.5,-0.5 0.26418,0 0.50373,0.23584 0.5,0.5 L 10,13 c 0,0.54535 -0.45465,1 -1,1 L 7,14 C 6.45465,14 6,13.54535 6,13 l 0,-0.0625 c -0.0108,-0.21706 0.13723,-0.43234 0.34375,-0.5 z"
-       id="rect4390-9"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#bebebe;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="M 7,1 7,6.5625 5.71875,5.28125 C 5.53059,5.0931 5.2653,5.00001 5,5 L 4,5 4,6 c 10e-6,0.2653 0.0931,0.53058 0.28125,0.71875 l 3,3 L 7.5625,10 l 0.875,0 0.28125,-0.28125 3,-3 C 11.90694,6.53058 11.99999,6.2653 12,6 l 0,-1 -1,0 c -0.2653,10e-6 -0.53059,0.0931 -0.71875,0.28125 L 9,6.5625 9,1 z"
-       id="path3613"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
-  </g>
+<?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
index 3983e2d7b..aacbb622b 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Error.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Error.svg
@@ -1,128 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="10"
-   height="10"
-   id="svg3103">
-  <defs
-     id="defs3105">
-    <radialGradient
-       cx="623.01666"
-       cy="516.14594"
-       r="28.5"
-       fx="623.01666"
-       fy="516.14594"
-       id="radialGradient10026"
-       xlink:href="#linearGradient9757"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.8652336,0,0,1.8648144,-1164.5305,-448.92116)" />
-    <linearGradient
-       id="linearGradient9757">
-      <stop
-         id="stop9759"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop9761"
-         style="stop-color:#cc0000;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="613.08984"
-       cy="497.24933"
-       r="30.281242"
-       fx="613.08984"
-       fy="497.24933"
-       id="radialGradient10036"
-       xlink:href="#linearGradient10030"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.6457762,0,0,1.3558483,-395.91882,-176.94534)" />
-    <linearGradient
-       id="linearGradient10030">
-      <stop
-         id="stop10032"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10034"
-         style="stop-color:#cc0000;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="626"
-       cy="505.22311"
-       r="30.535728"
-       fx="626"
-       fy="505.22311"
-       id="radialGradient10061"
-       xlink:href="#linearGradient10048"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.4481919,1.4653496e-7,-2.6752458e-7,2.643915,-280.568,-832.47254)" />
-    <linearGradient
-       id="linearGradient10048">
-      <stop
-         id="stop10050"
-         style="stop-color:#f4e3d7;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10052"
-         style="stop-color:#f4e3d7;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="626"
-       cy="505.22311"
-       r="30.535728"
-       fx="626"
-       fy="505.22311"
-       id="radialGradient3148"
-       xlink:href="#linearGradient10048"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.4481919,1.4653496e-7,-2.6752458e-7,2.643915,-280.568,-832.47254)" />
-  </defs>
-  <metadata
-     id="metadata3108">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-6)"
-     id="layer1">
-    <path
-       d="m 5,6 c -2.7646779,0 -5,2.2353143 -5,5 0,2.764679 2.2353221,5 5,5 2.7646779,0 5,-2.235321 5,-5 C 10,8.2353143 7.7646779,6 5,6 z m -2.8571429,4.285714 5.7142858,0 0,1.428572 -5.7142858,0 z"
-       id="path10839-3"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill:#ef2929;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Andale Mono;-inkscape-font-specification:Andale Mono" />
-  </g>
+<?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
index 550a601d8..6f4551e11 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Errors.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Errors.svg
@@ -1,127 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3103">
-  <defs
-     id="defs3105">
-    <radialGradient
-       cx="623.01666"
-       cy="516.14594"
-       r="28.5"
-       fx="623.01666"
-       fy="516.14594"
-       id="radialGradient10026"
-       xlink:href="#linearGradient9757"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.8652336,0,0,1.8648144,-1164.5305,-448.92116)" />
-    <linearGradient
-       id="linearGradient9757">
-      <stop
-         id="stop9759"
-         style="stop-color:#8c8c8c;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop9761"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="613.08984"
-       cy="497.24933"
-       r="30.281242"
-       fx="613.08984"
-       fy="497.24933"
-       id="radialGradient10036"
-       xlink:href="#linearGradient10030"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.6457762,0,0,1.3558483,-395.91882,-176.94534)" />
-    <linearGradient
-       id="linearGradient10030">
-      <stop
-         id="stop10032"
-         style="stop-color:#8c8c8c;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10034"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="626"
-       cy="505.22311"
-       r="30.535728"
-       fx="626"
-       fy="505.22311"
-       id="radialGradient10061"
-       xlink:href="#linearGradient10048"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.4481919,1.4653496e-7,-2.6752458e-7,2.643915,-280.568,-832.47254)" />
-    <linearGradient
-       id="linearGradient10048">
-      <stop
-         id="stop10050"
-         style="stop-color:#e5e5e5;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10052"
-         style="stop-color:#e5e5e5;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="626"
-       cy="505.22311"
-       r="30.535728"
-       fx="626"
-       fy="505.22311"
-       id="radialGradient3148"
-       xlink:href="#linearGradient10048"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.4481919,1.4653496e-7,-2.6752458e-7,2.643915,-280.568,-832.47254)" />
-  </defs>
-  <metadata
-     id="metadata3108">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 8,2.0000002 c -3.317614,0 -6,2.6823771 -6,6 C 2,11.317615 4.682386,14 8,14 c 3.317614,0 6,-2.682385 6,-5.9999998 0,-3.3176229 -2.682386,-6 -6,-6 z m -3.428572,5.1428568 6.857144,0 0,1.7142864 -6.857144,0 z"
-       id="path10839-3"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Andale Mono;-inkscape-font-specification:Andale Mono" />
-  </g>
+<?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
index 6fe0f7d7b..753682a6a 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/ErrorsEnabled.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ErrorsEnabled.svg
@@ -1,75 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3103">
-  <defs
-     id="defs3105">
-    <radialGradient
-       cx="626"
-       cy="505.22311"
-       r="30.535728"
-       fx="626"
-       fy="505.22311"
-       id="radialGradient10061"
-       xlink:href="#linearGradient10048"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.4481919,1.4653496e-7,-2.6752458e-7,2.643915,-280.568,-832.47254)" />
-    <linearGradient
-       id="linearGradient10048">
-      <stop
-         id="stop10050"
-         style="stop-color:#f4e3d7;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10052"
-         style="stop-color:#f4e3d7;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-  </defs>
-  <metadata
-     id="metadata3108">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 8,2.0000002 c -3.317614,0 -6,2.6823771 -6,6 C 2,11.317615 4.682386,14 8,14 c 3.317614,0 6,-2.682385 6,-5.9999998 0,-3.3176229 -2.682386,-6 -6,-6 z m -3.428572,5.1428568 6.857144,0 0,1.7142864 -6.857144,0 z"
-       id="path10839-3"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill:#cc0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Andale Mono;-inkscape-font-specification:Andale Mono" />
-  </g>
+<?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
index 44e318ab3..eb9557056 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/EventListener.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/EventListener.svg
@@ -1,389 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient10015">
-      <stop
-         id="stop10017"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10019"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#ce5c00;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#fcaf3e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#fef0dc;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#fff4e5;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#fef0dc;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#fedfb4;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#fee4c0;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#ce5c00;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#fcaf3e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4274"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4280"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="-6.186018"
-       y1="3.5976331"
-       x2="-4.0198994"
-       y2="3.5976331"
-       id="linearGradient10021"
-       xlink:href="#linearGradient10015"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10030"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="-7.3599825"
-       y1="3.0011835"
-       x2="-4.4554024"
-       y2="3.0011835"
-       id="linearGradient4960"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="M 5.28125,3 C 4.8006176,3.060582 4.4024954,3.5155791 4.40625,4 l 0,8 c 0,0.776731 0.2388401,1 1,1 l 5.1875,0 c 0.523584,-5.2e-5 0.999948,-0.476416 1,-1 l 0,-1.3125 c -5.2e-5,-0.523584 -0.476416,-0.9999476 -1,-1 l -2.78125,0 0,-0.09375 2.375,0 c 0.523584,-5.24e-5 0.999948,-0.4764155 1,-1 l 0,-1.3125 C 11.181289,6.8250542 10.823148,6.3980394 10.375,6.3125 l 0.21875,0 c 0.523584,-5.24e-5 0.999948,-0.4764155 1,-1 l 0,-1.3125 c -5.2e-5,-0.5235845 -0.476416,-0.9999476 -1,-1 L 5.40625,3 C 5.364638,2.99739 5.322862,2.99739 5.28125,3 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="M 5.28125,3.5 C 5.0633317,3.5561648 4.8991511,3.7750723 4.90625,4 l 0,8 c 0,0.385534 0.1060966,0.5 0.5,0.5 l 5.1875,0 c 0.261792,-2.6e-5 0.499974,-0.238208 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.261792 -0.238208,-0.499974 -0.5,-0.5 l -3.28125,0 0,-1.09375 2.875,0 c 0.261792,-2.62e-5 0.499974,-0.2382078 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.2617922 -0.238208,-0.4999738 -0.5,-0.5 l -2.875,0 0,-0.96875 3.28125,0 c 0.261792,-2.62e-5 0.499974,-0.2382078 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.2617922 -0.238208,-0.4999738 -0.5,-0.5 l -5.1875,0 C 5.364802,3.49478 5.322698,3.49478 5.28125,3.5 z m 0.625,1 4.1875,0 0,0.3125 -3.28125,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,1.96875 c 2.62e-5,0.2617922 0.2382078,0.4999738 0.5,0.5 l 2.875,0 0,0.3125 -2.875,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,2.09375 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 3.28125,0 0,0.3125 -4.1875,0 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient10030);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 5.3948126,12 5.2103744,0 0,-1.302594 -3.792507,0 0,-2.0979823 3.377521,0 0,-1.3025936 -3.377521,0 0,-1.9942362 3.792507,0 0,-1.3025936 -5.2103744,0 0,7.9999997"
-     id="path10024"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
index c67e7c48b..03ddf692c 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Exception.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Exception.svg
@@ -1,349 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient4329">
-      <stop
-         id="stop4331"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4333"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#e4edf6;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#ecf2f8;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#e4edf6;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#c6d9ec;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#cfdfef;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3502"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3507"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-290.56634,-217.42327)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3510"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3513"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3515"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4300"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4306"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.80307692,0,0,0.80307692,-0.3079836,1.5753847)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4319"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.80307692,0,0,0.80307692,-0.3079836,1.5753847)" />
-    <linearGradient
-       x1="-5.8073196"
-       y1="3.9479289"
-       x2="-4.0577693"
-       y2="3.9479289"
-       id="linearGradient4335"
-       xlink:href="#linearGradient4329"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient3513);fill-opacity:1;stroke:url(#linearGradient3515);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient3510);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="M 3.15625,4 C 2.7939513,4.0673853 2.5038383,4.4127579 2.5,4.78125 l 0,6.4375 C 2.5,11.919172 2.5712033,12 3.3125,12 L 7.5,12 c 0.1196559,-0.0051 0.2380738,-0.03739 0.34375,-0.09375 0.1149349,0.06101 0.2448761,0.0935 0.375,0.09375 l 1.21875,0 c 0.2669982,0.0094 0.5348479,-0.124491 0.6875,-0.34375 l 0.28125,-0.4375 0.3125,0.4375 C 10.865558,11.866777 11.118342,11.999187 11.375,12 l 1.3125,0 c 0.594854,0.0081 1.010435,-0.803265 0.65625,-1.28125 L 12.03125,9 13.3125,7.21875 C 13.666685,6.7407649 13.251104,5.9293923 12.65625,5.9375 l -1.25,0 c -0.272662,-0.0027 -0.542152,0.144293 -0.6875,0.375 l -0.3125,0.5 -0.34375,-0.5 C 9.9171523,6.081793 9.6476616,5.9347981 9.375,5.9375 l -1.09375,0 C 8.293577,5.906931 8.30402,5.875602 8.3125,5.84375 l 0,-1.0625 C 8.3011704,4.3649426 7.9164315,3.9950014 7.5,4 L 3.3125,4 C 3.260582,3.99493 3.2081684,3.99493 3.15625,4 z m 4.0625,2.625 c 0.299926,0.285503 0.6044009,-0.2643491 0,0 z m 0.75,1.28125 L 8.75,9.03125 8.21875,9.8125 C 8.0843525,9.5496601 7.7952045,9.373657 7.5,9.375 l -2.25,0 0,-0.09375 1.90625,0 c 0.4267682,0.00499 0.817494,-0.3857318 0.8125,-0.8125 z"
-     id="text5177-4"
-     style="font-size:9.25737095px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.60615385;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="M 3.28125,4.375 C 3.0784317,4.388434 2.9034411,4.5780067 2.90625,4.78125 l 0,6.4375 c 0,0.353338 0.043955,0.40625 0.40625,0.40625 l 4.1875,0 c 0.1423573,-0.0049 0.2789849,-0.09188 0.34375,-0.21875 0.069465,0.136197 0.2222526,0.225323 0.375,0.21875 l 1.21875,0 c 0.1363308,0.0014 0.2710762,-0.07215 0.34375,-0.1875 l 0.625,-0.9375 0.625,0.9375 c 0.07267,0.115354 0.207419,0.188851 0.34375,0.1875 l 1.3125,0 C 12.990387,11.6265 13.19209,11.202939 13,10.96875 L 11.53125,9 12.96875,6.96875 c 0.157559,-0.2344983 -0.03037,-0.6103484 -0.3125,-0.625 l -1.25,0 C 11.269919,6.3424 11.135174,6.415896 11.0625,6.53125 l -0.65625,1 -0.6875,-1 C 9.6460762,6.4158965 9.5113308,6.342399 9.375,6.34375 l -1.21875,0 c -0.3362312,0 -0.454426,0.1986563 -0.34375,0.625 L 9.25,9.03125 7.90625,11 l 0,-0.84375 C 7.908747,9.9428659 7.7133841,9.747503 7.5,9.75 l -2.65625,0 0,-0.875 2.3125,0 C 7.3696341,8.877497 7.564997,8.6821341 7.5625,8.46875 l 0,-1.03125 C 7.564997,7.2241159 7.3696341,7.028753 7.15625,7.03125 l -2.3125,0 0,-0.78125 2.65625,0 C 7.7133841,6.2525 7.908747,6.0571341 7.90625,5.84375 l 0,-1.0625 C 7.908747,4.5678659 7.7133841,4.372503 7.5,4.375 l -4.1875,0 c -0.010411,-4.054e-4 -0.020839,-4.054e-4 -0.03125,0 z m 0.4375,0.8125 3.375,0 0,0.25 -2.65625,0 C 4.2346817,5.4509336 4.0596911,5.6405067 4.0625,5.84375 l 0,1.59375 c -0.00281,0.2032433 0.1721817,0.3928164 0.375,0.40625 l 2.3125,0 0,0.25 -2.3125,0 c -0.1926888,0.012382 -0.3626179,0.1823112 -0.375,0.375 l 0,1.6875 c -0.00281,0.203243 0.1721817,0.392816 0.375,0.40625 l 2.65625,0 0,0.25 -3.375,0 z m 5.1875,1.96875 0.28125,0 0.875,1.34375 c 0.142209,0.2354632 0.545291,0.2354632 0.6875,0 l 0.84375,-1.34375 0.28125,0 -1.15625,1.625 c -0.09737,0.1354783 -0.09737,0.3332717 0,0.46875 l 1.15625,1.5625 -0.28125,0 L 10.75,9.53125 C 10.597384,9.3018442 10.193674,9.3201947 10.0625,9.5625 l -0.8125,1.25 -0.25,0 1.0625,-1.5625 c 0.09737,-0.1354783 0.09737,-0.3332717 0,-0.46875 z"
-     id="text5177"
-     style="font-size:9.25737095px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient4319);fill-opacity:1;stroke:none;stroke-width:0.80307692;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 3.3116482,11.212308 4.1843317,0 0,-1.046083 -3.0456751,0 0,-1.6848415 2.7124097,0 0,-1.0460829 -2.7124097,0 0,-1.6015252 3.0456751,0 0,-1.0460829 -4.1843317,0 0,6.4246155"
-     id="path4311"
-     style="font-size:9.25737095px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 8.1522409,6.7502551 1.5830104,2.2680559 -1.5089515,2.193997 1.221973,0 0.9535092,-1.4441499 0.972024,1.4441499 1.314547,0 -1.647812,-2.193997 1.610782,-2.2680559 -1.259002,0 -0.981282,1.5367236 -1.0275678,-1.5367236 -1.2312303,0"
-     id="path4313"
-     style="font-size:9.25737095px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
index dce24257b..d25fd4534 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/FilterFieldGlyph.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/FilterFieldGlyph.svg
@@ -1,53 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="13"
-   height="13"
-   id="svg3004">
-  <defs
-     id="defs3006" />
-  <metadata
-     id="metadata3009">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-3)"
-     id="layer1">
-    <path
-       d="m 1.5,4.3273205 0,0.71875 0,0.0625 c -10e-4,0.1365183 0.0388,0.2561957 0.125,0.375 l 4,5.4687495 c 0.062145,0.08767 0.1493769,0.162423 0.25,0.21875 l 0,2.501609 0,1 1.25,-1 0,-2.501609 c 0.1006231,-0.05633 0.1878552,-0.131078 0.25,-0.21875 l 4,-5.4687495 c 0.08625,-0.1188043 0.12631,-0.2384817 0.125,-0.375 l 0,-0.0625 0,-0.71875 z"
-       id="rect10903"
-       style="color:#000000;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  </g>
+<?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/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/ForwardArrow.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ForwardArrow.svg
deleted file mode 100644
index f2774a3e1..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/ForwardArrow.svg
+++ /dev/null
@@ -1,156 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="9"
-   height="9"
-   id="svg2987">
-  <defs
-     id="defs2989">
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-8-0"
-       xlink:href="#linearGradient4022-2-0-9-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-1,0,0,1,63,0)" />
-    <linearGradient
-       id="linearGradient4022-2-0-9-1">
-      <stop
-         id="stop4024-2-8-8-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-0-8"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0">
-      <stop
-         id="stop4024-2-8"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5066">
-      <stop
-         id="stop5068"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3083"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3097"
-       xlink:href="#linearGradient5066"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-22.424752,-224.73565)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-2"
-       xlink:href="#linearGradient4022-2-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0-4">
-      <stop
-         id="stop4024-2-8-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4886"
-       xlink:href="#linearGradient5066-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient5066-5">
-      <stop
-         id="stop5068-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-3"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-  </defs>
-  <metadata
-     id="metadata2992">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 2.6435784,0 c 0.1428317,0.034005 0.2750938,0.1111582 0.375,0.21875 l 3.75,3.75 0.5,0.53125 -0.5,0.53125 -3.75,3.75 C 2.878687,8.9190777 2.6837099,8.9993624 2.4873284,9 l -0.03125,0 -0.0625,0 -0.65625,0 0,-0.5625 0,-0.09375 C 1.7014574,8.1070742 1.7853754,7.8553177 1.9560784,7.6875 L 5.1435784,4.5 1.9560784,1.28125 C 1.8171964,1.1421608 1.7366525,0.9465542 1.7373284,0.75 l 0,-0.15625 0,-0.59375 0.59375,0 0.09375,0 0.0625,0 0.09375,0 z"
-     id="path6040"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Function.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Function.svg
index ee93f645a..f15d7379e 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Function.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Function.svg
@@ -1,433 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient4921">
-      <stop
-         id="stop4923"
-         style="stop-color:#fcaf3e;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4925"
-         style="stop-color:#fcaf3e;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient8896">
-      <stop
-         id="stop8898"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8900"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5676">
-      <stop
-         id="stop5678"
-         style="stop-color:#4e9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5680"
-         style="stop-color:#4e9a06;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#4f9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#8ae234;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#edfae0;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#f2fce8;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#edfae0;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#d9f5bd;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#dff7c7;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#4f9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#8ae234;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.2982244"
-       y1="2.83077"
-       x2="-2.5372779"
-       y2="2.83077"
-       id="linearGradient5690"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.6747751"
-       y1="4.3266273"
-       x2="-2.031734"
-       y2="4.3266273"
-       id="linearGradient8902"
-       xlink:href="#linearGradient8896"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient8908"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient8913"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient8916"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient8918"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient8928"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3466"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4257"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4263"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4277"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4283"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755087,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4295"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755087,0)" />
-    <linearGradient
-       x1="-6.1102781"
-       y1="2.6887574"
-       x2="-4.1524439"
-       y2="2.6887574"
-       id="linearGradient4927"
-       xlink:href="#linearGradient4921"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient8916);fill-opacity:1;stroke:url(#linearGradient8918);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient8913);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 9.15625,2.96875 c -1.240429,0 -2.1735062,0.476225 -2.75,1.09375 C 5.9459199,4.5555936 5.8087121,5.02184 5.6875,5.4375 l -0.21875,0 A 1.0001,1.0001 0 0 0 4.5,6.25 L 4.28125,7.3125 A 1.0001,1.0001 0 0 0 5,8.46875 L 4.3125,11.8125 A 1.0001,1.0001 0 0 0 5.28125,13 l 1.375,0 a 1.0001,1.0001 0 0 0 1,-0.8125 l 0.75,-3.65625 1.25,0 A 1.0001,1.0001 0 0 0 10.625,7.71875 L 10.84375,6.625 a 1.0001,1.0001 0 0 0 -0.03125,-0.5 1.0001,1.0001 0 0 0 0.4375,-0.5 l 0.40625,-1 A 1.0001,1.0001 0 0 0 11.09375,3.3125 L 10.9375,3.25 A 1.0001,1.0001 0 0 0 10.875,3.21875 c -0.753759,-0.2422798 -1.3677559,-0.25 -1.71875,-0.25 z"
-     id="text5177-4-0"
-     style="font-size:11.52737713px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold Italic" />
-  <path
-     d="M 9.15625,3.46875 C 8.0345951,3.46875 7.2406966,3.8806287 6.75,4.40625 6.2593034,4.9318713 6.0770409,5.5350531 6,5.90625 l 0,0.03125 -0.53125,0 c -0.2333,-0.00411 -0.4562667,0.1770488 -0.5,0.40625 l -0.1875,1.0625 C 4.7064268,7.6956093 4.9512646,8.0220596 5.25,8.03125 l 0.3125,0 -0.78125,3.875 c -0.055551,0.290956 0.2038342,0.598976 0.5,0.59375 l 1.375,0 c 0.2333,0.0041 0.4562667,-0.177049 0.5,-0.40625 l 0.8125,-4.0625 1.6875,0 c 0.2333,0.00411 0.456267,-0.1770488 0.5,-0.40625 l 0.1875,-1.09375 C 10.39762,6.2504072 10.160677,5.9502796 9.875,5.9375 l -1.3125,0 c 0.1118193,-0.1826619 0.2456439,-0.375 0.71875,-0.375 0.2538337,0 0.5725438,0.09126 0.6456469,0.092505 L 10.21875,5.71875 c 0.23,0.064736 0.498139,-0.062278 0.59375,-0.28125 l 0.375,-1 C 11.292011,4.1999608 11.17357,3.8890453 10.9375,3.78125 L 10.75,3.71875 c -0.01041,-3.255e-4 -0.02084,-3.255e-4 -0.03125,0 -0.699646,-0.2248862 -1.2371472,-0.25 -1.5625,-0.25 z m 0,1 c 0.1983491,0 0.5580151,0.048177 0.90625,0.125 l -0.03125,0.0625 C 9.8405926,4.6144011 9.6126906,4.5625 9.28125,4.5625 8.3781247,4.5625 7.5338649,5.0317737 7.375,5.84375 l -0.09375,0.5 c -0.055551,0.2909564 0.2038342,0.5989759 0.5,0.59375 l 1.46875,0 -0.03125,0.09375 -1.65625,0 c -0.2249277,-0.0071 -0.4438352,0.1570817 -0.5,0.375 L 6.28125,11.5 5.90625,11.5 6.6875,7.625 C 6.7430507,7.3340436 6.4836658,7.0260241 6.1875,7.03125 l -0.3125,0 0,-0.09375 0.53125,0 C 6.6290591,6.9274554 6.833389,6.7503695 6.875,6.53125 l 0.09375,-0.4375 c 0.04976,-0.2397535 0.2121478,-0.6581861 0.53125,-1 0.3191022,-0.3418139 0.7721433,-0.625 1.65625,-0.625 z"
-     id="text5177-6"
-     style="font-size:11.52737713px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient4295);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold Italic" />
-  <path
-     d="m 6.48415,5.9942365 -0.092219,0.4495677 -0.9221901,0 -0.2074928,1.0720461 0.9221902,0 L 5.2853027,12 6.668588,12 7.5677234,7.5158503 l 2.0864553,0 0.2074928,-1.0720461 -2.0864553,0 L 7.8789626,5.948127 C 7.9827089,5.4178682 8.5244965,5.0720463 9.2737752,5.0720463 c 0.3342936,0 0.6916428,0.080692 0.8414988,0.1152738 l 0.21902,0.057637 0.403458,-0.9913544 -0.172911,-0.069164 C 9.919309,3.9769457 9.4697403,3.9538908 9.1700288,3.9538908 c -2.0057616,0 -2.5590778,1.4293953 -2.6858788,2.0403457"
-     id="path4289"
-     style="font-size:11.52737713px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold Italic" />
+<?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
index 82d662ef3..63cdc32c3 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/GoToArrow.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/GoToArrow.svg
@@ -1,202 +1,42 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<?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
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="10"
-   height="10"
-   id="svg2987">
-  <defs
-     id="defs2989">
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-8-0"
-       xlink:href="#linearGradient4022-2-0-9-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-1,0,0,1,63,0)" />
-    <linearGradient
-       id="linearGradient4022-2-0-9-1">
-      <stop
-         id="stop4024-2-8-8-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-0-8"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0">
-      <stop
-         id="stop4024-2-8"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5066">
-      <stop
-         id="stop5068"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3083"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3097"
-       xlink:href="#linearGradient5066"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-22.424752,-224.73565)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-2"
-       xlink:href="#linearGradient4022-2-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0-4">
-      <stop
-         id="stop4024-2-8-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4886"
-       xlink:href="#linearGradient5066-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient5066-5">
-      <stop
-         id="stop5068-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-3"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3930"
-       xlink:href="#linearGradient5066-0-5-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(12,0)" />
-    <linearGradient
-       id="linearGradient5066-0-5-9-0">
-      <stop
-         id="stop5068-1-4-8-0"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-1-9-9-9"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient6072"
-       xlink:href="#linearGradient5066-0-5-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-19.704978,-215.76977)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3787"
-       xlink:href="#linearGradient5066-0-5-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-19.704978,-215.76977)" />
-  </defs>
-  <metadata
-     id="metadata2992">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-6)"
-     id="layer1">
-    <path
-       d="M 3.78125,6 C 2.2327274,6 0.96875,7.2639766 0.96875,8.8125 l 0,0.40625 1.625,0 0,-0.40625 C 2.59375,8.13521 3.1039608,7.625 3.78125,7.625 4.4585392,7.625 5,8.13521 5,8.8125 l 0,5.25 1.625,0 0,-5.25 C 6.625,7.2639766 5.3297726,6 3.78125,6 z"
-       id="path5641"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:1.61207771;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="m 9.0301942,11.642353 -0.8060388,0 c -0.2070633,0 -0.4259593,0.104648 -0.5793404,0.251887 L 5.8060389,13.733016 3.9672628,11.89424 C 3.8138816,11.747001 3.5949857,11.642353 3.3879223,11.642353 l -0.8060388,0 0,0.806038 c 0,0.249429 0.072785,0.445192 0.2266984,0.604529 L 5.8060389,16 8.8034958,13.05292 c 0.1539131,-0.159337 0.2266984,-0.3551 0.2266984,-0.604529 z"
-       id="path5643"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
-  </g>
+        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/HeapAllocationsInstrument.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/HeapAllocationsInstrument.svg
new file mode 100644
index 000000000..108323f49
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/HeapAllocationsInstrument.svg
@@ -0,0 +1,16 @@
+<?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.9437" height="1" x="5.5849" y="5" fill="#e0a685"/>
+ <rect width="9.9437" height=".97577" x="5.5276" y="14" fill="#e0a685"/>
+ <rect width="1" height="10" x="5.5286" y="5" fill="#e0a685"/>
+ <rect width="1" height="9.8951" x="14.529" y="5.1049" fill="#e0a685"/>
+ <rect width="9.9437" height="1" x=".52864" y="1" fill="#e0a685"/>
+ <rect width="9.9437" height=".97577" x=".52763" y="10" fill="#e0a685"/>
+ <rect width="1" height="10" x=".52864" y="1" fill="#e0a685"/>
+ <rect width="1" height="10" x="9.5286" y="1" fill="#e0a685"/>
+ <path fill="#e0a685" d="m0.52864 2 5 4 1-1-5-4z"/>
+ <path fill="#e0a685" d="m9.5286 2 5 4 1-1-5-4z"/>
+ <path fill="#e0a685" d="m0.52864 11 5 4 1-1-5-4z"/>
+ <path fill="#e0a685" d="m9.5286 11 5 4 1-1-5-4z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/HeapSnapshotObjectGraph.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/HeapSnapshotObjectGraph.svg
new file mode 100644
index 000000000..705812e8f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/HeapSnapshotObjectGraph.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/HierarchicalNavigationItemChevron.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/HierarchicalNavigationItemChevron.svg
index f7098e7d7..62c88e4de 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/HierarchicalNavigationItemChevron.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/HierarchicalNavigationItemChevron.svg
@@ -1,156 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="7"
-   height="16"
-   id="svg2987">
-  <defs
-     id="defs2989">
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-8-0"
-       xlink:href="#linearGradient4022-2-0-9-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-1,0,0,1,63,0)" />
-    <linearGradient
-       id="linearGradient4022-2-0-9-1">
-      <stop
-         id="stop4024-2-8-8-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-0-8"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0">
-      <stop
-         id="stop4024-2-8"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5066">
-      <stop
-         id="stop5068"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3083"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3097"
-       xlink:href="#linearGradient5066"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-22.424752,-224.73565)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-2"
-       xlink:href="#linearGradient4022-2-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0-4">
-      <stop
-         id="stop4024-2-8-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4886"
-       xlink:href="#linearGradient5066-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient5066-5">
-      <stop
-         id="stop5068-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-3"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-  </defs>
-  <metadata
-     id="metadata2992">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 1.0729885,0 c 0.1675997,0.06045333 0.3227972,0.19761458 0.440028,0.38888889 L 5.9132961,7.0555556 6.5,8 5.9132961,8.9444444 1.5130165,15.611111 C 1.3488667,15.856139 1.120079,15.998866 0.88964343,16 l -0.0366695,0 -0.0733377,0 -0.77004896,0 0,-1 0,-0.166667 C -0.03250376,14.412576 0.06596624,13.96501 0.26627057,13.666667 L 4.0065083,8 0.26627057,2.2777778 C 0.10330527,2.0305081 0.0087944,1.682763 0.00958758,1.3333333 l 0,-0.2777777 0,-1.0555556 0.69671091,0 0.11000713,0 0.0733377,0 0.11000713,0 z"
-     id="path6040"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
+<?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/IndeterminateProgressSpinner1.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner1.svg
index 2e0dde01b..61cfd8495 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner1.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner1.svg
@@ -1,269 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5176"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5179"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <path
-     d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-     id="path10452-5"
-     style="fill:none;stroke:url(#radialGradient5179);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  <path
-     d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-     id="path10454-7"
-     style="fill:none;stroke:url(#radialGradient5176);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
+<?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
index 403018601..ffe956ce8 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner10.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner10.svg
@@ -1,273 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(0,-1,1,0,-0.15085512,31.951957)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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
index 9a21123e4..30ee22f99 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner11.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner11.svg
@@ -1,273 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(0.5,-0.8660254,0.8660254,0.5,-5.9659448,21.810478)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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
index 6c8f5ab15..d5bd31ced 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner12.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner12.svg
@@ -1,273 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(0.8660254,-0.5,0.5,0.8660254,-5.9105494,10.115124)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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
index f24c95228..9c8f3ea45 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner2.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner2.svg
@@ -1,293 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5176"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5179"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(0.8660254,0.5,-0.5,0.8660254,10.141479,-5.8150897)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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
index fa16f4ce7..5bbe20241 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner3.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner3.svg
@@ -1,273 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(0.5,0.8660254,-0.8660254,0.5,21.836833,-5.7596943)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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
index 21fd85ecb..8b5de8f2d 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner4.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner4.svg
@@ -1,273 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(0,1,-1,0,31.951956,0.1508555)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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
index 5d91be102..0f8153a5b 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner5.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner5.svg
@@ -1,273 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(-0.5,0.8660254,-0.8660254,-0.5,37.767046,10.292335)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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
index 6c2b0f768..88169597d 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner6.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner6.svg
@@ -1,273 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(-0.8660254,0.5,-0.5,-0.8660254,37.711651,21.987689)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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
index daa9db871..e37f20300 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner7.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner7.svg
@@ -1,273 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(-1,0,0,-1,31.801101,32.102812)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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
index 09eff6b92..14a4fc35f 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner8.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner8.svg
@@ -1,273 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(-0.8660254,-0.5,0.5,-0.8660254,21.659622,37.917902)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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
index 5eb6dc312..93c1ca01d 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner9.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner9.svg
@@ -1,273 +1,26 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="32"
-   height="32"
-   id="svg4149">
-  <defs
-     id="defs4151">
-    <filter
-       color-interpolation-filters="sRGB"
-       id="filter5741-9">
-      <feGaussianBlur
-         stdDeviation="0.80367531"
-         id="feGaussianBlur5743-0" />
-    </filter>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5027"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <linearGradient
-       id="linearGradient5724-8">
-      <stop
-         id="stop5726-2"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5728-0"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0.33333334" />
-      <stop
-         id="stop5730-6"
-         style="stop-color:#313131;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient35326"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <linearGradient
-       id="linearGradient8231-1-4-4-1">
-      <stop
-         id="stop8233-28-5-27-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop8235-7-3-94-3"
-         style="stop-color:#ffffff;stop-opacity:0.15428571"
-         offset="0.31861392" />
-      <stop
-         id="stop8237-7-8-20-2"
-         style="stop-color:#ffffff;stop-opacity:0.33714285"
-         offset="0.54270232" />
-      <stop
-         id="stop8239-2-9-1-9"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient35230"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <linearGradient
-       id="linearGradient5767-6">
-      <stop
-         id="stop5769-0"
-         style="stop-color:#bebebe;stop-opacity:0"
-         offset="0" />
-      <stop
-         id="stop5771-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="0.31861392" />
-      <stop
-         id="stop5773-7"
-         style="stop-color:#ffffff;stop-opacity:0.42857143"
-         offset="0.75051737" />
-      <stop
-         id="stop5775-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4220"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4222"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4224"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4232"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4234"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4238"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient4251"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.028844,0,0,1.028844,-8.7956992,-0.2316755)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient4253"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(2.229454,-1.2865389,1.2087442,2.0939897,-228.90301,-208.08725)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient4255"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.1252013,-0.60470548,0.56813832,1.0568583,-107.67128,-11.948108)" />
-    <radialGradient
-       cx="304.93979"
-       cy="22.664869"
-       r="10.045941"
-       fx="304.93979"
-       fy="22.664869"
-       id="radialGradient5182"
-       xlink:href="#linearGradient5724-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5436541,0,0,1.5436541,-454.72157,-16.47049)" />
-    <radialGradient
-       cx="-0.067823187"
-       cy="188.51917"
-       r="27.330345"
-       fx="-0.067823187"
-       fy="188.51917"
-       id="radialGradient5207"
-       xlink:href="#linearGradient8231-1-4-4-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.19958218,0.74572662,-0.70060718,0.18772713,143.94248,-12.615773)" />
-    <radialGradient
-       cx="0.053942412"
-       cy="189.15244"
-       r="27.330345"
-       fx="0.053942412"
-       fy="189.15244"
-       id="radialGradient5209"
-       xlink:href="#linearGradient5767-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-0.33323784,0.18899952,-0.17767018,-0.3130481,41.830064,72.850875)" />
-  </defs>
-  <metadata
-     id="metadata4154">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 30.322519,16.000001 a 14.322513,14.322513 0 1 1 -28.6450214,0 14.322513,14.322513 0 1 1 28.6450214,0 z"
-     id="path5737"
-     style="color:#000000;fill:url(#radialGradient5182);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.35497618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate" />
-  <g
-     transform="matrix(-0.5,-0.8660254,0.8660254,-0.5,9.9642676,37.862507)"
-     id="g5203">
-    <path
-       d="m 12.616723,22.226799 a 6.8920223,6.8942075 59.99967 1 1 9.926233,-4.286897"
-       id="path10452-5"
-       style="fill:none;stroke:url(#radialGradient5207);stroke-width:5.59162664;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-    <path
-       d="m 9.2164106,14.586123 a 6.8942075,6.8920221 43.693847 1 1 6.9021134,8.322766"
-       id="path10454-7"
-       style="fill:none;stroke:url(#radialGradient5209);stroke-width:5.59162617;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline" />
-  </g>
+<?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/Issues.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Issues.svg
index 2826092cb..d5b910516 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Issues.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Issues.svg
@@ -1,52 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4888">
-  <defs
-     id="defs4890" />
-  <metadata
-     id="metadata4893">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 7.9355105,0.5477755 c -0.5255,-0.0286 -1.03823,0.28305 -1.4375,0.96875 L 0.24801044,13.110275 c -0.53347,0.96339 0.04822,2.34375 1.09375006,2.34375 l 13.1562495,0 c 0.98172,0 1.90311,-1.15939 1.21875,-2.34375 L 9.4042605,1.5790255 c -0.39872,-0.64617 -0.94325,-1.00262 -1.46875,-1.03125 z m 0.0625,3.9375 c 0.54448,-0.0172 1.04849,0.48677 1.03125,1.03125 l 0,3.9375 c 0.007,0.52831 -0.47163,0.9999995 -1,0.9999995 -0.52836,0 -1.00747,-0.4716895 -1,-0.9999995 l 0,-3.9375 c -0.008,-0.4666 0.3541,-0.91253 0.8125,-1 0.0511,-0.0145 0.10345,-0.0249 0.15625,-0.0312 z m 0.03125,6.9687495 c 0.55228,0 1,0.44772 1,1 0,0.55228 -0.44772,1 -1,1 -0.55228,0 -1,-0.44772 -1,-1 0,-0.55228 0.44772,-1 1,-1 z"
-       id="path18112"
-       style="color:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  </g>
+<?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
index 55ad82494..efbe389a4 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/IssuesEnabled.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IssuesEnabled.svg
@@ -1,52 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4888">
-  <defs
-     id="defs4890" />
-  <metadata
-     id="metadata4893">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 7.9355105,0.5477755 c -0.5255,-0.0286 -1.03823,0.28305 -1.4375,0.96875 L 0.24801044,13.110275 c -0.53347,0.96339 0.04822,2.34375 1.09375006,2.34375 l 13.1562495,0 c 0.98172,0 1.90311,-1.15939 1.21875,-2.34375 L 9.4042605,1.5790255 c -0.39872,-0.64617 -0.94325,-1.00262 -1.46875,-1.03125 z m 0.0625,3.9375 c 0.54448,-0.0172 1.04849,0.48677 1.03125,1.03125 l 0,3.9375 c 0.007,0.52831 -0.47163,0.9999995 -1,0.9999995 -0.52836,0 -1.00747,-0.4716895 -1,-0.9999995 l 0,-3.9375 c -0.008,-0.4666 0.3541,-0.91253 0.8125,-1 0.0511,-0.0145 0.10345,-0.0249 0.15625,-0.0312 z m 0.03125,6.9687495 c 0.55228,0 1,0.44772 1,1 0,0.55228 -0.44772,1 -1,1 -0.55228,0 -1,-0.44772 -1,-1 0,-0.55228 0.44772,-1 1,-1 z"
-       id="path18112"
-       style="color:#bebebe;fill:#f57900;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  </g>
+<?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
index d3bed89bd..9d276a669 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/LayerBorders.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/LayerBorders.svg
@@ -1,64 +1,8 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4341">
-  <defs
-     id="defs4343" />
-  <metadata
-     id="metadata4346">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 1,14.5 3,-3 11,0 -3,3 z"
-       id="path11960"
-       style="fill-opacity:1;stroke:none" />
-    <path
-       d="m 1,9.5 3,-3 11,0 -3,3 z"
-       id="path11962"
-       style="fill-opacity:1;stroke:none" />
-    <path
-       d="m 1,4.5 3,-3 11,0 -3,3 z"
-       id="path11964"
-       style="fill-opacity:1;stroke:none" />
-    <path
-       d="m 4.5568577,2.0968807 -1.8062387,1.8062386 8.692524,0 1.806238,-1.8062386 -8.6925233,0 z"
-       id="path11964-1"
-       style="fill:#bebebe;fill-opacity:1;stroke:none" />
-  </g>
+<?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="currentColor" d="m1 14.5 3-3h11l-3 3z"/>
+ <path fill="currentColor" d="m1 9.5 3-3h11l-3 3z"/>
+ <path fill="currentColor" 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/LayoutInstrument.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/LayoutInstrument.svg
new file mode 100644
index 000000000..b682478f2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/LayoutInstrument.svg
@@ -0,0 +1,10 @@
+<?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.952" height="1" x="1.0242" y="9.9982" fill="#b0cb67" rx=".62308" ry="0.5" display="block"/>
+ <path fill="#b0cb67" d="m12.263 6.5471-2.7128-1.5489-0.77509 0.77447 1.5502 1.9362 0.77509 4.6468 0.92382 1.6425v2l1-1 0.0139-3.8042z" display="block"/>
+ <path fill="#b0cb67" d="m3.788 6.5471 2.6732-1.5489 0.76377 0.77447-1.5275 1.9362-0.76377 4.6468-0.90942 1.6425v2l-1-1v-3.8042z" display="block"/>
+ <rect width="2" height="1.9963" x="7.0242" y=".0018385" fill="#b0cb67" rx=".75" ry="0.6" display="block"/>
+ <rect width="2" height="3" x="7.0242" y="8.9982" fill="#b0cb67" rx="1.0556" ry="1.1061" display="block"/>
+ <path fill="#b0cb67" d="m8.0242 0.99816c-1.6568 0-3 1.3431-3 3 0 1.6568 1.3432 3 3 3s3-1.3432 3-3-1.3432-3-3-3zm0 1.4687c0.84518 0 1.5312 0.68607 1.5312 1.5312 0 0.84518-0.68607 1.5312-1.5312 1.5312-0.84518 0-1.5312-0.68607-1.5312-1.5312 0-0.84518 0.68607-1.5312 1.5312-1.5312z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/LessColumns.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/LessColumns.svg
deleted file mode 100644
index ca6e2011c..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/LessColumns.svg
+++ /dev/null
@@ -1,53 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="15"
-   height="13"
-   id="svg7416">
-  <defs
-     id="defs7418" />
-  <metadata
-     id="metadata7421">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-3)"
-     id="layer1">
-    <path
-       d="M 2,3 C 0.9476303,3 0,3.84508 0,4.9375 l 0,9.125 C 0,15.15492 0.9476303,16 2,16 l 7.6875,0 C 9.578972,15.833849 9.5,15.645923 9.5,15.4375 l 0,-3.875 c 0,-0.367706 0.206871,-0.683531 0.5,-0.875 L 10,9 l 3,0 0,1.5 1.4375,0 c 0.208424,0 0.396349,0.07897 0.5625,0.1875 l 0,-5.75 C 15,3.84508 14.05237,3 13,3 L 2,3 z m 0,3 3.03125,0 0,2 L 2,8 2,6 z m 5,0 1,0 0,1 1,0 0,1 -1,0 0,1 1,0 0,1 -1,0 0,1 1,0 0,1 -1,0 0,1 1,0 0,1 -1,0 0,-1 -1,0 0,1 -1,0 0,-1 1,0 0,-1 -1,0 0,-1 1,0 L 7,10 6,10 6,9 7,9 7,8 6,8 6,7 7,7 7,6 z M 7,7 7,8 8,8 8,7 7,7 z m 0,2 0,1 1,0 0,-1 -1,0 z m 0,2 0,1 1,0 0,-1 -1,0 z m 3,-5 3,0 0,2 -3,0 0,-2 z m -8,3 3.03125,0 0,2 L 2,11 2,9 z m 8.5625,2 C 10.254724,11 10,11.254723 10,11.5625 l 0,3.875 C 10,15.745276 10.254724,16 10.5625,16 l 3.875,0 C 14.745278,16 15,15.745276 15,15.4375 l 0,-3.875 C 15,11.254723 14.745278,11 14.4375,11 l -3.875,0 z m 1.0625,0.40625 0.96875,1.1875 1,-1.1875 0.84375,0.71875 -1.125,1.34375 1.125,1.375 -0.84375,0.71875 -1,-1.21875 L 11.625,15.5625 10.75,14.84375 11.90625,13.46875 10.75,12.125 11.625,11.40625 z M 2,12 l 3.03125,0 0,2 L 2,14 2,12 z"
-       id="rect27790-9"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Locked.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Locked.svg
index 13132c39a..37e7fa21b 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Locked.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Locked.svg
@@ -1,53 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="8"
-   height="10"
-   id="svg3021">
-  <defs
-     id="defs3023" />
-  <metadata
-     id="metadata3026">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-6)"
-     id="layer1">
-    <path
-       d="m 3.3333333,6.6666666 c -1.0964666,0 -2,0.9035334 -2,2.0000001 l 0,2.0000003 -0.6666666,0 C 0.2973333,10.666667 0,10.964 0,11.333333 l 0,0.354167 0,3.645833 3.3333333,0 1.3333334,0 L 8,15.333333 8,11.6875 8,11.333333 C 8,10.964 7.7026667,10.666667 7.3333333,10.666667 l -0.6666666,0 0,-2.0000003 c 0,-1.0964667 -0.9035334,-2.0000001 -2,-2.0000001 l -1.3333334,0 z m 0,1.3333335 1.3333334,0 c 0.3808666,0 0.6666666,0.2857999 0.6666666,0.6666666 l 0,2.0000003 -2.6666666,0 0,-2.0000003 c 0,-0.3808667 0.2858,-0.6666666 0.6666666,-0.6666666 z"
-       id="rect4063"
-       style="color:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible" />
-  </g>
+<?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.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Log.png
deleted file mode 100644
index 34638e075..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Log.png
+++ /dev/null
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/Log@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Log@2x.png
deleted file mode 100644
index 943028d10..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Log@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Logs.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Logs.svg
index a1ec45187..2da2e9ed9 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Logs.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Logs.svg
@@ -1,52 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4953">
-  <defs
-     id="defs4955" />
-  <metadata
-     id="metadata4958">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 0,0 0,16 0.96875,0 C 0.51948,15.47492 0.57787,15.00816 0.99995,14.46875 L 3.5446,11.94785 C 3.2051,11.36266 2.99995,10.69087 2.99995,9.96875 c 0,-2.21358 1.80078,-4.03125 4,-4.03125 2.19923,0 4,1.81767 4,4.03125 0,2.21358 -1.80077,4.03125 -4,4.03125 -0.8092,0 -1.55582,-0.23556 -2.1875,-0.65625 L 2.03125,16 l 12,0 c -0.12596,-0.12596 -0.21875,-0.30779 -0.21875,-0.5 0,-0.38442 0.30308,-0.6875 0.6875,-0.6875 0.38442,0 0.71875,0.30308 0.71875,0.6875 0,0.19221 -0.0928,0.37404 -0.21875,0.5 l 1,0 0,-16 -1,0 C 14.87404,0.12596 14.69221,0.21875 14.5,0.21875 14.30779,0.21875 14.15721,0.12595 14.03125,0 L 1.96875,0 C 1.84279,0.12595 1.69221,0.21875 1.5,0.21875 1.30779,0.21875 1.12596,0.12595 1,0 z M 1.5,0.8125 C 1.88442,0.8125 2.1875,1.11558 2.1875,1.5 2.1875,1.88442 1.88442,2.21875 1.5,2.21875 1.11558,2.21875 0.78125,1.88442 0.78125,1.5 0.78125,1.11558 1.11558,0.8125 1.5,0.8125 z m 13,0 c 0.38442,0 0.71875,0.30308 0.71875,0.6875 0,0.38442 -0.33433,0.71875 -0.71875,0.71875 -0.38442,0 -0.6875,-0.33433 -0.6875,-0.71875 0,-0.38442 0.30308,-0.6875 0.6875,-0.6875 z m -13,2 C 1.88442,2.8125 2.1875,3.11558 2.1875,3.5 2.1875,3.88442 1.88442,4.21875 1.5,4.21875 1.11558,4.21875 0.78125,3.88442 0.78125,3.5 0.78125,3.11558 1.11558,2.8125 1.5,2.8125 z m 13,0 c 0.38442,0 0.71875,0.30308 0.71875,0.6875 0,0.38442 -0.33433,0.71875 -0.71875,0.71875 -0.38442,0 -0.6875,-0.33433 -0.6875,-0.71875 0,-0.38442 0.30308,-0.6875 0.6875,-0.6875 z m -13,2 C 1.88442,4.8125 2.1875,5.11558 2.1875,5.5 2.1875,5.88442 1.88442,6.21875 1.5,6.21875 1.11558,6.21875 0.78125,5.88442 0.78125,5.5 0.78125,5.11558 1.11558,4.8125 1.5,4.8125 z m 13,0 c 0.38442,0 0.71875,0.30308 0.71875,0.6875 0,0.38442 -0.33433,0.71875 -0.71875,0.71875 -0.38442,0 -0.6875,-0.33433 -0.6875,-0.71875 0,-0.38442 0.30308,-0.6875 0.6875,-0.6875 z m -13,2 C 1.88442,6.8125 2.1875,7.11558 2.1875,7.5 2.1875,7.88442 1.88442,8.21875 1.5,8.21875 1.11558,8.21875 0.78125,7.88442 0.78125,7.5 0.78125,7.11558 1.11558,6.8125 1.5,6.8125 z m 13,0 c 0.38442,0 0.71875,0.30308 0.71875,0.6875 0,0.38442 -0.33433,0.71875 -0.71875,0.71875 -0.38442,0 -0.6875,-0.33433 -0.6875,-0.71875 0,-0.38442 0.30308,-0.6875 0.6875,-0.6875 z M 7.04021,8.01562 c -1.1122,0 -1.99105,0.89617 -1.99105,2.01563 0,1.11946 0.87885,2.01562 1.99105,2.01562 1.1122,0 1.99104,-0.89616 1.99104,-2.01562 0,-1.11946 -0.87884,-2.01563 -1.99104,-2.01563 z M 1.5,8.8125 c 0.38442,0 0.6875,0.30308 0.6875,0.6875 0,0.38442 -0.30308,0.71875 -0.6875,0.71875 C 1.11558,10.21875 0.78125,9.88442 0.78125,9.5 0.78125,9.11558 1.11558,8.8125 1.5,8.8125 z m 13,0 c 0.38442,0 0.71875,0.30308 0.71875,0.6875 0,0.38442 -0.33433,0.71875 -0.71875,0.71875 -0.38442,0 -0.6875,-0.33433 -0.6875,-0.71875 0,-0.38442 0.30308,-0.6875 0.6875,-0.6875 z m -13,2 c 0.38442,0 0.6875,0.30308 0.6875,0.6875 0,0.38442 -0.30308,0.71875 -0.6875,0.71875 -0.38442,0 -0.71875,-0.33433 -0.71875,-0.71875 0,-0.38442 0.33433,-0.6875 0.71875,-0.6875 z m 13,0 c 0.38442,0 0.71875,0.30308 0.71875,0.6875 0,0.38442 -0.33433,0.71875 -0.71875,0.71875 -0.38442,0 -0.6875,-0.33433 -0.6875,-0.71875 0,-0.38442 0.30308,-0.6875 0.6875,-0.6875 z m 0,2 c 0.38442,0 0.71875,0.30308 0.71875,0.6875 0,0.38442 -0.33433,0.71875 -0.71875,0.71875 -0.38442,0 -0.6875,-0.33433 -0.6875,-0.71875 0,-0.38442 0.30308,-0.6875 0.6875,-0.6875 z"
-       id="path10349"
-       style="fill-opacity:1;stroke:none;display:inline" />
-  </g>
+<?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/Memory.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Memory.svg
deleted file mode 100644
index 0762be059..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Memory.svg
+++ /dev/null
@@ -1,204 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg2994">
-  <defs
-     id="defs2996" />
-  <metadata
-     id="metadata2999">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 5.5,3.9279703 c -1.108,0 -2,0.892 -2,2 l 0,4.9999997 c 0,1.108 0.892,2 2,2 l 5,0 c 1.108,0 2,-0.892 2,-2 l 0,-4.9999997 c 0,-1.108 -0.892,-2 -2,-2 z"
-       id="rect22435"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="1"
-       height="2"
-       rx="2"
-       ry="0"
-       x="-5.5"
-       y="-2.9279704"
-       transform="scale(-1,-1)"
-       id="rect22439"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="1"
-       height="2"
-       rx="2"
-       ry="0"
-       x="-7.5"
-       y="-2.9279704"
-       transform="scale(-1,-1)"
-       id="rect22441"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="1"
-       height="2"
-       rx="2"
-       ry="0"
-       x="-9.5"
-       y="-2.9279704"
-       transform="scale(-1,-1)"
-       id="rect22443"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="1"
-       height="2"
-       rx="2"
-       ry="0"
-       x="-11.5"
-       y="-2.9279704"
-       transform="scale(-1,-1)"
-       id="rect22445"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="1"
-       height="2"
-       rx="2"
-       ry="0"
-       x="-5.5"
-       y="-15.92797"
-       transform="scale(-1,-1)"
-       id="rect22461"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="1"
-       height="2"
-       rx="2"
-       ry="0"
-       x="-7.5"
-       y="-15.92797"
-       transform="scale(-1,-1)"
-       id="rect22463"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="1"
-       height="2"
-       rx="2"
-       ry="0"
-       x="-9.5"
-       y="-15.92797"
-       transform="scale(-1,-1)"
-       id="rect22465"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="1"
-       height="2"
-       rx="2"
-       ry="0"
-       x="-11.5"
-       y="-15.92797"
-       transform="scale(-1,-1)"
-       id="rect22467"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="2"
-       height="1"
-       rx="2"
-       ry="0"
-       x="0.5"
-       y="4.9279704"
-       id="rect22469"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="2"
-       height="1"
-       rx="2"
-       ry="0"
-       x="0.5"
-       y="6.9279704"
-       id="rect22471"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="2"
-       height="1"
-       rx="2"
-       ry="0"
-       x="0.5"
-       y="8.9279699"
-       id="rect22473"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="2"
-       height="1"
-       rx="2"
-       ry="0"
-       x="0.5"
-       y="10.92797"
-       id="rect22475"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="2"
-       height="1"
-       rx="2"
-       ry="0"
-       x="13.5"
-       y="4.9279704"
-       id="rect22477"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="2"
-       height="1"
-       rx="2"
-       ry="0"
-       x="13.5"
-       y="6.9279704"
-       id="rect22479"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="2"
-       height="1"
-       rx="2"
-       ry="0"
-       x="13.5"
-       y="8.9279699"
-       id="rect22481"
-       style="fill-opacity:1;stroke:none" />
-    <rect
-       width="2"
-       height="1"
-       rx="2"
-       ry="0"
-       x="13.5"
-       y="10.92797"
-       id="rect22483"
-       style="fill-opacity:1;stroke:none" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/MemoryInstrument.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/MemoryInstrument.svg
new file mode 100644
index 000000000..e7923dde9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/MemoryInstrument.svg
@@ -0,0 +1,21 @@
+<?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="#e0a685" d="m5.4687 3.6207c-1.108 0-2 0.892-2 2v5c0 1.108 0.892 2 2 2h5c1.108 0 2-0.892 2-2v-5c0-1.108-0.892-2-2-2z"/>
+ <rect width="1" height="2" x="4.4687" y=".53861" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="1" height="2" x="6.4687" y=".53861" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="1" height="2" x="8.4687" y=".53861" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="1" height="2" x="10.469" y=".53861" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="1" height="2" x="4.4687" y="13.539" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="1" height="2" x="6.4687" y="13.539" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="1" height="2" x="8.4687" y="13.539" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="1" height="2" x="10.469" y="13.539" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="2" height="1" x=".46867" y="4.3768" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="2" height="1" x=".46867" y="6.3768" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="2" height="1" x=".46867" y="8.3768" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="2" height="1" x=".46867" y="10.377" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="2" height="1" x="13.469" y="4.3768" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="2" height="1" x="13.469" y="6.3768" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="2" height="1" x="13.469" y="8.3768" fill="#e0a685" rx="2" ry="2"/>
+ <rect width="2" height="1" x="13.469" y="10.377" fill="#e0a685" rx="2" ry="2"/>
+</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/MoreColumns.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/MoreColumns.svg
deleted file mode 100644
index a4cc87c1e..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/MoreColumns.svg
+++ /dev/null
@@ -1,53 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="15"
-   height="13"
-   id="svg7416">
-  <defs
-     id="defs7418" />
-  <metadata
-     id="metadata7421">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-3)"
-     id="layer1">
-    <path
-       d="m 2,3.0000002 c -1.052369,0 -2,0.84508 -2,1.9375 L 0,14.0625 C 0,15.15492 0.947631,16 2,16 l 11,0 c 1.05237,0 2,-0.84508 2,-1.9375 l 0,-9.1249998 c 0,-1.09242 -0.94763,-1.9375 -2,-1.9375 l -11,0 z m 2.5,0.5 1,0 c 0.25692,-4e-5 0.52871,0.11519 0.71875,0.28125 L 7.5,4.9375002 8.78125,3.7812502 C 8.97155,3.6154202 9.2431,3.5000102 9.5,3.5000002 l 1,0 0,0.90625 c 0,0.28091 -0.09032,0.50801 -0.28125,0.6875 l -2.15625,1.90625 0.9375,0 0,1 -1,0 0,1 1,0 L 9,10 l -1,0 0,1 1,0 0,1 -1,0 0,1 1,0 0,1 -1,0 0,-1 -1,0 0,1 -1,0 0,-1 1,0 0,-1 -1,0 0,-1 1,0 0,-1 -1,0 0,-0.9999998 1,0 0,-1 -1,0 0,-1 0.9375,0 -2.15625,-1.90625 C 4.59015,4.9143002 4.5,4.6871602 4.5,4.4062502 l 0,-0.90625 z m 2.5,4.5 1,0 0,-0.9375 -0.5,0.4375 -0.5,-0.4375 0,0.9375 z m 0,1 L 7,10 l 1,0 0,-0.9999998 -1,0 z M 7,11 l 0,1 1,0 0,-1 -1,0 z m -5,-4.9999998 3.03125,0 0,2 -3.03125,0 0,-2 z m 8,0 3,0 0,2 -3,0 0,-2 z m -8,3 3.03125,0 L 5.03125,11 2,11 2,9.0000002 z m 8,0 3,0 L 13,11 10,11 10,9.0000002 z M 2,12 l 3.03125,0 0,2 L 2,14 2,12 z m 8,0 3,0 0,2 -3,0 0,-2 z"
-       id="rect27790-9-7-4"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Native.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Native.svg
index 641663b23..6dd1a7c5f 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Native.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Native.svg
@@ -1,389 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3601">
-  <defs
-     id="defs3603">
-    <linearGradient
-       id="linearGradient6090">
-      <stop
-         id="stop6092"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6094"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient8412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.9827598,-4.8556584)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient8486"
-       xlink:href="#linearGradient8480"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480">
-      <stop
-         id="stop8482"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient7874"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       id="linearGradient4393-7">
-      <stop
-         id="stop4395-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient7876"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2"
-         style="stop-color:#f2f2f2;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9"
-         style="stop-color:#d9dad8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6"
-         style="stop-color:#dfe0dd;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient7878"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853">
-      <stop
-         id="stop4855"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880-9"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-8">
-      <stop
-         id="stop4855-0"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-6"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3707"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient3734"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3736"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3738"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3740"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3744"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3746"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="-6.0724082"
-       y1="3.0201192"
-       x2="-2.9216745"
-       y2="3.0201192"
-       id="linearGradient4526"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4585"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5185"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.9777341"
-       y1="2.6982248"
-       x2="-4.2471185"
-       y2="2.6982248"
-       id="linearGradient6096"
-       xlink:href="#linearGradient6090"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10060"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient10065"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069527,0,0,0.11066585,23.682408,-4.8510725)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient10068"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient10070"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10080"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata3606">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134779 2.112266,2.280564"
-     id="path7868"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.499998"
-     id="rect7870"
-     style="color:#000000;fill:url(#linearGradient10068);fill-opacity:1;stroke:url(#linearGradient10070);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195255,1.4949223 c -1.2946897,0 -2.3246007,1.0324565 -2.3246007,2.3274412 l 0,8.3552715 c 0,1.294985 1.029911,2.327441 2.3246007,2.327441 l 8.3609525,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552715 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609525,0 z"
-     id="path7872-9"
-     style="color:#000000;fill:none;stroke:url(#linearGradient10065);stroke-width:0.98984575;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 4.5,3 c -0.6444896,0 -1,0.3180842 -1,1 l 0,8 c 5.24e-5,0.523584 0.4764155,0.999948 1,1 l 1.4375,0 c 0.5235845,-5.2e-5 0.9999476,-0.476416 1,-1 l 0,-2.5625 2,3.09375 C 9.1102061,12.807087 9.4247574,12.988559 9.75,13 l 1.75,0 c 0.523584,-5.2e-5 0.999948,-0.476416 1,-1 l 0,-8 c -5.2e-5,-0.5235845 -0.476416,-0.9999476 -1,-1 l -1.4375,0 c -0.5235845,5.24e-5 -0.9999476,0.4764155 -1,1 l 0,2.5625 -2,-3.09375 C 6.8841192,3.1843062 6.5544978,3.0011832 6.21875,3 z m 1,2 0.1875,0 0.03125,0.0625 C 5.6424523,5.0849051 5.5688435,5.1164518 5.5,5.15625 z m 4.96875,5.84375 c 0.01042,1.63e-4 0.02083,1.63e-4 0.03125,0 L 10.5,11 10.28125,11 10.25,10.90625 c 0.07498,-0.01243 0.148524,-0.03345 0.21875,-0.0625 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Black Olives;-inkscape-font-specification:Black Olives" />
-  <path
-     d="M 4.5,3.5 C 4.114692,3.5 4,3.6800294 4,4 l 0,8 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 1.4375,0 c 0.2617922,-2.6e-5 0.4999738,-0.238208 0.5,-0.5 l 0,-4.21875 2.90625,4.5 C 9.4336596,12.413425 9.5901602,12.497695 9.75,12.5 l 1.75,0 c 0.261792,-2.6e-5 0.499974,-0.238208 0.5,-0.5 L 12,4 C 11.999974,3.7382078 11.761792,3.5000262 11.5,3.5 l -1.4375,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,4.21875 -2.9375,-4.5 C 6.5350904,3.5865746 6.3785898,3.502305 6.21875,3.5 z m 0.5,1 0.9375,0 3.71875,5.71875 c 0.2427911,0.338424 0.897721,0.13517 0.90625,-0.28125 l 0,-5.4375 0.4375,0 0,7 -0.96875,0 -3.6875,-5.71875 C 6.1009589,5.442826 5.4460291,5.6460801 5.4375,6.0625 l 0,5.4375 L 5,11.5 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient10080);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Black Olives;-inkscape-font-specification:Black Olives" />
-  <path
-     d="m 4.5072043,4.0000003 0,7.9999997 1.4178674,0 0,-5.9481266 L 9.7636882,12 l 1.7291068,0 0,-7.9999997 -1.417868,0 0,5.9365992 -3.8616709,-5.9365992 -1.7060518,0"
-     id="path10074"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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/NavigationItemAngleBrackets.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemAngleBrackets.svg
deleted file mode 100644
index befcfafed..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemAngleBrackets.svg
+++ /dev/null
@@ -1,62 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg8338">
-  <defs
-     id="defs8340" />
-  <metadata
-     id="metadata8343">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(1.05e-7,-0.3898562)"
-     id="g8935">
-    <g
-       id="layer1">
-      <g
-         id="text8346"
-         style="font-size:12.55424404px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:1.79903996px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Sans Bold">
-        <path
-           d="m 6.8502775,4.8997764 -5.85027771,2.8749219 0,1.3307499 5.85027771,2.7744878 0,-1.56928 -3.9671411,-1.9082455 3.9671411,-1.9961248 0,-1.5065093"
-           id="path8351" />
-        <path
-           d="m 9.1497219,4.8997764 0,1.5065093 3.9671411,1.9961248 -3.9671411,1.9082455 0,1.56928 L 15,9.1054482 15,7.7746983 9.1497219,4.8997764"
-           id="path8353" />
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemBrushAndRuler.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemBrushAndRuler.svg
deleted file mode 100644
index 031cbe54f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemBrushAndRuler.svg
+++ /dev/null
@@ -1,229 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg7526">
-  <defs
-     id="defs7528">
-    <linearGradient
-       id="linearGradient19282"
-       gradientTransform="matrix(-2.3934765,0.36393991,-0.16537651,-1.2902821,-54.066392,-2627.2326)">
-      <stop
-         id="stop19284"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6731"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6733"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6735"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6737"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6739"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6741"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6743"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6745"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient19282-5"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop19284-2"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6767"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6769"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6771"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6773"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6775"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6777"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6779"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6781"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6783"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6785"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6787"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6789"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6791"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6793"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6795"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6797"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient19282-2"
-       gradientTransform="matrix(-0.3603726,0.05374203,-0.02489983,-0.19053249,-524.45529,-1796.9344)">
-      <stop
-         id="stop19284-4"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6822"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6824"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6826"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6828"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6830"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6832"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6834"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,239.54008,-1703.6896)">
-      <stop
-         id="stop6836"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient19282-7"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,-91.460119,-2935.4358)">
-      <stop
-         id="stop19284-9"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient19282-1"
-       gradientTransform="matrix(-2.3934765,0.36393991,-0.16537651,-1.2902821,-54.066392,-2627.2326)">
-      <stop
-         id="stop19284-21"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient8245"
-       gradientTransform="matrix(-2.7365795,0.40810354,-0.18908311,-1.4468561,-91.460119,-2935.4357)">
-      <stop
-         id="stop8247"
-         style="stop-color:#666666;stop-opacity:1"
-         offset="0" />
-    </linearGradient>
-  </defs>
-  <metadata
-     id="metadata7531">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 15.25,0.65625 c -0.150028,0.00269 -0.349237,0.10083125 -0.5625,0.3125 C 10.688761,4.93759 9.989927,4.9753301 6.25,10.125 7.25355,10.1627 8.11506,10.81365 8.5625,11.75 12.989927,6.9775401 13.48894,4.42617 15.40625,1.34375 15.598977,0.92762499 15.500047,0.65176612 15.25,0.65625 z M 1,1.5 1,14.125 c 0.498688,1.8e-4 0.7312067,-0.09104 0.9375,-0.25 C 2.1437933,13.716038 2.3459779,13.45262 2.53125,13.09375 2.6856434,12.794692 2.8232894,12.388712 3,12 l 0,-0.5 0.28125,0 C 3.5082914,11.131852 3.796783,10.783162 4.25,10.5 L 3,10.5 3,9.46875 C 3.032607,9.47539 3.059125,9.5 3.09375,9.5 l 2.375,0 C 5.6454206,9.256968 5.7732727,9.0653885 5.9375,8.84375 5.8695101,8.6485151 5.6877297,8.5 5.46875,8.5 l -2.375,0 C 3.060061,8.5 3.031788,8.49371 3,8.5 l 0,-1 1.5,0 C 4.777,7.5 5,7.277 5,7 5,6.723 4.777,6.5 4.5,6.5 l -1.5,0 0,-1 1.5,0 C 4.777,5.5 5,5.277 5,5 5,4.723 4.777,4.5 4.5,4.5 l -1.5,0 0,-1 4.1875,0 c 1.1860754,0 1.6915845,0.6659492 1.78125,1.625 0.5272612,-0.5656532 1.078162,-1.0758141 1.625,-1.59375 C 10.072162,2.3831019 9.0255133,1.5 7.3125,1.5 L 1,1.5 z m 10,9.03125 C 10.505823,11.138328 9.9475104,11.753003 9.3125,12.4375 L 8.96875,12.78125 C 9.044847,13.402497 8.941361,13.983975 8.71875,14.5 L 11,14.5 11,10.53125 z M 5.875,11 C 5.5297332,11.008154 5.1327525,11.104613 4.75,11.34375 3.4288149,12.169203 3.7210802,15.125981 1,15.125 c 0.2576317,0.997882 4.1663795,1.231487 5.78125,0.1875 0.8418198,-0.544223 1.4629939,-1.550425 1.125,-2.78125 C 7.7053515,11.799665 6.9108005,10.975538 5.875,11 z"
-       id="path9264"
-       style="fill-opacity:1;stroke:none" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemBug.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemBug.svg
deleted file mode 100644
index f3da8db92..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemBug.svg
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg9539">
-  <defs
-     id="defs9541" />
-  <metadata
-     id="metadata9544">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 13.1875,1.125 -2.09375,2.28125 c -0.896562,-0.925279 -2.0305402,-1.5 -3.28125,-1.5 -1.1793548,0 -2.2841701,0.5115162 -3.15625,1.34375 L 2.75,1.21875 2.03125,1.90625 4,4 C 3.4365803,4.7600454 3.0341262,5.6896155 2.8125,6.71875 2.7190992,7.1524622 2.6751804,7.5982028 2.65625,8.0625 l -1.65625,0 0,1 1.65625,0 c 0.079371,0.973914 0.3321393,1.857585 0.71875,2.65625 L 1.78125,13.4375 2.5,14.125 l 1.375,-1.5 c 0.9514027,1.373483 2.3734256,2.25 3.9375,2.25 1.6213101,0 3.079818,-0.944837 4.03125,-2.40625 l 1.59375,1.71875 0.71875,-0.65625 -1.84375,-2 c 0.335883,-0.751148 0.583208,-1.5725028 0.65625,-2.46875 l 2.03125,0 0,-1 -2.03125,0 c -0.01893,-0.4642972 -0.0941,-0.9100378 -0.1875,-1.34375 -0.12523,-0.581513 -0.320569,-1.1199371 -0.5625,-1.625 -0.157832,-0.3294952 -0.299418,-0.6491901 -0.5,-0.9375 L 13.90625,1.8125 13.1875,1.125 z M 3.75,6.71875 l 3.5625,0 0,7 C 5.1797475,13.412441 3.53125,11.156638 3.53125,8.40625 3.53125,7.8167989 3.61016,7.2482924 3.75,6.71875 z m 4.875,0 3.21875,0 c 0.140322,0.5303591 0.21875,1.0969913 0.21875,1.6875 0,2.604132 -1.470216,4.736519 -3.4375,5.21875 l 0,-6.90625 z"
-       id="path5913"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemClear.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemClear.svg
new file mode 100644
index 000000000..b873ad767
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemClear.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/NavigationItemCodeCoverage.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemCodeCoverage.svg
new file mode 100644
index 000000000..513be39af
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemCodeCoverage.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 stroke="currentColor" width="12" height="12" x=".49998" y="1.0001" fill="none" stroke-width=".99996" stroke-miterlimit="10" stroke-linejoin="bevel" rx="1.2112" ry="1.2111"/>
+ <path fill="none" stroke="currentColor" stroke-width="2.4" d="M9 5.5s0-1.5-2.5-1.5C3 4 3 10 6.5 10c2.5 0 2.5-1.5 2.5-1.5"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemCurleyBraces.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemCurleyBraces.svg
index 6da1aa90c..b02a7b987 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemCurleyBraces.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemCurleyBraces.svg
@@ -1,41 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg8338">
-  <defs
-     id="defs8340" />
-  <metadata
-     id="metadata8343">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <g
-       id="text8346"
-       style="font-size:13.956604px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:2px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Sans Bold">
-      <path
-         d="M 3.4300534,5.459898 C 3.2765309,6.6322516 2.6624395,7.1486472 2.0064798,7.2602999 l -0.2372623,0.027913 0,1.4235736 0.2372623,0.027913 c 0.237262,0.04187 0.4605681,0.1395662 0.6559604,0.2791321 0.8653085,0.6280466 0.7536567,1.7585334 0.8513528,2.7075814 0.2651752,2.609883 2.1074479,3.056497 2.749451,3.098366 l 0.2372623,0.02791 0.3349585,-1.423573 -0.3070453,-0.04187 C 6.067852,13.331423 5.6770664,13.038334 5.453761,12.703375 4.7001051,11.544978 5.5095858,9.3119194 3.9604043,7.9999999 5.4956292,6.6880805 4.6861485,4.4689779 5.453761,3.2966244 5.6770664,2.9616662 6.067852,2.6546205 6.5284195,2.5987942 L 6.8354648,2.5569244 6.5005063,1.1473074 6.263244,1.161264 C 5.5235447,1.2170903 3.7650116,1.7055742 3.513793,4.3573263 3.4858798,4.7341542 3.4719232,5.1109832 3.4300534,5.459898"
-         id="path8893" />
-      <path
-         d="M 12.486207,4.3573263 C 12.234988,1.7195308 10.490412,1.2170903 9.736756,1.161264 L 9.4994937,1.147307 9.1784918,2.556924 9.4855371,2.598794 c 0.4605675,0.055826 0.8373969,0.362872 1.0607019,0.6978302 0.767612,1.1723535 -0.04187,3.3914561 1.493357,4.7033755 -1.549182,1.3119195 -0.739701,3.5449783 -1.493357,4.7033753 -0.223305,0.334959 -0.6001344,0.628048 -1.0607019,0.683874 l -0.3070453,0.04187 0.3210019,1.423573 0.2372623,-0.02791 c 0.642003,-0.04187 2.484276,-0.488483 2.749451,-3.098366 0.0977,-0.949048 -0.01396,-2.0795346 0.851353,-2.7075812 0.195392,-0.1395659 0.432655,-0.2372623 0.669917,-0.2791321 l 0.223305,-0.027913 0,-1.4235736 -0.223305,-0.027913 C 13.351517,7.1486472 12.737426,6.6322516 12.583903,5.459898 12.542033,5.1109832 12.51412,4.7341542 12.486207,4.3573263"
-         id="path8895" />
-    </g>
-  </g>
+<?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="currentColor" stroke-width="1.7919" d="m8.8266 14.775c2.4332-0.39123 3.2093-1.2357 3.3288-3.1057 0.08782-1.3739-0.01793-2.6805 1.5146-3.6732-1.533-0.9927-1.427-2.2992-1.515-3.6731-0.119-1.8701-0.895-2.7145-3.3284-3.1057"/>
+ <path fill="none" stroke="currentColor" stroke-width="1.7919" d="m7.253 14.775c-2.4332-0.391-3.2092-1.236-3.3288-3.106-0.0878-1.374 0.018-2.6801-1.5145-3.6729 1.5325-0.9927 1.4267-2.2992 1.5145-3.6731 0.1196-1.8701 0.8956-2.7145 3.3288-3.1057"/>
 </svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemFile.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemFile.svg
deleted file mode 100644
index 77d90afc5..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemFile.svg
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3003">
-  <defs
-     id="defs3005" />
-  <metadata
-     id="metadata3008">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 2.8124436,0.50054895 a 1.0000999,1.0000999 0 0 0 -0.8125,1.00000005 l 0,13 a 1.0000999,1.0000999 0 0 0 1.0000001,1 l 9.9999993,0 a 1.0000999,1.0000999 0 0 0 1,-1 l 0,-9.4375 a 1.0000999,1.0000999 0 0 0 -0.28125,-0.71875 L 10.156194,0.78179895 a 1.0000999,1.0000999 0 0 0 -0.7187503,-0.28125 l -6.4375,0 a 1.0000999,1.0000999 0 0 0 -0.0937,0 1.0000999,1.0000999 0 0 0 -0.0937,0 z m 1.1875001,2.00000005 5,0 0,3 2.9999993,0 0,8 -7.9999993,0 0,-11 z"
-       id="path1234"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:1.99999988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemLayers.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemLayers.svg
deleted file mode 100644
index b4cc684c9..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemLayers.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4341">
-  <defs
-     id="defs4343" />
-  <metadata
-     id="metadata4346">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 1,14.5 3,-3 11,0 -3,3 z"
-     id="path11960"
-     style="fill-opacity:1;stroke:none" />
-  <path
-     d="m 1,9.5 3,-3 11,0 -3,3 z"
-     id="path11962"
-     style="fill-opacity:1;stroke:none" />
-  <path
-     d="m 1,4.5 3,-3 11,0 -3,3 z"
-     id="path11964"
-     style="fill-opacity:1;stroke:none" />
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemLog.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemLog.svg
deleted file mode 100644
index 532ec4e8f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemLog.svg
+++ /dev/null
@@ -1,63 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg5864">
-  <defs
-     id="defs5866" />
-  <metadata
-     id="metadata5869">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="M 2.1875,0.5 C 0.98196,0.5 0,1.51672 0,2.71875 l 0,10.5625 C 0,14.48328 0.98197,15.5 2.1875,15.5 l 11.625,0 C 15.01803,15.5 16,14.48329 16,13.28125 L 16,2.71875 C 16,1.51671 15.01804,0.5 13.8125,0.5 l -11.625,0 z m 0,2 11.625,0 C 13.9353,2.5 14,2.5809 14,2.71875 l 0,10.5625 C 14,13.41909 13.93531,13.5 13.8125,13.5 l -11.625,0 C 2.06469,13.5 2,13.4191 2,13.28125 L 2,2.71875 C 2,2.5809 2.0647,2.5 2.1875,2.5 z"
-       id="rect11749-5-9"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
-    <path
-       d="M 4.3125,6.40625 A 0.60006002,0.60006002 0 0 0 4.0625,7.4375 L 5.625,9 4.0625,10.5625 a 0.61871843,0.61871843 0 1 0 0.875,0.875 l 2,-2 a 0.60006002,0.60006002 0 0 0 0,-0.875 l -2,-2 A 0.60006002,0.60006002 0 0 0 4.3125,6.40625 z"
-       id="path11751-2-3"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#bebebe;fill-opacity:1;stroke:none;stroke-width:1.20000005;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
-    <rect
-       width="3"
-       height="1.00001"
-       x="8"
-       y="10.5"
-       id="rect4987"
-       style="color:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemMagnifyingGlass.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemMagnifyingGlass.svg
deleted file mode 100644
index 543dde5a5..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemMagnifyingGlass.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="15"
-   height="15"
-   id="svg5254">
-  <defs
-     id="defs5256" />
-  <metadata
-     id="metadata5259">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-1)"
-     id="layer1">
-    <path
-       d="M 6.4865,1 C 3.45764,1 0.97577,3.47905 0.97577,6.50447 c 0,3.02541 2.48187,5.50446 5.51073,5.50446 3.02885,0 5.51072,-2.47905 5.51072,-5.50446 C 11.99722,3.47905 9.51535,1 6.4865,1 z m 0,2.00893 c 1.94735,0 3.49951,1.55039 3.49951,3.49554 C 9.98601,8.44961 8.43385,10 6.4865,10 4.53914,10 2.98698,8.44961 2.98698,6.50447 c 0,-1.94515 1.55216,-3.49554 3.49952,-3.49554 z"
-       id="path5079"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:1.55467153;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="m 9.79119,9.00446 a 1.0001,1.0001 0 0 0 -0.5,1.71875 l 4,4 a 1.0054782,1.0054782 0 1 0 1.40625,-1.4375 l -4,-4 A 1.0001,1.0001 0 0 0 9.79119,9.00446 z"
-       id="path5081"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemStopwatch.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemStopwatch.svg
deleted file mode 100644
index 129769ba6..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemStopwatch.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg6972">
-  <defs
-     id="defs6974" />
-  <metadata
-     id="metadata6977">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 8.000005,0.51339 c -4.13029,0 -7.48661,3.35631 -7.48661,7.48661 0,4.13029 3.35632,7.48661 7.48661,7.48661 4.13029,0 7.4866,-3.35632 7.4866,-7.48661 0,-4.1303 -3.35631,-7.48661 -7.4866,-7.48661 z m 0,1.97322 c 3.04941,0 5.51339,2.46398 5.51339,5.51339 0,3.04941 -2.46398,5.51339 -5.51339,5.51339 -3.04941,0 -5.5134,-2.46398 -5.5134,-5.51339 0,-3.04941 2.46399,-5.51339 5.5134,-5.51339 z"
-       id="path24839"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2.15384626;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="M 4.812305,4.46875 A 0.50005,0.50005 0 0 0 4.593555,5.3125 l 3.09375,3.0625 a 0.50005,0.50005 0 0 0 0.0625,0.0312 0.50005,0.50005 0 0 0 0.0625,0.0312 0.50005,0.50005 0 0 0 0.0625,0.0312 0.50005,0.50005 0 0 0 0.0312,0 0.50005,0.50005 0 0 0 0.0625,0.0312 0.50005,0.50005 0 0 0 0.0937,0 l 0.15625,0 2.78125,0 a 0.50005,0.50005 0 1 0 0,-1 l -2.75,0 -2.96875,-2.875 A 0.50005,0.50005 0 0 0 4.812205,4.46855 z"
-       id="path25609"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemStorage.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemStorage.svg
deleted file mode 100644
index 78085bc67..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemStorage.svg
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg6420">
-  <defs
-     id="defs6422" />
-  <metadata
-     id="metadata6425">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="M 3.1875,0 C 1.98238,0 1,1.01795 1,2.21875 l 0,11.5625 C 1,14.98205 1.98238,16 3.1875,16 l 9.625,0 C 14.01762,16 15,14.98205 15,13.78125 L 15,2.21875 C 15,1.01795 14.01762,0 12.8125,0 L 3.1875,0 z M 3,3 13,3 13,14 3,14 3,3 z m 1,1 0,4 8.03125,0 0,-4 L 4,4 z m 2.34375,1.4375 a 0.50004997,0.50004997 0 0 1 0.0625,0 A 0.50004997,0.50004997 0 0 1 7,5.9375 L 7,6 9,6 9,5.9375 a 0.50004997,0.50004997 0 1 1 1,0 L 10,6 C 10,6.54535 9.54535,7 9,7 L 7,7 C 6.45465,7 6,6.54535 6,6 L 6,5.9375 a 0.50004997,0.50004997 0 0 1 0.34375,-0.5 z M 4.03125,9 l 0,4 8.03125,0 0,-4 -8.03125,0 z m 2.3125,1.4375 a 0.50004997,0.50004997 0 0 1 0.0625,0 A 0.50004997,0.50004997 0 0 1 7,10.9375 L 7,11 9,11 9,10.9375 a 0.50004997,0.50004997 0 1 1 1,0 L 10,11 c 0,0.54535 -0.45465,1 -1,1 L 7,12 C 6.45465,12 6,11.54535 6,11 l 0,-0.0625 a 0.50004997,0.50004997 0 0 1 0.34375,-0.5 z"
-       id="rect11668-7"
-       style="color:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemTrash.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemTrash.svg
index 932c24bc0..b873ad767 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemTrash.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemTrash.svg
@@ -1,52 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4702">
-  <defs
-     id="defs4704" />
-  <metadata
-     id="metadata4707">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 3.5,5 0,9 9,0 0,-9 2,0 0,9 c 0,2 -2,2 -2,2 l -9,0 c -2,0 -2,-2 -2,-2 l 0,-9 z m 4.00001,1 1.00002,0 0,6 -1.00002,0 z m 2,0 1.00002,0 0,6 -1.00002,0 z m -4,0 0.99999,0 0,6 -0.99999,0 z M 4.5,0 c -2,0 -2,2 -2,2 l -2,0 0,2 15,0 0,-2 -2,0 c 0,-2 -2,-2 -2,-2 l -7,0 z m 0,1 7,0 0,1 -7,0 0,-1 z"
-       id="path3799"
-       style="fill-opacity:1;stroke:none" />
-  </g>
+<?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..cb040e7b2
--- /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="currentColor" stroke-width=".99996" stroke-miterlimit="10" ry="1.2111" rx="1.2112" stroke-linejoin="bevel"/>
+ <path fill="currentColor" 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/NavigationItemVariable.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemVariable.svg
deleted file mode 100644
index 009a7a786..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemVariable.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg8960">
-  <defs
-     id="defs8962" />
-  <metadata
-     id="metadata8965">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <g
-       transform="matrix(1.2171799,0,0,1.2171799,-1.7374392,-1.737439)"
-       id="text8968"
-       style="font-size:17.31025314px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Sans Bold">
-      <path
-         d="m 12.197736,10.908122 c -0.450066,0.311585 -0.6751,0.415446 -0.986684,0.415446 -0.398135,0 -0.761651,-0.225033 -1.125166,-0.70972 C 9.7916116,10.198402 9.6531285,9.9041258 8.9087884,8.0173101 9.9647128,6.2689763 10.98602,5.2996003 11.76498,5.2996003 c 0.05193,0 0.138482,0 0.242344,0.01731 l 0.155792,0 c 0.657789,0 1.177097,-0.4327569 1.177097,-0.9693742 0,-0.4327559 -0.311585,-0.7789614 -0.70972,-0.7789614 -1.073235,0 -2.423437,1.2809613 -4.0332892,3.8082557 L 7.3854861,3.793608 l -0.4500666,0 C 6.1737691,4.0013311 5.7063906,4.0705725 4.7889481,4.1744339 L 4.7023969,4.6764312 C 5.8621827,4.9360848 6.0525972,5.1438096 6.6411452,6.7017308 L 7.0739015,7.8268973 C 5.9660464,9.8695051 5.117842,10.700399 4.1484688,10.700399 c -0.069241,0 -0.1384822,0 -0.2250333,-0.01731 -0.2077229,-0.01731 -0.3635154,-0.03462 -0.3981359,-0.03462 -0.5019968,0 -0.8655126,0.363515 -0.8655126,0.865512 0,0.553928 0.3288953,0.917444 0.8135819,0.917444 1.177096,0 2.3022652,-1.107859 3.8774967,-3.8774971 l 0.3981358,0.9520639 c 0.588548,1.4540602 0.6924104,1.6790952 0.9693742,2.0252992 0.3981354,0.536618 0.9520645,0.830893 1.5752334,0.830893 0.72703,0 1.609854,-0.432757 2.284953,-1.107857 l -0.380826,-0.346205"
-         id="path8973"
-         style="font-style:italic;font-weight:normal;font-family:URW Bookman L;-inkscape-font-specification:URW Bookman L Italic" />
-    </g>
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Network.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Network.png
deleted file mode 100644
index 67f505384..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Network.png
+++ /dev/null
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
deleted file mode 100644
index 074fa05eb..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Network@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkInstrument.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkInstrument.svg
new file mode 100644
index 000000000..fb240fea3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkInstrument.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="#77b1c7" d="m8 0c-4.4047 0-8 3.5953-8 8s3.5953 8 8 8 8-3.5953 8-8-3.5953-8-8-8zm0 2.1875c3.2218 0 5.8125 2.5908 5.8125 5.8125 0 3.2218-2.5908 5.8125-5.8125 5.8125-3.2218 0-5.8125-2.5907-5.8125-5.8125s2.5908-5.8125 5.8125-5.8125z"/>
+ <path fill="#77b1c7" d="m8.1504 2.9609l-0.5762 0.0664-0.707 0.1993-0.1328 0.1328 0.4433 0.2871v0.1758l-0.1777 0.1777 0.2207 0.4648 0.1543-0.0898 0.1992-0.3086c0.2957-0.0914 0.5608-0.202 0.8418-0.332l0.2207-0.5742-0.4863-0.1993zm1.5996 0.2891l-0.2812 0.0625-0.2813 0.1875v0.125l-0.375 0.2812 0.0625 0.3438 0.25-0.1562 0.1562 0.1562 0.1563 0.0938 0.0937-0.2813-0.0624-0.1563 0.0624-0.0937 0.25-0.2187h0.0938l-0.0938 0.2187v0.2187c0.0954-0.026 0.1837-0.0504 0.2808-0.0624l-0.2808 0.1874v0.125l-0.3124 0.25-0.3126-0.0624v-0.1876l-0.1562 0.0938 0.0625 0.1562h-0.2187l-0.1563 0.2188-0.1563 0.1875-0.2812 0.0625 0.1875 0.1562 0.0313 0.1563h-0.2188l-0.25 0.1563v0.4062h0.125l0.125 0.125 0.25-0.125 0.0938-0.25 0.1874-0.125 0.0626-0.0938 0.3124-0.0624 0.1563 0.1874 0.1563 0.0938-0.0938 0.2188 0.1875-0.0626 0.0625-0.2187-0.1875-0.2187h0.0625l0.2188 0.1562 0.0624 0.25 0.1563 0.2188 0.0625-0.3126 0.094-0.0624c0.102 0.1065 0.194 0.255 0.281 0.375h0.313l0.218 0.75c-0.096 0.088-0.183 0.1644-0.281 0.25h-0.25l-0.375-0.0938h-0.1562l-0.1563 0.1875-0.375-0.4063-0.25-0.0624-0.4063 0.0624-0.5 0.1876c-0.198 0.2244-0.25 0.3293-0.4374 0.5624l0.0312 0.3438 0.0938 0.0938-0.1876 0.2812 0.1876 0.5c0.1765 0.1997 0.3549 0.3939 0.5312 0.5938l0.2812-0.2188 0.125 0.125 0.25-0.1875 0.0938 0.125h0.2812l0.1876 0.1563-0.125 0.3437 0.2187 0.2187-0.0313 0.3748 0.1563 0.282-0.0937 0.25c-0.0102 0.172-0.0313 0.358-0.0313 0.531 0.0851 0.234 0.1383 0.451 0.2187 0.687l0.0938 0.406v0.157h0.125l0.25-0.125h0.25c0.004-0.003-0.004-0.029 0-0.032l0.437-0.437-0.062-0.156 0.25-0.25-0.188-0.188 0.25-0.219 0.219-0.124 0.094-0.126-0.063-0.25v-0.6558l0.219-0.4062 0.188-0.2812 0.281-0.5938v-0.1562c-0.117 0.014-0.26 0.0222-0.375 0.0312l0.25-0.25 0.344-0.25 0.187-0.2188v-0.2187c-0.041-0.0784-0.083-0.1405-0.125-0.2187l-0.156 0.1874-0.125-0.1562-0.188-0.125v-0.3125l0.219 0.2187h0.219c0.109 0.0988 0.217 0.2001 0.312 0.3126l0.188-0.2188c-0.356-1.3262-0.827-2.1357-1.406-2.8438-0.011-0.0104-0.021-0.0209-0.032-0.0312-0.27-0.2659-0.581-0.4871-0.906-0.6875l-0.156 0.1563-0.281-0.2813h0.219c-0.22-0.1212-0.4501-0.2243-0.688-0.3125zm-4.7188 0.6562l-0.0937 0.2188s-0.1463 0.0525-0.1875 0.0625c-0.2645 0.2402-0.6941 0.6225-1.0625 1.1875-0.0921 0.1412-0.1647 0.2722-0.25 0.4375-0.0363 0.0752-0.0924 0.1416-0.125 0.2187-0.0462 0.1008-0.0832 0.2033-0.125 0.3126-0.0174 0.0502-0.0153 0.1053-0.0313 0.1562-0.1251 0.4024-0.1977 0.8116-0.2187 1.25 0.0563 0.0907 0.125 0.2188 0.125 0.2188l0.375 0.25 0.4375 0.125 0.125 0.1874 0.2812 0.1876 0.1563-0.0313 0.125 0.0625v0.0312l-0.1563 0.4376-0.125 0.1874 0.0313 0.0626-0.0625 0.3124 0.3125 0.6568 0.3437 0.312 0.1563 0.188-0.0313 0.468 0.0938 0.282-0.0938 0.437c0.2211 0.159 0.4731 0.283 0.7188 0.406l-0.0312-0.125 0.1562-0.156 0.0625-0.156 0.25-0.063 0.2187-0.5-0.0937-0.125 0.125-0.187 0.2813-0.063 0.1874-0.344-0.0624-0.437 0.25-0.313 0.0312-0.312c-0.313-0.1581-0.5956-0.3373-0.9062-0.5l-0.1876-0.3125-0.25-0.0625-0.1874-0.4062-0.375 0.0312-0.3126-0.25-0.3437 0.3125v0.0313c-0.104-0.031-0.2513-0.005-0.3437-0.0626l-0.0626-0.25v-0.2187l-0.2187 0.0313c0.0202-0.1516 0.0422-0.3173 0.0625-0.4688l-0.125 0.0312-0.1562 0.1563-0.125 0.0313-0.1876-0.0938v-0.2188l0.0313-0.2812 0.2813-0.1875 0.2187-0.0313 0.0625-0.125 0.2812 0.0626 0.1876 0.2812 0.0312-0.4375 0.375-0.2813 0.1562-0.3437 0.2813-0.0937 0.125-0.25 0.3437-0.0626 0.1876-0.25h-0.5l0.2812-0.125h0.25l0.3125-0.125 0.0625-0.125-0.125-0.125-0.125-0.0312 0.0312-0.125-0.0937-0.1875-0.2187 0.0625 0.0312-0.1875-0.2812-0.125-0.1876 0.3437v0.1563l-0.2187 0.0937-0.125 0.2813-0.0313-0.2813-0.4062-0.1562-0.0312-0.1875 0.4687-0.25 0.2187-0.2187 0.0313-0.25-0.125-0.0626h-0.1563z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge.png b/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge.png
deleted file mode 100644
index 074fa05eb..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge@2x.png
deleted file mode 100644
index 8d0787e12..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge@2x.png
+++ /dev/null
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..f90a86c03
--- /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 fill="currentColor" 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
index a732811df..401887b9d 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Pause.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Pause.svg
@@ -1,56 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3923">
-  <defs
-     id="defs3925" />
-  <metadata
-     id="metadata3928">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="M 4,4 4,12 7,12 7,4 4,4 z"
-       id="path3807-1-1-5-8-6"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0pt;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;text-anchor:start;color:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;font-family:Andale Mono" />
-    <path
-       d="m 9,4 0,8 3,0 0,-8 -3,0 z"
-       id="path3807-1-1-5-8-6-3"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0pt;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;text-anchor:start;color:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;font-family:Andale Mono" />
-  </g>
+<?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/Percent.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Percent.svg
deleted file mode 100644
index 5fce566a5..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Percent.svg
+++ /dev/null
@@ -1,55 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3879">
-  <defs
-     id="defs3881" />
-  <metadata
-     id="metadata3884">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <g
-       id="text3887"
-       style="font-size:20.17291069px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-      <path
-         d="m 4.4394813,2.9164265 c 0.4034578,0 0.9682997,0.1210387 0.9682997,1.351585 0,0.746397 -0.2017299,1.4726225 -0.9682997,1.4726225 -0.7867428,0 -0.9481268,-0.7665714 -0.9481268,-1.5129683 0,-0.6657054 0.1815569,-1.3112392 0.9481268,-1.3112392 m 0,-1.7550432 c -1.4121024,0 -2.723343,1.0086476 -2.723343,3.0662824 0,2.4409197 1.3515864,3.2276657 2.723343,3.2276657 1.654177,0 2.925072,-1.2103766 2.925072,-3.2074928 0,-2.5014384 -1.7146986,-3.0864553 -2.925072,-3.0864553 M 11.580692,10.21902 c 0.403457,0 0.968299,0.121039 0.968299,1.351585 0,0.746397 -0.20173,1.45245 -0.968299,1.45245 -0.786743,0 -0.9683,-0.746399 -0.9683,-1.492796 0,-0.665705 0.20173,-1.311239 0.9683,-1.311239 m 0,-1.7550431 c -1.472621,0 -2.9048995,1.0086476 -2.9048995,3.0662821 0,2.44092 1.4726235,3.227666 2.9048995,3.227666 1.573485,0 2.723343,-1.210377 2.723343,-3.207493 0,-2.4610924 -1.51297,-3.0864551 -2.723343,-3.0864551 M 12.105187,0.99999998 1.2319885,15 3.8948127,15 14.768012,0.99999998 l -2.662825,0"
-         id="path3892" />
-    </g>
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Plus.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Plus.svg
deleted file mode 100644
index 782534a2a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Plus.svg
+++ /dev/null
@@ -1,59 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="13"
-   height="13"
-   id="svg4491">
-  <defs
-     id="defs4493" />
-  <metadata
-     id="metadata4496">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-3)"
-     id="layer1">
-    <text
-       x="0.45220301"
-       y="15.371576"
-       transform="scale(0.99916909,1.0008316)"
-       id="text4499"
-       xml:space="preserve"
-       style="font-size:18.28762054px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-         x="0.45220301"
-         y="15.371576"
-         id="tspan4501">+</tspan></text>
-  </g>
-</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/Printer.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Printer.svg
new file mode 100644
index 000000000..d31a0f33d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Printer.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 fill="currentColor" d="M 4 5 L 4 1 L 12 1 L 12 5 L 11 5 L 11 2 L 5 2 L 5 5 Z"/>
+ <path fill="currentColor" d="M 4 10 L 4 14 L 12 14 L 12 10 L 11 10 L 11 13 L 5 13 L 5 10 Z"/>
+ <path fill="currentColor" d="M 3 9 L 3 12 L 0.5 12 L 0.5 5.5 L 15.5 5.5 L 15.5 12 L 13 12 L 13 9 Z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Profile.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Profile.png
deleted file mode 100644
index 66f73d810..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Profile.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Profile@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Profile@2x.png
deleted file mode 100644
index 2dc3fb5f8..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Profile@2x.png
+++ /dev/null
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
index 868b73bb5..be4735c7d 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/PseudoElement.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/PseudoElement.svg
@@ -1,445 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient7085">
-      <stop
-         id="stop7087"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7089"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient9464">
-      <stop
-         id="stop9466"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop9468"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#f24e4e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#fde7e7;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#fab8b8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#fbc3c3;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#a40000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="-6.8676748"
-       y1="4.3834319"
-       x2="-4.1903138"
-       y2="4.3834319"
-       id="linearGradient9470"
-       xlink:href="#linearGradient9464"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient9479"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-5.0847453,-13.423729)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6164"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6224"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-5.0847453,-13.423729)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7015"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7025"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7031"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755039,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7042"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755039,0)" />
-    <linearGradient
-       x1="-4.9307694"
-       y1="1.2591716"
-       x2="-3.0218937"
-       y2="1.2591716"
-       id="linearGradient7091"
-       xlink:href="#linearGradient7085"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 5.0625,3 c -0.78728,0 -1,0.2045876 -1,1 l 0,8 c 5.24e-5,0.523584 0.4764155,0.999948 1,1 l 1.40625,0 c 0.5235845,-5.2e-5 0.9999476,-0.476416 1,-1 l 0,-2.15625 C 8.3028958,9.82944 9.2166559,9.819399 10.09375,9.40625 11.096143,8.93408 11.9375,7.8259741 11.9375,6.375 11.9375,4.933822 11.0281,3.8637975 10.09375,3.4375 9.1593999,3.0112025 8.2268341,3 7.65625,3 z m 1,2 0.40625,0 0,0.3125 -0.40625,0 z m 1.40625,1.3125 0.0625,0 c 0.4717689,0 0.8566751,0.046351 0.96875,0.09375 0,0.1099898 -0.01613,0.084244 0,0.0625 C 8.51613,6.447006 8.526999,6.46565 8.4375,6.5 8.2988213,6.55323 7.8787131,6.576154 7.46875,6.59375 z"
-     id="text5177-4-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 5.0625,3.5 c -0.423175,0 -0.5,0.1611965 -0.5,0.5 l 0,8 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 1.40625,0 c 0.2617922,-2.6e-5 0.4999738,-0.238208 0.5,-0.5 l 0,-2.59375 c 0.043032,8.015e-4 0.080042,0 0.125,0 0.8901082,0 1.9068544,-0.056872 2.78125,-0.46875 0.874396,-0.4118777 1.5625,-1.2664084 1.5625,-2.5625 0,-1.2710207 -0.718254,-2.0978201 -1.53125,-2.46875 C 9.0932536,3.5353201 8.2009078,3.5 7.65625,3.5 z m 0.5,1 2.09375,0 c 0.4928051,0 1.2422109,0.052305 1.8125,0.3125 0.570289,0.2601946 0.96875,0.6317939 0.96875,1.5625 0,0.9863268 -0.35035,1.3649571 -0.96875,1.65625 -0.6184002,0.2912929 -1.5360034,0.375 -2.375,0.375 C 6.8922739,8.40625 6.7085166,8.3865843 6.5,8.375 6.2279903,8.3579947 5.9682462,8.6024597 5.96875,8.875 l 0,2.625 -0.40625,0 z m 0.90625,0.3125 0,0.5 -0.5,0 0,2.28125 c -4.684e-4,0.2516954 0.2175477,0.4842459 0.46875,0.5 C 6.6622489,8.104452 6.9136792,8.125 7.1875,8.125 7.8069726,8.125 8.4163177,8.11829 8.96875,7.90625 9.2449662,7.8002276 9.4954469,7.6338907 9.6875,7.375 9.8795531,7.1161093 10,6.7662403 10,6.40625 10,5.7555523 9.5845427,5.2388185 9.09375,5.03125 8.6029573,4.8236815 8.0648172,4.8125 7.53125,4.8125 z m 0.5,1 0.5625,0 c 0.4923683,0 0.9179358,0.024211 1.15625,0.125 C 8.9258142,6.038289 9,6.0771216 9,6.40625 9,6.5995733 8.9595141,6.7094492 8.90625,6.78125 8.8529859,6.8530508 8.7454879,6.9105072 8.59375,6.96875 8.2902743,7.0852357 7.7784008,7.125 7.1875,7.125 c -0.066785,0 -0.1504865,0.00338 -0.21875,0 z"
-     id="text5177-1"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient7042);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <g
-     id="text5177-7"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 5.0547552,4.0000003 0,7.9999997 1.4178674,0 0,-3.1123918 c 0.2074926,0.011527 0.4034584,0.023055 0.6224783,0.023055 1.7291049,0 3.8501441,-0.2651319 3.8501441,-2.5475503 0,-2.2017268 -2.2478397,-2.3631123 -3.2853026,-2.3631123 l -2.6051872,0 m 1.4178674,1.3025936 1.0489913,0 c 1.0259355,0 1.9711815,0.1268021 1.9711815,1.1066282 0,1.1066271 -1.1066294,1.2103746 -2.3170028,1.2103746 -0.2420747,0 -0.4610953,-0.023055 -0.70317,-0.034582 l 0,-2.2824207"
-       id="path7036" />
-  </g>
+<?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/Recording.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Recording.png
deleted file mode 100644
index 1d2877de8..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Recording.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Recording@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Recording@2x.png
deleted file mode 100644
index 888248c4d..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Recording@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingHovered.png b/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingHovered.png
deleted file mode 100644
index 7d4bfe8c5..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingHovered.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingHovered@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingHovered@2x.png
deleted file mode 100644
index c782cba2f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingHovered@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingStopped.png b/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingStopped.png
deleted file mode 100644
index c6a9733f0..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingStopped.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingStopped@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingStopped@2x.png
deleted file mode 100644
index d2c060bf5..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/RecordingStopped@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Reflection.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Reflection.svg
index 5caeacb8c..5082d6966 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Reflection.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Reflection.svg
@@ -1,422 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient4329">
-      <stop
-         id="stop4331"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4333"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#e4edf6;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#ecf2f8;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#e4edf6;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#c6d9ec;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#cfdfef;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3502"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3507"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-290.56634,-217.42327)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3510"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3513"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3515"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4300"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4306"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.80307692,0,0,0.80307692,-0.3079836,1.5753847)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4319"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.80307692,0,0,0.80307692,-0.3079836,1.5753847)" />
-    <linearGradient
-       x1="-5.8073196"
-       y1="3.9479289"
-       x2="-4.0577693"
-       y2="3.9479289"
-       id="linearGradient4335"
-       xlink:href="#linearGradient4329"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5-1">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1-5"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2-1"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3288"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient3290">
-      <stop
-         id="stop3292"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop3294"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3342"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-2.0427513e-4,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3360"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-2.0427513e-4,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3366"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.43227714,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3377"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.43227714,0)" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient3513);fill-opacity:1;stroke:url(#linearGradient3515);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient3510);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 4.9375,3 c -0.8712457,0 -1,0.2026974 -1,1 l 0,8 c 5.24e-5,0.523584 0.4764155,0.999948 1,1 l 1.40625,0 c 0.5235845,-5.2e-5 0.9999476,-0.476416 1,-1 l 0,-1.59375 1.25,2.09375 c 0.1707733,0.295948 0.5021512,0.49232 0.84375,0.5 l 1.625,0 c 0.709085,-0.0026 1.22035,-0.930433 0.84375,-1.53125 l -1.5,-2.53125 c 0.207056,-0.1426732 0.446102,-0.1739377 0.625,-0.375 0.485424,-0.5455654 0.8125,-1.3108695 0.8125,-2.1875 C 11.84375,4.933822 10.93435,3.8637975 10,3.4375 9.0656499,3.0112025 8.1018341,3 7.53125,3 z m 1,2 0.40625,0 0,0.3125 -0.40625,0 z m 1.40625,1.3125 0.0625,0 c 0.4717689,0 0.8566751,0.046351 0.96875,0.09375 0,0.1099898 -0.01613,0.084244 0,0.0625 C 8.39113,6.447006 8.401999,6.46565 8.3125,6.5 8.1738213,6.55323 7.7537131,6.576154 7.34375,6.59375 z"
-     id="text5177-4-8"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 4.9375,3.5 c -0.404912,0 -0.5,0.1250306 -0.5,0.5 l 0,8 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 1.40625,0 c 0.2617922,-2.6e-5 0.4999738,-0.238208 0.5,-0.5 l 0,-2.59375 c 0.045083,8.783e-4 0.077805,0 0.125,0 0.1068901,0 0.2512151,0.00195 0.375,0 L 9,12.25 c 0.088017,0.152446 0.2614762,0.251565 0.4375,0.25 l 1.625,0 c 0.350536,0.0031 0.612736,-0.446392 0.4375,-0.75 L 9.71875,8.8125 C 10.055568,8.64817 10.424578,8.5142461 10.6875,8.21875 11.093036,7.7629701 11.34375,7.1504907 11.34375,6.375 11.34375,5.1039793 10.594246,4.2771799 9.78125,3.90625 8.9682536,3.5353201 8.0759078,3.5 7.53125,3.5 z m 0.5,1 2.09375,0 c 0.4928051,0 1.2734609,0.052305 1.84375,0.3125 0.5702891,0.2601946 0.96875,0.6317939 0.96875,1.5625 0,0.5732111 -0.160489,0.9112911 -0.40625,1.1875 C 9.6917393,7.8387089 9.3040574,8.0495887 8.875,8.1875 8.6063806,8.2921029 8.4792763,8.6575277 8.625,8.90625 L 10.1875,11.5 9.71875,11.5 8.0625,8.65625 C 7.969604,8.494314 7.7799816,8.3931821 7.59375,8.40625 c -0.2147731,0.010739 -0.4290348,0 -0.625,0 C 6.7672739,8.40625 6.5835166,8.386584 6.375,8.375 6.1029903,8.3579947 5.8432462,8.6024597 5.84375,8.875 l 0,2.625 -0.40625,0 z m 0.90625,0.3125 0,0.5 -0.5,0 0,2.28125 c 2.62e-5,0.2617922 0.2382078,0.4999738 0.5,0.5 C 6.5684989,8.1044523 6.7886792,8.125 7.0625,8.125 7.6819726,8.125 8.2913177,8.1182948 8.84375,7.90625 9.1199662,7.8002276 9.4016969,7.6338907 9.59375,7.375 9.7858031,7.1161093 9.875,6.7662403 9.875,6.40625 9.875,5.7555523 9.4595427,5.2388185 8.96875,5.03125 8.4779573,4.8236815 7.9398172,4.8125 7.40625,4.8125 z m 0.5,1 0.5625,0 c 0.4923683,0 0.9491858,0.024211 1.1875,0.125 C 8.8320642,6.038289 8.875,6.0771216 8.875,6.40625 8.875,6.5995733 8.834514,6.7094492 8.78125,6.78125 8.7279859,6.8530508 8.6517379,6.9105072 8.5,6.96875 8.1965243,7.0852357 7.6534008,7.125 7.0625,7.125 c -0.066785,0 -0.1504865,0.00338 -0.21875,0 z"
-     id="text5177-8"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient3377);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <g
-     id="text5177-7"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 4.9394812,4.0000003 0,7.9999997 1.4178674,0 0,-3.1123918 c 0.2074926,0.011527 0.4034584,0.023055 0.6224784,0.023055 0.1959652,0 0.4149858,0 0.6455331,-0.011527 L 9.4466857,12 11.060518,12 9.0432275,8.6570606 c 0.9682985,-0.3112388 1.7867435,-0.9452462 1.7867435,-2.293948 0,-2.2017268 -2.2478396,-2.3631123 -3.2853025,-2.3631123 l -2.6051873,0 m 1.4178674,1.3025936 1.0489913,0 c 1.0259356,0 1.9711815,0.1268021 1.9711815,1.1066282 0,1.1066271 -1.1066294,1.2103746 -2.3170028,1.2103746 -0.2420746,0 -0.4610953,-0.023055 -0.70317,-0.034582 l 0,-2.2824207"
-       id="path3371" />
-  </g>
+<?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/Reload.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Reload.svg
deleted file mode 100644
index d64f2bc9e..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Reload.svg
+++ /dev/null
@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3946">
-  <defs
-     id="defs3948" />
-  <metadata
-     id="metadata3951">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="M 12.90625,1.96875 A 1.0001,1.0001 0 0 0 12.78125,2 1.0001,1.0001 0 0 0 12,3 l 0,1.6875 C 11.617752,4.10954 11.15073,3.60527 10.59375,3.1875 9.43812,2.32073 8.0617648,1.93523 6.71875,2 6.5268907,2.009 6.3465225,2.0353 6.15625,2.0625 4.63407,2.27991 3.1781,3.08554 2.1875,4.40625 0.20631,7.04769 0.76483,10.8313 3.40625,12.8125 6.04772,14.79372 9.83129,14.23517 11.8125,11.59375 A 1.0063276,1.0063276 0 0 0 12,11 1.0063276,1.0063276 0 0 0 12,10.84375 L 12,10 11.1875,10 11.09375,10 A 1.0063276,1.0063276 0 0 0 11,10 1.0063276,1.0063276 0 0 0 10.1875,10.40625 C 8.85485,12.18299 6.37048,12.52012 4.59375,11.1875 2.81701,9.85486 2.47985,7.37051 3.8125,5.59375 5.14515,3.81701 7.6295,3.47986 9.40625,4.8125 9.8357139,5.13462 10.175795,5.54545 10.4375,6 L 9,6 A 1.0001,1.0001 0 0 0 8,7 1.0001,1.0001 0 0 0 8,7.21875 L 8,8 8.84375,8 9,8 13,8 14,8 14,7 14,3 A 1.0001,1.0001 0 0 0 14,2.8125 L 14,2 13.1875,2 A 1.0001,1.0001 0 0 0 12.90625,1.9688 z"
-       id="path4597"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
-</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/RenderingFramesInstrument.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/RenderingFramesInstrument.svg
new file mode 100644
index 000000000..f7ab1a20f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/RenderingFramesInstrument.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 fill="#e89595" d="m-2.1137 15.165c2.7211 0.000981 2.4433-2.9637 3.7645-3.7892 1.531-0.95655 2.8727 0.22872 3.1406 1.2042 0.33799 1.2308-0.29547 2.2372-1.1373 2.7814-1.6149 1.044-5.5102 0.80146-5.7678-0.19643z"/>
+ <path fill="#e89595" d="m12.303 1.3725c0.308-0.66585-0.164-0.92118-0.733-0.3567-3.9986 3.9688-4.6837 4-8.4236 9.1492 1.0036 0.0377 1.8651 0.68644 2.3125 1.6228 4.4274-4.7722 4.9261-7.3331 6.8441-10.416z"/>
+ <rect width="16" height="15.978" x="-3.1137" y=".037515" fill="none" rx="1" ry="1"/>
+</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
index d3bbf3df0..7cc1d5651 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Request.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Request.svg
@@ -1,634 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient10015">
-      <stop
-         id="stop10017"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10019"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#ce5c00;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#fcaf3e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#fef0dc;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#fff4e5;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#fef0dc;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#fedfb4;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#fee4c0;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#ce5c00;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#fcaf3e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4274"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4280"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="-6.186018"
-       y1="3.5976331"
-       x2="-4.0198994"
-       y2="3.5976331"
-       id="linearGradient10021"
-       xlink:href="#linearGradient10015"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10030"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="-7.3599825"
-       y1="3.0011835"
-       x2="-4.4554024"
-       y2="3.0011835"
-       id="linearGradient4960"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5-3">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1-6"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2-8"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4330"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4332">
-      <stop
-         id="stop4334"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4336"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5219"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-24.291086,-0.31604697)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5236"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-24.291086,-0.31604697)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5242"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-1.3e-5,-2.6e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5260"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-1.3e-5,-2.6e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5266"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(1.7694527,-2.6e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5266-8"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(1.7694527,-2.6e-7)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5-6">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1-66"
-         style="stop-color:#ce5c00;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2-5"
-         style="stop-color:#fcaf3e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5310"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(1.7694527,-2.6e-7)" />
-    <linearGradient
-       id="linearGradient5312">
-      <stop
-         id="stop5314"
-         style="stop-color:#ce5c00;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5316"
-         style="stop-color:#fcaf3e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5320"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(1.7694525,-6.6052246e-8)" />
-    <linearGradient
-       x1="7.4930358"
-       y1="0.069539711"
-       x2="7.4930358"
-       y2="10.42694"
-       id="linearGradient5409"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="5.0504322"
-       y1="7.8328533"
-       x2="10.949568"
-       y2="7.8328533"
-       id="linearGradient5409-7"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1-2"
-         style="stop-color:#ce5c00;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2-9"
-         style="stop-color:#fcaf3e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="5.0504322"
-       y1="7.8328533"
-       x2="10.949568"
-       y2="7.8328533"
-       id="linearGradient5425"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient5427">
-      <stop
-         id="stop5429"
-         style="stop-color:#ce5c00;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5431"
-         style="stop-color:#fcaf3e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374-4"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5-8">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1-4"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2-4"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4359"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4361">
-      <stop
-         id="stop4363"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4365"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5507"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(11.31361,0.25562117)" />
-    <linearGradient
-       x1="7.4930358"
-       y1="-0.89696133"
-       x2="7.4930358"
-       y2="10.052946"
-       id="linearGradient5511"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <g
-     id="text5177-7-4-5"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 6.8069164,10.639769 0,1.348704 1.4985591,0 0,-1.348704 -1.4985591,0 M 10.449568,5.8213259 c 0,-1.4409207 -1.0951029,-2.1440922 -2.7780983,-2.1440922 -0.6455325,0 -1.325649,0.1037467 -1.925072,0.4034582 L 5.5504323,4.1844383 6.0115274,5.2795391 6.2305476,5.1988475 c 0.2997115,-0.126801 0.8530263,-0.2536023 1.2795388,-0.2536023 1.3141197,0 1.5446686,0.6455335 1.5446686,1.0374639 0,1.3948113 -2.1671469,1.3256509 -2.1671469,3.8155619 l 0,0.230548 1.4178674,0 0,-0.230548 c 0,-1.890488 2.1440925,-1.5792531 2.1440925,-3.9769451"
-       id="path5271-2-9"
-       style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-  </g>
-  <g
-     id="text5177-7-7"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient5409);stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 6.8069164,10.639769 0,1.348704 1.4985591,0 0,-1.348704 -1.4985591,0 M 10.449568,5.8213259 c 0,-1.4409207 -1.0951029,-2.1440922 -2.7780983,-2.1440922 -0.6455325,0 -1.325649,0.1037467 -1.925072,0.4034582 L 5.5504323,4.1844383 6.0115274,5.2795391 6.2305476,5.1988475 c 0.2997115,-0.126801 0.8530263,-0.2536023 1.2795388,-0.2536023 1.3141197,0 1.5446686,0.6455335 1.5446686,1.0374639 0,1.3948113 -2.1671469,1.3256509 -2.1671469,3.8155619 l 0,0.230548 1.4178674,0 0,-0.230548 c 0,-1.890488 2.1440925,-1.5792531 2.1440925,-3.9769451"
-       id="path5271-3"
-       style="fill:none;stroke:url(#linearGradient5511);stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-  </g>
-  <g
-     id="text5177-7-7-1"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 6.8069164,10.639769 0,1.348704 1.4985591,0 0,-1.348704 -1.4985591,0 M 10.449568,5.8213259 c 0,-1.4409207 -1.0951029,-2.1440922 -2.7780983,-2.1440922 -0.6455325,0 -1.325649,0.1037467 -1.925072,0.4034582 L 5.5504323,4.1844383 6.0115274,5.2795391 6.2305476,5.1988475 c 0.2997115,-0.126801 0.8530263,-0.2536023 1.2795388,-0.2536023 1.3141197,0 1.5446686,0.6455335 1.5446686,1.0374639 0,1.3948113 -2.1671469,1.3256509 -2.1671469,3.8155619 l 0,0.230548 1.4178674,0 0,-0.230548 c 0,-1.890488 2.1440925,-1.5792531 2.1440925,-3.9769451"
-       id="path5271-3-3"
-       style="fill:#ffffff;fill-opacity:1;stroke:none" />
-  </g>
+<?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
index 8705f5b7b..32f69d75a 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Resources.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Resources.svg
@@ -1,52 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3371">
-  <defs
-     id="defs3373" />
-  <metadata
-     id="metadata3376">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 2.8124438,0.5005491 a 1.0000999,1.0000999 0 0 0 -0.8125,1.0000001 l 0,12.9999998 a 1.0000999,1.0000999 0 0 0 1.0000001,1 l 9.9999991,0 a 1.0000999,1.0000999 0 0 0 1,-1 l 0,-9.4374998 a 1.0000999,1.0000999 0 0 0 -0.28125,-0.71875 L 10.156194,0.78179915 A 1.0000999,1.0000999 0 0 0 9.4374439,0.5005491 l -6.4375,0 a 1.0000999,1.0000999 0 0 0 -0.0937,0 1.0000999,1.0000999 0 0 0 -0.0937,0 z m 1.1875001,2.0000001 5,0 0,3 2.9999991,0 0,7.9999998 -7.9999991,0 0,-10.9999998 z"
-       id="path1234"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:1.99999988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
+<?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
index 1d238ac1f..060b3b365 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Response.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Response.svg
@@ -1,435 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient4329">
-      <stop
-         id="stop4331"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4333"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#e4edf6;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#ecf2f8;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#e4edf6;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#c6d9ec;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#cfdfef;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3502"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3507"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-290.56634,-217.42327)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3510"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3513"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3515"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4300"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4306"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.80307692,0,0,0.80307692,-0.3079836,1.5753847)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4319"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.80307692,0,0,0.80307692,-0.3079836,1.5753847)" />
-    <linearGradient
-       x1="-5.8073196"
-       y1="3.9479289"
-       x2="-4.0577693"
-       y2="3.9479289"
-       id="linearGradient4335"
-       xlink:href="#linearGradient4329"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5-1">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1-5"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2-1"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3288"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient3290">
-      <stop
-         id="stop3292"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop3294"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3342"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-2.0427513e-4,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3360"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-2.0427513e-4,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3366"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.43227714,0)" />
-    <linearGradient
-       x1="-3.147388"
-       y1="-1.3175679"
-       x2="-3.147388"
-       y2="10.025665"
-       id="linearGradient4267"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-3.147388"
-       y1="-1.3175679"
-       x2="-3.147388"
-       y2="10.025665"
-       id="linearGradient4274"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-3.147388"
-       y1="-1.3175679"
-       x2="-3.147388"
-       y2="10.025665"
-       id="linearGradient4278"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(10.29112,0.04024)" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient3513);fill-opacity:1;stroke:url(#linearGradient3515);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient3510);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="M 7,4 7,8.9444444 5.71875,7.8055556 C 5.53059,7.6383111 5.2653,7.5555644 5,7.5555556 l -1,0 0,0.8888888 c 10e-6,0.2358223 0.0931,0.4716267 0.28125,0.6388889 l 3,2.6666667 0.28125,0.25 0.875,0 0.28125,-0.25 3,-2.6666667 C 11.90694,8.9160711 11.99999,8.6802667 12,8.4444444 l 0,-0.8888888 -1,0 c -0.2653,8.8e-6 -0.53059,0.082756 -0.71875,0.25 L 9,8.9444444 9,4 z"
-     id="path3613-2"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#000000;fill:none;stroke:#ffffff;stroke-width:2;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
-  <path
-     d="M 7,4 7,8.9444444 5.71875,7.8055556 C 5.53059,7.6383111 5.2653,7.5555644 5,7.5555556 l -1,0 0,0.8888888 c 10e-6,0.2358223 0.0931,0.4716267 0.28125,0.6388889 l 3,2.6666667 0.28125,0.25 0.875,0 0.28125,-0.25 3,-2.6666667 C 11.90694,8.9160711 11.99999,8.6802667 12,8.4444444 l 0,-0.8888888 -1,0 c -0.2653,8.8e-6 -0.53059,0.082756 -0.71875,0.25 L 9,8.9444444 9,4 z"
-     id="path3613-0"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#000000;fill:none;stroke:url(#linearGradient4278);stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
-  <path
-     d="M 7,4 7,8.9444444 5.71875,7.8055556 C 5.53059,7.6383111 5.2653,7.5555644 5,7.5555556 l -1,0 0,0.8888888 c 10e-6,0.2358223 0.0931,0.4716267 0.28125,0.6388889 l 3,2.6666667 0.28125,0.25 0.875,0 0.28125,-0.25 3,-2.6666667 C 11.90694,8.9160711 11.99999,8.6802667 12,8.4444444 l 0,-0.8888888 -1,0 c -0.2653,8.8e-6 -0.53059,0.082756 -0.71875,0.25 L 9,8.9444444 9,4 z"
-     id="path3613"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
+<?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
index 4899e65f3..81965cf37 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/ResultLine.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ResultLine.svg
@@ -1,587 +1,32 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3601">
-  <defs
-     id="defs3603">
-    <linearGradient
-       id="linearGradient6090">
-      <stop
-         id="stop6092"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6094"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient8412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.9827598,-4.8556584)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient8486"
-       xlink:href="#linearGradient8480"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480">
-      <stop
-         id="stop8482"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient7874"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       id="linearGradient4393-7">
-      <stop
-         id="stop4395-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient7876"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2"
-         style="stop-color:#f2f2f2;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9"
-         style="stop-color:#d9dad8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6"
-         style="stop-color:#dfe0dd;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient7878"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853">
-      <stop
-         id="stop4855"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880-9"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-8">
-      <stop
-         id="stop4855-0"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-6"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3707"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient3734"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3736"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3738"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3740"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3744"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3746"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="-6.0724082"
-       y1="3.0201192"
-       x2="-2.9216745"
-       y2="3.0201192"
-       id="linearGradient4526"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4585"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5185"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.9777341"
-       y1="2.6982248"
-       x2="-4.2471185"
-       y2="2.6982248"
-       id="linearGradient6096"
-       xlink:href="#linearGradient6090"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10060"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient10065"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069527,0,0,0.11066585,23.682408,-4.8510725)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient10068"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient10070"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10080"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4699"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4753"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5379"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5474"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5478"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5482"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5529"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5531"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5533"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5537"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5540"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.75504355,1.0861138)" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5552"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.9899511"
-       y1="-0.80473387"
-       x2="6.9899511"
-       y2="10.279539"
-       id="linearGradient5556"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5560"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.7499791"
-       x2="6.2349076"
-       y2="9.3342934"
-       id="linearGradient5596"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.7499791"
-       x2="6.2349076"
-       y2="9.3342934"
-       id="linearGradient5604"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10030"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5-7">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1-9"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2-4"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5787"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-13.887117,-2.0933523)" />
-  </defs>
-  <metadata
-     id="metadata3606">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134779 2.112266,2.280564"
-     id="path7868"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.499998"
-     id="rect7870"
-     style="color:#000000;fill:url(#linearGradient10068);fill-opacity:1;stroke:url(#linearGradient10070);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195255,1.4949223 c -1.2946897,0 -2.3246007,1.0324565 -2.3246007,2.3274412 l 0,8.3552715 c 0,1.294985 1.029911,2.327441 2.3246007,2.327441 l 8.3609525,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552715 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609525,0 z"
-     id="path7872-9"
-     style="color:#000000;fill:none;stroke:url(#linearGradient10065);stroke-width:0.98984575;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <g
-     transform="translate(0.75504355,1.0861138)"
-     id="text5177-7-5"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 4.3112389,6.3976947 0,1.3025936 5.8674351,0 0,-1.3025936 -5.8674351,0"
-       id="path4760-9"
-       style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-  </g>
-  <g
-     transform="translate(0.75504355,1.0861138)"
-     id="text5177-7-2-9"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 4.3112389,8.9452451 0,1.3141209 5.8674351,0 0,-1.3141209 -5.8674351,0"
-       id="path4760-0-3"
-       style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-  </g>
-  <path
-     d="m 5.0662824,4.6545204 0,1.3025934 5.8674356,0 0,-1.3025934 -5.8674355,0"
-     id="path4760-5-7"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <g
-     transform="translate(0.75504355,0.94524526)"
-     id="text5177-7-8"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#linearGradient5604);fill-opacity:1;stroke:url(#linearGradient5596);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 4.3112389,6.3976947 0,1.3025936 5.8674351,0 0,-1.3025936 -5.8674351,0"
-       id="path4760-2"
-       style="fill:url(#linearGradient5604);fill-opacity:1;stroke:url(#linearGradient5596);stroke-linejoin:round;stroke-opacity:1" />
-  </g>
-  <g
-     transform="translate(0.75504355,1.0861138)"
-     id="text5177-7-2-6"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#linearGradient5552);fill-opacity:1;stroke:url(#linearGradient5560);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 4.3112389,8.9452451 0,1.3141209 5.8674351,0 0,-1.3141209 -5.8674351,0"
-       id="path4760-0-8"
-       style="fill:url(#linearGradient5552);fill-opacity:1;stroke:url(#linearGradient5531);stroke-linejoin:round;stroke-opacity:1" />
-  </g>
-  <path
-     d="m 5.0662824,4.6545204 0,1.3025934 5.8674356,0 0,-1.3025934 -5.8674355,0"
-     id="path4760-5-3"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#linearGradient5556);fill-opacity:1;stroke:url(#linearGradient5540);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
index 0a7eb797d..82361848c 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Resume.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Resume.svg
@@ -1,56 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3072">
-  <defs
-     id="defs3074" />
-  <metadata
-     id="metadata3077">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 2.531225,4 0,8 2,0 0,-8 z"
-       id="path3807-1-1-9-3-0-98"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="m 7.531275,4 c 0.177384,0.008 0.351174,0.0592 0.5,0.15625 l 5,3 c 0.282396,0.17971 0.4375,0.51173 0.4375,0.84375 0,0.33202 -0.155104,0.66404 -0.4375,0.84375 l -5,3 C 7.882449,11.94075 7.708659,11.992 7.531275,12 l -0.15625,0 -0.84375,0 0,-8 0.84375,0 z"
-       id="path3807-1-1-4-7-8"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
-  </g>
+<?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
deleted file mode 100644
index ed4174c07..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Script.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Script@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Script@2x.png
deleted file mode 100644
index c3145d351..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Script@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge.png
deleted file mode 100644
index c3145d351..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge@2x.png
deleted file mode 100644
index 5fd604d9a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptsInstrument.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptsInstrument.svg
new file mode 100644
index 000000000..5efed36d4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptsInstrument.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">
+ <path fill="#bb92e8" d="m14.378 1.4871h-1.3247c-0.0046 4.4457-0.02153 6.6976 0 11.143h1.3247c-0.06826-4.4442-0.009-6.6965 0-11.143z"/>
+ <path fill="#bb92e8" d="m13.716 13.8-1.9871-2.3397h3.9742z"/>
+ <rect width="9.4188" height="3.2151" x="1.3747" y="5.7849" fill="#bb92e8" rx="1.3878e-16" ry="1.3878e-16"/>
+ <rect width="6.0742" height="6.1219" x="18.551" y="11.956" fill="#bb92e8" transform="matrix(.93173 .36316 -.93428 .35655 0 0)" rx="1.1729e-16" ry="1.1773e-16"/>
+ <rect width="10.969" height="3.1686" x=".59965" y=".20940" fill="#bb92e8" rx="0.8" ry="0.8"/>
+</svg>
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/ShadowDOM.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ShadowDOM.svg
index d89199939..9a950f3d4 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/ShadowDOM.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ShadowDOM.svg
@@ -1,79 +1,8 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg8338">
-  <defs
-     id="defs8340" />
-  <metadata
-     id="metadata8343">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0.86440678,0.3559065)"
-     id="g8935-4">
-    <g
-       id="layer1-1">
-      <g
-         id="text8346-9"
-         style="font-size:12.55424404px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:1.79903996px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Sans Bold">
-        <path
-           d="m 6.8502775,4.8997764 -5.85027771,2.8749219 0,1.3307499 5.85027771,2.7744878 0,-1.56928 -3.9671411,-1.9082455 3.9671411,-1.9961248 0,-1.5065093"
-           id="path8351-9" />
-        <path
-           d="m 8.1327727,4.8997764 0,1.5065093 3.9671413,1.9961248 -3.9671413,1.9082455 0,1.56928 5.8502783,-2.7744878 0,-1.3307499 -5.8502783,-2.8749219"
-           id="path8353-1" />
-      </g>
-    </g>
-  </g>
-  <g
-     transform="translate(0.15254243,-1.1356189)"
-     id="g8935">
-    <g
-       id="layer1">
-      <g
-         id="text8346"
-         style="font-size:12.55424404px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:1.79903996px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Sans Bold">
-        <path
-           d="m 6.8502775,4.8997764 -5.85027771,2.8749219 0,1.3307499 5.85027771,2.7744878 0,-1.56928 -3.9671411,-1.9082455 3.9671411,-1.9961248 0,-1.5065093"
-           id="path8351" />
-        <path
-           d="m 8.1327727,4.8997764 0,1.5065093 3.9671413,1.9961248 -3.9671413,1.9082455 0,1.56928 5.8502783,-2.7744878 0,-1.3307499 -5.8502783,-2.8749219"
-           id="path8353" />
-      </g>
-    </g>
-  </g>
+<?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="currentColor" 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 fill="currentColor" d="m8.9972 5.2557v1.5065l3.9671 1.9961-3.9671 1.9082v1.5693l5.8503-2.7745v-1.3307l-5.8503-2.8749"/>
+ <path fill="currentColor" 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 fill="currentColor" 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/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/SortIndicatorDownArrow.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/SortIndicatorDownArrow.svg
deleted file mode 100644
index 5c5f97f07..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/SortIndicatorDownArrow.svg
+++ /dev/null
@@ -1,216 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="9"
-   height="8"
-   id="svg2987">
-  <defs
-     id="defs2989">
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-8-0"
-       xlink:href="#linearGradient4022-2-0-9-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-1,0,0,1,63,0)" />
-    <linearGradient
-       id="linearGradient4022-2-0-9-1">
-      <stop
-         id="stop4024-2-8-8-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-0-8"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0">
-      <stop
-         id="stop4024-2-8"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5066">
-      <stop
-         id="stop5068"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3083"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3097"
-       xlink:href="#linearGradient5066"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-22.424752,-224.73565)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-2"
-       xlink:href="#linearGradient4022-2-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0-4">
-      <stop
-         id="stop4024-2-8-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4886"
-       xlink:href="#linearGradient5066-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient5066-5">
-      <stop
-         id="stop5068-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-3"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-0-6-8-7"
-       xlink:href="#linearGradient4022-2-0-3-3-5-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       id="linearGradient4022-2-0-3-3-5-3">
-      <stop
-         id="stop4024-2-8-3-1-6-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-7-4-9-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4886-7-3-4-8"
-       xlink:href="#linearGradient5066-0-5-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       id="linearGradient5066-0-5-9-0">
-      <stop
-         id="stop5068-1-4-8-0"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-1-9-9-9"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-  </defs>
-  <metadata
-     id="metadata2992">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="M 8.9999997,2.5569969 C 8.9735517,2.6680882 8.9135437,2.7709587 8.8298608,2.8486635 L 5.9131941,5.7653302 5.4999997,6.1542191 5.0868053,5.7653302 2.1701386,2.8486635 C 2.0629393,2.7398591 2.0004956,2.5882103 1.9999997,2.4354691 l 0,-0.024306 0,-0.048611 0,-0.5104166 0.4375,0 0.072917,0 c 0.1840811,-0.0279 0.3798918,0.03737 0.5104166,0.1701389 L 5.5,4.5014413 8.0034722,2.0222747 C 8.1116527,1.9142553 8.2637912,1.8516101 8.4166667,1.8521358 l 0.1215277,0 0.4618056,0 0,0.4618055 0,0.072917 0,0.048611 0,0.072917 z"
-     id="path6040"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  <path
-     d="m -6.8474579,-4.3050847 a 3.2542372,3.2542372 0 1 1 -6.5084741,0 3.2542372,3.2542372 0 1 1 6.5084741,0 z"
-     transform="matrix(0.15364584,0,0,0.15364584,2.5520834,1.6614584)"
-     id="path8060"
-     style="color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
-     d="m -6.8474579,-4.3050847 a 3.2542372,3.2542372 0 1 1 -6.5084741,0 3.2542372,3.2542372 0 1 1 6.5084741,0 z"
-     transform="matrix(0.15364584,0,0,0.15364584,2.5520834,7.6614584)"
-     id="path8060-1"
-     style="color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
-     d="m -6.8474579,-4.3050847 a 3.2542372,3.2542372 0 1 1 -6.5084741,0 3.2542372,3.2542372 0 1 1 6.5084741,0 z"
-     transform="matrix(0.15364584,0,0,0.15364584,2.5520834,5.6614584)"
-     id="path8060-7"
-     style="color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
-     d="m -6.8474579,-4.3050847 a 3.2542372,3.2542372 0 1 1 -6.5084741,0 3.2542372,3.2542372 0 1 1 6.5084741,0 z"
-     transform="matrix(0.15364584,0,0,0.15364584,2.5520834,3.6614584)"
-     id="path8060-4"
-     style="color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SortIndicatorUpArrow.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/SortIndicatorUpArrow.svg
deleted file mode 100644
index 20aa669dc..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/SortIndicatorUpArrow.svg
+++ /dev/null
@@ -1,216 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="9"
-   height="8"
-   id="svg2987">
-  <defs
-     id="defs2989">
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-8-0"
-       xlink:href="#linearGradient4022-2-0-9-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-1,0,0,1,63,0)" />
-    <linearGradient
-       id="linearGradient4022-2-0-9-1">
-      <stop
-         id="stop4024-2-8-8-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-0-8"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0">
-      <stop
-         id="stop4024-2-8"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5066">
-      <stop
-         id="stop5068"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3083"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3097"
-       xlink:href="#linearGradient5066"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-22.424752,-224.73565)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-2"
-       xlink:href="#linearGradient4022-2-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0-4">
-      <stop
-         id="stop4024-2-8-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4886"
-       xlink:href="#linearGradient5066-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient5066-5">
-      <stop
-         id="stop5068-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-3"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-0-6-8-7"
-       xlink:href="#linearGradient4022-2-0-3-3-5-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       id="linearGradient4022-2-0-3-3-5-3">
-      <stop
-         id="stop4024-2-8-3-1-6-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-7-4-9-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4886-7-3-4-8"
-       xlink:href="#linearGradient5066-0-5-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       id="linearGradient5066-0-5-9-0">
-      <stop
-         id="stop5068-1-4-8-0"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-1-9-9-9"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-  </defs>
-  <metadata
-     id="metadata2992">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="M 8.9999997,5.4430029 C 8.9735517,5.3319116 8.9135437,5.2290411 8.8298608,5.1513363 L 5.9131941,2.2346696 5.4999997,1.8457807 5.0868053,2.2346696 2.1701386,5.1513363 C 2.0629393,5.2601407 2.0004956,5.4117895 1.9999997,5.5645307 l 0,0.024306 0,0.048611 0,0.5104166 0.4375,0 0.072917,0 c 0.1840811,0.0279 0.3798918,-0.03737 0.5104166,-0.1701389 L 5.5,3.4985585 8.0034722,5.9777251 c 0.1081805,0.1080194 0.260319,0.1706646 0.4131945,0.1701389 l 0.1215277,0 0.4618056,0 0,-0.4618055 0,-0.072917 0,-0.048611 0,-0.072917 z"
-     id="path6040"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  <path
-     d="m -6.8474579,-4.3050847 a 3.2542372,3.2542372 0 1 1 -6.5084741,0 3.2542372,3.2542372 0 1 1 6.5084741,0 z"
-     transform="matrix(0.15364584,0,0,0.15364584,2.5520834,1.6614584)"
-     id="path8060"
-     style="color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
-     d="m -6.8474579,-4.3050847 a 3.2542372,3.2542372 0 1 1 -6.5084741,0 3.2542372,3.2542372 0 1 1 6.5084741,0 z"
-     transform="matrix(0.15364584,0,0,0.15364584,2.5520834,7.6614584)"
-     id="path8060-1"
-     style="color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
-     d="m -6.8474579,-4.3050847 a 3.2542372,3.2542372 0 1 1 -6.5084741,0 3.2542372,3.2542372 0 1 1 6.5084741,0 z"
-     transform="matrix(0.15364584,0,0,0.15364584,2.5520834,5.6614584)"
-     id="path8060-7"
-     style="color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
-     d="m -6.8474579,-4.3050847 a 3.2542372,3.2542372 0 1 1 -6.5084741,0 3.2542372,3.2542372 0 1 1 6.5084741,0 z"
-     transform="matrix(0.15364584,0,0,0.15364584,2.5520834,3.6614584)"
-     id="path8060-4"
-     style="color:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SourceCode.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/SourceCode.svg
deleted file mode 100644
index f4f8a9b7f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/SourceCode.svg
+++ /dev/null
@@ -1,636 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3601">
-  <defs
-     id="defs3603">
-    <linearGradient
-       id="linearGradient6090">
-      <stop
-         id="stop6092"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6094"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient8412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.9827598,-4.8556584)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient8486"
-       xlink:href="#linearGradient8480"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480">
-      <stop
-         id="stop8482"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient7874"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       id="linearGradient4393-7">
-      <stop
-         id="stop4395-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient7876"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2"
-         style="stop-color:#f2f2f2;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9"
-         style="stop-color:#d9dad8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6"
-         style="stop-color:#dfe0dd;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient7878"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853">
-      <stop
-         id="stop4855"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880-9"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-8">
-      <stop
-         id="stop4855-0"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-6"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3707"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient3734"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3736"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3738"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3740"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3744"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3746"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="-6.0724082"
-       y1="3.0201192"
-       x2="-2.9216745"
-       y2="3.0201192"
-       id="linearGradient4526"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4585"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5185"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.9777341"
-       y1="2.6982248"
-       x2="-4.2471185"
-       y2="2.6982248"
-       id="linearGradient6096"
-       xlink:href="#linearGradient6090"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10060"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient10065"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069527,0,0,0.11066585,23.682408,-4.8510725)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient10068"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient10070"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10080"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4699"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4701">
-      <stop
-         id="stop4703"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4705"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4753"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5379"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5472"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5474"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5476"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5478"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5480"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5482"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5527"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5529"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5531"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5533"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5535"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5537"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5540"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.75504355,1.0861138)" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5552"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5554"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.9899511"
-       y1="-0.80473387"
-       x2="6.9899511"
-       y2="10.279539"
-       id="linearGradient5556"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5558"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5560"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5562"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5564"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata3606">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134779 2.112266,2.280564"
-     id="path7868"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.499998"
-     id="rect7870"
-     style="color:#000000;fill:url(#linearGradient10068);fill-opacity:1;stroke:url(#linearGradient10070);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195255,1.4949223 c -1.2946897,0 -2.3246007,1.0324565 -2.3246007,2.3274412 l 0,8.3552715 c 0,1.294985 1.029911,2.327441 2.3246007,2.327441 l 8.3609525,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552715 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609525,0 z"
-     id="path7872-9"
-     style="color:#000000;fill:none;stroke:url(#linearGradient10065);stroke-width:0.98984575;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <g
-     transform="translate(0.75504355,1.0861138)"
-     id="text5177-7-5"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 4.3112389,6.3976947 0,1.3025936 5.8674351,0 0,-1.3025936 -5.8674351,0"
-       id="path4760-9"
-       style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-  </g>
-  <g
-     transform="translate(0.75504355,1.0861138)"
-     id="text5177-7-2-9"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 4.3112389,8.9452451 0,1.3141209 5.8674351,0 0,-1.3141209 -5.8674351,0"
-       id="path4760-0-3"
-       style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-  </g>
-  <path
-     d="m 5.0662824,4.6545204 0,1.3025934 5.8674356,0 0,-1.3025934 -5.8674355,0"
-     id="path4760-5-7"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <g
-     transform="translate(0.75504355,0.94524526)"
-     id="text5177-7-8"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#linearGradient5554);fill-opacity:1;stroke:url(#linearGradient5558);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 4.3112389,6.3976947 0,1.3025936 5.8674351,0 0,-1.3025936 -5.8674351,0"
-       id="path4760-2"
-       style="fill:url(#linearGradient5562);fill-opacity:1;stroke:url(#linearGradient5564);stroke-linejoin:round;stroke-opacity:1" />
-  </g>
-  <g
-     transform="translate(0.75504355,1.0861138)"
-     id="text5177-7-2-6"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#linearGradient5552);fill-opacity:1;stroke:url(#linearGradient5560);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 4.3112389,8.9452451 0,1.3141209 5.8674351,0 0,-1.3141209 -5.8674351,0"
-       id="path4760-0-8"
-       style="fill:url(#linearGradient5552);fill-opacity:1;stroke:url(#linearGradient5531);stroke-linejoin:round;stroke-opacity:1" />
-  </g>
-  <path
-     d="m 5.0662824,4.6545204 0,1.3025934 5.8674356,0 0,-1.3025934 -5.8674355,0"
-     id="path4760-5-3"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#linearGradient5556);fill-opacity:1;stroke:url(#linearGradient5540);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SplitToggleDown.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/SplitToggleDown.svg
deleted file mode 100644
index 382dad1b3..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/SplitToggleDown.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg6044">
-  <defs
-     id="defs6046" />
-  <metadata
-     id="metadata6049">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="M 8.0001395,14.207483 7.2813727,13.519983 2.2812568,8.5199832 a 1.0164896,1.016466 0 0 1 -0.2812566,-0.8437496 1.0164896,1.016466 0 0 1 0,-0.09375 l 0,-0.78125 0.8437696,0 0.1562536,0 a 1.0164896,1.016466 0 0 1 0.7187667,0.28125 L 8.0001395,11.363733 12.281489,7.0824836 a 1.0164896,1.016466 0 0 1 0.843769,-0.28125 l 0.09375,0 0.781268,0 0,0.84375 a 1.0164896,1.016466 0 0 1 0,0.1562496 1.0164896,1.016466 0 0 1 -0.281256,0.71875 l -5.0001159,4.9999998 -0.7187666,0.6875 z"
-       id="path8420"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="M 8.000138,9.2074834 7.2813714,8.5199834 2.2812565,3.519984 A 1.0164894,1.016466 0 0 1 2,2.676234 1.0164894,1.016466 0 0 1 2,2.582484 l 0,-0.78125 0.8437694,0 0.1562536,0 a 1.0164894,1.016466 0 0 1 0.7187665,0.28125 L 8.000138,6.3637336 12.281487,2.082484 a 1.0164894,1.016466 0 0 1 0.843769,-0.28125 l 0.09375,0 0.781268,0 0,0.84375 a 1.0164894,1.016466 0 0 1 0,0.15625 1.0164894,1.016466 0 0 1 -0.281256,0.71875 l -5.0001131,4.9999994 -0.7187669,0.6875 z"
-       id="path8420-0"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SplitToggleUp.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/SplitToggleUp.svg
index 3cb3366ac..c45f0e872 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/SplitToggleUp.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/SplitToggleUp.svg
@@ -1,56 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg6044">
-  <defs
-     id="defs6046" />
-  <metadata
-     id="metadata6049">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 8.0001395,1.7925168 -0.7187668,0.6875 -5.0001159,5 a 1.0164896,1.016466 0 0 0 -0.2812566,0.8437496 1.0164896,1.016466 0 0 0 0,0.09375 l 0,0.78125 0.8437696,0 0.1562536,0 a 1.0164896,1.016466 0 0 0 0.7187667,-0.28125 L 8.0001395,4.6362668 12.281489,8.9175164 a 1.0164896,1.016466 0 0 0 0.843769,0.28125 l 0.09375,0 0.781268,0 0,-0.84375 a 1.0164896,1.016466 0 0 0 0,-0.1562496 1.0164896,1.016466 0 0 0 -0.281256,-0.71875 l -5.0001159,-5 -0.7187666,-0.6875 z"
-       id="path8420"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="m 8.000138,6.7925166 -0.7187666,0.6875 -5.0001149,4.9999994 A 1.0164894,1.016466 0 0 0 2,13.323766 a 1.0164894,1.016466 0 0 0 0,0.09375 l 0,0.78125 0.8437694,0 0.1562536,0 a 1.0164894,1.016466 0 0 0 0.7187665,-0.28125 L 8.000138,9.6362664 12.281487,13.917516 a 1.0164894,1.016466 0 0 0 0.843769,0.28125 l 0.09375,0 0.781268,0 0,-0.84375 a 1.0164894,1.016466 0 0 0 0,-0.15625 1.0164894,1.016466 0 0 0 -0.281256,-0.71875 L 8.7189049,7.4800166 8.000138,6.7925166 z"
-       id="path8420-0"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
+<?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
index 461e476ba..f528e16a3 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/StepInto.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StepInto.svg
@@ -1,62 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg5270">
-  <defs
-     id="defs5272" />
-  <metadata
-     id="metadata5275">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <rect
-       width="2.9022989"
-       height="8"
-       rx="0"
-       ry="0"
-       x="12.097701"
-       y="-12"
-       transform="matrix(0,1,-1,0,0,0)"
-       id="rect8382"
-       style="color:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    <path
-       d="M 7,1 7,6.5625 5.71875,5.28125 C 5.53059,5.0931 5.2653,5.00001 5,5 L 4,5 4,6 c 10e-6,0.2653 0.0931,0.53058 0.28125,0.71875 l 3,3 L 7.5625,10 l 0.875,0 0.28125,-0.28125 3,-3 C 11.90694,6.53058 11.99999,6.2653 12,6 l 0,-1 -1,0 c -0.2653,10e-6 -0.53059,0.0931 -0.71875,0.28125 L 9,6.5625 9,1 z"
-       id="path3613-4"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
-  </g>
+<?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
index f19c3f28b..fecfdef5b 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/StepOut.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StepOut.svg
@@ -1,62 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg5270">
-  <defs
-     id="defs5272" />
-  <metadata
-     id="metadata5275">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <rect
-       width="2.9022989"
-       height="8"
-       rx="0"
-       ry="0"
-       x="12.097701"
-       y="-12"
-       transform="matrix(0,1,-1,0,0,0)"
-       id="rect8382"
-       style="color:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    <path
-       d="M 7,10 7,4.4375 5.71875,5.71875 C 5.53059,5.9069 5.2653,5.99999 5,6 L 4,6 4,5 C 4.00001,4.7347 4.0931,4.46942 4.28125,4.28125 l 3,-3 L 7.5625,1 l 0.875,0 0.28125,0.28125 3,3 C 11.90694,4.46942 11.99999,4.7347 12,5 l 0,1 -1,0 C 10.7347,5.99999 10.46941,5.9069 10.28125,5.71875 L 9,4.4375 9,10 z"
-       id="path3613-4"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans" />
-  </g>
+<?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
index 922752710..c19e030fc 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/StepOver.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StepOver.svg
@@ -1,59 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg5270">
-  <defs
-     id="defs5272" />
-  <metadata
-     id="metadata5275">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <rect
-     width="2.9022989"
-     height="8"
-     rx="0"
-     ry="0"
-     x="12.097701"
-     y="-12"
-     transform="matrix(0,1,-1,0,0,0)"
-     id="rect8382"
-     style="color:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <path
-     d="m 0.66428115,7.6325345 1.41421355,1.414213 4.7940442,-4.794044 c 0.5941597,-0.59416 1.5271598,-0.59416 2.1213204,0 l 2.8947187,2.894719 -1.811961,0 c -0.263723,0.0054 -0.5475556,0.105613 -0.7292043,0.287262 l -0.7071068,0.707106 0.7071068,0.707107 c 0.2188142,0.218814 0.454401,0.326698 0.7292043,0.331457 l 5.214912,-0.0442 0.04419,-5.214912 c -0.0048,-0.274803 -0.112642,-0.51039 -0.331456,-0.729204 l -0.707103,-0.707102 -0.707107,0.707107 c -0.181648,0.181649 -0.281874,0.465481 -0.287262,0.729204 l 0,1.811961 -2.894718,-2.894718 c -1.3584597,-1.35846 -3.5912886,-1.35846 -4.9497477,0 z"
-     id="path35770-9-1"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
+<?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
deleted file mode 100644
index a9903e0c2..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch.svg
new file mode 100644
index 000000000..04ef7833e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch.svg
@@ -0,0 +1,19 @@
+<?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" x1="4.8318" x2="7.3147" y1="2.981" y2="8.4838" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.2292e-7 .00010801)">
+   <stop stop-color="#c0c0c0" offset="0"/>
+   <stop stop-color="#4d4d4d" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="1.0468" height="1.4734" x="10.537" y="-5.9769" fill="#696969" rx="0" transform="matrix(.77454 .63252 -.63252 .77454 0 0)"/>
+ <rect width="1.3537" height=".80834" x="10.384" y="-6.393" fill="#696969" transform="matrix(.77454 .63252 -.63252 .77454 0 0)" rx=".31377" ry=".43142"/>
+ <rect width="1.0468" height="1.4734" x="-1.783" y="4.0841" fill="#696969" rx="0" transform="matrix(-.77454 .63252 .63252 .77454 0 0)"/>
+ <rect width="1.3537" height=".80834" x="-1.9364" y="3.668" fill="#696969" transform="matrix(-.77454 .63252 .63252 .77454 0 0)" rx=".31377" ry=".43142"/>
+ <rect width="1.7382" height="2" x="7.084" y=".67643" fill="#696969" rx="0"/>
+ <rect width="2.2479" height="1.0972" x="6.8292" y=".11162" fill="#696969" rx=".31377" ry=".43142"/>
+ <circle cx="7.9531" cy="8.9622" r="6.1575" fill="#fff" stroke="url(#a)" stroke-width="1.5"/>
+ <path fill="#f00" fill-rule="evenodd" d="m10.759 5.1131-3.2397 3.5863 0.8486 0.6138z"/>
+ <circle cx="7.9531" cy="8.9622" r=".72222" fill="#fff" stroke="#000" stroke-width=".2"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch@2x.png
deleted file mode 100644
index d487d0d05..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch@2x.png
+++ /dev/null
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/StyleRule.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRule.svg
new file mode 100644
index 000000000..0e8fb90d9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRule.svg
@@ -0,0 +1,123 @@
+<?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 16 16">
+ <style>
+  svg {
+    display: none;
+  }
+
+  svg:target {
+    display: initial;
+  }
+ </style>
+
+ <svg>
+  <symbol id="style-rule">
+   <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"/>
+  </symbol>
+ </svg>
+
+ <svg id="author">
+  <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>
+  <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>
+  <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>
+  <use xlink:href="#style-rule"/>
+ </svg>
+
+ <svg id="user">
+  <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>
+  <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>
+  <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>
+  <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>
+  <use xlink:href="#style-rule"/>
+ </svg>
+
+ <svg id="useragent">
+  <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>
+  <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>
+  <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>
+  <use xlink:href="#style-rule"/>
+ </svg>
+
+ <svg id="inspector">
+  <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>
+  <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>
+  <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>
+  <use xlink:href="#style-rule"/>
+ </svg>
+
+ <svg id="inherited">
+  <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>
+  <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>
+  <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>
+  <use xlink:href="#style-rule"/>
+ </svg>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleAuthor.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleAuthor.svg
deleted file mode 100644
index aa61c0654..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleAuthor.svg
+++ /dev/null
@@ -1,404 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient4329">
-      <stop
-         id="stop4331"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4333"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#e4edf6;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#ecf2f8;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#e4edf6;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#c6d9ec;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#cfdfef;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#204a87;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#729fcf;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3502"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3507"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-290.56634,-217.42327)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3510"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3513"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3515"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4300"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4306"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.80307692,0,0,0.80307692,-0.3079836,1.5753847)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4319"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.80307692,0,0,0.80307692,-0.3079836,1.5753847)" />
-    <linearGradient
-       x1="-5.8073196"
-       y1="3.9479289"
-       x2="-4.0577693"
-       y2="3.9479289"
-       id="linearGradient4335"
-       xlink:href="#linearGradient4329"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4332"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4500"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4508"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient3868"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient3513);fill-opacity:1;stroke:url(#linearGradient3515);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient3510);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <g
-     transform="translate(-2.5e-7,-1.2e-6)"
-     id="text5177-7-3"
-     style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-       id="path3519-5"
-       style="letter-spacing:2px;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-    <path
-       d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-       id="path3521-9"
-       style="letter-spacing:2px;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-  </g>
-  <g
-     transform="translate(-2.5e-7,-1.2e-6)"
-     id="text5177-7-0"
-     style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient3868);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-       id="path3519-9"
-       style="letter-spacing:2px;fill:none;stroke:url(#linearGradient3868);stroke-linejoin:round;stroke-opacity:1" />
-    <path
-       d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-       id="path3521-0"
-       style="letter-spacing:2px;fill:none;stroke:url(#linearGradient3868);stroke-linejoin:round;stroke-opacity:1" />
-  </g>
-  <g
-     transform="translate(-2.5e-7,-1.2e-6)"
-     id="text5177-7"
-     style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-       id="path3519"
-       style="letter-spacing:2px" />
-    <path
-       d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-       id="path3521"
-       style="letter-spacing:2px" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInherited.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInherited.svg
deleted file mode 100644
index 03b446d12..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInherited.svg
+++ /dev/null
@@ -1,641 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3601">
-  <defs
-     id="defs3603">
-    <linearGradient
-       id="linearGradient6090">
-      <stop
-         id="stop6092"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6094"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient8412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.9827598,-4.8556584)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient8486"
-       xlink:href="#linearGradient8480"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480">
-      <stop
-         id="stop8482"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient7874"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       id="linearGradient4393-7">
-      <stop
-         id="stop4395-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient7876"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2"
-         style="stop-color:#f2f2f2;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9"
-         style="stop-color:#d9dad8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6"
-         style="stop-color:#dfe0dd;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient7878"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853">
-      <stop
-         id="stop4855"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880-9"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-8">
-      <stop
-         id="stop4855-0"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-6"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3707"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient3734"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3736"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3738"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3740"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3744"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3746"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="-6.0724082"
-       y1="3.0201192"
-       x2="-2.9216745"
-       y2="3.0201192"
-       id="linearGradient4526"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4585"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5185"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.9777341"
-       y1="2.6982248"
-       x2="-4.2471185"
-       y2="2.6982248"
-       id="linearGradient6096"
-       xlink:href="#linearGradient6090"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10060"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient10065"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069527,0,0,0.11066585,23.682408,-4.8510725)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient10068"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient10070"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10080"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4699"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4753"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5379"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5472"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5474"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5476"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5478"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5480"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5482"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5527"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5529"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5531"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5533"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5535"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5537"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5540"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.75504355,1.0861138)" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5552"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5554"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.9899511"
-       y1="-0.80473387"
-       x2="6.9899511"
-       y2="10.279539"
-       id="linearGradient5556"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5558"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5560"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5562"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5564"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374-9"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5857"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3482"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4332"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata3606">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134779 2.112266,2.280564"
-     id="path7868"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.499998"
-     id="rect7870"
-     style="color:#000000;fill:url(#linearGradient10068);fill-opacity:1;stroke:url(#linearGradient10070);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195255,1.4949223 c -1.2946897,0 -2.3246007,1.0324565 -2.3246007,2.3274412 l 0,8.3552715 c 0,1.294985 1.029911,2.327441 2.3246007,2.327441 l 8.3609525,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552715 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609525,0 z"
-     id="path7872-9"
-     style="color:#000000;fill:none;stroke:url(#linearGradient10065);stroke-width:0.98984575;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <g
-     id="g4412">
-    <g
-       id="text5177-7-3"
-       style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-      <path
-         d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-         id="path3519-5"
-         style="letter-spacing:2px;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-      <path
-         d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-         id="path3521-9"
-         style="letter-spacing:2px;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-    </g>
-    <g
-       id="text5177-7-0"
-       style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient4332);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-      <path
-         d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-         id="path3519-9"
-         style="letter-spacing:2px;fill:none;stroke:url(#linearGradient4332);stroke-linejoin:round;stroke-opacity:1" />
-      <path
-         d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-         id="path3521-0"
-         style="letter-spacing:2px;fill:none;stroke:url(#linearGradient4332);stroke-linejoin:round;stroke-opacity:1" />
-    </g>
-    <g
-       id="text5177-7"
-       style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-      <path
-         d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-         id="path3519"
-         style="letter-spacing:2px" />
-      <path
-         d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-         id="path3521"
-         style="letter-spacing:2px" />
-    </g>
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInheritedElement.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInheritedElement.svg
index da13373ed..11e7c570a 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInheritedElement.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInheritedElement.svg
@@ -1,632 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3601">
-  <defs
-     id="defs3603">
-    <linearGradient
-       id="linearGradient6090">
-      <stop
-         id="stop6092"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6094"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient8412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.9827598,-4.8556584)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient8486"
-       xlink:href="#linearGradient8480"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480">
-      <stop
-         id="stop8482"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient7874"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       id="linearGradient4393-7">
-      <stop
-         id="stop4395-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient7876"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2"
-         style="stop-color:#f2f2f2;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9"
-         style="stop-color:#eeeeec;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9"
-         style="stop-color:#d9dad8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6"
-         style="stop-color:#dfe0dd;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient7878"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853">
-      <stop
-         id="stop4855"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880-9"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-8">
-      <stop
-         id="stop4855-0"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-6"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3707"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient3734"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3736"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3738"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3740"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3744"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3746"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="-6.0724082"
-       y1="3.0201192"
-       x2="-2.9216745"
-       y2="3.0201192"
-       id="linearGradient4526"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4585"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5185"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.9777341"
-       y1="2.6982248"
-       x2="-4.2471185"
-       y2="2.6982248"
-       id="linearGradient6096"
-       xlink:href="#linearGradient6090"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10060"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient10065"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069527,0,0,0.11066585,23.682408,-4.8510725)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient10068"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient10070"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10080"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4699"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4753"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5379"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5472"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5474"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5476"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5478"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5480"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5482"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5527"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5529"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5531"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5533"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5535"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5537"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5540"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.75504355,1.0861138)" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5552"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5554"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.9899511"
-       y1="-0.80473387"
-       x2="6.9899511"
-       y2="10.279539"
-       id="linearGradient5556"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5558"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5560"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5562"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5564"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374-9"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5857"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3482"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4332"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10030"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3868"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88762151,9.7802362e-4)" />
-  </defs>
-  <metadata
-     id="metadata3606">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134779 2.112266,2.280564"
-     id="path7868"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.499998"
-     id="rect7870"
-     style="color:#000000;fill:url(#linearGradient10068);fill-opacity:1;stroke:url(#linearGradient10070);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195255,1.4949223 c -1.2946897,0 -2.3246007,1.0324565 -2.3246007,2.3274412 l 0,8.3552715 c 0,1.294985 1.029911,2.327441 2.3246007,2.327441 l 8.3609525,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552715 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609525,0 z"
-     id="path7872-9"
-     style="color:#000000;fill:none;stroke:url(#linearGradient10065);stroke-width:0.98984575;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 5.2812632,3.0009787 c -0.4806324,0.060582 -0.8787546,0.5155792 -0.875,1 l 0,8.0000003 c 0,0.776731 0.2388401,1 1,1 l 5.1874998,0 c 0.523584,-5.2e-5 0.999948,-0.476416 1,-1 l 0,-1.3125 c -5.2e-5,-0.523584 -0.476416,-0.9999479 -1,-1.0000002 l -2.7812498,0 0,-0.09375 2.3749998,0 c 0.523584,-5.24e-5 0.999948,-0.4764155 1,-1 l 0,-1.3125001 c -0.0062,-0.4561958 -0.364352,-0.8832106 -0.8125,-0.96875 l 0.21875,0 c 0.523584,-5.24e-5 0.999948,-0.4764155 1,-1 l 0,-1.3125 c -5.2e-5,-0.5235845 -0.476416,-0.9999476 -1,-1 l -5.1874998,0 c -0.041612,-0.00261 -0.083388,-0.00261 -0.125,0 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 5.2812632,3.5009787 c -0.2179183,0.056165 -0.3820989,0.2750724 -0.375,0.5 l 0,8.0000003 c 0,0.385534 0.1060966,0.5 0.5,0.5 l 5.1874998,0 c 0.261792,-2.6e-5 0.499974,-0.238208 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.261792 -0.238208,-0.499974 -0.5,-0.5 l -3.2812498,0 0,-1.0937502 2.8749998,0 c 0.261792,-2.63e-5 0.499974,-0.2382078 0.5,-0.5 l 0,-1.3125001 c -2.6e-5,-0.2617922 -0.238208,-0.4999738 -0.5,-0.5 l -2.8749998,0 0,-0.96875 3.2812498,0 c 0.261792,-2.62e-5 0.499974,-0.2382078 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.2617921 -0.238208,-0.4999738 -0.5,-0.5 l -5.1874998,0 c -0.041448,-0.00522 -0.083552,-0.00522 -0.125,0 z m 0.625,1 4.1874998,0 0,0.3125 -3.2812498,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,1.96875 c 2.62e-5,0.2617922 0.2382078,0.4999738 0.5,0.5 l 2.875,0 0,0.3125001 -2.875,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,2.0937502 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 3.2812498,0 0,0.3125 -4.1874998,0 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient3868);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 5.3948258,12.000979 5.2103742,0 0,-1.302594 -3.7925068,0 0,-2.0979825 3.3775208,0 0,-1.3025936 -3.3775208,0 0,-1.9942362 3.7925068,0 0,-1.3025936 -5.2103742,0 0,7.9999999"
-     id="path10024"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
deleted file mode 100644
index ff3a5fd4b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInspector.svg
+++ /dev/null
@@ -1,481 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient8896">
-      <stop
-         id="stop8898"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8900"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5676">
-      <stop
-         id="stop5678"
-         style="stop-color:#4e9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5680"
-         style="stop-color:#4e9a06;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#4f9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#8ae234;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#edfae0;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#f2fce8;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#edfae0;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#d9f5bd;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#dff7c7;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#4f9a06;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#8ae234;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.2982244"
-       y1="2.83077"
-       x2="-2.5372779"
-       y2="2.83077"
-       id="linearGradient5690"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.6747751"
-       y1="4.3266273"
-       x2="-2.031734"
-       y2="4.3266273"
-       id="linearGradient8902"
-       xlink:href="#linearGradient8896"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient8908"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient8913"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient8916"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient8918"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient8928"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3466"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4257"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4263"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4277"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4283"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755087,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4295"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755087,0)" />
-    <linearGradient
-       x1="-6.1102781"
-       y1="2.6887574"
-       x2="-4.1524439"
-       y2="2.6887574"
-       id="linearGradient4927"
-       xlink:href="#linearGradient4921"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4332"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4437"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4445"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient3881"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient8916);fill-opacity:1;stroke:url(#linearGradient8918);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient8913);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <g
-     transform="translate(-2.5e-7,-1.2e-6)"
-     id="text5177-7-3"
-     style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-       id="path3519-5"
-       style="letter-spacing:2px;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-    <path
-       d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-       id="path3521-9"
-       style="letter-spacing:2px;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-  </g>
-  <g
-     transform="translate(-2.5e-7,-1.2e-6)"
-     id="text5177-7-0"
-     style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient3881);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-       id="path3519-9"
-       style="letter-spacing:2px;fill:none;stroke:url(#linearGradient3881);stroke-linejoin:round;stroke-opacity:1" />
-    <path
-       d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-       id="path3521-0"
-       style="letter-spacing:2px;fill:none;stroke:url(#linearGradient3881);stroke-linejoin:round;stroke-opacity:1" />
-  </g>
-  <g
-     transform="translate(-2.5e-7,-1.2e-6)"
-     id="text5177-7"
-     style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-       id="path3519"
-       style="letter-spacing:2px" />
-    <path
-       d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-       id="path3521"
-       style="letter-spacing:2px" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRulePseudoElement.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRulePseudoElement.svg
new file mode 100644
index 000000000..b5319a7fd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRulePseudoElement.svg
@@ -0,0 +1,103 @@
+<?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 16 16">
+ <style>
+  svg {
+    display: none;
+  }
+
+  svg:target {
+    display: initial;
+  }
+ </style>
+
+ <svg>
+  <symbol id="style-rule">
+   <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"/>
+  </symbol>
+ </svg>
+
+ <svg id="author">
+  <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>
+  <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>
+  <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>
+  <use xlink:href="#style-rule"/>
+ </svg>
+
+ <svg id="user">
+  <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>
+  <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>
+  <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>
+  <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>
+  <use xlink:href="#style-rule"/>
+ </svg>
+
+ <svg id="useragent">
+  <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>
+  <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>
+  <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>
+  <use xlink:href="#style-rule"/>
+ </svg>
+
+ <svg id="inspector">
+  <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>
+  <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>
+  <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>
+  <use xlink:href="#style-rule"/>
+ </svg>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUser.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUser.svg
deleted file mode 100644
index 9f742f1ff..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUser.svg
+++ /dev/null
@@ -1,657 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3601">
-  <defs
-     id="defs3603">
-    <linearGradient
-       id="linearGradient6090">
-      <stop
-         id="stop6092"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6094"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient8412"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.9827598,-4.8556584)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5"
-         style="stop-color:#c4a000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7"
-         style="stop-color:#fce94f;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient8486"
-       xlink:href="#linearGradient8480"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480">
-      <stop
-         id="stop8482"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient7874"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       id="linearGradient4393-7">
-      <stop
-         id="stop4395-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient7876"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3"
-         style="stop-color:#fefbdc;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2"
-         style="stop-color:#fffce5;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9"
-         style="stop-color:#fefbdc;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9"
-         style="stop-color:#fef6b4;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6"
-         style="stop-color:#fef7c0;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9"
-         style="stop-color:#fefbe2;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient7878"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2"
-         style="stop-color:#c4a000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5"
-         style="stop-color:#fce94f;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853">
-      <stop
-         id="stop4855"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient7880-9"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-8">
-      <stop
-         id="stop4855-0"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-6"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3707"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse" />
-    <radialGradient
-       cx="310.64407"
-       cy="228.07976"
-       r="5.9541607"
-       fx="310.64407"
-       fy="228.07976"
-       id="radialGradient3734"
-       xlink:href="#linearGradient4393-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.63490321,0.00311539,-0.01574945,3.2096652,116.68257,-511.81175)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3736"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3738"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,1.5079976,1.5079976,0,-272.49451,283.84288)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3740"
-       xlink:href="#linearGradient4853"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3744"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient3746"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="-6.0724082"
-       y1="3.0201192"
-       x2="-2.9216745"
-       y2="3.0201192"
-       id="linearGradient4526"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4585"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5185"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-5.9777341"
-       y1="2.6982248"
-       x2="-4.2471185"
-       y2="2.6982248"
-       id="linearGradient6096"
-       xlink:href="#linearGradient6090"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10060"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient10065"
-       xlink:href="#linearGradient4853-8"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069527,0,0,0.11066585,23.682408,-4.8510725)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient10068"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168491)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient10070"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729108)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10080"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4699"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4753"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5379"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5472"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5474"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5476"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5478"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5480"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5482"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5527"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5529"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5531"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5533"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5535"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5537"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5540"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.75504355,1.0861138)" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5552"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5554"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.9899511"
-       y1="-0.80473387"
-       x2="6.9899511"
-       y2="10.279539"
-       id="linearGradient5556"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5558"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5560"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5562"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.2349076"
-       y1="-1.8908477"
-       x2="6.2349076"
-       y2="9.1934252"
-       id="linearGradient5564"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374-9"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5857"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3482"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4332"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-20.427217"
-       y1="6.7218938"
-       x2="-13.239052"
-       y2="6.7218938"
-       id="linearGradient4714"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-21.411833"
-       y1="6.0970421"
-       x2="-10.512425"
-       y2="6.0970421"
-       id="linearGradient4741"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata3606">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134779 2.112266,2.280564"
-     id="path7868"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.499998"
-     id="rect7870"
-     style="color:#000000;fill:url(#linearGradient10068);fill-opacity:1;stroke:url(#linearGradient10070);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195255,1.4949223 c -1.2946897,0 -2.3246007,1.0324565 -2.3246007,2.3274412 l 0,8.3552715 c 0,1.294985 1.029911,2.327441 2.3246007,2.327441 l 8.3609525,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552715 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609525,0 z"
-     id="path7872-9"
-     style="color:#000000;fill:none;stroke:url(#linearGradient10065);stroke-width:0.98984575;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <g
-     id="g4412">
-    <g
-       id="text5177-7-3"
-       style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-      <path
-         d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-         id="path3519-5"
-         style="letter-spacing:2px;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-      <path
-         d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-         id="path3521-9"
-         style="letter-spacing:2px;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-    </g>
-    <g
-       id="text5177-7-0"
-       style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient4332);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-      <path
-         d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-         id="path3519-9"
-         style="letter-spacing:2px;fill:none;stroke:url(#linearGradient4332);stroke-linejoin:round;stroke-opacity:1" />
-      <path
-         d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-         id="path3521-0"
-         style="letter-spacing:2px;fill:none;stroke:url(#linearGradient4332);stroke-linejoin:round;stroke-opacity:1" />
-    </g>
-    <g
-       id="text5177-7"
-       style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-      <path
-         d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-         id="path3519"
-         style="letter-spacing:2px" />
-      <path
-         d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-         id="path3521"
-         style="letter-spacing:2px" />
-    </g>
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUserAgent.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUserAgent.svg
deleted file mode 100644
index fad3b345b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUserAgent.svg
+++ /dev/null
@@ -1,517 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient7085">
-      <stop
-         id="stop7087"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7089"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient9464">
-      <stop
-         id="stop9466"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop9468"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#f24e4e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#fde7e7;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#fab8b8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#fbc3c3;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#a40000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="-6.8676748"
-       y1="4.3834319"
-       x2="-4.1903138"
-       y2="4.3834319"
-       id="linearGradient9470"
-       xlink:href="#linearGradient9464"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient9479"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-5.0847453,-13.423729)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6164"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6224"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-5.0847453,-13.423729)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7015"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7025"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7031"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755039,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7042"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755039,0)" />
-    <linearGradient
-       x1="-4.9307694"
-       y1="1.2591716"
-       x2="-3.0218937"
-       y2="1.2591716"
-       id="linearGradient7091"
-       xlink:href="#linearGradient7085"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4332"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4544"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4552"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4570"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient4572"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228724"
-       y1="-1.3009801"
-       x2="6.6228724"
-       y2="10.049566"
-       id="linearGradient3881"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <g
-     transform="translate(-2.5e-7,-1.2e-6)"
-     id="text5177-7-3"
-     style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-       id="path3519-5"
-       style="letter-spacing:2px;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-    <path
-       d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-       id="path3521-9"
-       style="letter-spacing:2px;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-  </g>
-  <g
-     transform="translate(-2.5e-7,-1.2e-6)"
-     id="text5177-7-0"
-     style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient3881);stroke-linejoin:round;stroke-opacity:1;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-       id="path3519-9"
-       style="letter-spacing:2px;fill:none;stroke:url(#linearGradient3881);stroke-linejoin:round;stroke-opacity:1" />
-    <path
-       d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-       id="path3521-0"
-       style="letter-spacing:2px;fill:none;stroke:url(#linearGradient3881);stroke-linejoin:round;stroke-opacity:1" />
-  </g>
-  <g
-     transform="translate(-2.5e-7,-1.2e-6)"
-     id="text5177-7-8"
-     style="font-size:8.14663982px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="M 4.9161787,6.5173121 C 4.8265657,7.2016292 4.4681131,7.5030556 4.0852214,7.5682286 l -0.1384929,0.016293 0,0.8309573 0.1384929,0.016293 c 0.1384927,0.02444 0.2688392,0.081466 0.3828921,0.1629328 0.5050911,0.3665984 0.4399186,1.0264771 0.496945,1.5804473 0.154786,1.523421 1.230143,1.784115 1.604888,1.808554 l 0.1384929,0.01629 0.1955194,-0.830958 -0.1792261,-0.02444 C 6.4558938,11.112017 6.2277875,10.940937 6.0974414,10.745418 5.6575233,10.069248 6.1300271,8.7657839 5.225751,8.0000005 6.1218805,7.2342172 5.6493767,5.9389 6.0974414,5.2545829 6.2277875,5.0590638 6.4558938,4.8798375 6.7247327,4.8472509 L 6.9039588,4.822811 6.7084394,4.0000004 6.5699465,4.008147 c -0.4317714,0.032587 -1.4582486,0.3177205 -1.604888,1.8655806 -0.016293,0.219959 -0.02444,0.4399187 -0.04888,0.6435845"
-       id="path3519"
-       style="letter-spacing:2px" />
-    <path
-       d="M 11.034942,5.8737276 C 10.888302,4.3340142 9.8699716,4.0407336 9.4300535,4.008147 L 9.2915606,4.0000004 9.1041879,4.822811 9.283414,4.8472509 C 9.5522528,4.8798375 9.7722125,5.0590638 9.9025586,5.2545829 10.350623,5.9389 9.8781196,7.2342172 10.774249,8.0000005 9.869973,8.7657839 10.342477,10.069248 9.9025586,10.745418 9.7722125,10.940937 9.5522528,11.112017 9.283414,11.144604 l -0.1792261,0.02444 0.1873727,0.830958 0.1384929,-0.01629 c 0.3747451,-0.02444 1.4501025,-0.285133 1.6048885,-1.808554 0.05703,-0.5539706 -0.0081,-1.2138493 0.496945,-1.5804477 0.114052,-0.081466 0.252546,-0.1384929 0.391038,-0.1629328 l 0.130347,-0.016293 0,-0.8309573 -0.130347,-0.016293 C 11.540034,7.5030556 11.181581,7.2016292 11.091968,6.5173121 11.067528,6.3136463 11.051235,6.0936866 11.034942,5.8737276"
-       id="path3521"
-       style="letter-spacing:2px" />
-  </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TailDeletedFunction.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TailDeletedFunction.svg
new file mode 100644
index 000000000..be363b6db
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TailDeletedFunction.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="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/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/Thread.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Thread.svg
new file mode 100644
index 000000000..f6964146b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Thread.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">
+ <defs>
+  <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>
+ <circle fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" cx="8" cy="8" r="7.5"/>
+ <circle fill="transparent" fill-rule="evenodd" stroke="white" stroke-miterlimit="10" cx="8" cy="8" r="6.5"/>
+ <line stroke="url(#c)" x1="8" y1="4" x2="8" y2="12" stroke-width="3.5" stroke-linecap="round"/>
+ <line stroke="url(#c)" x1="5" y1="6" x2="5" y2="10" stroke-width="3.5" stroke-linecap="round"/>
+ <line stroke="url(#c)" x1="11" y1="6" x2="11" y2="10" stroke-width="3.5" stroke-linecap="round"/>
+ <line stroke="white" x1="8" y1="4" x2="8" y2="12" stroke-width="1.5" stroke-linecap="round"/>
+ <line stroke="white" x1="5" y1="6" x2="5" y2="10" stroke-width="1.5" stroke-linecap="round"/>
+ <line stroke="white" x1="11" y1="6" x2="11" y2="10" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Time.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Time.svg
index 998069ddd..a436707e3 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Time.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Time.svg
@@ -1,56 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg3101">
-  <defs
-     id="defs3103" />
-  <metadata
-     id="metadata3106">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <path
-       d="m 8.486612,0.01994 c -4.13029,0 -7.48661,3.35631 -7.48661,7.48661 0,4.13029 3.35632,7.4866 7.48661,7.4866 4.13029,0 7.4866,-3.35631 7.4866,-7.4866 0,-4.1303 -3.35631,-7.48661 -7.4866,-7.48661 z m 0,1.97321 c 3.04941,0 5.51339,2.46399 5.51339,5.5134 0,3.04941 -2.46398,5.51339 -5.51339,5.51339 -3.04941,0 -5.5134,-2.46398 -5.5134,-5.51339 0,-3.04941 2.46399,-5.5134 5.5134,-5.5134 z"
-       id="path3869"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2.15384626;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="m 11.392862,4.00654 a 0.50005,0.50005 0 0 0 -0.25,0.15625 L 8.486612,6.81904 6.830362,5.16279 a 0.50005,0.50005 0 1 0 -0.6875,0.6875 l 2,2 a 0.50005,0.50005 0 0 0 0.6875,0 l 3,-3 a 0.50005,0.50005 0 0 0 -0.4375,-0.84375 z"
-       id="path4639"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
+<?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
index ad4a9dc32..62eaa3077 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordAnimation.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordAnimation.svg
@@ -1,472 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient10015">
-      <stop
-         id="stop10017"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10019"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#f1e9f0;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#f5eff4;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#f1e9f0;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#e1d1e0;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#e6d8e5;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4274"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4280"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="-6.186018"
-       y1="3.5976331"
-       x2="-4.0198994"
-       y2="3.5976331"
-       id="linearGradient10021"
-       xlink:href="#linearGradient10015"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10030"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(13.460389,0.03786909)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4193"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-2"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4254"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-2"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3893"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(6.2942505e-8,-0.02881858)" />
-    <linearGradient
-       x1="3.7002883"
-       y1="8"
-       x2="10.37464"
-       y2="8"
-       id="linearGradient3987"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="3.7002883"
-       y1="8"
-       x2="10.37464"
-       y2="8"
-       id="linearGradient3997"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="5.660336"
-       y1="-1.3297986"
-       x2="5.660336"
-       y2="10.020748"
-       id="linearGradient4003"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253597,-1.3637543e-7)" />
-    <linearGradient
-       x1="-4.5030437"
-       y1="8.5585804"
-       x2="2.8860052"
-       y2="8.5585804"
-       id="linearGradient4089"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-4.5030437"
-       y1="8.5585804"
-       x2="2.8860052"
-       y2="8.5585804"
-       id="linearGradient4099"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-2.1856472"
-       y1="-0.77121818"
-       x2="-2.1856472"
-       y2="10.579329"
-       id="linearGradient4105"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(8.8085192,-0.55858053)" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <text
-     x="4.1095104"
-     y="12"
-     id="text5177-7-2"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.1095104"
-       y="12"
-       id="tspan4051-5">A</tspan></text>
-  <text
-     x="4.1095104"
-     y="12"
-     id="text5177-7-0"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient4105);stroke-linejoin:round;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.1095104"
-       y="12"
-       id="tspan4051-1"
-       style="stroke:url(#linearGradient4105);stroke-linejoin:round">A</tspan></text>
-  <text
-     x="4.1095104"
-     y="12"
-     id="text5177-7"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.1095104"
-       y="12"
-       id="tspan4051">A</tspan></text>
+<?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
index e0f8ff489..fba0a631e 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordEvent.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordEvent.svg
@@ -1,400 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient3811">
-      <stop
-         id="stop3813"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop3815"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient10015">
-      <stop
-         id="stop10017"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10019"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#f1e9f0;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#f5eff4;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#f1e9f0;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#e1d1e0;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#e6d8e5;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4274"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4280"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="-6.186018"
-       y1="3.5976331"
-       x2="-4.0198994"
-       y2="3.5976331"
-       id="linearGradient10021"
-       xlink:href="#linearGradient10015"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10030"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="-37.81356"
-       y1="-5.8983049"
-       x2="-29.915257"
-       y2="-5.8983049"
-       id="linearGradient3817"
-       xlink:href="#linearGradient3811"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="M 5.28125,3 C 4.8006176,3.060582 4.4024954,3.5155791 4.40625,4 l 0,8 c 0,0.776731 0.2388401,1 1,1 l 5.1875,0 c 0.523584,-5.2e-5 0.999948,-0.476416 1,-1 l 0,-1.3125 c -5.2e-5,-0.523584 -0.476416,-0.9999476 -1,-1 l -2.78125,0 0,-0.09375 2.375,0 c 0.523584,-5.24e-5 0.999948,-0.4764155 1,-1 l 0,-1.3125 C 11.181289,6.8250542 10.823148,6.3980394 10.375,6.3125 l 0.21875,0 c 0.523584,-5.24e-5 0.999948,-0.4764155 1,-1 l 0,-1.3125 c -5.2e-5,-0.5235845 -0.476416,-0.9999476 -1,-1 L 5.40625,3 C 5.364638,2.99739 5.322862,2.99739 5.28125,3 z"
-     id="text5177-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="M 5.28125,3.5 C 5.0633317,3.5561648 4.8991511,3.7750723 4.90625,4 l 0,8 c 0,0.385534 0.1060966,0.5 0.5,0.5 l 5.1875,0 c 0.261792,-2.6e-5 0.499974,-0.238208 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.261792 -0.238208,-0.499974 -0.5,-0.5 l -3.28125,0 0,-1.09375 2.875,0 c 0.261792,-2.62e-5 0.499974,-0.2382078 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.2617922 -0.238208,-0.4999738 -0.5,-0.5 l -2.875,0 0,-0.96875 3.28125,0 c 0.261792,-2.62e-5 0.499974,-0.2382078 0.5,-0.5 l 0,-1.3125 c -2.6e-5,-0.2617922 -0.238208,-0.4999738 -0.5,-0.5 l -5.1875,0 C 5.364802,3.49478 5.322698,3.49478 5.28125,3.5 z m 0.625,1 4.1875,0 0,0.3125 -3.28125,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,1.96875 c 2.62e-5,0.2617922 0.2382078,0.4999738 0.5,0.5 l 2.875,0 0,0.3125 -2.875,0 c -0.2617922,2.62e-5 -0.4999738,0.2382078 -0.5,0.5 l 0,2.09375 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 3.28125,0 0,0.3125 -4.1875,0 z"
-     id="text5177"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient10030);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 5.3948126,12 5.2103744,0 0,-1.302594 -3.792507,0 0,-2.0979823 3.377521,0 0,-1.3025936 -3.377521,0 0,-1.9942362 3.792507,0 0,-1.3025936 -5.2103744,0 0,7.9999997"
-     id="path10024"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
+<?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
index dcaeffb61..8c8329472 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordLayout.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordLayout.svg
@@ -1,552 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient4048">
-      <stop
-         id="stop4050"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4052"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient7085">
-      <stop
-         id="stop7087"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7089"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient9464">
-      <stop
-         id="stop9466"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop9468"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#f24e4e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#fde7e7;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#fab8b8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#fbc3c3;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#a40000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="-6.8676748"
-       y1="4.3834319"
-       x2="-4.1903138"
-       y2="4.3834319"
-       id="linearGradient9470"
-       xlink:href="#linearGradient9464"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient9479"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-5.0847453,-13.423729)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6164"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6224"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-5.0847453,-13.423729)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7015"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7025"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7031"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755039,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7042"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755039,0)" />
-    <linearGradient
-       x1="-4.9307694"
-       y1="1.2591716"
-       x2="-3.0218937"
-       y2="1.2591716"
-       id="linearGradient7091"
-       xlink:href="#linearGradient7085"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374-3"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5886"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3125"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="4.0072045"
-       y1="8"
-       x2="10.206051"
-       y2="8"
-       id="linearGradient3935"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="4.5072045"
-       y1="8"
-       x2="9.7060518"
-       y2="8"
-       id="linearGradient3973"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="4.5072045"
-       y1="8"
-       x2="9.7060518"
-       y2="8"
-       id="linearGradient3983"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="5.7294998"
-       y1="-1.30098"
-       x2="5.7294998"
-       y2="10.049566"
-       id="linearGradient3989"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.89337218,-1.3637543e-7)" />
-    <linearGradient
-       x1="5.7294998"
-       y1="-1.30098"
-       x2="5.7294998"
-       y2="10.049566"
-       id="linearGradient4001"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.89337218,-1.3637543e-7)" />
-    <linearGradient
-       x1="5.7294998"
-       y1="-1.30098"
-       x2="5.7294998"
-       y2="10.049566"
-       id="linearGradient4007"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.89337218,-1.3637543e-7)" />
-    <linearGradient
-       x1="-3.8248518"
-       y1="2.5846162"
-       x2="-1.4390531"
-       y2="2.5846162"
-       id="linearGradient4054"
-       xlink:href="#linearGradient4048"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <text
-     x="4.4783864"
-     y="12"
-     id="text5177-7-2-4"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.4783864"
-       y="12"
-       id="tspan3897-4">L</tspan></text>
-  <text
-     x="4.4783864"
-     y="12"
-     id="text5177-7-2-8"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient4007);stroke-linejoin:round;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.4783864"
-       y="12"
-       id="tspan3897-1"
-       style="stroke:url(#linearGradient4007);stroke-linejoin:round">L</tspan></text>
-  <text
-     x="4.4783864"
-     y="12"
-     id="text5177-7-2"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.4783864"
-       y="12"
-       id="tspan3897">L</tspan></text>
+<?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
index 868b73bb5..36917c3cd 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordPaint.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordPaint.svg
@@ -1,445 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient7085">
-      <stop
-         id="stop7087"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7089"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient9464">
-      <stop
-         id="stop9466"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop9468"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#f24e4e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#fde7e7;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#fab8b8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#fbc3c3;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#a40000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="-6.8676748"
-       y1="4.3834319"
-       x2="-4.1903138"
-       y2="4.3834319"
-       id="linearGradient9470"
-       xlink:href="#linearGradient9464"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient9479"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-5.0847453,-13.423729)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6164"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6224"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-5.0847453,-13.423729)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7015"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7025"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7031"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755039,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7042"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755039,0)" />
-    <linearGradient
-       x1="-4.9307694"
-       y1="1.2591716"
-       x2="-3.0218937"
-       y2="1.2591716"
-       id="linearGradient7091"
-       xlink:href="#linearGradient7085"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 5.0625,3 c -0.78728,0 -1,0.2045876 -1,1 l 0,8 c 5.24e-5,0.523584 0.4764155,0.999948 1,1 l 1.40625,0 c 0.5235845,-5.2e-5 0.9999476,-0.476416 1,-1 l 0,-2.15625 C 8.3028958,9.82944 9.2166559,9.819399 10.09375,9.40625 11.096143,8.93408 11.9375,7.8259741 11.9375,6.375 11.9375,4.933822 11.0281,3.8637975 10.09375,3.4375 9.1593999,3.0112025 8.2268341,3 7.65625,3 z m 1,2 0.40625,0 0,0.3125 -0.40625,0 z m 1.40625,1.3125 0.0625,0 c 0.4717689,0 0.8566751,0.046351 0.96875,0.09375 0,0.1099898 -0.01613,0.084244 0,0.0625 C 8.51613,6.447006 8.526999,6.46565 8.4375,6.5 8.2988213,6.55323 7.8787131,6.576154 7.46875,6.59375 z"
-     id="text5177-4-4"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <path
-     d="m 5.0625,3.5 c -0.423175,0 -0.5,0.1611965 -0.5,0.5 l 0,8 c 2.62e-5,0.261792 0.2382078,0.499974 0.5,0.5 l 1.40625,0 c 0.2617922,-2.6e-5 0.4999738,-0.238208 0.5,-0.5 l 0,-2.59375 c 0.043032,8.015e-4 0.080042,0 0.125,0 0.8901082,0 1.9068544,-0.056872 2.78125,-0.46875 0.874396,-0.4118777 1.5625,-1.2664084 1.5625,-2.5625 0,-1.2710207 -0.718254,-2.0978201 -1.53125,-2.46875 C 9.0932536,3.5353201 8.2009078,3.5 7.65625,3.5 z m 0.5,1 2.09375,0 c 0.4928051,0 1.2422109,0.052305 1.8125,0.3125 0.570289,0.2601946 0.96875,0.6317939 0.96875,1.5625 0,0.9863268 -0.35035,1.3649571 -0.96875,1.65625 -0.6184002,0.2912929 -1.5360034,0.375 -2.375,0.375 C 6.8922739,8.40625 6.7085166,8.3865843 6.5,8.375 6.2279903,8.3579947 5.9682462,8.6024597 5.96875,8.875 l 0,2.625 -0.40625,0 z m 0.90625,0.3125 0,0.5 -0.5,0 0,2.28125 c -4.684e-4,0.2516954 0.2175477,0.4842459 0.46875,0.5 C 6.6622489,8.104452 6.9136792,8.125 7.1875,8.125 7.8069726,8.125 8.4163177,8.11829 8.96875,7.90625 9.2449662,7.8002276 9.4954469,7.6338907 9.6875,7.375 9.8795531,7.1161093 10,6.7662403 10,6.40625 10,5.7555523 9.5845427,5.2388185 9.09375,5.03125 8.6029573,4.8236815 8.0648172,4.8125 7.53125,4.8125 z m 0.5,1 0.5625,0 c 0.4923683,0 0.9179358,0.024211 1.15625,0.125 C 8.9258142,6.038289 9,6.0771216 9,6.40625 9,6.5995733 8.9595141,6.7094492 8.90625,6.78125 8.8529859,6.8530508 8.7454879,6.9105072 8.59375,6.96875 8.2902743,7.0852357 7.7784008,7.125 7.1875,7.125 c -0.066785,0 -0.1504865,0.00338 -0.21875,0 z"
-     id="text5177-1"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:125%;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient7042);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold" />
-  <g
-     id="text5177-7"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold">
-    <path
-       d="m 5.0547552,4.0000003 0,7.9999997 1.4178674,0 0,-3.1123918 c 0.2074926,0.011527 0.4034584,0.023055 0.6224783,0.023055 1.7291049,0 3.8501441,-0.2651319 3.8501441,-2.5475503 0,-2.2017268 -2.2478397,-2.3631123 -3.2853026,-2.3631123 l -2.6051872,0 m 1.4178674,1.3025936 1.0489913,0 c 1.0259355,0 1.9711815,0.1268021 1.9711815,1.1066282 0,1.1066271 -1.1066294,1.2103746 -2.3170028,1.2103746 -0.2420747,0 -0.4610953,-0.023055 -0.70317,-0.034582 l 0,-2.2824207"
-       id="path7036" />
-  </g>
+<?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
index d8cc51e8e..0ab55b4c2 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordScriptEvaluated.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordScriptEvaluated.svg
@@ -1,430 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient10015">
-      <stop
-         id="stop10017"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10019"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#f1e9f0;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#f5eff4;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#f1e9f0;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#e1d1e0;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#e6d8e5;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4274"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4280"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="-6.186018"
-       y1="3.5976331"
-       x2="-4.0198994"
-       y2="3.5976331"
-       id="linearGradient10021"
-       xlink:href="#linearGradient10015"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10030"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(13.460389,0.03786909)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4193"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-2"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4254"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-2"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3893"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(6.2942505e-8,-0.02881858)" />
-    <linearGradient
-       x1="4.4567723"
-       y1="8"
-       x2="11.543227"
-       y2="8"
-       id="linearGradient3903"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <text
-     x="4.3804035"
-     y="11.971182"
-     id="text5177-7-8"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.3804035"
-       y="11.971182"
-       id="tspan4129-7">S</tspan></text>
-  <text
-     x="4.3804035"
-     y="11.971182"
-     id="text5177-7-0"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient3893);stroke-linejoin:round;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.3804035"
-       y="11.971182"
-       id="tspan4129-4"
-       style="fill:none;stroke:url(#linearGradient3893);stroke-linejoin:round">S</tspan></text>
-  <text
-     x="4.3804035"
-     y="11.971182"
-     id="text5177-7"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.3804035"
-       y="11.971182"
-       id="tspan4129">S</tspan></text>
+<?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
index dc31c39bd..d392e34d8 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordStyle.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordStyle.svg
@@ -1,595 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient4112">
-      <stop
-         id="stop4114"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4116"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4048">
-      <stop
-         id="stop4050"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4052"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient7085">
-      <stop
-         id="stop7087"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop7089"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient9464">
-      <stop
-         id="stop9466"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop9468"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#f24e4e;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#fde7e7;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#fddddd;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#fab8b8;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#fbc3c3;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#a40000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ef2929;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="-6.8676748"
-       y1="4.3834319"
-       x2="-4.1903138"
-       y2="4.3834319"
-       id="linearGradient9470"
-       xlink:href="#linearGradient9464"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient9479"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-5.0847453,-13.423729)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6164"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient6224"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-7"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-5.0847453,-13.423729)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7015"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7025"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7031"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755039,0)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient7042"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.54755039,0)" />
-    <linearGradient
-       x1="-4.9307694"
-       y1="1.2591716"
-       x2="-3.0218937"
-       y2="1.2591716"
-       id="linearGradient7091"
-       xlink:href="#linearGradient7085"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3374-3"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5886"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3125"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="4.0072045"
-       y1="8"
-       x2="10.206051"
-       y2="8"
-       id="linearGradient3935"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="4.5072045"
-       y1="8"
-       x2="9.7060518"
-       y2="8"
-       id="linearGradient3973"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="4.5072045"
-       y1="8"
-       x2="9.7060518"
-       y2="8"
-       id="linearGradient3983"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="5.7294998"
-       y1="-1.30098"
-       x2="5.7294998"
-       y2="10.049566"
-       id="linearGradient3989"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.89337218,-1.3637543e-7)" />
-    <linearGradient
-       x1="5.7294998"
-       y1="-1.30098"
-       x2="5.7294998"
-       y2="10.049566"
-       id="linearGradient4001"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.89337218,-1.3637543e-7)" />
-    <linearGradient
-       x1="5.7294998"
-       y1="-1.30098"
-       x2="5.7294998"
-       y2="10.049566"
-       id="linearGradient4007"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.89337218,-1.3637543e-7)" />
-    <linearGradient
-       x1="-3.8248518"
-       y1="2.5846162"
-       x2="-1.4390531"
-       y2="2.5846162"
-       id="linearGradient4054"
-       xlink:href="#linearGradient4048"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-3.0485206"
-       y1="1.2213027"
-       x2="-1.8745562"
-       y2="1.2213027"
-       id="linearGradient4118"
-       xlink:href="#linearGradient4112"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="4.9567723"
-       y1="8.0288181"
-       x2="11.043227"
-       y2="8.0288181"
-       id="linearGradient4167"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="4.9567723"
-       y1="8.0288181"
-       x2="11.043227"
-       y2="8.0288181"
-       id="linearGradient4187"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4193"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <text
-     x="4.3804035"
-     y="12"
-     id="text5177-7-8"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.3804035"
-       y="12"
-       id="tspan4129-7">S</tspan></text>
-  <text
-     x="4.3804035"
-     y="12"
-     id="text5177-7-0"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient4193);stroke-linejoin:round;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.3804035"
-       y="12"
-       id="tspan4129-4"
-       style="stroke:url(#linearGradient4193);stroke-linejoin:round">S</tspan></text>
-  <text
-     x="4.3804035"
-     y="12"
-     id="text5177-7"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.3804035"
-       y="12"
-       id="tspan4129">S</tspan></text>
+<?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
index 123c9fe84..54cdcbfbf 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordTimer.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordTimer.svg
@@ -1,447 +1,27 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg4286">
-  <defs
-     id="defs4288">
-    <linearGradient
-       id="linearGradient10015">
-      <stop
-         id="stop10017"
-         style="stop-color:#000000;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop10019"
-         style="stop-color:#000000;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="18.0625"
-       y1="9.6541071"
-       x2="18.0625"
-       y2="26.1875"
-       id="linearGradient3771"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.57373424,0,0,0.59220544,-3.98276,-5.2836287)" />
-    <linearGradient
-       id="linearGradient6050-1-7-6-4-7-3-6-2-4-5">
-      <stop
-         id="stop6052-7-5-7-8-3-0-8-8-5-1"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop6054-0-7-8-9-2-5-1-9-7-2"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient3766"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient8480-3">
-      <stop
-         id="stop8482-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop8484-3"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <clipPath
-       id="clipPath8434-7">
-      <path
-         d="m 243.44687,14.015611 0,208.269279 -208.269277,0 0,-208.269279 208.269277,0 z m -89.4907,58.575735 -34.16918,0 0,91.117814 39.05049,0 0,-52.06732 13.01683,0 0,-25.626888 c -10.7316,0 -17.89814,-2.202187 -17.89814,-13.423606 z"
-         id="path8436-8"
-         style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-    <linearGradient
-       id="linearGradient4393-7-9">
-      <stop
-         id="stop4395-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4397-4-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient3760"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5599975,0,0,1.5599977,81.712462,-63.003008)" />
-    <linearGradient
-       id="linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9">
-      <stop
-         id="stop4634-1-8-3-9-0-1-4-0-0-8-2-5-3-8"
-         style="stop-color:#f1e9f0;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4636-1-9-9-8-8-9-6-8-9-5-4-5-5-2"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0.0274937" />
-      <stop
-         id="stop4638-8-3-9-6-6-9-8-0-1-8-8-6-2-8"
-         style="stop-color:#f5eff4;stop-opacity:1"
-         offset="0.274937" />
-      <stop
-         id="stop4640-8-5-7-8-9-6-8-7-4-9-6-8-9-4"
-         style="stop-color:#f1e9f0;stop-opacity:1"
-         offset="0.38707438" />
-      <stop
-         id="stop4642-5-41-9-6-9-8-3-8-8-9-7-5-9-5"
-         style="stop-color:#e1d1e0;stop-opacity:1"
-         offset="0.66528589" />
-      <stop
-         id="stop4644-5-2-7-9-2-2-4-1-8-1-4-1-6-6"
-         style="stop-color:#e6d8e5;stop-opacity:1"
-         offset="0.76745707" />
-      <stop
-         id="stop4646-3-2-3-7-3-7-9-8-5-0-3-5-9-6"
-         style="stop-color:#f0f0f0;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4022-6-3-3-4-0-1-8-9-6-0-4">
-      <stop
-         id="stop4024-1-0-7-8-9-2-9-9-1-2-8"
-         style="stop-color:#5c3566;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-2-4-1-4-3-8-2-1-2-5-0"
-         style="stop-color:#ad7fa8;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4853-9">
-      <stop
-         id="stop4855-4"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="310.875"
-       y1="229.8125"
-       x2="310.875"
-       y2="220.56094"
-       id="linearGradient5347"
-       xlink:href="#linearGradient8480-3"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient3764-3"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4853-9-6">
-      <stop
-         id="stop4855-4-8"
-         style="stop-color:#ffffff;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4857-1-9"
-         style="stop-color:#ffffff;stop-opacity:0"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient5408"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient5445"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient5447"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5462"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5603"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient5609"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-4.3550291"
-       y1="3.5313618"
-       x2="-3.08639"
-       y2="3.5313618"
-       id="linearGradient5637"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4143"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="-150.02495"
-       y1="62.156101"
-       x2="-150.02495"
-       y2="274.07629"
-       id="linearGradient4148"
-       xlink:href="#linearGradient4853-9-6"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11069528,0,0,0.11066585,23.682407,-4.8510717)" />
-    <linearGradient
-       x1="-106.31753"
-       y1="59.90741"
-       x2="-106.31753"
-       y2="171.05693"
-       id="linearGradient4151"
-       xlink:href="#linearGradient4632-1-3-9-3-2-5-8-5-1-2-7-1-6-9"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.11984466,0,0,0.11984467,24.979917,-5.9168478)" />
-    <linearGradient
-       x1="-42.698154"
-       y1="169.07428"
-       x2="-132.12018"
-       y2="169.07428"
-       id="linearGradient4153"
-       xlink:href="#linearGradient4022-6-3-3-4-0-1-8-9-6-0-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,0.11584983,0.11584983,0,-2.2315447,20.729109)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4170"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.42651341,-0.02881858)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4176"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4274"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253642,-5.9e-7)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4280"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.88760834,-7.2637543e-7)" />
-    <linearGradient
-       x1="-6.186018"
-       y1="3.5976331"
-       x2="-4.0198994"
-       y2="3.5976331"
-       id="linearGradient10021"
-       xlink:href="#linearGradient10015"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient10030"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(13.460389,0.03786909)" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4193"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-2"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient4254"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5-2"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="6.6228719"
-       y1="-1.3009801"
-       x2="6.6228719"
-       y2="10.049566"
-       id="linearGradient3893"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(6.2942505e-8,-0.02881858)" />
-    <linearGradient
-       x1="3.7002883"
-       y1="8"
-       x2="10.37464"
-       y2="8"
-       id="linearGradient3987"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="3.7002883"
-       y1="8"
-       x2="10.37464"
-       y2="8"
-       id="linearGradient3997"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="5.660336"
-       y1="-1.3297986"
-       x2="5.660336"
-       y2="10.020748"
-       id="linearGradient4003"
-       xlink:href="#linearGradient6050-1-7-6-4-7-3-6-2-4-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(0.96253597,-1.3637543e-7)" />
-  </defs>
-  <metadata
-     id="metadata4291">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 12.411986,12.134781 2.112266,2.280563"
-     id="path7868-7"
-     style="opacity:0.37558684;color:#000000;fill:none;stroke:#eeeeec;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:1.6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  <rect
-     width="14.999999"
-     height="14.999999"
-     rx="3.2073758"
-     ry="3.2027895"
-     x="0.49999967"
-     y="0.49999928"
-     id="rect7870-5"
-     style="color:#000000;fill:url(#linearGradient4151);fill-opacity:1;stroke:url(#linearGradient4153);stroke-width:0.99999994;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <path
-     d="m 3.8195227,1.4949231 c -1.2946898,0 -2.3246009,1.0324565 -2.3246009,2.3274412 l 0,8.3552717 c 0,1.294985 1.0299111,2.327441 2.3246009,2.327441 l 8.3609533,0 c 1.294689,0 2.3246,-1.032456 2.3246,-2.327441 l 0,-8.3552717 c 0,-1.2949847 -1.029911,-2.3274412 -2.3246,-2.3274412 l -8.3609533,0 z"
-     id="path7872-5-4"
-     style="color:#000000;fill:none;stroke:url(#linearGradient4148);stroke-width:0.98984581;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  <text
-     x="4.5475507"
-     y="12"
-     id="text5177-7-9-7"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.5475507"
-       y="12"
-       id="tspan3949-1">T</tspan></text>
-  <text
-     x="4.5475507"
-     y="12"
-     id="text5177-7-9-9"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:none;stroke:url(#linearGradient4003);stroke-linejoin:round;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.5475507"
-       y="12"
-       id="tspan3949-4"
-       style="stroke:url(#linearGradient4003);stroke-linejoin:round">T</tspan></text>
-  <text
-     x="4.5475507"
-     y="12"
-     id="text5177-7-9"
-     xml:space="preserve"
-     style="font-size:11.52737713px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Cantarell;-inkscape-font-specification:Cantarell Bold"><tspan
-       x="4.5475507"
-       y="12"
-       id="tspan3949">T</tspan></text>
+<?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..82d7371d5
--- /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 fill="currentColor" 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..005ae77b1
--- /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 fill="currentColor" 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
index 572720376..3803b81ef 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Undock.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Undock.svg
@@ -1,53 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="14"
-   id="svg3020">
-  <defs
-     id="defs3022" />
-  <metadata
-     id="metadata3025">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="M 1.90625,1.4375 C 1.415208,1.477185 0.997874,1.858309 1,2.28125 l 0,6.875 C 0.9985,9.183 0.9985,9.192 1,9.21875 L 1,10 1.84375,10 2,10 l 2.28125,0 0,-4.71875 c -0.00455,-0.9042021 0.7348429,-1.4956097 1.5625,-1.5625 l 0.03125,0 0.03125,0 c 0.039713,-0.0016 0.053172,-0.00107 0.09375,0 0.00812,2.133e-4 0.023307,-3.199e-4 0.03125,0 l 4.96875,0 0,-1.4375 C 10.999948,1.8327601 10.523008,1.4375448 10,1.4375 l -8,0 c -0.03119,-0.00126 -0.06256,-0.00126 -0.09375,0 z m 4,3 C 5.4152062,4.4771856 4.9978733,4.8583079 5,5.28125 l 0,6.875 C 4.99854,12.183 4.99854,12.192 5,12.21875 L 5,13 5.84375,13 6,13 14,13 14.09375,13 15,13 15,12.3125 c 0.0059,-0.05338 0.0059,-0.102871 0,-0.15625 l 0,-6.875 C 14.999947,4.8327589 14.523009,4.4375448 14,4.4375 l -8,0 c -0.031193,-0.00126 -0.062557,-0.00126 -0.09375,0 z m 0.53125,2.4375 7.125,0 0,4.6875 -7.125,0 0,-4.6875 z"
-     id="rect13039-7-3"
-     style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new;font-family:Sans;-inkscape-font-specification:Sans" />
-  <g
-     transform="matrix(0.71389371,0,0,0.71389371,4.2872039,2.2915943)"
-     id="layer1"
-     style="stroke:#ffffff;stroke-opacity:1" />
+<?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
index 9b5a099f4..01139140c 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/UpDownArrows.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/UpDownArrows.svg
@@ -1,371 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="5"
-   height="12"
-   id="svg2987">
-  <defs
-     id="defs2989">
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-8-0"
-       xlink:href="#linearGradient4022-2-0-9-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(-1,0,0,1,63,0)" />
-    <linearGradient
-       id="linearGradient4022-2-0-9-1">
-      <stop
-         id="stop4024-2-8-8-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-0-8"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0">
-      <stop
-         id="stop4024-2-8"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5066">
-      <stop
-         id="stop5068"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3083"
-       xlink:href="#linearGradient4022-2-0"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3097"
-       xlink:href="#linearGradient5066"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-22.424752,-224.73565)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-2"
-       xlink:href="#linearGradient4022-2-0-4"
-       gradientUnits="userSpaceOnUse" />
-    <linearGradient
-       id="linearGradient4022-2-0-4">
-      <stop
-         id="stop4024-2-8-9"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-0-6-8-7"
-       xlink:href="#linearGradient4022-2-0-3-3-5-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       id="linearGradient4022-2-0-3-3-5-3">
-      <stop
-         id="stop4024-2-8-3-1-6-2"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-7-4-9-3"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-0-6"
-       xlink:href="#linearGradient4022-2-0-3-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,1,0,-195,257)" />
-    <linearGradient
-       id="linearGradient4022-2-0-3-3">
-      <stop
-         id="stop4024-2-8-3-1"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-7-4"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4886-7-3"
-       xlink:href="#linearGradient5066-0-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,1,0,-195,257)" />
-    <linearGradient
-       id="linearGradient5066-0-5">
-      <stop
-         id="stop5068-1-4"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-1-9"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4884-0-6-8-7-5"
-       xlink:href="#linearGradient4022-2-0-3-3-5-3-2"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       id="linearGradient4022-2-0-3-3-5-3-2">
-      <stop
-         id="stop4024-2-8-3-1-6-2-3"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop4026-8-3-7-4-9-3-5"
-         style="stop-color:#babdb6;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient4886-7-3-4-8"
-       xlink:href="#linearGradient5066-0-5-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       id="linearGradient5066-0-5-9-0">
-      <stop
-         id="stop5068-1-4-8-0"
-         style="stop-color:#555753;stop-opacity:1"
-         offset="0" />
-      <stop
-         id="stop5070-1-9-9-9"
-         style="stop-color:#888a85;stop-opacity:1"
-         offset="1" />
-    </linearGradient>
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3595"
-       xlink:href="#linearGradient5066-0-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,1,0,-195,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3597"
-       xlink:href="#linearGradient4022-2-0-3-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,1,0,-195,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3599"
-       xlink:href="#linearGradient5066-0-5-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3601"
-       xlink:href="#linearGradient4022-2-0-3-3-5-3-2"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3621"
-       xlink:href="#linearGradient5066-0-5-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3623"
-       xlink:href="#linearGradient4022-2-0-3-3-5-3-2"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3625"
-       xlink:href="#linearGradient5066-0-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,1,0,-195,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3627"
-       xlink:href="#linearGradient4022-2-0-3-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,1,0,-195,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3645"
-       xlink:href="#linearGradient5066-0-5-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3647"
-       xlink:href="#linearGradient4022-2-0-3-3-5-3-2"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3669"
-       xlink:href="#linearGradient5066-0-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,1,0,-195,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3671"
-       xlink:href="#linearGradient4022-2-0-3-3"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,1,0,-195,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3673"
-       xlink:href="#linearGradient5066-0-5-9-0"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-    <linearGradient
-       x1="31.340973"
-       y1="235.03157"
-       x2="31.340973"
-       y2="224.67633"
-       id="linearGradient3675"
-       xlink:href="#linearGradient4022-2-0-3-3-5-3-2"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0,-1,-1,0,258,257)" />
-  </defs>
-  <metadata
-     id="metadata2992">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-0.115145)"
-     id="g3111">
-    <path
-       d="M 4.75,4.54279 C 4.7329949,4.471374 4.6944209,4.405243 4.6406249,4.35529 l -1.875,-1.875 L 2.5,2.23029 l -0.265625,0.25 -1.875,1.875 C 0.2904611,4.4252355 0.2503188,4.522724 0.25,4.620915 l 0,0.015625 0,0.03125 0,0.328125 0.28124999,0 0.046875,0 C 0.69646289,5.01385 0.82234109,4.97189 0.90624999,4.88654 L 2.5,3.29279 4.1093749,4.88654 c 0.069545,0.069441 0.167348,0.109713 0.265625,0.109375 l 0.078125,0 0.2968751,0 0,-0.296875 0,-0.046875 0,-0.03125 0,-0.046875 z"
-       id="path6040"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-    <path
-       d="M 4.75,7.6875 C 4.73299,7.758916 4.69442,7.825047 4.640625,7.875 L 2.765625,9.75 2.5,10 2.234375,9.75 0.359375,7.875 C 0.290465,7.805054 0.250319,7.707566 0.25,7.609375 l 0,-0.015625 0,-0.03125 0,-0.328125 0.28125,0 0.04687,0 C 0.696458,7.21644 0.822336,7.2584 0.906245,7.34375 L 2.499995,8.9375 4.10937,7.34375 C 4.17891,7.274309 4.276718,7.234037 4.374995,7.234375 l 0.07813,0 0.296875,0 0,0.296875 0,0.046875 0,0.03125 0,0.046875 z"
-       id="path6040-7"
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
-  </g>
+<?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 fill="currentColor" 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 fill="currentColor" 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
index 31205637e..c0130cec4 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputPrompt.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputPrompt.svg
@@ -1,53 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="10"
-   height="10"
-   id="svg3078">
-  <defs
-     id="defs3080" />
-  <metadata
-     id="metadata3083">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-6)"
-     id="layer1">
-    <path
-       d="M 3.4375,14.125008 6.5625,10.999993 3.4375,7.8749923"
-       id="path11751-2-3"
-       style="color:#bebebe;fill:none;stroke:#729fcf;stroke-width:1.875;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" />
-  </g>
+<?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
index ea47741ee..114302de7 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputPromptPrevious.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputPromptPrevious.svg
@@ -1,53 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="10"
-   height="10"
-   id="svg3078">
-  <defs
-     id="defs3080" />
-  <metadata
-     id="metadata3083">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-6)"
-     id="layer1">
-    <path
-       d="M 3.4375,14.125008 6.5625,10.999993 3.4375,7.8749923"
-       id="path11751-2-3"
-       style="color:#bebebe;fill:none;stroke:#bebebe;stroke-width:1.875;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" />
-  </g>
+<?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
index 36fdd3802..543650618 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputResult.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputResult.svg
@@ -1,58 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="10"
-   height="10"
-   id="svg3078">
-  <defs
-     id="defs3080" />
-  <metadata
-     id="metadata3083">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(0,-6)"
-     id="layer1">
-    <path
-       d="M 5.0625,14.125008 1.9375,10.999993 5.0625,7.8749923"
-       id="path11751-2-3"
-       style="color:#bebebe;fill:none;stroke:#d3d7cf;stroke-width:1.875;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" />
-    <path
-       d="m -5.0905941,-12.209406 a 2.2074258,2.2074258 0 1 1 -4.4148516,0 2.2074258,2.2074258 0 1 1 4.4148516,0 z"
-       transform="matrix(0.45301635,0,0,0.45301635,10.342756,16.53106)"
-       id="path3165"
-       style="color:#000000;fill:#d3d7cf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  </g>
+<?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
index 20a5e14ac..d19d2b721 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Warning.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Warning.svg
@@ -1,54 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="10"
-   height="10"
-   id="svg4888">
-  <defs
-     id="defs4890" />
-  <metadata
-     id="metadata4893">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="matrix(0.62237583,0,0,0.62237583,0.02099341,0.02099336)"
-     id="layer1"
-     style="fill:#fcaf3e">
-    <path
-       d="m 7.9355105,0.5477755 c -0.5255,-0.0286 -1.03823,0.28305 -1.4375,0.96875 L 0.24801044,13.110275 c -0.53347,0.96339 0.04822,2.34375 1.09375006,2.34375 l 13.1562495,0 c 0.98172,0 1.90311,-1.15939 1.21875,-2.34375 L 9.4042605,1.5790255 c -0.39872,-0.64617 -0.94325,-1.00262 -1.46875,-1.03125 z m 0.0625,3.9375 c 0.54448,-0.0172 1.04849,0.48677 1.03125,1.03125 l 0,3.9375 c 0.007,0.52831 -0.47163,0.9999995 -1,0.9999995 -0.52836,0 -1.00747,-0.4716895 -1,-0.9999995 l 0,-3.9375 c -0.008,-0.4666 0.3541,-0.91253 0.8125,-1 0.0511,-0.0145 0.10345,-0.0249 0.15625,-0.0312 z m 0.03125,6.9687495 c 0.55228,0 1,0.44772 1,1 0,0.55228 -0.44772,1 -1,1 -0.55228,0 -1,-0.44772 -1,-1 0,-0.55228 0.44772,-1 1,-1 z"
-       id="path18112"
-       style="color:#bebebe;fill:#fcaf3e;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-  </g>
+<?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
index 158f7682d..5230ac480 100644
--- a/Source/WebInspectorUI/UserInterface/Images/gtk/Weight.svg
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Weight.svg
@@ -1,60 +1,5 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg2999">
-  <defs
-     id="defs3001" />
-  <metadata
-     id="metadata3004">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
-        <dc:title></dc:title>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1">
-    <rect
-       width="16"
-       height="16"
-       x="-16"
-       y="1.0351562e-06"
-       transform="scale(-1,1)"
-       id="rect41008-3-8"
-       style="color:#bebebe;fill:none;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:new" />
-    <path
-       d="M 8.0253168,1 C 6.5079205,1 5.265823,2.2420971 5.265823,3.7594937 c 0,1.5173965 1.2420975,2.7594936 2.7594938,2.7594936 1.5173962,0 2.7594942,-1.2420971 2.7594942,-2.7594936 C 10.784811,2.2420971 9.542713,1 8.0253168,1 z m 0,1.0632912 c 0.9524482,0 1.6962025,0.7437541 1.6962025,1.6962025 0,0.9524484 -0.7437543,1.7215189 -1.6962025,1.7215189 -0.9524482,0 -1.7215191,-0.7690705 -1.7215191,-1.7215189 0,-0.9524484 0.7690709,-1.6962025 1.7215191,-1.6962025 z m 0.78481,0.4810126 c -0.061616,0.01634 -0.1079927,0.081191 -0.1518987,0.1265823 l -0.025316,0 -0.7594937,0.7594937 c 0.00722,-0.00722 -0.1933334,0.1037728 -0.1772152,0.3291139 0.019437,0.2716865 0.3349036,0.4224805 0.556962,0.2531645 L 9.1392408,3.1265822 C 9.2556755,3.0079296 9.2472295,2.8574501 9.1898737,2.7468355 9.1325179,2.6362208 8.9995094,2.5175117 8.8354433,2.5443038 a 0.20255189,0.2025519 0 0 0 -0.025316,0 z M 3.9493674,2.8481012 c 0,0 -1.2151899,0 -1.2151899,1.21519 l 0,9.6962018 c 0,0 0,1.240507 1.2151899,1.240507 l 2.0253164,0 4.0506332,0 2.025317,0 c 1.215189,0 1.215189,-1.240507 1.215189,-1.240507 l 0,-9.6962018 c 0,-1.21519 -1.215189,-1.21519 -1.215189,-1.21519 l -0.734178,0 c 0.07903,0.2885615 0.151899,0.5980605 0.151899,0.9113925 0,0.2447653 -0.027,0.4775395 -0.07595,0.7088607 l 0.253164,0 0,8.9113926 -1.620253,0 -1.21519,0 0,-6.2531647 c -0.2540785,0.061354 -0.5125645,0.075949 -0.7848101,0.075949 -0.291418,0 -0.5638145,-0.031267 -0.8354431,-0.1012659 l 0,6.2784816 -1.2151899,0 -1.6202531,0 0,-8.911393 0.278481,0 C 4.5830145,4.2370332 4.5569623,4.004259 4.5569623,3.7594937 c 0,-0.313332 0.071374,-0.622831 0.1518987,-0.9113925 l -0.7594936,0 z"
-       id="rect4897-9-4"
-       style="fill-opacity:1;stroke:none" />
-  </g>
+<?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 8d449cbb2..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.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;
-
-    -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 fc39d589e..000000000
--- a/Source/WebInspectorUI/UserInterface/InspectorBackend.js
+++ /dev/null
@@ -1,294 +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);
-        agent[domainAndMethod[1]]["supports"] = this._supports.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);
-    },
-
-    _supports: function(method, signature, paramName)
-    {
-        for (var i = 0; i < signature.length; ++i) {
-            if (signature[i]["name"] === paramName)
-                return true;
-        }
-
-        return false;
-    },
-
-    _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/InspectorFrontendAPI.js b/Source/WebInspectorUI/UserInterface/InspectorFrontendAPI.js
deleted file mode 100644
index 7d4c967a6..000000000
--- a/Source/WebInspectorUI/UserInterface/InspectorFrontendAPI.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.
- */
-
-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.recordingEnabled;
-    },
-
-    setTimelineProfilingEnabled: function(enabled)
-    {
-        if (enabled) {
-            WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.timelineSidebarPanel;
-            WebInspector.timelineManager.startRecording();
-        } else {
-            WebInspector.timelineManager.stopRecording();
-        }
-    },
-
-    isProfilingJavaScript: function()
-    {
-        return WebInspector.profileManager.isProfilingJavaScript();
-    },
-
-    startProfilingJavaScript: function()
-    {
-        WebInspector.profileManager.startProfilingJavaScript();
-    },
-
-    stopProfilingJavaScript: function()
-    {
-        WebInspector.timelineSidebarPanel.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 485de7ee1..000000000
--- a/Source/WebInspectorUI/UserInterface/InspectorFrontendHostStub.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * 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.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)
-        {
-        },
-
-        setToolbarHeight: function(width)
-        {
-        },
-
-        moveWindowBy: function(x, y)
-        {
-        },
-
-        loaded: function()
-        {
-        },
-
-        localizedStringsURL: function()
-        {
-            return undefined;
-        },
-
-        debuggableType: function()
-        {
-            return "web";
-        },
-
-        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, base64Encoded, forceSaveAs)
-        {
-        },
-
-        sendMessageToBackend: function(message)
-        {
-            if (!this._socket) {
-                if (!this._pendingMessages)
-                    this._pendingMessages = [];
-                this._pendingMessages.push(message);
-                return;
-            }
-
-            this._sendPendingMessagesToBackendIfNeeded();
-
-            this._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;
-        },
-
-        platform: function()
-        {
-            return (navigator.platform.match(/mac|win|linux/i) || ["other"])[0].toLowerCase();
-        },
-
-        beep: function()
-        {
-        },
-
-        // 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/InspectorJSBackendCommands.js b/Source/WebInspectorUI/UserInterface/InspectorJSBackendCommands.js
deleted file mode 100644
index 51ca8a0f2..000000000
--- a/Source/WebInspectorUI/UserInterface/InspectorJSBackendCommands.js
+++ /dev/null
@@ -1,64 +0,0 @@
-// File is generated by JavaScriptCore/inspector/scripts/CodeGeneratorInspector.py
-
-// Copyright (c) 2013 Apple Inc. All Rights Reserved.
-// 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.
-
-
-// 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.registerEvent("Debugger.paused", ["callFrames", "reason", "data"]);
-InspectorBackend.registerEvent("Debugger.resumed", []);
-InspectorBackend.registerEvent("Debugger.didSampleProbe", ["sample"]);
-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}], []);
-
-// 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", [], []);
-
-// 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", [], []);
diff --git a/Source/WebInspectorUI/UserInterface/InspectorObserver.js b/Source/WebInspectorUI/UserInterface/InspectorObserver.js
deleted file mode 100644
index 716464534..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.
-
-    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/InspectorWebBackendCommands.js b/Source/WebInspectorUI/UserInterface/InspectorWebBackendCommands.js
deleted file mode 100644
index 1b3a31576..000000000
--- a/Source/WebInspectorUI/UserInterface/InspectorWebBackendCommands.js
+++ /dev/null
@@ -1,324 +0,0 @@
-// File is generated by JavaScriptCore/inspector/scripts/CodeGeneratorInspector.py
-
-// Copyright (c) 2013 Apple Inc. All Rights Reserved.
-// 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.
-
-
-// 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"]);
-
-// 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.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.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.getNamedFlowCollection", [{"name": "documentNodeId", "type": "number", "optional": false}], ["namedFlows"]);
-
-// 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"]);
-
-// 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}], []);
-
-// 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}, {"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}], []);
-
-// 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}], []);
-
-// 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}], []);
-
-// 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"]);
-
-// 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"]);
-
-// 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}], []);
-
-// 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"]);
-
-// Memory.
-InspectorBackend.registerMemoryDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Memory");
-InspectorBackend.registerCommand("Memory.getDOMCounters", [], ["documents", "nodes", "jsEventListeners"]);
-
-// 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.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}], []);
-
-// 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.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.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"]);
-
-// 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.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"]);
-
-// Timeline.
-InspectorBackend.registerTimelineDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Timeline");
-InspectorBackend.registerEnum("Timeline.EventType", {EventDispatch: "EventDispatch", BeginFrame: "BeginFrame", ScheduleStyleRecalculation: "ScheduleStyleRecalculation", RecalculateStyles: "RecalculateStyles", InvalidateLayout: "InvalidateLayout", Layout: "Layout", Paint: "Paint", ScrollLayer: "ScrollLayer", ResizeImage: "ResizeImage", CompositeLayers: "CompositeLayers", 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", GCEvent: "GCEvent", 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}, {"name": "includeDomCounters", "type": "boolean", "optional": true}], []);
-InspectorBackend.registerCommand("Timeline.stop", [], []);
-InspectorBackend.registerCommand("Timeline.supportsFrameInstrumentation", [], ["result"]);
-InspectorBackend.registerCommand("Timeline.canMonitorMainThread", [], ["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.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}], []);
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 9dcd6f32b..000000000
--- a/Source/WebInspectorUI/UserInterface/JavaScriptLogViewController.js
+++ /dev/null
@@ -1,292 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.CommandOrControl, "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.CommandOrControl, "F", this._handleFindShortcut.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._promptFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "F", this._handleFindShortcut.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();
-};
-
-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);
-        }
-
-        text += "\n//# sourceURL=__WebInspectorConsole__\n";
-
-        WebInspector.runtimeManager.evaluateInInspectedWindow(text, "console", true, false, false, printResult.bind(this));
-    },
-
-    // Private
-
-    _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 4945b0ba5..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.svg", 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/JavaScriptRuntimeCompletionProvider.js b/Source/WebInspectorUI/UserInterface/JavaScriptRuntimeCompletionProvider.js
deleted file mode 100644
index 0c2d98fb2..000000000
--- a/Source/WebInspectorUI/UserInterface/JavaScriptRuntimeCompletionProvider.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.JavaScriptRuntimeCompletionProvider = function()
-{
-    WebInspector.Object.call(this);
-
-    console.assert(!WebInspector.JavaScriptRuntimeCompletionProvider._instance);
-
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._clearLastProperties, this);
-};
-
-Object.defineProperty(WebInspector, "javaScriptRuntimeCompletionProvider",
-{
-    get: function()
-    {
-        if (!WebInspector.JavaScriptRuntimeCompletionProvider._instance)
-            WebInspector.JavaScriptRuntimeCompletionProvider._instance = new WebInspector.JavaScriptRuntimeCompletionProvider;
-        return WebInspector.JavaScriptRuntimeCompletionProvider._instance;
-    }
-});
-
-WebInspector.JavaScriptRuntimeCompletionProvider.prototype = {
-    constructor: WebInspector.JavaScriptRuntimeCompletionProvider,
-
-    // Protected
-
-    completionControllerCompletionsNeeded: function(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, 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 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")
-                WebInspector.runtimeManager.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);
-
-            completionController.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;
-    }
-};
-
-WebInspector.JavaScriptRuntimeCompletionProvider.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/KeyboardShortcut.js b/Source/WebInspectorUI/UserInterface/KeyboardShortcut.js
deleted file mode 100644
index ef68c24df..000000000
--- a/Source/WebInspectorUI/UserInterface/KeyboardShortcut.js
+++ /dev/null
@@ -1,254 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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,
-
-    get CommandOrControl()
-    {
-        return InspectorFrontendHost.platform() === "mac" ? this.Command : this.Control;
-    }
-};
-
-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 += InspectorFrontendHost.platform() === "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;
-    },
-
-    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 8bd9c7147..000000000
--- a/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.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.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 + "%)";
-
-            // Since the DOM order won't necessarily match the visual order of the
-            // children in the data grid we manually set "even" and "odd" and CSS
-            // class names on the data grid nodes so that they may be styled with
-            // a different mechanism than the built-in CSS pseudo-classes.
-            var classList = child.element.classList;
-            if (i % 2) {
-                classList.remove("odd");
-                classList.add("even");
-            } else {
-                classList.remove("even");
-                classList.add("odd");
-            }
-        }
-
-        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 ddbb9d359..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.
-
-    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 40fd4ca43..000000000
--- a/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css
+++ /dev/null
@@ -1,230 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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: 0;
-    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.svg);
-}
-
-.layer-tree.panel .data-container tr.reflection .name-column .icon {
-    content: url(Images/Reflection.svg);
-}
-
-.layer-tree.panel .data-container tr.pseudo-element .name-column .icon {
-    content: url(Images/PseudoElement.svg);
-}
-
-.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;
-}
-
-.layer-tree.panel .data-container tbody > tr.even {
-    background-color: white;
-}
-
-.layer-tree.panel .data-container tbody > tr.odd {
-    background-color: rgb(243, 246, 250);
-}
-
-/* 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 fbe9ed036..000000000
--- a/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js
+++ /dev/null
@@ -1,436 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.svg", "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);
-
-        this._updatePopoverForSelectedNode();
-    },
-
-    _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());
-
-        if (content)
-            popover.content = content;
-
-        popover.present(targetFrame.pad(2), [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"));
-        if (compositingReasons.blending)
-            addReason(WebInspector.UIString("Element has “blend-mode” style"));
-    }
-};
-
-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 833ff6d18..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(treeOutline, columns, editCallback, deleteCallback)
-{
-    WebInspector.TimelineDataGrid.call(this, treeOutline, columns, editCallback, deleteCallback);
-
-    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 377ff953c..000000000
--- a/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.TimelineDataGridNode.call(this, false, null);
-
-    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,
-    __proto__: WebInspector.TimelineDataGridNode.prototype,
-
-    // Public
-
-    get record()
-    {
-        return this._record;
-    },
-
-    get records()
-    {
-        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 "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.TimelineDataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/LayoutTimelineOverviewGraph.css
deleted file mode 100644
index 1ef181c1f..000000000
--- a/Source/WebInspectorUI/UserInterface/LayoutTimelineOverviewGraph.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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 > .timeline-record-bar {
-    margin-top: 8px;
-    height: 20px;
-}
-
-.timeline-overview-graph.layout > .timeline-record-bar > .segment {
-    border-radius: 2px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/LayoutTimelineOverviewGraph.js
deleted file mode 100644
index ff1114409..000000000
--- a/Source/WebInspectorUI/UserInterface/LayoutTimelineOverviewGraph.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * 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.LayoutTimelineOverviewGraph = function(recording)
-{
-    WebInspector.TimelineOverviewGraph.call(this, recording);
-
-    this.element.classList.add(WebInspector.LayoutTimelineOverviewGraph.StyleClassName);
-
-    this._layoutTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Layout);
-    this._layoutTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._layoutTimelineRecordAdded, this);
-
-    this._timelineRecordBars = [];
-
-    this.reset();
-};
-
-WebInspector.LayoutTimelineOverviewGraph.StyleClassName = "layout";
-
-WebInspector.LayoutTimelineOverviewGraph.prototype = {
-    constructor: WebInspector.LayoutTimelineOverviewGraph,
-    __proto__: WebInspector.TimelineOverviewGraph.prototype,
-
-    // Public
-
-    reset: function()
-    {
-        WebInspector.TimelineOverviewGraph.prototype.reset.call(this);
-
-        this._timelineRecordBarMap = new Map;
-
-        this.element.removeChildren();
-    },
-
-    updateLayout: function()
-    {
-        WebInspector.TimelineOverviewGraph.prototype.updateLayout.call(this);
-
-        var visibleWidth = this.element.offsetWidth;
-        var secondsPerPixel = (this.endTime - this.startTime) / visibleWidth;
-
-        var recordBarIndex = 0;
-
-        function createBar(records, renderMode)
-        {
-            var timelineRecordBar = this._timelineRecordBars[recordBarIndex];
-            if (!timelineRecordBar)
-                timelineRecordBar = this._timelineRecordBars[recordBarIndex] = new WebInspector.TimelineRecordBar;
-            timelineRecordBar.renderMode = renderMode;
-            timelineRecordBar.records = records;
-            timelineRecordBar.refresh(this);
-            if (!timelineRecordBar.element.parentNode)
-                this.element.appendChild(timelineRecordBar.element);
-            ++recordBarIndex;
-        }
-
-        WebInspector.TimelineRecordBar.createCombinedBars(this._layoutTimeline.records, secondsPerPixel, this, createBar.bind(this));
-
-        // Remove the remaining unused TimelineRecordBars.
-        for (; recordBarIndex < this._timelineRecordBars.length; ++recordBarIndex) {
-            this._timelineRecordBars[recordBarIndex].records = null;
-            this._timelineRecordBars[recordBarIndex].element.remove();
-        }
-    },
-
-    // Private
-
-    _layoutTimelineRecordAdded: function(event)
-    {
-        this.needsLayout();
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js b/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js
deleted file mode 100644
index 738f2f5e9..000000000
--- a/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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, sourceCodeLocation, x, y, width, height, quad)
-{
-    WebInspector.TimelineRecord.call(this, WebInspector.TimelineRecord.Type.Layout, startTime, endTime, callFrames, sourceCodeLocation);
-
-    console.assert(eventType);
-
-    if (eventType in WebInspector.LayoutTimelineRecord.EventType)
-        eventType = WebInspector.LayoutTimelineRecord.EventType[eventType];
-
-    this._eventType = eventType;
-    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("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.Layout:
-        return WebInspector.UIString("Layout");
-    case WebInspector.LayoutTimelineRecord.EventType.Paint:
-        return WebInspector.UIString("Paint");
-    }
-};
-
-WebInspector.LayoutTimelineRecord.TypeIdentifier = "layout-timeline-record";
-WebInspector.LayoutTimelineRecord.EventTypeCookieKey = "layout-timeline-record-event-type";
-
-WebInspector.LayoutTimelineRecord.prototype = {
-    constructor: WebInspector.LayoutTimelineRecord,
-
-    // Public
-
-    get eventType()
-    {
-        return this._eventType;
-    },
-
-    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;
-    },
-
-    saveIdentityToCookie: function(cookie)
-    {
-        WebInspector.TimelineRecord.prototype.saveIdentityToCookie.call(this, cookie);
-
-        cookie[WebInspector.LayoutTimelineRecord.EventTypeCookieKey] = this._eventType;
-    }
-};
-
-WebInspector.LayoutTimelineRecord.prototype.__proto__ = WebInspector.TimelineRecord.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineView.css b/Source/WebInspectorUI/UserInterface/LayoutTimelineView.css
deleted file mode 100644
index 11d3281de..000000000
--- a/Source/WebInspectorUI/UserInterface/LayoutTimelineView.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.layout .item .subtitle {
-    display: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineView.js b/Source/WebInspectorUI/UserInterface/LayoutTimelineView.js
deleted file mode 100644
index 2c48762c9..000000000
--- a/Source/WebInspectorUI/UserInterface/LayoutTimelineView.js
+++ /dev/null
@@ -1,194 +0,0 @@
-/*
- * 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.LayoutTimelineView = function(recording)
-{
-    WebInspector.TimelineView.call(this);
-
-    this.navigationSidebarTreeOutline.onselect = this._treeElementSelected.bind(this);
-    this.navigationSidebarTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
-    this.navigationSidebarTreeOutline.element.classList.add(WebInspector.LayoutTimelineView.TreeOutlineStyleClassName);
-
-    var columns = {eventType: {}, initiatorCallFrame: {}, width: {}, height: {}, startTime: {}, duration: {}};
-
-    columns.eventType.title = WebInspector.UIString("Type");
-    columns.eventType.width = "15%";
-    columns.eventType.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("layout", WebInspector.LayoutTimelineRecord.EventType);
-    columns.eventType.hidden = true;
-
-    columns.initiatorCallFrame.title = WebInspector.UIString("Initiator");
-    columns.initiatorCallFrame.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.startTime.sort = "ascending";
-
-    columns.duration.title = WebInspector.UIString("Duration");
-    columns.duration.width = "8%";
-    columns.duration.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.element.classList.add(WebInspector.LayoutTimelineView.StyleClassName);
-    this.element.appendChild(this._dataGrid.element);
-
-    var layoutTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Layout);
-    layoutTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._layoutTimelineRecordAdded, this);
-
-    this._pendingRecords = [];
-};
-
-WebInspector.LayoutTimelineView.StyleClassName = "layout";
-WebInspector.LayoutTimelineView.TreeOutlineStyleClassName = "layout";
-
-WebInspector.LayoutTimelineView.prototype = {
-    constructor: WebInspector.LayoutTimelineView,
-    __proto__: WebInspector.TimelineView.prototype,
-
-    // Public
-
-    get navigationSidebarTreeOutlineLabel()
-    {
-        return WebInspector.UIString("Records");
-    },
-
-    shown: function()
-    {
-        WebInspector.TimelineView.prototype.shown.call(this);
-
-        this._dataGrid.shown();
-    },
-
-    hidden: function()
-    {
-        this._dataGrid.hidden();
-
-        WebInspector.TimelineView.prototype.hidden.call(this);
-    },
-
-    updateLayout: function()
-    {
-        WebInspector.TimelineView.prototype.updateLayout.call(this);
-
-        this._dataGrid.updateLayout();
-
-        this._processPendingRecords();
-    },
-
-    matchTreeElementAgainstCustomFilters: function(treeElement)
-    {
-        return this._dataGrid.treeElementMatchesActiveScopeFilters(treeElement);
-    },
-
-    reset: function()
-    {
-        WebInspector.TimelineView.prototype.reset.call(this);
-
-        this._dataGrid.reset();
-    },
-
-    // Protected
-
-    treeElementPathComponentSelected: function(event)
-    {
-        var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
-        if (!dataGridNode)
-            return;
-        dataGridNode.revealAndSelect();
-    },
-
-    // Private
-
-    _processPendingRecords: function()
-    {
-        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);
-        }
-
-        this._pendingRecords = [];
-    },
-
-    _layoutTimelineRecordAdded: function(event)
-    {
-        var layoutTimelineRecord = event.data.record;
-        console.assert(layoutTimelineRecord instanceof WebInspector.LayoutTimelineRecord);
-
-        this._pendingRecords.push(layoutTimelineRecord);
-
-        this.needsLayout();
-    },
-
-    _dataGridFiltersDidChange: function(event)
-    {
-        WebInspector.timelineSidebarPanel.updateFilter();
-    },
-
-    _dataGridNodeSelected: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
-    },
-
-    _treeElementSelected: function(treeElement, selectedByUser)
-    {
-        if (this._dataGrid.shouldIgnoreSelectionEvent())
-            return;
-
-        if (!WebInspector.timelineSidebarPanel.canShowDifferentContentView())
-            return;
-
-        if (treeElement instanceof WebInspector.FolderTreeElement)
-            return;
-
-        if (!(treeElement instanceof WebInspector.TimelineRecordTreeElement)) {
-            console.error("Unknown tree element selected.");
-            return;
-        }
-
-        if (!treeElement.record.sourceCodeLocation) {
-            WebInspector.timelineSidebarPanel.showTimelineView(WebInspector.TimelineRecord.Type.Layout);
-            return;
-        }
-
-        WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(treeElement.record.sourceCodeLocation);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/LoadInspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/LoadInspectorBackendCommands.js
deleted file mode 100644
index 192fdf08e..000000000
--- a/Source/WebInspectorUI/UserInterface/LoadInspectorBackendCommands.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.
- */
-
-(function() {
-    var backendURLs;
-    if (InspectorFrontendHost.inspectorBackendCommandsURLs) {
-        var suggestedBackendCommandsURLs = InspectorFrontendHost.inspectorBackendCommandsURLs();
-        if (suggestedBackendCommandsURLs)
-            backendURLs = suggestedBackendCommandsURLs;
-    }
-
-    if (!backendURLs) {
-        backendURLs = ["InspectorJSBackendCommands.js"];
-        if (InspectorFrontendHost.debuggableType() === "web")
-            backendURLs.push("InspectorWebBackendCommands.js");
-    }
-
-    console.assert(backendURLs.length);
-    for (var backendCommandsURL of backendURLs)
-        document.write("<script src=\"" + backendCommandsURL + "\"></script>");
-})();
diff --git a/Source/WebInspectorUI/UserInterface/LogContentView.css b/Source/WebInspectorUI/UserInterface/LogContentView.css
deleted file mode 100644
index def145feb..000000000
--- a/Source/WebInspectorUI/UserInterface/LogContentView.css
+++ /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.
- */
-
-.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: highlight;
-}
-
-.console-user-command-result.console-log-level::before {
-    background-image: url(Images/UserInputResult.svg);
-}
-
-.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: 0;
-    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-group.collapsed .console-group-title::before {
-    background-image: -webkit-canvas(disclosure-triangle-small-closed-normal);
-}
-
-.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-debug-level .console-message-text {
-    color: blue;
-}
-
-.console-debug-level::before {
-    background-color: blue;
-}
-
-.console-error-level::before {
-    background-image: url(Images/Error.svg);
-    background-size: 10px 10px;
-}
-
-.console-warning-level::before {
-    background-image: url(Images/Warning.svg);
-    background-size: 10px 10px;
-}
-
-.console-user-command .console-message {
-    margin-left: -24px;
-    padding-right: 0;
-}
-
-.console-user-command::before {
-    background-image: url(Images/UserInputPromptPrevious.svg);
-}
-
-.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-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 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;
-}
-
-.outline-disclosure li.parent.expanded::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
-}
-
-.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 5c32de629..000000000
--- a/Source/WebInspectorUI/UserInterface/LogContentView.js
+++ /dev/null
@@ -1,947 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.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._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.svg", 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.svg", "Images/SplitToggleUp.svg", 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;
-    },
-
-    _ondragstart: function(event)
-    {
-        if (event.target.enclosingNodeOrSelfWithClass(WebInspector.DOMTreeOutline.StyleClassName)) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    },
-
-    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/MIMETypeUtilities.js b/Source/WebInspectorUI/UserInterface/MIMETypeUtilities.js
deleted file mode 100644
index 67e8648a0..000000000
--- a/Source/WebInspectorUI/UserInterface/MIMETypeUtilities.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.fileExtensionForURL = function(url)
-{
-    var lastPathComponent = parseURL(url).lastPathComponent;
-    if (!lastPathComponent)
-        return "";
-
-    var index = lastPathComponent.indexOf(".");
-    if (index === -1)
-        return "";
-
-    return lastPathComponent.substr(index + 1);
-};
-
-WebInspector.mimeTypeForFileExtension = function(extension)
-{
-    const extensionToMIMEType = {
-        // Document types.
-        "html": "text/html",
-        "xhtml": "application/xhtml+xml",
-        "xml": "text/xml",
-
-        // Script types.
-        "js": "text/javascript",
-        "json": "application/json",
-        "clj": "text/x-clojure",
-        "coffee": "text/x-coffeescript",
-        "ls": "text/x-livescript",
-        "ts": "text/typescript",
-
-        // Stylesheet types.
-        "css": "text/css",
-        "less": "text/x-less",
-        "sass": "text/x-sass",
-        "scss": "text/x-scss",
-
-        // Image types.
-        "bmp": "image/bmp",
-        "gif": "image/gif",
-        "jpeg": "image/jpeg",
-        "jpg": "image/jpeg",
-        "pdf": "application/pdf",
-        "png": "image/png",
-        "tif": "image/tiff",
-        "tiff": "image/tiff",
-
-        // Font types and Media types are ignored for now.
-
-        // Miscellaneous types.
-        "svg": "image/svg+xml",
-        "txt": "text/plain",
-        "xsl": "text/xsl"
-    };
-
-    return extensionToMIMEType[extension] || null;
-};
diff --git a/Source/WebInspectorUI/UserInterface/Main.css b/Source/WebInspectorUI/UserInterface/Main.css
deleted file mode 100644
index 19f499478..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.svg);
-    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 2ef447ef0..364c27a49 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,414 +26,729 @@
 <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:; 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="ContentFlowIcon.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="TreeElementStatusButton.css">
-    <link rel="stylesheet" href="TimelineSidebarPanel.css">
-    <link rel="stylesheet" href="TimelineContentView.css">
-    <link rel="stylesheet" href="OverviewTimelineView.css">
-    <link rel="stylesheet" href="NetworkTimelineView.css">
-    <link rel="stylesheet" href="LayoutTimelineView.css">
-    <link rel="stylesheet" href="ScriptTimelineView.css">
-    <link rel="stylesheet" href="TimelineIcons.css">
-    <link rel="stylesheet" href="TimelineRuler.css">
-    <link rel="stylesheet" href="TimelineDataGrid.css">
-    <link rel="stylesheet" href="TimelineRecordBar.css">
-    <link rel="stylesheet" href="TimelineOverview.css">
-    <link rel="stylesheet" href="NetworkTimelineOverviewGraph.css">
-    <link rel="stylesheet" href="LayoutTimelineOverviewGraph.css">
-    <link rel="stylesheet" href="ScriptTimelineOverviewGraph.css">
-    <link rel="stylesheet" href="ProfileView.css">
-    <link rel="stylesheet" href="JavaScriptProfileView.css">
-    <link rel="stylesheet" href="CSSStyleDetailsSidebarPanel.css">
-    <link rel="stylesheet" href="DOMTreeDataGrid.css">
-    <link rel="stylesheet" href="LayerTreeSidebarPanel.css">
-    <link rel="stylesheet" href="EventListenerSectionGroup.css">
-    <link rel="stylesheet" href="Breakpoint.css">
-    <link rel="stylesheet" href="BreakpointActionView.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="Slider.css">
-    <link rel="stylesheet" href="ColorWheel.css">
-    <link rel="stylesheet" href="ColorPicker.css">
-    <link rel="stylesheet" href="CodeMirrorDragToAlterNumberController.css">
-    <link rel="stylesheet" href="GoToLineDialog.css">
-    <link rel="stylesheet" href="HoverMenu.css">
-    <link rel="stylesheet" href="ComputedStyleDetailsPanel.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/CallFrameTreeElement.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/CollectionContentView.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/HeapAllocationsTimelineOverviewGraph.css">
+    <link rel="stylesheet" href="Views/HeapAllocationsTimelineView.css">
+    <link rel="stylesheet" href="Views/HeapSnapshotInstancesContentView.css">
+    <link rel="stylesheet" href="Views/HierarchicalPathComponent.css">
+    <link rel="stylesheet" href="Views/HoverMenu.css">
+    <link rel="stylesheet" href="Views/IdleTreeElement.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/OpenResourceDialog.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/ProfileView.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/ResourceTimelineDataGridNode.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/ScriptDetailsTimelineView.css">
+    <link rel="stylesheet" href="Views/ScriptTimelineOverviewGraph.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/SettingsTabContentView.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/SpringEditor.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/TextNavigationItem.css">
+    <link rel="stylesheet" href="Views/TextResourceContentView.css">
+    <link rel="stylesheet" href="Views/TextToggleButtonNavigationItem.css">
+    <link rel="stylesheet" href="Views/ThreadTreeElement.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/TimelineTabContentView.css">
+    <link rel="stylesheet" href="Views/TimelineView.css">
+    <link rel="stylesheet" href="Views/TitleView.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/mark-selection.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/sublime.js"></script>
+    <script src="External/CodeMirror/xml.js"></script>
+
+    <script src="External/Esprima/esprima.js"></script>
+
+    <script src="Base/WebInspector.js"></script>
+    <script src="Base/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="Base/YieldableTask.js"></script>
+
+    <script src="Protocol/ProtocolTracer.js"></script>
+    <script src="Protocol/LoggingProtocolTracer.js"></script>
+    <script src="Protocol/InspectorBackend.js"></script>
+
+    <script src="Protocol/Connection.js"></script>
+    <script src="Protocol/InspectorFrontendAPI.js"></script>
+    <script src="Protocol/LoadInspectorBackendCommands.js"></script>
+    <script src="Protocol/MessageDispatcher.js"></script>
+    <script src="Protocol/RemoteObject.js"></script>
+    <script src="Protocol/Target.js"></script>
+
+    <script src="Protocol/MainTarget.js"></script>
+    <script src="Protocol/WorkerTarget.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/InspectorObserver.js"></script>
+    <script src="Protocol/LayerTreeObserver.js"></script>
+    <script src="Protocol/MemoryObserver.js"></script>
+    <script src="Protocol/NetworkObserver.js"></script>
+    <script src="Protocol/PageObserver.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="Protocol/WorkerObserver.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/TimelineRange.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/CallingContextTreeNode.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/Collection.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/DebuggerData.js"></script>
+    <script src="Models/DefaultDashboard.js"></script>
+    <script src="Models/ExecutionContext.js"></script>
+    <script src="Models/ExecutionContextList.js"></script>
+    <script src="Models/FPSInstrument.js"></script>
+    <script src="Models/Frame.js"></script>
+    <script src="Models/GarbageCollection.js"></script>
+    <script src="Models/Geometry.js"></script>
+    <script src="Models/Gradient.js"></script>
+    <script src="Models/HeapAllocationsInstrument.js"></script>
+    <script src="Models/HeapAllocationsTimelineRecord.js"></script>
+    <script src="Models/HeapSnapshotRootPath.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/MemoryPressureEvent.js"></script>
+    <script src="Models/MemoryTimeline.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/ResourceQueryMatch.js"></script>
+    <script src="Models/ResourceQueryResult.js"></script>
+    <script src="Models/ResourceTimelineRecord.js"></script>
+    <script src="Models/ResourceTimingData.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="Proxies/FormatterWorkerProxy.js"></script>
+    <script src="Proxies/HeapSnapshotDiffProxy.js"></script>
+    <script src="Proxies/HeapSnapshotEdgeProxy.js"></script>
+    <script src="Proxies/HeapSnapshotNodeProxy.js"></script>
+    <script src="Proxies/HeapSnapshotProxy.js"></script>
+    <script src="Proxies/HeapSnapshotWorkerProxy.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/DataGridNode.js"></script>
+    <script src="Views/DetailsSectionRow.js"></script>
+    <script src="Views/Dialog.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/TreeElement.js"></script>
+    <script src="Views/TreeOutline.js"></script>
+    <script src="Views/TreeOutlineGroup.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/GeneralTabBarItem.js"></script>
+    <script src="Views/GeneralTreeElement.js"></script>
+    <script src="Views/NavigationSidebarPanel.js"></script>
+    <script src="Views/PinnedTabBarItem.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/TimelineDataGridNodePathComponent.js"></script>
+    <script src="Views/TimelineOverview.js"></script>
+    <script src="Views/TimelineRecordTreeElement.js"></script>
+    <script src="Views/TimelineTreeElement.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/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/CollectionContentView.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/ContextMenuUtilities.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/FilterBarNavigationItem.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/HeapAllocationsTimelineDataGridNode.js"></script>
+    <script src="Views/HeapAllocationsTimelineDataGridNodePathComponent.js"></script>
+    <script src="Views/HeapAllocationsTimelineOverviewGraph.js"></script>
+    <script src="Views/HeapAllocationsTimelineView.js"></script>
+    <script src="Views/HeapSnapshotClassDataGridNode.js"></script>
+    <script src="Views/HeapSnapshotClusterContentView.js"></script>
+    <script src="Views/HeapSnapshotContentView.js"></script>
+    <script src="Views/HeapSnapshotDataGridTree.js"></script>
+    <script src="Views/HeapSnapshotInstanceDataGridNode.js"></script>
+    <script src="Views/HeapSnapshotInstanceFetchMoreDataGridNode.js"></script>
+    <script src="Views/HierarchicalPathNavigationItem.js"></script>
+    <script src="Views/HoverMenu.js"></script>
+    <script src="Views/IdleTreeElement.js"></script>
+    <script src="Views/ImageResourceContentView.js"></script>
+    <script src="Views/IndeterminateProgressSpinner.js"></script>
+    <script src="Views/IndexedDatabaseDetailsSidebarPanel.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/ObjectPropertiesDetailSectionRow.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/OpenResourceDialog.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/ProfileDataGridNode.js"></script>
+    <script src="Views/ProfileDataGridTree.js"></script>
+    <script src="Views/ProfileNodeDataGridNode.js"></script>
+    <script src="Views/ProfileNodeTreeElement.js"></script>
+    <script src="Views/ProfileView.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/ResourceTimingPopoverDataGridNode.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/ScriptClusterTimelineView.js"></script>
+    <script src="Views/ScriptContentView.js"></script>
+    <script src="Views/ScriptDetailsTimelineView.js"></script>
+    <script src="Views/ScriptProfileTimelineView.js"></script>
+    <script src="Views/ScriptTimelineDataGrid.js"></script>
+    <script src="Views/ScriptTimelineDataGridNode.js"></script>
+    <script src="Views/ScriptTimelineOverviewGraph.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/SpringEditor.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/TextNavigationItem.js"></script>
+    <script src="Views/TextResourceContentView.js"></script>
+    <script src="Views/TextToggleButtonNavigationItem.js"></script>
+    <script src="Views/ThreadTreeElement.js"></script>
+    <script src="Views/TimelineRecordBar.js"></script>
+    <script src="Views/TimelineRecordFrame.js"></script>
+    <script src="Views/TimelineRecordingContentView.js"></script>
+    <script src="Views/TimelineRecordingProgressView.js"></script>
+    <script src="Views/TimelineRuler.js"></script>
+    <script src="Views/TitleView.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/WorkerTreeElement.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/BreakpointLogMessageLexer.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/CodeMirrorSpringEditingController.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/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/MemoryManager.js"></script>
+    <script src="Controllers/ProbeManager.js"></script>
+    <script src="Controllers/ReplayManager.js"></script>
+    <script src="Controllers/ResourceQueryController.js"></script>
+    <script src="Controllers/RuntimeManager.js"></script>
+    <script src="Controllers/SourceMapManager.js"></script>
+    <script src="Controllers/StorageManager.js"></script>
+    <script src="Controllers/TargetManager.js"></script>
+    <script src="Controllers/TimelineManager.js"></script>
+    <script src="Controllers/TypeTokenAnnotator.js"></script>
+    <script src="Controllers/VisualStyleCompletionsController.js"></script>
+    <script src="Controllers/WorkerManager.js"></script>
+
+    <script src="Workers/Formatter/FormatterContentBuilder.js"></script>
+
+    <script src="Base/Main.js"></script>
 
-    <script src="Utilities.js"></script>
-    <script src="WebInspector.js"></script>
-    <script src="URLUtilities.js"></script>
-    <script src="MessageDispatcher.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="CanvasObserver.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="TimelineRecording.js"></script>
-    <script src="Timeline.js"></script>
-    <script src="NetworkTimeline.js"></script>
-    <script src="SourceCodeTimeline.js"></script>
-    <script src="TimelineRecord.js"></script>
-    <script src="TimelineMarker.js"></script>
-    <script src="ResourceTimelineRecord.js"></script>
-    <script src="FrameResourceManager.js"></script>
-    <script src="IssueManager.js"></script>
-    <script src="RuntimeManager.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="TreeElementStatusButton.js"></script>
-    <script src="IssueMessage.js"></script>
-    <script src="ContentFlowTreeElement.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="BackForwardEntry.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="TimelineContentView.js"></script>
-    <script src="TimelineView.js"></script>
-    <script src="OverviewTimelineView.js"></script>
-    <script src="NetworkTimelineView.js"></script>
-    <script src="LayoutTimelineView.js"></script>
-    <script src="ScriptTimelineView.js"></script>
-    <script src="ApplicationCacheDetailsSidebarPanel.js"></script>
-    <script src="DOMTreeManager.js"></script>
-    <script src="DOMNode.js"></script>
-    <script src="DOMUtilities.js"></script>
-    <script src="ContentFlow.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="FrameDOMTreeContentView.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="TextMarker.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="DOMTreeDataGrid.js"></script>
-    <script src="DOMTreeDataGridNode.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="Slider.js"></script>
-    <script src="ColorWheel.js"></script>
-    <script src="ColorPicker.js"></script>
-    <script src="CSSStyleDeclarationTextEditor.js"></script>
-    <script src="CSSStyleDeclarationSection.js"></script>
-    <script src="IndeterminateProgressSpinner.js"></script>
-    <script src="TimelineSidebarPanel.js"></script>
-    <script src="TimelineRecordTreeElement.js"></script>
-    <script src="SourceCodeTimelineTreeElement.js"></script>
-    <script src="TimelineRuler.js"></script>
-    <script src="TimelineDataGrid.js"></script>
-    <script src="LayoutTimelineDataGrid.js"></script>
-    <script src="ScriptTimelineDataGrid.js"></script>
-    <script src="TimelineRecordBar.js"></script>
-    <script src="TimelineDataGridNode.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="SourceCodeTimelineTimelineDataGridNode.js"></script>
-    <script src="TreeOutlineDataGridSynchronizer.js"></script>
-    <script src="TimelineOverview.js"></script>
-    <script src="TimelineOverviewGraph.js"></script>
-    <script src="NetworkTimelineOverviewGraph.js"></script>
-    <script src="LayoutTimelineOverviewGraph.js"></script>
-    <script src="ScriptTimelineOverviewGraph.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="CanvasDataGridNode.js"></script>
-    <script src="CanvasProfileType.js"></script>
-    <script src="CanvasProfileView.js"></script>
-    <script src="ProfileObject.js"></script>
-    <script src="JavaScriptProfileObject.js"></script>
-    <script src="CanvasProfileObject.js"></script>
-    <script src="DebuggerSidebarPanel.js"></script>
-    <script src="BreakpointTreeElement.js"></script>
-    <script src="BreakpointAction.js"></script>
-    <script src="BreakpointActionView.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="JavaScriptRuntimeCompletionProvider.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="GoToLineDialog.js"></script>
-    <script src="ContentFlowDOMTreeContentView.js"></script>
-    <script src="HoverMenu.js"></script>
-    <script src="CodeMirrorColorEditingController.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();
@@ -442,10 +757,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 627ee6562..000000000
--- a/Source/WebInspectorUI/UserInterface/Main.js
+++ /dev/null
@@ -1,1787 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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",
-    PageArchiveStarted: "page-archive-started",
-    PageArchiveEnded: "page-archive-ended"
-};
-
-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.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.
-    if (InspectorBackend.registerInspectorDispatcher)
-        InspectorBackend.registerInspectorDispatcher(new WebInspector.InspectorObserver);
-    if (InspectorBackend.registerPageDispatcher)
-        InspectorBackend.registerPageDispatcher(new WebInspector.PageObserver);
-    if (InspectorBackend.registerCanvasDispatcher)
-        InspectorBackend.registerCanvasDispatcher(new WebInspector.CanvasObserver);
-    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.registerDatabaseDispatcher)
-        InspectorBackend.registerDatabaseDispatcher(new WebInspector.DatabaseObserver);
-    if (InspectorBackend.registerDOMStorageDispatcher)
-        InspectorBackend.registerDOMStorageDispatcher(new WebInspector.DOMStorageObserver);
-    if (InspectorBackend.registerApplicationCacheDispatcher)
-        InspectorBackend.registerApplicationCacheDispatcher(new WebInspector.ApplicationCacheObserver);
-    if (InspectorBackend.registerTimelineDispatcher)
-        InspectorBackend.registerTimelineDispatcher(new WebInspector.TimelineObserver);
-    if (InspectorBackend.registerProfilerDispatcher)
-        InspectorBackend.registerProfilerDispatcher(new WebInspector.ProfilerObserver);
-    if (InspectorBackend.registerCSSDispatcher)
-        InspectorBackend.registerCSSDispatcher(new WebInspector.CSSObserver);
-    if (InspectorBackend.registerLayerTreeDispatcher)
-        InspectorBackend.registerLayerTreeDispatcher(new WebInspector.LayerTreeObserver);
-    if (InspectorBackend.registerRuntimeDispatcher)
-        InspectorBackend.registerRuntimeDispatcher(new WebInspector.RuntimeObserver);
-
-    // Enable agents.
-    if (window.InspectorAgent)
-        InspectorAgent.enable();
-
-    // Perform one-time tasks.
-    WebInspector.CSSCompletions.requestCSSNameCompletions();
-    this._generateDisclosureTriangleImages();
-
-    // 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.runtimeManager = new WebInspector.RuntimeManager;
-    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.
-    if (window.ConsoleAgent)
-        ConsoleAgent.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));
-    window.addEventListener("mousemove", this._mouseMoved.bind(this), true);
-    window.addEventListener("pagehide", this._pageHidden.bind(this));
-
-    // Create settings.
-    this._lastInspectorViewStateCookieSetting = new WebInspector.Setting("last-content-view-state-cookie", {});
-
-    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._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);
-
-    this.mouseCoords = {
-        x: 0,
-        y: 0
-    };
-}
-
-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");
-
-    this.debuggableType = InspectorFrontendHost.debuggableType() === "web" ? WebInspector.DebuggableType.Web : WebInspector.DebuggableType.JavaScript;
-    document.body.classList.add(this.debuggableType);
-
-    // 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.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._consoleKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Option | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "C", this.toggleConsoleView.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.undockButtonNavigationItem = new WebInspector.ToggleControlToolbarItem("undock", WebInspector.UIString("Detach into separate window"), "", "Images/Undock.svg", "", 16, 14);
-    this.undockButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._undock, this);
-
-    this.closeButtonNavigationItem = new WebInspector.ControlToolbarItem("dock-close", WebInspector.UIString("Close"), "Images/Close.svg", 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.timelineSidebarPanel = new WebInspector.TimelineSidebarPanel;
-    this.debuggerSidebarPanel = new WebInspector.DebuggerSidebarPanel;
-
-    this.navigationSidebar.addSidebarPanel(this.resourceSidebarPanel);
-    // FIXME: Enable timelines panel for JavaScript inspection.
-    if (this.debuggableType !== WebInspector.DebuggableType.JavaScript)
-        this.navigationSidebar.addSidebarPanel(this.timelineSidebarPanel);
-    this.navigationSidebar.addSidebarPanel(this.debuggerSidebarPanel);
-
-    this.toolbar.addToolbarItem(this.resourceSidebarPanel.toolbarItem, WebInspector.Toolbar.Section.Left);
-    // FIXME: Enable timelines panel for JavaScript inspection.
-    if (this.debuggableType !== WebInspector.DebuggableType.JavaScript)
-        this.toolbar.addToolbarItem(this.timelineSidebarPanel.toolbarItem, WebInspector.Toolbar.Section.Left);
-    this.toolbar.addToolbarItem(this.debuggerSidebarPanel.toolbarItem, WebInspector.Toolbar.Section.Left);
-
-    // The toolbar button for the console.
-    var toolTip = WebInspector.UIString("Show console (%s)").format(WebInspector._consoleKeyboardShortcut.displayName);
-    var activatedToolTip = WebInspector.UIString("Hide console (%s)").format(WebInspector._consoleKeyboardShortcut.displayName);
-    this._consoleToolbarButton = new WebInspector.ActivateButtonToolbarItem("console", toolTip, activatedToolTip, WebInspector.UIString("Console"), "Images/NavigationItemLog.svg");
-    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.
-    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, WebInspector.UIString("Inspect"), "Images/Crosshair.svg");
-        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();
-
-    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 restore the last saved view state.
-    if (!this.contentBrowser.currentContentView && !this.ignoreLastContentCookie)
-        this._restoreInspectorViewStateFromCookie(this._lastInspectorViewStateCookieSetting.value);
-
-    this._updateSplitConsoleHeight(this._splitConsoleHeightSetting.value);
-
-    if (this._showingSplitConsoleSetting.value)
-        this.showSplitConsole();
-}
-
-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 || representedObject instanceof WebInspector.ContentFlow)
-        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;
-
-    if (representedObject instanceof WebInspector.TimelineRecording)
-        return this.timelineSidebarPanel;
-
-    // The console does not have a sidebar.
-    if (representedObject instanceof WebInspector.LogObject)
-        return null;
-
-    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.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.timelineSidebarPanel.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) {
-        var position = new WebInspector.SourceCodePosition(lineNumber, 0);
-        this.resourceSidebarPanel.showSourceCode(resource, position);
-        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 (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._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._restoreInspectorViewStateFromCookie(this._lastInspectorViewStateCookieSetting.value, true);
-
-    this.updateWindowTitle();
-}
-
-WebInspector._provisionalLoadStarted = function(event)
-{
-    if (!event.target.isMainFrame())
-        return;
-
-    this._updateCookieForInspectorViewState();
-}
-
-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._mouseMoved = function(event)
-{
-    this._updateModifierKeys(event);
-    this.mouseCoords = {
-        x: event.pageX,
-        y: event.pageY
-    };
-}
-
-WebInspector._pageHidden = function(event)
-{
-    this._updateCookieForInspectorViewState();
-}
-
-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.svg" : "Images/DockBottom.svg";
-        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 (!selectedSidebarPanel)
-        return;
-
-    // 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);
-
-    if (!selectedSidebarPanel.contentTreeOutline.selectedTreeElement)
-        selectedSidebarPanel.showDefaultContentView();
-}
-
-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.length && !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._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._updateCookieForInspectorViewState = function()
-{
-    var cookie = {};
-    var currentContentView = this.contentBrowser.currentContentView;
-
-    // The console does not have a sidebar, so create a cookie here.
-    if (currentContentView && currentContentView.representedObject instanceof WebInspector.LogObject) {
-        cookie[WebInspector.SelectedSidebarPanelCookieKey] = "console";
-        this._lastInspectorViewStateCookieSetting.value = cookie;
-        return;
-    }
-
-    var selectedSidebarPanel = this.navigationSidebar.selectedSidebarPanel;
-    if (!selectedSidebarPanel)
-        return;
-
-    // Restoring view state after inspector re-open or page reload is delegated to navigation sidebars.
-    // This is because some navigation sidebar state (such as breakpoint selections) cannot be inferred
-    // solely based on which content view is visible, or multiple navigation sidebars could be shown.
-    cookie[WebInspector.SelectedSidebarPanelCookieKey] = selectedSidebarPanel.identifier;
-    selectedSidebarPanel.saveStateToCookie(cookie);
-    this._lastInspectorViewStateCookieSetting.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;
-
-    var selectedSidebarPanel = this.navigationSidebar.selectedSidebarPanel;
-    if (!selectedSidebarPanel)
-        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 = 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;
-}
-
-WebInspector._restoreInspectorViewStateFromCookie = function(cookie, causedByReload)
-{
-    if (!cookie)
-        return;
-
-    // The console does not have a sidebar, so handle its special cookie here.
-    if (cookie[WebInspector.SelectedSidebarPanelCookieKey] === "console") {
-        this.showFullHeightConsole();
-        return;
-    }
-
-    const matchTypeOnlyDelayForReload = 2000;
-    const matchTypeOnlyDelayForReopen = 1000;
-    var sidebarPanelIdentifier = cookie[WebInspector.SelectedSidebarPanelCookieKey];
-    var sidebarPanel = WebInspector.navigationSidebar.findSidebarPanel(sidebarPanelIdentifier);
-    if (!sidebarPanel)
-        return;
-
-    WebInspector.navigationSidebar.selectedSidebarPanel = sidebarPanel;
-
-    var relaxMatchDelay = causedByReload ? matchTypeOnlyDelayForReload : matchTypeOnlyDelayForReopen;
-    sidebarPanel.restoreStateFromCookie(cookie, relaxMatchDelay);
-}
-
-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);
-    }
-
-    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]};
-
-    generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.svg", specifications, 13, 13, "disclosure-triangle-small-open-");
-    generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.svg", specifications, 13, 13, "disclosure-triangle-small-closed-");
-
-    specifications["selected"] = {fillColor: [255, 255, 255, 0.8]};
-
-    generateColoredImagesForCSS("Images/DisclosureTriangleTinyOpen.svg", specifications, 8, 8, "disclosure-triangle-tiny-open-");
-    generateColoredImagesForCSS("Images/DisclosureTriangleTinyClosed.svg", 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.svg", 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;
-        }
-    }
-}
-
-WebInspector.archiveMainFrame = function()
-{
-    this.notifications.dispatchEventToListeners(WebInspector.Notification.PageArchiveStarted, event);
-
-    setTimeout(function() {
-        PageAgent.archive(function(error, data) {
-            this.notifications.dispatchEventToListeners(WebInspector.Notification.PageArchiveEnded, event);
-            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));
-    }.bind(this), 3000);
-}
-
-WebInspector.canArchiveMainFrame = function()
-{
-    if (!PageAgent.archive)
-        return false;
-
-    return WebInspector.Resource.Type.fromMIMEType(WebInspector.frameResourceManager.mainFrame.mainResource.mimeType) === WebInspector.Resource.Type.Document;
-}
diff --git a/Source/WebInspectorUI/UserInterface/MessageDispatcher.js b/Source/WebInspectorUI/UserInterface/MessageDispatcher.js
deleted file mode 100644
index f4974ad95..000000000
--- a/Source/WebInspectorUI/UserInterface/MessageDispatcher.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.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);
-}
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..490bb7909
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/AnalyzerMessage.js
@@ -0,0 +1,46 @@
+/*
+ * 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..068202243
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ApplicationCacheFrame.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.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..000241d48
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ApplicationCacheManifest.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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;
+    }
+
+    // Public
+
+    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..2c5ec3dab
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/BackForwardEntry.js
@@ -0,0 +1,157 @@
+/*
+ *  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
+
+    makeCopy(newCookie)
+    {
+        let copy = new WebInspector.BackForwardEntry(this._contentView, newCookie || this.cookie);
+        copy._tombstone = this._tombstone;
+        copy._scrollPositions = this._scrollPositions.slice();
+        return copy;
+    }
+
+    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();
+    }
+
+    isEqual(other)
+    {
+        if (!other)
+            return false;
+        return this._contentView === other._contentView && Object.shallowEqual(this._cookie, other._cookie);
+    }
+
+    // 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..03f85def1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Breakpoint.js
@@ -0,0 +1,364 @@
+/*
+ * 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 contentIdentifier = sourceCode ? sourceCode.contentIdentifier : null;
+            var scriptIdentifier = sourceCode instanceof WebInspector.Script ? sourceCode.id : null;
+            var target = sourceCode instanceof WebInspector.Script ? sourceCode.target : null;
+            var location = sourceCodeLocationOrInfo;
+        } else if (sourceCodeLocationOrInfo && typeof sourceCodeLocationOrInfo === "object") {
+            // The 'url' fallback is for transitioning from older frontends and should be removed.
+            var contentIdentifier = sourceCodeLocationOrInfo.contentIdentifier || 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._contentIdentifier = contentIdentifier || null;
+        this._scriptIdentifier = scriptIdentifier || null;
+        this._target = target || 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 identifier()
+    {
+        return this._id;
+    }
+
+    set identifier(id)
+    {
+        this._id = id || null;
+    }
+
+    get contentIdentifier()
+    {
+        return this._contentIdentifier;
+    }
+
+    get scriptIdentifier()
+    {
+        return this._scriptIdentifier;
+    }
+
+    get target()
+    {
+        return this._target;
+    }
+
+    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, target, and resolved state are tied to the current session, so don't include them for serialization.
+        return {
+            contentIdentifier: this._contentIdentifier,
+            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.ContentIdentifierCookieKey] = this.contentIdentifier;
+        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.ContentIdentifierCookieKey = "breakpoint-content-identifier";
+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..71249a435
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/BreakpointAction.js
@@ -0,0 +1,85 @@
+/*
+ * 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..8cab966b6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js
@@ -0,0 +1,298 @@
+/*
+ * 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": 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(/\(\)$/, "").toLowerCase();
+            }
+
+            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;
+    }
+
+    _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;
+    }
+
+    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..395e4d28b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js
@@ -0,0 +1,1035 @@
+/*
+ * 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", "var()"];
+    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-variant-numeric", "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()", "cross-fade()", "image-set()"
+    ],
+    "list-style-image": [
+        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "image-set()"
+    ],
+    "clear": [
+        "none", "left", "right", "both"
+    ],
+    "fill-rule": [
+        "nonzero", "evenodd"
+    ],
+    "stroke-linecap": [
+        "butt", "round", "square"
+    ],
+    "stroke-linejoin": [
+        "round", "miter", "bevel"
+    ],
+    "baseline-shift": [
+        "baseline", "sub", "super"
+    ],
+    "border-bottom-width": [
+        "medium", "thick", "thin", "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-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()"
+    ],
+    "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()", "image-set()"
+    ],
+    "border-width": [
+        "medium", "thick", "thin", "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()", "cross-fade()", "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()", "cross-fade()", "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()"
+    ],
+    "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-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", "grid", "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()"
+    ],
+    "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()", "cross-fade()", "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-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()"
+    ],
+    "height": [
+        "intrinsic", "min-intrinsic", "calc()"
+    ],
+    "max-width": [
+        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
+    ],
+    "min-width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
+    ],
+    "max-height": [
+        "none", "intrinsic", "min-intrinsic", "calc()"
+    ],
+    "min-height": [
+        "intrinsic", "min-intrinsic", "calc()"
+    ],
+    "-webkit-logical-width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
+    ],
+    "-webkit-logical-height": [
+        "intrinsic", "min-intrinsic", "calc()"
+    ],
+    "-webkit-max-logical-width": [
+        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
+    ],
+    "-webkit-min-logical-width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()"
+    ],
+    "-webkit-max-logical-height": [
+        "none", "intrinsic", "min-intrinsic", "calc()"
+    ],
+    "-webkit-min-logical-height": [
+        "intrinsic", "min-intrinsic", "calc()"
+    ],
+    "empty-cells": [
+        "hide", "show"
+    ],
+    "pointer-events": [
+        "none", "all", "auto", "visible", "visiblepainted", "visiblefill", "visiblestroke", "painted", "fill", "stroke"
+    ],
+    "letter-spacing": [
+        "normal", "calc()"
+    ],
+    "word-spacing": [
+        "normal", "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"
+    ],
+    "font-variant-numeric": [
+        "normal", "ordinal", "slashed-zero", "lining-nums", "oldstyle-nums", "proportional-nums", "tabular-nums",
+        "diagonal-fractions", "stacked-fractions"
+    ],
+    "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()"
+    ],
+    "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"
+    ],
+    "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()", "spring()", "all", WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder
+    ],
+    "transition-timing-function": [
+        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()", "spring()"
+    ],
+    "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"
+    ],
+    "grid": [
+        "none"
+    ],
+    "grid-area": [
+        "auto"
+    ],
+    "grid-auto-columns": [
+        "auto", "-webkit-max-content", "-webkit-min-content", "minmax()",
+    ],
+    "grid-auto-flow": [
+        "row", "column", "dense"
+    ],
+    "grid-auto-rows": [
+        "auto", "-webkit-max-content", "-webkit-min-content", "minmax()",
+    ],
+    "grid-column": [
+        "auto"
+    ],
+    "grid-column-start": [
+        "auto"
+    ],
+    "grid-column-end": [
+        "auto"
+    ],
+    "grid-row": [
+        "auto"
+    ],
+    "grid-row-start": [
+        "auto"
+    ],
+    "grid-row-end": [
+        "auto"
+    ],
+    "grid-template": [
+        "none"
+    ],
+    "grid-template-areas": [
+        "none"
+    ],
+    "grid-template-columns": [
+        "none", "auto", "-webkit-max-content", "-webkit-min-content", "minmax()", "repeat()"
+    ],
+    "grid-template-rows": [
+        "none", "auto", "-webkit-max-content", "-webkit-min-content", "minmax()", "repeat()"
+    ],
+    "-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"
+    ],
+    "scroll-snap-align": [
+        "none", "start", "center", "end"
+    ],
+    "scroll-snap-type": [
+        "none", "mandatory", "proximity", "x", "y", "inline", "block", "both"
+    ],
+    "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()", "spring()"
+    ],
+    "-webkit-column-span": [
+        "all", "none", "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-user-select": [
+        "auto", "none", "text", "all"
+    ],
+    "-webkit-text-stroke-width": [
+        "medium", "thick", "thin", "calc()"
+    ],
+    "-webkit-border-start-width": [
+        "medium", "thick", "thin", "calc()"
+    ],
+    "-webkit-border-end-width": [
+        "medium", "thick", "thin", "calc()"
+    ],
+    "-webkit-border-before-width": [
+        "medium", "thick", "thin", "calc()"
+    ],
+    "-webkit-border-after-width": [
+        "medium", "thick", "thin", "calc()"
+    ],
+    "-webkit-column-rule-width": [
+        "medium", "thick", "thin", "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-column-gap": [
+        "normal", "calc()"
+    ],
+    "-webkit-column-axis": [
+        "horizontal", "vertical", "auto"
+    ],
+    "-webkit-column-width": [
+        "auto", "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()"
+    ],
+
+    // 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..2128e8a63
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSMedia.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.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..860f1efff
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
@@ -0,0 +1,259 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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._variable = name.startsWith("--");
+        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; }
+    set implicit(implicit) { this._implicit = implicit; }
+
+    get anonymous() { return this._anonymous; }
+    get inherited() { return this._inherited; }
+    get valid() { return this._valid; }
+    get variable() { return this._variable; }
+    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..b20a96598
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
@@ -0,0 +1,257 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 || !Array.shallowEqual(this._selectors, selectors) ||
+                !Array.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;
+    }
+
+    hasMatchedPseudoElementSelector()
+    {
+        if (this.nodeStyles && this.nodeStyles.node && this.nodeStyles.node.isPseudoElement())
+            return true;
+
+        return this.matchedSelectors.some((selector) => selector.isPseudoElementSelector());
+    }
+
+    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..892e446c3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSSelector.js
@@ -0,0 +1,64 @@
+/*
+ * 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;
+    }
+
+    isPseudoElementSelector()
+    {
+        return WebInspector.CSSStyleManager.PseudoElementNames.some((name) => this._text.includes(`:${name}`));
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js b/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
new file mode 100644
index 000000000..8a7ba5f8f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
@@ -0,0 +1,362 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.isInUserAgentShadowTree();
+
+        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 = WebInspector.CSSStyleDeclarationTextEditor.PrefixWhitespace + text.trim();
+        if (this._text === trimmedText)
+            return;
+
+        if (trimmedText === WebInspector.CSSStyleDeclarationTextEditor.PrefixWhitespace || 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()
+    {
+        let indentString = WebInspector.indentString();
+        let styleText = "";
+        let mediaList = this.mediaList;
+        let mediaQueriesCount = mediaList.length;
+        for (let i = mediaQueriesCount - 1; i >= 0; --i)
+            styleText += indentString.repeat(mediaQueriesCount - i - 1) + "@media " + mediaList[i].text + " {\n";
+
+        styleText += indentString.repeat(mediaQueriesCount) + this.selectorText + " {\n";
+
+        for (let property of this._properties) {
+            if (property.anonymous)
+                continue;
+
+            styleText += indentString.repeat(mediaQueriesCount + 1) + property.text.trim();
+
+            if (!styleText.endsWith(";"))
+                styleText += ";";
+
+            styleText += "\n";
+        }
+
+        for (let i = mediaQueriesCount; i > 0; --i)
+            styleText += indentString.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..67778a6bc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CallFrame.js
@@ -0,0 +1,260 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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(target, id, sourceCodeLocation, functionName, thisObject, scopeChain, nativeCode, programCode, isTailDeleted)
+    {
+        super();
+
+        console.assert(target instanceof WebInspector.Target);
+        console.assert(!sourceCodeLocation || sourceCodeLocation instanceof WebInspector.SourceCodeLocation);
+        console.assert(!thisObject || thisObject instanceof WebInspector.RemoteObject);
+        console.assert(!scopeChain || scopeChain instanceof Array);
+
+        this._target = target;
+        this._id = id || null;
+        this._sourceCodeLocation = sourceCodeLocation || null;
+        this._functionName = functionName || "";
+        this._thisObject = thisObject || null;
+        this._scopeChain = scopeChain || [];
+        this._nativeCode = nativeCode || false;
+        this._programCode = programCode || false;
+        this._isTailDeleted = isTailDeleted || false;
+    }
+
+    // Public
+
+    get target() { return this._target; }
+    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; }
+    get isTailDeleted() { return this._isTailDeleted; }
+
+    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);
+    }
+
+    mergedScopeChain()
+    {
+        let mergedScopes = [];
+
+        // Scopes list goes from top/local (1) to bottom/global (5)
+        //   [scope1, scope2, scope3, scope4, scope5]
+        let scopes = this._scopeChain.slice();
+
+        // Merge similiar scopes. Some 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. Go in reverse order so we
+        // merge the first two closure scopes with the same name. Also mark
+        // the first time we see a new name, so we know the base for the name.
+        //   [scope1&2, scope3, scope4, scope5]
+        //      foo      bar     GLE    global
+        let lastMarkedHash = null;
+        function markAsBaseIfNeeded(scope) {
+            if (!scope.hash)
+                return false;
+            if (scope.type !== WebInspector.ScopeChainNode.Type.Closure)
+                return false;
+            if (scope.hash === lastMarkedHash)
+                return false;
+            lastMarkedHash = scope.hash;
+            scope.__baseClosureScope = true;
+            return true;
+        }
+
+        function shouldMergeClosureScopes(youngScope, oldScope, lastMerge) {
+            if (!youngScope || !oldScope)
+                return false;
+
+            // Don't merge unknown locations.
+            if (!youngScope.hash || !oldScope.hash)
+                return false;
+
+            // Only merge closure scopes.
+            if (youngScope.type !== WebInspector.ScopeChainNode.Type.Closure)
+                return false;
+            if (oldScope.type !== WebInspector.ScopeChainNode.Type.Closure)
+                return false;
+
+            // Don't merge if they are not the same.
+            if (youngScope.hash !== oldScope.hash)
+                return false;
+
+            // Don't merge if there was already a merge.
+            if (lastMerge && youngScope.hash === lastMerge.hash)
+                return false;
+
+            return true;
+        }
+
+        let lastScope = null;
+        let lastMerge = null;
+        for (let i = scopes.length - 1; i >= 0; --i) {
+            let scope = scopes[i];
+            markAsBaseIfNeeded(scope);
+            if (shouldMergeClosureScopes(scope, lastScope, lastMerge)) {
+                console.assert(lastScope.__baseClosureScope);
+                let type = WebInspector.ScopeChainNode.Type.Closure;
+                let objects = lastScope.objects.concat(scope.objects);
+                let merged = new WebInspector.ScopeChainNode(type, objects, scope.name, scope.location);
+                merged.__baseClosureScope = true;
+                console.assert(objects.length === 2);
+
+                mergedScopes.pop(); // Remove the last.
+                mergedScopes.push(merged); // Add the merged scope.
+
+                lastMerge = merged;
+                lastScope = null;
+            } else {
+                mergedScopes.push(scope);
+
+                lastMerge = null;
+                lastScope = scope;
+            }
+        }
+
+        mergedScopes = mergedScopes.reverse();
+
+        // Mark the first Closure as Local if the name matches this call frame.
+        for (let scope of mergedScopes) {
+            if (scope.type === WebInspector.ScopeChainNode.Type.Closure) {
+                if (scope.name === this._functionName)
+                    scope.convertToLocalScope();
+                break;
+            }
+        }
+
+        return mergedScopes;
+    }
+
+    // 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(target, payload, scopeChain, sourceCodeLocation)
+    {
+        let id = payload.callFrameId;
+        let thisObject = WebInspector.RemoteObject.fromPayload(payload.this, target);
+        let functionName = WebInspector.CallFrame.functionNameFromPayload(payload);
+        let nativeCode = false;
+        let programCode = WebInspector.CallFrame.programCodeFromPayload(payload);
+        let isTailDeleted = payload.isTailDeleted;
+
+        if (sourceCodeLocation && isWebInspectorConsoleEvaluationScript(sourceCodeLocation.sourceCode.sourceURL)) {
+            functionName = WebInspector.UIString("Console Evaluation");
+            programCode = true;
+        }
+
+        return new WebInspector.CallFrame(target, id, sourceCodeLocation, functionName, thisObject, scopeChain, nativeCode, programCode, isTailDeleted);
+    }
+
+    static fromPayload(target, payload)
+    {
+        console.assert(payload);
+
+        let {url, scriptId} = payload;
+        let nativeCode = false;
+        let sourceCodeLocation = null;
+        let functionName = WebInspector.CallFrame.functionNameFromPayload(payload);
+        let programCode = WebInspector.CallFrame.programCodeFromPayload(payload);
+
+        if (url === "[native code]") {
+            nativeCode = true;
+            url = null;
+        } else if (url || scriptId) {
+            let sourceCode = null;
+            if (scriptId) {
+                sourceCode = WebInspector.debuggerManager.scriptForIdentifier(scriptId, target);
+                if (sourceCode && sourceCode.resource)
+                    sourceCode = sourceCode.resource;
+            }
+            if (!sourceCode)
+                sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
+            if (!sourceCode)
+                sourceCode = WebInspector.debuggerManager.scriptsForURL(url, target)[0];
+
+            if (sourceCode) {
+                // The lineNumber is 1-based, but we expect 0-based.
+                let lineNumber = payload.lineNumber - 1;
+                sourceCodeLocation = sourceCode.createLazySourceCodeLocation(lineNumber, payload.columnNumber);
+            } else {
+                // Treat this as native code if we were unable to find a source.
+                console.assert(!url, "We should have detected source code for something with a url");
+                nativeCode = true;
+                url = null;
+            }
+        }
+
+        if (sourceCodeLocation && isWebInspectorConsoleEvaluationScript(sourceCodeLocation.sourceCode.sourceURL)) {
+            functionName = WebInspector.UIString("Console Evaluation");
+            programCode = true;
+        }
+
+        return new WebInspector.CallFrame(target, 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..2fab051c0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CallingContextTree.js
@@ -0,0 +1,176 @@
+/*
+ * 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(type)
+    {
+        super();
+
+        this._type = type || WebInspector.CallingContextTree.Type.TopDown;
+
+        this.reset();
+    }
+
+    // Public
+
+    get type() { return this._type; }
+    get totalNumberOfSamples() { return this._totalNumberOfSamples; }
+
+    reset()
+    {
+        this._root = new WebInspector.CallingContextTreeNode(-1, -1, -1, "<root>", null);
+        this._totalNumberOfSamples = 0;
+    }
+
+    totalDurationInTimeRange(startTime, endTime)
+    {
+        return this._root.filteredTimestampsAndDuration(startTime, endTime).duration;
+    }
+
+    updateTreeWithStackTrace({timestamp, stackFrames}, duration)
+    {
+        this._totalNumberOfSamples++;
+
+        let node = this._root;
+        node.addTimestampAndExpressionLocation(timestamp, duration, null);
+
+        switch (this._type) {
+        case WebInspector.CallingContextTree.Type.TopDown:
+            for (let i = stackFrames.length; i--; ) {
+                let stackFrame = stackFrames[i];
+                node = node.findOrMakeChild(stackFrame);
+                node.addTimestampAndExpressionLocation(timestamp, duration, stackFrame.expressionLocation || null, i === 0);
+            }
+            break;
+        case WebInspector.CallingContextTree.Type.BottomUp:
+            for (let i = 0; i < stackFrames.length; ++i) {
+                let stackFrame = stackFrames[i];
+                node = node.findOrMakeChild(stackFrame);
+                node.addTimestampAndExpressionLocation(timestamp, duration, stackFrame.expressionLocation || null, i === 0);
+            }
+            break;
+        case WebInspector.CallingContextTree.Type.TopFunctionsTopDown:
+            for (let i = stackFrames.length; i--; ) {
+                node = this._root;
+                for (let j = i + 1; j--; ) {
+                    let stackFrame = stackFrames[j];
+                    node = node.findOrMakeChild(stackFrame);
+                    node.addTimestampAndExpressionLocation(timestamp, duration, stackFrame.expressionLocation || null, j === 0);
+                }
+            }
+            break;
+        case WebInspector.CallingContextTree.Type.TopFunctionsBottomUp:
+            for (let i = 0; i < stackFrames.length; i++) {
+                node = this._root;
+                for (let j = i; j < stackFrames.length; j++) {
+                    let stackFrame = stackFrames[j];
+                    node = node.findOrMakeChild(stackFrame);
+                    node.addTimestampAndExpressionLocation(timestamp, duration, stackFrame.expressionLocation || null, j === 0);
+                }
+            }
+            break;
+        default:
+            console.assert(false, "This should not be reached.");
+            break;
+        }
+    }
+
+    toCPUProfilePayload(startTime, endTime)
+    {
+        let cpuProfile = {};
+        let roots = [];
+        let numSamplesInTimeRange = this._root.filteredTimestampsAndDuration(startTime, endTime).timestamps.length;
+
+        this._root.forEachChild((child) => {
+            if (child.hasStackTraceInTimeRange(startTime, endTime))
+                roots.push(child.toCPUProfileNode(numSamplesInTimeRange, startTime, endTime));
+        });
+
+        cpuProfile.rootNodes = roots;
+        return cpuProfile;
+    }
+
+    forEachChild(callback)
+    {
+        this._root.forEachChild(callback);
+    }
+
+    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.CallingContextTree.Type = {
+    TopDown: Symbol("TopDown"),
+    BottomUp: Symbol("BottomUp"),
+    TopFunctionsTopDown: Symbol("TopFunctionsTopDown"),
+    TopFunctionsBottomUp: Symbol("TopFunctionsBottomUp"),
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CallingContextTreeNode.js b/Source/WebInspectorUI/UserInterface/Models/CallingContextTreeNode.js
new file mode 100644
index 000000000..db8165641
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CallingContextTreeNode.js
@@ -0,0 +1,244 @@
+/*
+ * 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.CallingContextTreeNode = class CallingContextTreeNode extends WebInspector.Object
+{
+    constructor(sourceID, line, column, name, url, hash)
+    {
+        super();
+
+        this._children = {};
+        this._sourceID = sourceID;
+        this._line = line;
+        this._column = column;
+        this._name = name;
+        this._url = url;
+        this._uid = WebInspector.CallingContextTreeNode.__uid++;
+
+        this._timestamps = [];
+        this._durations = [];
+        this._leafTimestamps = [];
+        this._leafDurations = [];
+        this._expressionLocations = {}; // Keys are "line:column" strings. Values are arrays of timestamps in sorted order.
+
+        this._hash = hash || WebInspector.CallingContextTreeNode._hash(this);
+    }
+
+    // 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; }
+    get hash() { return this._hash; }
+
+    hasChildrenInTimeRange(startTime, endTime)
+    {
+        for (let propertyName of Object.getOwnPropertyNames(this._children)) {
+            let child = this._children[propertyName];
+            if (child.hasStackTraceInTimeRange(startTime, endTime))
+                return true;
+        }
+        return false;
+    }
+
+    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;
+    }
+
+    filteredTimestampsAndDuration(startTime, endTime)
+    {
+        let lowerIndex = this._timestamps.lowerBound(startTime);
+        let upperIndex = this._timestamps.upperBound(endTime);
+
+        let totalDuration = 0;
+        for (let i = lowerIndex; i < upperIndex; ++i)
+            totalDuration += this._durations[i];
+
+        return {
+            timestamps: this._timestamps.slice(lowerIndex, upperIndex),
+            duration: totalDuration,
+        };
+    }
+
+    filteredLeafTimestampsAndDuration(startTime, endTime)
+    {
+        let lowerIndex = this._leafTimestamps.lowerBound(startTime);
+        let upperIndex = this._leafTimestamps.upperBound(endTime);
+
+        let totalDuration = 0;
+        for (let i = lowerIndex; i < upperIndex; ++i)
+            totalDuration += this._leafDurations[i];
+
+        return {
+            leafTimestamps: this._leafTimestamps.slice(lowerIndex, upperIndex),
+            leafDuration: totalDuration,
+        };
+    }
+
+    hasChildren()
+    {
+        return !isEmptyObject(this._children);
+    }
+
+    findOrMakeChild(stackFrame)
+    {
+        let hash = WebInspector.CallingContextTreeNode._hash(stackFrame);
+        let node = this._children[hash];
+        if (node)
+            return node;
+        node = new WebInspector.CallingContextTreeNode(stackFrame.sourceID, stackFrame.line, stackFrame.column, stackFrame.name, stackFrame.url, hash);
+        this._children[hash] = node;
+        return node;
+    }
+
+    addTimestampAndExpressionLocation(timestamp, duration, expressionLocation, leaf)
+    {
+        console.assert(!this._timestamps.length || this._timestamps.lastValue <= timestamp, "Expected timestamps to be added in sorted, increasing, order.");
+        this._timestamps.push(timestamp);
+        this._durations.push(duration);
+
+        if (leaf) {
+            this._leafTimestamps.push(timestamp);
+            this._leafDurations.push(duration);
+        }
+
+        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);
+        });
+    }
+
+    equals(other)
+    {
+        return this._hash === other.hash;
+    }
+
+    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.CallingContextTreeNode.__uid = 0;
diff --git a/Source/WebInspectorUI/UserInterface/Models/Collection.js b/Source/WebInspectorUI/UserInterface/Models/Collection.js
new file mode 100644
index 000000000..8c7739f83
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Collection.js
@@ -0,0 +1,119 @@
+/*
+ * 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.Collection = class Collection extends WebInspector.Object
+{
+    constructor(typeVerifier)
+    {
+        super();
+
+        this._items = new Set;
+
+        console.assert(!typeVerifier || typeof typeVerifier === "function");
+        this._typeVerifier = typeVerifier || WebInspector.Collection.TypeVerifier.Any;
+    }
+
+     // Public
+
+    get items() { return this._items; }
+    get typeVerifier() { return this._typeVerifier; }
+
+    add(item)
+    {
+        let isValidType = this._typeVerifier(item);
+        console.assert(isValidType);
+        if (!isValidType)
+            return;
+
+        console.assert(!this._items.has(item));
+        this._items.add(item);
+
+        this.itemAdded(item);
+
+        this.dispatchEventToListeners(WebInspector.Collection.Event.ItemAdded, {item});
+    }
+
+    remove(item)
+    {
+        let wasRemoved = this._items.delete(item);
+        console.assert(wasRemoved);
+
+        this.itemRemoved(item);
+
+        this.dispatchEventToListeners(WebInspector.Collection.Event.ItemRemoved, {item});
+    }
+
+    clear()
+    {
+        let items = new Set(this._items);
+
+        this._items.clear();
+
+        this.itemsCleared(items);
+
+        for (let item of items)
+            this.dispatchEventToListeners(WebInspector.Collection.Event.ItemRemoved, {item});
+    }
+
+    toArray()
+    {
+        return Array.from(this._items);
+    }
+
+    toJSON()
+    {
+        return this.toArray();
+    }
+
+     // Protected
+
+    itemAdded(item)
+    {
+        // Implemented by subclasses.
+    }
+
+    itemRemoved(item)
+    {
+        // Implemented by subclasses.
+    }
+
+    itemsCleared(items)
+    {
+        // Implemented by subclasses.
+    }
+};
+
+ WebInspector.Collection.Event = {
+    ItemAdded: "collection-item-added",
+    ItemRemoved: "collection-item-removed",
+};
+
+ WebInspector.Collection.TypeVerifier = {
+    Any: (object) => true,
+    ContentFlow: (object) => object instanceof WebInspector.ContentFlow,
+    Frame: (object) => object instanceof WebInspector.Frame,
+    Resource: (object) => object instanceof WebInspector.Resource,
+    Script: (object) => object instanceof WebInspector.Script,
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CollectionEntry.js b/Source/WebInspectorUI/UserInterface/Models/CollectionEntry.js
new file mode 100644
index 000000000..681e0a4a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CollectionEntry.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.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, target)
+    {
+        if (payload.key)
+            payload.key = WebInspector.RemoteObject.fromPayload(payload.key, target);
+        if (payload.value)
+            payload.value = WebInspector.RemoteObject.fromPayload(payload.value, target);
+
+        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..d88ad8230
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CollectionEntryPreview.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.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..491bf2870
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Color.js
@@ -0,0 +1,762 @@
+/*
+ * 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.hasOwnProperty(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:
+        case WebInspector.Color.Format.HEX:
+        case WebInspector.Color.Format.HEXAlpha:
+            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.isKeyword())
+                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.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 Array.shallowEqual(this._rgba, [0, 0, 0, 0]) || Array.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 => Array.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);
+        rgba = rgba.map((value) => value.maxDecimals(2));
+        return "rgb(" + rgba.join(", ") + ")";
+    }
+
+    _toRGBAString()
+    {
+        let rgba = this.rgba;
+        rgba = rgba.map((value) => value.maxDecimals(2));
+        return "rgba(" + rgba.join(", ") + ")";
+    }
+
+    _toHSLString()
+    {
+        if (!this.simple)
+            return this._toHSLAString();
+
+        let hsla = this.hsla;
+        hsla = hsla.map((value) => value.maxDecimals(2));
+        return "hsl(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%)";
+    }
+
+    _toHSLAString()
+    {
+        let hsla = this.hsla;
+        hsla = hsla.map((value) => value.maxDecimals(2));
+        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],
+    "darkgrey": [169, 169, 169],
+    "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],
+    "darkslategrey": [47, 79, 79],
+    "darkturquoise": [0, 206, 209],
+    "darkviolet": [148, 0, 211],
+    "deeppink": [255, 20, 147],
+    "deepskyblue": [0, 191, 255],
+    "dimgray": [105, 105, 105],
+    "dimgrey": [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],
+    "grey": [128, 128, 128],
+    "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],
+    "lightgray": [211, 211, 211],
+    "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],
+    "lightslategrey": [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],
+    "slategrey": [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..f76c8a82c
--- /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(target, result, wasThrown, savedResultIndex, shouldRevealConsole = true)
+    {
+        let source = WebInspector.ConsoleMessage.MessageSource.JS;
+        let level = wasThrown ? WebInspector.ConsoleMessage.MessageLevel.Error : WebInspector.ConsoleMessage.MessageLevel.Log;
+        let type = WebInspector.ConsoleMessage.MessageType.Result;
+
+        super(target, source, level, "", type, undefined, undefined, undefined, 0, [result], undefined, undefined);
+
+        this._savedResultIndex = savedResultIndex;
+        this._shouldRevealConsole = shouldRevealConsole;
+
+        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 shouldRevealConsole()
+    {
+        return this._shouldRevealConsole;
+    }
+};
+
+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..b8154ae06
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ConsoleMessage.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.ConsoleMessage = class ConsoleMessage extends WebInspector.Object
+{
+    constructor(target, source, level, message, type, url, line, column, repeatCount, parameters, callFrames, request)
+    {
+        super();
+
+        console.assert(typeof source === "string");
+        console.assert(typeof level === "string");
+        console.assert(typeof message === "string");
+        console.assert(target instanceof WebInspector.Target);
+        console.assert(!parameters || parameters.every((x) => x instanceof WebInspector.RemoteObject));
+
+        this._target = target;
+        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._sourceCodeLocation = undefined;
+
+        this._repeatCount = repeatCount || 0;
+        this._parameters = parameters;
+
+        callFrames = callFrames || [];
+        this._stackTrace = WebInspector.StackTrace.fromPayload(this._target, {callFrames});
+
+        this._request = request;
+    }
+
+    // Public
+
+    get target() { return this._target; }
+    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; }
+
+    get sourceCodeLocation()
+    {
+        if (this._sourceCodeLocation !== undefined)
+            return this._sourceCodeLocation;
+
+        // First try to get the location from the top frame of the stack trace.
+        let topCallFrame = this._stackTrace.callFrames[0];
+        if (topCallFrame && topCallFrame.sourceCodeLocation) {
+            this._sourceCodeLocation = topCallFrame.sourceCodeLocation;
+            return this._sourceCodeLocation;
+        }
+
+        // If that doesn't exist try to get a location from the url/line/column in the ConsoleMessage.
+        // FIXME <http://webkit.org/b/76404>: Remove the string equality checks for undefined once we don't get that value anymore.
+        if (this._url && this._url !== "undefined") {
+            let sourceCode = WebInspector.frameResourceManager.resourceForURL(this._url);
+            if (sourceCode) {
+                let lineNumber = this._line > 0 ? this._line - 1 : 0;
+                let columnNumber = this._column > 0 ? this._column - 1 : 0;
+                this._sourceCodeLocation = new WebInspector.SourceCodeLocation(sourceCode, lineNumber, columnNumber);
+                return this._sourceCodeLocation;
+            }
+        }
+
+        this._sourceCodeLocation = null;
+        return this._sourceCodeLocation;
+    }
+};
+
+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..fe41077be
--- /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..636a7586f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMNode.js
@@ -0,0 +1,833 @@
+/*
+ * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ * 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:
+ *
+ *     * 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._shadowRootType = payload.shadowRootType;
+        this._computedRole = payload.role;
+        this._contentSecurityPolicyHash = payload.contentSecurityPolicyHash;
+
+        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 = [];
+
+        // FIXME: The logic around this._shadowRoots and this._children is very confusing.
+        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);
+                node.parentNode = this;
+                this._shadowRoots.push(node);
+            }
+        }
+
+        if (this._nodeType === Node.ELEMENT_NODE)
+            this._customElementState = payload.customElementState || WebInspector.DOMNode.CustomElementState.Builtin;
+        else
+            this._customElementState = null;
+
+        if (payload.templateContent) {
+            this._templateContent = new WebInspector.DOMNode(this._domTreeManager, this.ownerDocument, false, payload.templateContent);
+            this._templateContent.parentNode = this;
+        }
+
+        if (payload.children)
+            this._setChildrenPayload(payload.children);
+        else if (!this._children && this._shadowRoots.length)
+            this._children = this._shadowRoots.slice();
+
+        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;
+        } 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;
+    }
+
+    contentSecurityPolicyHash()
+    {
+        return this._contentSecurityPolicyHash;
+    }
+
+    hasAttributes()
+    {
+        return this._attributes.length > 0;
+    }
+
+    hasChildNodes()
+    {
+        return this.childNodeCount > 0;
+    }
+
+    hasShadowRoots()
+    {
+        return !!this._shadowRoots.length;
+    }
+
+    isInShadowTree()
+    {
+        return this._isInShadowTree;
+    }
+
+    isInUserAgentShadowTree()
+    {
+        return this._isInShadowTree && this.ancestorShadowRoot().isUserAgentShadowRoot();
+    }
+
+    isCustomElement()
+    {
+        return this._customElementState === WebInspector.DOMNode.CustomElementState.Custom;
+    }
+
+    customElementState()
+    {
+        return this._customElementState;
+    }
+
+    isShadowRoot()
+    {
+        return !!this._shadowRootType;
+    }
+
+    isUserAgentShadowRoot()
+    {
+        return this._shadowRootType === WebInspector.DOMNode.ShadowRootType.UserAgent;
+    }
+
+    ancestorShadowRoot()
+    {
+        if (!this._isInShadowTree)
+            return null;
+
+        let node = this;
+        while (node && !node.isShadowRoot())
+            node = node.parentNode;
+        return node;
+    }
+
+    ancestorShadowHost()
+    {
+        let shadowRoot = this.ancestorShadowRoot();
+        return shadowRoot ? shadowRoot.parentNode : null;
+    }
+
+    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;
+    }
+
+    shadowRoots()
+    {
+        return this._shadowRoots;
+    }
+
+    shadowRootType()
+    {
+        return this._shadowRootType;
+    }
+
+    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));
+    }
+
+    toggleClass(className, flag)
+    {
+        if (!className || !className.length)
+            return;
+
+        if (this.isPseudoElement()) {
+            this.parentNode.toggleClass(className, flag);
+            return;
+        }
+
+        if (this.nodeType() !== Node.ELEMENT_NODE)
+            return;
+
+        function resolvedNode(object)
+        {
+            if (!object)
+                return;
+
+            function inspectedPage_node_toggleClass(className, flag)
+            {
+                this.classList.toggle(className, flag);
+            }
+
+            object.callFunction(inspectedPage_node_toggleClass, [className, flag]);
+            object.release();
+        }
+
+        WebInspector.RemoteObject.resolveNode(this, "", resolvedNode);
+    }
+
+    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,
+                    isPopupButton: accessibilityProperties.isPopUpButton,
+                    headingLevel: accessibilityProperties.headingLevel,
+                    hierarchyLevel: accessibilityProperties.hierarchyLevel,
+                    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(",");
+    }
+
+    get escapedIdSelector()
+    {
+        let id = this.getAttribute("id");
+        if (!id)
+            return "";
+
+        id = id.trim();
+        if (!id.length)
+            return "";
+
+        id = CSS.escape(id);
+        if (/[\s'"]/.test(id))
+            return `[id=\"${id}\"]`;
+
+        return `#${id}`;
+    }
+
+    get escapedClassSelector()
+    {
+        let classes = this.getAttribute("class");
+        if (!classes)
+            return "";
+
+        classes = classes.trim();
+        if (!classes.length)
+            return "";
+
+        let foundClasses = new Set;
+        return classes.split(/\s+/).reduce((selector, className) => {
+            if (!className.length || foundClasses.has(className))
+                return selector;
+
+            foundClasses.add(className);
+            return `${selector}.${CSS.escape(className)}`;
+        }, "");
+    }
+
+    get displayName()
+    {
+        return this.nodeNameInCorrectCase() + this.escapedIdSelector + this.escapedClassSelector;
+    }
+
+    appropriateSelectorFor(justSelector)
+    {
+        if (this.isPseudoElement())
+            return this.parentNode.appropriateSelectorFor() + "::" + this._pseudoType;
+
+        let lowerCaseName = this.localName() || this.nodeName().toLowerCase();
+
+        let id = this.escapedIdSelector;
+        if (id.length)
+            return justSelector ? id : lowerCaseName + id;
+
+        let classes = this.escapedClassSelector;
+        if (classes.length)
+            return justSelector ? classes : lowerCaseName + classes;
+
+        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);
+    }
+
+    get ownerSVGElement()
+    {
+        if (this._nodeName === "svg")
+            return this;
+
+        if (!this.parentNode)
+            return null;
+
+        return this.parentNode.ownerSVGElement;
+    }
+
+    isSVGElement()
+    {
+        return !!this.ownerSVGElement;
+    }
+
+    _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",
+};
+
+WebInspector.DOMNode.ShadowRootType = {
+    UserAgent: "user-agent",
+    Closed: "closed",
+    Open: "open",
+};
+
+WebInspector.DOMNode.CustomElementState = {
+    Builtin: "builtin",
+    Custom: "custom",
+    Waiting: "waiting",
+    Failed: "failed",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js b/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
new file mode 100644
index 000000000..564be5e52
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
@@ -0,0 +1,985 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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._pendingRefreshTask = null;
+        this.refresh();
+    }
+
+    // Public
+
+    get node()
+    {
+        return this._node;
+    }
+
+    get needsRefresh()
+    {
+        return this._pendingRefreshTask || this._needsRefresh;
+    }
+
+    refreshIfNeeded()
+    {
+        if (!this._needsRefresh)
+            return;
+        this.refresh();
+    }
+
+    refresh()
+    {
+        if (this._pendingRefreshTask)
+            return this._pendingRefreshTask;
+
+        this._needsRefresh = false;
+
+        let fetchedMatchedStylesPromise = new WebInspector.WrappedPromise;
+        let fetchedInlineStylesPromise = new WebInspector.WrappedPromise;
+        let fetchedComputedStylesPromise = new WebInspector.WrappedPromise;
+
+        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;
+            }
+
+            fetchedMatchedStylesPromise.resolve();
+        }
+
+        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();
+
+            fetchedInlineStylesPromise.resolve();
+        }
+
+        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);
+                if (!property.implicit)
+                    property.implicit = !this._isPropertyFoundInMatchingRules(property.name);
+                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);
+
+            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 (Array.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});
+
+            fetchedComputedStylesPromise.resolve();
+        }
+
+        // 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));
+
+        this._pendingRefreshTask = Promise.all([fetchedMatchedStylesPromise.promise, fetchedInlineStylesPromise.promise, fetchedComputedStylesPromise.promise])
+        .then(() => {
+            this._pendingRefreshTask = null;
+        });
+
+        return this._pendingRefreshTask;
+    }
+
+    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 || "";
+        let 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().then(() => {
+                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;
+            }
+        }
+    }
+
+    _isPropertyFoundInMatchingRules(propertyName)
+    {
+        return this._orderedStyles.some((style) => {
+            return style.properties.some((property) => property.name === propertyName);
+        });
+    }
+};
+
+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..bf8b9308c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMSearchMatchObject.js
@@ -0,0 +1,172 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 + "\"";
+
+            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..ac03b8d1b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMStorageObject.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.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..dfabd481f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMTree.js
@@ -0,0 +1,309 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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._contentFlowCollection = new WebInspector.Collection(WebInspector.Collection.TypeVerifier.ContentFlow);
+
+        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 contentFlowCollection() { return this._contentFlowCollection; }
+
+    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.
+        let deletedFlows = new Set(this._contentFlowCollection.items);
+        let newFlows = new Set;
+        for (let flow of event.data.flows) {
+            // All the flows received from WebKit are part of the same document.
+            console.assert(this._isContentFlowInCurrentDocument(flow));
+
+            if (this._contentFlowCollection.items.has(flow)) {
+                // Remove the flow name from the deleted list.
+                console.assert(deletedFlows.has(flow));
+                deletedFlows.delete(flow);
+            } else {
+                this._contentFlowCollection.add(flow);
+                newFlows.add(flow);
+            }
+        }
+
+        for (let flow of deletedFlows)
+            this._contentFlowCollection.remove(flow);
+
+        // Send update events to listeners.
+
+        for (let flow of deletedFlows)
+            this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasRemoved, {flow});
+
+        for (let flow of newFlows)
+            this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasAdded, {flow});
+    }
+
+    _contentFlowWasAdded(event)
+    {
+        let flow = event.data.flow;
+        if (!this._isContentFlowInCurrentDocument(flow))
+            return;
+
+        this._contentFlowCollection.add(flow);
+
+        this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasAdded, {flow});
+    }
+
+    _contentFlowWasRemoved(event)
+    {
+        let flow = event.data.flow;
+        if (!this._isContentFlowInCurrentDocument(flow))
+            return;
+
+        this._contentFlowCollection.remove(flow);
+
+        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..961e41aa9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DatabaseObject.js
@@ -0,0 +1,95 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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..98513eb74
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DatabaseTableObject.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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/DebuggerData.js b/Source/WebInspectorUI/UserInterface/Models/DebuggerData.js
new file mode 100644
index 000000000..394b8ed45
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DebuggerData.js
@@ -0,0 +1,155 @@
+/*
+ * 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.DebuggerData = class DebuggerData extends WebInspector.Object
+{
+    constructor(target)
+    {
+        super();
+
+        console.assert(target instanceof WebInspector.Target);
+
+        this._target = target;
+
+        this._paused = false;
+        this._pausing = false;
+        this._pauseReason = null;
+        this._pauseData = null;
+        this._callFrames = [];
+        this._asyncStackTrace = null;
+
+        this._scriptIdMap = new Map;
+        this._scriptContentIdentifierMap = new Map;
+
+        this._makePausingAfterNextResume = false;
+    }
+
+    // Public
+
+    get target() { return this._target; }
+    get paused() { return this._paused; }
+    get pausing() { return this._pausing; }
+    get pauseReason() { return this._pauseReason; }
+    get pauseData() { return this._pauseData; }
+    get callFrames() { return this._callFrames; }
+    get asyncStackTrace() { return this._asyncStackTrace; }
+
+    get scripts()
+    {
+        return Array.from(this._scriptIdMap.values());
+    }
+
+    scriptForIdentifier(id)
+    {
+        return this._scriptIdMap.get(id);
+    }
+
+    scriptsForURL(url)
+    {
+        return this._scriptContentIdentifierMap.get(url) || [];
+    }
+
+    // Protected (Called by DebuggerManager)
+
+    reset()
+    {
+        this._scriptIdMap.clear();
+    }
+
+    addScript(script)
+    {
+        this._scriptIdMap.set(script.id, script);
+
+        if (script.contentIdentifier) {
+            let scripts = this._scriptContentIdentifierMap.get(script.contentIdentifier);
+            if (!scripts) {
+                scripts = [];
+                this._scriptContentIdentifierMap.set(script.contentIdentifier, scripts);
+            }
+            scripts.push(script);
+        }
+    }
+
+    pauseIfNeeded()
+    {
+        if (this._paused || this._pausing)
+            return Promise.resolve();
+
+        this._pausing = true;
+
+        return this._target.DebuggerAgent.pause();
+    }
+
+    resumeIfNeeded()
+    {
+        if (!this._paused && !this._pausing)
+            return Promise.resolve();
+
+        this._pausing = false;
+
+        return this._target.DebuggerAgent.resume();
+    }
+
+    continueUntilNextRunLoop()
+    {
+        if (!this._paused || this._pausing)
+            return Promise.resolve();
+
+        // The backend will automatically start pausing
+        // after resuming, so we need to match that here.
+        this._makePausingAfterNextResume = true;
+
+        return this._target.DebuggerAgent.continueUntilNextRunLoop();
+    }
+
+    updateForPause(callFrames, pauseReason, pauseData, asyncStackTrace)
+    {
+        this._paused = true;
+        this._pausing = false;
+        this._pauseReason = pauseReason;
+        this._pauseData = pauseData;
+        this._callFrames = callFrames;
+        this._asyncStackTrace = asyncStackTrace;
+
+        // We paused, no need for auto-pausing.
+        this._makePausingAfterNextResume = false;
+    }
+
+    updateForResume()
+    {
+        this._paused = false;
+        this._pausing = false;
+        this._pauseReason = null;
+        this._pauseData = null;
+        this._callFrames = [];
+        this._asyncStackTrace = null;
+
+        // We resumed, but may be auto-pausing.
+        if (this._makePausingAfterNextResume) {
+            this._makePausingAfterNextResume = false;
+            this._pausing = true;
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/DefaultDashboard.js b/Source/WebInspectorUI/UserInterface/Models/DefaultDashboard.js
new file mode 100644
index 000000000..33b8d6d8a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DefaultDashboard.js
@@ -0,0 +1,269 @@
+/*
+ * 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.Target.addEventListener(WebInspector.Target.Event.ResourceAdded, 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..383fc8173
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ExecutionContext.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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(target, id, name, isPageContext, frame)
+    {
+        super();
+
+        console.assert(target instanceof WebInspector.Target);
+        console.assert(typeof id === "number" || id === WebInspector.RuntimeManager.TopLevelExecutionContextIdentifier);
+        console.assert(typeof name === "string");
+
+        this._target = target;
+        this._id = id;
+        this._name = name;
+        this._isPageContext = isPageContext || false;
+        this._frame = frame || null;
+    }
+
+    // Public
+
+    get target() { return this._target; }
+    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..d32333a54
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Frame.js
@@ -0,0 +1,509 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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._extraScriptCollection = new WebInspector.Collection(WebInspector.Collection.TypeVerifier.Script);
+
+        this._childFrameCollection = new WebInspector.Collection(WebInspector.Collection.TypeVerifier.Frame);
+        this._childFrameIdentifierMap = new Map;
+
+        this._parentFrame = null;
+        this._isMainFrame = false;
+
+        this._domContentReadyEventTimestamp = NaN;
+        this._loadEventTimestamp = NaN;
+
+        this._executionContextList = new WebInspector.ExecutionContextList;
+
+        this.initialize(name, securityOrigin, loaderIdentifier, mainResource);
+    }
+
+    // Public
+
+    get resourceCollection() { return this._resourceCollection; }
+    get extraScriptCollection() { return this._extraScriptCollection; }
+    get childFrameCollection() { return this._childFrameCollection; }
+
+    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.clear();
+
+        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._extraScriptCollection.clear();
+
+        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.clear();
+
+        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) {
+            let contexts = this._executionContextList.contexts.slice();
+            this._executionContextList.clear();
+            this.dispatchEventToListeners(WebInspector.Frame.Event.ExecutionContextsCleared, {committingProvisionalLoad: !!committingProvisionalLoad, contexts});
+        }
+    }
+
+    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 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.get(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._childFrameCollection.add(frame);
+        this._childFrameIdentifierMap.set(frame._id, frame);
+
+        frame._parentFrame = this;
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ChildFrameWasAdded, {childFrame: frame});
+    }
+
+    removeChildFrame(frameOrFrameId)
+    {
+        console.assert(frameOrFrameId);
+
+        let childFrameId = frameOrFrameId;
+        if (childFrameId instanceof WebInspector.Frame)
+            childFrameId = frameOrFrameId._id;
+
+        // 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 _childFrameCollection, but the id is a valid child frame.
+        let childFrame = this.childFrameForIdentifier(childFrameId);
+        console.assert(childFrame instanceof WebInspector.Frame);
+        if (!(childFrame instanceof WebInspector.Frame))
+            return;
+
+        console.assert(childFrame.parentFrame === this);
+
+        this._childFrameCollection.remove(childFrame);
+        this._childFrameIdentifierMap.delete(childFrame._id);
+
+        childFrame._detachFromParentFrame();
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ChildFrameWasRemoved, {childFrame});
+    }
+
+    removeAllChildFrames()
+    {
+        this._detachFromParentFrame();
+
+        for (let childFrame of this._childFrameCollection.items)
+            childFrame.removeAllChildFrames();
+
+        this._childFrameCollection.clear();
+        this._childFrameIdentifierMap.clear();
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.AllChildFramesRemoved);
+    }
+
+    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 (let childFrame of this._childFrameCollection.items) {
+            resource = childFrame.mainResource;
+            if (resource.url === url)
+                return resource;
+        }
+
+        if (!recursivelySearchChildFrames)
+            return null;
+
+        // Recursively search resources of child frames.
+        for (let childFrame of this._childFrameCollection.items) {
+            resource = childFrame.resourceForURL(url, true);
+            if (resource)
+                return resource;
+        }
+
+        return null;
+    }
+
+    resourceCollectionForType(type)
+    {
+        return this._resourceCollection.resourceCollectionForType(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.remove(resource);
+
+        this._associateWithResource(resource);
+
+        if (this._isProvisionalResource(resource)) {
+            this._provisionalResourceCollection.add(resource);
+            this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalResourceWasAdded, {resource});
+        } else {
+            this._resourceCollection.add(resource);
+            this.dispatchEventToListeners(WebInspector.Frame.Event.ResourceWasAdded, {resource});
+        }
+    }
+
+    removeResource(resource)
+    {
+        // This does not remove provisional resources.
+
+        this._resourceCollection.remove(resource);
+
+        this._disassociateWithResource(resource);
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ResourceWasRemoved, {resource});
+    }
+
+    removeAllResources()
+    {
+        // This does not remove provisional resources, use clearProvisionalLoad for that.
+
+        let resources = this._resourceCollection.items;
+        if (!resources.size)
+            return;
+
+        for (let resource of resources)
+            this._disassociateWithResource(resource);
+
+        this._resourceCollection.clear();
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.AllResourcesRemoved);
+    }
+
+    addExtraScript(script)
+    {
+        this._extraScriptCollection.add(script);
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ExtraScriptAdded, {script});
+    }
+
+    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",
+    ExtraScriptAdded: "frame-extra-script-added",
+    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..84a3f0b31
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/GarbageCollection.js
@@ -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.
+ */
+
+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..2fde0a558
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Geometry.js
@@ -0,0 +1,571 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 (Array.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]
+};
+
+WebInspector.Spring = class Spring
+{
+    constructor(mass, stiffness, damping, initialVelocity)
+    {
+        this.mass = Math.max(1, mass);
+        this.stiffness = Math.max(1, stiffness);
+        this.damping = Math.max(0, damping);
+        this.initialVelocity = initialVelocity;
+    }
+
+    // Static
+
+    static fromValues(values)
+    {
+        if (!values || values.length < 4)
+            return null;
+
+        values = values.map(Number);
+        if (values.includes(NaN))
+            return null;
+
+        return new WebInspector.Spring(...values);
+    }
+
+    static fromString(text)
+    {
+        if (!text || !text.length)
+            return null;
+
+        let trimmedText = text.toLowerCase().trim();
+        if (!trimmedText.length)
+            return null;
+
+        let matches = trimmedText.match(/^spring\(([\d.]+)\s+([\d.]+)\s+([\d.]+)\s+([-\d.]+)\)$/);
+        if (!matches)
+            return null;
+
+        return WebInspector.Spring.fromValues(matches.slice(1));
+    }
+
+    // Public
+
+    copy()
+    {
+        return new WebInspector.Spring(this.mass, this.stiffness, this.damping, this.initialVelocity);
+    }
+
+    toString()
+    {
+        return `spring(${this.mass} ${this.stiffness} ${this.damping} ${this.initialVelocity})`;
+    }
+
+    solve(t)
+    {
+        let w0 = Math.sqrt(this.stiffness / this.mass);
+        let zeta = this.damping / (2 * Math.sqrt(this.stiffness * this.mass));
+
+        let wd = 0;
+        let A = 1;
+        let B = -this.initialVelocity + w0;
+        if (zeta < 1) {
+            // Under-damped.
+            wd = w0 * Math.sqrt(1 - zeta * zeta);
+            A = 1;
+            B = (zeta * w0 + -this.initialVelocity) / wd;
+        }
+
+        if (zeta < 1) // Under-damped
+            t = Math.exp(-t * zeta * w0) * (A * Math.cos(wd * t) + B * Math.sin(wd * t));
+        else // Critically damped (ignoring over-damped case).
+            t = (A + B * t) * Math.exp(-t * w0);
+
+        return 1 - t; // Map range from [1..0] to [0..1].
+    }
+
+    calculateDuration(epsilon)
+    {
+        epsilon = epsilon || 0.0001;
+        let t = 0;
+        let current = 0;
+        let minimum = Number.POSITIVE_INFINITY;
+        while (current >= epsilon || minimum >= epsilon) {
+            current = Math.abs(1 - this.solve(t)); // Undo the range mapping
+            if (minimum < epsilon && current >= epsilon)
+                minimum = Number.POSITIVE_INFINITY; // Spring reversed direction
+            else if (current < minimum)
+                minimum = current;
+            t += 0.1;
+        }
+        return t;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Gradient.js b/Source/WebInspectorUI/UserInterface/Models/Gradient.js
new file mode 100644
index 000000000..f9b1c238c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Gradient.js
@@ -0,0 +1,392 @@
+/*
+ * 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++;
+        }
+
+        if (openParentheses !== -1)
+            return null;
+
+        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)
+    {
+        let angle = {value: 180, units: WebInspector.LinearGradient.AngleUnits.DEG};
+
+        if (components[0].length === 1 && !WebInspector.Color.fromString(components[0][0])) {
+            let match = components[0][0].match(/([-\d\.]+)(\w+)/);
+            if (!match || !Object.values(WebInspector.LinearGradient.AngleUnits).includes(match[2]))
+                return null;
+
+            angle.value = parseFloat(match[1]);
+            angle.units = match[2];
+
+            components.shift();
+        } else if (components[0][0] === "to") {
+            components[0].shift();
+            switch (components[0].sort().join(" ")) {
+            case "top":
+                angle.value = 0;
+                break;
+            case "right top":
+                angle.value = 45;
+                break;
+            case "right":
+                angle.value = 90;
+                break;
+            case "bottom right":
+                angle.value = 135;
+                break;
+            case "bottom":
+                angle.value = 180;
+                break;
+            case "bottom left":
+                angle.value = 225;
+                break;
+            case "left":
+                angle.value = 270;
+                break;
+            case "left top":
+                angle.value = 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
+
+    set angleValue(value) { this._angle.value = value; }
+
+    get angleValue()
+    {
+        return this._angle.value.maxDecimals(2);
+    }
+
+    set angleUnits(units)
+    {
+        if (units === this._angle.units)
+            return;
+
+        this._angle.value = this._angleValueForUnits(units);
+        this._angle.units = units;
+    }
+
+    get angleUnits() { return this._angle.units; }
+
+    copy()
+    {
+        return new WebInspector.LinearGradient(this._angle, this.stops.concat());
+    }
+
+    toString()
+    {
+        let str = "";
+
+        let deg = this._angleValueForUnits(WebInspector.LinearGradient.AngleUnits.DEG);
+        if (deg === 0)
+            str += "to top";
+        else if (deg === 45)
+            str += "to top right";
+        else if (deg === 90)
+            str += "to right";
+        else if (deg === 135)
+            str += "to bottom right";
+        else if (deg === 225)
+            str += "to bottom left";
+        else if (deg === 270)
+            str += "to left";
+        else if (deg === 315)
+            str += "to top left";
+        else if (deg !== 180)
+            str += this.angleValue + this.angleUnits;
+
+        if (str !== "")
+            str += ", ";
+
+        str += this.stringFromStops(this.stops);
+
+        return (this.repeats ? "repeating-" : "") + this.type + "(" + str + ")";
+    }
+
+    // Private
+
+    _angleValueForUnits(units)
+    {
+        if (units === this._angle.units)
+            return this._angle.value;
+
+        let deg = 0;
+
+        switch (this._angle.units) {
+        case WebInspector.LinearGradient.AngleUnits.DEG:
+            deg = this._angle.value;
+            break;
+
+        case WebInspector.LinearGradient.AngleUnits.RAD:
+            deg = this._angle.value * 180 / Math.PI;
+            break;
+
+        case WebInspector.LinearGradient.AngleUnits.GRAD:
+            deg = this._angle.value / 400 * 360;
+            break;
+
+        case WebInspector.LinearGradient.AngleUnits.TURN:
+            deg = this._angle.value * 360;
+            break;
+
+        default:
+            WebInspector.reportInternalError(`Unknown angle units "${this._angle.units}"`);
+            return 0;
+        }
+
+        let value = 0;
+
+        switch (units) {
+        case WebInspector.LinearGradient.AngleUnits.DEG:
+            value = deg;
+            break;
+
+        case WebInspector.LinearGradient.AngleUnits.RAD:
+            value = deg * Math.PI / 180;
+            break;
+
+        case WebInspector.LinearGradient.AngleUnits.GRAD:
+            value = deg / 360 * 400;
+            break;
+
+        case WebInspector.LinearGradient.AngleUnits.TURN:
+            value = deg / 360;
+            break;
+        }
+
+        return value;
+    }
+};
+
+WebInspector.LinearGradient.AngleUnits = {
+    DEG: "deg",
+    RAD: "rad",
+    GRAD: "grad",
+    TURN: "turn",
+};
+
+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/HeapAllocationsInstrument.js b/Source/WebInspectorUI/UserInterface/Models/HeapAllocationsInstrument.js
new file mode 100644
index 000000000..f35c18408
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/HeapAllocationsInstrument.js
@@ -0,0 +1,86 @@
+/*
+ * 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.HeapAllocationsInstrument = class HeapAllocationsInstrument extends WebInspector.Instrument
+{
+    constructor()
+    {
+        super();
+
+        console.assert(WebInspector.HeapAllocationsInstrument.supported());
+
+        this._snapshotIntervalIdentifier = undefined;
+    }
+
+    // Static
+
+    static supported()
+    {
+        // COMPATIBILITY (iOS 9): HeapAgent did not exist.
+        return window.HeapAgent;
+    }
+
+    // Protected
+
+    get timelineRecordType()
+    {
+        return WebInspector.TimelineRecord.Type.HeapAllocations;
+    }
+
+    startInstrumentation(initiatedByBackend)
+    {
+        // FIXME: Include a "track allocations" option for this instrument.
+        // FIXME: Include a periodic snapshot interval option for this instrument.
+
+        if (!initiatedByBackend)
+            HeapAgent.startTracking();
+
+        // Periodic snapshots.
+        const snapshotInterval = 10000;
+        this._snapshotIntervalIdentifier = setInterval(this._takeHeapSnapshot.bind(this), snapshotInterval);
+    }
+
+    stopInstrumentation(initiatedByBackend)
+    {
+        if (!initiatedByBackend)
+            HeapAgent.stopTracking();
+
+        window.clearInterval(this._snapshotIntervalIdentifier);
+        this._snapshotIntervalIdentifier = undefined;
+    }
+
+    // Private
+
+    _takeHeapSnapshot()
+    {
+        HeapAgent.snapshot(function(error, timestamp, snapshotStringData) {
+            let workerProxy = WebInspector.HeapSnapshotWorkerProxy.singleton();
+            workerProxy.createSnapshot(snapshotStringData, ({objectId, snapshot: serializedSnapshot}) => {
+                let snapshot = WebInspector.HeapSnapshotProxy.deserialize(objectId, serializedSnapshot);
+                WebInspector.timelineManager.heapSnapshotAdded(timestamp, snapshot);
+            });
+        });
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/HeapAllocationsTimelineRecord.js b/Source/WebInspectorUI/UserInterface/Models/HeapAllocationsTimelineRecord.js
new file mode 100644
index 000000000..853fe3ecd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/HeapAllocationsTimelineRecord.js
@@ -0,0 +1,43 @@
+/*
+ * 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.HeapAllocationsTimelineRecord = class HeapAllocationsTimelineRecord extends WebInspector.TimelineRecord
+{
+    constructor(timestamp, heapSnapshot)
+    {
+        super(WebInspector.TimelineRecord.Type.HeapAllocations, timestamp, timestamp);
+
+        console.assert(typeof timestamp === "number");
+        console.assert(heapSnapshot instanceof WebInspector.HeapSnapshotProxy);
+
+        this._timestamp = timestamp;
+        this._heapSnapshot = heapSnapshot;
+    }
+
+    // Public
+
+    get timestamp() { return this._timestamp; }
+    get heapSnapshot() { return this._heapSnapshot; }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/HeapSnapshotRootPath.js b/Source/WebInspectorUI/UserInterface/Models/HeapSnapshotRootPath.js
new file mode 100644
index 000000000..67bfa8ab3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/HeapSnapshotRootPath.js
@@ -0,0 +1,178 @@
+/*
+ * 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.HeapSnapshotRootPath = class HeapSnapshotRootPath extends WebInspector.Object
+{
+    constructor(node, pathComponent, parent, isGlobalScope)
+    {
+        super();
+
+        console.assert(!node || node instanceof WebInspector.HeapSnapshotNodeProxy);
+        console.assert(!pathComponent || typeof pathComponent === "string");
+        console.assert(!parent || parent instanceof WebInspector.HeapSnapshotRootPath);
+
+        this._node = node || null;
+        this._parent = parent || null;
+        this._pathComponent = typeof pathComponent === "string" ? pathComponent : null;
+        this._isGlobalScope = isGlobalScope || false;
+
+        // Become the new root when appended to an empty path.
+        if (this._parent && this._parent.isEmpty())
+            this._parent = null;
+    }
+
+    // Static
+
+    static emptyPath()
+    {
+        return new WebInspector.HeapSnapshotRootPath(null);
+    }
+
+    static pathComponentForIndividualEdge(edge)
+    {
+        switch (edge.type) {
+        case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Internal:
+            return null;
+        case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Index:
+            return "[" + edge.data + "]";
+        case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Property:
+        case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Variable:
+            if (WebInspector.HeapSnapshotRootPath.canPropertyNameBeDotAccess(edge.data))
+                return edge.data;
+            return "[" + doubleQuotedString(edge.data) + "]";
+        }
+    }
+
+    static canPropertyNameBeDotAccess(propertyName)
+    {
+        return /^(?![0-9])\w+$/.test(propertyName);
+    }
+
+    // Public
+
+    get node() { return this._node; }
+    get parent() { return this._parent; }
+    get pathComponent() { return this._pathComponent; }
+
+    get rootNode()
+    {
+        return this._parent ? this._parent.rootNode : this._node;
+    }
+
+    get fullPath()
+    {
+        let components = [];
+        for (let p = this; p && p.pathComponent; p = p.parent)
+            components.push(p.pathComponent);
+        components.reverse();
+        return components.join("");
+    }
+
+    isRoot()
+    {
+        return !this._parent;
+    }
+
+    isEmpty()
+    {
+        return !this._node;
+    }
+
+    isGlobalScope()
+    {
+        return this._isGlobalScope;
+    }
+
+    isPathComponentImpossible()
+    {
+        return this._pathComponent && this._pathComponent.startsWith("@");
+    }
+
+    isFullPathImpossible()
+    {
+        if (this.isEmpty())
+            return true;
+
+        if (this.isPathComponentImpossible())
+            return true;
+
+        if (this._parent)
+            return this._parent.isFullPathImpossible();
+
+        return false;
+    }
+
+    appendInternal(node)
+    {
+        return new WebInspector.HeapSnapshotRootPath(node, WebInspector.HeapSnapshotRootPath.SpecialPathComponent.InternalPropertyName, this);
+    }
+
+    appendArrayIndex(node, index)
+    {
+        let component = "[" + index + "]";
+        return new WebInspector.HeapSnapshotRootPath(node, component, this);
+    }
+
+    appendPropertyName(node, propertyName)
+    {
+        let component = WebInspector.HeapSnapshotRootPath.canPropertyNameBeDotAccess(propertyName) ? "." + propertyName : "[" + doubleQuotedString(propertyName) + "]";
+        return new WebInspector.HeapSnapshotRootPath(node, component, this);
+    }
+
+    appendVariableName(node, variableName)
+    {
+        // Treat as a property of the global object, e.g. "window.foo".
+        if (this._isGlobalScope)
+            return this.appendPropertyName(node, variableName);
+        return new WebInspector.HeapSnapshotRootPath(node, variableName, this);
+    }
+
+    appendGlobalScopeName(node, globalScopeName)
+    {
+        return new WebInspector.HeapSnapshotRootPath(node, globalScopeName, this, true);
+    }
+
+    appendEdge(edge)
+    {
+        console.assert(edge instanceof WebInspector.HeapSnapshotEdgeProxy);
+
+        switch (edge.type) {
+        case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Internal:
+            return this.appendInternal(edge.to);
+        case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Index:
+            return this.appendArrayIndex(edge.to, edge.data);
+        case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Property:
+            return this.appendPropertyName(edge.to, edge.data);
+        case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Variable:
+            return this.appendVariableName(edge.to, edge.data);
+        }
+
+        console.error("Unexpected edge type", edge.type);
+    }
+};
+
+WebInspector.HeapSnapshotRootPath.SpecialPathComponent = {
+    InternalPropertyName: "@internal",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/IndexedDatabase.js b/Source/WebInspectorUI/UserInterface/Models/IndexedDatabase.js
new file mode 100644
index 000000000..f8ac1b54c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/IndexedDatabase.js
@@ -0,0 +1,59 @@
+/*
+ * 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..91b45b122
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/IndexedDatabaseObjectStore.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.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..bdfa572ff
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/IndexedDatabaseObjectStoreIndex.js
@@ -0,0 +1,63 @@
+/*
+ * 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..7659a0bd2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Instrument.js
@@ -0,0 +1,104 @@
+/*
+ * 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 createForTimelineType(type)
+    {
+        switch (type) {
+        case WebInspector.TimelineRecord.Type.Network:
+            return new WebInspector.NetworkInstrument;
+        case WebInspector.TimelineRecord.Type.Layout:
+            return new WebInspector.LayoutInstrument;
+        case WebInspector.TimelineRecord.Type.Script:
+            return new WebInspector.ScriptInstrument;
+        case WebInspector.TimelineRecord.Type.RenderingFrame:
+            return new WebInspector.FPSInstrument;
+        case WebInspector.TimelineRecord.Type.Memory:
+            return new WebInspector.MemoryInstrument;
+        case WebInspector.TimelineRecord.Type.HeapAllocations:
+            return new WebInspector.HeapAllocationsInstrument;
+        default:
+            console.error("Unknown TimelineRecord.Type: " + type);
+            return null;
+        }
+    }
+
+    static startLegacyTimelineAgent(initiatedByBackend)
+    {
+        console.assert(window.TimelineAgent, "Attempted to start legacy timeline agent without TimelineAgent.");
+
+        if (WebInspector.Instrument._legacyTimelineAgentStarted)
+            return;
+
+        WebInspector.Instrument._legacyTimelineAgentStarted = true;
+
+        if (initiatedByBackend)
+            return;
+
+        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(initiatedByBackend)
+    {
+        if (!WebInspector.Instrument._legacyTimelineAgentStarted)
+            return;
+
+        WebInspector.Instrument._legacyTimelineAgentStarted = false;
+
+        if (initiatedByBackend)
+            return;
+
+        TimelineAgent.stop();
+    }
+
+    // Protected
+
+    get timelineRecordType()
+    {
+        return null; // Implemented by subclasses.
+    }
+
+    startInstrumentation(initiatedByBackend)
+    {
+        WebInspector.Instrument.startLegacyTimelineAgent(initiatedByBackend);
+    }
+
+    stopInstrumentation(initiatedByBackend)
+    {
+        WebInspector.Instrument.stopLegacyTimelineAgent(initiatedByBackend);
+    }
+};
+
+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..43acd7324
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/IssueMessage.js
@@ -0,0 +1,235 @@
+/*
+ * 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.IssueMessage = class IssueMessage extends WebInspector.Object
+{
+    constructor(consoleMessage)
+    {
+        super();
+
+        console.assert(consoleMessage instanceof WebInspector.ConsoleMessage);
+
+        this._consoleMessage = consoleMessage;
+
+        this._text = this._issueText();
+
+        switch (this._consoleMessage.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:", this._consoleMessage.source);
+            this._type = WebInspector.IssueMessage.Type.OtherIssue;
+        }
+
+        this._sourceCodeLocation = consoleMessage.sourceCodeLocation;
+        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 text() { return this._text; }
+    get type() { return this._type; }
+    get level() { return this._consoleMessage.level; }
+    get source() { return this._consoleMessage.source; }
+    get url() { return this._consoleMessage.url; }
+    get sourceCodeLocation() { return this._sourceCodeLocation; }
+
+    // Protected
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.IssueMessage.URLCookieKey] = this.url;
+        cookie[WebInspector.IssueMessage.LineNumberCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.lineNumber : 0;
+        cookie[WebInspector.IssueMessage.ColumnNumberCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.columnNumber : 0;
+    }
+
+    // Private
+
+    _issueText()
+    {
+        let parameters = this._consoleMessage.parameters;
+        if (!parameters)
+            return this._consoleMessage.messageText;
+
+        if (WebInspector.RemoteObject.type(parameters[0]) !== "string")
+            return this._consoleMessage.messageText;
+
+        function valueFormatter(obj)
+        {
+            return obj.description;
+        }
+
+        let formatters = {};
+        formatters.o = valueFormatter;
+        formatters.s = valueFormatter;
+        formatters.f = valueFormatter;
+        formatters.i = valueFormatter;
+        formatters.d = valueFormatter;
+
+        function append(a, b)
+        {
+            a += b;
+            return a;
+        }
+
+        let result = String.format(parameters[0].description, parameters.slice(1), formatters, "", append);
+        let resultText = result.formattedResult;
+
+        for (let i = 0; i < result.unusedSubstitutions.length; ++i)
+            resultText += " " + result.unusedSubstitutions[i].description;
+
+        return 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..79376c548
--- /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..cbe254394
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/MemoryInstrument.js
@@ -0,0 +1,61 @@
+/*
+ * 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(initiatedByBackend)
+    {
+        if (!initiatedByBackend)
+            MemoryAgent.startTracking();
+    }
+
+    stopInstrumentation(initiatedByBackend)
+    {
+        if (!initiatedByBackend)
+            MemoryAgent.stopTracking();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/MemoryPressureEvent.js b/Source/WebInspectorUI/UserInterface/Models/MemoryPressureEvent.js
new file mode 100644
index 000000000..33aeb8dac
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/MemoryPressureEvent.js
@@ -0,0 +1,66 @@
+/*
+ * 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.MemoryPressureEvent = class MemoryPressureEvent extends WebInspector.Object
+{
+    constructor(timestamp, severity)
+    {
+        super();
+
+        this._timestamp = timestamp;
+        this._severity = severity;
+    }
+
+    // Static
+
+    static fromPayload(timestamp, protocolSeverity)
+    {
+        let severity;
+        switch (protocolSeverity) {
+        case MemoryAgent.MemoryPressureSeverity.Critical:
+            severity = WebInspector.MemoryPressureEvent.Severity.Critical;
+            break;
+        case MemoryAgent.MemoryPressureSeverity.NonCritical:
+            severity = WebInspector.MemoryPressureEvent.Severity.NonCritical;
+            break;
+        default:
+            console.error("Unexpected memory pressure severity", protocolSeverity);
+            severity = WebInspector.MemoryPressureEvent.Severity.NonCritical;
+            break;
+        }
+
+        return new WebInspector.MemoryPressureEvent(timestamp, severity);
+    }
+
+    // Public
+
+    get timestamp() { return this._timestamp; }
+    get severity() { return this._severity; }
+};
+
+WebInspector.MemoryPressureEvent.Severity = {
+    Critical: Symbol("Critical"),
+    NonCritical: Symbol("NonCritical"),
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/MemoryTimeline.js b/Source/WebInspectorUI/UserInterface/Models/MemoryTimeline.js
new file mode 100644
index 000000000..8a791bab7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/MemoryTimeline.js
@@ -0,0 +1,53 @@
+/*
+ * 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.MemoryTimeline = class MemoryTimeline extends WebInspector.Timeline
+{
+    // Public
+
+    get memoryPressureEvents() { return this._pressureEvents; }
+
+    addMemoryPressureEvent(memoryPressureEvent)
+    {
+        console.assert(memoryPressureEvent instanceof WebInspector.MemoryPressureEvent);
+
+        this._pressureEvents.push(memoryPressureEvent);
+
+        this.dispatchEventToListeners(WebInspector.MemoryTimeline.Event.MemoryPressureEventAdded, {memoryPressureEvent});
+    }
+
+    // Protected
+
+    reset(suppressEvents)
+    {
+        super.reset(suppressEvents);
+
+        this._pressureEvents = [];
+    }
+};
+
+WebInspector.MemoryTimeline.Event = {
+    MemoryPressureEventAdded: "memory-timeline-memory-pressure-event-added",
+};
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..0633a209e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/NativeFunctionParameters.js
@@ -0,0 +1,2232 @@
+/*
+ * 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,
+    },
+
+    Reflect: {
+        apply: "target, thisArgument, argumentsList",
+        construct: "target, argumentsList, [newTarget=target]",
+        defineProperty: "target, propertyKey, attributes",
+        deleteProperty: "target, propertyKey",
+        enumerate: "target",
+        get: "target, propertyKey, [receiver]",
+        getOwnPropertyDescriptor: "target, propertyKey",
+        getPrototypeOf: "target",
+        has: "target, propertyKey",
+        isExtensible: "target",
+        ownKeys: "target",
+        preventExtensions: "target",
+        set: "target, propertyKey, value, [receiver]",
+        setPrototypeOf: "target, prototype",
+        __proto__: null,
+    },
+
+    String: {
+        fromCharCode: "...codeUnits",
+        fromCodePoint: "...codePoints",
+        raw: "template, ...substitutions",
+        __proto__: null,
+    },
+
+    Symbol: {
+        for: "key",
+        keyFor: "symbol",
+        __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]",
+        takeHeapSnapshot: "[label]",
+        time: "name = \"default\"",
+        timeEnd: "name = \"default\"",
+        timeStamp: "[label]",
+        trace: "message, [...values]",
+        warn: "message, [...values]",
+        __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,
+    },
+
+    // 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,
+    },
+
+    CustomElementRegistry: {
+        define: "name, constructor",
+        get: "name",
+        whenDefined: "name",
+        __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,
+    },
+
+    FontFaceSet: {
+        add: "font",
+        check: "font, [text=\" \"]",
+        delete: "font",
+        load: "font, [text=\" \"]",
+        __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",
+        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,
+    },
+
+    HTMLSlotElement: {
+        assignedNodes: "[options]",
+        __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: {
+        getUserMedia: "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,
+    },
+
+    Performance: {
+        clearMarks: "[name]",
+        clearMeasures: "name",
+        getEntriesByName: "name, [type]",
+        getEntriesByType: "type",
+        mark: "name",
+        measure: "name, [startMark], [endMark]",
+        __proto__: null,
+    },
+
+    PerformanceObserver: {
+        observe: "options",
+        __proto__: null,
+    },
+
+    PerformanceObserverEntryList: {
+        getEntriesByName: "name, [type]",
+        getEntriesByType: "type",
+        __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,
+    },
+
+    EventTarget: {
+        addEventListener: "type, listener, [useCapture=false]",
+        removeEventListener: "type, listener, [useCapture=false]",
+        dispatchEvent: "event",
+        __proto__: null,
+    },
+};
+
+(function() {
+    // COMPATIBILITY (iOS 9): EventTarget properties were on instances, now there
+    // is an actual EventTarget prototype in the chain.
+    var EventTarget = WebInspector.NativePrototypeFunctionParameters.EventTarget;
+    var eventTargetTypes = [
+        "Node", "Window",
+        "AudioNode", "AudioTrackList", "DOMApplicationCache", "FileReader",
+        "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);
+
+    // COMPATIBILITY (iOS 9): window.console used to be a Console object instance,
+    // now it is just a namespace object on the global object.
+    WebInspector.NativePrototypeFunctionParameters.Console = WebInspector.NativeConstructorFunctionParameters.Console;
+
+})();
diff --git a/Source/WebInspectorUI/UserInterface/Models/NetworkInstrument.js b/Source/WebInspectorUI/UserInterface/Models/NetworkInstrument.js
new file mode 100644
index 000000000..ad8f990f8
--- /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(initiatedByBackend)
+    {
+        // Nothing to do, network instrumentation is always happening.
+    }
+
+    stopInstrumentation(initiatedByBackend)
+    {
+        // 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..f8d0d8328
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ObjectPreview.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.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..a6ee37af5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Probe.js
@@ -0,0 +1,108 @@
+/*
+ * 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, object)
+    {
+        super();
+
+        console.assert(object instanceof WebInspector.RemoteObject);
+
+        this.sampleId = sampleId;
+        this.batchId = batchId;
+        this.timestamp = elapsedTime;
+        this.object = object;
+    }
+};
+
+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..bf7f4be46
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ProbeSet.js
@@ -0,0 +1,148 @@
+/*
+ * 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..e6e952245
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ProfileNode.js
@@ -0,0 +1,278 @@
+/*
+ * 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((call) => call instanceof WebInspector.ProfileNodeCall));
+        console.assert(childNodes instanceof Array);
+        console.assert(childNodes.every((node) => 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;
+                // selfTime can negative or very close to zero due to floating point error.
+                // Since we show at most four decimal places, treat anything less as zero.
+                if (this._selfTime < 0.0001)
+                    this._selfTime = 0.0;
+            }
+
+            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..28de2d3f2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/PropertyDescriptor.js
@@ -0,0 +1,119 @@
+/*
+ * 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, target)
+    {
+        if (payload.value)
+            payload.value = WebInspector.RemoteObject.fromPayload(payload.value, target);
+        if (payload.get)
+            payload.get = WebInspector.RemoteObject.fromPayload(payload.get, target);
+        if (payload.set)
+            payload.set = WebInspector.RemoteObject.fromPayload(payload.set, target);
+
+        if (payload.symbol)
+            payload.symbol = WebInspector.RemoteObject.fromPayload(payload.symbol, target);
+
+        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..a2d9c72fe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/PropertyPath.js
@@ -0,0 +1,268 @@
+/*
+ * 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 pathComponent() { return this._pathComponent; }
+
+    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 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..8ff4dfcb6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/PropertyPreview.js
@@ -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.
+ */
+
+WebInspector.PropertyPreview = class PropertyPreview extends WebInspector.Object
+{
+    constructor(name, type, subtype, value, valuePreview, isInternalProperty)
+    {
+        super();
+
+        console.assert(typeof name === "string");
+        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..d6b502fe0
--- /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((previousValue, key) => {
+            let taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
+            if (taskType === WebInspector.RenderingFrameTimelineRecord.TaskType.Other)
+                return previousValue;
+            return previousValue - this.durationForTask(taskType);
+        }, 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..29e5a7d6a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Resource.js
@@ -0,0 +1,804 @@
+/*
+ * Copyright (C) 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. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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, targetId, 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;
+        this._timingData = new WebInspector.ResourceTimingData(this);
+        this._target = targetId ? WebInspector.targetManager.targetForIdentifier(targetId) : WebInspector.mainTarget;
+
+        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.Fetch:
+            if (plural)
+                return WebInspector.UIString("Fetches");
+            return WebInspector.UIString("Fetch");
+        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 target() { return this._target; }
+    get type() { return this._type; }
+    get timingData() { return this._timingData; }
+
+    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 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.timingData.startTime || this.lastRedirectReceivedTimestamp || this.responseReceivedTimestamp || this.lastDataReceivedTimestamp || this.finishedOrFailedTimestamp;
+    }
+
+    get lastTimestamp()
+    {
+        return this.timingData.responseEnd || this.lastDataReceivedTimestamp || this.responseReceivedTimestamp || this.lastRedirectReceivedTimestamp || this.requestSentTimestamp;
+    }
+
+    get duration()
+    {
+        return this.timingData.responseEnd - this.timingData.requestStart;
+    }
+
+    get latency()
+    {
+        return this.timingData.responseStart - this.timingData.requestStart;
+    }
+
+    get receiveDuration()
+    {
+        return this.timingData.responseEnd - this.timingData.responseStart;
+    }
+
+    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, timingData)
+    {
+        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._timingData = WebInspector.ResourceTimingData.fromPayload(timingData, this);
+
+        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;
+        this._timingData.markResponseEndTime(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((resolve, reject) => {
+                this.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, resolve);
+                this.addEventListener(WebInspector.Resource.Event.LoadingDidFail, reject);
+            }).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 || this._type === WebInspector.Resource.Type.XHR) {
+            let 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();
+    }
+
+    generateCURLCommand()
+    {
+        function escapeStringPosix(str) {
+            function escapeCharacter(x) {
+                let code = x.charCodeAt(0);
+                let hex = code.toString(16);
+                if (code < 256)
+                    return "\\x" + hex.padStart(2, "0");
+                return "\\u" + hex.padStart(4, "0");
+            }
+
+            if (/[^\x20-\x7E]|'/.test(str)) {
+                // Use ANSI-C quoting syntax.
+                return "$'" + str.replace(/\\/g, "\\\\")
+                                 .replace(/'/g, "\\'")
+                                 .replace(/\n/g, "\\n")
+                                 .replace(/\r/g, "\\r")
+                                 .replace(/[^\x20-\x7E]/g, escapeCharacter) + "'";
+            } else {
+                // Use single quote syntax.
+                return `'${str}'`;
+            }
+        }
+
+        let command = ["curl " + escapeStringPosix(this.url).replace(/[[{}\]]/g, "\\$&")];
+        command.push(`-X${this.requestMethod}`);
+
+        for (let key in this.requestHeaders)
+            command.push("-H " + escapeStringPosix(`${key}: ${this.requestHeaders[key]}`));
+
+        if (this.requestDataContentType && this.requestMethod !== "GET" && this.requestData) {
+            if (this.requestDataContentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i))
+                command.push("--data " + escapeStringPosix(this.requestData));
+            else
+                command.push("--data-binary " + escapeStringPosix(this.requestData));
+        }
+
+        let curlCommand = command.join(" \\\n");
+        InspectorFrontendHost.copyText(curlCommand);
+        return curlCommand;
+    }
+};
+
+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",
+    Fetch: "resource-type-fetch",
+    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..bd38ad2f5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ResourceCollection.js
@@ -0,0 +1,199 @@
+/*
+ * Copyright (C) 2013 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.ResourceCollection = class ResourceCollection extends WebInspector.Collection
+{
+    constructor(resourceType)
+    {
+        super(WebInspector.ResourceCollection.verifierForType(resourceType));
+
+        this._resourceType = resourceType || null;
+        this._resourceURLMap = new Map;
+        this._resourcesTypeMap = new Map;
+    }
+
+    // Static
+
+    static verifierForType(type) {
+        switch (type) {
+        case WebInspector.Resource.Type.Document:
+            return WebInspector.ResourceCollection.TypeVerifier.Document;
+        case WebInspector.Resource.Type.Stylesheet:
+            return WebInspector.ResourceCollection.TypeVerifier.Stylesheet;
+        case WebInspector.Resource.Type.Image:
+            return WebInspector.ResourceCollection.TypeVerifier.Image;
+        case WebInspector.Resource.Type.Font:
+            return WebInspector.ResourceCollection.TypeVerifier.Font;
+        case WebInspector.Resource.Type.Script:
+            return WebInspector.ResourceCollection.TypeVerifier.Script;
+        case WebInspector.Resource.Type.XHR:
+            return WebInspector.ResourceCollection.TypeVerifier.XHR;
+        case WebInspector.Resource.Type.Fetch:
+            return WebInspector.ResourceCollection.TypeVerifier.Fetch;
+        case WebInspector.Resource.Type.WebSocket:
+            return WebInspector.ResourceCollection.TypeVerifier.WebSocket;
+        case WebInspector.Resource.Type.Other:
+            return WebInspector.ResourceCollection.TypeVerifier.Other;
+        default:
+            return WebInspector.Collection.TypeVerifier.Resource;
+        }
+    }
+
+    // Public
+
+    resourceForURL(url)
+    {
+        return this._resourceURLMap.get(url) || null;
+    }
+
+    resourceCollectionForType(type)
+    {
+        if (this._resourceType) {
+            console.assert(type === this._resourceType);
+            return this;
+        }
+
+        let resourcesCollectionForType = this._resourcesTypeMap.get(type);
+        if (!resourcesCollectionForType) {
+            resourcesCollectionForType = new WebInspector.ResourceCollection(type);
+            this._resourcesTypeMap.set(type, resourcesCollectionForType);
+        }
+
+        return resourcesCollectionForType;
+    }
+
+    clear()
+    {
+        super.clear();
+
+        this._resourceURLMap.clear();
+
+        if (!this._resourceType)
+            this._resourcesTypeMap.clear();
+    }
+
+    // Protected
+
+    itemAdded(item)
+    {
+        this._associateWithResource(item);
+    }
+
+    itemRemoved(item)
+    {
+        this._disassociateWithResource(item);
+    }
+
+    itemsCleared(items)
+    {
+        const skipRemoval = true;
+
+        for (let item of items)
+            this._disassociateWithResource(item, skipRemoval);
+    }
+
+    // Private
+
+    _associateWithResource(resource)
+    {
+        this._resourceURLMap.set(resource.url, resource);
+
+        if (!this._resourceType) {
+            let resourcesCollectionForType = this.resourceCollectionForType(resource.type);
+            resourcesCollectionForType.add(resource);
+        }
+
+        resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._resourceURLDidChange, this);
+        resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+    }
+
+    _disassociateWithResource(resource, skipRemoval)
+    {
+        resource.removeEventListener(WebInspector.Resource.Event.URLDidChange, this._resourceURLDidChange, this);
+        resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+
+        if (skipRemoval)
+            return;
+
+        if (!this._resourceType) {
+            let resourcesCollectionForType = this.resourceCollectionForType(resource.type);
+            resourcesCollectionForType.remove(resource);
+        }
+
+        this._resourceURLMap.delete(resource.url);
+    }
+
+    _resourceURLDidChange(event)
+    {
+        let resource = event.target;
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        let oldURL = event.data.oldURL;
+        console.assert(oldURL);
+        if (!oldURL)
+            return;
+
+        this._resourceURLMap.set(resource.url, resource);
+        this._resourceURLMap.delete(oldURL);
+    }
+
+    _resourceTypeDidChange(event)
+    {
+        let resource = event.target;
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        if (this._resourceType) {
+            console.assert(resource.type !== this._resourceType);
+            this.remove(resource);
+            return;
+        }
+
+        console.assert(event.data.oldType);
+
+        let resourcesWithNewType = this.resourceCollectionForType(resource.type);
+        resourcesWithNewType.add(resource);
+
+        // It is not necessary to remove the resource from the sub-collection for the old type since
+        // this is handled by that sub-collection's own _resourceTypeDidChange handler (via the
+        // above if statement).
+    }
+};
+
+WebInspector.ResourceCollection.TypeVerifier = {
+    Document: (object) => WebInspector.Collection.TypeVerifier.Resource(object) && object.type === WebInspector.Resource.Type.Document,
+    Stylesheet: (object) => WebInspector.Collection.TypeVerifier.Resource(object) && object.type === WebInspector.Resource.Type.Stylesheet,
+    Image: (object) => WebInspector.Collection.TypeVerifier.Resource(object) && object.type === WebInspector.Resource.Type.Image,
+    Font: (object) => WebInspector.Collection.TypeVerifier.Resource(object) && object.type === WebInspector.Resource.Type.Font,
+    Script: (object) => WebInspector.Collection.TypeVerifier.Resource(object) && object.type === WebInspector.Resource.Type.Script,
+    XHR: (object) => WebInspector.Collection.TypeVerifier.Resource(object) && object.type === WebInspector.Resource.Type.XHR,
+    Fetch: (object) => WebInspector.Collection.TypeVerifier.Resource(object) && object.type === WebInspector.Resource.Type.Fetch,
+    WebSocket: (object) => WebInspector.Collection.TypeVerifier.Resource(object) && object.type === WebInspector.Resource.Type.WebSocket,
+    Other: (object) => WebInspector.Collection.TypeVerifier.Resource(object) && object.type === WebInspector.Resource.Type.Other,
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ResourceQueryMatch.js b/Source/WebInspectorUI/UserInterface/Models/ResourceQueryMatch.js
new file mode 100644
index 000000000..0668525bc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ResourceQueryMatch.js
@@ -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.
+ */
+
+WebInspector.ResourceQueryMatch = class QueryMatch extends WebInspector.Object
+{
+    constructor(type, index, queryIndex)
+    {
+        super();
+
+        this._type = type;
+        this._index = index;
+        this._queryIndex = queryIndex;
+        this._rank = undefined;
+    }
+
+    // Public
+
+    get type() { return this._type; }
+    get index() { return this._index; }
+    get queryIndex() { return this._queryIndex; }
+};
+
+WebInspector.ResourceQueryMatch.Type = {
+    Normal: Symbol("normal"),
+    Special: Symbol("special")
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ResourceQueryResult.js b/Source/WebInspectorUI/UserInterface/Models/ResourceQueryResult.js
new file mode 100644
index 000000000..c2bf09d37
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ResourceQueryResult.js
@@ -0,0 +1,149 @@
+/*
+ * 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.ResourceQueryResult = class QueryResult extends WebInspector.Object
+{
+    constructor(resource, matches, cookie)
+    {
+        console.assert(matches.length, "Query matches list can't be empty.");
+
+        super();
+
+        this._resource = resource;
+        this._matches = matches;
+        this._cookie = cookie || null;
+    }
+
+    // Public
+
+    get resource() { return this._resource; }
+    get cookie() { return this._cookie; }
+
+    get rank()
+    {
+        if (this._rank === undefined)
+            this._calculateRank();
+
+        return this._rank;
+    }
+
+    get matchingTextRanges()
+    {
+        if (!this._matchingTextRanges)
+            this._matchingTextRanges = this._createMatchingTextRanges();
+
+        return this._matchingTextRanges;
+    }
+
+    // Private
+
+    _calculateRank()
+    {
+        const normalWeight = 10;
+        const consecutiveWeight = 5;
+        const specialMultiplier = 5;
+
+        function getMultiplier(match) {
+            if (match.type === WebInspector.ResourceQueryMatch.Type.Special)
+                return specialMultiplier;
+
+            return 1;
+        }
+
+        this._rank = 0;
+
+        let previousMatch = null;
+        let consecutiveMatchStart = null;
+        for (let match of this._matches) {
+            this._rank += normalWeight * getMultiplier(match);
+
+            let consecutive = previousMatch && previousMatch.index === match.index - 1;
+            if (consecutive) {
+                if (!consecutiveMatchStart)
+                    consecutiveMatchStart = previousMatch;
+
+                // If the first match in this consecutive series was a special character, give a
+                // bonus (more likely to match a specific word in the text).  Otherwise, multiply
+                // by the current length of the consecutive sequence (gives priority to fewer
+                // longer sequences instead of more short sequences).
+                this._rank += consecutiveWeight * getMultiplier(consecutiveMatchStart) * (match.index - consecutiveMatchStart.index);
+            } else if (consecutiveMatchStart)
+                consecutiveMatchStart = null;
+
+            previousMatch = match;
+
+            // The match index is deducted from the total rank, so matches that occur closer to
+            // the beginning of the string are ranked higher.  Increase the amount subtracted if
+            // the match is special, so as to favor matches towards the beginning of the string.
+            if (!consecutive)
+                this._rank -= match.index * getMultiplier(match);
+        }
+    }
+
+    _createMatchingTextRanges()
+    {
+        if (!this._matches.length)
+            return [];
+
+        let ranges = [];
+        let startIndex = this._matches[0].index;
+        let endIndex = startIndex;
+        for (let i = 1; i < this._matches.length; ++i) {
+            let match = this._matches[i];
+
+            // Increment endIndex for consecutive match.
+            if (match.index === endIndex + 1) {
+                endIndex++;
+                continue;
+            }
+
+            // Begin a new range when a gap between this match and the previous match is found.
+            ranges.push(new WebInspector.TextRange(0, startIndex, 0, endIndex + 1));
+            startIndex = match.index;
+            endIndex = startIndex;
+        }
+
+        ranges.push(new WebInspector.TextRange(0, startIndex, 0, endIndex + 1));
+        return ranges;
+    }
+
+    // Testing
+
+    __test_createMatchesMask()
+    {
+        let filename = this._resource.displayName;
+        let lastIndex = -1;
+        let result = "";
+
+        for (let match of this._matches) {
+            let gap = " ".repeat(match.index - lastIndex - 1);
+            result += gap;
+            result += filename[match.index];
+            lastIndex = match.index;
+        }
+
+        return result;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ResourceTimelineRecord.js b/Source/WebInspectorUI/UserInterface/Models/ResourceTimelineRecord.js
new file mode 100644
index 000000000..03a090971
--- /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.timingData.startTime;
+    }
+
+    get activeStartTime()
+    {
+        return this._resource.timingData.responseStart;
+    }
+
+    get endTime()
+    {
+        return this._resource.timingData.responseEnd;
+    }
+
+    // Private
+
+    _dispatchUpdatedEvent()
+    {
+        this.dispatchEventToListeners(WebInspector.TimelineRecord.Event.Updated);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ResourceTimingData.js b/Source/WebInspectorUI/UserInterface/Models/ResourceTimingData.js
new file mode 100644
index 000000000..2affdf73a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ResourceTimingData.js
@@ -0,0 +1,107 @@
+/*
+ * 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.ResourceTimingData = class ResourceTimingData extends WebInspector.Object
+{
+    constructor(resource, data)
+    {
+        super();
+
+        data = data || {};
+
+        console.assert(isNaN(data.domainLookupStart) === isNaN(data.domainLookupEnd));
+        console.assert(isNaN(data.connectStart) === isNaN(data.connectEnd));
+
+        this._resource = resource;
+
+        this._startTime = data.startTime || NaN;
+        this._domainLookupStart = data.domainLookupStart || NaN;
+        this._domainLookupEnd = data.domainLookupEnd || NaN;
+        this._connectStart = data.connectStart || NaN;
+        this._connectEnd = data.connectEnd || NaN;
+        this._secureConnectionStart = data.secureConnectionStart || NaN;
+        this._requestStart = data.requestStart || NaN;
+        this._responseStart = data.responseStart || NaN;
+        this._responseEnd = data.responseEnd || NaN;
+
+        if (this._domainLookupStart >= this._domainLookupEnd)
+            this._domainLookupStart = this._domainLookupEnd = NaN;
+
+        if (this._connectStart >= this._connectEnd)
+            this._connectStart = this._connectEnd = NaN;
+    }
+
+    // Static
+
+    static fromPayload(payload, resource)
+    {
+        payload = payload || {};
+
+        // COMPATIBILITY (iOS 10): Resource Timing data was incomplete and incorrect. Do not use it.
+        // iOS 7 sent a requestTime and iOS 8-9.3 sent a navigationStart time.
+        if (typeof payload.requestTime === "number" || typeof payload.navigationStart === "number")
+            payload = {};
+
+        function offsetToTimestamp(offset) {
+            return offset > 0 ? payload.startTime + offset / 1000 : NaN;
+        }
+
+        let data = {
+            startTime: payload.startTime,
+            domainLookupStart: offsetToTimestamp(payload.domainLookupStart),
+            domainLookupEnd: offsetToTimestamp(payload.domainLookupEnd),
+            connectStart: offsetToTimestamp(payload.connectStart),
+            connectEnd: offsetToTimestamp(payload.connectEnd),
+            secureConnectionStart: offsetToTimestamp(payload.secureConnectionStart),
+            requestStart: offsetToTimestamp(payload.requestStart),
+            responseStart: offsetToTimestamp(payload.responseStart),
+            responseEnd: offsetToTimestamp(payload.responseEnd)
+        };
+
+        // COMPATIBILITY (iOS 8): connectStart is zero if a secure connection is used.
+        if (isNaN(data.connectStart) && !isNaN(data.secureConnectionStart))
+            data.connectStart = data.secureConnectionStart;
+
+        return new WebInspector.ResourceTimingData(resource, data);
+    }
+
+    // Public
+
+    get startTime() { return this._startTime || this._resource.requestSentTimestamp; }
+    get domainLookupStart() { return this._domainLookupStart; }
+    get domainLookupEnd() { return this._domainLookupEnd; }
+    get connectStart() { return this._connectStart; }
+    get connectEnd() { return this._connectEnd; }
+    get secureConnectionStart() { return this._secureConnectionStart; }
+    get requestStart() { return this._requestStart || this._resource.requestSentTimestamp; }
+    get responseStart() { return this._responseStart || this._resource.responseReceivedTimestamp; }
+    get responseEnd() { return this._responseEnd || this._resource.finishedOrFailedTimestamp; }
+
+    markResponseEndTime(responseEnd)
+    {
+        console.assert(typeof responseEnd === "number");
+        this._responseEnd = responseEnd;
+    }
+};
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..8e3811e80
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ScopeChainNode.js
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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, name, location, empty)
+    {
+        super();
+
+        console.assert(typeof type === "string");
+        console.assert(objects.every((x) => x instanceof WebInspector.RemoteObject));
+
+        if (type in WebInspector.ScopeChainNode.Type)
+            type = WebInspector.ScopeChainNode.Type[type];
+
+        this._type = type || null;
+        this._objects = objects || [];
+        this._name = name || "";
+        this._location = location || null;
+        this._empty = empty || false;
+    }
+
+    // Public
+
+    get type() { return this._type; }
+    get objects() { return this._objects; }
+    get name() { return this._name; }
+    get location() { return this._location; }
+    get empty() { return this._empty; }
+
+    get hash()
+    {
+        if (this._hash)
+            return this._hash;
+
+        this._hash = this._name;
+        if (this._location)
+            this._hash += `:${this._location.scriptId}:${this._location.lineNumber}:${this._location.columnNumber}`;
+        return this._hash;
+    }
+
+    convertToLocalScope()
+    {
+        this._type = WebInspector.ScopeChainNode.Type.Local;
+    }
+};
+
+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..22626ce47
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Script.js
@@ -0,0 +1,303 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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(target, id, range, url, sourceType, injected, sourceURL, sourceMapURL)
+    {
+        super();
+
+        console.assert(id);
+        console.assert(target instanceof WebInspector.Target);
+        console.assert(range instanceof WebInspector.TextRange);
+
+        this._target = target;
+        this._id = id || null;
+        this._range = range || null;
+        this._url = url || null;
+        this._sourceType = sourceType || WebInspector.Script.SourceType.Program;
+        this._sourceURL = sourceURL || null;
+        this._sourceMappingURL = sourceMapURL || null;
+        this._injected = injected || false;
+        this._dynamicallyAddedScriptElement = false;
+        this._scriptSyntaxTree = null;
+
+        this._resource = this._resolveResource();
+
+        // If this Script was a dynamically added <script> to a Document,
+        // do not associate with the Document resource, instead associate
+        // with the frame as a dynamic script.
+        if (this._resource && this._resource.type === WebInspector.Resource.Type.Document && !this._range.startLine && !this._range.startColumn) {
+            console.assert(this._resource.isMainResource());
+            let documentResource = this._resource;
+            this._resource = null;
+            this._dynamicallyAddedScriptElement = true;
+            documentResource.parentFrame.addExtraScript(this);
+            this._dynamicallyAddedScriptElementNumber = documentResource.parentFrame.extraScriptCollection.items.size;
+        } else if (this._resource)
+            this._resource.associateWithScript(this);
+
+        if (isWebInspectorConsoleEvaluationScript(this._sourceURL)) {
+            // Assign a unique number to the script object so it will stay the same.
+            this._uniqueDisplayNameNumber = this.constructor._nextUniqueConsoleDisplayNameNumber++;
+        }
+
+        if (this._sourceMappingURL)
+            WebInspector.sourceMapManager.downloadSourceMap(this._sourceMappingURL, this._url, this);
+    }
+
+    // Static
+
+    static resetUniqueDisplayNameNumbers()
+    {
+        WebInspector.Script._nextUniqueDisplayNameNumber = 1;
+        WebInspector.Script._nextUniqueConsoleDisplayNameNumber = 1;
+    }
+
+    // Public
+
+    get target() { return this._target; }
+    get id() { return this._id; }
+    get range() { return this._range; }
+    get url() { return this._url; }
+    get sourceType() { return this._sourceType; }
+    get sourceURL() { return this._sourceURL; }
+    get sourceMappingURL() { return this._sourceMappingURL; }
+    get injected() { return this._injected; }
+
+    get contentIdentifier()
+    {
+        if (this._url)
+            return this._url;
+
+        if (!this._sourceURL)
+            return null;
+
+        // Since reused content identifiers can cause breakpoints
+        // to show up in completely unrelated files, sourceURLs should
+        // be unique where possible. The checks below exclude cases
+        // where sourceURLs are intentionally reused and we would never
+        // expect a breakpoint to be persisted across sessions.
+        if (isWebInspectorConsoleEvaluationScript(this._sourceURL))
+            return null;
+
+        if (isWebInspectorInternalScript(this._sourceURL))
+            return null;
+
+        return this._sourceURL;
+    }
+
+    get urlComponents()
+    {
+        if (!this._urlComponents)
+            this._urlComponents = parseURL(this._url);
+        return this._urlComponents;
+    }
+
+    get mimeType()
+    {
+        return this._resource.mimeType;
+    }
+
+    get displayName()
+    {
+        if (this._url && !this._dynamicallyAddedScriptElement)
+            return WebInspector.displayNameForURL(this._url, this.urlComponents);
+
+        if (isWebInspectorConsoleEvaluationScript(this._sourceURL)) {
+            console.assert(this._uniqueDisplayNameNumber);
+            return WebInspector.UIString("Console Evaluation %d").format(this._uniqueDisplayNameNumber);
+        }
+
+        if (this._sourceURL) {
+            if (!this._sourceURLComponents)
+                this._sourceURLComponents = parseURL(this._sourceURL);
+            return WebInspector.displayNameForURL(this._sourceURL, this._sourceURLComponents);
+        }
+
+        if (this._dynamicallyAddedScriptElement)
+            return WebInspector.UIString("Script Element %d").format(this._dynamicallyAddedScriptElementNumber);
+
+        // 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 displayURL()
+    {
+        const isMultiLine = true;
+        const dataURIMaxSize = 64;
+
+        if (this._url)
+            return WebInspector.truncateURL(this._url, isMultiLine, dataURIMaxSize);
+        if (this._sourceURL)
+            return WebInspector.truncateURL(this._sourceURL, isMultiLine, dataURIMaxSize);
+        return null;
+    }
+
+    get dynamicallyAddedScriptElement()
+    {
+        return this._dynamicallyAddedScriptElement;
+    }
+
+    get anonymous()
+    {
+        return !this._resource && !this._url && !this._sourceURL;
+    }
+
+    get resource()
+    {
+        return this._resource;
+    }
+
+    get scriptSyntaxTree()
+    {
+        return this._scriptSyntaxTree;
+    }
+
+    isMainResource()
+    {
+        return this._target.mainResource === this;
+    }
+
+    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 this._target.DebuggerAgent.getScriptSource(this._id);
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.Script.URLCookieKey] = this.url;
+        cookie[WebInspector.Script.DisplayNameCookieKey] = this.displayName;
+    }
+
+    requestScriptSyntaxTree(callback)
+    {
+        if (this._scriptSyntaxTree) {
+            setTimeout(() => { callback(this._scriptSyntaxTree); }, 0);
+            return;
+        }
+
+        var makeSyntaxTreeAndCallCallback = (content) => {
+            this._makeSyntaxTree(content);
+            callback(this._scriptSyntaxTree);
+        };
+
+        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;
+
+        let resolver = WebInspector.frameResourceManager;
+        if (this._target !== WebInspector.mainTarget)
+            resolver = this._target.resourceCollection;
+
+        try {
+            // Try with the Script's full URL.
+            let resource = resolver.resourceForURL(this._url);
+            if (resource)
+                return resource;
+
+            // Try with the Script's full decoded URL.
+            let decodedURL = decodeURI(this._url);
+            if (decodedURL !== this._url) {
+                resource = resolver.resourceForURL(decodedURL);
+                if (resource)
+                    return resource;
+            }
+
+            // Next try removing any fragment in the original URL.
+            let urlWithoutFragment = removeURLFragment(this._url);
+            if (urlWithoutFragment !== this._url) {
+                resource = resolver.resourceForURL(urlWithoutFragment);
+                if (resource)
+                    return resource;
+            }
+
+            // Finally try removing any fragment in the decoded URL.
+            let decodedURLWithoutFragment = removeURLFragment(decodedURL);
+            if (decodedURLWithoutFragment !== decodedURL) {
+                resource = resolver.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.SourceType = {
+    Program: "script-source-type-program",
+    Module: "script-source-type-module",
+};
+
+WebInspector.Script.TypeIdentifier = "script";
+WebInspector.Script.URLCookieKey = "script-url";
+WebInspector.Script.DisplayNameCookieKey = "script-display-name";
+
+WebInspector.Script._nextUniqueDisplayNameNumber = 1;
+WebInspector.Script._nextUniqueConsoleDisplayNameNumber = 1;
diff --git a/Source/WebInspectorUI/UserInterface/Models/ScriptInstrument.js b/Source/WebInspectorUI/UserInterface/Models/ScriptInstrument.js
new file mode 100644
index 000000000..cea34da36
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ScriptInstrument.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.ScriptInstrument = class ScriptInstrument extends WebInspector.Instrument
+{
+    // Protected
+
+    get timelineRecordType()
+    {
+        return WebInspector.TimelineRecord.Type.Script;
+    }
+
+    startInstrumentation(initiatedByBackend)
+    {
+        // 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;
+
+        if (!initiatedByBackend)
+            ScriptProfilerAgent.startTracking(includeSamples);
+    }
+
+    stopInstrumentation(initiatedByBackend)
+    {
+        // COMPATIBILITY (iOS 9): Legacy backends did not have ScriptProfilerAgent. They use TimelineAgent.
+        if (!window.ScriptProfilerAgent) {
+            super.stopInstrumentation();
+            return;
+        }
+
+        if (!initiatedByBackend)
+            ScriptProfilerAgent.stopTracking();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ScriptSyntaxTree.js b/Source/WebInspectorUI/UserInterface/Models/ScriptSyntaxTree.js
new file mode 100644
index 000000000..ab69285f2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ScriptSyntaxTree.js
@@ -0,0 +1,1146 @@
+/*
+ * 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 {
+            let sourceType = this._script.sourceType === WebInspector.Script.SourceType.Module ? "module" : "script";
+            let esprimaSyntaxTree = esprima.parse(sourceText, {range: true, sourceType});
+            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;
+    }
+
+    containersOfOffset(offset)
+    {
+        console.assert(this._parsedSuccessfully);
+        if (!this._parsedSuccessfully)
+            return [];
+
+        let allNodes = [];
+        const start = 0;
+        const end = 1;
+
+        this.forEachNode((node, state) => {
+            if (node.range[end] < offset)
+                state.skipChildNodes = true;
+            if (node.range[start] > offset)
+                state.shouldStopEarly = true;
+            if (node.range[start] <= offset && node.range[end] >= offset)
+                allNodes.push(node);
+        });
+
+        return allNodes;
+    }
+
+    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);
+        }
+
+        this._script.target.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);
+                case WebInspector.ScriptSyntaxTree.NodeType.RestElement:
+                case WebInspector.ScriptSyntaxTree.NodeType.RestProperty:
+                    return gatherIdentifiers(node.argument);
+                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 || node.type === WebInspector.ScriptSyntaxTree.NodeType.RestElement || node.type === WebInspector.ScriptSyntaxTree.NodeType.RestProperty);
+
+        return gatherIdentifiers(node);
+    }
+
+    _defaultParserState()
+    {
+        return {
+            shouldStopEarly: false,
+            skipChildNodes: false
+        };
+    }
+
+    _recurse(node, callback, state)
+    {
+        if (!node)
+            return;
+
+        if (state.shouldStopEarly || state.skipChildNodes)
+            return;
+
+        callback(node, state);
+
+        switch (node.type) {
+        case WebInspector.ScriptSyntaxTree.NodeType.AssignmentExpression:
+            this._recurse(node.left, callback, state);
+            this._recurse(node.right, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ArrayExpression:
+        case WebInspector.ScriptSyntaxTree.NodeType.ArrayPattern:
+            this._recurseArray(node.elements, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.AssignmentPattern:
+            this._recurse(node.left, callback, state);
+            this._recurse(node.right, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.AwaitExpression:
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.BlockStatement:
+            this._recurseArray(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.BinaryExpression:
+            this._recurse(node.left, callback, state);
+            this._recurse(node.right, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.BreakStatement:
+            this._recurse(node.label, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.CatchClause:
+            this._recurse(node.param, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.CallExpression:
+            this._recurse(node.callee, callback, state);
+            this._recurseArray(node.arguments, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ClassBody:
+            this._recurseArray(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ClassDeclaration:
+        case WebInspector.ScriptSyntaxTree.NodeType.ClassExpression:
+            this._recurse(node.id, callback, state);
+            this._recurse(node.superClass, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ContinueStatement:
+            this._recurse(node.label, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.DoWhileStatement:
+            this._recurse(node.body, callback, state);
+            this._recurse(node.test, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ExpressionStatement:
+            this._recurse(node.expression, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ForStatement:
+            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:
+            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:
+            this._recurse(node.id, callback, state);
+            this._recurseArray(node.params, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.IfStatement:
+            this._recurse(node.test, callback, state);
+            this._recurse(node.consequent, callback, state);
+            this._recurse(node.alternate, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.LabeledStatement:
+            this._recurse(node.label, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.LogicalExpression:
+            this._recurse(node.left, callback, state);
+            this._recurse(node.right, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.MemberExpression:
+            this._recurse(node.object, callback, state);
+            this._recurse(node.property, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.MethodDefinition:
+            this._recurse(node.key, callback, state);
+            this._recurse(node.value, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.NewExpression:
+            this._recurse(node.callee, callback, state);
+            this._recurseArray(node.arguments, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ObjectExpression:
+        case WebInspector.ScriptSyntaxTree.NodeType.ObjectPattern:
+            this._recurseArray(node.properties, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.Program:
+            this._recurseArray(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.Property:
+            this._recurse(node.key, callback, state);
+            this._recurse(node.value, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.RestElement:
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.RestProperty:
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ReturnStatement:
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.SequenceExpression:
+            this._recurseArray(node.expressions, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.SpreadElement:
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.SpreadProperty:
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.SwitchStatement:
+            this._recurse(node.discriminant, callback, state);
+            this._recurseArray(node.cases, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.SwitchCase:
+            this._recurse(node.test, callback, state);
+            this._recurseArray(node.consequent, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ConditionalExpression:
+            this._recurse(node.test, callback, state);
+            this._recurse(node.consequent, callback, state);
+            this._recurse(node.alternate, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.TaggedTemplateExpression:
+            this._recurse(node.tag, callback, state);
+            this._recurse(node.quasi, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.TemplateLiteral:
+            this._recurseArray(node.quasis, callback, state);
+            this._recurseArray(node.expressions, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ThrowStatement:
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.TryStatement:
+            this._recurse(node.block, callback, state);
+            this._recurse(node.handler, callback, state);
+            this._recurse(node.finalizer, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.UnaryExpression:
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.UpdateExpression:
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.VariableDeclaration:
+            this._recurseArray(node.declarations, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.VariableDeclarator:
+            this._recurse(node.id, callback, state);
+            this._recurse(node.init, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.WhileStatement:
+            this._recurse(node.test, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.WithStatement:
+            this._recurse(node.object, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.YieldExpression:
+            this._recurse(node.argument, callback, state);
+            break;
+
+        // Modules.
+
+        case WebInspector.ScriptSyntaxTree.NodeType.ExportAllDeclaration:
+            this._recurse(node.source, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ExportNamedDeclaration:
+            this._recurse(node.declaration, callback, state);
+            this._recurseArray(node.specifiers, callback, state);
+            this._recurse(node.source, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ExportDefaultDeclaration:
+            this._recurse(node.declaration, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ExportSpecifier:
+            this._recurse(node.local, callback, state);
+            this._recurse(node.exported, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ImportDeclaration:
+            this._recurseArray(node.specifiers, callback, state);
+            this._recurse(node.source, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ImportDefaultSpecifier:
+            this._recurse(node.local, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ImportNamespaceSpecifier:
+            this._recurse(node.local, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ImportSpecifier:
+            this._recurse(node.imported, callback, state);
+            this._recurse(node.local, 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.Import:
+        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:
+            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),
+                body: this._createInternalSyntaxTree(node.body),
+                generator: node.generator,
+                expression: node.expression, // Boolean indicating if the body a single expression or a block statement.
+                async: node.async,
+                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 "AwaitExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.AwaitExpression,
+                argument: this._createInternalSyntaxTree(node.argument),
+            };
+            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),
+                body: this._createInternalSyntaxTree(node.body),
+                generator: node.generator,
+                async: node.async,
+                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),
+                body: this._createInternalSyntaxTree(node.body),
+                generator: node.generator,
+                async: node.async,
+                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: this._createInternalSyntaxTree(node.meta),
+                property: this._createInternalSyntaxTree(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 "RestElement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.RestElement,
+                argument: this._createInternalSyntaxTree(node.argument)
+            };
+            break;
+        case "RestProperty":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.RestProperty,
+                argument: this._createInternalSyntaxTree(node.argument),
+            };
+            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 "SpreadProperty":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.SpreadProperty,
+                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;
+
+        // Modules.
+
+        case "ExportAllDeclaration":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ExportAllDeclaration,
+                source: this._createInternalSyntaxTree(node.source),
+            };
+            break;
+        case "ExportNamedDeclaration":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ExportNamedDeclaration,
+                declaration: this._createInternalSyntaxTree(node.declaration),
+                specifiers: node.specifiers.map(this._createInternalSyntaxTree, this),
+                source: this._createInternalSyntaxTree(node.source),
+            };
+            break;
+        case "ExportDefaultDeclaration":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ExportDefaultDeclaration,
+                declaration: this._createInternalSyntaxTree(node.declaration),
+            };
+            break;
+        case "ExportSpecifier":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ExportSpecifier,
+                local: this._createInternalSyntaxTree(node.local),
+                exported: this._createInternalSyntaxTree(node.exported),
+            };
+            break;
+        case "Import":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.Import,
+            };
+            break;
+        case "ImportDeclaration":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ImportDeclaration,
+                specifiers: node.specifiers.map(this._createInternalSyntaxTree, this),
+                source: this._createInternalSyntaxTree(node.source),
+            };
+            break;
+        case "ImportDefaultSpecifier":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ImportDefaultSpecifier,
+                local: this._createInternalSyntaxTree(node.local),
+            };
+            break;
+        case "ImportNamespaceSpecifier":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ImportNamespaceSpecifier,
+                local: this._createInternalSyntaxTree(node.local),
+            };
+            break;
+        case "ImportSpecifier":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ImportSpecifier,
+                imported: this._createInternalSyntaxTree(node.imported),
+                local: this._createInternalSyntaxTree(node.local),
+            };
+            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"),
+    AwaitExpression: Symbol("await-expression"),
+    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"),
+    ExportAllDeclaration: Symbol("export-all-declaration"),
+    ExportDefaultDeclaration: Symbol("export-default-declaration"),
+    ExportNamedDeclaration: Symbol("export-named-declaration"),
+    ExportSpecifier: Symbol("export-specifier"),
+    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"),
+    Import: Symbol("import"),
+    ImportDeclaration: Symbol("import-declaration"),
+    ImportDefaultSpecifier: Symbol("import-default-specifier"),
+    ImportNamespaceSpecifier: Symbol("import-namespace-specifier"),
+    ImportSpecifier: Symbol("import-specifier"),
+    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"),
+    RestElement: Symbol("rest-element"),
+    RestProperty: Symbol("rest-property"),
+    ReturnStatement: Symbol("return-statement"),
+    SequenceExpression: Symbol("sequence-expression"),
+    SpreadElement: Symbol("spread-element"),
+    SpreadProperty: Symbol("spread-property"),
+    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..4a4231d82
--- /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, WebInspector.assumingMainTarget())[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..29e8f3231
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCode.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.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 url()
+    {
+        // To be overridden by subclasses.
+    }
+
+    get contentIdentifier()
+    {
+        // A contentIdentifier is roughly `url || sourceURL` for cases where
+        // the content is consistent between sessions and not ephemeral.
+
+        // Can be overridden by subclasses if better behavior is possible.
+        return this.url;
+    }
+
+    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..79691700c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCodeLocation.js
@@ -0,0 +1,464 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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", (event) => { updateDisplayString.call(this, false); });
+    }
+
+    // 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 || "";
+
+        let 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.
+        else if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.Hidden)
+            lineString = "";
+
+        switch (nameStyle) {
+        case WebInspector.SourceCodeLocation.NameStyle.None:
+            return prefix + lineString;
+
+        case WebInspector.SourceCodeLocation.NameStyle.Short:
+        case WebInspector.SourceCodeLocation.NameStyle.Full:
+            var displayURL = sourceCode.displayURL;
+            var name = nameStyle === WebInspector.SourceCodeLocation.NameStyle.Full && displayURL ? displayURL : sourceCode.displayName;
+            if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.Hidden)
+                return prefix + name;
+            var lineSuffix = displayURL ? ":" + lineString : WebInspector.UIString(" (line %s)").format(lineString);
+            return prefix + name + 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",             // line and 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..a89554ac2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCodePosition.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.
+ */
+
+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..7bab2d6ec
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCodeSearchMatchObject.js
@@ -0,0 +1,66 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 searchTerm() { return this._searchTerm; }
+    get sourceCodeTextRange() { return this._sourceCodeTextRange; }
+
+    get className()
+    {
+        return WebInspector.SourceCodeSearchMatchObject.SourceCodeMatchIconStyleClassName;
+    }
+
+    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..f1699c4df
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCodeTimeline.js
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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..1824421bc
--- /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..89acfc872
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/StackTrace.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.StackTrace = class StackTrace extends WebInspector.Object
+{
+    constructor(callFrames, topCallFrameIsBoundary, truncated, parentStackTrace)
+    {
+        super();
+
+        console.assert(callFrames && callFrames.every((callFrame) => callFrame instanceof WebInspector.CallFrame));
+
+        this._callFrames = callFrames;
+        this._topCallFrameIsBoundary = topCallFrameIsBoundary || false;
+        this._truncated = truncated || false;
+        this._parentStackTrace = parentStackTrace || null;
+    }
+
+    // Static
+
+    static fromPayload(target, payload)
+    {
+        let result = null;
+        let previousStackTrace = null;
+
+        while (payload) {
+            let callFrames = payload.callFrames.map((x) => WebInspector.CallFrame.fromPayload(target, x));
+            let stackTrace = new WebInspector.StackTrace(callFrames, payload.topCallFrameIsBoundary, payload.truncated);
+            if (!result)
+                result = stackTrace;
+            if (previousStackTrace)
+                previousStackTrace._parentStackTrace = stackTrace;
+
+            previousStackTrace = stackTrace;
+            payload = payload.parentStackTrace;
+        }
+
+        return result;
+    }
+
+    static fromString(target, stack)
+    {
+        let callFrames = WebInspector.StackTrace._parseStackTrace(stack);
+        return WebInspector.StackTrace.fromPayload(target, {callFrames});
+    }
+
+    // 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 (let frame of this._callFrames) {
+            if (!frame.nativeCode)
+                return frame;
+        }
+
+        return null;
+    }
+
+    get firstNonNativeNonAnonymousCallFrame()
+    {
+        for (let frame of this._callFrames) {
+            if (frame.nativeCode)
+                continue;
+            if (frame.sourceCodeLocation) {
+                let sourceCode = frame.sourceCodeLocation.sourceCode;
+                if (sourceCode instanceof WebInspector.Script && sourceCode.anonymous)
+                    continue;
+            }
+            return frame;
+        }
+
+        return null;
+    }
+
+    get topCallFrameIsBoundary() { return this._topCallFrameIsBoundary; }
+    get truncated() { return this._truncated; }
+    get parentStackTrace() { return this._parentStackTrace; }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/StructureDescription.js b/Source/WebInspectorUI/UserInterface/Models/StructureDescription.js
new file mode 100644
index 000000000..097230ff1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/StructureDescription.js
@@ -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.
+ */
+
+WebInspector.StructureDescription = class StructureDescription extends WebInspector.Object
+{
+    constructor(fields, optionalFields, constructorName, prototypeStructure, imprecise)
+    {
+        super();
+
+        console.assert(!fields || fields.every((x) => typeof x === "string"));
+        console.assert(!optionalFields || optionalFields.every((x) => 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..f7480ef58
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TextMarker.js
@@ -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.
+ */
+
+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",
+    Spring: "text-marker-type-spring",
+    Variable: "text-marker-type-variable",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/TextRange.js b/Source/WebInspectorUI/UserInterface/Models/TextRange.js
new file mode 100644
index 000000000..64fe72147
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TextRange.js
@@ -0,0 +1,113 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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;
+    }
+
+    contains(line, column)
+    {
+        console.assert(!isNaN(this._startLine), "TextRange needs line/column data");
+
+        if (line < this._startLine || line > this._endLine)
+            return false;
+        if (line === this._startLine && column < this._startColumn)
+            return false;
+        if (line === this._endLine && column > this._endColumn)
+            return false;
+
+        return true;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Timeline.js b/Source/WebInspectorUI/UserInterface/Models/Timeline.js
new file mode 100644
index 000000000..857e8a37c
--- /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);
+
+        if (type === WebInspector.TimelineRecord.Type.Memory)
+            return new WebInspector.MemoryTimeline(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);
+    }
+
+    recordsInTimeRange(startTime, endTime, includeRecordBeforeStart)
+    {
+        let lowerIndex = this._records.lowerBound(startTime, (time, record) => time - record.timestamp);
+        let upperIndex = this._records.upperBound(endTime, (time, record) => time - record.timestamp);
+
+        // Include the record right before the start time.
+        if (includeRecordBeforeStart && lowerIndex > 0)
+            lowerIndex--;
+
+        return this._records.slice(lowerIndex, upperIndex);
+    }
+
+    // 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/TimelineRange.js b/Source/WebInspectorUI/UserInterface/Models/TimelineRange.js
new file mode 100644
index 000000000..60ef60f93
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TimelineRange.js
@@ -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.
+ */
+
+WebInspector.TimelineRange = class TimelineRange extends WebInspector.Object
+{
+    constructor(startValue, endValue)
+    {
+        super();
+
+        this._startValue = startValue;
+        this._endValue = endValue;
+    }
+
+    get startValue() { return this._startValue; }
+    set startValue(x) { this._startValue = x; }
+
+    get endValue() { return this._endValue; }
+    set endValue(x) { this._endValue = x; }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js b/Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js
new file mode 100644
index 000000000..99f443147
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js
@@ -0,0 +1,169 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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",
+    HeapAllocations: "timeline-record-type-heap-allocations",
+};
+
+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..f4cc10295
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js
@@ -0,0 +1,375 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 || [];
+        this._topDownCallingContextTree = new WebInspector.CallingContextTree(WebInspector.CallingContextTree.Type.TopDown);
+        this._bottomUpCallingContextTree = new WebInspector.CallingContextTree(WebInspector.CallingContextTree.Type.BottomUp);
+        this._topFunctionsTopDownCallingContextTree = new WebInspector.CallingContextTree(WebInspector.CallingContextTree.Type.TopFunctionsTopDown);
+        this._topFunctionsBottomUpCallingContextTree = new WebInspector.CallingContextTree(WebInspector.CallingContextTree.Type.TopFunctionsBottomUp);
+
+        for (let type of WebInspector.TimelineManager.availableTimelineTypes()) {
+            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; }
+
+    get topDownCallingContextTree() { return this._topDownCallingContextTree; }
+    get bottomUpCallingContextTree() { return this._bottomUpCallingContextTree; }
+    get topFunctionsTopDownCallingContextTree() { return this._topFunctionsTopDownCallingContextTree; }
+    get topFunctionsBottomUpCallingContextTree() { return this._topFunctionsBottomUpCallingContextTree; }
+
+    start(initiatedByBackend)
+    {
+        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(initiatedByBackend);
+    }
+
+    stop(initiatedByBackend)
+    {
+        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(initiatedByBackend);
+    }
+
+    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;
+        this._discontinuities = [];
+
+        this._topDownCallingContextTree.reset();
+        this._bottomUpCallingContextTree.reset();
+        this._topFunctionsTopDownCallingContextTree.reset();
+        this._topFunctionsBottomUpCallingContextTree.reset();
+
+        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);
+    }
+
+    instrumentForTimeline(timeline)
+    {
+        return this._instruments.find((instrument) => instrument.timelineRecordType === timeline.type);
+    }
+
+    timelineForRecordType(recordType)
+    {
+        return this._timelines.get(recordType);
+    }
+
+    addInstrument(instrument)
+    {
+        console.assert(instrument instanceof WebInspector.Instrument, instrument);
+        console.assert(!this._instruments.includes(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.includes(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
+            || record.type === WebInspector.TimelineRecord.Type.HeapAllocations)
+            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});
+    }
+
+    addMemoryPressureEvent(memoryPressureEvent)
+    {
+        let memoryTimeline = this._timelines.get(WebInspector.TimelineRecord.Type.Memory);
+        console.assert(memoryTimeline, this._timelines);
+        if (!memoryTimeline)
+            return;
+
+        memoryTimeline.addMemoryPressureEvent(memoryPressureEvent);
+    }
+
+    addDiscontinuity(startTime, endTime)
+    {
+        this._discontinuities.push({startTime, endTime});
+    }
+
+    discontinuitiesInTimeRange(startTime, endTime)
+    {
+        return this._discontinuities.filter((item) => item.startTime < endTime && item.endTime > startTime);
+    }
+
+    addScriptInstrumentForProgrammaticCapture()
+    {
+        for (let instrument of this._instruments) {
+            if (instrument instanceof WebInspector.ScriptInstrument)
+                return;
+        }
+
+        this.addInstrument(new WebInspector.ScriptInstrument);
+
+        let instrumentTypes = this._instruments.map((instrument) => instrument.timelineRecordType);
+        WebInspector.timelineManager.enabledTimelineTypes = instrumentTypes;
+    }
+
+    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..60a08def6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TypeDescription.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.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((x) => 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..ad5b430c9
--- /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..a42253d26
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/WrappedPromise.js
@@ -0,0 +1,71 @@
+/*
+ * 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.WrappedPromise = class WrappedPromise
+{
+    constructor(work)
+    {
+        this._settled = false;
+        this._promise = new Promise((resolve, reject) => {
+            this._resolveCallback = resolve;
+            this._rejectCallback = reject;
+
+            // Allow work to resolve or reject the promise by shimming our
+            // internal callbacks. This ensures that this._settled gets set properly.
+            if (work && typeof work === "function")
+                return work(this.resolve.bind(this), this.reject.bind(this));
+        });
+    }
+
+    // Public
+
+    get settled()
+    {
+        return this._settled;
+    }
+
+    get promise()
+    {
+        return this._promise;
+    }
+
+    resolve(value)
+    {
+        if (this._settled)
+            throw new Error("Promise is already settled, cannot call resolve().");
+
+        this._settled = true;
+        this._resolveCallback(value);
+    }
+
+    reject(value)
+    {
+        if (this._settled)
+            throw new Error("Promise is already settled, cannot call reject().");
+
+        this._settled = true;
+        this._rejectCallback(value);
+    }
+};
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 c12a7e521..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 3378642f6..000000000
--- a/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css
+++ /dev/null
@@ -1,356 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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: 22px;
-
-    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.hide-disclosure-buttons .item.small {
-    padding-left: 8px;
-}
-
-.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 7bf292b28..000000000
--- a/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js
+++ /dev/null
@@ -1,692 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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._visibleContentTreeOutlines = new Set;
-
-    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._textFilterDidChange, 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.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._visibleContentTreeOutlines.delete(this._contentTreeOutline);
-        this._visibleContentTreeOutlines.add(newTreeOutline);
-
-        this._updateFilter();
-    },
-
-    get contentTreeOutlineToAutoPrune()
-    {
-        return this._contentTreeOutline;
-    },
-
-    get filterBar()
-    {
-        return this._filterBar;
-    },
-
-    get restoringState()
-    {
-        return this._restoringState;
-    },
-
-    createContentTreeOutline: function(dontHideByDefault, suppressFiltering)
-    {
-        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.allowsRepeatSelection = true;
-
-        if (!suppressFiltering) {
-            contentTreeOutline.onadd = this._treeElementAddedOrChanged.bind(this);
-            contentTreeOutline.onchange = this._treeElementAddedOrChanged.bind(this);
-            contentTreeOutline.onexpand = this._treeElementExpandedOrCollapsed.bind(this);
-            contentTreeOutline.oncollapse = this._treeElementExpandedOrCollapsed.bind(this);
-        }
-
-        if (dontHideByDefault)
-            this._visibleContentTreeOutlines.add(contentTreeOutline);
-
-        return contentTreeOutline;
-    },
-
-    treeElementForRepresentedObject: function(representedObject)
-    {
-        return this._contentTreeOutline.getCachedTreeElement(representedObject);
-    },
-
-    showDefaultContentView: function()
-    {
-        // Implemneted by subclasses if needed to show a content view when no existing tree element is selected.
-    },
-
-    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();
-    },
-
-    saveStateToCookie: function(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: %s", selectedTreeElement.constructor);
-    },
-
-    // This can be supplemented by subclasses that admit a simpler strategy for static tree elements.
-    restoreStateFromCookie: function(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);
-
-        function finalAttemptToRestoreViewStateFromCookie()
-        {
-            delete this._finalAttemptToRestoreViewStateTimeout;
-
-            this._checkOutlinesForPendingViewStateCookie(true);
-
-            delete this._pendingViewStateCookie;
-            delete this._restoringState;
-        }
-
-        // 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: function(message, hideToolbarItem)
-    {
-        console.assert(message);
-
-        this._emptyContentPlaceholderMessageElement.textContent = message;
-        this.element.appendChild(this._emptyContentPlaceholderElement);
-
-        this._hideToolbarItemWhenEmpty = hideToolbarItem || false;
-        this._updateToolbarItemVisibility();
-        this._updateContentOverflowShadowVisibility();
-    },
-
-    hideEmptyContentPlaceholder: function()
-    {
-        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();
-        }
-    },
-
-    updateCustomContentOverflow: function()
-    {
-        // Implemented by subclasses if needed.
-    },
-
-    updateFilter: function()
-    {
-        this._updateFilter();
-    },
-
-    hasCustomFilters: function()
-    {
-        // Implemented by subclasses if needed.
-        return false;
-    },
-
-    matchTreeElementAgainstCustomFilters: function(treeElement)
-    {
-        // Implemented by subclasses if needed.
-        return true;
-    },
-
-    applyFiltersToTreeElement: function(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.__wasExpandedDuringFiltering) {
-                delete treeElement.__wasExpandedDuringFiltering;
-                treeElement.collapse();
-            }
-
-            return;
-        }
-
-        var filterableData = treeElement.filterableData || {};
-
-        var matchedBuiltInFilters = false;
-
-        var self = this;
-        function matchTextFilter(inputs)
-        {
-            if (!inputs || !self._textFilterRegex)
-                return true;
-
-            // Convert to a single item array if needed.
-            if (!(inputs instanceof Array))
-                inputs = [inputs];
-
-            // Loop over all the inputs and try to match them.
-            for (var input of inputs) {
-                if (!input)
-                    continue;
-                if (self._textFilterRegex.test(input)) {
-                    matchedBuiltInFilters = 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 (matchedBuiltInFilters && !currentAncestor.expanded) {
-                    currentAncestor.__wasExpandedDuringFiltering = true;
-                    currentAncestor.expand();
-                }
-
-                currentAncestor = currentAncestor.parent;
-            }
-        }
-
-        if (matchTextFilter(filterableData.text) && this.matchTreeElementAgainstCustomFilters(treeElement)) {
-            // 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 (!matchedBuiltInFilters && treeElement.expanded && treeElement.__wasExpandedDuringFiltering) {
-                delete treeElement.__wasExpandedDuringFiltering;
-                treeElement.collapse();
-            }
-
-            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()
-    {
-        this.updateCustomContentOverflow();
-
-        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;
-    },
-
-    _textFilterDidChange: function()
-    {
-        this._updateFilter();
-    },
-
-    _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();
-        this._checkElementsForPendingViewStateCookie(treeElement);
-    },
-
-    _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.svg", specifications, 13, 13, WebInspector.NavigationSidebarPanel.DisclosureTriangleOpenCanvasIdentifier);
-        generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.svg", 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);
-    },
-
-    _isTreeElementWithoutRepresentedObject: function(treeElement)
-    {
-        return treeElement instanceof WebInspector.FolderTreeElement
-            || treeElement instanceof WebInspector.DatabaseHostTreeElement
-            || typeof treeElement.representedObject === "string"
-            || treeElement.representedObject instanceof String;
-    },
-
-    _checkOutlinesForPendingViewStateCookie: function(matchTypeOnly)
-    {
-        if (!this._pendingViewStateCookie)
-            return;
-
-        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: function(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);
-
-            return Object.keys(candidateObjectCookie).every(function valuesMatchForKey(key) {
-                return candidateObjectCookie[key] === cookie[key];
-            });
-        }
-
-        if (!(treeElements instanceof Array))
-            treeElements = [treeElements];
-
-        var matchedElement = null;
-        treeElements.some(function(element) {
-            if (treeElementMatchesCookie.call(this, element)) {
-                matchedElement = element;
-                return true;
-            }
-        }, this);
-
-        if (matchedElement) {
-            matchedElement.revealAndSelect(true, false);
-
-            delete this._pendingViewStateCookie;
-
-            // 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() {
-                delete this._restoringState;
-            }.bind(this));
-
-            if (this._finalAttemptToRestoreViewStateTimeout) {
-                clearTimeout(this._finalAttemptToRestoreViewStateTimeout);
-                delete this._finalAttemptToRestoreViewStateTimeout;
-            }
-        }
-    }
-};
-
-WebInspector.NavigationSidebarPanel.prototype.__proto__ = WebInspector.SidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NetworkObserver.js b/Source/WebInspectorUI/UserInterface/NetworkObserver.js
deleted file mode 100644
index fa5b3c15e..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.
-
-    requestWillBeSent: function(requestId, frameId, loaderId, documentURL, request, timestamp, initiator, redirectResponse, type)
-    {
-        WebInspector.frameResourceManager.resourceRequestWillBeSent(requestId, frameId, loaderId, request, type, redirectResponse, timestamp, initiator);
-    },
-
-    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, initiator);
-    },
-
-    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.js b/Source/WebInspectorUI/UserInterface/NetworkTimeline.js
deleted file mode 100644
index 9cce641fc..000000000
--- a/Source/WebInspectorUI/UserInterface/NetworkTimeline.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * 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 = function()
-{
-    WebInspector.Timeline.call(this);
-};
-
-WebInspector.NetworkTimeline.prototype = {
-    constructor: WebInspector.NetworkTimeline,
-    __proto__: WebInspector.Timeline.prototype,
-
-    // Public
-
-    recordForResource: function(resource)
-    {
-        console.assert(resource instanceof WebInspector.Resource);
-
-        return this._resourceRecordMap.get(resource) || null;
-    },
-
-    reset: function(suppressEvents)
-    {
-        this._resourceRecordMap = new Map;
-
-        WebInspector.Timeline.prototype.reset.call(this, suppressEvents);
-    },
-
-    addRecord: function(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);
-
-        WebInspector.Timeline.prototype.addRecord.call(this, record);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/NetworkTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/NetworkTimelineOverviewGraph.css
deleted file mode 100644
index ff3f7110d..000000000
--- a/Source/WebInspectorUI/UserInterface/NetworkTimelineOverviewGraph.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * 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: rgb(247, 247, 247) 1px 0 0;
-}
diff --git a/Source/WebInspectorUI/UserInterface/NetworkTimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/NetworkTimelineOverviewGraph.js
deleted file mode 100644
index 0935cbb39..000000000
--- a/Source/WebInspectorUI/UserInterface/NetworkTimelineOverviewGraph.js
+++ /dev/null
@@ -1,163 +0,0 @@
-
-/*
- * 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.NetworkTimelineOverviewGraph = function(recording)
-{
-    WebInspector.TimelineOverviewGraph.call(this, recording);
-
-    this.element.classList.add(WebInspector.NetworkTimelineOverviewGraph.StyleClassName);
-
-    var networkTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Network);
-    networkTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
-    networkTimeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this.needsLayout, this);
-
-    this.reset();
-};
-
-WebInspector.NetworkTimelineOverviewGraph.StyleClassName = "network";
-WebInspector.NetworkTimelineOverviewGraph.GraphRowStyleClassName = "graph-row";
-WebInspector.NetworkTimelineOverviewGraph.BarStyleClassName = "bar";
-WebInspector.NetworkTimelineOverviewGraph.InactiveBarStyleClassName = "inactive";
-WebInspector.NetworkTimelineOverviewGraph.UnfinishedStyleClassName = "unfinished";
-WebInspector.NetworkTimelineOverviewGraph.MaximumRowCount = 6;
-
-WebInspector.NetworkTimelineOverviewGraph.prototype = {
-    constructor: WebInspector.NetworkTimelineOverviewGraph,
-    __proto__: WebInspector.TimelineOverviewGraph.prototype,
-
-    // Public
-
-    reset: function()
-    {
-        WebInspector.TimelineOverviewGraph.prototype.reset.call(this);
-
-        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.className = WebInspector.NetworkTimelineOverviewGraph.GraphRowStyleClassName;
-            this.element.appendChild(rowRecords.__element);
-
-            rowRecords.__recordBars = [];
-        }
-    },
-
-    updateLayout: function()
-    {
-        WebInspector.TimelineOverviewGraph.prototype.updateLayout.call(this);
-
-        var visibleWidth = this.element.offsetWidth;
-        var secondsPerPixel = (this.endTime - this.startTime) / visibleWidth;
-
-        var recordBarIndex = 0;
-
-        function createBar(rowElement, rowRecordBars, records, renderMode)
-        {
-            var timelineRecordBar = rowRecordBars[recordBarIndex];
-            if (!timelineRecordBar)
-                timelineRecordBar = rowRecordBars[recordBarIndex] = new WebInspector.TimelineRecordBar;
-            timelineRecordBar.renderMode = renderMode;
-            timelineRecordBar.records = records;
-            timelineRecordBar.refresh(this);
-            if (!timelineRecordBar.element.parentNode)
-                rowElement.appendChild(timelineRecordBar.element);
-            ++recordBarIndex;
-        }
-
-        for (var rowRecords of this._timelineRecordGridRows) {
-            var rowElement = rowRecords.__element;
-            var 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: function(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();
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/NetworkTimelineView.css b/Source/WebInspectorUI/UserInterface/NetworkTimelineView.css
deleted file mode 100644
index 21f8400ee..000000000
--- a/Source/WebInspectorUI/UserInterface/NetworkTimelineView.css
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * 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;
-    border: none;
-}
-
-.sidebar > .panel.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.network .item .subtitle {
-    display: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/NetworkTimelineView.js b/Source/WebInspectorUI/UserInterface/NetworkTimelineView.js
deleted file mode 100644
index 3366b914c..000000000
--- a/Source/WebInspectorUI/UserInterface/NetworkTimelineView.js
+++ /dev/null
@@ -1,211 +0,0 @@
-/*
- * 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.NetworkTimelineView = function(recording)
-{
-    WebInspector.TimelineView.call(this);
-
-    this.navigationSidebarTreeOutline.onselect = this._treeElementSelected.bind(this);
-    this.navigationSidebarTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
-    this.navigationSidebarTreeOutline.element.classList.add(WebInspector.NetworkTimelineView.TreeOutlineStyleClassName);
-
-    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.type.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("network", WebInspector.Resource.Type);
-
-    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("Transfered");
-    columns.transferSize.width = "8%";
-    columns.transferSize.aligned = "right";
-
-    columns.requestSent.title = WebInspector.UIString("Start Time");
-    columns.requestSent.width = "9%";
-    columns.requestSent.aligned = "right";
-    columns.requestSent.sort = "ascending";
-
-    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.element.classList.add(WebInspector.NetworkTimelineView.StyleClassName);
-    this.element.appendChild(this._dataGrid.element);
-
-    var networkTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Network);
-    networkTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
-
-    this._pendingRecords = [];
-};
-
-WebInspector.NetworkTimelineView.StyleClassName = "network";
-WebInspector.NetworkTimelineView.TreeOutlineStyleClassName = "network";
-
-WebInspector.NetworkTimelineView.prototype = {
-    constructor: WebInspector.NetworkTimelineView,
-    __proto__: WebInspector.TimelineView.prototype,
-
-    // Public
-
-    get navigationSidebarTreeOutlineLabel()
-    {
-        return WebInspector.UIString("Resources");
-    },
-
-    shown: function()
-    {
-        WebInspector.TimelineView.prototype.shown.call(this);
-
-        this._dataGrid.shown();
-    },
-
-    hidden: function()
-    {
-        this._dataGrid.hidden();
-
-        WebInspector.TimelineView.prototype.hidden.call(this);
-    },
-
-    updateLayout: function()
-    {
-        WebInspector.TimelineView.prototype.updateLayout.call(this);
-
-        this._dataGrid.updateLayout();
-
-        this._processPendingRecords();
-    },
-
-    matchTreeElementAgainstCustomFilters: function(treeElement)
-    {
-        return this._dataGrid.treeElementMatchesActiveScopeFilters(treeElement);
-    },
-
-    reset: function()
-    {
-        WebInspector.TimelineView.prototype.reset.call(this);
-
-        this._dataGrid.reset();
-    },
-
-    // Protected
-
-    treeElementPathComponentSelected: function(event)
-    {
-        var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
-        if (!dataGridNode)
-            return;
-        dataGridNode.revealAndSelect();
-    },
-
-    // Private
-
-    _processPendingRecords: function()
-    {
-        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: function(event)
-    {
-        var resourceTimelineRecord = event.data.record;
-        console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
-
-        this._pendingRecords.push(resourceTimelineRecord);
-
-        this.needsLayout();
-    },
-
-    _dataGridFiltersDidChange: function(event)
-    {
-        WebInspector.timelineSidebarPanel.updateFilter();
-    },
-
-    _dataGridNodeSelected: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
-    },
-
-    _treeElementSelected: function(treeElement, selectedByUser)
-    {
-        if (this._dataGrid.shouldIgnoreSelectionEvent())
-            return;
-
-        if (!WebInspector.timelineSidebarPanel.canShowDifferentContentView())
-            return;
-
-        if (treeElement instanceof WebInspector.FolderTreeElement)
-            return;
-
-        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
-            WebInspector.resourceSidebarPanel.showSourceCode(treeElement.representedObject);
-            return;
-        }
-
-        console.error("Unknown tree element selected.");
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/Object.js b/Source/WebInspectorUI/UserInterface/Object.js
deleted file mode 100644
index 03218751c..000000000
--- a/Source/WebInspectorUI/UserInterface/Object.js
+++ /dev/null
@@ -1,236 +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, "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 = {};
-
-    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/OverviewTimelineView.css b/Source/WebInspectorUI/UserInterface/OverviewTimelineView.css
deleted file mode 100644
index 5630f69a4..000000000
--- a/Source/WebInspectorUI/UserInterface/OverviewTimelineView.css
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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 rgb(200, 200, 200);
-    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;
-    border: none;
-}
-
-.timeline-view.overview > .data-grid table.header {
-    display: none;
-}
-
-.timeline-view.overview > .data-grid .data-container {
-    top: 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: rgb(212, 212, 212) 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: rgb(56, 121, 217) 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: rgb(212, 212, 212) 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: rgb(56, 121, 217) 1px 0 0;
-}
diff --git a/Source/WebInspectorUI/UserInterface/OverviewTimelineView.js b/Source/WebInspectorUI/UserInterface/OverviewTimelineView.js
deleted file mode 100644
index 86e3736ae..000000000
--- a/Source/WebInspectorUI/UserInterface/OverviewTimelineView.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.OverviewTimelineView = function(recording)
-{
-    WebInspector.TimelineView.call(this);
-
-    this._recording = recording;
-
-    this.navigationSidebarTreeOutline.onselect = this._treeElementSelected.bind(this);
-
-    var columns = {"graph": {width: "100%"}};
-
-    this._dataGrid = new WebInspector.DataGrid(columns);
-    this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
-
-    this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this._contentTreeOutline, this._dataGrid);
-
-    this._timelineRuler = new WebInspector.TimelineRuler;
-    this._timelineRuler.allowsClippedLabels = true;
-    this.element.appendChild(this._timelineRuler.element);
-
-    this._currentTimeMarker = new WebInspector.TimelineMarker(0, WebInspector.TimelineMarker.Type.CurrentTime);
-    this._timelineRuler.addMarker(this._currentTimeMarker);
-
-    this.element.classList.add(WebInspector.OverviewTimelineView.StyleClassName);
-    this.element.appendChild(this._dataGrid.element);
-
-    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);
-
-    this._pendingRepresentedObjects = [];
-};
-
-WebInspector.OverviewTimelineView.StyleClassName = "overview";
-
-WebInspector.OverviewTimelineView.prototype = {
-    constructor: WebInspector.OverviewTimelineView,
-    __proto__: WebInspector.TimelineView.prototype,
-
-    // Public
-
-    get navigationSidebarTreeOutlineLabel()
-    {
-        return WebInspector.UIString("Timeline Events");
-    },
-
-    shown: function()
-    {
-        WebInspector.TimelineView.prototype.shown.call(this);
-
-        this._treeOutlineDataGridSynchronizer.synchronize();
-    },
-
-    updateLayout: function()
-    {
-        WebInspector.TimelineView.prototype.updateLayout.call(this);
-
-        var oldZeroTime = this._timelineRuler.zeroTime;
-        var oldStartTime = this._timelineRuler.startTime;
-        var oldEndTime = this._timelineRuler.endTime;
-        var 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) {
-            var dataGridNode = this._dataGrid.children[0];
-            while (dataGridNode) {
-                dataGridNode.refreshGraph();
-                dataGridNode = dataGridNode.traverseNextNode(true, null, true);
-            }
-        }
-
-        if (!this.currentTime !== oldCurrentTime) {
-            var selectedTreeElement = this.navigationSidebarTreeOutline.selectedTreeElement;
-            var selectionWasHidden = selectedTreeElement && selectedTreeElement.hidden;
-
-            // Check the filters again since the current time change might have revealed this node. Start and end time changes are handled by TimelineContentView.
-            WebInspector.timelineSidebarPanel.updateFilter();
-
-            if (selectedTreeElement && selectedTreeElement.hidden !== selectionWasHidden)
-                this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
-        }
-
-        this._timelineRuler.updateLayout();
-
-        this._processPendingRepresentedObjects();
-    },
-
-    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;
-    },
-
-    // Protected
-
-    treeElementPathComponentSelected: function(event)
-    {
-        var dataGridNode = this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
-        if (!dataGridNode)
-            return;
-        dataGridNode.revealAndSelect();
-    },
-
-    // Private
-
-    _compareTreeElementsByDetails: function(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) {
-            aTimeline = a.sourceCodeTimeline;
-            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: function(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: function(treeElement, parentTreeElement)
-    {
-        console.assert(treeElement);
-        console.assert(!treeElement.parent);
-        console.assert(parentTreeElement);
-
-        parentTreeElement.insertChild(treeElement, insertionIndexForObjectInListSortedByFunction(treeElement, parentTreeElement.children, this._compareTreeElementsByStartTime.bind(this)));
-    },
-
-    _addResourceToTreeIfNeeded: function(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: function(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: function()
-    {
-        if (!this._pendingRepresentedObjects || !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: function(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: function(event)
-    {
-        var sourceCodeTimeline = event.data.sourceCodeTimeline;
-        console.assert(sourceCodeTimeline);
-        if (!sourceCodeTimeline)
-            return;
-
-        this._pendingRepresentedObjects.push(sourceCodeTimeline);
-
-        this.needsLayout();
-    },
-
-    _dataGridNodeSelected: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
-    },
-
-    _treeElementSelected: function(treeElement, selectedByUser)
-    {
-        if (!WebInspector.timelineSidebarPanel.canShowDifferentContentView())
-            return;
-
-        if (treeElement instanceof WebInspector.FolderTreeElement)
-            return;
-
-        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
-            WebInspector.resourceSidebarPanel.showSourceCode(treeElement.representedObject);
-            return;
-        }
-
-        if (!(treeElement instanceof WebInspector.SourceCodeTimelineTreeElement)) {
-            console.error("Unknown tree element selected.");
-            return;
-        }
-
-        if (!treeElement.sourceCodeTimeline.sourceCodeLocation) {
-            WebInspector.timelineSidebarPanel.showTimelineOverview();
-            return;
-        }
-
-        WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(treeElement.sourceCodeTimeline.sourceCodeLocation);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/PageObserver.js b/Source/WebInspectorUI/UserInterface/PageObserver.js
deleted file mode 100644
index 9ea411840..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.
-
-    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 2d817ae37..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.svg);
-}
-
-.dom-tree-icon .icon {
-    content: url(Images/DOMTree.svg);
-}
-
-.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-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/Popover.css b/Source/WebInspectorUI/UserInterface/Popover.css
deleted file mode 100644
index e07ae7041..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 {
-    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 e9b84bd63..000000000
--- a/Source/WebInspectorUI/UserInterface/Popover.js
+++ /dev/null
@@ -1,482 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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("transitionend", 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();
-    },
-
-    update: function()
-    {
-        if (!this.visible)
-            return;
-
-        var previouslyFocusedElement = document.activeElement;
-
-        this._contentNeedsUpdate = true;
-        this._update();
-
-        if (previouslyFocusedElement)
-            previouslyFocusedElement.focus();
-    },
-
-    /**
-     * @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 "transitionend":
-            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()
-    {
-        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;
-
-        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());
-
-            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;
-        }
-
-        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: 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 fe4a41814..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 c1ef1fd93..000000000
--- a/Source/WebInspectorUI/UserInterface/ProfileManager.js
+++ /dev/null
@@ -1,226 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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._canvasProfileType = new WebInspector.CanvasProfileType;
-
-    if (window.ProfilerAgent) {
-        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._recordingCanvasProfile = null;
-
-        this._isProfiling = false;
-
-        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.Cleared);
-    },
-
-    isProfilingJavaScript: function()
-    {
-        return this._javaScriptProfileType.isRecordingProfile();
-    },
-
-    startProfilingJavaScript: function()
-    {
-        this._javaScriptProfileType.startRecordingProfile();
-    },
-
-    stopProfilingJavaScript: function()
-    {
-        this._javaScriptProfileType.stopRecordingProfile();
-    },
-
-    isProfilingCanvas: function()
-    {
-        return this._canvasProfileType.isRecordingProfile();
-    },
-
-    startProfilingCanvas: function()
-    {
-        this._canvasProfileType.startRecordingProfile();
-
-        var id = this._canvasProfileType.nextProfileId();
-        this._recordingCanvasProfile = new WebInspector.CanvasProfileObject(WebInspector.UIString("Canvas Profile %d").format(id), id, true);
-        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasAdded, {profile: this._recordingCanvasProfile});
-
-        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingStarted);
-    },
-
-    stopProfilingCanvas: function()
-    {
-        function canvasProfilingStopped(error, profile)
-        {
-            if (error)
-                return;
-
-            console.assert(this._recordingCanvasProfile);
-
-            this._recordingCanvasProfile.data = profile.data;
-            this._recordingCanvasProfile.recording = false;
-
-            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasUpdated, {profile: this._recordingCanvasProfile});
-            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingEnded, {profile: this._recordingCanvasProfile});
-
-            this._recordingCanvasProfile = null;
-        }
-
-        this._canvasProfileType.stopRecordingProfile(canvasProfilingStopped.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._recordingCanvasProfile) {
-            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingInterrupted, {profile: this._recordingCanvasProfile});
-            this._canvasProfileType.setRecordingProfile(false);
-        }
-    },
-
-    _attemptToResumeProfiling: function()
-    {
-        this._checkForInterruptions();
-
-        if (this._recordingJavaScriptProfile)
-            this.startProfilingJavaScript();
-        else if (this._recordingCanvasProfile)
-            this.startProfilingCanvas();
-    }
-};
-
-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 f7b53b44b..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.svg", 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 db8d0be94..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.
-
-    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/Connection.js b/Source/WebInspectorUI/UserInterface/Protocol/Connection.js
new file mode 100644
index 000000000..df059c163
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Connection.js
@@ -0,0 +1,315 @@
+/*
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ * Copyright (C) 2013-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.
+ */
+
+InspectorBackend.Connection = class InspectorBackendConnection
+{
+    constructor()
+    {
+        this._lastSequenceId = 1;
+        this._pendingResponses = new Map;
+        this._agents = {};
+        this._deferredScripts = [];
+        this._target = null;
+    }
+
+    // Public
+
+    get target()
+    {
+        return this._target;
+    }
+
+    set target(target)
+    {
+        console.assert(!this._target);
+
+        this._target = target;
+
+        for (let domain in this._agents) {
+            let dispatcher = this._agents[domain].dispatcher;
+            if (dispatcher)
+                dispatcher.target = target;
+        }
+    }
+
+    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(typeof script === "function");
+
+        if (!this._pendingResponses.size)
+            script.call(this);
+        else
+            this._deferredScripts.push(script);
+    }
+
+    // Protected
+
+    sendMessageToBackend(message)
+    {
+        throw new Error("Should be implemented by a InspectorBackend.Connection subclass");
+    }
+
+    // Private
+
+    _dispatchResponse(messageObject)
+    {
+        console.assert(this._pendingResponses.size >= 0);
+
+        if (messageObject["error"]) {
+            if (messageObject["error"].code !== -32000)
+                console.error("Request with id = " + messageObject["id"] + " failed. " + JSON.stringify(messageObject["error"]));
+        }
+
+        let sequenceId = messageObject["id"];
+        console.assert(this._pendingResponses.has(sequenceId), sequenceId, this._pendingResponses);
+
+        let responseData = this._pendingResponses.take(sequenceId) || {};
+        let {request, command, callback, promise} = responseData;
+
+        let processingStartTimestamp = timestamp();
+        for (let tracer of InspectorBackend.activeTracers)
+            tracer.logWillHandleResponse(messageObject);
+
+        InspectorBackend.currentDispatchState.request = request;
+        InspectorBackend.currentDispatchState.response = messageObject;
+
+        if (typeof callback === "function")
+            this._dispatchResponseToCallback(command, request, 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);
+
+        InspectorBackend.currentDispatchState.request = null;
+        InspectorBackend.currentDispatchState.response = null;
+
+        let processingTime = (timestamp() - processingStartTimestamp).toFixed(3);
+        let roundTripTime = (processingStartTimestamp - responseData.sendRequestTimestamp).toFixed(3);
+
+        for (let tracer of InspectorBackend.activeTracers)
+            tracer.logDidHandleResponse(messageObject, {rtt: roundTripTime, dispatch: processingTime});
+
+        if (this._deferredScripts.length && !this._pendingResponses.size)
+            this._flushPendingScripts();
+    }
+
+    _dispatchResponseToCallback(command, requestObject, responseObject, callback)
+    {
+        let callbackArguments = [];
+        callbackArguments.push(responseObject["error"] ? responseObject["error"].message : null);
+
+        if (responseObject["result"]) {
+            for (let parameterName of command.replySignature)
+                callbackArguments.push(responseObject["result"][parameterName]);
+        }
+
+        try {
+            callback.apply(null, callbackArguments);
+        } catch (e) {
+            WebInspector.reportInternalError(e, {"cause": `An uncaught exception was thrown while dispatching response callback for command ${command.qualifiedName}.`});
+        }
+    }
+
+    _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._agents[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 InspectorBackend.activeTracers)
+            tracer.logWillHandleEvent(messageObject);
+
+        InspectorBackend.currentDispatchState.event = messageObject;
+
+        try {
+            agent.dispatchEvent(eventName, eventArguments);
+        } catch (e) {
+            for (let tracer of InspectorBackend.activeTracers)
+                tracer.logFrontendException(messageObject, e);
+
+            WebInspector.reportInternalError(e, {"cause": `An uncaught exception was thrown while handling event: ${qualifiedName}`});
+        }
+
+        InspectorBackend.currentDispatchState.event = null;
+
+        let processingDuration = (timestamp() - processingStartTimestamp).toFixed(3);
+        for (let tracer of InspectorBackend.activeTracers)
+            tracer.logDidHandleEvent(messageObject, {dispatch: processingDuration});
+    }
+
+    _sendCommandToBackendWithCallback(command, parameters, callback)
+    {
+        let sequenceId = this._lastSequenceId++;
+
+        let messageObject = {
+            "id": sequenceId,
+            "method": command.qualifiedName,
+        };
+
+        if (!isEmptyObject(parameters))
+            messageObject["params"] = parameters;
+
+        let responseData = {command, request: messageObject, callback};
+
+        if (InspectorBackend.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 (!isEmptyObject(parameters))
+            messageObject["params"] = parameters;
+
+        let responseData = {command, request: messageObject};
+
+        if (InspectorBackend.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 InspectorBackend.activeTracers)
+            tracer.logFrontendRequest(messageObject);
+
+        this.sendMessageToBackend(JSON.stringify(messageObject));
+    }
+
+    _flushPendingScripts()
+    {
+        console.assert(this._pendingResponses.size === 0);
+
+        let scriptsToRun = this._deferredScripts;
+        this._deferredScripts = [];
+        for (let script of scriptsToRun)
+            script.call(this);
+    }
+};
+
+InspectorBackend.MainConnection = class InspectorBackendPageConnection extends InspectorBackend.Connection
+{
+    constructor()
+    {
+        super();
+
+        this._agents = InspectorBackend._agents;
+    }
+
+    sendMessageToBackend(message)
+    {
+        InspectorFrontendHost.sendMessageToBackend(message);
+    }
+};
+
+InspectorBackend.WorkerConnection = class InspectorBackendWorkerConnection extends InspectorBackend.Connection
+{
+    constructor(workerId)
+    {
+        super();
+
+        this._workerId = workerId;
+
+        const workerDomains = InspectorBackend.workerSupportedDomains;
+
+        for (let domain of workerDomains) {
+            let agent = InspectorBackend._agents[domain];
+            let clone = Object.create(InspectorBackend._agents[domain]);
+            clone.connection = this;
+            clone.dispatcher = new agent.dispatcher.constructor;
+            this._agents[domain] = clone;
+        }
+    }
+
+    sendMessageToBackend(message)
+    {
+        WorkerAgent.sendMessageToWorker(this._workerId, message);
+    }
+};
+
+InspectorBackend.mainConnection = new InspectorBackend.MainConnection;
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/ConsoleObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/ConsoleObserver.js
new file mode 100644
index 000000000..1dff61961
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/ConsoleObserver.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.ConsoleObserver = class ConsoleObserver
+{
+    // Events defined by the "Console" domain.
+
+    messageAdded(message)
+    {
+        if (message.source === "console-api" && message.type === "clear")
+            return;
+
+        if (message.type === "assert" && !message.text)
+            message.text = WebInspector.UIString("Assertion");
+
+        WebInspector.logManager.messageWasAdded(this.target, 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();
+    }
+
+    heapSnapshot(timestamp, snapshotStringData, title)
+    {
+        let workerProxy = WebInspector.HeapSnapshotWorkerProxy.singleton();
+        workerProxy.createSnapshot(snapshotStringData, title || null, ({objectId, snapshot: serializedSnapshot}) => {
+            let snapshot = WebInspector.HeapSnapshotProxy.deserialize(objectId, serializedSnapshot);
+            WebInspector.timelineManager.heapSnapshotAdded(timestamp, snapshot);
+        });
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/DOMObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/DOMObserver.js
new file mode 100644
index 000000000..40a997716
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/DOMObserver.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.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);
+    }
+
+    customElementStateChanged(nodeId, customElementState)
+    {
+        WebInspector.domTreeManager._customElementStateChanged(nodeId, customElementState);
+    }
+
+    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..8dbd536cb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/DebuggerObserver.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.DebuggerObserver = class DebuggerObserver
+{
+    constructor()
+    {
+        this._legacyScriptParsed = DebuggerAgent.hasEventParameter("scriptParsed", "hasSourceURL");
+    }
+
+    // Events defined by the "Debugger" domain.
+
+    globalObjectCleared()
+    {
+        WebInspector.debuggerManager.reset();
+    }
+
+    scriptParsed(scriptId, url, startLine, startColumn, endLine, endColumn, isContentScript, sourceURL, sourceMapURL, isModule)
+    {
+        if (this._legacyScriptParsed) {
+            // COMPATIBILITY (iOS 9): Debugger.scriptParsed had slightly different arguments.
+            // Debugger.scriptParsed: (scriptId, url, startLine, startColumn, endLine, endColumn, isContentScript, sourceMapURL, hasSourceURL)
+            // Note that in this legacy version, url could be the sourceURL name, and the resource URL could be lost.
+            let legacySourceMapURL = arguments[7];
+            let hasSourceURL = arguments[8];
+            let legacySourceURL = hasSourceURL ? url : undefined;
+            WebInspector.debuggerManager.scriptDidParse(this.target, scriptId, url, startLine, startColumn, endLine, endColumn, isModule, isContentScript, legacySourceURL, legacySourceMapURL);
+            return;
+        }
+
+        WebInspector.debuggerManager.scriptDidParse(this.target, scriptId, url, startLine, startColumn, endLine, endColumn, isModule, isContentScript, sourceURL, sourceMapURL);
+    }
+
+    scriptFailedToParse(url, scriptSource, startLine, errorLine, errorMessage)
+    {
+        // FIXME: Not implemented.
+    }
+
+    breakpointResolved(breakpointId, location)
+    {
+        WebInspector.debuggerManager.breakpointResolved(this.target, breakpointId, location);
+    }
+
+    paused(callFrames, reason, data, asyncStackTrace)
+    {
+        WebInspector.debuggerManager.debuggerDidPause(this.target, callFrames, reason, data, asyncStackTrace);
+    }
+
+    resumed()
+    {
+        WebInspector.debuggerManager.debuggerDidResume(this.target);
+    }
+
+    playBreakpointActionSound(breakpointActionIdentifier)
+    {
+        WebInspector.debuggerManager.playBreakpointActionSound(breakpointActionIdentifier);
+    }
+
+    didSampleProbe(sample)
+    {
+        WebInspector.probeManager.didSampleProbe(this.target, sample);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/HeapObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/HeapObserver.js
new file mode 100644
index 000000000..dab307605
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/HeapObserver.js
@@ -0,0 +1,52 @@
+/*
+ * 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(this.target, collection);
+    }
+
+    trackingStart(timestamp, snapshotStringData)
+    {
+        let workerProxy = WebInspector.HeapSnapshotWorkerProxy.singleton();
+        workerProxy.createSnapshot(snapshotStringData, ({objectId, snapshot: serializedSnapshot}) => {
+            let snapshot = WebInspector.HeapSnapshotProxy.deserialize(objectId, serializedSnapshot);
+            WebInspector.timelineManager.heapTrackingStarted(timestamp, snapshot);
+        });
+    }
+
+    trackingComplete(timestamp, snapshotStringData)
+    {
+        let workerProxy = WebInspector.HeapSnapshotWorkerProxy.singleton();
+        workerProxy.createSnapshot(snapshotStringData, ({objectId, snapshot: serializedSnapshot}) => {
+            let snapshot = WebInspector.HeapSnapshotProxy.deserialize(objectId, serializedSnapshot);
+            WebInspector.timelineManager.heapTrackingCompleted(timestamp, snapshot);
+        });
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/InspectorBackend.js b/Source/WebInspectorUI/UserInterface/Protocol/InspectorBackend.js
new file mode 100644
index 000000000..7fdc39ceb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/InspectorBackend.js
@@ -0,0 +1,432 @@
+/*
+ * 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._agents = {};
+
+        this._customTracer = null;
+        this._defaultTracer = new WebInspector.LoggingProtocolTracer;
+        this._activeTracers = [this._defaultTracer];
+
+        this._dumpInspectorTimeStats = false;
+        this._workerSupportedDomains = [];
+
+        let setting = WebInspector.autoLogProtocolMessagesSetting = new WebInspector.Setting("auto-collect-protocol-messages", false);
+        setting.addEventListener(WebInspector.Setting.Event.Changed, this._startOrStopAutomaticTracing.bind(this));
+        this._startOrStopAutomaticTracing();
+
+        this.currentDispatchState = {
+            event: null,
+            request: null,
+            response: null,
+        };
+    }
+
+    // Public
+
+    get workerSupportedDomains() { return this._workerSupportedDomains; }
+
+    // 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)
+    {
+        this._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(agent, 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)
+    {
+        InspectorBackend.mainConnection.dispatch(message);
+    }
+
+    runAfterPendingDispatches(script)
+    {
+        // FIXME: Should this respect pending dispatches in all connections?
+        InspectorBackend.mainConnection.runAfterPendingDispatches(script);
+    }
+
+    activateDomain(domainName, activationDebuggableType)
+    {
+        if (!activationDebuggableType || InspectorFrontendHost.debuggableType() === activationDebuggableType) {
+            var agent = this._agents[domainName];
+            agent.activate();
+            return agent;
+        }
+
+        return null;
+    }
+
+    workerSupportedDomain(domainName)
+    {
+        this._workerSupportedDomains.push(domainName);
+    }
+
+    // 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;
+    }
+};
+
+InspectorBackend = new InspectorBackendClass;
+
+InspectorBackend.Agent = class InspectorBackendAgent
+{
+    constructor(domainName)
+    {
+        this._domainName = domainName;
+
+        // Default connection is the main connection.
+        this._connection = InspectorBackend.mainConnection;
+        this._dispatcher = null;
+
+        // 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;
+    }
+
+    get connection()
+    {
+        return this._connection;
+    }
+
+    set connection(connection)
+    {
+        this._connection = connection;
+    }
+
+    get dispatcher()
+    {
+        return this._dispatcher;
+    }
+
+    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;
+    }
+
+    hasEventParameter(eventName, eventParameterName)
+    {
+        let event = this._events[eventName];
+        return event && event.parameterNames.includes(eventParameterName);
+    }
+
+    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(agent, qualifiedName, callSignature, replySignature)
+{
+    "use strict";
+
+    this._agent = agent;
+    this._instance = this;
+
+    let [domainName, commandName] = qualifiedName.split(".");
+    this._qualifiedName = qualifiedName;
+    this._commandName = commandName;
+    this._callSignature = callSignature || [];
+    this._replySignature = replySignature || [];
+};
+
+InspectorBackend.Command.create = function(agent, commandName, callSignature, replySignature)
+{
+    "use strict";
+
+    let instance = new InspectorBackend.Command(agent, commandName, callSignature, replySignature);
+
+    function callable() {
+        console.assert(this instanceof InspectorBackend.Agent);
+        return instance._invokeWithArguments.call(instance, this, Array.from(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(commandArguments, callback, agent)
+    {
+        "use strict";
+
+        agent = agent || this._instance._agent;
+
+        if (typeof callback === "function")
+            agent._connection._sendCommandToBackendWithCallback(this._instance, commandArguments, callback);
+        else
+            return agent._connection._sendCommandToBackendExpectingPromise(this._instance, commandArguments);
+    },
+
+    supports(parameterName)
+    {
+        "use strict";
+
+        return this._instance.callSignature.some((parameter) => parameter["name"] === parameterName);
+    },
+
+    // Private
+
+    _invokeWithArguments(agent, commandArguments)
+    {
+        "use strict";
+
+        let instance = this._instance;
+        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 commandArguments[0]}'.`);
+
+        if (callback)
+            agent._connection._sendCommandToBackendWithCallback(instance, parameters, callback);
+        else
+            return agent._connection._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..99ef37215
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendAPI.js
@@ -0,0 +1,163 @@
+/*
+ * 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.
+ */
+
+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.timelineManager.startCapturing();
+        else
+            WebInspector.timelineManager.stopCapturing();
+    },
+
+    setElementSelectionEnabled: function(enabled)
+    {
+        WebInspector.domTreeManager.inspectModeEnabled = enabled;
+    },
+
+    setDockingUnavailable: function(unavailable)
+    {
+        WebInspector.updateDockingAvailability(!unavailable);
+    },
+
+    setDockSide: function(side)
+    {
+        WebInspector.updateDockedState(side);
+    },
+
+    setIsVisible: function(visible)
+    {
+        WebInspector.updateVisibilityState(visible);
+    },
+
+    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();
+    },
+
+    showTimelines: function()
+    {
+        WebInspector.showTimelineTab();
+    },
+
+    showMainResourceForFrame: function(frameIdentifier)
+    {
+        WebInspector.showSourceCodeForFrame(frameIdentifier);
+    },
+
+    contextMenuItemSelected: function(id)
+    {
+        try {
+            WebInspector.ContextMenu.contextMenuItemSelected(id);
+        } catch (e) {
+            console.error("Uncaught exception in inspector page under contextMenuItemSelected", e);
+        }
+    },
+
+    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 null;
+
+        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/InspectorObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/InspectorObserver.js
new file mode 100644
index 000000000..59fd62dff
--- /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, WebInspector.mainTarget);
+        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/10.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js
new file mode 100644
index 000000000..2a6da81f7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.0/InspectorBackendCommands.js
@@ -0,0 +1,397 @@
+/*
+ * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013-2016 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-10.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.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.registerEvent("Console.heapSnapshot", ["timestamp", "snapshotData", "title"]);
+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.ShadowRootType", {UserAgent: "user-agent", Open: "open", Closed: "closed"});
+InspectorBackend.registerEnum("DOM.LiveRegionRelevant", {Additions: "additions", Removals: "removals", Text: "text"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesChecked", {True: "true", False: "false", Mixed: "mixed"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesCurrent", {True: "true", False: "false", Page: "page", Step: "step", Location: "location", Date: "date", Time: "time"});
+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", With: "with", Closure: "closure", Catch: "catch", FunctionName: "functionName", GlobalLexicalEnvironment: "globalLexicalEnvironment", NestedLexical: "nestedLexical"});
+InspectorBackend.registerEvent("Debugger.globalObjectCleared", []);
+InspectorBackend.registerEvent("Debugger.scriptParsed", ["scriptId", "url", "startLine", "startColumn", "endLine", "endColumn", "isContentScript", "sourceURL", "sourceMapURL"]);
+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");
+
+// Heap.
+InspectorBackend.registerHeapDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Heap");
+InspectorBackend.registerEnum("Heap.GarbageCollectionType", {Full: "full", Partial: "partial"});
+InspectorBackend.registerEvent("Heap.garbageCollected", ["collection"]);
+InspectorBackend.registerEvent("Heap.trackingStart", ["timestamp", "snapshotData"]);
+InspectorBackend.registerEvent("Heap.trackingComplete", ["timestamp", "snapshotData"]);
+InspectorBackend.registerCommand("Heap.enable", [], []);
+InspectorBackend.registerCommand("Heap.disable", [], []);
+InspectorBackend.registerCommand("Heap.gc", [], []);
+InspectorBackend.registerCommand("Heap.snapshot", [], ["timestamp", "snapshotData"]);
+InspectorBackend.registerCommand("Heap.startTracking", [], []);
+InspectorBackend.registerCommand("Heap.stopTracking", [], []);
+InspectorBackend.registerCommand("Heap.getPreview", [{"name": "heapObjectId", "type": "number", "optional": false}], ["string", "functionDetails", "preview"]);
+InspectorBackend.registerCommand("Heap.getRemoteObject", [{"name": "heapObjectId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["result"]);
+InspectorBackend.activateDomain("Heap");
+
+// 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");
+
+// Memory.
+InspectorBackend.registerMemoryDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Memory");
+InspectorBackend.registerEnum("Memory.CategoryDataType", {Javascript: "javascript", JIT: "jit", Images: "images", Layers: "layers", Page: "page", Other: "other"});
+InspectorBackend.registerEnum("Memory.MemoryPressureSeverity", {Critical: "critical", NonCritical: "non-critical"});
+InspectorBackend.registerEvent("Memory.memoryPressure", ["timestamp", "severity"]);
+InspectorBackend.registerEvent("Memory.trackingStart", ["timestamp"]);
+InspectorBackend.registerEvent("Memory.trackingUpdate", ["event"]);
+InspectorBackend.registerEvent("Memory.trackingComplete", []);
+InspectorBackend.registerCommand("Memory.enable", [], []);
+InspectorBackend.registerCommand("Memory.disable", [], []);
+InspectorBackend.registerCommand("Memory.startTracking", [], []);
+InspectorBackend.registerCommand("Memory.stopTracking", [], []);
+InspectorBackend.activateDomain("Memory", "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}, {"name": "requestId", "type": "string", "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.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.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");
+
+// ScriptProfiler.
+InspectorBackend.registerScriptProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "ScriptProfiler");
+InspectorBackend.registerEnum("ScriptProfiler.EventType", {API: "API", Microtask: "Microtask", Other: "Other"});
+InspectorBackend.registerEvent("ScriptProfiler.trackingStart", ["timestamp"]);
+InspectorBackend.registerEvent("ScriptProfiler.trackingUpdate", ["event"]);
+InspectorBackend.registerEvent("ScriptProfiler.trackingComplete", ["samples"]);
+InspectorBackend.registerEvent("ScriptProfiler.programmaticCaptureStarted", []);
+InspectorBackend.registerEvent("ScriptProfiler.programmaticCaptureStopped", []);
+InspectorBackend.registerCommand("ScriptProfiler.startTracking", [{"name": "includeSamples", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("ScriptProfiler.stopTracking", [], []);
+InspectorBackend.activateDomain("ScriptProfiler");
+
+// 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", TimerInstall: "TimerInstall", TimerRemove: "TimerRemove", TimerFire: "TimerFire", EvaluateScript: "EvaluateScript", TimeStamp: "TimeStamp", Time: "Time", TimeEnd: "TimeEnd", FunctionCall: "FunctionCall", ProbeSample: "ProbeSample", ConsoleProfile: "ConsoleProfile", RequestAnimationFrame: "RequestAnimationFrame", CancelAnimationFrame: "CancelAnimationFrame", FireAnimationFrame: "FireAnimationFrame"});
+InspectorBackend.registerEnum("Timeline.Instrument", {ScriptProfiler: "ScriptProfiler", Timeline: "Timeline", Memory: "Memory", Heap: "Heap"});
+InspectorBackend.registerEvent("Timeline.eventRecorded", ["record"]);
+InspectorBackend.registerEvent("Timeline.recordingStarted", ["startTime"]);
+InspectorBackend.registerEvent("Timeline.recordingStopped", ["endTime"]);
+InspectorBackend.registerEvent("Timeline.autoCaptureStarted", []);
+InspectorBackend.registerEvent("Timeline.programmaticCaptureStarted", []);
+InspectorBackend.registerEvent("Timeline.programmaticCaptureStopped", []);
+InspectorBackend.registerCommand("Timeline.start", [{"name": "maxCallStackDepth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("Timeline.stop", [], []);
+InspectorBackend.registerCommand("Timeline.setAutoCaptureEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Timeline.setInstruments", [{"name": "instruments", "type": "object", "optional": false}], []);
+InspectorBackend.activateDomain("Timeline", "web");
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js
new file mode 100644
index 000000000..4ded8afda
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/10.3/InspectorBackendCommands.js
@@ -0,0 +1,412 @@
+/*
+ * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013-2016 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-10.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.registerEvent("Console.heapSnapshot", ["timestamp", "snapshotData", "title"]);
+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");
+InspectorBackend.workerSupportedDomain("Console");
+
+// DOM.
+InspectorBackend.registerDOMDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOM");
+InspectorBackend.registerEnum("DOM.PseudoType", {Before: "before", After: "after"});
+InspectorBackend.registerEnum("DOM.ShadowRootType", {UserAgent: "user-agent", Open: "open", Closed: "closed"});
+InspectorBackend.registerEnum("DOM.CustomElementState", {Builtin: "builtin", Custom: "custom", Waiting: "waiting", Failed: "failed"});
+InspectorBackend.registerEnum("DOM.LiveRegionRelevant", {Additions: "additions", Removals: "removals", Text: "text"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesChecked", {True: "true", False: "false", Mixed: "mixed"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesCurrent", {True: "true", False: "false", Page: "page", Step: "step", Location: "location", Date: "date", Time: "time"});
+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.customElementStateChanged", ["nodeId", "customElementState"]);
+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", With: "with", Closure: "closure", Catch: "catch", FunctionName: "functionName", GlobalLexicalEnvironment: "globalLexicalEnvironment", NestedLexical: "nestedLexical"});
+InspectorBackend.registerEvent("Debugger.globalObjectCleared", []);
+InspectorBackend.registerEvent("Debugger.scriptParsed", ["scriptId", "url", "startLine", "startColumn", "endLine", "endColumn", "isContentScript", "sourceURL", "sourceMapURL", "module"]);
+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", "asyncStackTrace"]);
+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.setAsyncStackTraceDepth", [{"name": "depth", "type": "number", "optional": false}], []);
+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.continueUntilNextRunLoop", [], []);
+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.setPauseOnAssertions", [{"name": "enabled", "type": "boolean", "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");
+InspectorBackend.workerSupportedDomain("Debugger");
+
+// Heap.
+InspectorBackend.registerHeapDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Heap");
+InspectorBackend.registerEnum("Heap.GarbageCollectionType", {Full: "full", Partial: "partial"});
+InspectorBackend.registerEvent("Heap.garbageCollected", ["collection"]);
+InspectorBackend.registerEvent("Heap.trackingStart", ["timestamp", "snapshotData"]);
+InspectorBackend.registerEvent("Heap.trackingComplete", ["timestamp", "snapshotData"]);
+InspectorBackend.registerCommand("Heap.enable", [], []);
+InspectorBackend.registerCommand("Heap.disable", [], []);
+InspectorBackend.registerCommand("Heap.gc", [], []);
+InspectorBackend.registerCommand("Heap.snapshot", [], ["timestamp", "snapshotData"]);
+InspectorBackend.registerCommand("Heap.startTracking", [], []);
+InspectorBackend.registerCommand("Heap.stopTracking", [], []);
+InspectorBackend.registerCommand("Heap.getPreview", [{"name": "heapObjectId", "type": "number", "optional": false}], ["string", "functionDetails", "preview"]);
+InspectorBackend.registerCommand("Heap.getRemoteObject", [{"name": "heapObjectId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["result"]);
+InspectorBackend.activateDomain("Heap");
+
+// 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");
+
+// Memory.
+InspectorBackend.registerMemoryDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Memory");
+InspectorBackend.registerEnum("Memory.CategoryDataType", {Javascript: "javascript", JIT: "jit", Images: "images", Layers: "layers", Page: "page", Other: "other"});
+InspectorBackend.registerEnum("Memory.MemoryPressureSeverity", {Critical: "critical", NonCritical: "non-critical"});
+InspectorBackend.registerEvent("Memory.memoryPressure", ["timestamp", "severity"]);
+InspectorBackend.registerEvent("Memory.trackingStart", ["timestamp"]);
+InspectorBackend.registerEvent("Memory.trackingUpdate", ["event"]);
+InspectorBackend.registerEvent("Memory.trackingComplete", []);
+InspectorBackend.registerCommand("Memory.enable", [], []);
+InspectorBackend.registerCommand("Memory.disable", [], []);
+InspectorBackend.registerCommand("Memory.startTracking", [], []);
+InspectorBackend.registerCommand("Memory.stopTracking", [], []);
+InspectorBackend.activateDomain("Memory", "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", "targetId"]);
+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", Fetch: "Fetch", 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.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}, {"name": "requestId", "type": "string", "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.setShowPaintRects", [{"name": "result", "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.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", Proxy: "proxy"});
+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", Proxy: "proxy"});
+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", Proxy: "proxy"});
+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.enableControlFlowProfiler", [], []);
+InspectorBackend.registerCommand("Runtime.disableControlFlowProfiler", [], []);
+InspectorBackend.registerCommand("Runtime.getBasicBlocks", [{"name": "sourceID", "type": "string", "optional": false}], ["basicBlocks"]);
+InspectorBackend.activateDomain("Runtime");
+InspectorBackend.workerSupportedDomain("Runtime");
+
+// ScriptProfiler.
+InspectorBackend.registerScriptProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "ScriptProfiler");
+InspectorBackend.registerEnum("ScriptProfiler.EventType", {API: "API", Microtask: "Microtask", Other: "Other"});
+InspectorBackend.registerEvent("ScriptProfiler.trackingStart", ["timestamp"]);
+InspectorBackend.registerEvent("ScriptProfiler.trackingUpdate", ["event"]);
+InspectorBackend.registerEvent("ScriptProfiler.trackingComplete", ["samples"]);
+InspectorBackend.registerEvent("ScriptProfiler.programmaticCaptureStarted", []);
+InspectorBackend.registerEvent("ScriptProfiler.programmaticCaptureStopped", []);
+InspectorBackend.registerCommand("ScriptProfiler.startTracking", [{"name": "includeSamples", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("ScriptProfiler.stopTracking", [], []);
+InspectorBackend.activateDomain("ScriptProfiler");
+
+// 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", TimerInstall: "TimerInstall", TimerRemove: "TimerRemove", TimerFire: "TimerFire", EvaluateScript: "EvaluateScript", TimeStamp: "TimeStamp", Time: "Time", TimeEnd: "TimeEnd", FunctionCall: "FunctionCall", ProbeSample: "ProbeSample", ConsoleProfile: "ConsoleProfile", RequestAnimationFrame: "RequestAnimationFrame", CancelAnimationFrame: "CancelAnimationFrame", FireAnimationFrame: "FireAnimationFrame"});
+InspectorBackend.registerEnum("Timeline.Instrument", {ScriptProfiler: "ScriptProfiler", Timeline: "Timeline", Memory: "Memory", Heap: "Heap"});
+InspectorBackend.registerEvent("Timeline.eventRecorded", ["record"]);
+InspectorBackend.registerEvent("Timeline.recordingStarted", ["startTime"]);
+InspectorBackend.registerEvent("Timeline.recordingStopped", ["endTime"]);
+InspectorBackend.registerEvent("Timeline.autoCaptureStarted", []);
+InspectorBackend.registerEvent("Timeline.programmaticCaptureStarted", []);
+InspectorBackend.registerEvent("Timeline.programmaticCaptureStopped", []);
+InspectorBackend.registerCommand("Timeline.start", [{"name": "maxCallStackDepth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("Timeline.stop", [], []);
+InspectorBackend.registerCommand("Timeline.setAutoCaptureEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Timeline.setInstruments", [{"name": "instruments", "type": "object", "optional": false}], []);
+InspectorBackend.activateDomain("Timeline", "web");
+
+// Worker.
+InspectorBackend.registerWorkerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Worker");
+InspectorBackend.registerEvent("Worker.workerCreated", ["workerId", "url"]);
+InspectorBackend.registerEvent("Worker.workerTerminated", ["workerId"]);
+InspectorBackend.registerEvent("Worker.dispatchMessageFromWorker", ["workerId", "message"]);
+InspectorBackend.registerCommand("Worker.enable", [], []);
+InspectorBackend.registerCommand("Worker.disable", [], []);
+InspectorBackend.registerCommand("Worker.initialized", [{"name": "workerId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.sendMessageToWorker", [{"name": "workerId", "type": "string", "optional": false}, {"name": "message", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("Worker", "web");
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..f55c97477
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/7.0/InspectorBackendCommands.js
@@ -0,0 +1,317 @@
+/*
+ * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013-2016 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.setEmulatedMedia", [{"name": "media", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCompositingBordersVisible", [], ["result"]);
+InspectorBackend.registerCommand("Page.setCompositingBordersVisible", [{"name": "visible", "type": "boolean", "optional": false}], []);
+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..5e4d78c17
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js
@@ -0,0 +1,342 @@
+/*
+ * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013-2016 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.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.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..479612412
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js
@@ -0,0 +1,339 @@
+/*
+ * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013-2016 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.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.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..00af6665a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js
@@ -0,0 +1,366 @@
+/*
+ * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013-2016 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.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.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..7f75338d8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/LoadInspectorBackendCommands.js
@@ -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.
+ */
+
+(function() {
+    let backendCommandsURL = InspectorFrontendHost.backendCommandsURL() || "Protocol/InspectorBackendCommands.js";
+    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..c2c0fa6cc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/LoggingProtocolTracer.js
@@ -0,0 +1,120 @@
+/*
+ * 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)}`);
+            if (entry.exception) {
+                this._logToConsole(entry.exception);
+                if (entry.exception.stack)
+                    this._logToConsole(entry.exception.stack);
+            }
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/MainTarget.js b/Source/WebInspectorUI/UserInterface/Protocol/MainTarget.js
new file mode 100644
index 000000000..9dc969fe6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/MainTarget.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.MainTarget = class MainTarget extends WebInspector.Target
+{
+    constructor(connection)
+    {
+        super("main", "", WebInspector.Target.Type.Main, InspectorBackend.mainConnection);
+
+        let displayName = WebInspector.debuggableType === WebInspector.DebuggableType.Web ? WebInspector.UIString("Main Frame") : this.displayName;
+        this._executionContext = new WebInspector.ExecutionContext(this, WebInspector.RuntimeManager.TopLevelContextExecutionIdentifier, displayName, true, null);
+    }
+
+    // Protected (Target)
+
+    get displayName()
+    {
+        switch (WebInspector.debuggableType) {
+        case WebInspector.DebuggableType.Web:
+            return WebInspector.UIString("Page");
+        case WebInspector.DebuggableType.JavaScript:
+            return WebInspector.UIString("JavaScript Context");
+        default:
+            console.error("Unexpected debuggable type: ", WebInspector.debuggableType);
+            return WebInspector.UIString("Main");
+        }
+    }
+
+    get mainResource()
+    {
+        let mainFrame = WebInspector.frameResourceManager.mainFrame;
+        return mainFrame ? mainFrame.mainResource : null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/MemoryObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/MemoryObserver.js
new file mode 100644
index 000000000..1b0b475cc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/MemoryObserver.js
@@ -0,0 +1,49 @@
+/*
+ * 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.
+
+    memoryPressure(timestamp, severity)
+    {
+        WebInspector.memoryManager.memoryPressure(timestamp, severity);
+    }
+
+    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..70f234682
--- /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, targetId)
+    {
+        WebInspector.frameResourceManager.resourceRequestWillBeSent(requestId, frameId, loaderId, request, type, redirectResponse, timestamp, initiator, targetId);
+    }
+
+    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..c136e5367
--- /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)
+    {
+        // COMPATIBILITY (iOS 10): Page.javascriptDialogOpening was removed after iOS 10.
+    }
+
+    javascriptDialogClosed()
+    {
+        // COMPATIBILITY (iOS 10): Page.javascriptDialogClosed was removed after iOS 10.
+    }
+
+    scriptsEnabled(enabled)
+    {
+        // COMPATIBILITY (iOS 10): Page.scriptsEnabled was removed after iOS 10.
+    }
+};
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..f4c99fbec
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js
@@ -0,0 +1,679 @@
+/*
+ * 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(target, objectId, type, subtype, value, description, size, classPrototype, className, preview)
+    {
+        console.assert(type);
+        console.assert(!preview || preview instanceof WebInspector.ObjectPreview);
+        console.assert(!target || target instanceof WebInspector.Target);
+
+        this._target = target || WebInspector.mainTarget;
+        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(undefined, WebInspector.RemoteObject.FakeRemoteObjectId, "object");
+    }
+
+    static fromPrimitiveValue(value)
+    {
+        return new WebInspector.RemoteObject(undefined, undefined, typeof value, undefined, value, undefined, undefined, undefined, undefined);
+    }
+
+    static fromPayload(payload, target)
+    {
+        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, target);
+
+        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(target, 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, WebInspector.mainTarget));
+        });
+    }
+
+    static type(remoteObject)
+    {
+        if (remoteObject === null)
+            return "null";
+
+        var type = typeof remoteObject;
+        if (type !== "object" && type !== "function")
+            return type;
+
+        return remoteObject.type;
+    }
+
+    // Public
+
+    get target()
+    {
+        return this._target;
+    }
+
+    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) {
+            this._target.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;
+        }
+
+        this._target.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) {
+            this._target.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;
+        }
+
+        this._target.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).
+        this._target.RuntimeAgent.evaluate.invoke({expression: appendWebInspectorSourceURL(value), doNotPauseOnExceptionsAndMuteConsole: true}, evaluatedCallback.bind(this), this._target.RuntimeAgent);
+
+        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.
+
+            this._target.RuntimeAgent.callFunctionOn(this._objectId, appendWebInspectorSourceURL(setPropertyValue.toString()), [{value: name}, result], true, undefined, propertySetCallback.bind(this));
+
+            if (result._objectId)
+                this._target.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");
+
+        let objectGroup = this.isWeakCollection() ? this._weakCollectionObjectGroup() : "";
+
+        this._target.RuntimeAgent.getCollectionEntries(this._objectId, objectGroup, start, numberToFetch, (error, entries) => {
+            entries = entries.map((x) => WebInspector.CollectionEntry.fromPayload(x, this._target));
+            callback(entries);
+        });
+    }
+
+    releaseWeakCollectionEntries()
+    {
+        console.assert(this.isWeakCollection());
+
+        this._target.RuntimeAgent.releaseObjectGroup(this._weakCollectionObjectGroup());
+    }
+
+    pushNodeToFrontend(callback)
+    {
+        if (this._objectId)
+            WebInspector.domTreeManager.pushNodeToFrontend(this._objectId, callback);
+        else
+            callback(0);
+    }
+
+    getProperty(propertyName, callback)
+    {
+        function inspectedPage_object_getProperty(property) {
+            return this[property];
+        }
+
+        this.callFunction(inspectedPage_object_getProperty, [propertyName], true, callback);
+    }
+
+    callFunction(functionDeclaration, args, generatePreview, callback)
+    {
+        function mycallback(error, result, wasThrown)
+        {
+            result = result ? WebInspector.RemoteObject.fromPayload(result, this._target) : null;
+
+            if (callback && typeof callback === "function")
+                callback(error, result, wasThrown);
+        }
+
+        if (args)
+            args = args.map(WebInspector.RemoteObject.createCallArgument);
+
+        this._target.RuntimeAgent.callFunctionOn(this._objectId, appendWebInspectorSourceURL(functionDeclaration.toString()), args, true, undefined, !!generatePreview, mycallback.bind(this));
+    }
+
+    callFunctionJSON(functionDeclaration, args, callback)
+    {
+        function mycallback(error, result, wasThrown)
+        {
+            callback((error || wasThrown) ? null : result.value);
+        }
+
+        this._target.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.bind(this));
+    }
+
+    release()
+    {
+        if (this._objectId && !this._isFakeObject())
+            this._target.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;
+        }
+
+        this._target.DebuggerAgent.getFunctionDetails(this._objectId, (error, response) => {
+            if (error) {
+                result.reject(error);
+                return;
+            }
+
+            var location = response.location;
+            var sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId, this._target);
+
+            if (!sourceCode || (!WebInspector.isDebugUIEnabled() && isWebKitInternalScript(sourceCode.sourceURL))) {
+                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;
+        }
+
+        this._target.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;
+        }
+
+        let descriptors = properties.map((payload) => {
+            return WebInspector.PropertyDescriptor.fromPayload(payload, false, this._target);
+        });
+
+        if (internalProperties) {
+            descriptors = descriptors.concat(internalProperties.map((payload) => {
+                return WebInspector.PropertyDescriptor.fromPayload(payload, true, this._target);
+            }));
+        }
+
+        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;
+        }
+
+        this._target.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, this._target), property));
+                if (property.set)
+                    result.push(new WebInspector.DeprecatedRemoteObjectProperty("set " + property.name, WebInspector.RemoteObject.fromPayload(property.set, this._target), property));
+            } else
+                result.push(new WebInspector.DeprecatedRemoteObjectProperty(property.name, WebInspector.RemoteObject.fromPayload(property.value, this._target), 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..0d299547f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/ScriptProfilerObserver.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.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);
+    }
+
+    programmaticCaptureStarted()
+    {
+        WebInspector.timelineManager.scriptProfilerProgrammaticCaptureStarted();
+    }
+
+    programmaticCaptureStopped()
+    {
+        WebInspector.timelineManager.scriptProfilerProgrammaticCaptureStopped();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Target.js b/Source/WebInspectorUI/UserInterface/Protocol/Target.js
new file mode 100644
index 000000000..ffc77b420
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Target.js
@@ -0,0 +1,95 @@
+/*
+ * 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.Target = class Target extends WebInspector.Object
+{
+    constructor(identifier, name, type, connection)
+    {
+        super();
+
+        this._identifier = identifier;
+        this._name = name;
+        this._type = type;
+        this._connection = connection;
+        this._executionContext = null;
+        this._mainResource = null;
+        this._resourceCollection = new WebInspector.ResourceCollection;
+        this._extraScriptCollection = new WebInspector.Collection(WebInspector.Collection.TypeVerifier.Script);
+
+        this._connection.target = this;
+    }
+
+    // Agents
+
+    get RuntimeAgent() { return this._connection._agents.Runtime; }
+    get ConsoleAgent() { return this._connection._agents.Console; }
+    get DebuggerAgent() { return this._connection._agents.Debugger; }
+    get HeapAgent() { return this._connection._agents.Heap; }
+
+    // Public
+
+    get identifier() { return this._identifier; }
+    get name() { return this._name; }
+    get type() { return this._type; }
+    get connection() { return this._connection; }
+    get executionContext() { return this._executionContext; }
+
+    get resourceCollection() { return this._resourceCollection; }
+    get extraScriptCollection() { return this._extraScriptCollection; }
+
+    get mainResource() { return this._mainResource; }
+    set mainResource(resource) { this._mainResource = resource; }
+
+    addResource(resource)
+    {
+        this._resourceCollection.add(resource);
+
+        this.dispatchEventToListeners(WebInspector.Target.Event.ResourceAdded, {resource});
+    }
+
+    adoptResource(resource)
+    {
+        resource._target = this;
+
+        this.addResource(resource);
+    }
+
+    addScript(script)
+    {
+        this._extraScriptCollection.add(script);
+
+        this.dispatchEventToListeners(WebInspector.Target.Event.ScriptAdded, {script});
+    }
+};
+
+WebInspector.Target.Type = {
+    Main: Symbol("main"),
+    Worker: Symbol("worker"),
+};
+
+WebInspector.Target.Event = {
+    ResourceAdded: "target-resource-added",
+    ScriptAdded: "target-script-added",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/TimelineObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/TimelineObserver.js
new file mode 100644
index 000000000..99dfb9763
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/TimelineObserver.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.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);
+    }
+
+    autoCaptureStarted()
+    {
+        WebInspector.timelineManager.autoCaptureStarted();
+    }
+
+    programmaticCaptureStarted()
+    {
+        WebInspector.timelineManager.programmaticCaptureStarted();
+    }
+
+    programmaticCaptureStopped()
+    {
+        WebInspector.timelineManager.programmaticCaptureStopped();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/WorkerObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/WorkerObserver.js
new file mode 100644
index 000000000..9a1a8db83
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/WorkerObserver.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.WorkerObserver = class WorkerObserver
+{
+    // Events defined by the "Worker" domain.
+
+    workerCreated(workerId, url)
+    {
+        WebInspector.workerManager.workerCreated(workerId, url);
+    }
+
+    workerTerminated(workerId)
+    {
+        WebInspector.workerManager.workerTerminated(workerId);
+    }
+
+    dispatchMessageFromWorker(workerId, message)
+    {
+        WebInspector.workerManager.dispatchMessageFromWorker(workerId, message);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/WorkerTarget.js b/Source/WebInspectorUI/UserInterface/Protocol/WorkerTarget.js
new file mode 100644
index 000000000..fbafb8c61
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/WorkerTarget.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.WorkerTarget = class WorkerTarget extends WebInspector.Target
+{
+    constructor(workerId, name, connection)
+    {
+        super(workerId, name, WebInspector.Target.Type.Worker, connection);
+
+        WebInspector.frameResourceManager.adoptOrphanedResourcesForTarget(this);
+
+        if (this.RuntimeAgent) {
+            this._executionContext = new WebInspector.ExecutionContext(this, WebInspector.RuntimeManager.TopLevelContextExecutionIdentifier, this.displayName, false, null);
+            this.RuntimeAgent.enable();
+            if (WebInspector.showJavaScriptTypeInformationSetting && WebInspector.showJavaScriptTypeInformationSetting.value)
+                this.RuntimeAgent.enableTypeProfiler();
+            if (WebInspector.enableControlFlowProfilerSetting && WebInspector.enableControlFlowProfilerSetting.value)
+                this.RuntimeAgent.enableControlFlowProfiler();
+        }
+
+        if (this.DebuggerAgent)
+            WebInspector.debuggerManager.initializeTarget(this);
+
+        if (this.ConsoleAgent)
+            this.ConsoleAgent.enable();
+
+        if (this.HeapAgent)
+            this.HeapAgent.enable();
+    }
+
+    // Protected (Target)
+
+    get displayName()
+    {
+        return WebInspector.displayNameForURL(this._name);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Proxies/FormatterWorkerProxy.js b/Source/WebInspectorUI/UserInterface/Proxies/FormatterWorkerProxy.js
new file mode 100644
index 000000000..96159fb87
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Proxies/FormatterWorkerProxy.js
@@ -0,0 +1,91 @@
+/*
+ * 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.FormatterWorkerProxy = class FormatterWorkerProxy extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._formatterWorker = new Worker("Workers/Formatter/FormatterWorker.js");
+        this._formatterWorker.addEventListener("message", this._handleMessage.bind(this));
+
+        this._nextCallId = 1;
+        this._callbacks = new Map;
+    }
+
+    // Static
+
+    static singleton()
+    {
+        if (!FormatterWorkerProxy.instance)
+            FormatterWorkerProxy.instance = new FormatterWorkerProxy;
+        return FormatterWorkerProxy.instance;
+    }
+
+    // Actions
+
+    formatJavaScript(sourceText, isModule, indentString, includeSourceMapData)
+    {
+        this.performAction("formatJavaScript", ...arguments);
+    }
+
+    // Public
+
+    performAction(actionName)
+    {
+        let callId = this._nextCallId++;
+        let callback = arguments[arguments.length - 1];
+        let actionArguments = Array.prototype.slice.call(arguments, 1, arguments.length - 1);
+
+        console.assert(typeof actionName === "string", "performAction should always have an actionName");
+        console.assert(typeof callback === "function", "performAction should always have a callback");
+
+        this._callbacks.set(callId, callback);
+        this._postMessage({callId, actionName, actionArguments});
+    }
+
+    // Private
+
+    _postMessage()
+    {
+        this._formatterWorker.postMessage(...arguments);
+    }
+
+    _handleMessage(event)
+    {
+        let data = event.data;
+
+        // Action response.
+        if (data.callId) {
+            let callback = this._callbacks.get(data.callId);
+            this._callbacks.delete(data.callId);
+            callback(data.result);
+            return;
+        }
+
+        console.error("Unexpected FormatterWorker message", data);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotDiffProxy.js b/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotDiffProxy.js
new file mode 100644
index 000000000..4dc62ed61
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotDiffProxy.js
@@ -0,0 +1,107 @@
+/*
+ * 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.HeapSnapshotDiffProxy = class HeapSnapshotDiffProxy extends WebInspector.Object
+{
+    constructor(snapshotDiffObjectId, snapshot1, snapshot2, totalSize, totalObjectCount, categories)
+    {
+        super();
+
+        this._proxyObjectId = snapshotDiffObjectId;
+
+        console.assert(snapshot1 instanceof WebInspector.HeapSnapshotProxy);
+        console.assert(snapshot2 instanceof WebInspector.HeapSnapshotProxy);
+
+        this._snapshot1 = snapshot1;
+        this._snapshot2 = snapshot2;
+        this._totalSize = totalSize;
+        this._totalObjectCount = totalObjectCount;
+        this._categories = Map.fromObject(categories);
+    }
+
+    // Static
+
+    static deserialize(objectId, serializedSnapshotDiff)
+    {
+        let {snapshot1: serializedSnapshot1, snapshot2: serializedSnapshot2, totalSize, totalObjectCount, categories} = serializedSnapshotDiff;
+        // FIXME: The objectId for these snapshots is the snapshotDiff's objectId. Currently these
+        // snapshots are only used for static data so the proxing doesn't matter. However,
+        // should we serialize the objectId with the snapshot so we have the right objectId?
+        let snapshot1 = WebInspector.HeapSnapshotProxy.deserialize(objectId, serializedSnapshot1);
+        let snapshot2 = WebInspector.HeapSnapshotProxy.deserialize(objectId, serializedSnapshot2);
+        return new WebInspector.HeapSnapshotDiffProxy(objectId, snapshot1, snapshot2, totalSize, totalObjectCount, categories);
+    }
+
+    // Public
+
+    get snapshot1() { return this._snapshot1; }
+    get snapshot2() { return this._snapshot2; }
+    get totalSize() { return this._totalSize; }
+    get totalObjectCount() { return this._totalObjectCount; }
+    get categories() { return this._categories; }
+    get invalid() { return this._snapshot1.invalid || this._snapshot2.invalid; }
+
+    updateForCollectionEvent(event)
+    {
+        console.assert(!this.invalid);
+        if (!event.data.affectedSnapshots.includes(this._snapshot2._identifier))
+            return;
+
+        this.update(() => {
+            this.dispatchEventToListeners(WebInspector.HeapSnapshotProxy.Event.CollectedNodes, event.data);
+        });
+    }
+
+    allocationBucketCounts(bucketSizes, callback)
+    {
+        console.assert(!this.invalid);
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "allocationBucketCounts", bucketSizes, callback);
+    }
+
+    instancesWithClassName(className, callback)
+    {
+        console.assert(!this.invalid);
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "instancesWithClassName", className, (serializedNodes) => {
+            callback(serializedNodes.map(WebInspector.HeapSnapshotNodeProxy.deserialize.bind(null, this._proxyObjectId)));
+        });
+    }
+
+    update(callback)
+    {
+        console.assert(!this.invalid);
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "update", ({liveSize, categories}) => {
+            this._categories = Map.fromObject(categories);
+            callback();
+        });
+    }
+
+    nodeWithIdentifier(nodeIdentifier, callback)
+    {
+        console.assert(!this.invalid);
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "nodeWithIdentifier", nodeIdentifier, (serializedNode) => {
+            callback(WebInspector.HeapSnapshotNodeProxy.deserialize(this._proxyObjectId, serializedNode));
+        });
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotEdgeProxy.js b/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotEdgeProxy.js
new file mode 100644
index 000000000..e4d44b176
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotEdgeProxy.js
@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+
+// Directed edge between two HeapSnapshotNodes 'from' and 'to'.
+
+WebInspector.HeapSnapshotEdgeProxy = class HeapSnapshotEdgeProxy
+{
+    constructor(objectId, fromIdentifier, toIdentifier, type, data)
+    {
+        this._proxyObjectId = objectId;
+
+        console.assert(type in WebInspector.HeapSnapshotEdgeProxy.EdgeType);
+
+        this.fromIdentifier = fromIdentifier;
+        this.toIdentifier = toIdentifier;
+        this.type = type;
+        this.data = data;
+
+        this.from = null;
+        this.to = null;
+    }
+
+    isPrivateSymbol()
+    {
+        if (WebInspector.isDebugUIEnabled())
+            return false;
+
+        return typeof this.data === "string" && this.data.startsWith("PrivateSymbol");
+    }
+
+    // Static
+
+    static deserialize(objectId, serializedEdge)
+    {
+        let {from, to, type, data} = serializedEdge;
+        return new WebInspector.HeapSnapshotEdgeProxy(objectId, from, to, type, data);
+    }
+};
+
+WebInspector.HeapSnapshotEdgeProxy.EdgeType = {
+    Internal: "Internal",       // No data.
+    Property: "Property",       // data is string property name.
+    Index: "Index",             // data is numeric index.
+    Variable: "Variable",       // data is string variable name.
+};
diff --git a/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotNodeProxy.js b/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotNodeProxy.js
new file mode 100644
index 000000000..908400d0e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotNodeProxy.js
@@ -0,0 +1,99 @@
+/*
+ * 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.HeapSnapshotNodeProxy = class HeapSnapshotNodeProxy
+{
+    constructor(snapshotObjectId, identifier, className, size, retainedSize, internal, gcRoot, dead, dominatorNodeIdentifier, hasChildren)
+    {
+        this._proxyObjectId = snapshotObjectId;
+
+        this.id = identifier;
+        this.className = className;
+        this.size = size;
+        this.retainedSize = retainedSize;
+        this.internal = internal;
+        this.gcRoot = gcRoot;
+        this.dead = dead;
+        this.dominatorNodeIdentifier = dominatorNodeIdentifier;
+        this.hasChildren = hasChildren;
+    }
+
+    // Static
+
+    static deserialize(objectId, serializedNode)
+    {
+        let {id, className, size, retainedSize, internal, gcRoot, dead, dominatorNodeIdentifier, hasChildren} = serializedNode;
+        return new WebInspector.HeapSnapshotNodeProxy(objectId, id, className, size, retainedSize, internal, gcRoot, dead, dominatorNodeIdentifier, hasChildren);
+    }
+
+    // Proxied
+
+    shortestGCRootPath(callback)
+    {
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "shortestGCRootPath", this.id, (serializedPath) => {
+            let isNode = false;
+            let path = serializedPath.map((component) => {
+                isNode = !isNode;
+                if (isNode)
+                    return WebInspector.HeapSnapshotNodeProxy.deserialize(this._proxyObjectId, component);
+                return WebInspector.HeapSnapshotEdgeProxy.deserialize(this._proxyObjectId, component);
+            });
+
+            for (let i = 1; i < path.length; i += 2) {
+                console.assert(path[i] instanceof WebInspector.HeapSnapshotEdgeProxy);
+                let edge = path[i];
+                edge.from = path[i - 1];
+                edge.to = path[i + 1];
+            }
+
+            callback(path);
+        });
+    }
+
+    dominatedNodes(callback)
+    {
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "dominatedNodes", this.id, (serializedNodes) => {
+            callback(serializedNodes.map(WebInspector.HeapSnapshotNodeProxy.deserialize.bind(null, this._proxyObjectId)));
+        });
+    }
+
+    retainedNodes(callback)
+    {
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "retainedNodes", this.id, ({retainedNodes: serializedNodes, edges: serializedEdges}) => {
+            let deserializedNodes = serializedNodes.map(WebInspector.HeapSnapshotNodeProxy.deserialize.bind(null, this._proxyObjectId));
+            let deserializedEdges = serializedEdges.map(WebInspector.HeapSnapshotEdgeProxy.deserialize.bind(null, this._proxyObjectId));
+            callback(deserializedNodes, deserializedEdges);
+        });
+    }
+
+    retainers(callback)
+    {
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "retainers", this.id, ({retainers: serializedNodes, edges: serializedEdges}) => {
+            let deserializedNodes = serializedNodes.map(WebInspector.HeapSnapshotNodeProxy.deserialize.bind(null, this._proxyObjectId));
+            let deserializedEdges = serializedEdges.map(WebInspector.HeapSnapshotEdgeProxy.deserialize.bind(null, this._proxyObjectId));
+            callback(deserializedNodes, deserializedEdges);
+        });
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotProxy.js b/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotProxy.js
new file mode 100644
index 000000000..1c8ed63a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotProxy.js
@@ -0,0 +1,135 @@
+/*
+ * 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.HeapSnapshotProxy = class HeapSnapshotProxy extends WebInspector.Object
+{
+    constructor(snapshotObjectId, identifier, title, totalSize, totalObjectCount, liveSize, categories)
+    {
+        super();
+
+        this._proxyObjectId = snapshotObjectId;
+
+        this._identifier = identifier;
+        this._title = title;
+        this._totalSize = totalSize;
+        this._totalObjectCount = totalObjectCount;
+        this._liveSize = liveSize;
+        this._categories = Map.fromObject(categories);
+
+        console.assert(!this.invalid);
+
+        if (!WebInspector.HeapSnapshotProxy.ValidSnapshotProxies)
+            WebInspector.HeapSnapshotProxy.ValidSnapshotProxies = [];
+        WebInspector.HeapSnapshotProxy.ValidSnapshotProxies.push(this);
+    }
+
+    // Static
+
+    static deserialize(objectId, serializedSnapshot)
+    {
+        let {identifier, title, totalSize, totalObjectCount, liveSize, categories} = serializedSnapshot;
+        return new WebInspector.HeapSnapshotProxy(objectId, identifier, title, totalSize, totalObjectCount, liveSize, categories);
+    }
+
+    static invalidateSnapshotProxies()
+    {
+        if (!WebInspector.HeapSnapshotProxy.ValidSnapshotProxies)
+            return;
+
+        for (let snapshotProxy of WebInspector.HeapSnapshotProxy.ValidSnapshotProxies)
+            snapshotProxy._invalidate();
+
+        WebInspector.HeapSnapshotProxy.ValidSnapshotProxies = null;
+    }
+
+    // Public
+
+    get proxyObjectId() { return this._proxyObjectId; }
+    get identifier() { return this._identifier; }
+    get title() { return this._title; }
+    get totalSize() { return this._totalSize; }
+    get totalObjectCount() { return this._totalObjectCount; }
+    get liveSize() { return this._liveSize; }
+    get categories() { return this._categories; }
+    get invalid() { return this._proxyObjectId === 0; }
+
+    updateForCollectionEvent(event)
+    {
+        console.assert(!this.invalid);
+        if (!event.data.affectedSnapshots.includes(this._identifier))
+            return;
+
+        this.update(() => {
+            this.dispatchEventToListeners(WebInspector.HeapSnapshotProxy.Event.CollectedNodes, event.data);
+        });
+    }
+
+    allocationBucketCounts(bucketSizes, callback)
+    {
+        console.assert(!this.invalid);
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "allocationBucketCounts", bucketSizes, callback);
+    }
+
+    instancesWithClassName(className, callback)
+    {
+        console.assert(!this.invalid);
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "instancesWithClassName", className, (serializedNodes) => {
+            callback(serializedNodes.map(WebInspector.HeapSnapshotNodeProxy.deserialize.bind(null, this._proxyObjectId)));
+        });
+    }
+
+    update(callback)
+    {
+        console.assert(!this.invalid);
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "update", ({liveSize, categories}) => {
+            this._liveSize = liveSize;
+            this._categories = Map.fromObject(categories);
+            callback();
+        });
+    }
+
+    nodeWithIdentifier(nodeIdentifier, callback)
+    {
+        console.assert(!this.invalid);
+        WebInspector.HeapSnapshotWorkerProxy.singleton().callMethod(this._proxyObjectId, "nodeWithIdentifier", nodeIdentifier, (serializedNode) => {
+            callback(WebInspector.HeapSnapshotNodeProxy.deserialize(this._proxyObjectId, serializedNode));
+        });
+    }
+
+    // Private
+
+    _invalidate()
+    {
+        this._proxyObjectId = 0;
+        this._liveSize = 0;
+
+        this.dispatchEventToListeners(WebInspector.HeapSnapshotProxy.Event.Invalidated);
+    }
+};
+
+WebInspector.HeapSnapshotProxy.Event = {
+    CollectedNodes: "heap-snapshot-proxy-collected-nodes",
+    Invalidated: "heap-snapshot-proxy-invalidated",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotWorkerProxy.js b/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotWorkerProxy.js
new file mode 100644
index 000000000..c47993c5e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Proxies/HeapSnapshotWorkerProxy.js
@@ -0,0 +1,140 @@
+/*
+ * 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.HeapSnapshotWorkerProxy = class HeapSnapshotWorkerProxy extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._heapSnapshotWorker = new Worker("Workers/HeapSnapshot/HeapSnapshotWorker.js");
+        this._heapSnapshotWorker.addEventListener("message", this._handleMessage.bind(this));
+
+        this._nextCallId = 1;
+        this._callbacks = new Map;
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    }
+
+    // Static
+
+    static singleton()
+    {
+        if (!HeapSnapshotWorkerProxy.instance)
+            HeapSnapshotWorkerProxy.instance = new HeapSnapshotWorkerProxy;
+        return HeapSnapshotWorkerProxy.instance;
+    }
+
+    // Actions
+
+    clearSnapshots(callback)
+    {
+        this.performAction("clearSnapshots", callback);
+    }
+
+    createSnapshot(snapshotStringData, callback)
+    {
+        this.performAction("createSnapshot", ...arguments);
+    }
+
+    createSnapshotDiff(objectId1, objectId2, callback)
+    {
+        this.performAction("createSnapshotDiff", ...arguments);
+    }
+
+    // Public
+
+    performAction(actionName)
+    {
+        let callId = this._nextCallId++;
+        let callback = arguments[arguments.length - 1];
+        let actionArguments = Array.prototype.slice.call(arguments, 1, arguments.length - 1);
+
+        console.assert(typeof actionName === "string", "performAction should always have an actionName");
+        console.assert(typeof callback === "function", "performAction should always have a callback");
+
+        this._callbacks.set(callId, callback);
+        this._postMessage({callId, actionName, actionArguments});
+    }
+
+    callMethod(objectId, methodName)
+    {
+        let callId = this._nextCallId++;
+        let callback = arguments[arguments.length - 1];
+        let methodArguments = Array.prototype.slice.call(arguments, 2, arguments.length - 1);
+
+        console.assert(typeof objectId === "number", "callMethod should always have an objectId");
+        console.assert(typeof methodName === "string", "callMethod should always have a methodName");
+        console.assert(typeof callback === "function", "callMethod should always have a callback");
+
+        this._callbacks.set(callId, callback);
+        this._postMessage({callId, objectId, methodName, methodArguments});
+    }
+
+    // Private
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this.clearSnapshots(() => {
+            WebInspector.HeapSnapshotProxy.invalidateSnapshotProxies();
+        });
+    }
+
+    _postMessage()
+    {
+        this._heapSnapshotWorker.postMessage(...arguments);
+    }
+
+    _handleMessage(event)
+    {
+        let data = event.data;
+
+        // Error.
+        if (data.error) {
+            console.assert(data.callId);
+            this._callbacks.delete(data.callId);
+            return;
+        }
+
+        // Event.
+        if (data.eventName) {
+            this.dispatchEventToListeners(data.eventName, data.eventData);
+            return;
+        }
+
+        // Action or Method Response.
+        if (data.callId) {
+            let callback = this._callbacks.get(data.callId);
+            this._callbacks.delete(data.callId);
+            callback(data.result);
+            return;
+        }
+
+        console.error("Unexpected HeapSnapshotWorker message", data);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/QuickConsole.css b/Source/WebInspectorUI/UserInterface/QuickConsole.css
deleted file mode 100644
index 67642493c..000000000
--- a/Source/WebInspectorUI/UserInterface/QuickConsole.css
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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;
-
-    width: 10px;
-    height: 10px;
-
-    content: url(Images/UserInputPrompt.svg);
-}
-
-.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 019d53acd..000000000
--- a/Source/WebInspectorUI/UserInterface/Resource.js
+++ /dev/null
@@ -1,707 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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, initiatorSourceCodeLocation)
-{
-    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._initiatorSourceCodeLocation = initiatorSourceCodeLocation || 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.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"
-};
-
-// 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.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;
-
-    mimeType = parseMIMEType(mimeType).type;
-
-    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 initiatorSourceCodeLocation()
-    {
-        return this._initiatorSourceCodeLocation;
-    },
-
-    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.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.mimeTypeComponents.type + (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 || [];
-    },
-
-    scriptForLocation: function(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: 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) {
-            // Delete the MIME-type components so the MIME-type is re-parsed the next time it is requested.
-            delete this._mimeTypeComponents;
-
-            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});
-        }
-    },
-
-    saveIdentityToCookie: function(cookie)
-    {
-        cookie[WebInspector.Resource.URLCookieKey] = this.url;
-        cookie[WebInspector.Resource.MainResourceCookieKey] = this.isMainResource();
-    }
-};
-
-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 fa542ac0d..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceClusterContentView.js
+++ /dev/null
@@ -1,272 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.ContentViewIdentifierCookieKey = "resource-cluster-content-view-identifier";
-
-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 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;
-    },
-
-    saveToCookie: function(cookie)
-    {
-        cookie[WebInspector.ResourceClusterContentView.ContentViewIdentifierCookieKey] = this._currentContentViewSetting.value;
-    },
-
-    restoreFromCookie: function(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: 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 0b994adfd..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceContentView.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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()
-    {
-        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 885c8d1ba..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceDetailsSidebarPanel.js
+++ /dev/null
@@ -1,484 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.svg", "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"));
-    this._initiatorRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Initiator"));
-
-    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._fullURLGroup = new WebInspector.DetailsSectionGroup(firstGroup);
-    this._locationURLComponentsGroup = new WebInspector.DetailsSectionGroup(secondGroup);
-    this._initiatorGroup = new WebInspector.DetailsSectionGroup(thirdGroup);
-
-    this._locationSection = new WebInspector.DetailsSection("resource-location", WebInspector.UIString("Location"), [this._fullURLGroup, this._locationURLComponentsGroup, this._initiatorGroup]);
-
-    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) {
-            if (this._resource.initiatorSourceCodeLocation)
-                this._locationSection.groups = [this._fullURLGroup, this._locationURLComponentsGroup, this._initiatorGroup];
-            else
-                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 {
-            if (this._resource.initiatorSourceCodeLocation)
-                this._locationSection.groups = [this._fullURLGroup, this._initiatorGroup];
-            else
-                this._locationSection.groups = [this._fullURLGroup];
-        }
-
-        if (this._resource.initiatorSourceCodeLocation)
-            this._initiatorRow.value = WebInspector.createSourceCodeLocationLink(this._resource.initiatorSourceCodeLocation, true);
-
-        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(!nodeValue.value || 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 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.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 dac5a5c6d..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js
+++ /dev/null
@@ -1,813 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.svg", "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.CommandOrControl | 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;
-
-    if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
-        this._resourcesContentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
-};
-
-WebInspector.ResourceSidebarPanel.prototype = {
-    constructor: WebInspector.ResourceSidebarPanel,
-
-    // Public
-
-    get contentTreeOutlineToAutoPrune()
-    {
-        return this._searchContentTreeOutline;
-    },
-
-    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);
-    },
-
-    showContentFlowDOMTree: function(contentFlow, nodeToSelect, preventFocusChange)
-    {
-        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(contentFlow);
-        if (nodeToSelect)
-            contentView.selectAndRevealDOMNode(nodeToSelect, preventFocusChange);
-        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)
-    {
-        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;
-        }
-
-        // A main resource is always represented by its parent frame.
-        if (representedObject instanceof WebInspector.Resource && representedObject.isMainResource())
-            representedObject = representedObject.parentFrame;
-
-        var cookie = positionToReveal ? {lineNumber: positionToReveal.lineNumber, columnNumber: positionToReveal.columnNumber} : {};
-        WebInspector.contentBrowser.showContentViewForRepresentedObject(representedObject, cookie);
-    },
-
-    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.
-
-        // 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._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);
-        }
-
-        // 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;
-
-        // Exclude inspector scripts.
-        if (script.url.indexOf("__WebInspector") === 0)
-            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)
-                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._resourcesContentTreeOutline.children, this._compareTreeElements);
-            this._resourcesContentTreeOutline.insertChild(scriptTreeElement, index);
-        } else {
-            if (!parentFolderTreeElement.parent) {
-                var index = insertionIndexForObjectInListSortedByFunction(parentFolderTreeElement, this._resourcesContentTreeOutline.children, this._compareTreeElements);
-                this._resourcesContentTreeOutline.insertChild(parentFolderTreeElement, index);
-            }
-
-            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 || treeElement instanceof WebInspector.DatabaseHostTreeElement)
-            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 ||
-            treeElement instanceof WebInspector.ContentFlowTreeElement) {
-            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);
-    },
-
-    _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"));
-    },
-
-    _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);
-    },
-
-    _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"));
-    },
-
-    _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);
-    },
-
-    _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 d9b829f47..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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, graphOnly, graphDataSource)
-{
-    WebInspector.TimelineDataGridNode.call(this, 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);
-    }
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.ResourceTimelineDataGridNode);
-
-WebInspector.ResourceTimelineDataGridNode.IconStyleClassName = "icon";
-WebInspector.ResourceTimelineDataGridNode.ErrorStyleClassName = "error";
-
-WebInspector.ResourceTimelineDataGridNode.prototype = {
-    constructor: WebInspector.ResourceTimelineDataGridNode,
-    __proto__: WebInspector.TimelineDataGridNode.prototype,
-
-    // 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.name = WebInspector.displayNameForURL(resource.url, resource.urlComponents);
-            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: function(columnIdentifier, cell)
-    {
-        var resource = this._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 goToButton = WebInspector.createGoToArrowButton();
-            goToButton.addEventListener("click", this._goToResource.bind(this));
-            fragment.appendChild(goToButton);
-
-            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 "requestSent":
-        case "latency":
-        case "duration":
-            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
-        }
-
-        return WebInspector.TimelineDataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
-    },
-
-    refresh: function()
-    {
-        if (this._scheduledRefreshIdentifier) {
-            cancelAnimationFrame(this._scheduledRefreshIdentifier);
-            delete this._scheduledRefreshIdentifier;
-        }
-
-        delete this._cachedData;
-
-        WebInspector.TimelineDataGridNode.prototype.refresh.call(this);
-    },
-
-    // Private
-
-    _needsRefresh: function()
-    {
-        if (this.dataGrid instanceof WebInspector.TimelineDataGrid) {
-            this.dataGrid.dataGridNodeNeedsRefresh(this);
-            return;
-        }
-
-        if (this._scheduledRefreshIdentifier)
-            return;
-
-        this._scheduledRefreshIdentifier = requestAnimationFrame(this.refresh.bind(this));
-    },
-
-    _goToResource: function(event)
-    {
-        WebInspector.resourceSidebarPanel.showSourceCode(this._resource);
-    },
-
-    _timelineRecordUpdated: function(event)
-    {
-        if (this.isRecordVisible(this._record))
-            this.needsGraphRefresh();
-    }
-};
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 aada8fafe..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceTimelineRecord.js
+++ /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.
- */
-
-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 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: 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 eb1d5de4e..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceTreeElement.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.
- */
-
-.item.resource.failed {
-    color: rgb(224, 16, 16) !important;
-}
-
-.item.resource.failed .subtitle {
-    color: rgba(224, 16, 16, 0.7) !important;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js b/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js
deleted file mode 100644
index 2c38f3520..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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};
-    },
-
-    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;
-            if (this._resource.isMainResource() && frame && frame.isMainFrame() && this instanceof WebInspector.FrameTreeElement)
-                this.updateStatusForMainFrame();
-            else
-                this.status = null;
-        } else {
-            var spinner = new WebInspector.IndeterminateProgressSpinner;
-            this.status = spinner.element;
-        }
-    },
-
-    _updateToolTip: function()
-    {
-        this.tooltip = this._resource.url;
-    },
-
-    _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 43e1cbaa7..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.svg);
-
-    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/RuntimeManager.js b/Source/WebInspectorUI/UserInterface/RuntimeManager.js
deleted file mode 100644
index e58642e91..000000000
--- a/Source/WebInspectorUI/UserInterface/RuntimeManager.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.RuntimeManager = function()
-{
-    WebInspector.Object.call(this);
-
-    // Enable the RuntimeAgent to receive notification of execution contexts.
-    if (RuntimeAgent.enable)
-        RuntimeAgent.enable();
-};
-
-WebInspector.RuntimeManager.prototype = {
-    constructor: WebInspector.RuntimeManager,
-
-    // Public
-
-    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);
-    },
-
-    getPropertiesForRemoteObject: function(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.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/RuntimeObserver.js b/Source/WebInspectorUI/UserInterface/RuntimeObserver.js
deleted file mode 100644
index a8bc71d3f..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.
-
-    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 28ff7524b..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.svg", "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 46f1ddbce..000000000
--- a/Source/WebInspectorUI/UserInterface/Script.js
+++ /dev/null
@@ -1,180 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.TypeIdentifier = "script";
-WebInspector.Script.URLCookieKey = "script-url";
-WebInspector.Script.DisplayNameCookieKey = "script-display-name";
-
-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;
-    },
-
-    saveIdentityToCookie: function(cookie)
-    {
-        cookie[WebInspector.Script.URLCookieKey] = this.url;
-        cookie[WebInspector.Script.DisplayNameCookieKey] = this.displayName;
-    },
-
-    // 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 63d0f07bd..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptContentView.js
+++ /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.
- */
-
-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.svg", 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();
-    },
-
-    saveToCookie: function(cookie)
-    {
-        cookie.type = WebInspector.ContentViewCookieType.Resource;
-        cookie.url = this.representedObject.url;
-    },
-
-    restoreFromCookie: function(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: 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 c8c6f2ec2..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(treeOutline, columns, editCallback, deleteCallback)
-{
-    WebInspector.TimelineDataGrid.call(this, treeOutline, columns, editCallback, deleteCallback);
-}
-
-WebInspector.ScriptTimelineDataGrid.prototype = {
-    constructor: WebInspector.ScriptTimelineDataGrid,
-
-    // Protected
-
-    callFramePopoverAnchorElement: function()
-    {
-        return this.selectedNode.elementWithColumnIdentifier("location");
-    }
-}
-
-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 a8ea1712f..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.TimelineDataGridNode.call(this, false, null);
-
-    this._record = scriptTimelineRecord;
-    this._baseStartTime = baseStartTime || 0;
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.ScriptTimelineDataGridNode);
-
-WebInspector.ScriptTimelineDataGridNode.IconStyleClassName = "icon";
-
-WebInspector.ScriptTimelineDataGridNode.prototype = {
-    constructor: WebInspector.ScriptTimelineDataGridNode,
-    __proto__: WebInspector.TimelineDataGridNode.prototype,
-
-    // Public
-
-    get record()
-    {
-        return this._record;
-    },
-
-    get records()
-    {
-        return [this._record];
-    },
-
-    get data()
-    {
-        var callFrameOrSourceCodeLocation = this._record.initiatorCallFrame || this._record.sourceCodeLocation;
-        return {eventType: this._record.eventType, details: this._record.details, startTime: this._record.startTime, duration: this._record.duration, location: callFrameOrSourceCodeLocation};
-    },
-
-    createCellContent: function(columnIdentifier, cell)
-    {
-        const emptyValuePlaceholderString = "\u2014";
-        var value = this.data[columnIdentifier];
-
-        switch (columnIdentifier) {
-        case "eventType":
-            return WebInspector.ScriptTimelineRecord.EventType.displayName(value, this._record.details);
-
-        case "details":
-            return value ? value : emptyValuePlaceholderString;
-
-        case "startTime":
-            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime);
-
-        case "duration":
-            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
-        }
-
-        return WebInspector.TimelineDataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/ScriptTimelineOverviewGraph.js
deleted file mode 100644
index 904eae13e..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptTimelineOverviewGraph.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * 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.ScriptTimelineOverviewGraph = function(recording)
-{
-    WebInspector.TimelineOverviewGraph.call(this, recording);
-
-    this.element.classList.add(WebInspector.ScriptTimelineOverviewGraph.StyleClassName);
-
-    this._scriptTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Script);
-    this._scriptTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._scriptTimelineRecordAdded, this);
-
-    this._timelineRecordBars = [];
-
-    this.reset();
-};
-
-WebInspector.ScriptTimelineOverviewGraph.StyleClassName = "script";
-
-WebInspector.ScriptTimelineOverviewGraph.prototype = {
-    constructor: WebInspector.ScriptTimelineOverviewGraph,
-    __proto__: WebInspector.TimelineOverviewGraph.prototype,
-
-    // Public
-
-    reset: function()
-    {
-        WebInspector.TimelineOverviewGraph.prototype.reset.call(this);
-
-        this._timelineRecordBarMap = new Map;
-
-        this.element.removeChildren();
-    },
-
-    updateLayout: function()
-    {
-        WebInspector.TimelineOverviewGraph.prototype.updateLayout.call(this);
-
-        var visibleWidth = this.element.offsetWidth;
-        var secondsPerPixel = (this.endTime - this.startTime) / visibleWidth;
-
-        var recordBarIndex = 0;
-
-        function createBar(records, renderMode)
-        {
-            var timelineRecordBar = this._timelineRecordBars[recordBarIndex];
-            if (!timelineRecordBar)
-                timelineRecordBar = this._timelineRecordBars[recordBarIndex] = new WebInspector.TimelineRecordBar;
-            timelineRecordBar.renderMode = renderMode;
-            timelineRecordBar.records = records;
-            timelineRecordBar.refresh(this);
-            if (!timelineRecordBar.element.parentNode)
-                this.element.appendChild(timelineRecordBar.element);
-            ++recordBarIndex;
-        }
-
-        WebInspector.TimelineRecordBar.createCombinedBars(this._scriptTimeline.records, secondsPerPixel, this, createBar.bind(this));
-
-        // Remove the remaining unused TimelineRecordBars.
-        for (; recordBarIndex < this._timelineRecordBars.length; ++recordBarIndex) {
-            this._timelineRecordBars[recordBarIndex].records = null;
-            this._timelineRecordBars[recordBarIndex].element.remove();
-        }
-    },
-
-    // Private
-
-    _scriptTimelineRecordAdded: function(event)
-    {
-        this.needsLayout();
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js b/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js
deleted file mode 100644
index ab3531cb4..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js
+++ /dev/null
@@ -1,264 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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, callFrames, sourceCodeLocation, details)
-{
-    WebInspector.TimelineRecord.call(this, 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 || "";
-};
-
-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",
-    AnimationFrameRequested: "script-timeline-record-animation-frame-requested",
-    AnimationFrameCanceled: "script-timeline-record-animation-frame-canceled"
-};
-
-WebInspector.ScriptTimelineRecord.EventType.displayName = function(eventType, details, includeTimerIdentifierInMainTitle)
-{
-    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("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("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");
-        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:
-        return WebInspector.UIString("Script Evaluated");
-    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.TimerFired:
-        if (details && includeTimerIdentifierInMainTitle)
-            return WebInspector.UIString("Timer %s Fired").format(details);
-        return WebInspector.UIString("Timer Fired");
-    case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
-        if (details && includeTimerIdentifierInMainTitle)
-            return WebInspector.UIString("Timer %s Installed").format(details);
-        return WebInspector.UIString("Timer Installed");
-    case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
-        if (details && includeTimerIdentifierInMainTitle)
-            return WebInspector.UIString("Timer %s Removed").format(details);
-        return WebInspector.UIString("Timer Removed");
-    case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
-        return WebInspector.UIString("Animation Frame Fired");
-    case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameRequested:
-        return WebInspector.UIString("Animation Frame Requested");
-    case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameCanceled:
-        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";
-
-WebInspector.ScriptTimelineRecord.prototype = {
-    constructor: WebInspector.ScriptTimelineRecord,
-
-    // Public
-
-    get eventType()
-    {
-        return this._eventType;
-    },
-
-    get details()
-    {
-        return this._details;
-    },
-
-    saveIdentityToCookie: function(cookie)
-    {
-        WebInspector.TimelineRecord.prototype.saveIdentityToCookie.call(this, cookie);
-
-        cookie[WebInspector.ScriptTimelineRecord.EventTypeCookieKey] = this._eventType;
-        cookie[WebInspector.ScriptTimelineRecord.DetailsCookieKey] = this._details;
-    }
-};
-
-WebInspector.ScriptTimelineRecord.prototype.__proto__ = WebInspector.TimelineRecord.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineView.css b/Source/WebInspectorUI/UserInterface/ScriptTimelineView.css
deleted file mode 100644
index 09ff34bce..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptTimelineView.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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;
-}
-
-.timeline-view.script > .data-grid .eventType-column {
-    border-right: none;
-}
-
-.sidebar > .panel.timeline.timeline-content-view-showing .navigation-sidebar-panel-content-tree-outline.script .item .subtitle {
-    display: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineView.js b/Source/WebInspectorUI/UserInterface/ScriptTimelineView.js
deleted file mode 100644
index 7a58011a5..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptTimelineView.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/*
- * 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.ScriptTimelineView = function(recording)
-{
-    WebInspector.TimelineView.call(this);
-
-    this.navigationSidebarTreeOutline.onselect = this._treeElementSelected.bind(this);
-    this.navigationSidebarTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
-    this.navigationSidebarTreeOutline.element.classList.add(WebInspector.ScriptTimelineView.TreeOutlineStyleClassName);
-
-    var columns = {eventType: {}, location: {}, startTime: {}, duration: {}};
-
-    columns.eventType.title = WebInspector.UIString("Type");
-    columns.eventType.width = "15%";
-    columns.eventType.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("script", WebInspector.ScriptTimelineRecord.EventType);
-    columns.eventType.hidden = true;
-
-    columns.location.title = WebInspector.UIString("Location");
-    columns.location.width = "15%";
-
-    columns.startTime.title = WebInspector.UIString("Start Time");
-    columns.startTime.width = "10%";
-    columns.startTime.aligned = "right";
-    columns.startTime.sort = "ascending";
-
-    columns.duration.title = WebInspector.UIString("Duration");
-    columns.duration.width = "10%";
-    columns.duration.aligned = "right";
-
-    for (var column in columns)
-        columns[column].sortable = true;
-
-    this._dataGrid = new WebInspector.ScriptTimelineDataGrid(this.navigationSidebarTreeOutline, columns);
-    this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
-    this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
-
-    this.element.classList.add(WebInspector.ScriptTimelineView.StyleClassName);
-    this.element.appendChild(this._dataGrid.element);
-
-    var scriptTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Script);
-    scriptTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._scriptTimelineRecordAdded, this);
-
-    this._pendingRecords = [];
-};
-
-WebInspector.ScriptTimelineView.StyleClassName = "script";
-WebInspector.ScriptTimelineView.TreeOutlineStyleClassName = "script";
-
-WebInspector.ScriptTimelineView.prototype = {
-    constructor: WebInspector.ScriptTimelineView,
-    __proto__: WebInspector.TimelineView.prototype,
-
-    // Public
-
-    get navigationSidebarTreeOutlineLabel()
-    {
-        return WebInspector.UIString("Records");
-    },
-
-    shown: function()
-    {
-        WebInspector.TimelineView.prototype.shown.call(this);
-
-        this._dataGrid.shown();
-    },
-
-    hidden: function()
-    {
-        this._dataGrid.hidden();
-
-        WebInspector.TimelineView.prototype.hidden.call(this);
-    },
-
-    updateLayout: function()
-    {
-        WebInspector.TimelineView.prototype.updateLayout.call(this);
-
-        this._dataGrid.updateLayout();
-
-        this._processPendingRecords();
-    },
-
-    matchTreeElementAgainstCustomFilters: function(treeElement)
-    {
-        return this._dataGrid.treeElementMatchesActiveScopeFilters(treeElement);
-    },
-
-    reset: function()
-    {
-        WebInspector.TimelineView.prototype.reset.call(this);
-
-        this._dataGrid.reset();
-    },
-
-    // Protected
-
-    treeElementPathComponentSelected: function(event)
-    {
-        var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
-        if (!dataGridNode)
-            return;
-        dataGridNode.revealAndSelect();
-    },
-
-    // Private
-
-    _processPendingRecords: function()
-    {
-        if (!this._pendingRecords.length)
-            return;
-
-        for (var scriptTimelineRecord of this._pendingRecords) {
-            var treeElement = new WebInspector.TimelineRecordTreeElement(scriptTimelineRecord, WebInspector.SourceCodeLocation.NameStyle.Short, true);
-            var dataGridNode = new WebInspector.ScriptTimelineDataGridNode(scriptTimelineRecord, this.zeroTime);
-
-            this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
-        }
-
-        this._pendingRecords = [];
-    },
-
-    _scriptTimelineRecordAdded: function(event)
-    {
-        var scriptTimelineRecord = event.data.record;
-        console.assert(scriptTimelineRecord instanceof WebInspector.ScriptTimelineRecord);
-
-        this._pendingRecords.push(scriptTimelineRecord);
-
-        this.needsLayout();
-    },
-
-    _dataGridFiltersDidChange: function(event)
-    {
-        WebInspector.timelineSidebarPanel.updateFilter();
-    },
-
-    _dataGridNodeSelected: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
-    },
-
-    _treeElementSelected: function(treeElement, selectedByUser)
-    {
-        if (this._dataGrid.shouldIgnoreSelectionEvent())
-            return;
-
-        if (!WebInspector.timelineSidebarPanel.canShowDifferentContentView())
-            return;
-
-        if (treeElement instanceof WebInspector.FolderTreeElement)
-            return;
-
-        if (!(treeElement instanceof WebInspector.TimelineRecordTreeElement)) {
-            console.error("Unknown tree element selected.");
-            return;
-        }
-
-        if (!treeElement.record.sourceCodeLocation) {
-            WebInspector.timelineSidebarPanel.showTimelineView(WebInspector.TimelineRecord.Type.Script);
-            return;
-        }
-
-        WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(treeElement.record.sourceCodeLocation);
-    }
-};
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 9afb66d7c..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.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);
-}
-
-.resource-match-icon .icon {
-    content: url(Images/ResultLine.svg);
-}
diff --git a/Source/WebInspectorUI/UserInterface/SearchResultTreeElement.js b/Source/WebInspectorUI/UserInterface/SearchResultTreeElement.js
deleted file mode 100644
index d668d0f8b..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 3e5d37ccd..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, null, "tab");
-    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/Slider.css b/Source/WebInspectorUI/UserInterface/Slider.css
deleted file mode 100644
index 38407345d..000000000
--- a/Source/WebInspectorUI/UserInterface/Slider.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.
- */
-
-.slider {
-    position: relative;
-    height: 11px;
-    outline: 1px solid rgb(148, 148, 148);
-    border: 1px solid white;
-}
-
-.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);
-}
diff --git a/Source/WebInspectorUI/UserInterface/Slider.js b/Source/WebInspectorUI/UserInterface/Slider.js
deleted file mode 100644
index a4a206e0b..000000000
--- a/Source/WebInspectorUI/UserInterface/Slider.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = function()
-{
-    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);
-};
-
-WebInspector.Slider.KnobWidth = 13;
-
-WebInspector.Slider.prototype = {
-    contructor: WebInspector.Slider,
-    __proto__: WebInspector.Object.prototype,
-    
-    // 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._value = value;
-
-        this._knobX = Math.round(value * this._maxX);
-        this._knob.style.webkitTransform = "translate3d(" + this._knobX + "px, 0, 0)";
-
-        if (this.delegate && typeof this.delegate.sliderValueDidChange === "function")
-            this.delegate.sliderValueDidChange(this, value);
-    },
-    
-    // Protected
-
-    handleEvent: function(event)
-    {
-        switch (event.type) {
-        case "mousedown":
-            this._handleMousedown(event);
-            break;
-        case "mousemove":
-            this._handleMousemove(event);
-            break;
-        case "mouseup":
-            this._handleMouseup(event);
-            break;
-        }
-    },
-
-    // Private
-
-    _handleMousedown: function(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: function(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: function(event)
-    {
-        this._element.classList.remove("dragging");
-
-        window.removeEventListener("mousemove", this, true);
-        window.removeEventListener("mouseup", this, true);
-    },
-
-    _localPointForEvent: function(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));
-    },
-
-    get _maxX()
-    {
-        if (this.__maxX == 0 && document.body.contains(this._element))
-            this.__maxX = this._element.offsetWidth - Math.ceil(WebInspector.Slider.KnobWidth / 2);
-
-        return this.__maxX;
-    }
-};
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 583e132ce..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeLocation.js
+++ /dev/null
@@ -1,455 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.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"
-};
-
-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, nameStyle, prefix)
-    {
-        return this._locationString(this.sourceCode, this.lineNumber, this.columnNumber, columnStyle, nameStyle, prefix);
-    },
-
-    formattedLocationString: function(columnStyle, nameStyle, prefix)
-    {
-        return this._locationString(this.sourceCode, this.formattedLineNumber, this.formattedColumn, columnStyle, nameStyle, prefix);
-    },
-
-    displayLocationString: function(columnStyle, nameStyle, prefix)
-    {
-        return this._locationString(this.displaySourceCode, this.displayLineNumber, this.displayColumnNumber, columnStyle, nameStyle, prefix);
-    },
-
-    tooltipString: function()
-    {
-        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: 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, columnStyle, nameStyle, prefix)
-    {
-        var currentDisplay = undefined;
-
-        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) {
-            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, 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:
-            var lineSuffix = sourceCode.url ? ":" + lineString : WebInspector.UIString(" (line %s)").format(lineString);
-            return prefix + (nameStyle === WebInspector.SourceCodeLocation.NameStyle.Full && sourceCode.url ? sourceCode.url : sourceCode.displayName) + lineSuffix;
-
-        default:
-            console.error("Unknown nameStyle: " + nameStyle);
-            return prefix + lineString;
-        }
-    },
-
-    _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 90f0a840b..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.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.
- */
-
-.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;
-}
-
-/* Custom styling for the hover menu attached to color tokens */
-
-.hover-menu.color {
-    padding-right: 15px;
-}
-
-.hover-menu.color > img {
-    width: 16px;
-    height: 16px;
-    -webkit-transform: translateX(14px);
-    content: -webkit-image-set(url(Images/ColorIcon.png) 1x, url(Images/ColorIcon@2x.png) 2x);
-}
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.js b/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.js
deleted file mode 100644
index 7cb354bdf..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.js
+++ /dev/null
@@ -1,1369 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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};
-    this._ignoreContentDidChange = 0;
-
-    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._updateTokenTrackingControllerState();
-
-    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.AutoContinueDidChange, 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._updateTokenTrackingControllerState, this);
-    else
-        this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
-
-    sourceCode.requestContent(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);
-};
-
-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.AutoContinueDidChange, 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._updateTokenTrackingControllerState, 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;
-    },
-
-    showGoToLineDialog: function()
-    {
-        if (!this._goToLineDialog) {
-            this._goToLineDialog = new WebInspector.GoToLineDialog;
-            this._goToLineDialog.delegate = this;
-        }
-
-        this._goToLineDialog.present(this.element);
-    },
-
-    isGoToLineDialogValueValid: function(goToLineDialog, lineNumber)
-    {
-        return !isNaN(lineNumber) && lineNumber > 0 && lineNumber <= this.lineCount;
-    },
-
-    goToLineDialogValueWasValidated: function(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: function()
-    {
-        this.focus();
-    },
-
-    contentDidChange: function(replacedRanges, newRanges)
-    {
-        WebInspector.TextEditor.prototype.contentDidChange.call(this, replacedRanges, newRanges);
-
-        if (this._ignoreContentDidChange > 0)
-            return;
-
-        // Gather all lines containing new text.
-        var lines = new Set;
-        for (var range of newRanges) {
-            // If the range is on a single line, only add the line if the range is not empty.
-            if (range.startLine === range.endLine) {
-                if (range.endColumn > range.startColumn)
-                    lines.add(range.startLine);
-            } else {
-                // Only add the last line if the range has characters on this line.
-                for (var line = range.startLine; line < range.endLine || range.endColumn > 0; ++line)
-                    lines.add(line);
-            }
-        }
-
-        // Consider all new lines for new color markers.
-        for (var line of lines)
-            this._updateColorMarkers(line);
-    },
-
-    // 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._updateTokenTrackingControllerState();
-        this._updateColorMarkers();
-    },
-
-    _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, 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: function(textEditor)
-    {
-        return this._sourceCode.url;
-    },
-
-    textEditorShouldHideLineNumber: function(textEditor, lineNumber)
-    {
-        return lineNumber in this._invalidLineNumbers;
-    },
-
-    textEditorGutterContextMenu: function(textEditor, lineNumber, columnNumber, editorBreakpoints, event)
-    {
-        if (!this._supportsDebugging)
-            return;
-
-        event.preventDefault();
-
-        var contextMenu = new WebInspector.ContextMenu(event);
-
-        // Paused. Add Continue to Here option only if we have a script identifier for the location.
-        if (WebInspector.debuggerManager.paused) {
-            var editorLineInfo = {lineNumber:lineNumber, columnNumber:columnNumber};
-            var unformattedLineInfo = this._unformattedLineInfoForEditorLineInfo(editorLineInfo);
-            var sourceCodeLocation = this._sourceCode.createSourceCodeLocation(unformattedLineInfo.lineNumber, unformattedLineInfo.columnNumber);
-
-            if (sourceCodeLocation.sourceCode instanceof WebInspector.Script)
-                var script = sourceCodeLocation.sourceCode;
-            else if (sourceCodeLocation.sourceCode instanceof WebInspector.Resource)
-                var script = sourceCodeLocation.sourceCode.scriptForLocation(sourceCodeLocation);
-
-            if (script) {
-                function continueToLocation()
-                {
-                    WebInspector.debuggerManager.continueToLocation(script.id, sourceCodeLocation.lineNumber, sourceCodeLocation.columnNumber);
-                }
-
-                contextMenu.appendItem(WebInspector.UIString("Continue to Here"), continueToLocation);
-                contextMenu.appendSeparator();
-            }
-        }
-
-        var breakpoints = [];
-        for (var i = 0; i < editorBreakpoints.length; ++i) {
-            var lineInfo = editorBreakpoints[i];
-            var breakpoint = this._breakpointForEditorLineInfo(lineInfo);
-            console.assert(breakpoint);
-            if (breakpoint)
-                breakpoints.push(breakpoint);
-        }
-
-        // No breakpoints.
-        if (!breakpoints.length) {
-            function addBreakpoint()
-            {
-                var data = this.textEditorBreakpointAdded(this, lineNumber, columnNumber);
-                this.setBreakpointInfoForLineAndColumn(data.lineNumber, data.columnNumber, data.breakpointInfo);
-            }
-
-            contextMenu.appendItem(WebInspector.UIString("Add Breakpoint"), addBreakpoint.bind(this));
-            contextMenu.show();
-            return;
-        }
-
-        // Single breakpoint.
-        if (breakpoints.length === 1) {
-            var breakpoint = breakpoints[0];
-            function revealInSidebar()
-            {
-                WebInspector.debuggerSidebarPanel.show();
-                var treeElement = WebInspector.debuggerSidebarPanel.treeElementForRepresentedObject(breakpoint);
-                if (treeElement)
-                    treeElement.revealAndSelect();
-            }
-
-            breakpoint.appendContextMenuItems(contextMenu, event.target);
-            contextMenu.appendSeparator();
-            contextMenu.appendItem(WebInspector.UIString("Reveal in Debugger Navigation Sidebar"), revealInSidebar);
-            contextMenu.show();
-            return;
-        }
-
-        // Multiple breakpoints.
-        var shouldDisable = false;
-        for (var i = 0; i < breakpoints.length; ++i) {
-            if (!breakpoints[i].disabled) {
-                shouldDisable = true;
-                break;
-            }
-        }
-
-        function removeBreakpoints()
-        {
-            for (var i = 0; i < breakpoints.length; ++i) {
-                var breakpoint = breakpoints[i];
-                if (WebInspector.debuggerManager.isBreakpointRemovable(breakpoint))
-                    WebInspector.debuggerManager.removeBreakpoint(breakpoint);
-            }
-        }
-
-        function toggleBreakpoints()
-        {
-            for (var i = 0; i < breakpoints.length; ++i)
-                breakpoints[i].disabled = shouldDisable;
-        }
-
-        if (shouldDisable)
-            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoints"), toggleBreakpoints.bind(this));
-        else
-            contextMenu.appendItem(WebInspector.UIString("Enable Breakpoints"), toggleBreakpoints.bind(this));
-        contextMenu.appendItem(WebInspector.UIString("Delete Breakpoints"), removeBreakpoints.bind(this));
-        contextMenu.show();
-    },
-
-    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);
-    },
-
-    textEditorBreakpointClicked: function(textEditor, lineNumber, columnNumber)
-    {
-        console.assert(this._supportsDebugging);
-        if (!this._supportsDebugging)
-            return;
-
-        var breakpoint = this._breakpointForEditorLineInfo({lineNumber: lineNumber, columnNumber: columnNumber});
-        console.assert(breakpoint);
-        if (!breakpoint)
-            return;
-
-        breakpoint.cycleToNextMode();
-    },
-
-    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));
-            }
-        }
-    },
-
-    _debuggerDidPause: function(event)
-    {
-        this._updateTokenTrackingControllerState();
-    },
-
-    _debuggerDidResume: function(event)
-    {
-        this._updateTokenTrackingControllerState();
-        this._dismissPopover();
-    },
-
-    _sourceCodeSourceMapAdded: function(event)
-    {
-        WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateTokenTrackingControllerState, this);
-        this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
-
-        this._updateTokenTrackingControllerState();
-    },
-
-    _updateTokenTrackingControllerState: function()
-    {
-        var mode = WebInspector.CodeMirrorTokenTrackingController.Mode.None;
-        if (WebInspector.debuggerManager.paused)
-            mode = WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptExpression;
-        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:
-            this.tokenTrackingController.mouseOverDelayDuration = WebInspector.SourceCodeTextEditor.DurationToMouseOverTokenToMakeHoveredToken;
-            this.tokenTrackingController.mouseOutReleaseDelayDuration = WebInspector.SourceCodeTextEditor.DurationToMouseOutOfHoveredTokenToRelease;
-            this.tokenTrackingController.classNameForHighlightedRange = WebInspector.SourceCodeTextEditor.HoveredExpressionHighlightStyleClassName;
-            break;
-        }
-
-        this.tokenTrackingController.mode = mode;
-    },
-
-    _hasColorMarkers: function()
-    {
-        for (var marker of this.markers) {
-            if (marker.type === WebInspector.TextMarker.Type.Color)
-                return true;
-        }
-        return false;
-    },
-
-    // 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.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.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(sourceCodeLocation);
-        else
-            WebInspector.resourceSidebarPanel.showSourceCodeLocation(sourceCodeLocation);
-    },
-
-    tokenTrackingControllerNewHighlightCandidate: function(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.MarkedTokens) {
-            var markers = this.markersAtPosition(candidate.hoveredTokenRange.start);
-            if (markers.length > 0)
-                this._tokenTrackingControllerHighlightedMarkedExpression(candidate, markers);
-            else
-                this._dismissCodeMirrorColorEditingController();
-        }
-    },
-
-    tokenTrackingControllerMouseOutOfHoveredMarker: function(tokenTrackingController, hoveredMarker)
-    {
-        this._dismissCodeMirrorColorEditingController();
-    },
-
-    _tokenTrackingControllerHighlightedJavaScriptExpression: function(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":
-                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.boundsForRange(candidate.hoveredTokenRange);
-        if (!bounds)
-            return;
-
-        content.classList.add(WebInspector.SourceCodeTextEditor.PopoverDebuggerContentStyleClassName);
-
-        this._popover = this._popover || new WebInspector.Popover(this);
-        this._popover.content = content;
-        this._popover.present(bounds.pad(5), [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);
-    },
-
-    _updateColorMarkers: function(lineNumber)
-    {
-        this.createColorMarkers(lineNumber);
-
-        this._updateTokenTrackingControllerState();
-    },
-    
-    _tokenTrackingControllerHighlightedMarkedExpression: function(candidate, markers)
-    {
-        var colorMarker;
-        for (var marker of markers) {
-            if (marker.type === WebInspector.TextMarker.Type.Color) {
-                colorMarker = marker;
-                break;
-            }
-        }
-
-        if (!colorMarker) {
-            this.tokenTrackingController.hoveredMarker = null;
-            return;
-        }
-
-        if (this.tokenTrackingController.hoveredMarker === colorMarker)
-            return;
-
-        this._dismissCodeMirrorColorEditingController();
-
-        this.tokenTrackingController.hoveredMarker = colorMarker;
-
-        this._colorEditingController = this.colorEditingControllerForMarker(colorMarker);
-
-        var color = this._colorEditingController.color;
-        if (!color || !color.valid) {
-            colorMarker.clear();
-            delete this._colorEditingController;
-            return;
-        }
-
-        this._colorEditingController.delegate = this;
-        this._colorEditingController.presentHoverMenu();
-    },
-
-    _dismissCodeMirrorColorEditingController: function()
-    {
-        if (this._colorEditingController)
-            this._colorEditingController.dismissHoverMenu();
-        
-        this.tokenTrackingController.hoveredMarker = null;
-        delete this._colorEditingController;
-    },
-
-    // CodeMirrorColorEditingController Delegate
-    
-    colorEditingControllerDidStartEditing: function(colorEditingController)
-    {
-        // We can pause the token tracking controller during editing, it will be reset
-        // to the expected state by calling _updateColorMarkers() in the
-        // colorEditingControllerDidFinishEditing delegate.
-        this.tokenTrackingController.enabled = false;
-
-        // We clear the marker since we'll reset it after editing.
-        colorEditingController.marker.clear();
-        
-        // We ignore content changes made as a result of color editing.
-        this._ignoreContentDidChange++;
-    },
-    
-    colorEditingControllerDidFinishEditing: function(colorEditingController)
-    {
-        this._updateColorMarkers(colorEditingController.range.startLine);
-
-        this._ignoreContentDidChange--;
-
-        delete this._colorEditingController;
-    }
-};
-
-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/SourceCodeTimeline.js b/Source/WebInspectorUI/UserInterface/SourceCodeTimeline.js
deleted file mode 100644
index 348ff57fe..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeTimeline.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = function(sourceCode, sourceCodeLocation, recordType, recordEventType)
-{
-    WebInspector.Timeline.call(this);
-
-    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;
-};
-
-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";
-
-WebInspector.SourceCodeTimeline.prototype = {
-    constructor: WebInspector.SourceCodeTimeline,
-    __proto__: WebInspector.Timeline.prototype,
-
-    // Public
-
-    get sourceCode()
-    {
-        return this._sourceCode;
-    },
-
-    get sourceCodeLocation()
-    {
-        return this._sourceCodeLocation;
-    },
-
-    get recordType()
-    {
-        return this._recordType;
-    },
-
-    get recordEventType()
-    {
-        return this._recordEventType;
-    },
-
-    saveIdentityToCookie: function(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;
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTimelineDataGridNode.js
deleted file mode 100644
index a527e4f3a..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTimelineDataGridNode.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * 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.SourceCodeTimelineTimelineDataGridNode = function(sourceCodeTimeline, graphDataSource)
-{
-    WebInspector.TimelineDataGridNode.call(this, true, graphDataSource);
-
-    this._sourceCodeTimeline = sourceCodeTimeline;
-    this._sourceCodeTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._timelineRecordAdded, this);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.SourceCodeTimelineTimelineDataGridNode);
-
-WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype = {
-    constructor: WebInspector.SourceCodeTimelineTimelineDataGridNode,
-    __proto__: WebInspector.TimelineDataGridNode.prototype,
-
-    // Public
-
-    get records()
-    {
-        return this._sourceCodeTimeline.records;
-    },
-
-    get sourceCodeTimeline()
-    {
-        return this._sourceCodeTimeline;
-    },
-
-    get data()
-    {
-        return {graph: this._sourceCodeTimeline.startTime};
-    },
-
-    // Private
-
-    _timelineRecordAdded: function(event)
-    {
-        if (this.isRecordVisible(event.data.record))
-            this.needsGraphRefresh();
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTreeElement.js b/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTreeElement.js
deleted file mode 100644
index 0c6355630..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeTimelineTreeElement.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.SourceCodeTimelineTreeElement = function(sourceCodeTimeline, subtitleNameStyle, includeTimerIdentifierInMainTitle)
-{
-    console.assert(sourceCodeTimeline);
-
-    this._sourceCodeTimeline = sourceCodeTimeline;
-
-    subtitleNameStyle = subtitleNameStyle || WebInspector.SourceCodeLocation.NameStyle.None;
-
-    WebInspector.TimelineRecordTreeElement.call(this, sourceCodeTimeline.records[0], subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeTimeline.sourceCodeLocation, sourceCodeTimeline);
-};
-
-WebInspector.SourceCodeTimelineTreeElement.prototype = {
-    constructor: WebInspector.SourceCodeTimelineTreeElement,
-    __proto__: WebInspector.TimelineRecordTreeElement.prototype,
-
-    // Public
-
-    record: undefined,
-
-    get sourceCodeTimeline()
-    {
-        return this._sourceCodeTimeline;
-    }
-};
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 0fed0393a..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceMapResource.js
+++ /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.
- */
-
-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) {
-                // Delete the MIME-type components so the MIME-type is re-parsed the next time it is requested.
-                delete this._mimeTypeComponents;
-
-                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 fa0c94ce6..000000000
--- a/Source/WebInspectorUI/UserInterface/StorageManager.js
+++ /dev/null
@@ -1,234 +0,0 @@
-/*
- * 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 = function()
-{
-    WebInspector.Object.call(this);
-
-    if (window.DOMStorageAgent)
-        DOMStorageAgent.enable();
-    if (window.DatabaseAgent)
-        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 (window.DOMStorageAgent && 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 domStorageView = this._domStorageViewForId(id);
-        if (!domStorageView)
-            return;
-
-        console.assert(domStorageView instanceof WebInspector.DOMStorageContentView);
-        domStorageView.update();
-    },
-
-    domStorageItemsCleared: function(id)
-    {
-        var domStorageView = this._domStorageViewForId(id);
-        if (!domStorageView)
-            return;
-
-        console.assert(domStorageView instanceof WebInspector.DOMStorageContentView);
-        domStorageView.itemsCleared();
-    },
-
-    domStorageItemRemoved: function(id, key)
-    {
-        var domStorageView = this._domStorageViewForId(id);
-        if (!domStorageView)
-            return;
-
-        console.assert(domStorageView instanceof WebInspector.DOMStorageContentView);
-        domStorageView.itemRemoved(key);
-    },
-
-    domStorageItemAdded: function(id, key, value)
-    {
-        var domStorageView = this._domStorageViewForId(id);
-        if (!domStorageView)
-            return;
-
-        console.assert(domStorageView instanceof WebInspector.DOMStorageContentView);
-        domStorageView.itemAdded(key, value);
-    },
-
-    domStorageItemUpdated: function(id, key, oldValue, value)
-    {
-        var domStorageView = this._domStorageViewForId(id);
-        if (!domStorageView)
-            return;
-
-        console.assert(domStorageView instanceof WebInspector.DOMStorageContentView);
-        domStorageView.itemUpdated(key, oldValue, value);
-    },
-
-    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;
-    },
-
-    _domStorageViewForId: function(id)
-    {
-        var domStorage = this._domStorageForId(id);
-        if (!domStorage)
-            return null;
-
-        return WebInspector.contentBrowser.contentViewContainer.contentViewForRepresentedObject(domStorage, true);
-    }
-};
-
-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 74a988088..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.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/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 1e98e2690..000000000
--- a/Source/WebInspectorUI/UserInterface/SyntaxHighlightingSupport.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.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);
-    }
-
-    mimeType = parseMIMEType(mimeType).type;
-
-    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..d9e41b63d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test.html
@@ -0,0 +1,221 @@
+<!--
+ * 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/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="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="Base/YieldableTask.js"></script>
+
+    <script src="Protocol/ProtocolTracer.js"></script>
+    <script src="Protocol/LoggingProtocolTracer.js"></script>
+    <script src="Protocol/InspectorBackend.js"></script>
+
+    <script src="Protocol/Connection.js"></script>
+    <script src="Protocol/InspectorFrontendAPI.js"></script>
+    <script src="Protocol/LoadInspectorBackendCommands.js"></script>
+    <script src="Protocol/MessageDispatcher.js"></script>
+    <script src="Protocol/Target.js"></script>
+
+    <script src="Protocol/MainTarget.js"></script>
+    <script src="Protocol/WorkerTarget.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="Protocol/WorkerObserver.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/TimelineRange.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/CallingContextTree.js"></script>
+    <script src="Models/CallingContextTreeNode.js"></script>
+    <script src="Models/Collection.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/DOMStorageObject.js"></script>
+    <script src="Models/DOMTree.js"></script>
+    <script src="Models/DebuggerData.js"></script>
+    <script src="Models/ExecutionContext.js"></script>
+    <script src="Models/ExecutionContextList.js"></script>
+    <script src="Models/FPSInstrument.js"></script>
+    <script src="Models/Frame.js"></script>
+    <script src="Models/GarbageCollection.js"></script>
+    <script src="Models/Geometry.js"></script>
+    <script src="Models/Gradient.js"></script>
+    <script src="Models/HeapAllocationsInstrument.js"></script>
+    <script src="Models/HeapAllocationsTimelineRecord.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/MemoryCategory.js"></script>
+    <script src="Models/MemoryInstrument.js"></script>
+    <script src="Models/MemoryTimeline.js"></script>
+    <script src="Models/MemoryTimelineRecord.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/ResourceQueryMatch.js"></script>
+    <script src="Models/ResourceQueryResult.js"></script>
+    <script src="Models/ResourceTimelineRecord.js"></script>
+    <script src="Models/ResourceTimingData.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/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="Models/WrappedPromise.js"></script>
+
+    <script src="Proxies/FormatterWorkerProxy.js"></script>
+    <script src="Proxies/HeapSnapshotDiffProxy.js"></script>
+    <script src="Proxies/HeapSnapshotEdgeProxy.js"></script>
+    <script src="Proxies/HeapSnapshotNodeProxy.js"></script>
+    <script src="Proxies/HeapSnapshotProxy.js"></script>
+    <script src="Proxies/HeapSnapshotWorkerProxy.js"></script>
+
+    <script src="Controllers/BreakpointLogMessageLexer.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/MemoryManager.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/TargetManager.js"></script>
+    <script src="Controllers/TimelineManager.js"></script>
+    <script src="Controllers/WorkerManager.js"></script>
+
+    <script src="Controllers/Formatter.js"></script>
+    <script src="Controllers/ResourceQueryController.js"></script>
+    <script src="Workers/Formatter/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..5d9bb202e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/FrontendTestHarness.js
@@ -0,0 +1,256 @@
+/*
+ * 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 AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED 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;
+
+        // Options that are set per-test for debugging purposes.
+        this.dumpActivityToSystemConsole = false;
+    }
+
+    // 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);
+    }
+
+    debug()
+    {
+        this.dumpActivityToSystemConsole = true;
+        InspectorBackend.dumpInspectorProtocolMessages = true;
+    }
+
+    // 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(" "));
+            };
+        }
+
+        function createProxyConsoleTraceHandler(){
+            return function() {
+                try {
+                    throw new Exception();
+                } catch (e) {
+                    // Skip the first frame which is added by this function.
+                    let frames = e.stack.split("\n").slice(1);
+                    let sanitizedFrames = frames.map(TestHarness.sanitizeStackFrame);
+                    self.addResult("TRACE: " + Array.from(arguments).join(" "));
+                    self.addResult(sanitizedFrames.join("\n"));
+                }
+            };
+        }
+
+        let redirectedMethods = {};
+        for (let key in window.console)
+            redirectedMethods[key] = window.console[key];
+
+        for (let type of ["log", "error", "info", "warn"])
+            redirectedMethods[type] = createProxyConsoleHandler(type.toUpperCase());
+
+        redirectedMethods["trace"] = createProxyConsoleTraceHandler();
+
+        this._originalConsole = window.console;
+        window.console = redirectedMethods;
+    }
+
+    reportUnhandledRejection(error)
+    {
+        let message = error.message;
+        let stack = error.stack;
+        let result = `Unhandled promise rejection in inspector page: ${message}\n`;
+        if (stack) {
+            let sanitizedStack = this.sanitizeStack(stack);
+            result += `\nStack Trace: ${sanitizedStack}\n`;
+        }
+
+        // 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 && !this._testPageHasLoaded())
+            this._originalConsole["error"](result);
+
+        this.addResult(result);
+        this.completeTest();
+
+        // Stop default handler so we can empty InspectorBackend's message queue.
+        return true;
+    }
+
+    reportUncaughtExceptionFromEvent(message, url, lineNumber, columnNumber)
+    {
+        // An exception thrown from a timer callback does not report a URL.
+        if (url === "undefined")
+            url = "global";
+
+        return this.reportUncaughtException({message, url, lineNumber, columnNumber});
+    }
+
+    reportUncaughtException({message, url, lineNumber, columnNumber, stack, code})
+    {
+        let result;
+        let sanitizedURL = TestHarness.sanitizeURL(url);
+        let sanitizedStack = this.sanitizeStack(stack);
+        if (url || lineNumber || columnNumber)
+            result = `Uncaught exception in Inspector page: ${message} [${sanitizedURL}:${lineNumber}:${columnNumber}]\n`;
+        else
+            result = `Uncaught exception in Inspector page: ${message}\n`;
+
+        if (stack)
+            result += `\nStack Trace:\n${sanitizedStack}\n`;
+        if (code)
+            result += `\nEvaluated Code:\n${code}`;
+
+        // 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 && !this._testPageHasLoaded())
+            this._originalConsole["error"](result);
+
+        this.addResult(result);
+        this.completeTest();
+        // Stop default handler so we can empty InspectorBackend's message queue.
+        return true;
+    }
+
+    // Private
+
+    _testPageHasLoaded()
+    {
+        return self._shouldResendResults;
+    }
+
+    _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..60ec624f1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/InspectorProtocol.js
@@ -0,0 +1,182 @@
+/*
+ * 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);
+    else if (!params)
+        params = {};
+
+    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..d0ef614b6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/ProtocolTestHarness.js
@@ -0,0 +1,78 @@
+/*
+ * 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);
+    }
+
+    debug()
+    {
+        this.dumpActivityToSystemConsole = true;
+        this.dumpInspectorProtocolMessages = true;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Test/Test.js b/Source/WebInspectorUI/UserInterface/Test/Test.js
new file mode 100644
index 000000000..f59bf7304
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/Test.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 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.registerDOMStorageDispatcher(new WebInspector.DOMStorageObserver);
+    InspectorBackend.registerTimelineDispatcher(new WebInspector.TimelineObserver);
+    InspectorBackend.registerCSSDispatcher(new WebInspector.CSSObserver);
+    InspectorBackend.registerRuntimeDispatcher(new WebInspector.RuntimeObserver);
+    InspectorBackend.registerWorkerDispatcher(new WebInspector.WorkerObserver);
+    if (InspectorBackend.registerReplayDispatcher)
+        InspectorBackend.registerReplayDispatcher(new WebInspector.ReplayObserver);
+
+    WebInspector.mainTarget = new WebInspector.MainTarget;
+
+    // Instantiate controllers used by tests.
+    this.targetManager = new WebInspector.TargetManager;
+    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.runtimeManager = new WebInspector.RuntimeManager;
+    this.heapManager = new WebInspector.HeapManager;
+    this.memoryManager = new WebInspector.MemoryManager;
+    this.timelineManager = new WebInspector.TimelineManager;
+    this.debuggerManager = new WebInspector.DebuggerManager;
+    this.probeManager = new WebInspector.ProbeManager;
+    this.workerManager = new WebInspector.WorkerManager;
+    this.replayManager = new WebInspector.ReplayManager;
+
+    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();
+};
+
+Object.defineProperty(WebInspector, "targets",
+{
+    get() { return this.targetManager.targets; }
+});
+
+WebInspector.assumingMainTarget = () => WebInspector.mainTarget;
+
+WebInspector.isDebugUIEnabled = () => false;
+
+WebInspector.UIString = (string) => string;
+
+WebInspector.indentString = () => "    ";
+
+// Add stubs that are called by the frontend API.
+WebInspector.updateDockedState = () => {};
+WebInspector.updateDockingAvailability = () => {};
+WebInspector.updateVisibilityState = () => {};
+
+window.InspectorTest = new FrontendTestHarness();
+
+InspectorTest.redirectConsoleToTestOutput();
+
+WebInspector.reportInternalError = (e) => { console.error(e); };
+
+window.reportUnhandledRejection = InspectorTest.reportUnhandledRejection.bind(InspectorTest);
+window.onerror = InspectorTest.reportUncaughtExceptionFromEvent.bind(InspectorTest);
diff --git a/Source/WebInspectorUI/UserInterface/Test/TestHarness.js b/Source/WebInspectorUI/UserInterface/Test/TestHarness.js
new file mode 100644
index 000000000..53bee4a4b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/TestHarness.js
@@ -0,0 +1,374 @@
+/*
+ * 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 AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED 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;
+        this._failureObjects = new Map;
+        this._failureObjectIdentifier = 1;
+
+        // Options that are set per-test for debugging purposes.
+        this.forceDebugLogging = false;
+
+        // Options that are set per-test to ensure deterministic output.
+        this.suppressStackTraces = false;
+    }
+
+    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.");
+    }
+
+    debug()
+    {
+        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(actual, message)
+    {
+        this._expect(TestHarness.ExpectationType.True, !!actual, message, actual);
+    }
+
+    expectFalse(actual, message)
+    {
+        this._expect(TestHarness.ExpectationType.False, !actual, message, actual);
+    }
+
+    expectNull(actual, message)
+    {
+        this._expect(TestHarness.ExpectationType.Null, actual === null, message, actual, null);
+    }
+
+    expectNotNull(actual, message)
+    {
+        this._expect(TestHarness.ExpectationType.NotNull, actual !== null, message, actual);
+    }
+
+    expectEqual(actual, expected, message)
+    {
+        this._expect(TestHarness.ExpectationType.Equal, expected === actual, message, actual, expected);
+    }
+
+    expectNotEqual(actual, expected, message)
+    {
+        this._expect(TestHarness.ExpectationType.NotEqual, expected !== actual, message, actual, expected);
+    }
+
+    expectShallowEqual(actual, expected, message)
+    {
+        this._expect(TestHarness.ExpectationType.ShallowEqual, Object.shallowEqual(actual, expected), message, actual, expected);
+    }
+
+    expectNotShallowEqual(actual, expected, message)
+    {
+        this._expect(TestHarness.ExpectationType.NotShallowEqual, !Object.shallowEqual(actual, expected), message, actual, expected);
+    }
+
+    expectEqualWithAccuracy(actual, expected, accuracy, message)
+    {
+        console.assert(typeof expected === "number");
+        console.assert(typeof actual === "number");
+
+        this._expect(TestHarness.ExpectationType.EqualWithAccuracy, Math.abs(expected - actual) <= accuracy, message, actual, expected, accuracy);
+    }
+
+    expectLessThan(actual, expected, message)
+    {
+        this._expect(TestHarness.ExpectationType.LessThan, actual < expected, message, actual, expected);
+    }
+
+    expectLessThanOrEqual(actual, expected, message)
+    {
+        this._expect(TestHarness.ExpectationType.LessThanOrEqual, actual <= expected, message, actual, expected);
+    }
+
+    expectGreaterThan(actual, expected, message)
+    {
+        this._expect(TestHarness.ExpectationType.GreaterThan, actual > expected, message, actual, expected);
+    }
+
+    expectGreaterThanOrEqual(actual, expected, message)
+    {
+        this._expect(TestHarness.ExpectationType.GreaterThanOrEqual, actual >= expected, message, actual, expected);
+    }
+
+    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;
+    }
+
+    static sanitizeURL(url)
+    {
+        if (!url)
+            return "(unknown)";
+
+        let lastPathSeparator = Math.max(url.lastIndexOf("/"), url.lastIndexOf("\\"));
+        let location = (lastPathSeparator > 0) ? url.substr(lastPathSeparator + 1) : url;
+        if (!location.length)
+            location = "(unknown)";
+
+        // Clean up the location so it is bracketed or in parenthesis.
+        if (url.indexOf("[native code]") !== -1)
+            location = "[native code]";
+
+        return location;
+    }
+
+    static sanitizeStackFrame(frame, i)
+    {
+        // Most frames are of the form "functionName@file:///foo/bar/File.js:345".
+        // But, some frames do not have a functionName. Get rid of the file path.
+        let nameAndURLSeparator = frame.indexOf("@");
+        let frameName = (nameAndURLSeparator > 0) ? frame.substr(0, nameAndURLSeparator) : "(anonymous)";
+
+        let lastPathSeparator = Math.max(frame.lastIndexOf("/"), frame.lastIndexOf("\\"));
+        let frameLocation = (lastPathSeparator > 0) ? frame.substr(lastPathSeparator + 1) : frame;
+        if (!frameLocation.length)
+            frameLocation = "unknown";
+
+        // Clean up the location so it is bracketed or in parenthesis.
+        if (frame.indexOf("[native code]") !== -1)
+            frameLocation = "[native code]";
+        else
+            frameLocation = "(" + frameLocation + ")";
+
+        return `#${i}: ${frameName} ${frameLocation}`;
+    }
+
+    sanitizeStack(stack)
+    {
+        if (this.suppressStackTraces)
+            return "(suppressed)";
+
+        if (!stack || typeof stack !== "string")
+            return "(unknown)";
+
+        return stack.split("\n").map(TestHarness.sanitizeStackFrame).join("\n");
+    }
+
+    // Private
+
+    _expect(type, condition, message, ...values)
+    {
+        console.assert(values.length > 0, "Should have an 'actual' value.");
+
+        if (!message || !condition) {
+            values = values.map(this._expectationValueAsString.bind(this));
+            message = message || this._expectationMessageFormat(type).format(...values);
+        }
+
+        if (condition) {
+            this.pass(message);
+            return;
+        }
+
+        message += "\n    Expected: " + this._expectedValueFormat(type).format(...values.slice(1));
+        message += "\n    Actual: " + values[0];
+
+        this.fail(message);
+    }
+
+    _expectationValueAsString(value)
+    {
+        let instanceIdentifier = (object) => {
+            let id = this._failureObjects.get(object);
+            if (!id) {
+                id = this._failureObjectIdentifier++;
+                this._failureObjects.set(object, id);
+            }
+            return "#" + id;
+        };
+
+        const maximumValueStringLength = 200;
+        const defaultValueString = String(new Object); // [object Object]
+
+        // Special case for numbers, since JSON.stringify converts Infinity and NaN to null.
+        if (typeof value === "number")
+            return value;
+
+        try {
+            let valueString = JSON.stringify(value);
+            if (valueString.length <= maximumValueStringLength)
+                return valueString;
+        } catch (e) {}
+
+        try {
+            let valueString = String(value);
+            if (valueString === defaultValueString && value.constructor && value.constructor.name !== "Object")
+                return value.constructor.name + " instance " + instanceIdentifier(value);
+            return valueString;
+        } catch (e) {
+            return defaultValueString;
+        }
+    }
+
+    _expectationMessageFormat(type)
+    {
+        switch (type) {
+        case TestHarness.ExpectationType.True:
+            return "expectThat(%s)";
+        case TestHarness.ExpectationType.False:
+            return "expectFalse(%s)";
+        case TestHarness.ExpectationType.Null:
+            return "expectNull(%s)";
+        case TestHarness.ExpectationType.NotNull:
+            return "expectNotNull(%s)";
+        case TestHarness.ExpectationType.Equal:
+            return "expectEqual(%s, %s)";
+        case TestHarness.ExpectationType.NotEqual:
+            return "expectNotEqual(%s, %s)";
+        case TestHarness.ExpectationType.ShallowEqual:
+            return "expectShallowEqual(%s, %s)";
+        case TestHarness.ExpectationType.NotShallowEqual:
+            return "expectNotShallowEqual(%s, %s)";
+        case TestHarness.ExpectationType.EqualWithAccuracy:
+            return "expectEqualWithAccuracy(%s, %s, %s)";
+        case TestHarness.ExpectationType.LessThan:
+            return "expectLessThan(%s, %s)";
+        case TestHarness.ExpectationType.LessThanOrEqual:
+            return "expectLessThanOrEqual(%s, %s)";
+        case TestHarness.ExpectationType.GreaterThan:
+            return "expectGreaterThan(%s, %s)";
+        case TestHarness.ExpectationType.GreaterThanOrEqual:
+            return "expectGreaterThanOrEqual(%s, %s)";
+        default:
+            console.error("Unknown TestHarness.ExpectationType type: " + type);
+            return null;
+        }
+    }
+
+    _expectedValueFormat(type)
+    {
+        switch (type) {
+        case TestHarness.ExpectationType.True:
+            return "truthy";
+        case TestHarness.ExpectationType.False:
+            return "falsey";
+        case TestHarness.ExpectationType.NotNull:
+            return "not null";
+        case TestHarness.ExpectationType.NotEqual:
+        case TestHarness.ExpectationType.NotShallowEqual:
+            return "not %s";
+        case TestHarness.ExpectationType.EqualWithAccuracy:
+            return "%s +/- %s";
+        case TestHarness.ExpectationType.LessThan:
+            return "less than %s";
+        case TestHarness.ExpectationType.LessThanOrEqual:
+            return "less than or equal to %s";
+        case TestHarness.ExpectationType.GreaterThan:
+            return "greater than %s";
+        case TestHarness.ExpectationType.GreaterThanOrEqual:
+            return "greater than or equal to %s";
+        default:
+            return "%s";
+        }
+    }
+};
+
+TestHarness.ExpectationType = {
+    True: Symbol("expect-true"),
+    False: Symbol("expect-false"),
+    Null: Symbol("expect-null"),
+    NotNull: Symbol("expect-not-null"),
+    Equal: Symbol("expect-equal"),
+    NotEqual: Symbol("expect-not-equal"),
+    ShallowEqual: Symbol("expect-shallow-equal"),
+    NotShallowEqual: Symbol("expect-not-shallow-equal"),
+    EqualWithAccuracy: Symbol("expect-equal-with-accuracy"),
+    LessThan: Symbol("expect-less-than"),
+    LessThanOrEqual: Symbol("expect-less-than-or-equal"),
+    GreaterThan: Symbol("expect-greater-than"),
+    GreaterThanOrEqual: Symbol("expect-greater-than-or-equal"),
+};
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..aacd313b7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/TestSuite.js
@@ -0,0 +1,251 @@
+/*
+ * 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);
+    }
+
+    // Protected
+
+    logThrownObject(e)
+    {
+        let message = e;
+        let stack = "(unknown)";
+        if (e instanceof Error) {
+            message = e.message;
+            if (e.stack)
+                stack = e.stack;
+        }
+
+        if (typeof message !== "string")
+            message = JSON.stringify(message);
+
+        let sanitizedStack = this._harness.sanitizeStack(stack);
+
+        let result = `!! EXCEPTION: ${message}`;
+        if (stack)
+            result += `\nStack Trace: ${sanitizedStack}`;
+
+        this._harness.log(result);
+    }
+};
+
+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++;
+            this.logThrownObject(e);
+
+            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("!! SETUP FAILED");
+                        return false;
+                    }
+                } catch (e) {
+                    this.logThrownObject(e);
+                    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++;
+                this.logThrownObject(e);
+                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("!! TEARDOWN FAILED");
+                        return false;
+                    }
+                } catch (e) {
+                    this.logThrownObject(e);
+                    return false;
+                }
+            }
+        }
+
+        return true;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/TestStub.html b/Source/WebInspectorUI/UserInterface/TestStub.html
new file mode 100644
index 000000000..0cd419dac
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TestStub.html
@@ -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 AND ITS CONTRIBUTORS "AS IS" AND ANY
+EXPRESS OR IMPLIED 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="Models/CallingContextTreeNode.js"></script>
+    <script src="Models/WrappedPromise.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 c4d28b606..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.svg", 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 a65aea306..000000000
--- a/Source/WebInspectorUI/UserInterface/TextEditor.css
+++ /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.
- */
-
-.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: 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 0e92eb108..000000000
--- a/Source/WebInspectorUI/UserInterface/TextEditor.js
+++ /dev/null
@@ -1,1326 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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._codeMirror = CodeMirror(this.element, {
-        readOnly: true,
-        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.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;
-};
-
-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.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"
-};
-
-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++;
-        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: function()
-    {
-        const supportedModes = {
-            "javascript": true,
-            "css": 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)
-    {
-        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: 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, 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 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);
-    },
-
-    get lineCount()
-    {
-        return this._codeMirror.lineCount();
-    },
-
-    focus: function()
-    {
-        this._codeMirror.focus();
-    },
-
-    contentDidChange: function(replacedRanges, newRanges)
-    {
-        // Implemented by subclasses.
-    },
-
-    boundsForRange: function(range)
-    {
-        return this._codeMirror.boundsForRange(range);
-    },
-
-    get markers()
-    {
-        return this._codeMirror.getAllMarks().map(function(codeMirrorTextMarker) {
-            return WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(codeMirrorTextMarker);
-        });
-    },
-
-    markersAtPosition: function(position)
-    {
-        return this._codeMirror.findMarksAt(position).map(function(codeMirrorTextMarker) {
-            return WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(codeMirrorTextMarker);
-        });
-    },
-
-    createColorMarkers: function(lineNumber)
-    {
-        return this._codeMirror.createColorMarkers(lineNumber);
-    },
-
-    colorEditingControllerForMarker: function(colorMarker)
-    {
-        return new WebInspector.CodeMirrorColorEditingController(this._codeMirror, colorMarker);
-    },
-
-    // Private
-
-    _contentChanged: function(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: 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 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;
-        }
-
-        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: 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.BreakpointAutoContinueStyleClassName);
-            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);
-    },
-
-    _gutterContextMenu: function(codeMirror, lineNumber, gutterElement, event)
-    {
-        if (this._delegate && typeof this._delegate.textEditorGutterContextMenu === "function") {
-            var breakpoints = [];
-            for (var columnNumber in this._breakpoints[lineNumber])
-                breakpoints.push({lineNumber:lineNumber, columnNumber:columnNumber});
-
-            this._delegate.textEditorGutterContextMenu(this, lineNumber, 0, breakpoints, event);
-        }
-    },
-
-    _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 delegateImplementsBreakpointClicked = this._delegate && typeof this._delegate.textEditorBreakpointClicked === "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] && 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: 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(!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));
-    }
-};
-
-WebInspector.TextEditor.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TextMarker.js b/Source/WebInspectorUI/UserInterface/TextMarker.js
deleted file mode 100644
index efdceb156..000000000
--- a/Source/WebInspectorUI/UserInterface/TextMarker.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = function(codeMirrorTextMarker, type)
-{
-    WebInspector.Object.call(this);
-
-    this._codeMirrorTextMarker = codeMirrorTextMarker;
-    codeMirrorTextMarker.__webInspectorTextMarker = this;
-
-    this._type = type || WebInspector.TextMarker.Type.Plain;
-}
-
-WebInspector.TextMarker.Type = {
-    Color: "text-marker-type-color",
-    Plain: "text-marker-type-plain"
-};
-
-WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker = function(codeMirrorTextMarker)
-{
-    return codeMirrorTextMarker.__webInspectorTextMarker || new WebInspector.TextMarker(codeMirrorTextMarker);
-};
-
-WebInspector.TextMarker.prototype = {
-    constructor: WebInspector.TextMarker,
-    __proto__: WebInspector.Object.prototype,
-    
-    // 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 bounds()
-    {
-        var range = this._codeMirrorTextMarker.find();
-        if (!range)
-            return WebInspector.Rect.ZERO_RECT;
-        return this._codeMirrorTextMarker.doc.cm.boundsForRange({
-            start: range.from,
-            end: range.to
-        });
-    },
-    
-    clear: function()
-    {
-        this._codeMirrorTextMarker.clear();
-    }
-};
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 b34ee2752..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.svg", 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/Timeline.js b/Source/WebInspectorUI/UserInterface/Timeline.js
deleted file mode 100644
index e2e272944..000000000
--- a/Source/WebInspectorUI/UserInterface/Timeline.js
+++ /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.
- */
-
-WebInspector.Timeline = function()
-{
-    WebInspector.Object.call(this);
-
-    this.reset(true);
-};
-
-WebInspector.Timeline.Event = {
-    Reset: "timeline-reset",
-    RecordAdded: "timeline-record-added",
-    TimesUpdated: "timeline-times-updated"
-};
-
-WebInspector.Timeline.prototype = {
-    constructor: WebInspector.Timeline,
-    __proto__: WebInspector.Object.prototype,
-
-    // Public
-
-    get startTime()
-    {
-        return this._startTime;
-    },
-
-    get endTime()
-    {
-        return this._endTime;
-    },
-
-    get records()
-    {
-        return this._records;
-    },
-
-    reset: function(suppressEvents)
-    {
-        this._records = [];
-        this._startTime = NaN;
-        this._endTime = NaN;
-
-        if (!suppressEvents) {
-            this.dispatchEventToListeners(WebInspector.Timeline.Event.Reset);
-            this.dispatchEventToListeners(WebInspector.Timeline.Event.TimesUpdated);
-        }
-    },
-
-    addRecord: function(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: record});
-    },
-
-    // Private
-
-    _updateTimesIfNeeded: function(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: function(event)
-    {
-        this._updateTimesIfNeeded(event.target);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/TimelineContentView.css b/Source/WebInspectorUI/UserInterface/TimelineContentView.css
deleted file mode 100644
index 9cbc0df22..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineContentView.css
+++ /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.
- */
-
-.content-view.timeline > .timeline-overview {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 130px;
-}
-
-.content-view.timeline > .view-container {
-    position: absolute;
-    top: 130px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow: hidden;
-}
-
-.content-view.timeline > .view-container > .timeline-view > .data-grid td {
-    height: 16px;
-    line-height: 16px;
-}
-
-.content-view.timeline > .view-container > .timeline-view > .data-grid table.data {
-    background-image: -webkit-linear-gradient(top, white, white 50%, rgb(243, 243, 243) 50%, rgb(243, 243, 243));
-    background-size: 100% 40px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineContentView.js b/Source/WebInspectorUI/UserInterface/TimelineContentView.js
deleted file mode 100644
index 200c2c207..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineContentView.js
+++ /dev/null
@@ -1,417 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TimelineContentView = function(recording)
-{
-    WebInspector.ContentView.call(this, recording);
-
-    this._recording = recording;
-
-    this.element.classList.add(WebInspector.TimelineContentView.StyleClassName);
-
-    this._discreteTimelineOverviewGraphMap = new Map;
-    this._discreteTimelineOverviewGraphMap.set(WebInspector.TimelineRecord.Type.Network, new WebInspector.NetworkTimelineOverviewGraph(recording));
-    this._discreteTimelineOverviewGraphMap.set(WebInspector.TimelineRecord.Type.Layout, new WebInspector.LayoutTimelineOverviewGraph(recording));
-    this._discreteTimelineOverviewGraphMap.set(WebInspector.TimelineRecord.Type.Script, new WebInspector.ScriptTimelineOverviewGraph(recording));
-
-    this._timelineOverview = new WebInspector.TimelineOverview(this._discreteTimelineOverviewGraphMap);
-    this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
-    this.element.appendChild(this._timelineOverview.element);
-
-    this._viewContainer = document.createElement("div");
-    this._viewContainer.classList.add(WebInspector.TimelineContentView.ViewContainerStyleClassName);
-    this.element.appendChild(this._viewContainer);
-
-    this._clearTimelineNavigationItem = new WebInspector.ButtonNavigationItem("clear-timeline", WebInspector.UIString("Clear Timeline"), "Images/NavigationItemTrash.svg", 16, 16);
-    this._clearTimelineNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearTimeline, this);
-
-    this._overviewTimelineView = new WebInspector.OverviewTimelineView(recording);
-
-    this._discreteTimelineViewMap = new Map;
-    this._discreteTimelineViewMap.set(WebInspector.TimelineRecord.Type.Network, new WebInspector.NetworkTimelineView(recording));
-    this._discreteTimelineViewMap.set(WebInspector.TimelineRecord.Type.Layout, new WebInspector.LayoutTimelineView(recording));
-    this._discreteTimelineViewMap.set(WebInspector.TimelineRecord.Type.Script, new WebInspector.ScriptTimelineView(recording));
-
-    function createPathComponent(displayName, className, representedObject)
-    {
-        var pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, representedObject);
-        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
-        return pathComponent;
-    }
-
-    this._pathComponentMap = new Map;
-    this._pathComponentMap.set(WebInspector.TimelineRecord.Type.Network, createPathComponent.call(this, WebInspector.UIString("Network Requests"), WebInspector.TimelineSidebarPanel.NetworkIconStyleClass, WebInspector.TimelineRecord.Type.Network));
-    this._pathComponentMap.set(WebInspector.TimelineRecord.Type.Layout, createPathComponent.call(this, WebInspector.UIString("Layout & Rendering"), WebInspector.TimelineSidebarPanel.ColorsIconStyleClass, WebInspector.TimelineRecord.Type.Layout));
-    this._pathComponentMap.set(WebInspector.TimelineRecord.Type.Script, createPathComponent.call(this, WebInspector.UIString("JavaScript & Events"), WebInspector.TimelineSidebarPanel.ScriptIconStyleClass, WebInspector.TimelineRecord.Type.Script));
-
-    var previousPathComponent = null;
-    for (var pathComponent of this._pathComponentMap.values()) {
-        if (previousPathComponent) {
-            previousPathComponent.nextSibling = pathComponent;
-            pathComponent.previousSibling = previousPathComponent;
-        }
-
-        previousPathComponent = pathComponent;
-    }
-
-    this._currentTimelineView = null;
-    this._currentTimelineViewIdentifier = null;
-
-    this._updating = false;
-    this._currentTime = NaN;
-    this._lastUpdateTimestamp = NaN;
-    this._startTimeNeedsReset = true;
-
-    recording.addEventListener(WebInspector.TimelineRecording.Event.Reset, this._recordingReset, this);
-
-    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStarted, this._recordingStarted, this);
-    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStopped, this._recordingStopped, this);
-
-    this.showOverviewTimelineView();
-};
-
-WebInspector.TimelineContentView.StyleClassName = "timeline";
-WebInspector.TimelineContentView.ViewContainerStyleClassName = "view-container";
-
-WebInspector.TimelineContentView.prototype = {
-    constructor: WebInspector.TimelineContentView,
-    __proto__: WebInspector.ContentView.prototype,
-
-    // Public
-
-    showOverviewTimelineView: function()
-    {
-        this._showTimelineView(this._overviewTimelineView);
-    },
-
-    showTimelineView: function(identifier)
-    {
-        console.assert(this._discreteTimelineViewMap.has(identifier));
-        if (!this._discreteTimelineViewMap.has(identifier))
-            return;
-
-        this._showTimelineView(this._discreteTimelineViewMap.get(identifier), identifier);
-    },
-
-    get allowedNavigationSidebarPanels()
-    {
-        return ["timeline"];
-    },
-
-    get supportsSplitContentBrowser()
-    {
-        // The layout of the overview and split content browser don't work well.
-        return false;
-    },
-
-    get selectionPathComponents()
-    {
-        var pathComponents = this._currentTimelineViewIdentifier ? [this._pathComponentMap.get(this._currentTimelineViewIdentifier)] : [];
-        pathComponents = pathComponents.concat(this._currentTimelineView.selectionPathComponents || []);
-        return pathComponents;
-    },
-
-    get navigationItems()
-    {
-        return [this._clearTimelineNavigationItem];
-    },
-
-    shown: function()
-    {
-        if (!this._currentTimelineView)
-            return;
-
-        this._currentTimelineView.shown();
-    },
-
-    hidden: function()
-    {
-        if (!this._currentTimelineView)
-            return;
-
-        this._currentTimelineView.hidden();
-    },
-
-    updateLayout: function()
-    {
-        this._timelineOverview.updateLayout();
-
-        if (!this._currentTimelineView)
-            return;
-
-        this._currentTimelineView.updateLayout();
-    },
-
-    matchTreeElementAgainstCustomFilters: function(treeElement)
-    {
-        if (this._currentTimelineView && !this._currentTimelineView.matchTreeElementAgainstCustomFilters(treeElement))
-            return false;
-
-        var startTime = this._timelineOverview.selectionStartTime;
-        var endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
-        var currentTime = this._currentTime || this._recording.startTime;
-
-        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.TimelineRecordTreeElement) {
-            var record = treeElement.record;
-            return checkTimeBounds(record.startTime, record.endTime);
-        }
-
-        console.error("Unknown TreeElement, can't filter by time.");
-        return true;
-    },
-
-    // Private
-
-    _pathComponentSelected: function(event)
-    {
-        WebInspector.timelineSidebarPanel.showTimelineView(event.data.pathComponent.representedObject);
-    },
-
-    _timelineViewSelectionPathComponentsDidChange: function()
-    {
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
-    },
-
-    _showTimelineView: function(timelineView, identifier)
-    {
-        console.assert(timelineView instanceof WebInspector.TimelineView);
-
-        if (this._currentTimelineView === timelineView)
-            return;
-
-        if (this._currentTimelineView) {
-            this._currentTimelineView.removeEventListener(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange, this._timelineViewSelectionPathComponentsDidChange, this);
-
-            this._currentTimelineView.hidden();
-            this._currentTimelineView.element.remove();
-        }
-
-        this._currentTimelineView = timelineView;
-        this._currentTimelineViewIdentifier = identifier || null;
-
-        WebInspector.timelineSidebarPanel.contentTreeOutline = timelineView && timelineView.navigationSidebarTreeOutline;
-        WebInspector.timelineSidebarPanel.contentTreeOutlineLabel = timelineView && timelineView.navigationSidebarTreeOutlineLabel;
-
-        if (this._currentTimelineView) {
-            this._currentTimelineView.addEventListener(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange, this._timelineViewSelectionPathComponentsDidChange, this);
-
-            this._viewContainer.appendChild(this._currentTimelineView.element);
-
-            this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
-            this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
-            this._currentTimelineView.currentTime = this._currentTime;
-
-            this._currentTimelineView.shown();
-            this._currentTimelineView.updateLayout();
-        }
-
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
-    },
-
-    _update: function(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.
-        if (!this._updating && currentTime >= endTime) {
-            this._lastUpdateTimestamp = NaN;
-            return;
-        }
-
-        this._lastUpdateTimestamp = timestamp;
-
-        requestAnimationFrame(this._updateCallback);
-    },
-
-    _updateTimes: function(startTime, currentTime, endTime)
-    {
-        if (this._startTimeNeedsReset && !isNaN(startTime)) {
-            var selectionOffset = this._timelineOverview.selectionStartTime - this._timelineOverview.startTime;
-
-            this._timelineOverview.startTime = startTime;
-            this._timelineOverview.selectionStartTime = startTime + selectionOffset;
-
-            this._overviewTimelineView.zeroTime = startTime;
-            for (var timelineView of this._discreteTimelineViewMap.values())
-                timelineView.zeroTime = startTime;
-
-            delete this._startTimeNeedsReset;
-        }
-
-        this._timelineOverview.endTime = Math.max(endTime, currentTime);
-
-        this._currentTime = currentTime;
-        this._timelineOverview.currentTime = currentTime;
-        this._currentTimelineView.currentTime = currentTime;
-
-        // 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();
-        this._currentTimelineView.updateLayoutIfNeeded();
-    },
-
-    _startUpdatingCurrentTime: function()
-    {
-        console.assert(!this._updating);
-        if (this._updating)
-            return;
-
-        if (!isNaN(this._currentTime)) {
-            // We have a current time already, so we likely need to jump into the future to a better current time.
-            // This happens when you stop and later restart recording.
-            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: function()
-    {
-        console.assert(this._updating);
-        this._updating = false;
-    },
-
-    _recordingStarted: function(event)
-    {
-        this._startUpdatingCurrentTime();
-    },
-
-    _recordingStopped: function(event)
-    {
-        this._stopUpdatingCurrentTime();
-    },
-
-    _recordingTimesUpdated: function(event)
-    {
-        if (!this._waitingToResetCurrentTime)
-            return;
-
-        // 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.
-        // FIXME: If no activity is happening we can sit for a while until a record is added.
-        // We might want to have the backend send a "start" record to get current time moving.
-
-        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);
-        delete this._waitingToResetCurrentTime;
-    },
-
-    _clearTimeline: function(event)
-    {
-        this._recording.reset();
-    },
-
-    _recordingReset: function(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);
-        delete this._waitingToResetCurrentTime;
-
-        this._overviewTimelineView.reset();
-        for (var timelineView of this._discreteTimelineViewMap.values())
-            timelineView.reset();
-
-        for (var timelineOverviewGraph of this._discreteTimelineOverviewGraphMap.values())
-            timelineOverviewGraph.reset();
-    },
-
-    _timeRangeSelectionChanged: function(event)
-    {
-        this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
-        this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
-
-        // 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;
-
-            WebInspector.timelineSidebarPanel.updateFilter();
-
-            if (selectedTreeElement && selectedTreeElement.hidden !== selectionWasHidden)
-                this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
-        }.bind(this));
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css b/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css
deleted file mode 100644
index 7a987b08f..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css
+++ /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.
- */
-
-.data-grid.timeline {
-    border: none;
-}
-
-.data-grid.timeline table {
-    font-size: 11px;
-}
-
-.data-grid.timeline th {
-    height: 22px;
-
-    font-size: 11px;
-    font-family: "Lucida Grande", sans-serif;
-
-    background-image: none;
-    background-color: white;
-
-    border-top: 1px solid rgb(179, 179, 179) !important;
-    border-bottom: 1px solid rgb(179, 179, 179) !important;
-}
-
-.data-grid.timeline th:not(:last-child) {
-    border-right: 1px solid rgb(179, 179, 179);
-}
-
-.data-grid.timeline th.sortable:active {
-    background-image: none !important;
-    background-color: rgb(210, 210, 210);
-}
-
-.data-grid.timeline th.sort-ascending,
-.data-grid.timeline th.sort-descending {
-    background-image: none !important;
-    background-color: rgb(230, 230, 230);
-}
-
-.data-grid.timeline .data-container {
-    top: 23px;
-}
-
-.data-grid.timeline th,
-.data-grid.timeline td {
-    padding-left: 6px;
-    padding-right: 6px;
-}
-
-.data-grid.timeline td:last-child {
-    padding-right: 12px;
-}
-
-.data-grid.timeline td {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    line-height: 17px;
-}
-
-.data-grid.timeline td:not(:last-child) {
-    border-right: 1px solid rgb(179, 179, 179);
-}
-
-.data-grid.timeline:focus tr.selected td:not(:last-child) {
-    border-right-color: rgb(53, 109, 189);
-}
-
-.data-grid.timeline th.sort-ascending > div:first-child,
-.data-grid.timeline th.sort-descending > div:first-child {
-    padding-right: 13px;
-}
-
-.data-grid.timeline th.sort-ascending > div:first-child::after,
-.data-grid.timeline th.sort-descending > div:first-child::after {
-    top: 1px;
-}
-
-.data-grid.timeline td.error {
-    color: rgb(224, 16, 16);
-}
-
-.data-grid.timeline tr.selected td.error {
-    color: inherit;
-}
-
-.data-grid.timeline td .icon {
-    display: inline-block;
-    vertical-align: top;
-
-    width: 16px;
-    height: 16px;
-
-    margin-right: 2px;
-}
-
-.data-grid.timeline td .go-to-arrow {
-    float: right;
-
-    visibility: hidden;
-
-    margin-left: 2px;
-}
-
-.data-grid.timeline tr.selected .go-to-arrow,
-.data-grid.timeline tr:hover .go-to-arrow {
-    visibility: visible;
-}
-
-.data-grid.timeline td .subtitle {
-    color: rgba(0, 0, 0, 0.7);
-}
-
-.data-grid.timeline td .subtitle::before {
-    content: " — ";
-}
-
-.data-grid.timeline:focus tr.selected td .subtitle {
-    color: rgba(255, 255, 255, 0.9);
-}
-
-.data-grid.timeline > .navigation-bar-container {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 32px;
-
-    pointer-events: none;
-    visibility: hidden;
-}
-
-.data-grid.timeline:hover > .navigation-bar-container {
-    pointer-events: all;
-    visibility: visible;
-}
-
-.data-grid.timeline > .navigation-bar-container > .navigation-bar {
-    position: absolute;
-    top: 10px;
-    left: 0;
-    right: 0;
-    height: 22px;
-
-    border-bottom: none;
-    border-top: 1px solid rgb(200, 200, 200);
-    box-shadow: none;
-
-    background-color: white;
-}
-
-.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 cd47d1209..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineDataGrid.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.TimelineDataGrid = function(treeOutline, columns, editCallback, deleteCallback)
-{
-    WebInspector.DataGrid.call(this, columns, editCallback, deleteCallback);
-
-    this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(treeOutline, this);
-
-    this.element.classList.add(WebInspector.TimelineDataGrid.StyleClassName);
-
-    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;
-    }
-
-    if (this._filterableColumns.length) {
-        var items = [new WebInspector.FlexibleSpaceNavigationItem, this.columns[this._filterableColumns[0]].scopeBar, new WebInspector.FlexibleSpaceNavigationItem];
-        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);
-    this.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sort, this);
-
-    window.addEventListener("resize", this._windowResized.bind(this));
-}
-
-WebInspector.TimelineDataGrid.StyleClassName = "timeline";
-WebInspector.TimelineDataGrid.DelayedPopoverShowTimeout = 250;
-WebInspector.TimelineDataGrid.DelayedPopoverHideContentClearTimeout = 500;
-
-WebInspector.TimelineDataGrid.Event = {
-    FiltersDidChange: "timelinedatagrid-filters-did-change"
-};
-
-WebInspector.TimelineDataGrid.createColumnScopeBar = function(prefix, dictionary)
-{
-    prefix = prefix + "-timeline-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]);
-};
-
-WebInspector.TimelineDataGrid.prototype = {
-    constructor: WebInspector.TimelineDataGrid,
-    __proto__: WebInspector.DataGrid.prototype,
-
-    // Public
-
-    reset: function()
-    {
-        // May be overridden by subclasses. If so, they should call the superclass.
-
-        this._hidePopover();
-    },
-
-    shown: function()
-    {
-        // May be overridden by subclasses. If so, they should call the superclass.
-
-        this._treeOutlineDataGridSynchronizer.synchronize();
-    },
-
-    hidden: function()
-    {
-        // May be overridden by subclasses. If so, they should call the superclass.
-
-        this._hidePopover();
-    },
-
-    treeElementForDataGridNode: function(dataGridNode)
-    {
-        return this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
-    },
-
-    dataGridNodeForTreeElement: function(treeElement)
-    {
-        return this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(treeElement);
-    },
-
-    callFramePopoverAnchorElement: function()
-    {
-        // Implemented by subclasses.
-        return null;
-    },
-
-    updateLayout: function()
-    {
-        WebInspector.DataGrid.prototype.updateLayout.call(this);
-
-        if (this._navigationBar)
-            this._navigationBar.updateLayout();
-    },
-
-    treeElementMatchesActiveScopeFilters: function(treeElement)
-    {
-        var dataGridNode = this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(treeElement);
-        console.assert(dataGridNode);
-
-        for (var identifier of this._filterableColumns) {
-            var scopeBar = this.columns[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: function(treeElement, dataGridNode)
-    {
-        this._treeOutlineDataGridSynchronizer.associate(treeElement, dataGridNode);
-
-        var treeOutline = this._treeOutlineDataGridSynchronizer.treeOutline;
-
-        if (this.sortColumnIdentifier) {
-            var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this.children, this._sortComparator.bind(this));
-
-            // Insert into the tree outline, which will cause the synchronizer to insert into the data grid.
-            treeOutline.insertChild(treeElement, insertionIndex);
-        } else {
-            // Append to the tree outline, which will cause the synchronizer to append to the data grid.
-            treeOutline.appendChild(treeElement);
-        }
-    },
-
-    shouldIgnoreSelectionEvent: function()
-    {
-        return this._ignoreSelectionEvent || false;
-    },
-
-    // Protected
-
-    dataGridNodeNeedsRefresh: function(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: function()
-    {
-        if (this._scheduledDataGridNodeRefreshIdentifier) {
-            cancelAnimationFrame(this._scheduledDataGridNodeRefreshIdentifier);
-            delete this._scheduledDataGridNodeRefreshIdentifier;
-        }
-
-        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);
-
-            treeOutline.removeChild(treeElement);
-            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();
-                delete this._ignoreSelectionEvent;
-            }
-        }
-
-        this._treeOutlineDataGridSynchronizer.enabled = true;
-
-        delete this._dirtyDataGridNodes;
-    },
-
-    _sort: function()
-    {
-        var sortColumnIdentifier = this.sortColumnIdentifier;
-        if (!sortColumnIdentifier)
-            return;
-
-        var selectedNode = this.selectedNode;
-        this._ignoreSelectionEvent = true;
-
-        var dataGridNodes = this.children.slice();
-        dataGridNodes.sort(this._sortComparator.bind(this));
-
-        this._treeOutlineDataGridSynchronizer.enabled = false;
-
-        var treeOutline = this._treeOutlineDataGridSynchronizer.treeOutline;
-
-        this.removeChildren();
-        treeOutline.removeChildren();
-
-        for (var dataGridNode of dataGridNodes) {
-            var treeElement = this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
-            console.assert(treeElement);
-
-            treeOutline.appendChild(treeElement);
-            this.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();
-
-        delete this._ignoreSelectionEvent;
-    },
-
-    _sortComparator: function(node1, node2)
-    {
-        var sortColumnIdentifier = this.sortColumnIdentifier;
-        if (!sortColumnIdentifier)
-            return 0;
-
-        var sortDirection = this.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;
-    },
-
-    _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;
-        }
-
-        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: 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);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js
deleted file mode 100644
index 572af145d..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js
+++ /dev/null
@@ -1,346 +0,0 @@
-/*
- * 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.TimelineDataGridNode = function(graphOnly, graphDataSource)
-{
-    WebInspector.DataGridNode.call(this, {});
-
-    this._graphOnly = graphOnly || false;
-    this._graphDataSource = graphDataSource || null;
-
-    if (graphDataSource) {
-        this._graphContainerElement = document.createElement("div");
-        this._timelineRecordBars = [];
-    }
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.TimelineDataGridNode);
-
-WebInspector.TimelineDataGridNode.prototype = {
-    constructor: WebInspector.TimelineDataGridNode,
-    __proto__: WebInspector.DataGridNode.prototype,
-
-    // 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: function()
-    {
-        WebInspector.DataGridNode.prototype.collapse.call(this);
-
-        if (!this.revealed)
-            return;
-
-        // Refresh to show child bars in our graph now that we collapsed.
-        this.refreshGraph();
-    },
-
-    expand: function()
-    {
-        WebInspector.DataGridNode.prototype.expand.call(this);
-
-        if (!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: function(columnIdentifier, cell)
-    {
-        if (columnIdentifier === "graph" && this._graphDataSource) {
-            this.needsGraphRefresh();
-            return this._graphContainerElement;
-        }
-
-        var value = this.data[columnIdentifier];
-        if (!value)
-            return "\u2014";
-
-        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 = WebInspector.ScriptTimelineDataGridNode.IconStyleClassName;
-            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.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;
-        }
-
-        return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
-    },
-
-    refresh: function()
-    {
-        if (this._graphDataSource && this._graphOnly) {
-            this.needsGraphRefresh();
-            return;
-        }
-
-        WebInspector.DataGridNode.prototype.refresh.call(this);
-    },
-
-    refreshGraph: function()
-    {
-        if (!this._graphDataSource)
-            return;
-
-        if (this._scheduledGraphRefreshIdentifier) {
-            cancelAnimationFrame(this._scheduledGraphRefreshIdentifier);
-            delete this._scheduledGraphRefreshIdentifier;
-        }
-
-        // 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 startTime = this._graphDataSource.startTime;
-        var currentTime = this._graphDataSource.currentTime;
-        var endTime = this._graphDataSource.endTime;
-        var duration = endTime - startTime;
-        var visibleWidth = this._graphContainerElement.offsetWidth;
-        var secondsPerPixel = duration / visibleWidth;
-        var recordBarIndex = 0;
-
-        function createBar(records, renderMode)
-        {
-            var timelineRecordBar = this._timelineRecordBars[recordBarIndex];
-            if (!timelineRecordBar)
-                timelineRecordBar = this._timelineRecordBars[recordBarIndex] = new WebInspector.TimelineRecordBar;
-            timelineRecordBar.renderMode = renderMode;
-            timelineRecordBar.records = records;
-            timelineRecordBar.refresh(this._graphDataSource);
-            if (!timelineRecordBar.element.parentNode)
-                this._graphContainerElement.appendChild(timelineRecordBar.element);
-            ++recordBarIndex;
-        }
-
-        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;
-
-            function collectRecordsByType(records)
-            {
-                for (var record of records) {
-                    var typedRecords = recordTypeMap.get(record.type);
-                    if (!typedRecords) {
-                        typedRecords = [];
-                        recordTypeMap.set(record.type, typedRecords);
-                    }
-
-                    typedRecords.push(record);
-                }
-            }
-
-            collectRecordsByType(this.records);
-
-            var childNode = this.children[0];
-            while (childNode) {
-                if (childNode instanceof WebInspector.TimelineDataGridNode)
-                    collectRecordsByType(childNode.records);
-                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: function()
-    {
-        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: function(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/TimelineIcons.css b/Source/WebInspectorUI/UserInterface/TimelineIcons.css
deleted file mode 100644
index 640a37839..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineIcons.css
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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);
-}
-
-.network-icon.large .icon {
-    content: -webkit-image-set(url(Images/NetworkLarge.png) 1x, url(Images/NetworkLarge@2x.png) 2x);
-}
-
-.colors-icon .icon {
-    content: -webkit-image-set(url(Images/Colors.png) 1x, url(Images/Colors@2x.png) 2x);
-}
-
-.colors-icon.large .icon {
-    content: -webkit-image-set(url(Images/ColorsLarge.png) 1x, url(Images/ColorsLarge@2x.png) 2x);
-}
-
-.script-icon .icon {
-    content: -webkit-image-set(url(Images/Script.png) 1x, url(Images/Script@2x.png) 2x);
-}
-
-.script-icon.large .icon {
-    content: -webkit-image-set(url(Images/ScriptLarge.png) 1x, url(Images/ScriptLarge@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);
-}
-
-.style-record .icon {
-    content: url(Images/TimelineRecordStyle.svg);
-}
-
-.layout-record .icon {
-    content: url(Images/TimelineRecordLayout.svg);
-}
-
-.paint-record .icon {
-    content: url(Images/TimelineRecordPaint.svg);
-}
-
-.evaluated-record .icon {
-    content: url(Images/TimelineRecordScriptEvaluated.svg);
-}
-
-.event-record .icon {
-    content: url(Images/TimelineRecordEvent.svg);
-}
-
-.timer-record .icon {
-    content: url(Images/TimelineRecordTimer.svg);
-}
-
-.animation-record .icon {
-    content: url(Images/TimelineRecordAnimation.svg);
-}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineManager.js b/Source/WebInspectorUI/UserInterface/TimelineManager.js
deleted file mode 100644
index 0bea0c7f8..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineManager.js
+++ /dev/null
@@ -1,445 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = new WebInspector.TimelineRecording;
-    this._recordingEnabled = false;
-};
-
-WebInspector.TimelineManager.Event = {
-    RecordingStarted: "timeline-manager-recording-started",
-    RecordingStopped: "timeline-manager-recording-stopped"
-};
-
-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 recordingEnabled()
-    {
-        return this._recordingEnabled;
-    },
-
-    startRecording: function()
-    {
-        if (this._recordingEnabled)
-            return;
-
-        this._recordingEnabled = true;
-
-        TimelineAgent.start();
-
-        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingStarted);
-    },
-
-    stopRecording: function()
-    {
-        if (!this._recordingEnabled)
-            return;
-
-        if (this._stopRecordingTimeout) {
-            clearTimeout(this._stopRecordingTimeout);
-            delete this._stopRecordingTimeout;
-        }
-
-        if (this._deadTimeTimeout) {
-            clearTimeout(this._deadTimeTimeout);
-            delete this._deadTimeTimeout;
-        }
-
-        TimelineAgent.stop();
-
-        this._recordingEnabled = false;
-        this._autoRecordingMainResource = null;
-
-        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingStopped);
-    },
-
-    eventRecorded: function(originalRecordPayload)
-    {
-        // Called from WebInspector.TimelineObserver.
-
-        if (!this._recordingEnabled)
-            return;
-
-        function processRecord(recordPayload, parentRecordPayload)
-        {
-            // Convert the timestamps to seconds to match the resource timestamps.
-            var startTime = recordPayload.startTime / 1000;
-            var endTime = recordPayload.endTime / 1000;
-
-            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.MarkLoad:
-                console.assert(isNaN(endTime));
-
-                var frame = WebInspector.frameResourceManager.frameForIdentifier(recordPayload.frameId);
-                console.assert(frame);
-                if (!frame)
-                    break;
-
-                frame.markLoadEvent(startTime);
-
-                if (!frame.isMainFrame())
-                    break;
-
-                var eventMarker = new WebInspector.TimelineMarker(startTime, WebInspector.TimelineMarker.Type.LoadEvent);
-                this._recording.addEventMarker(eventMarker);
-
-                this._stopAutoRecordingSoon();
-                break;
-
-            case TimelineAgent.EventType.MarkDOMContent:
-                console.assert(isNaN(endTime));
-
-                var frame = WebInspector.frameResourceManager.frameForIdentifier(recordPayload.frameId);
-                console.assert(frame);
-                if (!frame)
-                    break;
-
-                frame.markDOMContentReadyEvent(startTime);
-
-                if (!frame.isMainFrame())
-                    break;
-
-                var eventMarker = new WebInspector.TimelineMarker(startTime, WebInspector.TimelineMarker.Type.DOMContentEvent);
-                this._recording.addEventMarker(eventMarker);
-                break;
-
-            case TimelineAgent.EventType.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, sourceCodeLocation));
-                break;
-
-            case TimelineAgent.EventType.RecalculateStyles:
-                this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles, startTime, endTime, callFrames, sourceCodeLocation));
-                break;
-
-            case TimelineAgent.EventType.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, sourceCodeLocation));
-                break;
-
-            case TimelineAgent.EventType.Layout:
-                // COMPATIBILITY (iOS 6): Layout records did not contain area properties. This is not exposed via a quad "root".
-                var quad = recordPayload.data.root ? new WebInspector.Quad(recordPayload.data.root) : null;
-                if (quad)
-                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Layout, startTime, endTime, callFrames, sourceCodeLocation, 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, sourceCodeLocation));
-                break;
-
-            case TimelineAgent.EventType.Paint:
-                // COMPATIBILITY (iOS 6): Paint records data contained x, y, width, height properties. This became a quad "clip".
-                var quad = recordPayload.data.clip ? new WebInspector.Quad(recordPayload.data.clip) : null;
-                if (quad)
-                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Paint, startTime, endTime, callFrames, sourceCodeLocation, null, null, quad.width, quad.height, quad));
-                else
-                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Paint, startTime, endTime, callFrames, sourceCodeLocation, recordPayload.data.x, recordPayload.data.y, recordPayload.data.width, recordPayload.data.height));
-                break;
-
-            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);
-                    }
-                }
-
-                switch (parentRecordPayload && parentRecordPayload.type) {
-                case TimelineAgent.EventType.TimerFire:
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerFired, startTime, endTime, callFrames, sourceCodeLocation, parentRecordPayload.data.timerId));
-                    break;
-                default:
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated, startTime, endTime, callFrames, sourceCodeLocation, null));
-                    break;
-                }
-
-                break;
-
-            case TimelineAgent.EventType.TimeStamp:
-                var eventMarker = new WebInspector.TimelineMarker(startTime, WebInspector.TimelineMarker.Type.TimeStamp);
-                this._recording.addEventMarker(eventMarker);
-                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)
-                    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);
-                    }
-                }
-
-                switch (parentRecordPayload.type) {
-                case TimelineAgent.EventType.TimerFire:
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerFired, startTime, endTime, callFrames, sourceCodeLocation, parentRecordPayload.data.timerId));
-                    break;
-                case TimelineAgent.EventType.EventDispatch:
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.EventDispatched, startTime, endTime, callFrames, sourceCodeLocation, parentRecordPayload.data.type));
-                    break;
-                case TimelineAgent.EventType.XHRLoad:
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.EventDispatched, startTime, endTime, callFrames, sourceCodeLocation, "load"));
-                    break;
-                case TimelineAgent.EventType.XHRReadyStateChange:
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.EventDispatched, startTime, endTime, callFrames, sourceCodeLocation, "readystatechange"));
-                    break;
-                case TimelineAgent.EventType.FireAnimationFrame:
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired, startTime, endTime, callFrames, sourceCodeLocation, parentRecordPayload.data.id));
-                    break;
-                }
-
-                break;
-
-            case TimelineAgent.EventType.TimerInstall:
-                console.assert(isNaN(endTime));
-
-                // Pass the startTime as the endTime since this record type has no duration.
-                this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerInstalled, startTime, startTime, callFrames, sourceCodeLocation, recordPayload.data.timerId));
-                break;
-
-            case TimelineAgent.EventType.TimerRemove:
-                console.assert(isNaN(endTime));
-
-                // Pass the startTime as the endTime since this record type has no duration.
-                this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerRemoved, startTime, startTime, callFrames, sourceCodeLocation, recordPayload.data.timerId));
-                break;
-
-            case TimelineAgent.EventType.RequestAnimationFrame:
-                console.assert(isNaN(endTime));
-
-                // Pass the startTime as the endTime since this record type has no duration.
-                this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.AnimationFrameRequested, startTime, startTime, callFrames, sourceCodeLocation, recordPayload.data.timerId));
-                break;
-
-            case TimelineAgent.EventType.CancelAnimationFrame:
-                console.assert(isNaN(endTime));
-
-                // Pass the startTime as the endTime since this record type has no duration.
-                this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.AnimationFrameCanceled, startTime, startTime, callFrames, sourceCodeLocation, recordPayload.data.timerId));
-                break;
-            }
-        }
-
-        // 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: [originalRecordPayload], parent: null, index: 0}];
-        while (stack.length) {
-            var entry = stack.lastValue;
-            var recordPayloads = entry.array;
-            var parentRecordPayload = entry.parent;
-
-            if (entry.index < recordPayloads.length) {
-                var recordPayload = recordPayloads[entry.index];
-
-                processRecord.call(this, recordPayload, parentRecordPayload);
-
-                if (recordPayload.children)
-                    stack.push({array: recordPayload.children, parent: recordPayload, index: 0});
-                ++entry.index;
-            } else
-                stack.pop();
-        }
-    },
-
-    pageDidLoad: function(timestamp)
-    {
-        if (isNaN(WebInspector.frameResourceManager.mainFrame.loadEventTimestamp))
-            WebInspector.frameResourceManager.mainFrame.markLoadEvent(timestamp);
-    },
-
-    // Private
-
-    _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._recording.addRecord(record);
-
-        // Only worry about dead time after the load event.
-        if (!isNaN(WebInspector.frameResourceManager.mainFrame.loadEventTimestamp))
-            this._resetAutoRecordingDeadTimeTimeout();
-    },
-
-    _startAutoRecording: function(event)
-    {
-        if (!event.target.isMainFrame() || (this._recordingEnabled && !this._autoRecordingMainResource))
-            return false;
-
-        var mainResource = event.target.provisionalMainResource || event.target.mainResource;
-        if (mainResource === this._autoRecordingMainResource)
-            return false;
-
-        this.stopRecording();
-
-        this._autoRecordingMainResource = mainResource;
-
-        this._recording.reset();
-
-        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._recordingEnabled || !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._recordingEnabled || !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._recordingEnabled)
-            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._recordingEnabled)
-            return;
-
-        this._addRecord(new WebInspector.ResourceTimelineRecord(event.data.resource));
-    }
-};
-
-WebInspector.TimelineManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineMarker.js b/Source/WebInspectorUI/UserInterface/TimelineMarker.js
deleted file mode 100644
index 05e8339b2..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineMarker.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.TimelineMarker = function(time, type)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(type);
-
-    this._time = time || 0;
-    this._type = type;
-};
-
-WebInspector.TimelineMarker.Event = {
-    TimeChanged: "timeline-marker-time-changed"
-};
-
-WebInspector.TimelineMarker.Type = {
-    CurrentTime: "current-time",
-    LoadEvent: "load-event",
-    DOMContentEvent: "dom-content-event",
-    TimeStamp: "timestamp"
-};
-
-WebInspector.TimelineMarker.prototype = {
-    constructor: WebInspector.TimelineMarker,
-    __proto__: WebInspector.Object.prototype,
-
-    // Public
-
-    get time()
-    {
-        return this._time;
-    },
-
-    set time(x)
-    {
-        if (this._time === x)
-            return;
-
-        this._time = x || 0;
-
-        this.dispatchEventToListeners(WebInspector.TimelineMarker.Event.TimeChanged);
-    },
-
-    get type()
-    {
-        return this._type;
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/TimelineObserver.js b/Source/WebInspectorUI/UserInterface/TimelineObserver.js
deleted file mode 100644
index 1c7e0431f..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.
-
-    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 225455dbe..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineOverview.css
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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;
-}
-
-.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 > .graphs-container {
-    position: absolute;
-    top: 22px;
-    left: 0;
-    bottom: 0;
-    right: 0;
-}
-
-.timeline-overview > .graphs-container > .timeline-overview-graph {
-    height: 36px;
-}
-
-.timeline-overview > .graphs-container > .timeline-overview-graph:nth-child(even) {
-    background-color: rgb(247, 247, 247);
-    background-clip: padding-box;
-}
-
-.timeline-overview > .graphs-container > .timeline-overview-graph:not(:first-child) {
-    border-top: 1px solid rgba(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/TimelineOverview.js b/Source/WebInspectorUI/UserInterface/TimelineOverview.js
deleted file mode 100644
index 7603f0b58..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineOverview.js
+++ /dev/null
@@ -1,346 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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(timelineOverviewGraphsMap)
-{
-    WebInspector.Object.call(this);
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.TimelineOverview.StyleClassName;
-    this._element.addEventListener("wheel", this._handleWheelEvent.bind(this));
-
-    this._graphsContainer = document.createElement("div");
-    this._graphsContainer.className = WebInspector.TimelineOverview.GraphsContainerStyleClassName;
-    this._element.appendChild(this._graphsContainer);
-
-    this._timelineOverviewGraphsMap = timelineOverviewGraphsMap;
-
-    for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
-        this._graphsContainer.appendChild(timelineOverviewGraph.element);
-
-    this._timelineRuler = new WebInspector.TimelineRuler;
-    this._timelineRuler.allowsClippedLabels = true;
-    this._timelineRuler.allowsTimeRangeSelection = true;
-    this._timelineRuler.addEventListener(WebInspector.TimelineRuler.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
-    this._element.appendChild(this._timelineRuler.element);
-
-    this._currentTimeMarker = new WebInspector.TimelineMarker(0, WebInspector.TimelineMarker.Type.CurrentTime);
-    this._timelineRuler.addMarker(this._currentTimeMarker);
-
-    this._scrollContainer = document.createElement("div");
-    this._scrollContainer.className = WebInspector.TimelineOverview.ScrollContainerStyleClassName;
-    this._scrollContainer.addEventListener("scroll", this._handleScrollEvent.bind(this));
-    this._element.appendChild(this._scrollContainer);
-
-    this._scrollWidthSizer = document.createElement("div");
-    this._scrollWidthSizer.className = WebInspector.TimelineOverview.ScrollWidthSizerStyleClassName;
-    this._scrollContainer.appendChild(this._scrollWidthSizer);
-
-    this._secondsPerPixelSetting = new WebInspector.Setting("timeline-overview-seconds-per-pixel", 0.01);
-    this._selectionStartTimeSetting = new WebInspector.Setting("timeline-overview-selection-start-time", 0);
-    this._selectionDurationSetting = new WebInspector.Setting("timeline-overview-selection-duration", 5);
-
-    this._startTime = 0;
-    this._currentTime = 0;
-    this._endTime = 0;
-    this._secondsPerPixel = this._secondsPerPixelSetting.value;
-    this._scrollStartTime = 0;
-
-    this.selectionStartTime = this._selectionStartTimeSetting.value;
-    this.selectionDuration = this._selectionDurationSetting.value;
-};
-
-WebInspector.TimelineOverview.StyleClassName = "timeline-overview";
-WebInspector.TimelineOverview.GraphsContainerStyleClassName = "graphs-container";
-WebInspector.TimelineOverview.ScrollContainerStyleClassName = "scroll-container";
-WebInspector.TimelineOverview.ScrollWidthSizerStyleClassName = "scroll-width-sizer";
-WebInspector.TimelineOverview.MinimumSecondsPerPixel = 0.001;
-WebInspector.TimelineOverview.ScrollDeltaDenominator = 500;
-
-WebInspector.TimelineOverview.Event = {
-    TimeRangeSelectionChanged: "timeline-overview-time-range-selection-changed"
-};
-
-WebInspector.TimelineOverview.prototype = {
-    constructor: WebInspector.TimelineOverview,
-    __proto__: WebInspector.Object.prototype,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get startTime()
-    {
-        return this._startTime;
-    },
-
-    set startTime(x)
-    {
-        if (this._startTime === x)
-            return;
-
-        this._startTime = x || 0;
-
-        this._needsLayout();
-    },
-
-    get currentTime()
-    {
-        return this._currentTime;
-    },
-
-    set currentTime(x)
-    {
-        if (this._currentTime === x)
-            return;
-
-        this._currentTime = x || 0;
-        this._revealCurrentTime = true;
-
-        this._needsLayout();
-    },
-
-    get secondsPerPixel()
-    {
-        return this._secondsPerPixel;
-    },
-
-    set secondsPerPixel(x)
-    {
-        x = Math.max(WebInspector.TimelineOverview.MinimumSecondsPerPixel, x);
-
-        if (this._secondsPerPixel === x)
-            return;
-
-        this._secondsPerPixel = x;
-        this._secondsPerPixelSetting.value = x;
-
-        this._needsLayout();
-    },
-
-    get endTime()
-    {
-        return this._endTime;
-    },
-
-    set endTime(x)
-    {
-        if (this._endTime === x)
-            return;
-
-        this._endTime = x || 0;
-
-        this._needsLayout();
-    },
-
-    get scrollStartTime()
-    {
-        return this._scrollStartTime;
-    },
-
-    set scrollStartTime(x)
-    {
-        if (this._scrollStartTime === x)
-            return;
-
-        this._scrollStartTime = x || 0;
-
-        this._needsLayout();
-    },
-
-    get visibleDuration()
-    {
-        return this._scrollContainer.offsetWidth * this._secondsPerPixel;
-    },
-
-    get selectionStartTime()
-    {
-        return this._timelineRuler.selectionStartTime;
-    },
-
-    set selectionStartTime(x)
-    {
-        x = x || 0;
-
-        var 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(WebInspector.TimelineRuler.MinimumSelectionTimeRange, x);
-        this._timelineRuler.selectionEndTime = this._timelineRuler.selectionStartTime + x;
-    },
-
-    addMarker: function(marker)
-    {
-        this._timelineRuler.addMarker(marker);
-    },
-
-    revealMarker: function(marker)
-    {
-        this.scrollStartTime = marker.time - (this.visibleDuration / 2);
-    },
-
-    updateLayout: function()
-    {
-        if (this._scheduledLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
-            delete this._scheduledLayoutUpdateIdentifier;
-        }
-
-        // Calculate the required width based on the duration and seconds per pixel.
-        var duration = this._endTime - this._startTime;
-        var newWidth = Math.ceil(duration / this._secondsPerPixel);
-
-        // Update all relevant elements to the new required width.
-        this._updateElementWidth(this._scrollWidthSizer, newWidth);
-
-        this._currentTimeMarker.time = this._currentTime;
-
-        if (this._revealCurrentTime) {
-            this.revealMarker(this._currentTimeMarker);
-            delete this._revealCurrentTime;
-        }
-
-        // Clamp the scroll start time to match what the scroll bar would allow.
-        var scrollStartTime = Math.min(this._scrollStartTime, this._endTime - this.visibleDuration);
-        scrollStartTime = Math.max(this._startTime, scrollStartTime);
-
-        this._timelineRuler.zeroTime = this._startTime;
-        this._timelineRuler.startTime = scrollStartTime;
-        this._timelineRuler.secondsPerPixel = this._secondsPerPixel;
-
-        if (!this._dontUpdateScrollLeft) {
-            this._ignoreNextScrollEvent = true;
-            this._scrollContainer.scrollLeft = Math.ceil((scrollStartTime - this._startTime) / this._secondsPerPixel);
-        }
-
-        this._timelineRuler.updateLayout();
-
-        for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values()) {
-            timelineOverviewGraph.zeroTime = this._startTime;
-            timelineOverviewGraph.startTime = scrollStartTime;
-            timelineOverviewGraph.currentTime = this._currentTime;
-            timelineOverviewGraph.endTime = scrollStartTime + this.visibleDuration;
-            timelineOverviewGraph.updateLayout();
-        }
-    },
-
-    updateLayoutIfNeeded: function()
-    {
-        if (this._scheduledLayoutUpdateIdentifier) {
-            this.updateLayout();
-            return;
-        }
-
-        this._timelineRuler.updateLayoutIfNeeded();
-
-        for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
-            timelineOverviewGraph.updateLayoutIfNeeded();
-    },
-
-    // Private
-
-    _updateElementWidth: function(element, newWidth)
-    {
-        var currentWidth = parseInt(element.style.width);
-        if (currentWidth !== newWidth)
-            element.style.width = newWidth + "px";
-    },
-
-    _needsLayout: function()
-    {
-        if (this._scheduledLayoutUpdateIdentifier)
-            return;
-        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
-    },
-
-    _handleScrollEvent: function(event)
-    {
-        if (this._ignoreNextScrollEvent) {
-            delete this._ignoreNextScrollEvent;
-            return;
-        }
-
-        this._dontUpdateScrollLeft = true;
-
-        var scrollOffset = this._scrollContainer.scrollLeft;
-        this.scrollStartTime = this._startTime + (scrollOffset * this._secondsPerPixel);
-
-        // Force layout so we can update with the scroll position synchronously.
-        this.updateLayoutIfNeeded();
-
-        delete this._dontUpdateScrollLeft;
-    },
-
-    _handleWheelEvent: function(event)
-    {
-        // Ignore cloned events that come our way, we already handled the original.
-        if (event.__cloned)
-            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.
-            var newWheelEvent = new event.constructor(event.type, event);
-            newWheelEvent.__cloned = true;
-
-            this._scrollContainer.dispatchEvent(newWheelEvent);
-            return;
-        }
-
-        // Remember the mouse position in time.
-        var mouseOffset = event.pageX - this._element.totalOffsetLeft;
-        var mousePositionTime = this._scrollStartTime + (mouseOffset * this._secondsPerPixel);
-        var deviceDirection = event.webkitDirectionInvertedFromDevice ? 1 : -1;
-
-        this.secondsPerPixel += event.deltaY * (this._secondsPerPixel / WebInspector.TimelineOverview.ScrollDeltaDenominator) * deviceDirection;
-
-        // Center the zoom around the mouse based on the remembered mouse position time.
-        this.scrollStartTime = mousePositionTime - (mouseOffset * this._secondsPerPixel);
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _timeRangeSelectionChanged: function(event)
-    {
-        this._selectionStartTimeSetting.value = this.selectionStartTime - this._startTime;
-        this._selectionDurationSetting.value = this.selectionDuration;
-
-        this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/TimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/TimelineOverviewGraph.js
deleted file mode 100644
index 232aa36ef..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineOverviewGraph.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/*
- * 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.TimelineOverviewGraph = function(recording)
-{
-    WebInspector.Object.call(this);
-
-    this.element = document.createElement("div");
-    this.element.classList.add(WebInspector.TimelineOverviewGraph.StyleClassName);
-
-    this._zeroTime = 0;
-    this._startTime = 0;
-    this._endTime = 5;
-    this._currentTime = 0;
-};
-
-WebInspector.TimelineOverviewGraph.StyleClassName = "timeline-overview-graph";
-
-WebInspector.TimelineOverviewGraph.prototype = {
-    constructor: WebInspector.TimelineOverviewGraph,
-    __proto__: WebInspector.Object.prototype,
-
-    // Public
-
-    get zeroTime()
-    {
-        return this._zeroTime;
-    },
-
-    set zeroTime(x)
-    {
-        if (this._zeroTime === x)
-            return;
-
-        this._zeroTime = x || 0;
-
-        this.needsLayout();
-    },
-
-    get startTime()
-    {
-        return this._startTime;
-    },
-
-    set startTime(x)
-    {
-        if (this._startTime === x)
-            return;
-
-        this._startTime = x || 0;
-
-        this.needsLayout();
-    },
-
-    get endTime()
-    {
-        return this._endTime;
-    },
-
-    set endTime(x)
-    {
-        if (this._endTime === x)
-            return;
-
-        this._endTime = x || 0;
-
-        this.needsLayout();
-    },
-
-    get currentTime()
-    {
-        return this._currentTime;
-    },
-
-    set currentTime(x)
-    {
-        if (this._currentTime === x)
-            return;
-
-        var oldCurrentTime = this._currentTime;
-
-        this._currentTime = x || 0;
-
-        if ((this._startTime <= oldCurrentTime && oldCurrentTime <= this._endTime) || (this._startTime <= this._currentTime && this._currentTime <= this._endTime))
-            this.needsLayout();
-    },
-
-    reset: function()
-    {
-        // Implemented by sub-classes if needed.
-    },
-
-    updateLayout: function()
-    {
-        if (this._scheduledLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
-            delete this._scheduledLayoutUpdateIdentifier;
-        }
-
-        // Implemented by sub-classes if needed.
-    },
-
-    updateLayoutIfNeeded: function()
-    {
-        if (!this._scheduledLayoutUpdateIdentifier)
-            return;
-        this.updateLayout();
-    },
-
-    // Protected
-
-    needsLayout: function()
-    {
-        if (this._scheduledLayoutUpdateIdentifier)
-            return;
-
-        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/TimelineRecord.js b/Source/WebInspectorUI/UserInterface/TimelineRecord.js
deleted file mode 100644
index 66a176139..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineRecord.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.TimelineRecord = function(type, startTime, endTime, callFrames, sourceCodeLocation)
-{
-    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;
-    this._callFrames = callFrames || null;
-    this._sourceCodeLocation = sourceCodeLocation || 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"
-};
-
-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.SourceCodeURLCookieKey = "timeline-record-source-code-url";
-WebInspector.TimelineRecord.TypeCookieKey = "timeline-record-type";
-
-WebInspector.TimelineRecord.prototype = {
-    constructor: WebInspector.TimelineRecord,
-
-    // 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;
-    },
-
-    saveIdentityToCookie: function(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.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineRecordBar.css b/Source/WebInspectorUI/UserInterface/TimelineRecordBar.css
deleted file mode 100644
index 2acd591dc..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineRecordBar.css
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * 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;
-}
-
-.timeline-record-bar > .segment {
-    position: absolute;
-    height: 100%;
-    background-color: rgb(225, 225, 225);
-    border: 1px solid rgb(200, 200, 200);
-    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;
-}
-
-:focus .selected .timeline-record-bar > .segment {
-    background-color: white !important;
-    border: none !important;
-}
-
-:focus .selected .timeline-record-bar > .segment.inactive {
-    background-color: rgb(196, 215, 242) !important;
-}
-
-:focus .selected .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
-    border-left: 1px solid rgba(56, 121, 217, 0.7) !important;
-}
-
-.timeline-record-bar.timeline-record-type-network > .segment {
-    background-color: rgb(120, 176, 225);
-    border-color: rgb(61, 147, 200);
-}
-
-.timeline-record-bar.timeline-record-type-network > .segment.inactive {
-    background-color: rgb(167, 204, 237);
-    border-color: rgb(127, 185, 220);
-}
-
-.timeline-record-bar.timeline-record-type-layout > .segment {
-    background-color: rgb(234, 153, 153);
-    border-color: rgb(212, 108, 108);
-}
-
-.timeline-record-bar.timeline-record-type-script > .segment {
-    background-color: rgb(190, 148, 233);
-    border-color: rgb(153, 113, 185);
-}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineRecordBar.js b/Source/WebInspectorUI/UserInterface/TimelineRecordBar.js
deleted file mode 100644
index e04c1caa9..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineRecordBar.js
+++ /dev/null
@@ -1,346 +0,0 @@
-/*
- * 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.TimelineRecordBar = function(records, renderMode)
-{
-    WebInspector.Object.call(this);
-
-    this._element = document.createElement("div");
-    this._element.classList.add(WebInspector.TimelineRecordBar.StyleClassName);
-
-    this.renderMode = renderMode;
-    this.records = records;
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.TimelineRecordBar);
-
-WebInspector.TimelineRecordBar.StyleClassName = "timeline-record-bar";
-WebInspector.TimelineRecordBar.BarSegmentStyleClassName = "segment";
-WebInspector.TimelineRecordBar.InactiveStyleClassName = "inactive";
-WebInspector.TimelineRecordBar.UnfinishedStyleClassName = "unfinished";
-WebInspector.TimelineRecordBar.HasInactiveSegmentStyleClassName = "has-inactive-segment";
-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"
-};
-
-WebInspector.TimelineRecordBar.createCombinedBars = function(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);
-    }
-
-    lastRecordType = null;
-
-    var activeStartTime = NaN;
-    var activeEndTime = NaN;
-    var activeRecords = [];
-
-    var startTimeProperty = usesActiveStartTime ? "activeStartTime" : "startTime";
-
-    for (var record of visibleRecords) {
-        // 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 <= record[startTimeProperty]
-            || (isNaN(record[startTimeProperty]) && !isNaN(activeEndTime)))) {
-            createBarCallback(activeRecords, WebInspector.TimelineRecordBar.RenderMode.ActiveOnly);
-            activeRecords = [];
-            activeStartTime = NaN;
-            activeEndTime = NaN;
-        }
-
-        if (isNaN(record[startTimeProperty]))
-            continue;
-
-        // If this is a new bar, peg the start time.
-        if (isNaN(activeStartTime))
-            activeStartTime = record[startTimeProperty];
-
-        // 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);
-};
-
-WebInspector.TimelineRecordBar.prototype = {
-    constructor: WebInspector.TimelineRecordBar,
-    __proto__: WebInspector.Object.prototype,
-
-    // 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);
-
-        records = records || [];
-
-        if (!(records instanceof Array))
-            records = [records];
-
-        this._records = records;
-
-        // Assume all records are the same type.
-        if (this._records.length)
-            this._element.classList.add(this._records[0].type);
-    },
-
-    refresh: function(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(WebInspector.TimelineRecordBar.UnfinishedStyleClassName, 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(WebInspector.TimelineRecordBar.BarSegmentStyleClassName);
-        }
-
-        if (!firstRecord.usesActiveStartTime) {
-            this._element.classList.remove(WebInspector.TimelineRecordBar.HasInactiveSegmentStyleClassName);
-
-            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(WebInspector.TimelineRecordBar.HasInactiveSegmentStyleClassName);
-
-        // 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(WebInspector.TimelineRecordBar.UnfinishedStyleClassName, 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(WebInspector.TimelineRecordBar.BarSegmentStyleClassName);
-                this._inactiveBarElement.classList.add(WebInspector.TimelineRecordBar.InactiveStyleClassName);
-            }
-
-            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: function(element, newPosition, property)
-    {
-        newPosition *= 100;
-        newPosition = newPosition.toFixed(2);
-
-        var currentPosition = parseFloat(element.style[property]).toFixed(2);
-        if (currentPosition !== newPosition)
-            element.style[property] = newPosition + "%";
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/TimelineRecordTreeElement.js b/Source/WebInspectorUI/UserInterface/TimelineRecordTreeElement.js
deleted file mode 100644
index 2d5c2aca5..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineRecordTreeElement.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
- * 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.TimelineRecordTreeElement = function(timelineRecord, subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeLocation, representedObject)
-{
-    console.assert(timelineRecord);
-
-    this._record = timelineRecord;
-    this._sourceCodeLocation = sourceCodeLocation || timelineRecord.sourceCodeLocation || null;
-
-    var title = "";
-    var subtitle = "";
-
-    if (this._sourceCodeLocation) {
-        subtitle = document.createElement("span");
-
-        if (subtitleNameStyle !== WebInspector.SourceCodeLocation.NameStyle.None)
-            this._sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent", null, subtitleNameStyle);
-        else
-            this._sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent", null, WebInspector.SourceCodeLocation.NameStyle.None, WebInspector.UIString("line "));
-    }
-
-    var iconStyleClass = null;
-
-    switch (timelineRecord.type) {
-    case WebInspector.TimelineRecord.Type.Layout:
-        title = WebInspector.LayoutTimelineRecord.EventType.displayName(timelineRecord.eventType);
-
-        switch (timelineRecord.eventType) {
-        case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
-        case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass;
-            break;
-        case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
-        case WebInspector.LayoutTimelineRecord.EventType.Layout:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass;
-            break;
-        case WebInspector.LayoutTimelineRecord.EventType.Paint:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass;
-            break;
-        default:
-            console.error("Unknown LayoutTimelineRecord eventType: " + timelineRecord.eventType, timelineRecord);
-        }
-
-        break;
-
-    case WebInspector.TimelineRecord.Type.Script:
-        title = WebInspector.ScriptTimelineRecord.EventType.displayName(timelineRecord.eventType, timelineRecord.details, includeTimerIdentifierInMainTitle);
-
-        switch (timelineRecord.eventType) {
-        case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
-        case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
-        case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass;
-            break;
-        case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
-        case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameRequested:
-        case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameCanceled:
-            iconStyleClass = WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass;
-            break;
-        default:
-            console.error("Unknown ScriptTimelineRecord eventType: " + timelineRecord.eventType, timelineRecord);
-        }
-
-        break;
-
-    default:
-        console.error("Unknown TimelineRecord type: " + timelineRecord.type, timelineRecord);
-    }
-
-    WebInspector.GeneralTreeElement.call(this, [iconStyleClass], title, subtitle, representedObject || timelineRecord, false);
-
-    this.small = true;
-
-    if (this._sourceCodeLocation)
-        this.tooltipHandledSeparately = true;
-};
-
-WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass = "style-record";
-WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass = "layout-record";
-WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass = "paint-record";
-WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass = "evaluated-record";
-WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass = "event-record";
-WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass = "timer-record";
-WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass = "animation-record";
-
-WebInspector.TimelineRecordTreeElement.prototype = {
-    constructor: WebInspector.TimelineRecordTreeElement,
-    __proto__: WebInspector.GeneralTreeElement.prototype,
-
-    // Public
-
-    get record()
-    {
-        return this._record;
-    },
-
-    get filterableData()
-    {
-        var url = this._sourceCodeLocation ? this._sourceCodeLocation.sourceCode.url : "";
-        return {text: [this.mainTitle, url || "", this._record.details || ""]};
-    },
-
-    // Protected
-
-    onattach: function()
-    {
-        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
-
-        console.assert(this.element);
-
-        if (!this.tooltipHandledSeparately)
-            return;
-
-        var tooltipPrefix = this.mainTitle + "\n";
-        this._sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/TimelineRecording.js b/Source/WebInspectorUI/UserInterface/TimelineRecording.js
deleted file mode 100644
index a4ea6145d..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineRecording.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.TimelineRecording = function()
-{
-    WebInspector.Object.call(this);
-
-    this._timelines = new Map;
-    this._timelines.set(WebInspector.TimelineRecord.Type.Network, new WebInspector.NetworkTimeline);
-    this._timelines.set(WebInspector.TimelineRecord.Type.Script, new WebInspector.Timeline);
-    this._timelines.set(WebInspector.TimelineRecord.Type.Layout, new WebInspector.Timeline);
-
-    for (var timeline of this._timelines.values())
-        timeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this._timelineTimesUpdated, this);
-
-    this.reset(true);
-};
-
-WebInspector.TimelineRecording.Event = {
-    Reset: "timeline-recording-reset",
-    SourceCodeTimelineAdded: "timeline-recording-source-code-timeline-added",
-    TimesUpdated: "timeline-recording-times-updated"
-};
-
-WebInspector.TimelineRecording.prototype = {
-    constructor: WebInspector.TimelineRecording,
-    __proto__: WebInspector.Object.prototype,
-
-    // Public
-
-    get timelines()
-    {
-        return this._timelines;
-    },
-
-    get startTime()
-    {
-        return this._startTime;
-    },
-
-    get endTime()
-    {
-        return this._endTime;
-    },
-
-    reset: function(suppressEvents)
-    {
-        this._sourceCodeTimelinesMap = new Map;
-        this._eventMarkers = [];
-        this._startTime = NaN;
-        this._endTime = NaN;
-
-        for (var timeline of this._timelines.values())
-            timeline.reset(suppressEvents);
-
-        if (!suppressEvents) {
-            this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.Reset);
-            this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.TimesUpdated);
-        }
-    },
-
-    sourceCodeTimelinesForSourceCode: function(sourceCode)
-    {
-        var timelines = this._sourceCodeTimelinesMap.get(sourceCode);
-        if (!timelines)
-            return [];
-        return timelines.values();
-    },
-
-    addEventMarker: function(eventMarker)
-    {
-        this._eventMarkers.push(eventMarker);
-    },
-
-    addRecord: function(record)
-    {
-        // Add the record to the global timeline by type.
-        this._timelines.get(record.type).addRecord(record);
-
-        // Netowrk records don't have source code timelines.
-        if (record.type === WebInspector.TimelineRecord.Type.Network)
-            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: sourceCodeTimeline});
-    },
-
-    // Private
-
-    _keyForRecord: function(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: function(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);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/TimelineRuler.css b/Source/WebInspectorUI/UserInterface/TimelineRuler.css
deleted file mode 100644
index a49d88ee2..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineRuler.css
+++ /dev/null
@@ -1,176 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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;
-}
-
-.timeline-ruler.allows-time-range-selection {
-    pointer-events: all;
-}
-
-.timeline-ruler > * {
-    pointer-events: none;
-}
-
-.timeline-ruler > .header {
-    border-bottom: 1px solid rgb(200, 200, 200);
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 22px;
-}
-
-.timeline-ruler > .header > .divider {
-    position: absolute;
-    width: 1px;
-    top: 0;
-    bottom: 0;
-    -webkit-transform: translateX(-1px);
-    background-image: -webkit-linear-gradient(bottom, rgba(200, 200, 200, 1), rgba(200, 200, 200, 0) 85%);
-}
-
-.timeline-ruler > .header > .divider > .label {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    font-size: 9px;
-    font-family: "Lucida Grande", sans-serif;
-    color: rgb(128, 128, 128);
-    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;
-    -webkit-transform: translateX(-1px);
-    background-color: rgba(0, 0, 0, 0.05);
-}
-
-.timeline-ruler > .markers > .marker {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-
-    -webkit-transform: translateX(-1px);
-
-    border-left-width: 1px;
-    border-left-style: dashed;
-    border-left-color: rgba(128, 128, 128, 0.5);
-}
-
-.timeline-ruler > .markers > .marker.current-time {
-    border-left-color: red;
-    border-left-style: solid;
-}
-
-.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: rgba(255, 0, 0, 0.5);
-}
-
-.timeline-ruler > .markers > .marker.dom-content-event {
-    border-left-color: rgba(0, 0, 255, 0.5);
-}
-
-.timeline-ruler > .markers > .marker.timestamp {
-    border-left-color: rgba(0, 110, 0, 0.5);
-}
-
-.timeline-ruler > .selection-drag {
-    position: absolute;
-    top: 0;
-    height: 22px;
-    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: 21px;
-    border-radius: 5px;
-    background-color: rgb(164, 164, 164);
-    border: 1px solid white;
-    cursor: col-resize;
-    pointer-events: all;
-    z-index: 15;
-}
-
-.timeline-ruler > .selection-handle.left {
-    -webkit-transform: translateX(-4px);
-}
-
-.timeline-ruler > .selection-handle.right {
-    -webkit-transform: translateX(4px);
-}
-
-.timeline-ruler > .shaded-area {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    background-color: rgba(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/TimelineRuler.js b/Source/WebInspectorUI/UserInterface/TimelineRuler.js
deleted file mode 100644
index 2fa6d85c1..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineRuler.js
+++ /dev/null
@@ -1,753 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = function()
-{
-    WebInspector.Object.call(this);
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.TimelineRuler.StyleClassName;
-
-    this._headerElement = document.createElement("div");
-    this._headerElement.className = WebInspector.TimelineRuler.HeaderElementStyleClassName;
-    this._element.appendChild(this._headerElement);
-
-    this._markersElement = document.createElement("div");
-    this._markersElement.className = WebInspector.TimelineRuler.MarkersElementStyleClassName;
-    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._allowsClippedLabels = false;
-    this._allowsTimeRangeSelection = false;
-
-    this._markerElementMap = new Map;
-}
-
-WebInspector.TimelineRuler.MinimumLeftDividerSpacing = 48;
-WebInspector.TimelineRuler.MinimumDividerSpacing = 64;
-
-WebInspector.TimelineRuler.StyleClassName = "timeline-ruler";
-WebInspector.TimelineRuler.AllowsTimeRangeSelectionStyleClassName = "allows-time-range-selection";
-WebInspector.TimelineRuler.HeaderElementStyleClassName = "header";
-WebInspector.TimelineRuler.DividerElementStyleClassName = "divider";
-WebInspector.TimelineRuler.DividerLabelElementStyleClassName = "label";
-
-WebInspector.TimelineRuler.MarkersElementStyleClassName = "markers";
-WebInspector.TimelineRuler.BaseMarkerElementStyleClassName = "marker";
-WebInspector.TimelineRuler.ShadedAreaElementStyleClassName = "shaded-area";
-WebInspector.TimelineRuler.SelectionDragElementStyleClassName = "selection-drag";
-WebInspector.TimelineRuler.SelectionHandleElementStyleClassName = "selection-handle";
-WebInspector.TimelineRuler.LeftSelectionElementStyleClassName = "left";
-WebInspector.TimelineRuler.RightSelectionElementStyleClassName = "right";
-WebInspector.TimelineRuler.MinimumSelectionTimeRange = 0.01;
-
-WebInspector.TimelineRuler.Event = {
-    TimeRangeSelectionChanged: "time-ruler-time-range-selection-changed"
-};
-
-WebInspector.TimelineRuler.prototype = {
-    constructor: WebInspector.TimelineRuler,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get allowsClippedLabels()
-    {
-        return this._allowsClippedLabels
-    },
-
-    set allowsClippedLabels(x)
-    {
-        if (this._allowsClippedLabels === x)
-            return;
-
-        this._allowsClippedLabels = x || false;
-
-        this._needsLayout();
-    },
-
-    get allowsTimeRangeSelection()
-    {
-        return this._allowsTimeRangeSelection;
-    },
-
-    set allowsTimeRangeSelection(x)
-    {
-        if (this._allowsTimeRangeSelection === x)
-            return;
-
-        this._allowsTimeRangeSelection = x || false;
-
-        if (x) {
-            this._mouseDownEventListener = this._handleMouseDown.bind(this);
-            this._element.addEventListener("mousedown", this._mouseDownEventListener);
-
-            this._leftShadedAreaElement = document.createElement("div");
-            this._leftShadedAreaElement.classList.add(WebInspector.TimelineRuler.ShadedAreaElementStyleClassName);
-            this._leftShadedAreaElement.classList.add(WebInspector.TimelineRuler.LeftSelectionElementStyleClassName);
-
-            this._rightShadedAreaElement = document.createElement("div");
-            this._rightShadedAreaElement.classList.add(WebInspector.TimelineRuler.ShadedAreaElementStyleClassName);
-            this._rightShadedAreaElement.classList.add(WebInspector.TimelineRuler.RightSelectionElementStyleClassName);
-
-            this._leftSelectionHandleElement = document.createElement("div");
-            this._leftSelectionHandleElement.classList.add(WebInspector.TimelineRuler.SelectionHandleElementStyleClassName);
-            this._leftSelectionHandleElement.classList.add(WebInspector.TimelineRuler.LeftSelectionElementStyleClassName);
-            this._leftSelectionHandleElement.addEventListener("mousedown", this._handleSelectionHandleMouseDown.bind(this));
-
-            this._rightSelectionHandleElement = document.createElement("div");
-            this._rightSelectionHandleElement.classList.add(WebInspector.TimelineRuler.SelectionHandleElementStyleClassName);
-            this._rightSelectionHandleElement.classList.add(WebInspector.TimelineRuler.RightSelectionElementStyleClassName);
-            this._rightSelectionHandleElement.addEventListener("mousedown", this._handleSelectionHandleMouseDown.bind(this));
-
-            this._selectionDragElement = document.createElement("div");
-            this._selectionDragElement.classList.add(WebInspector.TimelineRuler.SelectionDragElementStyleClassName);
-
-            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 zeroTime()
-    {
-        return this._zeroTime;
-    },
-
-    set zeroTime(x)
-    {
-        if (this._zeroTime === x)
-            return;
-
-        this._zeroTime = x || 0;
-
-        this._needsLayout();
-    },
-
-    get startTime()
-    {
-        return this._startTime;
-    },
-
-    set startTime(x)
-    {
-        if (this._startTime === x)
-            return;
-
-        this._startTime = x || 0;
-
-        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;
-    },
-
-    set duration(x)
-    {
-        if (this._duration === x)
-            return;
-
-        this._duration = x || NaN;
-
-        if (!isNaN(this._duration)) {
-            this._endTime = this._startTime + this._duration;
-            this._endTimePinned = true;
-        } else
-            this._endTimePinned = false;
-
-        this._needsLayout();
-    },
-
-    get endTime()
-    {
-        if (!this._endTimePinned && this._scheduledLayoutUpdateIdentifier)
-            this._recalculate();
-        return this._endTime;
-    },
-
-    set endTime(x)
-    {
-        if (this._endTime === x)
-            return;
-
-        this._endTime = x || 0;
-        this._endTimePinned = true;
-
-        this._needsLayout();
-    },
-
-    get secondsPerPixel()
-    {
-        if (this._scheduledLayoutUpdateIdentifier)
-            this._recalculate();
-        return this._secondsPerPixel;
-    },
-
-    set secondsPerPixel(x)
-    {
-        if (this._secondsPerPixel === x)
-            return;
-
-        this._secondsPerPixel = x || 0;
-        this._endTimePinned = false;
-        this._currentSliceTime = 0;
-
-        this._needsLayout();
-    },
-
-    get selectionStartTime()
-    {
-        return this._selectionStartTime;
-    },
-
-    set selectionStartTime(x)
-    {
-        if (this._selectionStartTime === x)
-            return;
-
-        this._selectionStartTime = x || 0;
-        this._timeRangeSelectionChanged = true;
-
-        this._needsSelectionLayout();
-    },
-
-    get selectionEndTime()
-    {
-        return this._selectionEndTime;
-    },
-
-    set selectionEndTime(x)
-    {
-        if (this._selectionEndTime === x)
-            return;
-
-        this._selectionEndTime = x || 0;
-        this._timeRangeSelectionChanged = true;
-
-        this._needsSelectionLayout();
-    },
-
-    addMarker: function(marker)
-    {
-        console.assert(marker instanceof WebInspector.TimelineMarker);
-
-        if (this._markerElementMap.has(marker))
-            return;
-
-        marker.addEventListener(WebInspector.TimelineMarker.Event.TimeChanged, this._timelineMarkerTimeChanged, this);
-
-        var markerElement = document.createElement("div");
-        markerElement.classList.add(WebInspector.TimelineRuler.BaseMarkerElementStyleClassName);
-        markerElement.classList.add(marker.type);
-
-        this._markerElementMap.set(marker, markerElement);
-
-        this._needsMarkerLayout();
-    },
-
-    elementForMarker: function(marker)
-    {
-        return this._markerElementMap.get(marker) || null;
-    },
-
-    updateLayout: function()
-    {
-        if (this._scheduledLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
-            delete this._scheduledLayoutUpdateIdentifier;
-        }
-
-        var visibleWidth = this._recalculate();
-        if (visibleWidth <= 0)
-            return;
-
-        var duration = this.duration;
-
-        var pixelsPerSecond = visibleWidth / duration;
-
-        // Calculate a divider count based on the maximum allowed divider density.
-        var dividerCount = Math.round(visibleWidth / WebInspector.TimelineRuler.MinimumDividerSpacing);
-
-        if (this._endTimePinned || !this._currentSliceTime) {
-            // Calculate the slice time based on the rough divider count and the time span.
-            var 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.
-            var sliceTime = this._currentSliceTime;
-        }
-
-        var firstDividerTime = (Math.ceil((this._startTime - this._zeroTime) / sliceTime) * sliceTime) + this._zeroTime;
-        var 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;
-
-        var markerDividers = this._markersElement.querySelectorAll("." + WebInspector.TimelineRuler.DividerElementStyleClassName);
-
-        var 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);
-
-                var labelElement = document.createElement("div");
-                labelElement.className = WebInspector.TimelineRuler.DividerLabelElementStyleClassName;
-                dividerElement._labelElement = labelElement;
-                dividerElement.appendChild(labelElement);
-            }
-
-            var markerDividerElement = markerDividers[i];
-            if (!markerDividerElement) {
-                markerDividerElement = document.createElement("div");
-                markerDividerElement.className = WebInspector.TimelineRuler.DividerElementStyleClassName;
-                this._markersElement.appendChild(markerDividerElement);
-            }
-
-            var dividerTime = firstDividerTime + (sliceTime * i);
-
-            var 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);
-
-            dividerElement._labelElement.textContent = isNaN(dividerTime) ? "" : Number.secondsToString(dividerTime - this._zeroTime, true);
-            dividerElement = dividerElement.nextSibling;
-        }
-
-        // Remove extra dividers.
-        while (dividerElement) {
-            var nextDividerElement = dividerElement.nextSibling;
-            dividerElement.remove();
-            dividerElement = nextDividerElement;
-        }
-
-        for (; i < markerDividers.length; ++i)
-            markerDividers[i].remove();
-
-        this._updateMarkers(visibleWidth, duration);
-        this._updateSelection(visibleWidth, duration);
-    },
-
-    updateLayoutIfNeeded: function()
-    {
-        // If there is a main layout scheduled we can just update layout and return, since that
-        // will update markers and the selection at the same time.
-        if (this._scheduledLayoutUpdateIdentifier) {
-            this.updateLayout();
-            return;
-        }
-
-        var visibleWidth = this._element.clientWidth;
-        if (visibleWidth <= 0)
-            return;
-
-        if (this._scheduledMarkerLayoutUpdateIdentifier)
-            this._updateMarkers(visibleWidth, this.duration);
-
-        if (this._scheduledSelectionLayoutUpdateIdentifier)
-            this._updateSelection(visibleWidth, this.duration);
-    },
-
-    // Private
-
-    _needsLayout: function()
-    {
-        if (this._scheduledLayoutUpdateIdentifier)
-            return;
-
-        if (this._scheduledMarkerLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledMarkerLayoutUpdateIdentifier);
-            delete this._scheduledMarkerLayoutUpdateIdentifier;
-        }
-
-        if (this._scheduledSelectionLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledSelectionLayoutUpdateIdentifier);
-            delete this._scheduledSelectionLayoutUpdateIdentifier;
-        }
-
-        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
-    },
-
-    _needsMarkerLayout: function()
-    {
-        // If layout is scheduled, abort since markers will be updated when layout happens.
-        if (this._scheduledLayoutUpdateIdentifier)
-            return;
-
-        if (this._scheduledMarkerLayoutUpdateIdentifier)
-            return;
-
-        function update()
-        {
-            delete this._scheduledMarkerLayoutUpdateIdentifier;
-
-            var visibleWidth = this._element.clientWidth;
-            if (visibleWidth <= 0)
-                return;
-
-            this._updateMarkers(visibleWidth, this.duration);
-        }
-
-        this._scheduledMarkerLayoutUpdateIdentifier = requestAnimationFrame(update.bind(this));
-    },
-
-    _needsSelectionLayout: function()
-    {
-        if (!this._allowsTimeRangeSelection)
-            return;
-
-        // If layout is scheduled, abort since the selection will be updated when layout happens.
-        if (this._scheduledLayoutUpdateIdentifier)
-            return;
-
-        if (this._scheduledSelectionLayoutUpdateIdentifier)
-            return;
-
-        function update()
-        {
-            delete this._scheduledSelectionLayoutUpdateIdentifier;
-
-            var visibleWidth = this._element.clientWidth;
-            if (visibleWidth <= 0)
-                return;
-
-            this._updateSelection(visibleWidth, this.duration);
-        }
-
-        this._scheduledSelectionLayoutUpdateIdentifier = requestAnimationFrame(update.bind(this));
-    },
-
-    _recalculate: function()
-    {
-        var visibleWidth = this._element.clientWidth;
-        if (visibleWidth <= 0)
-            return 0;
-
-        if (this._endTimePinned)
-            var duration = this._endTime - this._startTime;
-        else
-            var duration = visibleWidth * this._secondsPerPixel;
-
-        this._secondsPerPixel = duration / visibleWidth;
-
-        if (!this._endTimePinned)
-            this._endTime = this._startTime + (visibleWidth * this._secondsPerPixel);
-
-        return visibleWidth;
-    },
-
-    _updatePositionOfElement: function(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: function(visibleWidth, duration)
-    {
-        if (this._scheduledMarkerLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledMarkerLayoutUpdateIdentifier);
-            delete this._scheduledMarkerLayoutUpdateIdentifier;
-        }
-
-        this._markerElementMap.forEach(function(markerElement, marker) {
-            var newLeftPosition = (marker.time - this._startTime) / duration;
-
-            this._updatePositionOfElement(markerElement, newLeftPosition, visibleWidth);
-
-            if (!markerElement.parentNode)
-                this._markersElement.appendChild(markerElement);
-        }, this);
-    },
-
-    _updateSelection: function(visibleWidth, duration)
-    {
-        if (this._scheduledSelectionLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledSelectionLayoutUpdateIdentifier);
-            delete this._scheduledSelectionLayoutUpdateIdentifier;
-        }
-
-        this._element.classList.toggle(WebInspector.TimelineRuler.AllowsTimeRangeSelectionStyleClassName, this._allowsTimeRangeSelection);
-
-        if (!this._allowsTimeRangeSelection)
-            return;
-
-        var newLeftPosition = Math.max(0, (this._selectionStartTime - this._startTime) / duration);
-        this._updatePositionOfElement(this._leftShadedAreaElement, newLeftPosition, visibleWidth, "width");
-        this._updatePositionOfElement(this._leftSelectionHandleElement, newLeftPosition, visibleWidth, "left");
-        this._updatePositionOfElement(this._selectionDragElement, newLeftPosition, visibleWidth, "left");
-
-        var newRightPosition = 1 - Math.min((this._selectionEndTime - this._startTime) / duration, 1);
-        this._updatePositionOfElement(this._rightShadedAreaElement, newRightPosition, visibleWidth, "width");
-        this._updatePositionOfElement(this._rightSelectionHandleElement, newRightPosition, visibleWidth, "right");
-        this._updatePositionOfElement(this._selectionDragElement, newRightPosition, visibleWidth, "right");
-
-        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);
-        }
-
-        if (this._timeRangeSelectionChanged)
-            this._dispatchTimeRangeSelectionChangedEvent();
-    },
-
-    _dispatchTimeRangeSelectionChangedEvent: function()
-    {
-        delete this._timeRangeSelectionChanged;
-
-        if (this._suppressTimeRangeSelectionChangedEvent)
-            return;
-
-        this.dispatchEventToListeners(WebInspector.TimelineRuler.Event.TimeRangeSelectionChanged);
-    },
-
-    _timelineMarkerTimeChanged: function()
-    {
-        this._needsMarkerLayout();
-    },
-
-    _handleMouseDown: function(event)
-    {
-        // Only handle left mouse clicks.
-        if (event.button !== 0 || event.ctrlKey)
-            return;
-
-        this._selectionIsMove = event.target === this._selectionDragElement;
-        this._suppressTimeRangeSelectionChangedEvent = !this._selectionIsMove;
-
-        if (this._selectionIsMove)
-            this._lastMousePosition = event.pageX;
-        else
-            this._mouseDownPosition = event.pageX - this._element.totalOffsetLeft;
-
-        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: function(event)
-    {
-        console.assert(event.button === 0);
-
-        if (this._selectionIsMove) {
-            var currentMousePosition = event.pageX;
-
-            var offsetTime = (currentMousePosition - this._lastMousePosition) * this.secondsPerPixel;
-            var selectionDuration = this.selectionEndTime - this.selectionStartTime;
-
-            this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime + offsetTime, this.endTime - selectionDuration));
-            this.selectionEndTime = this.selectionStartTime + selectionDuration;
-
-            this._lastMousePosition = currentMousePosition;
-        } else {
-            var currentMousePosition = event.pageX - this._element.totalOffsetLeft;
-
-            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);
-        }
-
-        this._updateSelection(this._element.clientWidth, this.duration);
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _handleMouseUp: function(event)
-    {
-        console.assert(event.button === 0);
-
-        if (!this._selectionIsMove && this.selectionEndTime - this.selectionStartTime < WebInspector.TimelineRuler.MinimumSelectionTimeRange) {
-            // The section is smaller than allowed, grow in the direction of the drag to meet the minumum.
-            var currentMousePosition = event.pageX - this._element.totalOffsetLeft;
-            if (currentMousePosition > this._mouseDownPosition) {
-                this.selectionEndTime = Math.min(this.selectionStartTime + WebInspector.TimelineRuler.MinimumSelectionTimeRange, this.endTime);
-                this.selectionStartTime = this.selectionEndTime - WebInspector.TimelineRuler.MinimumSelectionTimeRange;
-            } else {
-                this.selectionStartTime = Math.max(this.startTime, this.selectionEndTime - WebInspector.TimelineRuler.MinimumSelectionTimeRange);
-                this.selectionEndTime = this.selectionStartTime + WebInspector.TimelineRuler.MinimumSelectionTimeRange
-            }
-        }
-
-        delete this._suppressTimeRangeSelectionChangedEvent;
-
-        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;
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _handleSelectionHandleMouseDown: function(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);
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _handleSelectionHandleMouseMove: function(event)
-    {
-        console.assert(event.button === 0);
-
-        var currentMousePosition = event.pageX - this._element.totalOffsetLeft;
-        var currentTime = this.startTime + (currentMousePosition * this.secondsPerPixel);
-
-        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) {
-                var timeDifference = currentTime - this.selectionStartTime;
-                this.selectionStartTime = Math.max(this.startTime, Math.min(currentTime, this.selectionEndTime - WebInspector.TimelineRuler.MinimumSelectionTimeRange));
-                this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + WebInspector.TimelineRuler.MinimumSelectionTimeRange, this.selectionEndTime - timeDifference), this.endTime);
-            } else {
-                var timeDifference = currentTime - this.selectionEndTime;
-                this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + WebInspector.TimelineRuler.MinimumSelectionTimeRange, currentTime), this.endTime);
-                this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime - timeDifference, this.selectionEndTime - WebInspector.TimelineRuler.MinimumSelectionTimeRange));
-            }
-        } else {
-            // Resize the selection on side being dragged.
-            if (this._dragHandleIsStartTime)
-                this.selectionStartTime = Math.max(this.startTime, Math.min(currentTime, this.selectionEndTime - WebInspector.TimelineRuler.MinimumSelectionTimeRange));
-            else
-                this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + WebInspector.TimelineRuler.MinimumSelectionTimeRange, currentTime), this.endTime);
-        }
-
-        this._updateSelection(this._element.clientWidth, this.duration);
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _handleSelectionHandleMouseUp: function(event)
-    {
-        console.assert(event.button === 0);
-
-        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.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css b/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css
deleted file mode 100644
index e662ea256..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css
+++ /dev/null
@@ -1,207 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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.timeline > .status-bar {
-    position: absolute;
-    top: 0;
-    left: 5px;
-    right: 0;
-    height: 22px;
-    border-bottom: 1px solid rgb(179, 179, 179);
-}
-
-.sidebar > .panel.timeline > .status-bar > .record-glyph {
-    position: absolute;
-    top: 0;
-    left: 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.timeline > .status-bar > .record-glyph.recording {
-    background-image: -webkit-image-set(url(Images/Recording.png) 1x, url(Images/Recording@2x.png) 2x);
-}
-
-.sidebar > .panel.timeline > .status-bar > .record-glyph:hover {
-    background-image: -webkit-image-set(url(Images/RecordingHovered.png) 1x, url(Images/RecordingHovered@2x.png) 2x);
-}
-
-.sidebar > .panel.timeline > .status-bar > .record-glyph.recording:hover {
-    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x);
-}
-
-.sidebar > .panel.timeline > .status-bar > .record-glyph.forced {
-    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x) !important;
-}
-
-.sidebar > .panel.timeline > .status-bar > .record-glyph.recording.forced {
-    background-image: -webkit-image-set(url(Images/Recording.png) 1x, url(Images/Recording@2x.png) 2x) !important;
-}
-
-.sidebar > .panel.timeline > .status-bar > .record-status {
-    position: absolute;
-    top: 0;
-    right: 21px;
-    left: 21px;
-
-    text-align: center;
-
-    line-height: 20px;
-    font-size: 11px;
-    font-family: "Lucida Grande", sans-serif;
-    font-weight: bold;
-
-    color: rgb(76, 76, 76);
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-}
-
-.sidebar > .panel.timeline > .title-bar {
-    position: absolute;
-    left: 0;
-    right: 0;
-
-    height: 22px;
-
-    border-bottom: 1px solid rgb(179, 179, 179);
-    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-size: 11px;
-    font-family: "Lucida Grande", sans-serif;
-    font-weight: bold;
-
-    padding: 4px 9px;
-
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.sidebar > .panel.timeline > .title-bar.timelines {
-    top: 22px;
-}
-
-.sidebar > .panel.timeline > .title-bar.timeline-events {
-    height: 23px;
-    border-top: 1px solid rgb(179, 179, 179);
-    top: 152px;
-}
-
-.sidebar > .panel.timeline > .timelines-content {
-    position: absolute;
-    top: 44px;
-    height: 108px;
-    left: 0;
-    right: 0;
-
-    overflow: hidden;
-}
-
-.sidebar > .panel.timeline > .timelines-content .close-button {
-    margin-top: 2px;
-    width: 12px;
-    height: 12px;
-
-    content: -webkit-image-set(url(Images/CloseTimeline.png) 1x, url(Images/CloseTimeline@2x.png) 2x);
-
-    visibility: hidden;
-}
-
-.sidebar > .panel.timeline > .timelines-content li.item .icon {
-    width: 24px;
-    height: 24px;
-    margin-top: 5px;
-}
-
-.sidebar > .panel.timeline > .timelines-content li.item.selected .close-button {
-    visibility: visible;
-}
-
-.sidebar > .panel.timeline > .timelines-content li.item:not(.selected):nth-child(even) {
-    background-color: rgba(0, 0, 0, 0.03);
-    background-clip: padding-box;
-}
-
-.sidebar > .panel.timeline > .timelines-content li.item:not(.selected):not(:first-child) {
-    border-top: 1px solid rgba(0, 0, 0, 0.09);
-}
-
-.sidebar > .panel.timeline > .timelines-content li.item.selected + li.item {
-    border-top-color: rgb(120, 139, 168);
-}
-
-.sidebar > .panel.timeline > .timelines-content :focus li.item.selected + li.item {
-    border-top-color: rgb(107, 130, 164);
-}
-
-.sidebar > .panel.timeline > .timelines-content .close-button:active {
-    opacity: 0.8;
-}
-
-.sidebar > .panel.timeline > .content,
-.sidebar > .panel.timeline > .empty-content-placeholder {
-    top: 175px;
-}
-
-.sidebar > .panel.timeline.timeline-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.timeline > .content > .stripe-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    min-height: 100%;
-
-    background-image: -webkit-linear-gradient(top, transparent, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03));
-    background-size: 100% 40px;
-
-    pointer-events: none;
-    display: none;
-}
-
-.sidebar > .panel.timeline.timeline-content-view-showing > .content > .stripe-background {
-    display: block;
-}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.js b/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.js
deleted file mode 100644
index 30c76d8ea..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.js
+++ /dev/null
@@ -1,354 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = function()
-{
-    WebInspector.NavigationSidebarPanel.call(this, "timeline", WebInspector.UIString("Timelines"), "Images/NavigationItemStopwatch.svg", "2");
-
-    this._timelineEventsTitleBarElement = document.createElement("div");
-    this._timelineEventsTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TitleBarStyleClass);
-    this._timelineEventsTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TimelineEventsTitleBarStyleClass);
-    this.element.insertBefore(this._timelineEventsTitleBarElement, this.element.firstChild);
-
-    this.contentTreeOutlineLabel = "";
-
-    this._timelinesContentContainer = document.createElement("div");
-    this._timelinesContentContainer.classList.add(WebInspector.TimelineSidebarPanel.TimelinesContentContainerStyleClass);
-    this.element.insertBefore(this._timelinesContentContainer, this.element.firstChild);
-
-    this._timelinesTreeOutline = this.createContentTreeOutline(true, true);
-    this._timelinesTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
-    this._timelinesTreeOutline.onselect = this._timelinesTreeElementSelected.bind(this);
-    this._timelinesContentContainer.appendChild(this._timelinesTreeOutline.element);
-
-    var timelinesTitleBarElement = document.createElement("div");
-    timelinesTitleBarElement.textContent = WebInspector.UIString("Timelines");
-    timelinesTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TitleBarStyleClass);
-    timelinesTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass);
-    this.element.insertBefore(timelinesTitleBarElement, this.element.firstChild);
-
-    var statusBarElement = document.createElement("div");
-    statusBarElement.classList.add(WebInspector.TimelineSidebarPanel.StatusBarStyleClass);
-    this.element.insertBefore(statusBarElement, this.element.firstChild);
-
-    this._recordGlyphElement = document.createElement("div");
-    this._recordGlyphElement.className = WebInspector.TimelineSidebarPanel.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));
-    statusBarElement.appendChild(this._recordGlyphElement);
-
-    this._recordStatusElement = document.createElement("div");
-    this._recordStatusElement.className = WebInspector.TimelineSidebarPanel.RecordStatusStyleClass;
-    statusBarElement.appendChild(this._recordStatusElement);
-
-    function createTimelineTreeElement(label, iconClass, identifier)
-    {
-        var treeElement = new WebInspector.GeneralTreeElement([iconClass, WebInspector.TimelineSidebarPanel.LargeIconStyleClass], label, null, identifier);
-        var closeButton = document.createElement("img");
-        closeButton.classList.add(WebInspector.TimelineSidebarPanel.CloseButtonStyleClass);
-        closeButton.addEventListener("click", this.showTimelineOverview.bind(this));
-        treeElement.status = closeButton;
-        return treeElement;
-    }
-
-    this._timelineTreeElementMap = new Map;
-    this._timelineTreeElementMap.set(WebInspector.TimelineRecord.Type.Network, createTimelineTreeElement.call(this, WebInspector.UIString("Network Requests"), WebInspector.TimelineSidebarPanel.NetworkIconStyleClass, WebInspector.TimelineRecord.Type.Network));
-    this._timelineTreeElementMap.set(WebInspector.TimelineRecord.Type.Layout, createTimelineTreeElement.call(this, WebInspector.UIString("Layout & Rendering"), WebInspector.TimelineSidebarPanel.ColorsIconStyleClass, WebInspector.TimelineRecord.Type.Layout));
-    this._timelineTreeElementMap.set(WebInspector.TimelineRecord.Type.Script, createTimelineTreeElement.call(this, WebInspector.UIString("JavaScript & Events"), WebInspector.TimelineSidebarPanel.ScriptIconStyleClass, WebInspector.TimelineRecord.Type.Script));
-
-    for (var timelineTreeElement of this._timelineTreeElementMap.values())
-        this._timelinesTreeOutline.appendChild(timelineTreeElement);
-
-    this._timelineOverviewTreeElement = new WebInspector.GeneralTreeElement(WebInspector.TimelineSidebarPanel.StopwatchIconStyleClass, WebInspector.UIString("Timelines"), null, WebInspector.timelineManager.recording);
-    this._timelineOverviewTreeElement.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.showTimelineOverview, this);
-
-    this._stripeBackgroundElement = document.createElement("div");
-    this._stripeBackgroundElement.className = WebInspector.TimelineSidebarPanel.StripeBackgroundStyleClass;
-    this.contentElement.insertBefore(this._stripeBackgroundElement, this.contentElement.firstChild);
-
-    WebInspector.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
-    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStarted, this._recordingStarted, this);
-    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStopped, this._recordingStopped, this);
-
-    function delayedWork()
-    {
-        // Prime the creation of the singleton TimelineContentCiew since it needs to listen for events.
-        // It needs to be delayed since TimelineContentView depends on WebInspector.timelineSidebarPanel existing.
-        this._timelineContentView = WebInspector.contentBrowser.contentViewForRepresentedObject(WebInspector.timelineManager.recording);
-    }
-
-    setTimeout(delayedWork.bind(this), 0);
-};
-
-WebInspector.TimelineSidebarPanel.StatusBarStyleClass = "status-bar";
-WebInspector.TimelineSidebarPanel.RecordGlyphStyleClass = "record-glyph";
-WebInspector.TimelineSidebarPanel.RecordGlyphRecordingStyleClass = "recording";
-WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass = "forced";
-WebInspector.TimelineSidebarPanel.RecordStatusStyleClass = "record-status";
-WebInspector.TimelineSidebarPanel.TitleBarStyleClass = "title-bar";
-WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass = "timelines";
-WebInspector.TimelineSidebarPanel.TimelineEventsTitleBarStyleClass = "timeline-events";
-WebInspector.TimelineSidebarPanel.TimelinesContentContainerStyleClass = "timelines-content";
-WebInspector.TimelineSidebarPanel.StripeBackgroundStyleClass = "stripe-background";
-WebInspector.TimelineSidebarPanel.CloseButtonStyleClass = "close-button";
-WebInspector.TimelineSidebarPanel.LargeIconStyleClass = "large";
-WebInspector.TimelineSidebarPanel.StopwatchIconStyleClass = "stopwatch-icon";
-WebInspector.TimelineSidebarPanel.NetworkIconStyleClass = "network-icon";
-WebInspector.TimelineSidebarPanel.ColorsIconStyleClass = "colors-icon";
-WebInspector.TimelineSidebarPanel.ScriptIconStyleClass = "script-icon";
-WebInspector.TimelineSidebarPanel.TimelineContentViewShowingStyleClass = "timeline-content-view-showing";
-WebInspector.TimelineSidebarPanel.ShowingTimelineContentViewCookieKey = "timeline-sidebar-panel-showing-timeline-content-view";
-WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey = "timeline-sidebar-panel-selected-timeline-view-identifier";
-WebInspector.TimelineSidebarPanel.OverviewTimelineIdentifierCookieValue = "overview";
-
-WebInspector.TimelineSidebarPanel.prototype = {
-    constructor: WebInspector.TimelineSidebarPanel,
-    __proto__: WebInspector.NavigationSidebarPanel.prototype,
-
-    // Public
-
-    showDefaultContentView: function()
-    {
-        WebInspector.contentBrowser.showContentView(this._timelineContentView);
-    },
-
-    treeElementForRepresentedObject: function(representedObject)
-    {
-        if (representedObject instanceof WebInspector.TimelineRecording)
-            return this._timelineOverviewTreeElement;
-
-        // 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;
-            }
-
-            if (candidateRepresentedObject instanceof WebInspector.TimelineRecord) {
-                if (!candidateRepresentedObject.sourceCodeLocation)
-                    return false;
-                if (candidateRepresentedObject.sourceCodeLocation.sourceCode === representedObject)
-                    return true;
-                return false;
-            }
-
-            console.error("Unknown TreeElement");
-            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);
-    },
-
-    showTimelineOverview: function()
-    {
-        if (this._timelinesTreeOutline.selectedTreeElement)
-            this._timelinesTreeOutline.selectedTreeElement.deselect();
-
-        this._timelineContentView.showOverviewTimelineView();
-        WebInspector.contentBrowser.showContentView(this._timelineContentView);
-    },
-
-    showTimelineView: function(identifier)
-    {
-        console.assert(this._timelineTreeElementMap.has(identifier));
-        if (!this._timelineTreeElementMap.has(identifier))
-            return;
-
-        this._timelineTreeElementMap.get(identifier).select(true, false, true, true);
-
-        this._timelineContentView.showTimelineView(identifier);
-        WebInspector.contentBrowser.showContentView(this._timelineContentView);
-    },
-
-    // Protected
-
-    updateCustomContentOverflow: function()
-    {
-        if (!this._stripeBackgroundElement)
-            return;
-
-        var contentHeight = this.contentTreeOutline.element.offsetHeight;
-        var currentHeight = parseInt(this._stripeBackgroundElement.style.height);
-        if (currentHeight !== contentHeight)
-            this._stripeBackgroundElement.style.height = contentHeight + "px";
-    },
-
-    hasCustomFilters: function()
-    {
-        return true;
-    },
-
-    matchTreeElementAgainstCustomFilters: function(treeElement)
-    {
-        if (!this._timelineContentView)
-            return true;
-
-        return this._timelineContentView.matchTreeElementAgainstCustomFilters(treeElement);
-    },
-
-    canShowDifferentContentView: function()
-    {
-        return !this.restoringState || !this._restoredShowingTimelineContentView;
-    },
-
-    saveStateToCookie: function(cookie)
-    {
-        console.assert(cookie);
-
-        cookie[WebInspector.timelineSidebarPanel.ShowingTimelineContentViewCookieKey] = WebInspector.contentBrowser.currentContentView instanceof WebInspector.TimelineContentView;
-
-        var selectedTreeElement = this._timelinesTreeOutline.selectedTreeElement;
-        if (selectedTreeElement)
-            cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = selectedTreeElement.representedObject;
-        else
-            cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = WebInspector.TimelineSidebarPanel.OverviewTimelineIdentifierCookieValue;
-
-        WebInspector.NavigationSidebarPanel.prototype.saveStateToCookie.call(this, cookie);
-    },
-
-    restoreStateFromCookie: function(cookie, relaxedMatchDelay)
-    {
-        console.assert(cookie);
-
-        // The _timelineContentView is not ready on initial load, so delay the restore.
-        // This matches the delayed work in the WebInspector.TimelineSidebarPanel constructor.
-        if (!this._timelineContentView) {
-            setTimeout(this.restoreStateFromCookie.bind(this, cookie, relaxedMatchDelay), 0);
-            return;
-        }
-
-        this._restoredShowingTimelineContentView = cookie[WebInspector.timelineSidebarPanel.ShowingTimelineContentViewCookieKey];
-
-        var selectedTimelineViewIdentifier = cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey];
-        if (selectedTimelineViewIdentifier === WebInspector.TimelineSidebarPanel.OverviewTimelineIdentifierCookieValue)
-            this.showTimelineOverview();
-        else
-            this.showTimelineView(selectedTimelineViewIdentifier);
-
-        WebInspector.NavigationSidebarPanel.prototype.restoreStateFromCookie.call(this, cookie, relaxedMatchDelay);
-    },
-
-    // Private
-
-    _timelinesTreeElementSelected: function(treeElement, selectedByUser)
-    {
-        console.assert(this._timelineTreeElementMap.get(treeElement.representedObject) === treeElement);
-        this.showTimelineView(treeElement.representedObject);
-    },
-
-    _contentBrowserCurrentContentViewDidChange: function(event)
-    {
-        if (WebInspector.contentBrowser.currentContentView instanceof WebInspector.TimelineContentView)
-            this.element.classList.add(WebInspector.TimelineSidebarPanel.TimelineContentViewShowingStyleClass);
-        else
-            this.element.classList.remove(WebInspector.TimelineSidebarPanel.TimelineContentViewShowingStyleClass);
-    },
-
-    _recordingStarted: function(event)
-    {
-        this._recordStatusElement.textContent = WebInspector.UIString("Recording");
-        this._recordGlyphElement.classList.add(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingStyleClass);
-    },
-
-    _recordingStopped: function(event)
-    {
-        this._recordStatusElement.textContent = "";
-        this._recordGlyphElement.classList.remove(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingStyleClass);
-    },
-
-    _recordGlyphMousedOver: function(event)
-    {
-        this._recordGlyphElement.classList.remove(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
-        if (WebInspector.timelineManager.recordingEnabled)
-            this._recordStatusElement.textContent = WebInspector.UIString("Stop Recording");
-        else
-            this._recordStatusElement.textContent = WebInspector.UIString("Start Recording");
-    },
-
-    _recordGlyphMousedOut: function(event)
-    {
-        this._recordGlyphElement.classList.remove(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
-        if (WebInspector.timelineManager.recordingEnabled)
-            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.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
-        if (WebInspector.timelineManager.recordingEnabled)
-            WebInspector.timelineManager.stopRecording();
-        else
-            WebInspector.timelineManager.startRecording();
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/TimelineView.css b/Source/WebInspectorUI/UserInterface/TimelineView.css
deleted file mode 100644
index 923ed7e20..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineView.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.
- */
-
-.timeline-view {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineView.js b/Source/WebInspectorUI/UserInterface/TimelineView.js
deleted file mode 100644
index 08e8191b0..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineView.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.TimelineView = function()
-{
-    WebInspector.Object.call(this);
-
-    this._contentTreeOutline = WebInspector.timelineSidebarPanel.createContentTreeOutline();
-
-    this.element = document.createElement("div");
-    this.element.classList.add(WebInspector.TimelineView.StyleClassName);
-
-    this._zeroTime = 0;
-    this._startTime = 0;
-    this._endTime = 5;
-    this._currentTime = 0;
-};
-
-WebInspector.TimelineView.StyleClassName = "timeline-view";
-
-WebInspector.TimelineView.Event = {
-    SelectionPathComponentsDidChange: "timeline-view-selection-path-components-did-change"
-};
-
-WebInspector.TimelineView.prototype = {
-    constructor: WebInspector.TimelineView,
-    __proto__: WebInspector.Object.prototype,
-
-    // Public
-
-    get navigationSidebarTreeOutline()
-    {
-        return this._contentTreeOutline;
-    },
-
-    get navigationSidebarTreeOutlineLabel()
-    {
-        // Implemented by sub-classes if needed.
-        return null;
-    },
-
-    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)
-    {
-        if (this._zeroTime === x)
-            return;
-
-        this._zeroTime = x || 0;
-
-        this.needsLayout();
-    },
-
-    get startTime()
-    {
-        return this._startTime;
-    },
-
-    set startTime(x)
-    {
-        if (this._startTime === x)
-            return;
-
-        this._startTime = x || 0;
-
-        this.needsLayout();
-    },
-
-    get endTime()
-    {
-        return this._endTime;
-    },
-
-    set endTime(x)
-    {
-        if (this._endTime === x)
-            return;
-
-        this._endTime = x || 0;
-
-        this.needsLayout();
-    },
-
-    get currentTime()
-    {
-        return this._currentTime;
-    },
-
-    set currentTime(x)
-    {
-        if (this._currentTime === x)
-            return;
-
-        var oldCurrentTime = this._currentTime;
-
-        this._currentTime = x || 0;
-
-        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();
-    },
-
-    get visible()
-    {
-        return this._visible;
-    },
-
-    reset: function()
-    {
-        this._contentTreeOutline.removeChildren();
-    },
-
-    shown: function()
-    {
-        this._visible = true;
-
-        // Implemented by sub-classes if needed.
-    },
-
-    hidden: function()
-    {
-        // Implemented by sub-classes if needed.
-
-        this._visible = false;
-    },
-
-    matchTreeElementAgainstCustomFilters: function(treeElement)
-    {
-        // Implemented by sub-classes if needed.
-        return true;
-    },
-
-    updateLayout: function()
-    {
-        if (this._scheduledLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
-            delete this._scheduledLayoutUpdateIdentifier;
-        }
-
-        // Implemented by sub-classes if needed.
-    },
-
-    updateLayoutIfNeeded: function()
-    {
-        if (!this._scheduledLayoutUpdateIdentifier)
-            return;
-        this.updateLayout();
-    },
-
-    // Protected
-
-    treeElementPathComponentSelected: function(event)
-    {
-        // Implemented by sub-classes if needed.
-    },
-
-    needsLayout: function()
-    {
-        if (!this._visible)
-            return;
-
-        if (this._scheduledLayoutUpdateIdentifier)
-            return;
-
-        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
-    }
-};
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 643fdb4f2..000000000
--- a/Source/WebInspectorUI/UserInterface/Toolbar.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.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._leftSectionElement.setAttribute("role", "tablist");
-    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._rightSectionElement.setAttribute("role", "tablist");
-    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/TreeElementStatusButton.css b/Source/WebInspectorUI/UserInterface/TreeElementStatusButton.css
deleted file mode 100644
index 52aa562d3..000000000
--- a/Source/WebInspectorUI/UserInterface/TreeElementStatusButton.css
+++ /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.
- */
-
-.item > .status > .status-button {
-    width: 16px;
-    height: 16px;
-    display: inline-block;
-}
-
-.item > .status > .status-button > svg * {
-    fill: rgb(112, 126, 139);
-}
-
-.item.selected > .status > .status-button > svg * {
-    fill: white;
-}
-
-.item.selected > .status > .status-button:active > svg * {
-    fill: rgba(255, 255, 255, 0.75);
-}
-
-.item > .status > .status-button.disabled > svg * {
-    fill: rgba(112, 126, 139, 0.5) !important;
-}
-
-.item.selected > .status > .status-button.disabled > svg * {
-    fill: rgba(255, 255, 255, 0.5) !important;
-}
diff --git a/Source/WebInspectorUI/UserInterface/TreeElementStatusButton.js b/Source/WebInspectorUI/UserInterface/TreeElementStatusButton.js
deleted file mode 100644
index 8ee6d82a3..000000000
--- a/Source/WebInspectorUI/UserInterface/TreeElementStatusButton.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.TreeElementStatusButton = function(element) {
-    WebInspector.Object.call(this);
-
-    console.assert(element);
-
-    this._element = element;
-    this._element.classList.add(WebInspector.TreeElementStatusButton.StyleClassName);
-    this._element.addEventListener("click", this._clicked.bind(this));
-};
-
-WebInspector.TreeElementStatusButton.StyleClassName = "status-button";
-WebInspector.TreeElementStatusButton.DisabledStyleClassName = "disabled";
-
-WebInspector.TreeElementStatusButton.Event = {
-    Clicked: "status-button-clicked"
-};
-
-WebInspector.TreeElementStatusButton.prototype = {
-    constructor: WebInspector.TreeElementStatusButton,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get hidden()
-    {
-        return !this._element.classList.contains(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
-    },
-
-    set hidden(flag)
-    {
-        if (flag)
-            this._element.classList.remove("hidden");
-        else
-            this._element.classList.add("hidden");
-    },
-
-    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: function(event)
-    {
-        if (!this.enabled)
-            return;
-
-        event.stopPropagation();
-
-        this.dispatchEventToListeners(WebInspector.TreeElementStatusButton.Event.Clicked, event);
-    }
-};
-
-WebInspector.TreeElementStatusButton.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TreeOutline.js b/Source/WebInspectorUI/UserInterface/TreeOutline.js
deleted file mode 100644
index ec21c70a8..000000000
--- a/Source/WebInspectorUI/UserInterface/TreeOutline.js
+++ /dev/null
@@ -1,1094 +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.constructor = TreeOutline;
-
-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)
-        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)
-        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;
-
-    if (this.treeOutline && this.treeOutline.onremove)
-        this.treeOutline.onremove(child);
-}
-
-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)
-{
-    var treeOutline = this.treeOutline;
-
-    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;
-
-        if (treeOutline && treeOutline.onremove)
-            treeOutline.onremove(child);
-    }
-
-    this.children = [];
-}
-
-TreeOutline.prototype.removeChildrenRecursive = function(suppressOnDeselect)
-{
-    var childrenToRemove = this.children;
-
-    var treeOutline = this.treeOutline;
-
-    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;
-
-        if (treeOutline && treeOutline.onremove)
-            treeOutline.onremove(child);
-    }
-
-    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.selectedTreeElement === element)
-        this.selectedTreeElement = null;
-    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 (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;
-}
-
-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 && 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");
-        }
-
-        if (this.treeOutline && this.treeOutline.onhidden)
-            this.treeOutline.onhidden(this, x);
-    },
-
-    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/TreeOutlineDataGridSynchronizer.js b/Source/WebInspectorUI/UserInterface/TreeOutlineDataGridSynchronizer.js
deleted file mode 100644
index 041b2f938..000000000
--- a/Source/WebInspectorUI/UserInterface/TreeOutlineDataGridSynchronizer.js
+++ /dev/null
@@ -1,282 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = function(treeOutline, dataGrid)
-{
-    WebInspector.Object.call(this);
-
-    this._treeOutline = treeOutline;
-    this._dataGrid = dataGrid;
-    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);
-
-    // FIXME: This is a hack. TreeOutline should just dispatch events via WebInspector.Object.
-    var existingOnAdd = treeOutline.onadd;
-    var existingOnRemove = treeOutline.onremove;
-    var existingOnExpand = treeOutline.onexpand;
-    var existingOnCollapse = treeOutline.oncollapse;
-    var existingOnHidden = treeOutline.onhidden;
-    var existingOnSelect = treeOutline.onselect;
-
-    treeOutline.onadd = function(element) {
-        this._treeElementAdded(element);
-        if (existingOnAdd)
-            existingOnAdd.call(treeOutline, element);
-    }.bind(this);
-
-    treeOutline.onremove = function(element) {
-        this._treeElementRemoved(element);
-        if (existingOnRemove)
-            existingOnRemove.call(treeOutline, element);
-    }.bind(this);
-
-    treeOutline.onexpand = function(element) {
-        this._treeElementExpanded(element);
-        if (existingOnExpand)
-            existingOnExpand.call(treeOutline, element);
-    }.bind(this);
-
-    treeOutline.oncollapse = function(element) {
-        this._treeElementCollapsed(element);
-        if (existingOnCollapse)
-            existingOnCollapse.call(treeOutline, element);
-    }.bind(this);
-
-    treeOutline.onhidden = function(element, hidden) {
-        this._treeElementHiddenChanged(element, hidden);
-        if (existingOnHidden)
-            existingOnHidden.call(treeOutline, element, hidden);
-    }.bind(this);
-
-    treeOutline.onselect = function(element, selectedByUser) {
-        this._treeElementSelected(element, selectedByUser);
-        if (existingOnSelect)
-            existingOnSelect.call(treeOutline, element, selectedByUser);
-    }.bind(this);
-}
-
-WebInspector.TreeOutlineDataGridSynchronizer.prototype = {
-    constructor: WebInspector.TreeOutlineDataGridSynchronizer,
-    __proto__: WebInspector.Object,
-
-    // Public
-
-    get treeOutline()
-    {
-        return this._treeOutline;
-    },
-
-    get dataGrid()
-    {
-        return this._dataGrid;
-    },
-
-    get enabled()
-    {
-        return this._enabled;
-    },
-
-    set enabled(x)
-    {
-        this._enabled = x || false;
-    },
-
-    associate: function(treeElement, dataGridNode)
-    {
-        console.assert(treeElement);
-        console.assert(dataGridNode);
-
-        treeElement.__dataGridNode = dataGridNode;
-        dataGridNode.__treeElement = treeElement;
-    },
-
-    synchronize: function()
-    {
-        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: function(dataGridNode)
-    {
-        return dataGridNode.__treeElement || null;
-    },
-
-    dataGridNodeForTreeElement: function(treeElement)
-    {
-        return treeElement.__dataGridNode || null;
-    },
-
-    // Private
-
-    _treeOutlineScrolled: function(event)
-    {
-        if (!this._enabled)
-            return;
-
-        if (this._ignoreNextTreeOutlineScrollEvent) {
-            delete this._ignoreNextTreeOutlineScrollEvent;
-            return;
-        }
-
-        this._ignoreNextDataGridScrollEvent = true;
-        this._dataGrid.scrollContainer.scrollTop = this._treeOutline.element.parentNode.scrollTop;
-    },
-
-    _dataGridScrolled: function(event)
-    {
-        if (!this._enabled)
-            return;
-
-        if (this._ignoreNextDataGridScrollEvent) {
-            delete this._ignoreNextDataGridScrollEvent;
-            return;
-        }
-
-        this._ignoreNextTreeOutlineScrollEvent = true;
-        this._treeOutline.element.parentNode.scrollTop = this._dataGrid.scrollContainer.scrollTop;
-    },
-
-    _dataGridNodeSelected: function(event)
-    {
-        if (!this._enabled)
-            return;
-
-        var dataGridNode = this._dataGrid.selectedNode;
-        if (dataGridNode)
-            dataGridNode.__treeElement.select(true, true, true, true);
-    },
-
-    _dataGridNodeExpanded: function(event)
-    {
-        if (!this._enabled)
-            return;
-
-        var dataGridNode = event.data.dataGridNode;
-        console.assert(dataGridNode);
-
-        if (!dataGridNode.__treeElement.expanded)
-            dataGridNode.__treeElement.expand();
-    },
-
-    _dataGridNodeCollapsed: function(event)
-    {
-        if (!this._enabled)
-            return;
-
-        var dataGridNode = event.data.dataGridNode;
-        console.assert(dataGridNode);
-
-        if (dataGridNode.__treeElement.expanded)
-            dataGridNode.__treeElement.collapse();
-    },
-
-    _treeElementSelected: function(treeElement, selectedByUser)
-    {
-        if (!this._enabled)
-            return;
-
-        var dataGridNode = treeElement.__dataGridNode;
-        console.assert(dataGridNode);
-
-        dataGridNode.select(true);
-    },
-
-    _treeElementAdded: function(treeElement)
-    {
-        if (!this._enabled)
-            return;
-
-        var dataGridNode = treeElement.__dataGridNode;
-        console.assert(dataGridNode);
-
-        var parentDataGridNode = treeElement.parent.__dataGridNode;
-        console.assert(dataGridNode);
-
-        var childIndex = treeElement.parent.children.indexOf(treeElement);
-        console.assert(childIndex !== -1);
-
-        parentDataGridNode.insertChild(dataGridNode, childIndex);
-    },
-
-    _treeElementRemoved: function(treeElement)
-    {
-        if (!this._enabled)
-            return;
-
-        var dataGridNode = treeElement.__dataGridNode;
-        console.assert(dataGridNode);
-
-        if (dataGridNode.parent)
-            dataGridNode.parent.removeChild(dataGridNode);
-    },
-
-    _treeElementExpanded: function(treeElement)
-    {
-        if (!this._enabled)
-            return;
-
-        var dataGridNode = treeElement.__dataGridNode;
-        console.assert(dataGridNode);
-
-        if (!dataGridNode.expanded)
-            dataGridNode.expand();
-    },
-
-    _treeElementCollapsed: function(treeElement)
-    {
-        if (!this._enabled)
-            return;
-
-        var dataGridNode = treeElement.__dataGridNode;
-        console.assert(dataGridNode);
-
-        if (dataGridNode.expanded)
-            dataGridNode.collapse();
-    },
-
-    _treeElementHiddenChanged: function(treeElement, hidden)
-    {
-        if (!this._enabled)
-            return;
-
-        var dataGridNode = treeElement.__dataGridNode;
-        console.assert(dataGridNode);
-
-        dataGridNode.element.classList.toggle("hidden", hidden);
-    }
-}
-
-WebInspector.TreeOutlineDataGridSynchronizer.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/URLUtilities.js b/Source/WebInspectorUI/UserInterface/URLUtilities.js
deleted file mode 100644
index 9d5acb873..000000000
--- a/Source/WebInspectorUI/UserInterface/URLUtilities.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.
- */
-
-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 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 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;
-}
-
-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;
-}
diff --git a/Source/WebInspectorUI/UserInterface/Utilities.js b/Source/WebInspectorUI/UserInterface/Utilities.js
deleted file mode 100644
index 2a9f48ca6..000000000
--- a/Source/WebInspectorUI/UserInterface/Utilities.js
+++ /dev/null
@@ -1,951 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (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(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, "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, "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, "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(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 && Math.abs(ms) < 100)
-            return WebInspector.UIString("%.2fms").format(ms);
-        else if (Math.abs(ms) < 100)
-            return WebInspector.UIString("%.1fms").format(ms);
-
-        if (higherResolution && Math.abs(ms) < 1000)
-            return WebInspector.UIString("%.1fms").format(ms);
-        else if (Math.abs(ms) < 1000)
-            return WebInspector.UIString("%.0fms").format(ms);
-
-        if (Math.abs(seconds) < 60)
-            return WebInspector.UIString("%.2fs").format(seconds);
-
-        var minutes = seconds / 60;
-        if (Math.abs(minutes) < 60)
-            return WebInspector.UIString("%.1fmin").format(minutes);
-
-        var hours = minutes / 60;
-        if (Math.abs(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 (Math.abs(bytes) < 1024)
-            return WebInspector.UIString("%.0f B").format(bytes);
-
-        var kilobytes = bytes / 1024;
-        if (Math.abs(kilobytes) < 10 || (higherResolution && Math.abs(kilobytes) < 1024))
-            return WebInspector.UIString("%.2f KB").format(kilobytes);
-        else if (Math.abs(kilobytes) < 1024)
-            return WebInspector.UIString("%.1f KB").format(kilobytes);
-
-        var megabytes = kilobytes / 1024;
-        if (higherResolution || Math.abs(megabytes) < 10)
-            return WebInspector.UIString("%.2f MB").format(megabytes);
-        else
-            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: 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);
-}
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..4509f8d84
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js
@@ -0,0 +1,150 @@
+/*
+ * 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.needsLayout();
+    }
+
+    // Protected
+
+    layout()
+    {
+        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..c73fc1481
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js
@@ -0,0 +1,229 @@
+/*
+ * 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");
+
+        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()
+    {
+        super.shown();
+
+        this._maybeUpdate();
+    }
+
+    closed()
+    {
+        WebInspector.applicationCacheManager.removeEventListener(null, null, this);
+
+        super.closed();
+    }
+
+    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.sortColumnIdentifier = "url";
+        this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+        this._dataGrid.createSettings("application-cache-frame-content-view");
+
+        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..9b346cb37
--- /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 && manifestTreeElement.subtitle === subtitle);
+        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..5df7fcda3
--- /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: image-set(url(../Images/ApplicationCacheManifest.png) 1x, url(../Images/ApplicationCacheManifest@2x.png) 2x);
+}
+
+.application-cache-frame .icon {
+    content: 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..27a95c830
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheManifestTreeElement.js
@@ -0,0 +1,72 @@
+/*
+ * 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);
+
+        this.hasChildren = true;
+        this.expanded = true;
+    }
+
+    // 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..e95fbc1ab
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
@@ -0,0 +1,119 @@
+/*
+ * 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: 258px;
+}
+
+.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: var(--selected-background-color);
+    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.animate > div,
+.bezier-editor > .bezier-preview-timing.animate {
+    animation: bezierPreview 2.5s linear 250ms infinite;
+}
+
+@keyframes bezierPreview {
+    from { transform: translate(0, 0); }
+    10% { transform: translate(0, 0); }
+    90% { transform: translate(170px, 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;
+}
+
+.bezier-editor > .number-input-container {
+    display: flex;
+    width: calc(100% - 10px);
+    margin: 0 5px;
+    padding-top: 7px;
+    border-top: 1px solid lightgrey;
+}
+
+.bezier-editor > .number-input-container > input {
+    width: 100%;
+    margin: 0 2px;
+    padding: 1px 0 1px 1px;
+    text-align: right;
+    font-size: 12px;
+    background-color: white;
+    border: 1px solid hsl(0, 0%, 60%);
+    border-radius: 4px;
+    box-shadow: inset 0 0 1px 1px hsl(0, 0%, 89%);
+    outline: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js
new file mode 100644
index 000000000..a07c19d6f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js
@@ -0,0 +1,390 @@
+/*
+ * 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._bezierPreviewContainer = this._element.createChild("div", "bezier-preview");
+        this._bezierPreviewContainer.title = WebInspector.UIString("Restart animation");
+        this._bezierPreviewContainer.addEventListener("mousedown", this._resetPreviewAnimation.bind(this));
+
+        this._bezierPreview = this._bezierPreviewContainer.createChild("div");
+
+        this._bezierPreviewTiming = this._element.createChild("div", "bezier-preview-timing");
+
+        this._bezierContainer = this._element.appendChild(createSVGElement("svg"));
+        this._bezierContainer.setAttribute("width", editorWidth);
+        this._bezierContainer.setAttribute("height", editorHeight);
+        this._bezierContainer.classList.add("bezier-container");
+
+        let svgGroup = this._bezierContainer.appendChild(createSVGElement("g"));
+        svgGroup.setAttribute("transform", "translate(0, " + this._padding + ")");
+
+        let linearCurve = svgGroup.appendChild(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);
+
+        this._bezierCurve = svgGroup.appendChild(createSVGElement("path"));
+        this._bezierCurve.classList.add("bezier-curve");
+
+        function createControl(x1, y1)
+        {
+            x1 += this._controlHandleRadius;
+            y1 += this._controlHandleRadius;
+
+            let line = svgGroup.appendChild(createSVGElement("line"));
+            line.classList.add("control-line");
+            line.setAttribute("x1", x1);
+            line.setAttribute("y1", y1);
+            line.setAttribute("x2", x1);
+            line.setAttribute("y2", y1);
+
+            let handle = svgGroup.appendChild(createSVGElement("circle"));
+            handle.classList.add("control-handle");
+
+            return {point: null, line, handle};
+        }
+
+        this._inControl = createControl.call(this, 0, this._bezierHeight);
+        this._outControl = createControl.call(this, this._bezierWidth, 0);
+
+        this._numberInputContainer = this._element.createChild("div", "number-input-container");
+
+        function createBezierInput(id, {min, max} = {})
+        {
+            let key = "_bezier" + id + "Input";
+            this[key] = this._numberInputContainer.createChild("input");
+            this[key].type = "number";
+            this[key].step = 0.01;
+
+            if (!isNaN(min))
+                this[key].min = min;
+
+            if (!isNaN(max))
+                this[key].max = max;
+
+            this[key].addEventListener("input", this.debounce(250)._handleNumberInputInput);
+            this[key].addEventListener("keydown", this._handleNumberInputKeydown.bind(this));
+        }
+
+        createBezierInput.call(this, "InX", {min: 0, max: 1});
+        createBezierInput.call(this, "InY");
+        createBezierInput.call(this, "OutX", {min: 0, max: 1});
+        createBezierInput.call(this, "OutY");
+
+        this._selectedControl = null;
+        this._mouseDownPosition = null;
+        this._bezierContainer.addEventListener("mousedown", this);
+
+        WebInspector.addWindowKeydownListener(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._updateBezierPreview();
+    }
+
+    get bezier()
+    {
+        return this._bezier;
+    }
+
+    removeListeners()
+    {
+        WebInspector.removeWindowKeydownListener(this);
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mousedown":
+            this._handleMousedown(event);
+            break;
+        case "mousemove":
+            this._handleMousemove(event);
+            break;
+        case "mouseup":
+            this._handleMouseup(event);
+            break;
+        }
+    }
+
+    handleKeydownEvent(event)
+    {
+        if (!this._selectedControl || !this._element.parentNode)
+            return false;
+
+        let horizontal = 0;
+        let vertical = 0;
+        switch (event.keyCode) {
+        case WebInspector.KeyboardShortcut.Key.Up.keyCode:
+            vertical = -1;
+            break;
+        case WebInspector.KeyboardShortcut.Key.Right.keyCode:
+            horizontal = 1;
+            break;
+        case WebInspector.KeyboardShortcut.Key.Down.keyCode:
+            vertical = 1;
+            break;
+        case WebInspector.KeyboardShortcut.Key.Left.keyCode:
+            horizontal = -1;
+            break;
+        default:
+            return false;
+        }
+
+        if (event.shiftKey) {
+            horizontal *= 10;
+            vertical *= 10;
+        }
+
+        vertical *= this._bezierWidth / 100;
+        horizontal *= this._bezierHeight / 100;
+
+        this._selectedControl.point.x = Number.constrain(this._selectedControl.point.x + horizontal, 0, this._bezierWidth);
+        this._selectedControl.point.y += vertical;
+        this._updateControl(this._selectedControl);
+        this._updateValue();
+
+        return true;
+    }
+
+    // Private
+
+    _handleMousedown(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        window.addEventListener("mousemove", this, true);
+        window.addEventListener("mouseup", this, true);
+
+        this._bezierPreviewContainer.classList.remove("animate");
+        this._bezierPreviewTiming.classList.remove("animate");
+
+        this._updateControlPointsForMouseEvent(event, true);
+    }
+
+    _handleMousemove(event)
+    {
+        this._updateControlPointsForMouseEvent(event);
+    }
+
+    _handleMouseup(event)
+    {
+        this._selectedControl.handle.classList.remove("selected");
+        this._mouseDownPosition = 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) {
+            this._mouseDownPosition = point;
+
+            if (this._inControl.point.distance(point) < this._outControl.point.distance(point))
+                this._selectedControl = this._inControl;
+            else
+                this._selectedControl = this._outControl;
+        }
+
+        if (event.shiftKey && this._mouseDownPosition) {
+            if (Math.abs(this._mouseDownPosition.x - point.x) > Math.abs(this._mouseDownPosition.y - point.y))
+                point.y = this._mouseDownPosition.y;
+            else
+                point.x = this._mouseDownPosition.x;
+        }
+
+        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);
+
+        this._bezierInXInput.value = this._bezier.inPoint.x;
+        this._bezierInYInput.value = this._bezier.inPoint.y;
+        this._bezierOutXInput.value = this._bezier.outPoint.x;
+        this._bezierOutYInput.value = this._bezier.outPoint.y;
+    }
+
+    _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);
+    }
+
+    _updateBezierPreview()
+    {
+        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();
+    }
+
+    _triggerPreviewAnimation()
+    {
+        this._bezierPreview.style.animationTimingFunction = this._bezier.toString();
+        this._bezierPreviewContainer.classList.add("animate");
+        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);
+    }
+
+    _handleNumberInputInput(event)
+    {
+        this._changeBezierForInput(event.target, event.target.value);
+    }
+
+    _handleNumberInputKeydown(event)
+    {
+        let shift = 0;
+        if (event.keyIdentifier === "Up")
+            shift = 0.01;
+         else if (event.keyIdentifier === "Down")
+            shift = -0.01;
+
+        if (!shift)
+            return;
+
+        if (event.shiftKey)
+            shift *= 10;
+
+        event.preventDefault();
+        this._changeBezierForInput(event.target, parseFloat(event.target.value) + shift);
+    }
+
+    _changeBezierForInput(target, value)
+    {
+        value = Math.round(value * 100) / 100;
+
+        switch (target) {
+        case this._bezierInXInput:
+            this._bezier.inPoint.x = Number.constrain(value, 0, 1);
+            break;
+        case this._bezierInYInput:
+            this._bezier.inPoint.y = value;
+            break;
+        case this._bezierOutXInput:
+            this._bezier.outPoint.x = Number.constrain(value, 0, 1);
+            break;
+        case this._bezierOutYInput:
+            this._bezier.outPoint.y = value;
+            break;
+        default:
+            return;
+        }
+
+        this._updateBezierPreview();
+
+        this.dispatchEventToListeners(WebInspector.BezierEditor.Event.BezierChanged, {bezier: this._bezier});
+    }
+};
+
+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..eae123d97
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js
@@ -0,0 +1,434 @@
+/*
+ * 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)
+    {
+        if (this._nodeStyles && this._nodeStyles.computedStyle)
+            this._nodeStyles.computedStyle.removeEventListener(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, this._refresh, this);
+
+        this._nodeStyles = nodeStyles;
+        if (this._nodeStyles && this._nodeStyles.computedStyle)
+            this._nodeStyles.computedStyle.addEventListener(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, this._refresh, this);
+
+        this._refresh();
+    }
+
+    // Private
+
+    _refresh()
+    {
+        if (this._ignoreNextRefresh) {
+            this._ignoreNextRefresh = false;
+            return;
+        }
+
+        this._updateMetrics();
+    }
+
+    _getPropertyValueAsPx(style, propertyName)
+    {
+        return Number(style.propertyForName(propertyName).value.replace(/px$/, "") || 0);
+    }
+
+    _getBox(computedStyle, componentName)
+    {
+        var suffix = this._getComponentSuffix(componentName);
+        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};
+    }
+
+    _getComponentSuffix(componentName)
+    {
+        return componentName === "border" ? "-width" : "";
+    }
+
+    _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 {
+            this._highlightMode = null;
+            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()
+    {
+        var metricsElement = document.createElement("div");
+        var style = this._nodeStyles.computedStyle;
+
+        function createValueElement(type, value, name, propertyName)
+        {
+            // Check if the value is a float and whether it should be rounded.
+            let floatValue = parseFloat(value);
+            let shouldRoundValue = !isNaN(floatValue) && (floatValue % 1 !== 0);
+
+            if (isNaN(floatValue))
+                value = figureDash;
+
+            let 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(name, side)
+        {
+            let suffix = this._getComponentSuffix(name);
+            let propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
+            let value = style.propertyForName(propertyName).value;
+            if (value === "" || (name !== "position" && value === "0px") || (name === "position" && value === "auto"))
+                value = "";
+            else
+                value = value.replace(/px$/, "");
+
+            let element = createValueElement.call(this, "div", value, name, propertyName);
+            element.className = side;
+            return element;
+        }
+
+        function createContentAreaElement(name)
+        {
+            console.assert(name === "width" || name === "height");
+
+            let size = style.propertyForName(name).value.replace(/px$/, "");
+            if (style.propertyForName("box-sizing").value === "border-box") {
+                let borderBox = this._getBox(style, "border");
+                let paddingBox = this._getBox(style, "padding");
+
+                let [side, oppositeSide] = name === "width" ? ["left", "right"] : ["top", "bottom"];
+                size = size - borderBox[side] - borderBox[oppositeSide] - paddingBox[side] - paddingBox[oppositeSide];
+            }
+
+            return createValueElement.call(this, "span", size, name, name);
+        }
+
+        // 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 = [];
+
+        if (!style.hasProperties()) {
+            this.showEmptyMessage();
+            return;
+        }
+
+        var previousBox = null;
+        for (let name of ["content", "padding", "border", "margin", "position"]) {
+            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") {
+                let widthElement = createContentAreaElement.call(this, "width");
+                let heightElement = createContentAreaElement.call(this, "height");
+                boxElement.append(widthElement, " \u00D7 ", heightElement);
+            } else {
+                var labelElement = document.createElement("div");
+                labelElement.className = "label";
+                labelElement.textContent = name;
+                boxElement.appendChild(labelElement);
+
+                boxElement.appendChild(createBoxPartElement.call(this, name, "top"));
+                boxElement.appendChild(document.createElement("br"));
+                boxElement.appendChild(createBoxPartElement.call(this, name, "left"));
+
+                if (previousBox)
+                    boxElement.appendChild(previousBox);
+
+                boxElement.appendChild(createBoxPartElement.call(this, name, "right"));
+                boxElement.appendChild(document.createElement("br"));
+                boxElement.appendChild(createBoxPartElement.call(this, name, "bottom"));
+            }
+
+            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)
+    {
+        element.removeEventListener("keydown", context.keyDownHandler, false);
+        this._isEditingMetrics = false;
+    }
+
+    _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 === figureDash))
+            userInput = "0px";
+        else if (context.box === "position" && (!userInput || userInput === figureDash))
+            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..cf55d69a3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.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.
+ */
+
+.breakpoint-action-block-header {
+    margin-bottom: 3px;
+}
+
+.breakpoint-action-button-container {
+    float: right;
+}
+
+.breakpoint-action-append-button,
+.breakpoint-action-remove-button {
+    background-origin: border-box;
+    width: 13px;
+    height: 13px;
+    margin-left: 5px;
+    margin-top: 2px;
+    background-color: transparent;
+    border: none;
+    opacity: 0.6;
+}
+
+.breakpoint-action-append-button {
+    background-image: url(../Images/Plus13.svg);
+}
+
+.breakpoint-action-remove-button {
+    background-image: url(../Images/Minus.svg);
+}
+
+.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 > .description {
+    color: var(--text-color-gray-medium);
+    text-align: right;
+    margin-top: 6px;
+    margin-right: 2px;
+}
+
+.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..2159a40a8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js
@@ -0,0 +1,215 @@
+/*
+ * 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);
+        }
+
+        let buttonContainerElement = header.appendChild(document.createElement("div"));
+        buttonContainerElement.classList.add("breakpoint-action-button-container");
+
+        let appendActionButton = buttonContainerElement.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");
+
+        let removeActionButton = buttonContainerElement.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);
+
+            let descriptionElement = this._bodyElement.appendChild(document.createElement("div"));
+            descriptionElement.classList.add("description");
+            descriptionElement.textContent = WebInspector.UIString("${expr} = expression");
+            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(() => {
+                this._codeMirror.refresh();
+                if (!omitFocus)
+                    this._codeMirror.focus();
+            }, 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..25df67a54
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
@@ -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.
+ */
+
+.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;
+}
+
+.wide .edit-breakpoint-popover-condition > .CodeMirror {
+    width: 360px; /* NOTE: Fixed value, manually tuned to .edit-breakpoint-popover-content width. */
+}
+
+#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..fe26a9820
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css
@@ -0,0 +1,86 @@
+/*
+ * 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-assertion-icon .icon {
+    content: url(../Images/Assertion.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..b73ddd3ff
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
@@ -0,0 +1,274 @@
+/*
+ * 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.contentIdentifier]};
+    }
+
+    ondelete()
+    {
+        if (!WebInspector.debuggerManager.isBreakpointRemovable(this._breakpoint))
+            return false;
+
+        // We set this flag so that TreeOutlines that will remove this
+        // BreakpointTreeElement will know whether it was deleted from
+        // within the TreeOutline or from outside it (e.g. TextEditor).
+        this.__deletedViaDeleteKeyboardShortcut = true;
+
+        WebInspector.debuggerManager.removeBreakpoint(this._breakpoint);
+        return true;
+    }
+
+    onenter()
+    {
+        this._breakpoint.cycleToNextMode();
+        return true;
+    }
+
+    onspace()
+    {
+        this._breakpoint.cycleToNextMode();
+        return true;
+    }
+
+    onattach()
+    {
+        super.onattach();
+
+        this._listenerSet.install();
+
+        for (var probeSet of WebInspector.probeManager.probeSets)
+            if (probeSet.breakpoint === this._breakpoint)
+                this._addProbeSet(probeSet);
+    }
+
+    ondetach()
+    {
+        this._listenerSet.uninstall();
+
+        if (this._probeSet)
+            this._removeProbeSet(this._probeSet);
+    }
+
+    populateContextMenu(contextMenu, event)
+    {
+        WebInspector.breakpointPopoverController.appendContextMenuItems(contextMenu, this._breakpoint, this._statusImageElement);
+
+        super.populateContextMenu(contextMenu, event);
+    }
+
+    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(() => {
+            this.element.classList.remove(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName);
+        }, 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..bd94d40b3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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;
+}
+
+.navigation-bar .item.button > .glyph {
+    color: var(--glyph-color);
+}
+
+.navigation-bar .item.button:not(.disabled):active > .glyph {
+    color: var(--glyph-color-pressed);
+}
+
+.navigation-bar .item.button:not(.disabled):matches(:focus, .activate.activated, .radio.selected) > .glyph {
+    color: var(--glyph-color-active);
+}
+
+.navigation-bar .item.button:not(.disabled):active:matches(:focus, .activate.activated, .radio.selected) > .glyph {
+    color: var(--glyph-color-active-pressed);
+}
+
+.navigation-bar .item.button.disabled > .glyph {
+    color: var(--glyph-color-disabled);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js
new file mode 100644
index 000000000..8848f9d52
--- /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..88835ef16
--- /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: var(--selected-background-color);
+}
+
+.toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated) > .glyph {
+    color: var(--selected-background-color-active);
+}
+
+.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..4060588f4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css
@@ -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.
+ */
+
+.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: var(--style-declaration-section-header-padding);
+    font-size: 11px;
+    line-height: 12px;
+}
+
+.style-declaration-section.locked > .header > .locked-icon {
+    float: right;
+    width: 8px;
+    height: 10px;
+    margin-left: 5px;
+    content: url(../Images/Locked.svg);
+}
+
+.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 > textarea {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: var(--style-declaration-section-header-padding);
+    padding: 0;
+    font-family: Menlo, monospace;
+    color: black;
+    background: transparent;
+    border: none;
+    outline: none;
+    opacity: 0;
+    resize: none;
+    -webkit-appearance: none;
+}
+
+.style-declaration-section > .header > textarea:focus {
+    opacity: 1;
+}
+
+.style-declaration-section > .header > textarea:focus + .selector {
+    opacity: 0;
+}
+
+.style-declaration-section > .header > .selector {
+    font-family: Menlo, monospace;
+    color: hsl(0, 0%, 50%);
+    word-wrap: break-word;
+}
+
+.style-declaration-section > .header > .selector > .matched {
+    color: black;
+}
+
+.style-declaration-section > .header > .origin {
+    position: relative;
+    z-index: 1;
+
+    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..fb26f033c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js
@@ -0,0 +1,740 @@
+/*
+ * 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);
+        new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "S", this._save.bind(this), this._element);
+
+        this._headerElement = document.createElement("div");
+        this._headerElement.classList.add("header");
+
+        if (!style.editable) {
+            let lockedIconElement = this._headerElement.createChild("img", "locked-icon");
+
+            let styleLabel;
+            if (style.ownerRule && style.ownerRule.type === WebInspector.CSSStyleSheet.Type.UserAgent)
+                styleLabel = WebInspector.UIString("User Agent Stylesheet");
+            else
+                styleLabel = WebInspector.UIString("Style rule");
+
+            lockedIconElement.title = WebInspector.UIString("%s cannot be modified").format(styleLabel);
+        }
+
+        this._iconElement = this._headerElement.createChild("img", "icon");
+
+        if (this.selectorEditable) {
+            this._selectorInput = this._headerElement.createChild("textarea");
+            this._selectorInput.spellcheck = false;
+            this._selectorInput.tabIndex = -1;
+            this._selectorInput.addEventListener("mouseover", this._handleMouseOver.bind(this));
+            this._selectorInput.addEventListener("mousemove", this._handleMouseMove.bind(this));
+            this._selectorInput.addEventListener("mouseout", this._handleMouseOut.bind(this));
+            this._selectorInput.addEventListener("keydown", this._handleKeyDown.bind(this));
+            this._selectorInput.addEventListener("keypress", this._handleKeyPress.bind(this));
+            this._selectorInput.addEventListener("input", this._handleInput.bind(this));
+            this._selectorInput.addEventListener("paste", this._handleSelectorPaste.bind(this));
+            this._selectorInput.addEventListener("blur", this._handleBlur.bind(this));
+        }
+
+        this._selectorElement = this._headerElement.createChild("span", "selector");
+        if (!this.selectorEditable) {
+            this._selectorElement.addEventListener("mouseover", this._handleMouseOver.bind(this));
+            this._selectorElement.addEventListener("mouseout", this._handleMouseOut.bind(this));
+        }
+
+        this._originElement = this._headerElement.createChild("span", "origin");
+
+        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);
+
+        let iconClassName = null;
+        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));
+        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(` ${emDash} `);
+
+        function appendSelector(selector, matched)
+        {
+            console.assert(selector instanceof WebInspector.CSSSelector);
+
+            let selectorElement = document.createElement("span");
+            selectorElement.textContent = selector.text;
+
+            if (matched)
+                selectorElement.classList.add(WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName);
+
+            let specificity = selector.specificity;
+            if (specificity) {
+                let 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) {
+                let 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)
+        {
+            let 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);
+
+            let selectors = this._style.ownerRule.selectors;
+            let matchedSelectorIndices = this._style.ownerRule.matchedSelectorIndices;
+            let alwaysMatch = !matchedSelectorIndices.length;
+            if (selectors.length) {
+                let hasMatchingPseudoElementSelector = false;
+                for (let i = 0; i < selectors.length; ++i) {
+                    appendSelector.call(this, selectors[i], alwaysMatch || matchedSelectorIndices.includes(i));
+                    if (i < selectors.length - 1)
+                        this._selectorElement.append(", ");
+
+                    if (matchedSelectorIndices.includes(i) && selectors[i].isPseudoElementSelector())
+                        hasMatchingPseudoElementSelector = true;
+                }
+                this._element.classList.toggle(WebInspector.CSSStyleDeclarationSection.PseudoElementSelectorStyleClassName, hasMatchingPseudoElementSelector);
+            } else
+                appendSelectorTextKnownToMatch.call(this, this._style.ownerRule.selectorText);
+
+            if (this._style.ownerRule.sourceCodeLocation) {
+                let sourceCodeLink = WebInspector.createSourceCodeLocationLink(this._style.ownerRule.sourceCodeLocation, true);
+                this._originElement.appendChild(sourceCodeLink);
+            } else {
+                let 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, this._style.node.displayName);
+            this._originElement.append(WebInspector.UIString("Style Attribute"));
+            break;
+
+        case WebInspector.CSSStyleDeclaration.Type.Attribute:
+            appendSelectorTextKnownToMatch.call(this, this._style.node.displayName);
+            this._originElement.append(WebInspector.UIString("HTML Attributes"));
+            break;
+        }
+
+        this._updateSelectorIcon();
+        if (this._selectorInput)
+            this._selectorInput.value = this._selectorElement.textContent;
+    }
+
+    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);
+    }
+
+    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.selectorEditable && !this.locked) {
+            this.focus();
+            return;
+        }
+
+        if (this.locked) {
+            this.cssStyleDeclarationTextEditorSwitchRule(reverse);
+            return;
+        }
+
+        let selection = window.getSelection();
+        selection.removeAllRanges();
+
+        this._element.scrollIntoViewIfNeeded();
+
+        if (this._selectorInput) {
+            this._selectorInput.focus();
+            this._selectorInput.selectionStart = 0;
+            this._selectorInput.selectionEnd = this._selectorInput.value.length;
+        } else {
+            let range = document.createRange();
+            range.selectNodeContents(this._selectorElement);
+            selection.addRange(range);
+        }
+    }
+
+    selectLastProperty()
+    {
+        this._propertiesTextEditor.selectLastProperty();
+    }
+
+    get selectorEditable()
+    {
+        return !this.locked && this._style.ownerRule;
+    }
+
+    get locked()
+    {
+        return !this._style.editable;
+    }
+
+    get editorActive()
+    {
+        return this._editorActive;
+    }
+
+    // Private
+
+    get _currentSelectorText()
+    {
+        let selectorText = this.selectorEditable ? this._selectorInput.value : 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;
+
+        let data = event.clipboardData.getData("text/plain");
+        if (!data)
+            return;
+
+        function parseTextForRule(text)
+        {
+            let containsBraces = /[\{\}]/;
+            if (!containsBraces.test(text))
+                return [];
+
+            let match = text.match(/([^{]+){([\s\S]*)}/);
+            if (!match)
+                return [];
+
+            // 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;
+        }
+
+        let [selector, value] = parseTextForRule(data);
+        if (!selector || !value)
+            return;
+
+        this._style.nodeStyles.changeRule(this._style.ownerRule, selector.trim(), value);
+        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;
+                }
+            }
+
+            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;
+
+                    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;
+
+                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();
+    }
+
+    _handleMouseMove(event)
+    {
+        if (this._hasInvalidSelector)
+            return;
+
+        // Attempts to find a selector element under the mouse so that the title (which contains the
+        // specificity information) can be applied to _selectorInput, which will then display the
+        // title if the user hovers long enough.
+        for (let element of this._selectorElements) {
+            let {top, right, bottom, left} = element.getBoundingClientRect();
+            if (event.clientX >= left && event.clientX <= right && event.clientY >= top && event.clientY <= bottom) {
+                this._selectorInput.title = element.title;
+                return;
+            }
+        }
+
+        this._selectorInput.title = "";
+    }
+
+    _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 === WebInspector.KeyboardShortcut.Key.Enter.keyCode) {
+            this._selectorInput.blur();
+            return;
+        }
+
+        if (event.keyCode !== WebInspector.KeyboardShortcut.Key.Tab.keyCode) {
+            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;
+        }
+    }
+
+    _handleKeyPress(event)
+    {
+        if (!event.altGraphKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+            // Ensures that <textarea> does not scroll with added characters.  Since a
+            // <textarea> does not expand to fit its content, appending the pressed character to the
+            // end of the original (non-editable) selector element will ensure that the <textarea>
+            // will be large enough to fit the selector without scrolling.
+            this._selectorElement.append(String.fromCharCode(event.keyCode));
+        }
+    }
+
+    _handleInput(event)
+    {
+        this._selectorElement.textContent = this._selectorInput.value;
+
+        this._highlightNodesWithSelector();
+    }
+
+    _handleBlur()
+    {
+        this._hideDOMNodeHighlight();
+
+        let newSelectorText = this._currentSelectorText.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 = WebInspector.UIString("The selector “%s” is invalid.\nClick to revert to the previous selector.").format(this._selectorElement.textContent.trim());
+            this._selectorInput.title = WebInspector.UIString("Using previous selector “%s”").format(this._style.ownerRule.selectorText);
+            return;
+        }
+
+        this._iconElement.title = this._ruleDisabled ? WebInspector.UIString("Uncomment All Properties") : WebInspector.UIString("Comment All Properties");
+        this._selectorInput.title = "";
+    }
+
+    _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.PseudoElementSelectorStyleClassName = "pseudo-element-selector";
+
+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..191749cc4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js
@@ -0,0 +1,1728 @@
+/*
+ * 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.View
+{
+    constructor(delegate, style)
+    {
+        super();
+
+        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._propertyVisibilityMode = WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.ShowAll;
+        this._showsImplicitProperties = true;
+        this._alwaysShowPropertyNames = {};
+        this._filterResultPropertyNames = null;
+        this._sortProperties = false;
+        this._hasActiveInlineSwatchEditor = false;
+
+        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;
+        this._shownProperties = [];
+    }
+
+    // Public
+
+    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 shownProperties() { return this._shownProperties; }
+
+    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 propertyVisibilityMode() { return this._propertyVisibilityMode; }
+    set propertyVisibilityMode(propertyVisibilityMode)
+    {
+        if (this._propertyVisibilityMode === propertyVisibilityMode)
+            return;
+
+        this._propertyVisibilityMode = propertyVisibilityMode;
+
+        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();
+    }
+
+    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
+
+    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();
+    }
+
+    layout()
+    {
+        this._codeMirror.refresh();
+    }
+
+    // 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 = WebInspector.CSSStyleDeclarationTextEditor.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 += WebInspector.CSSStyleDeclarationTextEditor.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)
+    {
+        console.assert(!this._hasActiveInlineSwatchEditor, "We should never be recreating markers when we an active inline swatch editor.");
+
+        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.
+                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((lineHandler) => {
+                    this._createCommentedCheckboxMarker(lineHandler);
+                });
+            }
+
+            // 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; */
+        let commentedPropertyRegex = /\/\*\s*[-\w]+\s*\:\s*(?:(?:\".*\"|url\(.+\)|[^;])\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.ValueChanged, this._inlineSwatchValueChanged, this);
+            swatch.addEventListener(WebInspector.InlineSwatch.Event.Activated, this._inlineSwatchActivated, this);
+            swatch.addEventListener(WebInspector.InlineSwatch.Event.Deactivated, this._inlineSwatchDeactivated, 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);
+            });
+
+            // Look for spring strings and add swatches in front of them.
+            createCodeMirrorSpringTextMarkers(this._codeMirror, range, (marker, spring, springString) => {
+                let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Spring, spring, this._codeMirror.getOption("readOnly"));
+                createSwatch.call(this, swatch, marker, spring, springString);
+            });
+
+            // Look for CSS variables and add swatches in front of them.
+            createCodeMirrorVariableTextMarkers(this._codeMirror, range, (marker, variable, variableString) => {
+                const dontCreateIfMissing = true;
+                let variableProperty = this._style.nodeStyles.computedStyle.propertyForName(variableString, dontCreateIfMissing);
+                if (!variableProperty)
+                    return;
+
+                let trimmedValue = variableProperty.value.trim();
+                let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Variable, trimmedValue, this._codeMirror.getOption("readOnly"));
+                createSwatch.call(this, swatch, marker, variableProperty, trimmedValue);
+            });
+        }
+
+        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("Unsupported property “%s”").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)
+    {
+        let properties = onlyVisibleProperties ? this._style.visibleProperties : this._style.properties;
+
+        let filterFunction = (property) => property; // Identity function.
+        if (this._filterResultPropertyNames) {
+            filterFunction = (property) => {
+                if (!property.variable && this._propertyVisibilityMode === WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideNonVariables)
+                    return false;
+
+                if (property.variable && this._propertyVisibilityMode === WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideVariables)
+                    return false;
+
+                if (property.implicit && !this._showsImplicitProperties)
+                    return false;
+
+                if (!(property.name in this._filterResultPropertyNames))
+                    return false;
+
+                return true;
+            };
+        } else if (!onlyVisibleProperties) {
+            // Filter based on options only when all properties are used.
+            filterFunction = (property) => {
+                switch (this._propertyVisibilityMode) {
+                case WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideNonVariables:
+                    if (!property.variable)
+                        return false;
+
+                    break;
+                case WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideVariables:
+                    if (property.variable)
+                        return false;
+
+                    break;
+
+                case WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.ShowAll:
+                    break;
+
+                default:
+                    console.error("Invalid property visibility mode");
+                    break;
+                }
+
+                return !property.implicit || this._showsImplicitProperties || property.canonicalName in this._alwaysShowPropertyNames;
+            };
+        }
+
+        properties = properties.filter(filterFunction);
+        if (this._sortProperties)
+            properties.sort((a, b) => a.name.localeCompare(b.name));
+
+        this._shownProperties = properties;
+
+        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));
+    }
+
+    _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()
+        {
+            // 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));
+    }
+
+    _inlineSwatchActivated()
+    {
+        this._hasActiveInlineSwatchEditor = true;
+    }
+
+    _inlineSwatchDeactivated()
+    {
+        this._hasActiveInlineSwatchEditor = false;
+    }
+
+    _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;
+
+        if (this._hasActiveInlineSwatchEditor)
+            return;
+
+        // Don't try to update the document after just modifying a swatch.
+        if (this._ignoreNextPropertiesChanged) {
+            this._ignoreNextPropertiesChanged = false;
+            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()
+    {
+        let indentString = WebInspector.indentString();
+        let builder = new FormatterContentBuilder(indentString);
+        let formatter = new WebInspector.Formatter(this._codeMirror, builder);
+        let start = {line: 0, ch: 0};
+        let 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;
+
+            this._linePrefixWhitespace = WebInspector.indentString();
+
+            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.PropertyVisibilityMode = {
+    ShowAll: Symbol("variable-visibility-show-all"),
+    HideVariables: Symbol("variable-visibility-hide-variables"),
+    HideNonVariables: Symbol("variable-visibility-hide-non-variables"),
+};
+
+WebInspector.CSSStyleDeclarationTextEditor.PrefixWhitespace = "\n";
+WebInspector.CSSStyleDeclarationTextEditor.SuffixWhitespace = "\n";
+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..019d9b3dd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
@@ -0,0 +1,200 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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: calc(var(--navigation-bar-height) - 1px);
+}
+
+.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;
+    z-index: 1;
+    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;
+    white-space: nowrap;
+    -webkit-appearance: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color-hover);
+}
+
+.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: 75px;
+    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..797a0f218
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js
@@ -0,0 +1,454 @@
+/*
+ * 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._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
+        this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel(this);
+        this._visualStyleDetailsPanel = new WebInspector.VisualStyleDetailsPanel(this);
+
+        this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._visualStyleDetailsPanel];
+        this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo, this._visualStyleDetailsPanel.navigationInfo];
+
+        this._lastSelectedPanelSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationInfo.identifier);
+        this._classListContainerToggledSetting = new WebInspector.Setting("class-list-container-toggled", false);
+
+        this._initiallySelectedPanel = this._panelMatchingIdentifier(this._lastSelectedPanelSetting.value) || this._rulesStyleDetailsPanel;
+
+        this._navigationItem = new WebInspector.ScopeRadioButtonNavigationItem(this.identifier, this.displayName, this._panelNavigationInfo, this._initiallySelectedPanel.navigationInfo);
+        this._navigationItem.addEventListener(WebInspector.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged, this._handleSelectedItemChanged, this);
+
+        this._forcedPseudoClassCheckboxes = {};
+    }
+
+    // Public
+
+    supportsDOMNode(nodeToInspect)
+    {
+        return nodeToInspect.nodeType() === Node.ELEMENT_NODE;
+    }
+
+    visibilityDidChange()
+    {
+        super.visibilityDidChange();
+
+        if (!this._selectedPanel)
+            return;
+
+        if (!this.visible) {
+            this._selectedPanel.hidden();
+            return;
+        }
+
+        this._updateNoForcedPseudoClassesScrollOffset();
+
+        this._selectedPanel.shown();
+        this._selectedPanel.markAsNeedsRefresh(this.domNode);
+    }
+
+    computedStyleDetailsPanelShowProperty(property)
+    {
+        this._rulesStyleDetailsPanel.scrollToSectionAndHighlightProperty(property);
+        this._switchPanels(this._rulesStyleDetailsPanel);
+
+        this._navigationItem.selectedItemIdentifier = this._lastSelectedPanelSetting.value;
+    }
+
+    // Protected
+
+    layout()
+    {
+        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();
+    }
+
+    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);
+    }
+
+    initialLayout()
+    {
+        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.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
+        this._rulesStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
+
+        console.assert(this._initiallySelectedPanel, "Should have an initially selected panel.");
+
+        this._switchPanels(this._initiallySelectedPanel);
+        this._initiallySelectedPanel = null;
+
+        let optionsContainer = this.element.createChild("div", "options-container");
+
+        let newRuleButton = optionsContainer.createChild("img", "new-rule");
+        newRuleButton.title = WebInspector.UIString("Add 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._styleSheetAddedOrRemoved, this);
+        WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetRemoved, this._styleSheetAddedOrRemoved, this);
+
+        if (this._classListContainerToggledSetting.value)
+            this._classToggleButtonClicked();
+    }
+
+    sizeDidChange()
+    {
+        super.sizeDidChange();
+
+        this._updateNoForcedPseudoClassesScrollOffset();
+
+        if (this._selectedPanel)
+            this._selectedPanel.sizeDidChange();
+    }
+
+    // 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._lastSelectedPanelSetting.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;
+        this._classListContainerToggledSetting.value = !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.domNode.toggleClass(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;
+        classNameTitle.draggable = true;
+        classNameTitle.addEventListener("dragstart", (event) => {
+            event.dataTransfer.setData(WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType, className);
+            event.dataTransfer.effectAllowed = "copy";
+        });
+
+        let classNameToggleChanged = (event) => {
+            this.domNode.toggleClass(className, classNameToggle.checked);
+            classToggledMap.set(className, classNameToggle.checked);
+        };
+
+        classNameToggle.addEventListener("click", classNameToggleChanged);
+        classNameTitle.addEventListener("click", (event) => {
+            classNameToggle.checked = !classNameToggle.checked;
+            classNameToggleChanged();
+        });
+
+        this._classListContainer.appendChild(classNameContainer);
+    }
+
+    _filterDidChange()
+    {
+        this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
+
+        this._selectedPanel.filterDidChange(this._filterBar);
+    }
+
+    _styleSheetAddedOrRemoved()
+    {
+        this.needsLayout();
+    }
+};
+
+WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 30; // Default height of the forced pseudo classes container. Updated in sizeDidChange.
+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");
+WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType = "text/classname";
diff --git a/Source/WebInspectorUI/UserInterface/Views/CallFrameIcons.css b/Source/WebInspectorUI/UserInterface/Views/CallFrameIcons.css
new file mode 100644
index 000000000..236a07c63
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameIcons.css
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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);
+}
+
+.tail-deleted .icon {
+    content: url(../Images/TailDeletedFunction.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css
new file mode 100644
index 000000000..e7fdeefb2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css
@@ -0,0 +1,85 @@
+/*
+ * 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 .item.call-frame .status {
+    position: absolute;
+    float: none;
+    left: 1px;
+    margin: 0;
+}
+
+.tree-outline .item.call-frame .status > .status-image {
+    width: 17px;
+    height: 17px;
+    fill: var(--border-color);
+}
+
+.tree-outline .item.call-frame.selected .status > .status-image {
+    fill: var(--border-color-dark);
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.call-frame.selected .status > .status-image {
+    fill: var(--selected-foreground-color);
+}
+
+.tree-outline .item.call-frame.async-boundary {
+    cursor: default;
+    color: var(--text-color-gray-medium);
+}
+
+.tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary {
+    padding-left: 5px;
+}
+
+.tree-outline .item.call-frame.async-boundary .icon {
+    float: none;
+    display: inline-block;
+    margin-left: 0 !important;
+}
+
+.tree-outline .item.call-frame.async-boundary::before,
+.tree-outline .item.call-frame.async-boundary::after {
+    content: "";
+    display: inline-block;
+    height: 0;
+    margin-top: 2px;
+    vertical-align: middle;
+    border-bottom: solid 0.5px var(--border-color);
+}
+
+.tree-outline .item.call-frame.async-boundary::after {
+    width: 100%;
+    margin-left: 2px;
+}
+
+.tree-outline .item.call-frame.async-boundary::before {
+    width: 30px;
+    margin-left: -5px;
+    margin-right: 1px;
+}
+
+.tree-outline.single-thread .item.call-frame.async-boundary::before {
+    width: 20px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js
new file mode 100644
index 000000000..50ed877ba
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js
@@ -0,0 +1,108 @@
+/*
+ * 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, isAsyncBoundaryCallFrame)
+    {
+        console.assert(callFrame instanceof WebInspector.CallFrame);
+
+        let className = WebInspector.CallFrameView.iconClassNameForCallFrame(callFrame);
+        let title = callFrame.functionName || WebInspector.UIString("(anonymous function)");
+
+        super(["call-frame", className], title, null, callFrame, false);
+
+        this._callFrame = callFrame;
+        this._isActiveCallFrame = false;
+
+         if (isAsyncBoundaryCallFrame) {
+            this.addClassName("async-boundary");
+            this.selectable = false;
+         }
+
+        if (this._callFrame.nativeCode || !this._callFrame.sourceCodeLocation) {
+            this.subtitle = "";
+            return;
+        }
+
+        let displayScriptURL = this._callFrame.sourceCodeLocation.displaySourceCode.url;
+        if (displayScriptURL) {
+            this.subtitle = document.createElement("span");
+            this._callFrame.sourceCodeLocation.populateLiveDisplayLocationString(this.subtitle, "textContent");
+            // Set the tooltip on the entire tree element in onattach, once the element is created.
+            this.tooltipHandledSeparately = true;
+        }
+    }
+
+    // Public
+
+    get callFrame() { return this._callFrame; }
+    get isActiveCallFrame() { return this._isActiveCallFrame; }
+
+    set isActiveCallFrame(x)
+    {
+        if (this._isActiveCallFrame === x)
+            return;
+
+        this._isActiveCallFrame = x;
+        this._updateStatus();
+    }
+
+    // Protected
+
+    onattach()
+    {
+        super.onattach();
+
+        console.assert(this.element);
+
+        if (this.tooltipHandledSeparately) {
+            let tailCallSuffix = "";
+            if (this._callFrame.isTailDeleted)
+                tailCallSuffix = " " + WebInspector.UIString("(Tail Call)");
+            let tooltipPrefix = this.mainTitle + tailCallSuffix + "\n";
+            this._callFrame.sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
+        }
+
+        this._updateStatus();
+    }
+
+    // Private
+
+    _updateStatus()
+    {
+        if (!this.element)
+            return;
+
+        if (!this._isActiveCallFrame) {
+            this.status = null;
+            return;
+        }
+
+        if (!this._statusImageElement)
+            this._statusImageElement = useSVGSymbol("Images/ActiveCallFrame.svg", "status-image");
+        this.status = this._statusImageElement;
+    }
+};
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..e7ac8543a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameView.js
@@ -0,0 +1,98 @@
+/*
+ * 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.isTailDeleted)
+            return WebInspector.CallFrameView.TailDeletedIcon;
+
+        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";
+WebInspector.CallFrameView.TailDeletedIcon = "tail-deleted";
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..f053ad282
--- /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 || 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..7177bddf3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ClusterContentView.js
@@ -0,0 +1,257 @@
+/*
+ * 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 super.supportsSplitContentBrowser;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._contentViewContainer.shown();
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        this._contentViewContainer.hidden();
+    }
+
+    closed()
+    {
+        super.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 scrollableElements()
+    {
+        if (!this._contentViewContainer.currentContentView)
+            return [];
+        return this._contentViewContainer.currentContentView.scrollableElements;
+    }
+
+    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..5542b9547
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js
@@ -0,0 +1,682 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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);
+    });
+
+    const maximumNeighboringWhitespaceCharacters = 16;
+    CodeMirror.defineOption("showWhitespaceCharacters", false, function(cm, value, old) {
+        if (!value || (old && old !== CodeMirror.Init)) {
+            cm.removeOverlay("whitespace");
+            return;
+        }
+
+        cm.addOverlay({
+            name: "whitespace",
+            token(stream) {
+                if (stream.peek() === " ") {
+                    let count = 0;
+                    while (count < maximumNeighboringWhitespaceCharacters && stream.peek() === " ") {
+                        ++count;
+                        stream.next();
+                    }
+                    return `whitespace whitespace-${count}`;
+                }
+
+                while (!stream.eol() && stream.peek() !== " ")
+                    stream.next();
+
+                return null;
+            }
+        });
+    });
+
+    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;
+    });
+
+    let mac = WebInspector.Platform.name === "mac";
+
+    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",
+        "Cmd-D": "selectNextOccurrence",
+        "Shift-Tab": "indentLess",
+        fallthrough: mac ? "macDefault" : "pcDefault"
+    };
+
+    // 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", "application/vnd.api+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 (let 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 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..97838e297
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorEditor.js
@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2015-2017 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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(element, options)
+    {
+        if (options.lineSeparator === undefined)
+            options.lineSeparator = "\n";
+
+        // CodeMirror's manual scrollbar positioning results in double scrollbars,
+        // nor does it handle braces and brackets well, so default to using LTR.
+        // Clients can override this if custom layout for RTL is available.
+        element.setAttribute("dir", "ltr");
+
+        let codeMirror = new CodeMirror(element, options);
+
+        // Override some Mac specific keybindings.
+        if (WebInspector.Platform.name === "mac") {
+            codeMirror.addKeyMap({
+                "Home": () => { codeMirror.scrollIntoView({line: 0, ch: 0}); },
+                "End": () => { codeMirror.scrollIntoView({line: codeMirror.lineCount() - 1, ch: null}); },
+            });
+        }
+
+        // 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..fba5d74d1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorFormatters.js
@@ -0,0 +1,543 @@
+/*
+ * 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 === "}";
+            if (content === "while" && lastContent === "}")
+                return state._jsPrettyPrint.lastContentBeforeBlock === "do";
+            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 === "}";
+            if (content === "while" && lastContent === "}")
+                return state._jsPrettyPrint.lastContentBeforeBlock === "do";
+            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.
+                lastContentBeforeBlock: undefined, // Used to detect if this was a do/while.
+            };
+        }
+
+        // - 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, lastContentBeforeBlock: lastContent};
+                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:
+        //     - 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 {
+            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;
+                state._jsPrettyPrint.lastContentBeforeBlock = savedState.lastContentBeforeBlock;
+            } 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..e219eed1d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css
@@ -0,0 +1,183 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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, Menlo, Monaco, monospace;
+    font-variant-numeric: tabular-nums;
+    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;
+}
+
+.CodeMirror .cm-tab {
+    position: relative;
+}
+
+.CodeMirror .cm-invalidchar {
+    display: none;
+}
+
+.show-whitespace-characters .CodeMirror .cm-tab::before {
+    position: absolute;
+    width: 90%;
+    bottom: 50%;
+    left: 5%;
+    content: "";
+    border-bottom: 1px solid hsl(0, 0%, 70%);
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace::before {
+    position: absolute;
+    pointer-events: none;
+    color: hsl(0, 0%, 70%);
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-1::before {
+    content: "\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-2::before {
+    content: "\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-3::before {
+    content: "\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-4::before {
+    content: "\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-5::before {
+    content: "\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-6::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-7::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-8::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-9::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-10::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-11::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-12::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-13::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-14::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-15::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-whitespace-characters .CodeMirror .cm-whitespace-16::before {
+    content: "\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7\00B7";
+}
+
+.show-invalid-characters .CodeMirror .cm-invalidchar {
+    display: initial;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js
new file mode 100644
index 000000000..bd309faf6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js
@@ -0,0 +1,209 @@
+/*
+ * 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;
+            }
+
+            let valueString = match[1];
+            let value = WebInspector[type] ? WebInspector[type].fromString(valueString) : null;
+            if (WebInspector[type] && !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);
+}
+
+function createCodeMirrorSpringTextMarkers(codeMirror, range, callback)
+{
+    const springRegex = /(spring\([^)]+\))/g;
+    return createCodeMirrorTextMarkers("Spring", springRegex, null, codeMirror, range, callback);
+}
+
+function createCodeMirrorVariableTextMarkers(codeMirror, range, callback)
+{
+    const variableRegex = /var\((--[\w-]+)\)/g;
+    return createCodeMirrorTextMarkers("Variable", variableRegex, null, codeMirror, range, callback);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.css b/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.css
new file mode 100644
index 000000000..6055f72ca
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.css
@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+.content-view.collection {
+    display: flex;
+    flex-wrap: wrap;
+    overflow-y: scroll !important;
+}
+
+.content-view.collection > .content-view {
+    flex-grow: 1;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js b/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js
new file mode 100644
index 000000000..2b06b3fb2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js
@@ -0,0 +1,192 @@
+/*
+ * 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.CollectionContentView = class CollectionContentView extends WebInspector.ContentView
+{
+    constructor(collection)
+    {
+        console.assert(collection instanceof WebInspector.Collection);
+
+        super(collection);
+
+        this.representedObject.addEventListener(WebInspector.Collection.Event.ItemAdded, this._handleItemAdded, this);
+        this.representedObject.addEventListener(WebInspector.Collection.Event.ItemRemoved, this._handleItemRemoved, this);
+
+        this._contentViewMap = new WeakMap;
+        this._handleClickMap = new WeakMap;
+
+        this._contentViewConstructor = null;
+        let title = "";
+        switch (this.representedObject.typeVerifier) {
+        case WebInspector.Collection.TypeVerifier.Frame:
+            title = WebInspector.UIString("Frames");
+            break;
+
+        case WebInspector.Collection.TypeVerifier.ContentFlow:
+            title = WebInspector.UIString("Flows");
+            break;
+
+        case WebInspector.Collection.TypeVerifier.Script:
+            title = WebInspector.UIString("Extra Scripts");
+            break;
+
+        case WebInspector.Collection.TypeVerifier.Resource:
+            title = WebInspector.UIString("Resource");
+            break;
+
+        case WebInspector.ResourceCollection.TypeVerifier.Document:
+            title = WebInspector.Resource.displayNameForType(WebInspector.Resource.Type.Document, true);
+            break;
+
+        case WebInspector.ResourceCollection.TypeVerifier.Stylesheet:
+            title = WebInspector.Resource.displayNameForType(WebInspector.Resource.Type.Stylesheet, true);
+            break;
+
+        case WebInspector.ResourceCollection.TypeVerifier.Image:
+            this._contentViewConstructor = WebInspector.ImageResourceContentView;
+            title = WebInspector.Resource.displayNameForType(WebInspector.Resource.Type.Image, true);
+            break;
+
+        case WebInspector.ResourceCollection.TypeVerifier.Font:
+            title = WebInspector.Resource.displayNameForType(WebInspector.Resource.Type.Font, true);
+            break;
+
+        case WebInspector.ResourceCollection.TypeVerifier.Script:
+            title = WebInspector.Resource.displayNameForType(WebInspector.Resource.Type.Script, true);
+            break;
+
+        case WebInspector.ResourceCollection.TypeVerifier.XHR:
+            title = WebInspector.Resource.displayNameForType(WebInspector.Resource.Type.XHR, true);
+            break;
+
+        case WebInspector.ResourceCollection.TypeVerifier.Fetch:
+            title = WebInspector.Resource.displayNameForType(WebInspector.Resource.Type.Fetch, true);
+            break;
+
+        case WebInspector.ResourceCollection.TypeVerifier.WebSocket:
+            title = WebInspector.Resource.displayNameForType(WebInspector.Resource.Type.WebSocket, true);
+            break;
+
+        case WebInspector.ResourceCollection.TypeVerifier.Other:
+            title = WebInspector.Resource.displayNameForType(WebInspector.Resource.Type.Other, true);
+            break;
+        }
+
+        this._contentPlaceholder = new WebInspector.TitleView(title);
+
+        this.element.classList.add("collection");
+    }
+
+     // Public
+
+    initialLayout()
+    {
+        let items = this.representedObject.items;
+        if (this._contentViewConstructor && items.size) {
+            for (let item of items)
+                this._addContentViewForItem(item);
+        } else
+            this.addSubview(this._contentPlaceholder);
+    }
+
+     // Private
+
+    _addContentViewForItem(item)
+    {
+        if (!this._contentViewConstructor)
+            return;
+
+        if (this._contentPlaceholder.parentView)
+            this.removeSubview(this._contentPlaceholder);
+
+        let contentView = new this._contentViewConstructor(item);
+
+        contentView.addEventListener(WebInspector.ResourceContentView.Event.ContentError, this._handleContentError, this);
+
+        let handleClick = (event) => {
+            if (event.button !== 0 || event.ctrlKey)
+                return;
+
+            WebInspector.showRepresentedObject(item);
+        };
+        this._handleClickMap.set(item, handleClick);
+        contentView.element.addEventListener("click", handleClick);
+
+        contentView.element.title = WebInspector.displayNameForURL(item.url, item.urlComponents);
+
+        this.addSubview(contentView);
+        this._contentViewMap.set(item, contentView);
+    }
+
+    _removeContentViewForItem(item)
+    {
+        if (!this._contentViewConstructor)
+            return;
+
+        let contentView = this._contentViewMap.get(item);
+        console.assert(contentView);
+        if (!contentView)
+            return;
+
+        this.removeSubview(contentView);
+        this._contentViewMap.delete(item);
+
+        contentView.removeEventListener(null, null, this);
+
+        let handleClick = this._handleClickMap.get(item);
+        console.assert(handleClick);
+        if (handleClick) {
+            contentView.element.removeEventListener("click", handleClick);
+            this._handleClickMap.delete(item);
+        }
+
+        if (!this.representedObject.resources.length)
+            this.addSubview(this._contentPlaceholder);
+    }
+
+    _handleItemAdded(event)
+    {
+        let item = event.data.item;
+        if (!item)
+            return;
+
+        this._addContentViewForItem(item);
+    }
+
+    _handleItemRemoved(event)
+    {
+        let item = event.data.item;
+        if (!item)
+            return;
+
+        this._removeContentViewForItem(item);
+    }
+
+    _handleContentError(event)
+    {
+        if (event && event.target)
+            this._removeContentViewForItem(event.target.representedObject);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css b/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css
new file mode 100644
index 000000000..bf3002694
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ColorPicker.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.
+ */
+
+.color-picker {
+    position: relative;
+    width: 256px;
+    height: 236px;
+    padding: 5px;
+}
+
+.color-picker.hide-inputs {
+    height: 210px;
+}
+
+.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;
+}
+
+.color-picker > .color-inputs {
+    display: flex;
+    justify-content: space-between;
+    top: 212px;
+    right: 0;
+    left: 0;
+}
+
+.color-picker > .color-inputs > div {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 0 4px;
+}
+
+.color-picker > .color-inputs > div[hidden] {
+    display: none;
+}
+
+.color-picker > .color-inputs input {
+    width: 100%;
+    margin: 0 0.25em;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js b/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
new file mode 100644
index 000000000..f4d2d2f06
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
@@ -0,0 +1,337 @@
+/*
+ * 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");
+
+        let colorInputsContainerElement = document.createElement("div");
+        colorInputsContainerElement.classList.add("color-inputs");
+
+        function createColorInput(label, {min: min = 0, max: max = 100, step: step = 1, units} = {}) {
+            let containerElement = colorInputsContainerElement.createChild("div");
+
+            containerElement.append(label);
+
+            let numberInputElement = containerElement.createChild("input");
+            numberInputElement.type = "number";
+            numberInputElement.min = min;
+            numberInputElement.max = max;
+            numberInputElement.step = step;
+            numberInputElement.addEventListener("input", this._handleColorInputInput.bind(this));
+
+            if (units && units.length)
+                containerElement.append(units);
+
+            return {containerElement, numberInputElement};
+        }
+
+        this._colorInputs = new Map([
+            ["R", createColorInput.call(this, "R", {max: 255})],
+            ["G", createColorInput.call(this, "G", {max: 255})],
+            ["B", createColorInput.call(this, "B", {max: 255})],
+            ["H", createColorInput.call(this, "H", {max: 360})],
+            ["S", createColorInput.call(this, "S", {units: "%"})],
+            ["L", createColorInput.call(this, "L", {units: "%"})],
+            ["A", createColorInput.call(this, "A"), {max: 1, step: 0.01}]
+        ]);
+
+        this._element = document.createElement("div");
+        this._element.classList.add("color-picker");
+
+        this._element.appendChild(this._colorWheel.element);
+        this._element.appendChild(this._brightnessSlider.element);
+        this._element.appendChild(this._opacitySlider.element);
+        this._element.appendChild(colorInputsContainerElement);
+
+        this._opacity = 0;
+        this._opacityPattern = "url(Images/Checkers.svg)";
+
+        this._color = WebInspector.Color.fromString("white");
+
+        this._dontUpdateColor = false;
+
+        this._enableColorComponentInputs = true;
+    }
+
+    // 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)
+    {
+        console.assert(color instanceof WebInspector.Color);
+
+        this._dontUpdateColor = true;
+
+        let formatChanged = !this._color || this._color.format !== color.format;
+
+        this._color = color;
+
+        this._colorWheel.tintedColor = this._color;
+        this._brightnessSlider.value = this._colorWheel.brightness;
+
+        this._opacitySlider.value = this._color.alpha;
+        this._updateSliders(this._colorWheel.rawColor, this._color);
+
+        this._showColorComponentInputs();
+
+        if (formatChanged)
+            this._handleFormatChange();
+
+        this._dontUpdateColor = false;
+    }
+
+    set enableColorComponentInputs(value)
+    {
+        this._enableColorComponentInputs = value;
+
+        this._showColorComponentInputs();
+    }
+
+    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;
+
+        let opacity = Math.round(this._opacity * 100) / 100;
+
+        let format = this._color.format;
+        let components = null;
+        if (format === WebInspector.Color.Format.HSL || format === WebInspector.Color.Format.HSLA) {
+            components = this._colorWheel.tintedColor.hsl.concat(opacity);
+            if (opacity !== 1)
+                format = WebInspector.Color.Format.HSLA;
+        } else {
+            components = this._colorWheel.tintedColor.rgb.concat(opacity);
+            if (opacity !== 1 && format === WebInspector.Color.Format.RGB)
+                format = WebInspector.Color.Format.RGBA;
+        }
+
+        let formatChanged = this._color.format === format;
+
+        this._color = new WebInspector.Color(format, components);
+
+        this._showColorComponentInputs();
+
+        this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
+
+        if (formatChanged)
+            this._handleFormatChange();
+    }
+
+    _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 + ")";
+    }
+
+    _handleFormatChange()
+    {
+        this._element.classList.toggle("hide-inputs", this._color.format !== WebInspector.Color.Format.Keyword
+            && this._color.format !== WebInspector.Color.Format.RGB
+            && this._color.format !== WebInspector.Color.Format.RGBA
+            && this._color.format !== WebInspector.Color.Format.HEX
+            && this._color.format !== WebInspector.Color.Format.ShortHEX
+            && this._color.format !== WebInspector.Color.Format.HEXAlpha
+            && this._color.format !== WebInspector.Color.Format.ShortHEXAlpha
+            && this._color.format !== WebInspector.Color.Format.HSL
+            && this._color.format !== WebInspector.Color.Format.HSLA);
+
+        this.dispatchEventToListeners(WebInspector.ColorPicker.Event.FormatChanged);
+    }
+
+    _showColorComponentInputs()
+    {
+        for (let {containerElement} of this._colorInputs.values())
+            containerElement.hidden = true;
+
+        if (!this._enableColorComponentInputs)
+            return;
+
+        function updateColorInput(key, value) {
+            let {containerElement, numberInputElement} = this._colorInputs.get(key);
+            numberInputElement.value = value;
+            containerElement.hidden = false;
+        }
+
+        switch (this._color.format) {
+        case WebInspector.Color.Format.RGB:
+        case WebInspector.Color.Format.RGBA:
+        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:
+            var [r, g, b] = this._color.rgb;
+            updateColorInput.call(this, "R", r);
+            updateColorInput.call(this, "G", g);
+            updateColorInput.call(this, "B", b);
+            break;
+
+        case WebInspector.Color.Format.HSL:
+        case WebInspector.Color.Format.HSLA:
+            var [h, s, l] = this._color.hsl;
+            updateColorInput.call(this, "H", h);
+            updateColorInput.call(this, "S", s);
+            updateColorInput.call(this, "L", l);
+            break;
+
+        default:
+            return;
+        }
+
+        if ((this._color.format === WebInspector.Color.Format.Keyword && this._color.alpha !== 1)
+            || this._color.format === WebInspector.Color.Format.RGBA
+            || this._color.format === WebInspector.Color.Format.HSLA
+            || this._color.format === WebInspector.Color.Format.HEXAlpha
+            || this._color.format === WebInspector.Color.Format.ShortHEXAlpha) {
+            updateColorInput.call(this, "A", this._color.alpha);
+        }
+    }
+
+    _handleColorInputInput(event)
+    {
+        if (!this._enableColorComponentInputs) {
+            WebInspector.reportInternalError("Input event fired for disabled color component input");
+            return;
+        }
+
+        let r = this._colorInputs.get("R").numberInputElement.value;
+        let g = this._colorInputs.get("G").numberInputElement.value;
+        let b = this._colorInputs.get("B").numberInputElement.value;
+        let h = this._colorInputs.get("H").numberInputElement.value;
+        let s = this._colorInputs.get("S").numberInputElement.value;
+        let l = this._colorInputs.get("L").numberInputElement.value;
+        let a = this._colorInputs.get("A").numberInputElement.value;
+
+        let colorString = "";
+        let oldFormat = this._color.format;
+
+        switch (oldFormat) {
+        case WebInspector.Color.Format.RGB:
+        case WebInspector.Color.Format.HEX:
+        case WebInspector.Color.Format.ShortHEX:
+        case WebInspector.Color.Format.Keyword:
+            colorString = `rgb(${r}, ${g}, ${b})`;
+            break;
+
+        case WebInspector.Color.Format.RGBA:
+        case WebInspector.Color.Format.HEXAlpha:
+        case WebInspector.Color.Format.ShortHEXAlpha:
+            colorString = `rgba(${r}, ${g}, ${b}, ${a})`;
+            break;
+
+        case WebInspector.Color.Format.HSL:
+            colorString = `hsl(${h}, ${s}%, ${l}%)`;
+            break;
+
+        case WebInspector.Color.Format.HSLA:
+            colorString = `hsla(${h}, ${s}%, ${l}%, ${a})`;
+            break;
+
+        default:
+            WebInspector.reportInternalError(`Input event fired for invalid color format "${this._color.format}"`);
+            return;
+        }
+
+        this.color = WebInspector.Color.fromString(colorString);
+        this._color.format = oldFormat;
+
+        this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
+    }
+};
+
+WebInspector.ColorPicker.Event = {
+    ColorChanged: "css-color-picker-color-changed",
+    FormatChanged: "css-color-picker-format-changed",
+};
diff --git a/Source/WebInspectorUI/UserInterface/ColorWheel.css b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css
index 541663d0b..541663d0b 100644
--- a/Source/WebInspectorUI/UserInterface/ColorWheel.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js
new file mode 100644
index 000000000..d53d9f5c2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js
@@ -0,0 +1,282 @@
+/*
+ * 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;
+
+        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..0e7a238c0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
@@ -0,0 +1,290 @@
+/*
+ * 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);
+
+        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");
+
+        this._containerRegionsDataGrid.updateLayoutIfNeeded();
+    }
+
+    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._variablesTextEditor.style = this.nodeStyles.computedStyle;
+        this._refreshFlowDetails(this.nodeStyles.node);
+        this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
+
+        super.refresh();
+
+        this._variablesSection.element.classList.toggle("hidden", !this._variablesTextEditor.shownProperties.length);
+    }
+
+    filterDidChange(filterBar)
+    {
+        let filterText = filterBar.filters.text;
+        this._propertiesTextEditor.removeNonMatchingProperties(filterText);
+        this._variablesTextEditor.removeNonMatchingProperties(filterText);
+    }
+
+    // Protected
+
+    initialLayout()
+    {
+        let 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.propertyVisibilityMode = WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideVariables;
+        this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
+        this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
+        this._propertiesTextEditor.sortProperties = true;
+
+        let propertiesRow = new WebInspector.DetailsSectionRow;
+        let propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
+        let propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
+        propertiesSection.addEventListener(WebInspector.DetailsSection.Event.CollapsedStateChanged, this._handlePropertiesSectionCollapsedStateChanged, this);
+
+        this.addSubview(this._propertiesTextEditor);
+
+        propertiesRow.element.appendChild(this._propertiesTextEditor.element);
+
+        this._variablesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
+        this._variablesTextEditor.propertyVisibilityMode = WebInspector.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideNonVariables;
+        this._variablesTextEditor.sortProperties = true;
+
+        let variablesRow = new WebInspector.DetailsSectionRow;
+        let variablesGroup = new WebInspector.DetailsSectionGroup([variablesRow]);
+        this._variablesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Variables"), [variablesGroup]);
+        this._variablesSection.addEventListener(WebInspector.DetailsSection.Event.CollapsedStateChanged, this._handleVariablesSectionCollapsedStateChanged, this);
+
+        this.addSubview(this._variablesTextEditor);
+
+        variablesRow.element.appendChild(this._variablesTextEditor.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"));
+
+        let 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"));
+
+        let 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");
+
+        let 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.headerVisible = false;
+
+        let containerRegionsRow = new WebInspector.DetailsSectionDataGridRow(this._containerRegionsDataGrid);
+        let 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._variablesSection.element);
+        this.element.appendChild(this._flowNamesSection.element);
+        this.element.appendChild(this._containerRegionsFlowSection.element);
+
+        this._resetFlowDetails();
+
+        this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
+
+        let boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
+        let boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
+
+        this.element.appendChild(boxModelSection.element);
+    }
+
+    // Private
+
+    _computedStyleShowAllCheckboxValueChanged(event)
+    {
+        let checked = this._computedStyleShowAllCheckbox.checked;
+        this._computedStyleShowAllSetting.value = checked;
+        this._propertiesTextEditor.showsImplicitProperties = checked;
+        this._propertiesTextEditor.updateLayout();
+    }
+
+    _handlePropertiesSectionCollapsedStateChanged(event)
+    {
+        if (event && event.data && !event.data.collapsed)
+            this._propertiesTextEditor.refresh();
+    }
+
+    _handleVariablesSectionCollapsedStateChanged(event)
+    {
+        if (event && event.data && !event.data.collapsed)
+            this._variablesTextEditor.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.showRepresentedObject(this._regionFlow);
+    }
+
+    _goToContentFlowArrowWasClicked()
+    {
+        WebInspector.showRepresentedObject(this._contentFlow, {nodeToSelect: 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..356f10ddc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleCommandView.js
@@ -0,0 +1,73 @@
+/*
+ * 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._className = className || "";
+    }
+
+    // Public
+
+    render()
+    {
+        this._element = document.createElement("div");
+        this._element.classList.add("console-user-command");
+        this._element.setAttribute("data-labelprefix", WebInspector.UIString("Input: "));
+
+        if (this._className)
+            this._element.classList.add(this._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;
+    }
+
+    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..547f4cc56
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
@@ -0,0 +1,285 @@
+/*
+ * 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: var(--selected-background-color);
+    color: var(--selected-foreground-color);
+    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: ' ';
+}
+
+.console-top-level-message .object-tree {
+    display: block;
+}
+
+.console-top-level-message .object-tree .object-tree {
+    display: inline-block;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js
new file mode 100644
index 000000000..0fa66f610
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js
@@ -0,0 +1,871 @@
+/*
+ * 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._repeatCount = message._repeatCount || 0;
+
+        // 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 = message.parameters;
+    }
+
+    // Public
+
+    render()
+    {
+        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;
+        }
+
+        // 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._renderRepeatCount();
+    }
+
+    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 (this._element)
+            this._renderRepeatCount();
+    }
+
+    _renderRepeatCount()
+    {
+        let count = this._repeatCount;
+
+        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") {
+                        var prefixedFormatString = WebInspector.UIString("Trace: %s").format(this._message.parameters[0].description);
+                        args = [prefixedFormatString].concat(this._message.parameters.slice(1));
+                    } 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") {
+                        var prefixedFormatString = WebInspector.UIString("Assertion Failed: %s").format(this._message.parameters[0].description);
+                        args = [prefixedFormatString].concat(this._message.parameters.slice(1));
+                    } 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 firstNonNativeNonAnonymousCallFrame = this._message.stackTrace.firstNonNativeNonAnonymousCallFrame;
+
+        var callFrame;
+        if (firstNonNativeNonAnonymousCallFrame) {
+            // JavaScript errors and console.* methods.
+            callFrame = firstNonNativeNonAnonymousCallFrame;
+        } else if (this._message.url && !this._shouldHideURL(this._message.url)) {
+            // CSS warnings have no stack traces.
+            callFrame = WebInspector.CallFrame.fromPayload(this._message.target, {
+                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, this._message.target);
+
+        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,
+            "proxy": 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(this._message.target, 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, token)
+        {
+            let value = typeof obj.value === "number" ? obj.value : obj.description;
+            return String.standardFormatters.f(value, token);
+        }
+
+        function integerFormatter(obj)
+        {
+            let value = typeof obj.value === "number" ? obj.value : obj.description;
+            return String.standardFormatters.d(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 || !rowPreview.propertyPreviews)
+                    continue;
+
+                var rowValue = {};
+                var maxColumnsToRender = 15;
+                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.inline = true;
+        dataGrid.variableHeightRows = true;
+
+        element.appendChild(dataGrid.element);
+
+        dataGrid.updateLayoutIfNeeded();
+
+        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..43179793e
--- /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: {name: mimeType, globalVars: true},
+            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..6fd4fcd4a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleSession.js
@@ -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.
+ * 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(data)
+    {
+        super();
+
+        this._hasMessages = false;
+
+        let element = document.createElement("div");
+        element.className = "console-session";
+
+        let header = document.createElement("div");
+        header.classList.add("console-session-header");
+
+        let headerText = "";
+        switch (data.newSessionReason) {
+        case WebInspector.ConsoleSession.NewSessionReason.PageReloaded:
+            headerText = WebInspector.UIString("Page reloaded at %s");
+            break;
+        case WebInspector.ConsoleSession.NewSessionReason.PageNavigated:
+            headerText = WebInspector.UIString("Page navigated at %s");
+            break;
+        case WebInspector.ConsoleSession.NewSessionReason.ConsoleCleared:
+            headerText = WebInspector.UIString("Console cleared at %s");
+            break;
+        default:
+            headerText = WebInspector.UIString("Console opened at %s");
+            break;
+        }
+
+        let timestamp = data.timestamp || Date.now();
+        header.textContent = headerText.format(new Date(timestamp).toLocaleTimeString());
+        element.append(header);
+
+        this.element = element;
+        this._messagesElement = element;
+    }
+
+    // Public
+
+    addMessageView(messageView)
+    {
+        var messageElement = messageView.element;
+        messageElement.classList.add(WebInspector.LogContentView.ItemWrapperStyleClassName);
+        this.append(messageElement);
+    }
+
+    append(messageOrGroupElement)
+    {
+        this._hasMessages = true;
+        this._messagesElement.append(messageOrGroupElement);
+    }
+
+    hasMessages()
+    {
+        return this._hasMessages;
+    }
+};
+
+WebInspector.ConsoleSession.NewSessionReason = {
+    PageReloaded: Symbol("Page reloaded"),
+    PageNavigated: Symbol("Page navigated"),
+    ConsoleCleared: Symbol("Console cleared"),
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js
new file mode 100644
index 000000000..e0ea30ed0
--- /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.GeneralTabBarItem(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..2f6189860
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.css
@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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;
+}
+
+.content-browser > .navigation-bar > .item {
+    height: 100%;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js b/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js
new file mode 100644
index 000000000..37c63ce8e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js
@@ -0,0 +1,513 @@
+/*
+ * 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, disableFindBanner)
+    {
+        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);
+
+        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);
+        }
+
+        if (!disableFindBanner) {
+            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);
+        }
+
+        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.
+    }
+
+    showFindBanner()
+    {
+        if (!this._findBanner)
+            return;
+
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        if (currentContentView.supportsCustomFindBanner) {
+            currentContentView.showCustomFindBanner();
+            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();
+
+        if (this._findBanner)
+            this._findBanner.enableKeyboardShortcuts();
+    }
+
+    hidden()
+    {
+        this._contentViewContainer.hidden();
+
+        if (this._findBanner)
+            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;
+        if (this._findBanner.searchQuery !== "")
+            currentContentView.performSearch(this._findBanner.searchQuery);
+    }
+
+    _findBannerDidHide(event)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.automaticallyRevealFirstSearchResult = false;
+        currentContentView.searchCleared();
+    }
+
+    _contentViewNumberOfSearchResultsDidChange(event)
+    {
+        if (!this._findBanner)
+            return;
+
+        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 currentContentView = this.currentContentView;
+        if (!currentContentView) {
+            this._removeAllNavigationItems();
+            this._currentContentViewNavigationItems = [];
+            return;
+        }
+
+        let previousItems = this._currentContentViewNavigationItems.filter((item) => !(item instanceof WebInspector.DividerNavigationItem));
+        let isUnchanged = Array.shallowEqual(previousItems, currentContentView.navigationItems);
+
+        if (isUnchanged)
+            return;
+
+        this._removeAllNavigationItems();
+
+        let navigationBar = this.navigationBar;
+        let insertionIndex = navigationBar.navigationItems.indexOf(this._dividingFlexibleSpaceNavigationItem) + 1;
+        console.assert(insertionIndex >= 0);
+
+        // Keep track of items we'll be adding to the navigation bar.
+        let 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) {
+                let 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;
+    }
+
+    _removeAllNavigationItems()
+    {
+        for (let navigationItem of this._currentContentViewNavigationItems)
+            this.navigationBar.removeNavigationItem(navigationItem);
+    }
+
+    _updateFindBanner(currentContentView)
+    {
+        if (!this._findBanner)
+            return;
+
+        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);
+        }
+    }
+
+    _dispatchCurrentRepresentedObjectsDidChangeEvent()
+    {
+        this._dispatchCurrentRepresentedObjectsDidChangeEvent.cancelDebounce();
+
+        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.soon._dispatchCurrentRepresentedObjectsDidChangeEvent();
+    }
+
+    _contentViewSupplementalRepresentedObjectsDidChange(event)
+    {
+        if (event.target !== this.currentContentView)
+            return;
+
+        this.soon._dispatchCurrentRepresentedObjectsDidChangeEvent();
+    }
+
+    _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..e6d403a17
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.js
@@ -0,0 +1,270 @@
+/*
+ * 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)
+    {
+        return this.treeElementForRepresentedObject(representedObject);
+    }
+
+    // Protected
+
+    treeElementForRepresentedObject(representedObject)
+    {
+        // Can be overriden by subclasses.
+
+        if (!this.navigationSidebarPanel)
+            return null;
+
+        return this.navigationSidebarPanel.treeElementForRepresentedObject(representedObject);
+     }
+
+    // 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)
+    {
+        let currentContentView = this._contentBrowser.currentContentView;
+        if (!currentContentView)
+            return;
+
+        this._revealAndSelectRepresentedObject(currentContentView.representedObject);
+    }
+
+    _revealAndSelectRepresentedObject(representedObject)
+    {
+        if (this.navigationSidebarPanel) {
+            // 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 (let contentTreeOutline of this.navigationSidebarPanel.contentTreeOutlines) {
+                if (contentTreeOutline.processingSelectionChange)
+                    return;
+            }
+        }
+
+        let treeElement = this.treeElementForRepresentedObject(representedObject);
+
+        if (treeElement)
+            treeElement.revealAndSelect(true, false, true, true);
+        else if (this.navigationSidebarPanel && 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..4d5afa8f4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentView.js
@@ -0,0 +1,431 @@
+/*
+ * 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.ScriptClusterTimelineView(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 (timelineType === WebInspector.TimelineRecord.Type.HeapAllocations)
+                return new WebInspector.HeapAllocationsTimelineView(representedObject, extraArguments);
+        }
+
+        if (representedObject instanceof WebInspector.Breakpoint || representedObject instanceof WebInspector.IssueMessage) {
+            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 (representedObject instanceof WebInspector.CallingContextTree)
+            return new WebInspector.ProfileView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.HeapSnapshotProxy || representedObject instanceof WebInspector.HeapSnapshotDiffProxy)
+            return new WebInspector.HeapSnapshotClusterContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.Collection)
+            return new WebInspector.CollectionContentView(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 of type: " + representedObject.constructor.name);
+    }
+
+    static contentViewForRepresentedObject(representedObject, onlyExisting, extraArguments)
+    {
+        console.assert(representedObject);
+
+        // Some represented objects attempt to resolve a better represented object.
+        // This may result in null, for example a Breakpoint which doesn't have a SourceCode.
+        let resolvedRepresentedObject = WebInspector.ContentView.resolvedRepresentedObjectForRepresentedObject(representedObject);
+        if (!resolvedRepresentedObject)
+            return null;
+
+        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 || representedObject instanceof WebInspector.IssueMessage) {
+            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 || representedObject instanceof WebInspector.IssueMessage)
+            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 (representedObject instanceof WebInspector.CallingContextTree)
+            return true;
+        if (representedObject instanceof WebInspector.HeapSnapshotProxy || representedObject instanceof WebInspector.HeapSnapshotDiffProxy)
+            return true;
+        if (representedObject instanceof WebInspector.Collection)
+            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 WebInspector.dockedConfigurationSupportsSplitContentBrowser();
+    }
+
+    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 supportsCustomFindBanner()
+    {
+        // Implemented by subclasses.
+        return false;
+    }
+
+    showCustomFindBanner()
+    {
+        // Implemented by subclasses.
+    }
+
+    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..7d9865d88
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentViewContainer.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.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);
+
+        let currentEntry = this.currentBackForwardEntry;
+
+        // Try to find the last entry with the same content view so we can copy it
+        // to preserve the last scroll positions. The supplied cookie (if any) could
+        // still change the scroll position afterwards, but in most cases the cookie
+        // is undefined, so we want to show with a state last used.
+        let provisionalEntry = null;
+        for (let i = this._backForwardList.length - 1; i >= 0; --i) {
+            if (this._backForwardList[i].contentView === contentView) {
+                provisionalEntry = this._backForwardList[i].makeCopy(cookie);
+                break;
+            }
+        }
+
+        if (!provisionalEntry)
+            provisionalEntry = new WebInspector.BackForwardEntry(contentView, cookie);
+
+        // Don't do anything if we would have added an identical back/forward list entry.
+        if (provisionalEntry.isEqual(currentEntry)) {
+            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.
+        let 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.
+        let 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 (let i = 0; i < removedEntries.length; ++i) {
+            // Skip disassociation if this content view is still in the back/forward list.
+            let shouldDissociateContentView = !this._backForwardList.some((existingEntry) => 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);
+            }
+        }
+
+        this._removeIdenticalAdjacentBackForwardEntries();
+
+        // 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);
+        }
+    }
+
+    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 is 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;
+        }
+
+        if (backForwardListDidChange)
+            this._removeIdenticalAdjacentBackForwardEntries();
+
+        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;
+    }
+
+    _removeIdenticalAdjacentBackForwardEntries()
+    {
+        if (this._backForwardList.length < 2)
+            return;
+
+        let previousEntry;
+        for (let i = this._backForwardList.length - 1; i >= 0; --i) {
+            let entry = this._backForwardList[i];
+            if (!entry.isEqual(previousEntry)) {
+                previousEntry = entry;
+                continue;
+            }
+
+           if (this._currentIndex >= i) {
+                // Decrement the currentIndex since we will remove an item in the back/forward array
+                // that is the current index or comes before it.
+                --this._currentIndex;
+            }
+
+            this._backForwardList.splice(i, 1);
+        }
+    }
+};
+
+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..e62e8f981
--- /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");
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js b/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js
new file mode 100644
index 000000000..ef6100add
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js
@@ -0,0 +1,66 @@
+/*
+ * 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.appendContextMenuItemsForSourceCode = function(contextMenu, sourceCode)
+{
+    console.assert(contextMenu instanceof WebInspector.ContextMenu);
+    if (!(contextMenu instanceof WebInspector.ContextMenu))
+        return;
+
+    console.assert(sourceCode instanceof WebInspector.SourceCode);
+    if (!(sourceCode instanceof WebInspector.SourceCode))
+        return;
+
+    contextMenu.appendSeparator();
+
+    if (sourceCode.url) {
+        contextMenu.appendItem(WebInspector.UIString("Open in New Tab"), () => {
+            const frame = null;
+            const alwaysOpenExternally = true;
+            WebInspector.openURL(sourceCode.url, frame, alwaysOpenExternally);
+        });
+
+        contextMenu.appendItem(WebInspector.UIString("Copy Link Address"), () => {
+            InspectorFrontendHost.copyText(sourceCode.url);
+        });
+    }
+
+    if (sourceCode instanceof WebInspector.Resource) {
+        if (sourceCode.urlComponents.scheme !== "data") {
+            contextMenu.appendItem(WebInspector.UIString("Copy as cURL"), () => {
+                sourceCode.generateCURLCommand();
+            });
+        }
+    }
+
+    contextMenu.appendItem(WebInspector.UIString("Save File"), () => {
+        sourceCode.requestContent().then(() => {
+            WebInspector.saveDataToFile({
+                url: sourceCode.url || "",
+                content: sourceCode.content
+            });
+        });
+    });
+};
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..57ec097c8
--- /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: 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..8442f9861
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.js
@@ -0,0 +1,237 @@
+/*
+ * 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.name.locked = true;
+
+            columns.value.title = WebInspector.UIString("Value");
+            columns.value.sortable = true;
+            columns.value.width = "34%";
+            columns.value.locked = true;
+
+            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.columnChooserEnabled = true;
+            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.sortColumnIdentifier = "name";
+        this._dataGrid.createSettings("cookie-storage-content-view");
+    }
+
+    _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.resourceCollection.toArray());
+        }
+
+        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..32e6383b7
--- /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.needsLayout();
+    }
+
+    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..36cefedde
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js
@@ -0,0 +1,706 @@
+/*
+ * 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.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);
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.CustomElementStateChanged, this._customElementStateChanged, 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"));
+        this._identityNodeContentSecurityPolicyHashRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("CSP Hash"));
+
+        var identityGroup = new WebInspector.DetailsSectionGroup([this._identityNodeTypeRow, this._identityNodeNameRow, this._identityNodeValueRow, this._identityNodeContentSecurityPolicyHashRow]);
+        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._accessibilityNodeHeadingLevelRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Heading Level"));
+            this._accessibilityNodehierarchyLevelRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Hierarchy Level"));
+            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);
+        }
+    }
+
+    // Protected
+
+    layout()
+    {
+        if (!this.domNode)
+            return;
+
+        this._refreshIdentity();
+        this._refreshAttributes();
+        this._refreshProperties();
+        this._refreshEventListeners();
+        this._refreshAccessibility();
+    }
+
+    // Private
+
+    _accessibilitySupported()
+    {
+        return window.DOMAgent && DOMAgent.getAccessibilityPropertiesForNode;
+    }
+
+    _refreshIdentity()
+    {
+        const domNode = this.domNode;
+        this._identityNodeTypeRow.value = this._nodeTypeDisplayName();
+        this._identityNodeNameRow.value = domNode.nodeNameInCorrectCase();
+        this._identityNodeValueRow.value = domNode.nodeValue();
+        this._identityNodeContentSecurityPolicyHashRow.value = domNode.contentSecurityPolicyHash();
+    }
+
+    _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.ObjectPropertiesDetailSectionRow(objectTree, detailsSection)];
+
+                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;
+                let hasPopup = accessibilityProperties.isPopupButton;
+                let roleType = null;
+                let buttonType = null;
+                let buttonTypePopupString = WebInspector.UIString("popup");
+                let buttonTypeToggleString = WebInspector.UIString("toggle");
+                let buttonTypePopupToggleString = WebInspector.UIString("popup, toggle");
+
+                if (role === "" || role === "unknown")
+                    role = WebInspector.UIString("No matching ARIA role");
+                else if (role) {
+                    if (role === "button") {
+                        if (pressed)
+                            buttonType = buttonTypeToggleString;
+
+                        // In cases where an element is a toggle button, but it also has
+                        // aria-haspopup, we concatenate the button types. If it is just
+                        // a popup button, we only include "popup".
+                        if (hasPopup)
+                            buttonType = buttonType ? buttonTypePopupToggleString : buttonTypePopupString;
+                    }
+
+                    if (!domNode.getAttribute("role"))
+                        roleType = WebInspector.UIString("default");
+                    else if (buttonType || domNode.getAttribute("role") !== role)
+                        roleType = WebInspector.UIString("computed");
+
+                    if (buttonType && roleType)
+                        role = WebInspector.UIString("%s (%s, %s)").format(role, buttonType, roleType);
+                    else if (roleType || buttonType) {
+                        let extraInfo = roleType || buttonType;
+                        role = WebInspector.UIString("%s (%s)").format(role, extraInfo);
+                    }
+                }
+
+                var selected = booleanValueToLocalizedStringIfTrue("selected");
+                var selectedChildNodeLinkList = linkListForNodeIds(accessibilityProperties.selectedChildNodeIds);
+
+                var headingLevel = accessibilityProperties.headingLevel;
+                var hierarchyLevel = accessibilityProperties.hierarchyLevel;
+                // 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._accessibilityNodeHeadingLevelRow.value = headingLevel || "";
+                this._accessibilityNodehierarchyLevelRow.value = hierarchyLevel || "";
+                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._accessibilityNodeHeadingLevelRow,
+                    this._accessibilityNodehierarchyLevelRow,
+                    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();
+    }
+
+    _customElementStateChanged(event)
+    {
+        if (event.data.node !== this.domNode)
+            return;
+        this._refreshIdentity();
+    }
+
+    _nodeTypeDisplayName()
+    {
+        switch (this.domNode.nodeType()) {
+        case Node.ELEMENT_NODE: {
+            const nodeName = WebInspector.UIString("Element");
+            const state = this._customElementState();
+            return state === null ? nodeName : `${nodeName} (${state})`;
+        }
+        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();
+        }
+    }
+
+    _customElementState()
+    {
+        const state = this.domNode.customElementState();
+        switch (state) {
+        case WebInspector.DOMNode.CustomElementState.Builtin:
+            return null;
+        case WebInspector.DOMNode.CustomElementState.Custom:
+            return WebInspector.UIString("Custom");
+        case WebInspector.DOMNode.CustomElementState.Waiting:
+            return WebInspector.UIString("Waiting to be upgraded");
+        case WebInspector.DOMNode.CustomElementState.Failed:
+            return WebInspector.UIString("Failed to upgrade");
+        }
+        console.error("Unknown DOM custom element state: ", state);
+        return null;
+    }
+
+    _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..8932342ae
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.js
@@ -0,0 +1,260 @@
+/*
+ * 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.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+        this._dataGrid.sortColumnIdentifier = "key";
+        this._dataGrid.createSettings("dom-storage-content-view");
+        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;
+    }
+
+    get scrollableElements()
+    {
+        return [this._dataGrid.scrollContainer];
+    }
+
+    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);
+        }
+
+        return null;
+    }
+
+    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();
+    }
+
+    // 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;
+        }
+
+        // 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..4832edb46
--- /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: image-set(url(../Images/LocalStorage.png) 1x, url(../Images/LocalStorage@2x.png) 2x);
+}
+
+.session-storage-icon .icon {
+    content: 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..37d9dae0d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
@@ -0,0 +1,549 @@
+/*
+ * 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();
+
+        WebInspector.showPrintStylesSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showPrintStylesSettingChanged, this);
+        this._showPrintStylesButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("print-styles", WebInspector.UIString("Force Print Media Styles"), WebInspector.UIString("Use Default Media Styles"), "Images/Printer.svg", 16, 16);
+        this._showPrintStylesButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePrintStylesSetting, this);
+        this._showPrintStylesSettingChanged();
+
+        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._showPrintStylesButtonNavigationItem, this._showsShadowDOMButtonNavigationItem, this._compositingBordersButtonNavigationItem, this._paintFlashingButtonNavigationItem];
+    }
+
+    get domTreeOutline()
+    {
+        return this._domTreeOutline;
+    }
+
+    get scrollableElements()
+    {
+        return [this.element];
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._domTreeOutline.setVisible(true, WebInspector.isConsoleFocused());
+        this._updateCompositingBordersButtonToMatchPageSettings();
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+        this._domTreeOutline.setVisible(false);
+    }
+
+    closed()
+    {
+        super.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)
+    {
+        if (!event.data.pathComponent)
+            return;
+
+        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;
+    }
+
+    _showPrintStylesSettingChanged(event)
+    {
+        this._showPrintStylesButtonNavigationItem.activated = WebInspector.showPrintStylesSetting.value;
+    }
+
+    _togglePrintStylesSetting(event)
+    {
+        WebInspector.showPrintStylesSetting.value = !WebInspector.showPrintStylesSetting.value;
+
+        let mediaType = WebInspector.showPrintStylesSetting.value ? "print" : "";
+        PageAgent.setEmulatedMedia(mediaType);
+
+        WebInspector.cssStyleManager.mediaTypeChanged();
+    }
+
+    _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..042757572
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGrid.js
@@ -0,0 +1,62 @@
+/*
+ * 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, icon: true}
+        });
+
+        this._previousHoveredElement = null;
+
+        this.inline = true;
+
+        this.element.classList.add("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..18b0df023
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGridNode.js
@@ -0,0 +1,69 @@
+/*
+ * 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._domNode = domNode;
+    }
+
+    get domNode()
+    {
+        return this._domNode;
+    }
+
+    // DataGridNode Overrides.
+
+    createCellContent(columnIdentifier, cell)
+    {
+        if (columnIdentifier !== "name")
+            return super.createCellContent(columnIdentifier, cell);
+
+        return this._createNameCellDocumentFragment();
+    }
+
+    // Private
+
+    _createNameCellDocumentFragment()
+    {
+        let fragment = document.createDocumentFragment();
+        let mainTitle = this._domNode.displayName;
+        fragment.append(mainTitle);
+
+        let goToButton = fragment.appendChild(WebInspector.createGoToArrowButton());
+        goToButton.addEventListener("click", this._goToArrowWasClicked.bind(this), false);
+
+        return fragment;
+    }
+
+    _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..bee7a1d67
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
@@ -0,0 +1,1669 @@
+/*
+ * Copyright (C) 2007, 2008, 2013, 2015, 2016 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._recentlyModifiedAttributes = [];
+        this._boundNodeChangedAnimationEnd = this._nodeChangedAnimationEnd.bind(this);
+
+        node.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this);
+    }
+
+    // Static
+
+    static shadowRootTypeDisplayName(type)
+    {
+        switch (type) {
+        case WebInspector.DOMNode.ShadowRootType.UserAgent:
+            return WebInspector.UIString("User Agent");
+        case WebInspector.DOMNode.ShadowRootType.Open:
+            return WebInspector.UIString("Open");
+        case WebInspector.DOMNode.ShadowRootType.Closed:
+            return WebInspector.UIString("Closed");
+        }
+    }
+
+    // Public
+
+    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(value)
+    {
+        if (this._hovered === value)
+            return;
+
+        this._hovered = value;
+
+        if (this.listItemElement) {
+            this.listItemElement.classList.toggle("hovered", this._hovered);
+            this.updateSelectionArea();
+        }
+    }
+
+    get editable()
+    {
+        let node = this.representedObject;
+
+        if (node.isShadowRoot() || node.isInUserAgentShadowTree())
+            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;
+    }
+
+    attributeDidChange(name)
+    {
+        this._recentlyModifiedAttributes.push({name});
+    }
+
+    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));
+    }
+
+    updateSelectionArea()
+    {
+        let listItemElement = this.listItemElement;
+        if (!listItemElement)
+            return;
+
+        // If there's no reason to have a selection area, remove the DOM element.
+        let indicatesTreeOutlineState = this.treeOutline && (this.treeOutline.dragOverTreeElement === this || this.treeOutline.selectedTreeElement === this);
+        if (!this.hovered && !this.pseudoClassesEnabled && !indicatesTreeOutlineState) {
+            if (this._selectionElement) {
+                this._selectionElement.remove();
+                this._selectionElement = null;
+            }
+
+            return;
+        }
+
+        if (!this._selectionElement) {
+            this._selectionElement = document.createElement("div");
+            this._selectionElement.className = "selection-area";
+            listItemElement.insertBefore(this._selectionElement, listItemElement.firstChild);
+        }
+
+        this._selectionElement.style.height = listItemElement.offsetHeight + "px";
+    }
+
+    onattach()
+    {
+        if (this.hovered)
+            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;
+            }
+
+            this.removeChildAtIndex(i);
+        }
+
+        // Move / create TreeElements for our visible children.
+        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);
+
+        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(visibleChildren[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();
+        this.expandedChildrenLimit = Math.max(visibleChildren.length, this.expandedChildrenLimit + WebInspector.DOMTreeElement.InitialChildrenLimit);
+    }
+
+    onexpand()
+    {
+        if (this._elementCloseTag)
+            return;
+
+        if (!this.listItemElement)
+            return;
+
+        this.updateTitle();
+    }
+
+    oncollapse()
+    {
+        if (this._elementCloseTag)
+            return;
+
+        this.updateTitle();
+    }
+
+    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.treeOutline.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.updateSelectionArea();
+    }
+
+    _startEditingTarget(eventTarget)
+    {
+        if (this.treeOutline.selectedDOMNode() !== this.representedObject)
+            return false;
+
+        if (this.representedObject.isShadowRoot() || this.representedObject.isInUserAgentShadowTree())
+            return false;
+
+        if (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)
+    {
+        let node = this.representedObject;
+        if (!node.isInUserAgentShadowTree()) {
+            let attribute = event.target.enclosingNodeOrSelfWithClass("html-attribute");
+
+            if (event.target && event.target.tagName === "A") {
+                let url = event.target.href;
+
+                contextMenu.appendItem(WebInspector.UIString("Open in New Tab"), () => {
+                    const frame = null;
+                    const alwaysOpenExternally = true;
+                    WebInspector.openURL(url, frame, alwaysOpenExternally);
+                });
+
+                if (WebInspector.frameResourceManager.resourceForURL(url)) {
+                    contextMenu.appendItem(WebInspector.UIString("Reveal in Resources Tab"), () => {
+                        let frame = WebInspector.frameResourceManager.frameForIdentifier(node.frameIdentifier);
+                        WebInspector.openURL(url, frame);
+                    });
+                }
+
+                contextMenu.appendItem(WebInspector.UIString("Copy Link Address"), () => {
+                    InspectorFrontendHost.copyText(url);
+                });
+
+                contextMenu.appendSeparator();
+            }
+
+            // 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()) {
+                let 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)
+    {
+        let node = this.representedObject;
+
+        // Add free-form node-related actions.
+        if (this.editable)
+            contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), this._editAsHTML.bind(this));
+        if (!node.isPseudoElement())
+            contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this));
+        if (this.editable)
+            contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this));
+        if (node.nodeType() === Node.ELEMENT_NODE)
+            contextMenu.appendItem(WebInspector.UIString("Scroll Into View"), this._scrollIntoView.bind(this));
+
+        contextMenu.appendSeparator();
+
+        if (node.nodeType() === Node.ELEMENT_NODE) {
+            contextMenu.appendItem(WebInspector.UIString("Copy Selector Path"), () => {
+                let cssPath = WebInspector.cssPath(this.representedObject);
+                InspectorFrontendHost.copyText(cssPath);
+            });
+        }
+
+        if (!node.isPseudoElement()) {
+            contextMenu.appendItem(WebInspector.UIString("Copy XPath"), () => {
+                let xpath = WebInspector.xpath(this.representedObject);
+                InspectorFrontendHost.copyText(xpath);
+            });
+        }
+
+        if (node.isCustomElement()) {
+            contextMenu.appendSeparator();
+            contextMenu.appendItem(WebInspector.UIString("Jump to Definition"), this._showCustomElementDefinition.bind(this));
+        }
+    }
+
+    _startEditing()
+    {
+        if (this.treeOutline.selectedDOMNode() !== this.representedObject)
+            return false;
+
+        if (!this.editable)
+            return false;
+
+        var listItem = this.listItemElement;
+
+        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.updateSelectionArea();
+
+        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.updateSelectionArea();
+        }
+
+        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 (!moveDirection && 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;
+        }
+
+        // Setting this.title will implicitly remove all children. Clear the
+        // selection element so that we properly recreate it if necessary.
+        this._selectionElement = null;
+        this.updateSelectionArea();
+        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 = descriptorText;
+                }
+
+                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 attribute of this._recentlyModifiedAttributes) {
+            if (attribute.name === name)
+                attribute.element = hasText ? attrValueElement : attrNameElement;
+        }
+    }
+
+    _buildTagDOM(parentElement, tagName, isClosingTag, isDistinctTreeElement)
+    {
+        var node = this.representedObject;
+        var classes = ["html-tag"];
+        if (isClosingTag && isDistinctTreeElement)
+            classes.push("close");
+        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.shadowRootType()) {
+                    fragmentElement.textContent = WebInspector.UIString("Shadow Content (%s)").format(WebInspector.DOMTreeElement.shadowRootTypeDisplayName(node.shadowRootType()));
+                    this.listItemElement.classList.add("shadow");
+                } else if (node.parentNode && node.parentNode.templateContent() === node) {
+                    fragmentElement.textContent = WebInspector.UIString("Template Content");
+                    this.listItemElement.classList.add("template");
+                } else {
+                    fragmentElement.textContent = WebInspector.UIString("Document Fragment");
+                    this.listItemElement.classList.add("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 + "\"");
+
+                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);
+    }
+
+    _showCustomElementDefinition()
+    {
+        const node = this.representedObject;
+        WebInspector.RemoteObject.resolveNode(node, "", (remoteObject) => {
+            if (!remoteObject)
+                return;
+
+            remoteObject.getProperty("constructor", (error, result, wasThrown) => {
+                if (error || result.type !== "function")
+                    return;
+
+                DebuggerAgent.getFunctionDetails(result.objectId, (error, response) => {
+                    if (error)
+                        return;
+
+                    let location = response.location;
+                    let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId, WebInspector.mainTarget);
+                    if (!sourceCode)
+                        return;
+
+                    let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber || 0);
+                    WebInspector.showSourceCodeLocation(sourceCodeLocation);
+                });
+                result.release();
+            });
+            remoteObject.release();
+        });
+    }
+
+    _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 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 attribute of this._recentlyModifiedAttributes) {
+            let element = attribute.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._recentlyModifiedAttributes.length - 1; i >= 0; --i) {
+            if (this._recentlyModifiedAttributes[i].element === element)
+                this._recentlyModifiedAttributes.splice(i, 1);
+        }
+    }
+
+    get pseudoClassesEnabled()
+    {
+        return !!this.representedObject.enabledPseudoClasses.length;
+    }
+
+    _nodePseudoClassesDidChange(event)
+    {
+        if (this._elementCloseTag)
+            return;
+
+        this.updateSelectionArea();
+        this.listItemElement.classList.toggle("pseudo-class-enabled", !!this.representedObject.enabledPseudoClasses.length);
+    }
+
+    _fireDidChange()
+    {
+        super._fireDidChange();
+
+        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", "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..212aa9f89
--- /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 = node.displayName;
+            }
+            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.shadowRootType())
+                title = WebInspector.UIString("Shadow Content");
+            else
+                title = node.displayName;
+            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..f6df11a25
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.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.
+ */
+
+.tree-outline.dom {
+    position: relative;
+
+    min-width: 100%;
+    margin: 0;
+    padding: 0;
+
+    outline: none;
+
+    list-style-type: none;
+
+ /* Needed to make the negative z-index on .selection-area 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-area {
+    background-color: hsla(209, 100%, 49%, 0.1);
+}
+
+.tree-outline.dom li .selection-area {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 15px;
+    z-index: -1;
+}
+
+.tree-outline.dom li.selected .selection-area {
+    background-color: hsl(0, 0%, 83%);
+}
+
+.tree-outline.dom li.elements-drag-over .selection-area {
+    margin-top: -2px;
+    border-top: 2px solid hsl(209, 100%, 49%);
+}
+
+.tree-outline.dom:focus li.selected .selection-area {
+    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: var(--selected-secondary-text-color);
+}
+
+.tree-outline.dom ol {
+    list-style-type: none;
+    padding-left: 14px;
+    margin: 0;
+}
+
+.tree-outline.dom ol.children {
+    display: none;
+}
+
+.tree-outline.dom ol.children.expanded {
+    display: block;
+}
+
+.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
+    margin-left: 4px;
+    padding-left: 1px;
+    border-left: 9px solid hsla(0, 0%, 83%, 0.5);
+}
+
+.tree-outline.dom li.selected + ol.children.expanded {
+    border-left-color: hsl(0, 0%, 83%);
+}
+
+.tree-outline.dom li {
+    padding: 0 6px 0 17px;
+    word-wrap: break-word;
+}
+
+.tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
+    display: inline-block;
+    position: absolute;
+    top: 4px;
+    left: 2px;
+    width: 5px;
+    height: 5px;
+    content: "";
+    background-color: var(--selected-background-color);
+    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-area::before {
+    background-color: hsl(0, 100%, 100%);
+}
+
+.tree-outline.dom:focus li.selected * {
+    color: inherit;
+}
+
+.tree-outline.dom li.parent {
+    margin-left: -15px;
+    line-height: 13px;
+}
+
+.tree-outline.dom li .html-tag.close {
+    margin-left: -13px;
+}
+
+.tree-outline.dom li.parent::before {
+    position: relative;
+    z-index: 20;
+
+    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 .shadow {
+    color: gray;
+}
+
+/* Cannot apply styling directly to the parent element since it has a disclosure triangle. */
+.tree-outline.dom li.parent.shadow::after {
+    display: block;
+    /* Adds padding to the right edge. */
+    width: calc(100% + 8px);
+    height: 1.2em;
+    margin-top: -13px;
+    margin-left: -2px;
+    content: "";
+    background-color: hsla(0, 0%, 90%, 0.5);
+}
+
+.tree-outline.dom li.parent.shadow + ol.children.expanded {
+    background-color: hsla(0, 0%, 90%, 0.5);
+}
+
+.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..b85ff0293
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
@@ -0,0 +1,567 @@
+/*
+ * 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._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()
+    {
+        if (!this.rootDOMNode)
+            return;
+
+        let selectedNode = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
+
+        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()
+    {
+        // This will miss updating selection areas used for the hovered tree element and
+        // and those used to show forced pseudo class indicators, but this should be okay.
+        // The hovered element will update when user moves the mouse, and indicators don't need the
+        // selection area height to be accurate since they use ::before to place the indicator.
+        if (this.selectedTreeElement)
+            this.selectedTreeElement.updateSelectionArea();
+    }
+
+    _selectedNodeChanged()
+    {
+        this.dispatchEventToListeners(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged);
+    }
+
+    findTreeElement(node)
+    {
+        let isAncestorNode = (ancestor, node) => ancestor.isAncestor(node);
+        let parentNode = (node) => node.parentNode;
+        let 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)
+    {
+        let tag = event.target.enclosingNodeOrSelfWithClass("html-tag");
+        let textNode = event.target.enclosingNodeOrSelfWithClass("html-text-node");
+        let commentNode = event.target.enclosingNodeOrSelfWithClass("html-comment");
+        let pseudoElement = event.target.enclosingNodeOrSelfWithClass("html-pseudo-element");
+
+        if (tag && treeElement._populateTagContextMenu) {
+            contextMenu.appendSeparator();
+
+            treeElement._populateTagContextMenu(contextMenu, event);
+        } else if (textNode && treeElement._populateTextContextMenu) {
+            contextMenu.appendSeparator();
+
+            treeElement._populateTextContextMenu(contextMenu, textNode);
+        } else if ((commentNode || pseudoElement) && treeElement._populateNodeContextMenu) {
+            contextMenu.appendSeparator();
+
+            treeElement._populateNodeContextMenu(contextMenu);
+        }
+
+        super.populateContextMenu(contextMenu, event, treeElement);
+    }
+
+    adjustCollapsedRange()
+    {
+    }
+
+    // Private
+
+    _revealAndSelectNode(node, omitFocus)
+    {
+        if (!node || this._suppressRevealAndSelect)
+            return;
+
+        if (!WebInspector.showShadowDOMSetting.value) {
+            while (node && node.isInShadowTree())
+                node = node.parentNode;
+            if (!node)
+                return;
+        }
+
+        var treeElement = this.createTreeElementFor(node);
+        if (!treeElement)
+            return;
+
+        treeElement.revealAndSelect(omitFocus);
+    }
+
+    _onmousedown(event)
+    {
+        let element = this.treeElementFromEvent(event);
+        if (!element || element.isEventWithinDisclosureTriangle(event)) {
+            event.preventDefault();
+            return;
+        }
+
+        element.select();
+    }
+
+    _onmousemove(event)
+    {
+        let element = this.treeElementFromEvent(event);
+        if (element && this._previousHoveredElement === element)
+            return;
+
+        if (this._previousHoveredElement) {
+            this._previousHoveredElement.hovered = false;
+            this._previousHoveredElement = null;
+        }
+
+        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;
+            this._previousHoveredElement = null;
+        }
+
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+    }
+
+    _ondragstart(event)
+    {
+        let 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 (event.dataTransfer.types.includes(WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType)) {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "copy";
+            return false;
+        }
+
+        if (!this._nodeBeingDragged)
+            return false;
+
+        let treeElement = this.treeElementFromEvent(event);
+        if (!this._isValidDragSourceOrTarget(treeElement))
+            return false;
+
+        let node = treeElement.representedObject;
+        while (node) {
+            if (node === this._nodeBeingDragged)
+                return false;
+            node = node.parentNode;
+        }
+
+        this.dragOverTreeElement = treeElement;
+        treeElement.listItemElement.classList.add("elements-drag-over");
+        treeElement.updateSelectionArea();
+
+        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);
+        }
+
+        let treeElement = this.treeElementFromEvent(event);
+        if (this._nodeBeingDragged && treeElement) {
+            let parentNode = null;
+            let anchorNode = null;
+
+            if (treeElement._elementCloseTag) {
+                // Drop onto closing tag -> insert as last child.
+                parentNode = treeElement.representedObject;
+            } else {
+                let dragTargetNode = treeElement.representedObject;
+                parentNode = dragTargetNode.parentNode;
+                anchorNode = dragTargetNode;
+            }
+
+            this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
+        } else {
+            let className = event.dataTransfer.getData(WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesDragType);
+            if (className && treeElement)
+                treeElement.representedObject.toggleClass(className, true);
+        }
+
+        delete this._nodeBeingDragged;
+    }
+
+    _ondragend(event)
+    {
+        event.preventDefault();
+        this._clearDragOverTreeElementMarker();
+        delete this._nodeBeingDragged;
+    }
+
+    _clearDragOverTreeElementMarker()
+    {
+        if (this.dragOverTreeElement) {
+            let element = this.dragOverTreeElement;
+            this.dragOverTreeElement = null;
+
+            element.listItemElement.classList.remove("elements-drag-over");
+            element.updateSelectionArea();
+        }
+    }
+
+    _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);
+
+        if (!domNode.isInUserAgentShadowTree())
+            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..83f7ae77a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeUpdater.js
@@ -0,0 +1,159 @@
+/*
+ * Copyright (C) 2007, 2008, 2013, 2016 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._recentlyInsertedNodes = new Map;
+    this._recentlyDeletedNodes = new Map;
+    this._recentlyModifiedNodes = new Set;
+    // Map from attribute names to nodes that had the attributes.
+    this._recentlyModifiedAttributes = new Map;
+
+    // Dummy "attribute" that is used to track textContent changes.
+    this._textContentAttributeSymbol = Symbol("text-content-attribute");
+};
+
+WebInspector.DOMTreeUpdater.prototype = {
+    close: function()
+    {
+        WebInspector.domTreeManager.removeEventListener(null, null, this);
+    },
+
+    _documentUpdated: function(event)
+    {
+        this._reset();
+    },
+
+    _attributesUpdated: function(event)
+    {
+        let {node, name} = event.data;
+        this._nodeAttributeModified(node, name);
+    },
+
+    _characterDataModified: function(event)
+    {
+        let {node} = event.data;
+        this._nodeAttributeModified(node, this._textContentAttributeSymbol);
+    },
+
+    _nodeAttributeModified: function(node, attribute)
+    {
+        if (!this._recentlyModifiedAttributes.has(attribute))
+            this._recentlyModifiedAttributes.set(attribute, new Set);
+        this._recentlyModifiedAttributes.get(attribute).add(node);
+        this._recentlyModifiedNodes.add(node);
+
+        if (this._treeOutline._visible)
+            this.onNextFrame._updateModifiedNodes();
+      },
+
+    _nodeInserted: function(event)
+    {
+        this._recentlyInsertedNodes.set(event.data.node, {parent: event.data.parent});
+        if (this._treeOutline._visible)
+            this.onNextFrame._updateModifiedNodes();
+    },
+
+    _nodeRemoved: function(event)
+    {
+        this._recentlyDeletedNodes.set(event.data.node, {parent: event.data.parent});
+        if (this._treeOutline._visible)
+            this.onNextFrame._updateModifiedNodes();
+    },
+
+    _childNodeCountUpdated: function(event)
+    {
+        var treeElement = this._treeOutline.findTreeElement(event.data);
+        if (treeElement)
+            treeElement.hasChildren = event.data.hasChildNodes();
+    },
+
+    _updateModifiedNodes: function()
+    {
+        // Update for insertions and deletions before attribute modifications. This ensures
+        // tree elements get created for newly attached children before we try to update them.
+        let parentElementsToUpdate = new Set;
+        let markNodeParentForUpdate = (value, key, map) => {
+            let parentNode = value.parent;
+            let parentTreeElement = this._treeOutline.findTreeElement(parentNode);
+            if (parentTreeElement)
+                parentElementsToUpdate.add(parentTreeElement);
+        };
+        this._recentlyInsertedNodes.forEach(markNodeParentForUpdate);
+        this._recentlyDeletedNodes.forEach(markNodeParentForUpdate);
+
+        for (let parentTreeElement of parentElementsToUpdate) {
+            parentTreeElement.updateTitle();
+            parentTreeElement.updateChildren();
+        }
+
+        for (let node of this._recentlyModifiedNodes.values()) {
+            let nodeTreeElement = this._treeOutline.findTreeElement(node);
+            if (!nodeTreeElement)
+                return;
+
+            for (let [attribute, nodes] of this._recentlyModifiedAttributes.entries()) {
+                // Don't report textContent changes as attribute modifications.
+                if (attribute === this._textContentAttributeSymbol)
+                    continue;
+
+                if (nodes.has(node))
+                    nodeTreeElement.attributeDidChange(attribute);
+            }
+
+            nodeTreeElement.updateTitle();
+        }
+
+        this._recentlyInsertedNodes.clear();
+        this._recentlyDeletedNodes.clear();
+        this._recentlyModifiedNodes.clear();
+        this._recentlyModifiedAttributes.clear();
+    },
+
+    _reset: function()
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+
+        this._recentlyInsertedNodes.clear();
+        this._recentlyDeletedNodes.clear();
+        this._recentlyModifiedNodes.clear();
+        this._recentlyModifiedAttributes.clear();
+    }
+};
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..13c585e15
--- /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 dashboardView;
+
+        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;
+
+        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..a7eaae65e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
@@ -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.
+ */
+
+.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: scroll;
+}
+
+.data-grid.inline .data-container {
+    position: static;
+    overflow-y: auto;
+}
+
+.data-grid.inline {
+    border: 0.5px solid var(--border-color);
+}
+
+.data-grid > .header-wrapper {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.data-grid.no-header > .header-wrapper {
+    display: none;
+}
+
+.data-grid.no-header .data-container {
+    top: 0;
+}
+
+.data-grid th {
+    text-align: left;
+    vertical-align: middle;
+
+    background-color: white;
+
+    font-weight: normal;
+
+    height: 22px;
+    padding: 0 6px;
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.data-grid :matches(th, td):not(:last-child) {
+    border-right: 0.5px 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: relative;
+    left: 0;
+    right: 0;
+    height: 100%;
+    border-top: 0 none transparent;
+    table-layout: fixed;
+}
+
+.data-grid:not(.variable-height-rows) table.data {
+    background-image: linear-gradient(to bottom, var(--even-zebra-stripe-row-background-color), var(--even-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color));
+    background-size: 100% 40px;
+}
+
+.data-grid:not(.variable-height-rows) > .data-container > table.data > tbody > tr > td > .cell-content {
+    height: 16px;
+}
+
+.data-grid:not(.variable-height-rows) table.data.odd-first-zebra-stripe {
+    background-image: linear-gradient(to bottom, var(--odd-zebra-stripe-row-background-color), var(--odd-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color));
+}
+
+.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.variable-height-rows table.data tr:nth-child(odd) {
+    background-color: var(--odd-zebra-stripe-row-background-color);
+}
+
+.data-grid.variable-height-rows table.data tr:nth-child(even) {
+    background-color: var(--even-zebra-stripe-row-background-color);
+}
+
+.data-grid.variable-height-rows.odd-first-zebra-stripe table.data tr:nth-child(odd) {
+    background-color: var(--even-zebra-stripe-row-background-color);
+}
+
+.data-grid.variable-height-rows.odd-first-zebra-stripe table.data tr:nth-child(even) {
+    background-color: var(--odd-zebra-stripe-row-background-color);
+}
+
+.data-grid.variable-height-rows table.data tr.filler {
+ /* FIXME: This should show an alternating stripe, but it needs to know if the last row is even or odd. */
+    background-color: var(--even-zebra-stripe-row-background-color);
+}
+
+.data-grid td {
+    vertical-align: top;
+    height: 16px;
+    line-height: 16px;
+    padding: 2px 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    font-family: -apple-system, sans-serif;
+    font-variant-numeric: tabular-nums;
+}
+
+.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: var(--selected-background-color-unfocused) !important;
+    color: inherit !important;
+}
+
+.data-grid:matches(:focus, .force-focus) tr.selected {
+    background-color: var(--selected-background-color) !important;
+    color: var(--selected-foreground-color) !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: var(--error-text-color);
+}
+
+.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);
+}
+
+.data-grid table.header,
+.data-grid table.data {
+    /* Hide right border from first hidden columns. */
+    width: calc(100% + 1px);
+    margin-left: -1px;
+}
+
+.data-grid :matches(th, td):first-child {
+    border-left: 1px solid transparent;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .data-grid table.header,
+    .data-grid table.data {
+        width: calc(100% + 0.5px);
+        margin-left: -0.5px;
+    }
+
+    .data-grid :matches(th, td):first-child {
+        border-width: 0.5px;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGrid.js b/Source/WebInspectorUI/UserInterface/Views/DataGrid.js
new file mode 100644
index 000000000..d482ea655
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DataGrid.js
@@ -0,0 +1,1951 @@
+/*
+ * Copyright (C) 2008, 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.DataGrid = class DataGrid extends WebInspector.View
+{
+    constructor(columnsData, editCallback, deleteCallback, preferredColumnOrder)
+    {
+        super();
+
+        this.columns = new Map;
+        this.orderedColumns = [];
+
+        this._settingsIdentifier = null;
+        this._sortColumnIdentifier = null;
+        this._sortColumnIdentifierSetting = null;
+        this._sortOrder = WebInspector.DataGrid.SortOrder.Indeterminate;
+        this._sortOrderSetting = null;
+        this._hiddenColumnSetting = null;
+        this._columnChooserEnabled = false;
+        this._headerVisible = true;
+
+        this._rows = [];
+
+        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.rowHeight = 20;
+        this.resizers = [];
+        this._columnWidthsInitialized = false;
+        this._scrollbarWidth = 0;
+
+        this._cachedScrollTop = NaN;
+        this._cachedScrollableOffsetHeight = NaN;
+        this._previousRevealedRowCount = NaN;
+        this._topDataTableMarginHeight = NaN;
+        this._bottomDataTableMarginHeight = NaN;
+
+        this._filterText = "";
+        this._filterDelegate = null;
+        this._filterDidModifyNodeWhileProcessingItems = false;
+
+        this.element.className = "data-grid";
+        this.element.tabIndex = 0;
+        this.element.addEventListener("keydown", this._keyDown.bind(this), false);
+        this.element.copyHandler = this;
+
+        this._headerWrapperElement = document.createElement("div");
+        this._headerWrapperElement.classList.add("header-wrapper");
+
+        this._headerTableElement = document.createElement("table");
+        this._headerTableElement.className = "header";
+        this._headerWrapperElement.appendChild(this._headerTableElement);
+
+        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._scrollListener = () => this._noteScrollPositionChanged();
+        this._updateScrollListeners();
+
+        this._topDataTableMarginElement = this._scrollContainerElement.createChild("div");
+
+        this._dataTableElement = this._scrollContainerElement.createChild("table", "data");
+
+        this._bottomDataTableMarginElement = this._scrollContainerElement.createChild("div");
+
+        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", "filler");
+
+        this.element.appendChild(this._headerWrapperElement);
+        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]);
+        }
+
+        this._updateScrollbarPadding();
+
+        this._copyTextDelimiter = "\t";
+    }
+
+    _updateScrollbarPadding()
+    {
+        if (this._inline)
+            return;
+
+        let scrollbarWidth = this._scrollContainerElement.offsetWidth - this._scrollContainerElement.scrollWidth;
+        if (this._scrollbarWidth === scrollbarWidth)
+            return;
+
+        this._headerWrapperElement.style.paddingRight = scrollbarWidth + "px";
+        this._scrollbarWidth = scrollbarWidth;
+    }
+
+    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 headerVisible() { return this._headerVisible; }
+
+    set headerVisible(x)
+    {
+        if (x === this._headerVisible)
+            return;
+
+        this._headerVisible = x;
+        this.element.classList.toggle("no-header", !this._headerVisible);
+    }
+
+    get columnChooserEnabled() { return this._columnChooserEnabled; }
+    set columnChooserEnabled(x) { this._columnChooserEnabled = x; }
+
+    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);
+    }
+
+    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);
+    }
+
+    get inline() { return this._inline; }
+
+    set inline(x)
+    {
+        if (this._inline === x)
+            return;
+
+        this._inline = x || false;
+
+        this._element.classList.toggle("inline", this._inline);
+
+        this._updateScrollListeners();
+    }
+
+    get variableHeightRows() { return this._variableHeightRows; }
+
+    set variableHeightRows(x)
+    {
+        if (this._variableHeightRows === x)
+            return;
+
+        this._variableHeightRows = x || false;
+
+        this._element.classList.toggle("variable-height-rows", this._variableHeightRows);
+
+        this._updateScrollListeners();
+    }
+
+    get filterText() { return this._filterText; }
+
+    set filterText(x)
+    {
+        if (this._filterText === x)
+            return;
+
+        this._filterText = x;
+        this.filterDidChange();
+    }
+
+    get filterDelegate() { return this._filterDelegate; }
+
+    set filterDelegate(delegate)
+    {
+        this._filterDelegate = delegate;
+        this.filterDidChange();
+    }
+
+    filterDidChange()
+    {
+        if (this._scheduledFilterUpdateIdentifier)
+            return;
+
+        if (this._applyFilterToNodesTask) {
+            this._applyFilterToNodesTask.cancel();
+            this._applyFilterToNodesTask = null;
+        }
+
+        this._scheduledFilterUpdateIdentifier = requestAnimationFrame(this._updateFilter.bind(this));
+    }
+
+    hasFilters()
+    {
+        return this._textFilterRegex || this._hasFilterDelegate();
+    }
+
+    matchNodeAgainstCustomFilters(node)
+    {
+        if (!this._hasFilterDelegate())
+            return true;
+        return this._filterDelegate.dataGridMatchNodeAgainstCustomFilters(node);
+    }
+
+    createSettings(identifier)
+    {
+        console.assert(identifier && typeof identifier === "string");
+        if (this._settingsIdentifier === identifier)
+            return;
+
+        this._settingsIdentifier = identifier;
+
+        this._sortColumnIdentifierSetting = new WebInspector.Setting(this._settingsIdentifier + "-sort", this._sortColumnIdentifier);
+        this._sortOrderSetting = new WebInspector.Setting(this._settingsIdentifier + "-sort-order", this._sortOrder);
+        this._hiddenColumnSetting = new WebInspector.Setting(this._settingsIdentifier + "-hidden-columns", []);
+
+        if (!this.columns)
+            return;
+
+        if (this._sortColumnIdentifierSetting.value) {
+            this.sortColumnIdentifier = this._sortColumnIdentifierSetting.value;
+            this.sortOrder = this._sortOrderSetting.value;
+        }
+
+        for (let columnIdentifier of this._hiddenColumnSetting.value)
+            this.setColumnVisible(columnIdentifier, false);
+    }
+
+    _updateScrollListeners()
+    {
+        if (this._inline || this._variableHeightRows) {
+            this._scrollContainerElement.removeEventListener("scroll", this._scrollListener);
+            this._scrollContainerElement.removeEventListener("mousewheel", this._scrollListener);
+        } else {
+            this._scrollContainerElement.addEventListener("scroll", this._scrollListener);
+            this._scrollContainerElement.addEventListener("mousewheel", this._scrollListener);
+        }
+    }
+
+    _applyFiltersToNodeAndDispatchEvent(node)
+    {
+        const nodeWasHidden = node.hidden;
+        this._applyFiltersToNode(node);
+        if (nodeWasHidden !== node.hidden)
+            this.dispatchEventToListeners(WebInspector.DataGrid.Event.NodeWasFiltered, {node});
+
+        return nodeWasHidden !== node.hidden;
+    }
+
+    _applyFiltersToNode(node)
+    {
+        if (!this.hasFilters()) {
+            // No filters, so make everything visible.
+            node.hidden = false;
+
+            // If the node was expanded during filtering, collapse it again.
+            if (node.expanded && node[WebInspector.DataGrid.WasExpandedDuringFilteringSymbol]) {
+                node[WebInspector.DataGrid.WasExpandedDuringFilteringSymbol] = false;
+                node.collapse();
+            }
+
+            return;
+        }
+
+        let filterableData = node.filterableData || [];
+        let flags = {expandNode: false};
+        let filterRegex = this._textFilterRegex;
+
+        function matchTextFilter()
+        {
+            if (!filterableData.length || !filterRegex)
+                return true;
+
+            if (filterableData.some((value) => filterRegex.test(value))) {
+                flags.expandNode = true;
+                return true;
+            }
+
+            return false;
+        }
+
+        function makeVisible()
+        {
+            // Make this element visible.
+            node.hidden = false;
+
+            // Make the ancestors visible and expand them.
+            let currentAncestor = node.parent;
+            while (currentAncestor && !currentAncestor.root) {
+                currentAncestor.hidden = false;
+
+                // Only expand if the built-in filters matched, not custom filters.
+                if (flags.expandNode && !currentAncestor.expanded) {
+                    currentAncestor[WebInspector.DataGrid.WasExpandedDuringFilteringSymbol] = true;
+                    currentAncestor.expand();
+                }
+
+                currentAncestor = currentAncestor.parent;
+            }
+        }
+
+        if (matchTextFilter() && this.matchNodeAgainstCustomFilters(node)) {
+            // Make the node visible since it matches.
+            makeVisible();
+
+            // If the node didn't match a built-in filter and was expanded earlier during filtering, collapse it again.
+            if (!flags.expandNode && node.expanded && node[WebInspector.DataGrid.WasExpandedDuringFilteringSymbol]) {
+                node[WebInspector.DataGrid.WasExpandedDuringFilteringSymbol] = false;
+                node.collapse();
+            }
+
+            return;
+        }
+
+        // Make the node invisible since it does not match.
+        node.hidden = true;
+    }
+
+    _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);
+    }
+
+    _hasFilterDelegate()
+    {
+        return this._filterDelegate && typeof this._filterDelegate.dataGridMatchNodeAgainstCustomFilters === "function";
+    }
+
+    _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] + "%";
+            column["bodyElement"].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["tooltip"])
+            headerCellElement.title = column["tooltip"];
+
+        if (column["collapsesGroup"]) {
+            console.assert(column["group"] !== column["collapsesGroup"]);
+
+            headerCellElement.createChild("div", "divider");
+
+            var collapseDiv = headerCellElement.createChild("div", "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();
+
+        this.setColumnVisible(columnIdentifier, !column.hidden);
+    }
+
+    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.
+            let headerTableColumnElements = this._headerTableColumnGroupElement.children;
+            let tableWidth = this._dataTableElement.offsetWidth;
+            let numColumns = headerTableColumnElements.length;
+            let cells = this._headerTableBodyElement.rows[0].cells;
+
+            // Calculate widths.
+            let columnWidths = [];
+            for (let i = 0; i < numColumns; ++i) {
+                let headerCellElement = cells[i];
+                if (this._isColumnVisible(headerCellElement.columnIdentifier)) {
+                    let columnWidth = headerCellElement.offsetWidth;
+                    let percentWidth = ((columnWidth / tableWidth) * 100) + "%";
+                    columnWidths.push(percentWidth);
+                } else
+                    columnWidths.push(0);
+            }
+
+            // Apply widths.
+            for (let i = 0; i < numColumns; i++) {
+                let percentWidth = columnWidths[i];
+                this._headerTableColumnGroupElement.children[i].style.width = percentWidth;
+                this._dataTableColumnGroupElement.children[i].style.width = percentWidth;
+            }
+
+            this._columnWidthsInitialized = true;
+            this._updateHeaderAndScrollbar();
+        }
+
+        this._updateVisibleRows();
+    }
+
+    sizeDidChange()
+    {
+        this._updateHeaderAndScrollbar();
+    }
+
+    _updateHeaderAndScrollbar()
+    {
+        this._positionResizerElements();
+        this._positionHeaderViews();
+        this._updateScrollbarPadding();
+
+        this._cachedScrollTop = NaN;
+        this._cachedScrollableOffsetHeight = NaN;
+    }
+
+    columnWidthsMap()
+    {
+        var result = {};
+        for (var [identifier, column] of this.columns) {
+            var width = this._headerTableColumnGroupElement.children[column["ordinal"]].style.width;
+            result[identifier] = 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"];
+    }
+
+    setColumnVisible(columnIdentifier, visible)
+    {
+        let column = this.columns.get(columnIdentifier);
+        console.assert(column, "Missing column info for identifier: " + columnIdentifier);
+
+        if (!column || visible === !column.hidden)
+            return;
+
+        column.element.style.width = visible ? column.width : 0;
+        column.hidden = !visible;
+
+        if (this._hiddenColumnSetting) {
+            let hiddenColumns = this._hiddenColumnSetting.value.slice();
+            if (column.hidden)
+                hiddenColumns.push(columnIdentifier);
+            else
+                hiddenColumns.remove(columnIdentifier);
+
+            this._hiddenColumnSetting.value = hiddenColumns;
+        }
+
+        this._columnWidthsInitialized = false;
+        this.updateLayout();
+    }
+
+    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.
+        var numResizers = this.orderedColumns.length - 1;
+
+        // Calculate left offsets.
+        // 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.
+        var cells = this._headerTableBodyElement.rows[0].cells;
+        var columnWidths = [];
+        for (var i = 0; i < numResizers; ++i) {
+            left += cells[i].getBoundingClientRect().width;
+            columnWidths.push(left);
+        }
+
+        // Apply left offsets.
+        for (var i = 0; i < numResizers; ++i) {
+            // Create a new resizer if one does not exist for this column.
+            // This resizer is associated with the column to its right.
+            var resizer = this.resizers[i];
+            if (!resizer) {
+                resizer = this.resizers[i] = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
+                this.element.appendChild(resizer.element);
+            }
+
+            left = columnWidths[i];
+
+            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 left = 0;
+        let headerViews = [];
+        let lefts = [];
+        let columnWidths = [];
+
+        // Calculate left offsets and widths.
+        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) {
+                headerViews.push(headerView);
+                lefts.push(left);
+                columnWidths.push(columnWidth);
+            }
+
+            left += columnWidth;
+        }
+
+        // Apply left offsets and widths.
+        for (let i = 0; i < headerViews.length; ++i) {
+            let headerView = headerViews[i];
+            headerView.element.style.left = lefts[i] + "px";
+            headerView.element.style.width = columnWidths[i] + "px";
+            headerView.updateLayout(WebInspector.View.LayoutReason.Resize);
+        }
+    }
+
+    _noteRowsChanged()
+    {
+        this._previousRevealedRowCount = NaN;
+
+        this.needsLayout();
+    }
+
+    _noteRowRemoved(dataGridNode)
+    {
+        if (this._inline || this._variableHeightRows) {
+            // Inline DataGrids rows are not updated in layout, so
+            // we need to remove rows immediately.
+            if (dataGridNode.element && dataGridNode.element.parentNode)
+                dataGridNode.element.parentNode.removeChild(dataGridNode.element);
+            return;
+        }
+
+        this._noteRowsChanged();
+    }
+
+    _noteScrollPositionChanged()
+    {
+        this._cachedScrollTop = NaN;
+
+        this.needsLayout();
+    }
+
+    _updateVisibleRows()
+    {
+        if (this._inline || this._variableHeightRows) {
+            // Inline DataGrids always show all their rows, so we can't virtualize them.
+            // In general, inline DataGrids usually have a small number of rows.
+
+            // FIXME: This is a slow path for variable height rows that is similar to the old
+            // non-virtualized DataGrid. Ideally we would track row height per-DataGridNode
+            // and then we could virtualize even those cases. Currently variable height row
+            // DataGrids don't usually have many rows, other than IndexedDB.
+
+            let nextElement = this.dataTableBodyElement.lastChild;
+            for (let i = this._rows.length - 1; i >= 0; --i) {
+                let rowElement = this._rows[i].element;
+                if (rowElement.nextSibling !== nextElement)
+                    this.dataTableBodyElement.insertBefore(rowElement, nextElement);
+                nextElement = rowElement;
+            }
+
+            return;
+        }
+
+        let rowHeight = this.rowHeight;
+        let updateOffsetThreshold = rowHeight * 5;
+        let overflowPadding = updateOffsetThreshold * 3;
+
+        if (isNaN(this._cachedScrollTop))
+            this._cachedScrollTop = this._scrollContainerElement.scrollTop;
+
+        if (isNaN(this._cachedScrollableOffsetHeight))
+            this._cachedScrollableOffsetHeight = this._scrollContainerElement.offsetHeight;
+
+        let scrollTop = this._cachedScrollTop;
+        let scrollableOffsetHeight = this._cachedScrollableOffsetHeight;
+
+        let visibleRowCount = Math.ceil((scrollableOffsetHeight + (overflowPadding * 2)) / rowHeight);
+
+        let currentTopMargin = this._topDataTableMarginHeight;
+        let currentBottomMargin = this._bottomDataTableMarginHeight;
+        let currentTableBottom = currentTopMargin + (visibleRowCount * rowHeight);
+
+        let belowTopThreshold = !currentTopMargin || scrollTop > currentTopMargin + updateOffsetThreshold;
+        let aboveBottomThreshold = !currentBottomMargin || scrollTop + scrollableOffsetHeight < currentTableBottom - updateOffsetThreshold;
+
+        if (belowTopThreshold && aboveBottomThreshold && !isNaN(this._previousRevealedRowCount))
+            return;
+
+        let revealedRows = this._rows.filter((row) => row.revealed && !row.hidden);
+
+        this._previousRevealedRowCount = revealedRows.length;
+
+        let topHiddenRowCount = Math.max(0, Math.floor((scrollTop - overflowPadding) / rowHeight));
+        let bottomHiddenRowCount = Math.max(0, this._previousRevealedRowCount - topHiddenRowCount - visibleRowCount);
+
+        let marginTop = topHiddenRowCount * rowHeight;
+        let marginBottom = bottomHiddenRowCount * rowHeight;
+
+        if (this._topDataTableMarginHeight !== marginTop) {
+            this._topDataTableMarginHeight = marginTop;
+            this._topDataTableMarginElement.style.height = marginTop + "px";
+        }
+
+        if (this._bottomDataTableMarginElement !== marginBottom) {
+            this._bottomDataTableMarginHeight = marginBottom;
+            this._bottomDataTableMarginElement.style.height = marginBottom + "px";
+        }
+
+        this._dataTableElement.classList.toggle("odd-first-zebra-stripe", !!(topHiddenRowCount % 2));
+
+        this.dataTableBodyElement.removeChildren();
+
+        for (let i = topHiddenRowCount; i < topHiddenRowCount + visibleRowCount; ++i) {
+            let rowDataGridNode = revealedRows[i];
+            if (!rowDataGridNode)
+                continue;
+            this.dataTableBodyElement.appendChild(rowDataGridNode.element);
+        }
+
+        this.dataTableBodyElement.appendChild(this._fillerRowElement);
+    }
+
+    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;
+        delete child._leftPadding;
+        child._shouldRefreshChildren = true;
+
+        var current = child.children[0];
+        while (current) {
+            current.dataGrid = this.dataGrid;
+            delete current._depth;
+            delete current._revealed;
+            delete current._attached;
+            delete current._leftPadding;
+            current._shouldRefreshChildren = true;
+            current = current.traverseNextNode(false, child, true);
+        }
+
+        if (this.expanded)
+            child._attach();
+
+        if (!this.dataGrid.hasFilters())
+            return;
+
+        this.dataGrid._applyFiltersToNodeAndDispatchEvent(child);
+    }
+
+    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 = [];
+    }
+
+    findNode(comparator, skipHidden, stayWithin, dontPopulate)
+    {
+        console.assert(typeof comparator === "function");
+
+        let currentNode = this._rows[0];
+        while (currentNode && !currentNode.root) {
+            if (!currentNode.isPlaceholderNode && !(skipHidden && currentNode.hidden)) {
+                if (comparator(currentNode))
+                    return currentNode;
+            }
+
+            currentNode = currentNode.traverseNextNode(skipHidden, stayWithin, dontPopulate);
+        }
+
+        return null;
+    }
+
+    sortNodes(comparator)
+    {
+        if (this._sortNodesRequestId)
+            return;
+
+        this._sortNodesRequestId = window.requestAnimationFrame(this._sortNodesCallback.bind(this, comparator));
+    }
+
+    sortNodesImmediately(comparator)
+    {
+        this._sortNodesCallback(comparator);
+    }
+
+    _sortNodesCallback(comparator)
+    {
+        function comparatorWrapper(aNode, bNode)
+        {
+            console.assert(!aNode.hasChildren, "This sort method can't be used with parent nodes, children will be displayed out of order.");
+            console.assert(!bNode.hasChildren, "This sort method can't be used with parent nodes, children will be displayed out of order.");
+
+            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;
+        }
+
+        this._rows.sort(comparatorWrapper.bind(this));
+        this._noteRowsChanged();
+
+        let previousSiblingNode = null;
+        for (let node of this._rows) {
+            node.previousSibling = previousSiblingNode;
+            if (previousSiblingNode)
+                previousSiblingNode.nextSibling = node;
+            previousSiblingNode = node;
+        }
+
+        if (previousSiblingNode)
+            previousSiblingNode.nextSibling = null;
+
+        // A sortable data grid might not be added to a view, so it needs its layout updated here.
+        if (!this.parentView)
+            this.updateLayoutIfNeeded();
+    }
+
+    _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();
+        }
+    }
+
+    closed()
+    {
+        // Implemented by subclasses.
+    }
+
+    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);
+
+        for (var [identifier, column] of this.columns) {
+            if (column["group"] === cell.collapsesGroup)
+                this.setColumnVisible(identifier, !columnsWillCollapse);
+        }
+
+        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 headerCellElement = event.target.enclosingNodeOrSelfWithNodeName("th");
+        if (!headerCellElement)
+            return;
+
+        let columnIdentifier = headerCellElement.columnIdentifier;
+        let column = this.columns.get(columnIdentifier);
+        console.assert(column, "Missing column info for identifier: " + columnIdentifier);
+        if (!column)
+            return;
+
+        if (column.sortable) {
+            contextMenu.appendSeparator();
+
+            if (this.sortColumnIdentifier !== columnIdentifier || this.sortOrder !== WebInspector.DataGrid.SortOrder.Ascending) {
+                contextMenu.appendItem(WebInspector.UIString("Sort Ascending"), () => {
+                    this._selectSortColumnAndSetOrder(columnIdentifier, WebInspector.DataGrid.SortOrder.Ascending);
+                });
+            }
+
+            if (this.sortColumnIdentifier !== columnIdentifier || this.sortOrder !== WebInspector.DataGrid.SortOrder.Descending) {
+                contextMenu.appendItem(WebInspector.UIString("Sort Descending"), () => {
+                    this._selectSortColumnAndSetOrder(columnIdentifier, WebInspector.DataGrid.SortOrder.Descending);
+                });
+            }
+        }
+
+        if (this._columnChooserEnabled) {
+            let didAddSeparator = false;
+
+            for (let [identifier, columnInfo] of this.columns) {
+                if (columnInfo.locked)
+                    continue;
+
+                if (!didAddSeparator) {
+                    contextMenu.appendSeparator();
+                    didAddSeparator = true;
+                }
+
+                contextMenu.appendCheckboxItem(columnInfo.title, () => { this.setColumnVisible(identifier, columnInfo.hidden); }, !columnInfo.hidden);
+            }
+        }
+    }
+
+    _contextMenuInDataTable(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        let gridNode = this.dataGridNodeFromNode(event.target);
+
+        if (gridNode)
+            gridNode.appendContextMenuItems(contextMenu);
+
+        if (this.dataGrid._refreshCallback && (!gridNode || gridNode !== this.placeholderNode))
+            contextMenu.appendItem(WebInspector.UIString("Refresh"), this._refreshCallback.bind(this));
+
+        if (gridNode) {
+            if (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));
+            }
+
+            if (gridNode.children.some((child) => child.hasChildren) || (gridNode.hasChildren && !gridNode.children.length)) {
+                contextMenu.appendSeparator();
+
+                contextMenu.appendItem(WebInspector.UIString("Expand All"), gridNode.expandRecursively.bind(gridNode));
+                contextMenu.appendItem(WebInspector.UIString("Collapse All"), gridNode.collapseRecursively.bind(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) || "";
+    }
+
+    set copyTextDelimiter(value) { this._copyTextDelimiter = value; }
+
+    _copyTextForDataGridNode(node)
+    {
+        let fields = node.dataGrid.orderedColumns.map((identifier) => this.textForDataGridNodeColumn(node, identifier));
+        return fields.join(this._copyTextDelimiter);
+    }
+
+    _copyTextForDataGridHeaders()
+    {
+        let fields = this.orderedColumns.map((identifier) => this.headerTableHeader(identifier).textContent);
+        return fields.join(this._copyTextDelimiter);
+    }
+
+    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 leftColumnIndex = resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol];
+        var rightColumnIndex = resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol];
+        var firstRowCells = this._headerTableBodyElement.rows[0].cells;
+        var leftEdgeOfPreviousColumn = 0;
+        for (var i = 0; i < leftColumnIndex; i++)
+            leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth;
+
+        // Differences for other resize methods
+        if (this.resizeMethod === WebInspector.DataGrid.ResizeMethod.Last) {
+            rightColumnIndex = this.resizers.length;
+        } else if (this.resizeMethod === WebInspector.DataGrid.ResizeMethod.First) {
+            leftEdgeOfPreviousColumn += firstRowCells[leftColumnIndex].offsetWidth - firstRowCells[0].offsetWidth;
+            leftColumnIndex = 0;
+        }
+
+        var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[leftColumnIndex].offsetWidth + firstRowCells[rightColumnIndex].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[leftColumnIndex].style.width = percentLeftColumn;
+        this._dataTableColumnGroupElement.children[leftColumnIndex].style.width = percentLeftColumn;
+
+        var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / this._dataTableElement.offsetWidth) * 100) + "%";
+        this._headerTableColumnGroupElement.children[rightColumnIndex].style.width = percentRightColumn;
+        this._dataTableColumnGroupElement.children[rightColumnIndex].style.width = percentRightColumn;
+
+        this._positionResizerElements();
+        this._positionHeaderViews();
+
+        const skipHidden = true;
+        const dontPopulate = true;
+
+        let leftColumnIdentifier = this.orderedColumns[leftColumnIndex];
+        let rightColumnIdentifier = this.orderedColumns[rightColumnIndex];
+        let child = this.children[0];
+
+        while (child) {
+            child.didResizeColumn(leftColumnIdentifier);
+            child.didResizeColumn(rightColumnIdentifier);
+            child = child.traverseNextNode(skipHidden, this, dontPopulate);
+        }
+
+        event.preventDefault();
+    }
+
+    resizerDragEnded(resizer)
+    {
+        console.assert(resizer === this._currentResizer, resizer, this._currentResizer);
+        if (resizer !== this._currentResizer)
+            return;
+
+        this._currentResizer = null;
+    }
+
+    _updateFilter()
+    {
+        if (this._scheduledFilterUpdateIdentifier) {
+            cancelAnimationFrame(this._scheduledFilterUpdateIdentifier);
+            this._scheduledFilterUpdateIdentifier = undefined;
+        }
+
+        if (!this._rows.length)
+            return;
+
+        this._textFilterRegex = simpleGlobStringToRegExp(this._filterText, "i");
+
+        if (this._applyFilterToNodesTask && this._applyFilterToNodesTask.processing)
+            this._applyFilterToNodesTask.cancel();
+
+        function *createIteratorForNodesToBeFiltered()
+        {
+            // 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.hasFilters();
+
+            let currentNode = this._rows[0];
+            while (currentNode && !currentNode.root) {
+                yield currentNode;
+                currentNode = currentNode.traverseNextNode(false, null, dontPopulate);
+            }
+        }
+
+        let items = createIteratorForNodesToBeFiltered.call(this);
+        this._applyFilterToNodesTask = new WebInspector.YieldableTask(this, items, {workInterval: 100});
+
+        this._filterDidModifyNodeWhileProcessingItems = false;
+
+        this._applyFilterToNodesTask.start();
+    }
+
+    // YieldableTask delegate
+
+    yieldableTaskWillProcessItem(task, node)
+    {
+        let nodeWasModified = this._applyFiltersToNodeAndDispatchEvent(node);
+        if (nodeWasModified)
+            this._filterDidModifyNodeWhileProcessingItems = true;
+    }
+
+    yieldableTaskDidYield(task, processedItems, elapsedTime)
+    {
+        if (!this._filterDidModifyNodeWhileProcessingItems)
+            return;
+
+        this._filterDidModifyNodeWhileProcessingItems = false;
+
+        this.dispatchEventToListeners(WebInspector.DataGrid.Event.FilterDidChange);
+    }
+
+    yieldableTaskDidFinish(task)
+    {
+        this._applyFilterToNodesTask = null;
+    }
+};
+
+WebInspector.DataGrid.Event = {
+    SortChanged: "datagrid-sort-changed",
+    SelectedNodeChanged: "datagrid-selected-node-changed",
+    ExpandedNode: "datagrid-expanded-node",
+    CollapsedNode: "datagrid-collapsed-node",
+    FilterDidChange: "datagrid-filter-did-change",
+    NodeWasFiltered: "datagrid-node-was-filtered"
+};
+
+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.WasExpandedDuringFilteringSymbol = Symbol("was-expanded-during-filtering");
+
+WebInspector.DataGrid.ColumnResizePadding = 10;
+WebInspector.DataGrid.CenterResizerOverBorderAdjustment = 3;
+
+WebInspector.DataGrid.SortColumnAscendingStyleClassName = "sort-ascending";
+WebInspector.DataGrid.SortColumnDescendingStyleClassName = "sort-descending";
+WebInspector.DataGrid.SortableColumnStyleClassName = "sortable";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/DataGridNode.js
new file mode 100644
index 000000000..27130806c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DataGridNode.js
@@ -0,0 +1,755 @@
+/*
+ * Copyright (C) 2008, 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.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);
+
+        if (this.dataGrid)
+            this.dataGrid._noteRowsChanged();
+    }
+
+    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));
+    }
+
+    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 filterableData()
+    {
+        if (this._cachedFilterableData)
+            return this._cachedFilterableData;
+
+        this._cachedFilterableData = [];
+
+        for (let column of this.dataGrid.columns.values()) {
+            if (column.hidden)
+                continue;
+
+            let value = this.filterableDataForColumn(column.columnIdentifier);
+            if (!value)
+                continue;
+
+            if (!(value instanceof Array))
+                value = [value];
+
+            if (!value.length)
+                continue;
+
+            this._cachedFilterableData = this._cachedFilterableData.concat(value);
+        }
+
+        return this._cachedFilterableData;
+    }
+
+    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();
+    }
+
+    hasAncestor(ancestor)
+    {
+        if (!ancestor)
+            return false;
+
+        let currentAncestor = this.parent;
+        while (currentAncestor) {
+            if (ancestor === currentAncestor)
+                return true;
+
+            currentAncestor = currentAncestor.parent;
+        }
+
+        return false;
+    }
+
+    refresh()
+    {
+        if (!this._element || !this.dataGrid)
+            return;
+
+        if (this._scheduledRefreshIdentifier) {
+            cancelAnimationFrame(this._scheduledRefreshIdentifier);
+            this._scheduledRefreshIdentifier = undefined;
+        }
+
+        this._cachedFilterableData = null;
+        this._needsRefresh = false;
+
+        this._element.removeChildren();
+        this.createCells();
+    }
+
+    refreshRecursively()
+    {
+        this.refresh();
+        this.forEachChildInSubtree((node) => node.refresh());
+    }
+
+    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", "cell-content");
+        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)
+    {
+        if (!this.dataGrid)
+            return null;
+
+        let 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});
+            this.dataGrid._noteRowsChanged();
+        }
+    }
+
+    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});
+            this.dataGrid._noteRowsChanged();
+        }
+    }
+
+    expandRecursively()
+    {
+        var item = this;
+        while (item) {
+            item.expand();
+            item = item.traverseNextNode(false, this);
+        }
+    }
+
+    forEachImmediateChild(callback)
+    {
+        for (let node of this.children)
+            callback(node);
+    }
+
+    forEachChildInSubtree(callback)
+    {
+        let node = this.traverseNextNode(false, this, true);
+        while (node) {
+            callback(node);
+            node = node.traverseNextNode(false, this, true);
+        }
+    }
+
+    isInSubtreeOfNode(baseNode)
+    {
+        let node = baseNode;
+        while (node) {
+            if (node === this)
+                return true;
+            node = node.traverseNextNode(false, baseNode, true);
+        }
+        return false;
+    }
+
+    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;
+
+        let oldSelectedNode = this.dataGrid.selectedNode;
+        if (oldSelectedNode)
+            oldSelectedNode.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, {oldSelectedNode});
+    }
+
+    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, {oldSelectedNode: this});
+    }
+
+    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 || !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;
+
+        let insertionIndex = -1;
+
+        if (!this.isPlaceholderNode) {
+            var previousGridNode = this.traversePreviousNode(true, true);
+            insertionIndex = this.dataGrid._rows.indexOf(previousGridNode);
+            if (insertionIndex === -1)
+                insertionIndex = 0;
+            else
+                insertionIndex++;
+        }
+
+        if (insertionIndex === -1)
+            this.dataGrid._rows.push(this);
+        else
+            this.dataGrid._rows.insertAtIndex(this, insertionIndex);
+
+        this.dataGrid._noteRowsChanged();
+
+        if (this.expanded) {
+            for (var i = 0; i < this.children.length; ++i)
+                this.children[i]._attach();
+        }
+    }
+
+    _detach()
+    {
+        if (!this._attached)
+            return;
+
+        this._attached = false;
+
+        this.dataGrid._rows.remove(this, true);
+        this.dataGrid._noteRowRemoved(this);
+
+        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;
+    }
+
+    appendContextMenuItems(contextMenu)
+    {
+        // Subclasses may override
+        return null;
+    }
+
+    // Protected
+
+    filterableDataForColumn(columnIdentifier)
+    {
+        let value = this.data[columnIdentifier];
+        return typeof value === "string" ? value : null;
+    }
+
+    didResizeColumn(columnIdentifier)
+    {
+        // Override by subclasses.
+    }
+};
+
+// 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..acc9bf731
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js
@@ -0,0 +1,129 @@
+/*
+ * 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()
+    {
+        super.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..a355df281
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseHostTreeElement.js
@@ -0,0 +1,49 @@
+/*
+ * 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;
+        this.expanded = 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..0e3639546
--- /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: 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..5be0aebfa
--- /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: 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..0944dc99f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQuerySuccessView.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.DatabaseUserQuerySuccessView = class DatabaseUserQuerySuccessView extends WebInspector.DatabaseUserQueryViewBase
+{
+    constructor(query, columnNames, values)
+    {
+        super(query);
+
+        this._dataGrid = WebInspector.DataGrid.createSortableDataGrid(columnNames, values);
+        if (this._dataGrid) {
+            this._dataGrid.inline = true;
+
+            this.resultElement.appendChild(this._dataGrid.element);
+
+            this._dataGrid.updateLayoutIfNeeded();
+        } 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..616d3d0ac
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
@@ -0,0 +1,159 @@
+/*
+ * 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;
+}
+
+.dashboard.debugger .navigation-bar .item.debugger-dashboard-pause.activated {
+    fill: none;
+    stroke: var(--glyph-color-active);
+}
+
+@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..48192a608
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.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.navigation.debugger > :matches(.content, .empty-content-placeholder) {
+    top: var(--navigation-bar-height);
+}
+
+.sidebar > .panel.navigation.debugger > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.sidebar > .panel.navigation.debugger > .navigation-bar .debugger-breakpoints {
+    fill: none;
+    stroke: var(--glyph-color);
+}
+.sidebar > .panel.navigation.debugger > .navigation-bar .debugger-breakpoints.activated {
+    fill: var(--glyph-color-active);
+    stroke: var(--glyph-color-active);
+}
+
+.sidebar > .panel.navigation.debugger > .navigation-bar .debugger-pause-resume {
+    fill: none;
+    stroke: var(--glyph-color);
+}
+.sidebar > .panel.navigation.debugger > .navigation-bar .debugger-pause-resume.activated {
+    stroke: var(--glyph-color-active);
+}
+
+.sidebar > .panel.navigation.debugger .warning-banner {
+    text-align: center;
+    font-size: 11px;
+
+    padding: 11px 6px;
+    margin-bottom: 6px;
+
+    border-bottom: 1px solid var(--border-color);
+    background-color: hsl(50, 100%, 94%);
+}
+
+.sidebar > .panel.navigation.debugger .tree-outline.single-thread > .item.thread {
+    display: none;
+}
+
+.sidebar > .panel.navigation.debugger .tree-outline.single-thread {
+    margin-left: -10px;
+}
+
+.sidebar > .panel.navigation.debugger .warning-banner > a {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.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:not(.collapsed) {
+    border-bottom: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
new file mode 100644
index 000000000..767a41275
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
@@ -0,0 +1,1018 @@
+/*
+ * 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.Target.addEventListener(WebInspector.Target.Event.ResourceAdded, this._resourceAdded, 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.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.CallFramesDidChange, this._debuggerCallFramesDidChange, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.WaitingToPause, this._debuggerWaitingToPause, this);
+
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingWillStart, this._timelineCapturingWillStart, this);
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._timelineCapturingStopped, this);
+
+        WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Event.TargetAdded, this._targetAdded, this);
+        WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Event.TargetRemoved, this._targetRemoved, this);
+
+        this._timelineRecordingWarningElement = document.createElement("div");
+        this._timelineRecordingWarningElement.classList.add("warning-banner");
+        this._timelineRecordingWarningElement.append(WebInspector.UIString("Debugger disabled during Timeline recording"), " ");
+        let stopRecordingLink = this._timelineRecordingWarningElement.appendChild(document.createElement("a"));
+        stopRecordingLink.textContent = WebInspector.UIString("Stop recording");
+        stopRecordingLink.addEventListener("click", () => { WebInspector.timelineManager.stopCapturing(); });
+
+        this._breakpointsDisabledWarningElement = document.createElement("div");
+        this._breakpointsDisabledWarningElement.classList.add("warning-banner");
+        this._breakpointsDisabledWarningElement.append(WebInspector.UIString("Breakpoints disabled"), document.createElement("br"));
+        let enableBreakpointsLink = this._breakpointsDisabledWarningElement.appendChild(document.createElement("a"));
+        enableBreakpointsLink.textContent = WebInspector.UIString("Enable breakpoints");
+        enableBreakpointsLink.addEventListener("click", () => { WebInspector.debuggerToggleBreakpoints(); });
+
+        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._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("Uncaught Exceptions"));
+        this._assertionsBreakpointTreeElement = new WebInspector.BreakpointTreeElement(WebInspector.debuggerManager.assertionsBreakpoint, WebInspector.DebuggerSidebarPanel.AssertionIconStyleClassName, WebInspector.UIString("Assertion Failures"));
+
+        this.suppressFilteringOnTreeElements([this._allExceptionsBreakpointTreeElement, this._allUncaughtExceptionsBreakpointTreeElement, this._assertionsBreakpointTreeElement]);
+
+        this.filterBar.placeholder = WebInspector.UIString("Filter List");
+
+        function showResourcesWithIssuesOnlyFilterFunction(treeElement)
+        {
+            // Issues are only shown in the scripts tree outline.
+            if (treeElement.treeOutline !== this._scriptsContentTreeOutline)
+                return true;
+
+            // 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.bind(this), false, WebInspector.UIString("Only show resources with issues"), WebInspector.UIString("Show all resources"), "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("breakpoints", WebInspector.UIString("Breakpoints"), [breakpointsGroup]);
+        this.contentView.element.appendChild(breakpointsSection.element);
+
+        this._breakpointSectionElement = breakpointsSection.element;
+
+        this._breakpointsContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+        this._breakpointsContentTreeOutline.ondelete = this._breakpointTreeOutlineDeleteTreeElement.bind(this);
+        this._breakpointsContentTreeOutline.populateContextMenu = function(contextMenu, event, treeElement) {
+            this._breakpointTreeOutlineContextMenuTreeElement(contextMenu, event, treeElement);
+
+            WebInspector.TreeOutline.prototype.populateContextMenu(contextMenu, event, treeElement);
+        }.bind(this);
+
+        this._breakpointsContentTreeOutline.appendChild(this._allExceptionsBreakpointTreeElement);
+        this._breakpointsContentTreeOutline.appendChild(this._allUncaughtExceptionsBreakpointTreeElement);
+
+        // COMPATIBILITY (iOS 10): DebuggerAgent.setPauseOnAssertions did not exist yet.
+        if (DebuggerAgent.setPauseOnAssertions)
+            this._breakpointsContentTreeOutline.appendChild(this._assertionsBreakpointTreeElement);
+
+        this._scriptsContentTreeOutline = this.createContentTreeOutline();
+        this._scriptsContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+
+        let scriptsRow = new WebInspector.DetailsSectionRow;
+        scriptsRow.element.appendChild(this._scriptsContentTreeOutline.element);
+
+        let scriptsGroup = new WebInspector.DetailsSectionGroup([scriptsRow]);
+        this._scriptsSection = new WebInspector.DetailsSection("scripts", WebInspector.UIString("Sources"), [scriptsGroup]);
+        this.contentView.element.appendChild(this._scriptsSection.element);
+
+        const suppressFiltering = true;
+        this._callStackTreeOutline = this.createContentTreeOutline(suppressFiltering);
+        this._callStackTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+
+        this._mainTargetTreeElement = new WebInspector.ThreadTreeElement(WebInspector.mainTarget);
+        this._callStackTreeOutline.appendChild(this._mainTargetTreeElement);
+
+        this._updateCallStackTreeOutline();
+
+        this._callStackRow = new WebInspector.DetailsSectionRow;
+        this._callStackRow.element.appendChild(this._callStackTreeOutline.element);
+
+        this._callStackGroup = new WebInspector.DetailsSectionGroup([this._callStackRow]);
+        this._callStackSection = new WebInspector.DetailsSection("call-stack", WebInspector.UIString("Call Stack"), [this._callStackGroup]);
+
+        this._showingSingleThreadCallStack = true;
+
+        this._activeCallFrameTreeElement = null;
+
+        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", WebInspector.UIString("Pause Reason"), [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
+
+        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);
+
+        if (WebInspector.debuggerManager.paused)
+            this._debuggerDidPause(null);
+
+        if (WebInspector.timelineManager.isCapturing() && WebInspector.debuggerManager.breakpointsDisabledTemporarily)
+            this._timelineCapturingWillStart(null);
+
+        this._updateBreakpointsDisabledBanner();
+    }
+
+    // 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) {
+                if (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;
+
+        let treeElement = this._breakpointsContentTreeOutline.findTreeElement(representedObject);
+        if (!treeElement)
+            treeElement = this._scriptsContentTreeOutline.findTreeElement(representedObject);
+
+        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.
+
+        return this._addScript(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;
+        }
+
+        if (representedObject === WebInspector.debuggerManager.assertionsBreakpoint) {
+            cookie[WebInspector.DebuggerSidebarPanel.SelectedAssertionsCookieKey] = 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 if (cookie[WebInspector.DebuggerSidebarPanel.SelectedAssertionsCookieKey])
+            this._assertionsBreakpointTreeElement.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._debuggerStepOutButtonItem.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;
+
+        this._updateBreakpointsDisabledBanner();
+    }
+
+    _addBreakpoint(breakpoint)
+    {
+        let sourceCode = breakpoint.sourceCodeLocation.displaySourceCode;
+        if (!sourceCode)
+            return null;
+
+        if (this._breakpointsContentTreeOutline.findTreeElement(breakpoint))
+            return;
+
+        let parentTreeElement = this._addTreeElementForSourceCodeToTreeOutline(sourceCode, this._breakpointsContentTreeOutline);
+
+        // 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;
+
+        let 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);
+    }
+
+    _addTreeElementForSourceCodeToTreeOutline(sourceCode, treeOutline)
+    {
+        let treeElement = treeOutline.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 null;
+        }
+
+        if (!treeElement.parent) {
+            treeElement.hasChildren = false;
+            treeElement.expand();
+
+            treeOutline.insertChild(treeElement, insertionIndexForObjectInListSortedByFunction(treeElement, treeOutline.children, this._compareTopLevelTreeElements.bind(this)));
+        }
+
+        return treeElement;
+    }
+
+    _addResourcesRecursivelyForFrame(frame)
+    {
+        this._addResource(frame.mainResource);
+
+        for (let resource of frame.resourceCollection.items)
+            this._addResource(resource);
+
+        for (let childFrame of frame.childFrameCollection.items)
+            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._addTreeElementForSourceCodeToTreeOutline(resource, this._scriptsContentTreeOutline);
+        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();
+        }
+
+        if (!event.data.oldMainResource) {
+            var resource = event.target.mainResource;
+            this._addTreeElementForSourceCodeToTreeOutline(resource, this._scriptsContentTreeOutline);
+            this._addBreakpointsForSourceCode(resource);
+            this._addIssuesForSourceCode(resource);
+        }
+    }
+
+    _timelineCapturingWillStart(event)
+    {
+        this._debuggerBreakpointsButtonItem.enabled = false;
+        this._debuggerPauseResumeButtonItem.enabled = false;
+
+        this.contentView.element.insertBefore(this._timelineRecordingWarningElement, this.contentView.element.firstChild);
+        this._updateBreakpointsDisabledBanner();
+    }
+
+    _timelineCapturingStopped(event)
+    {
+        this._debuggerBreakpointsButtonItem.enabled = true;
+        this._debuggerPauseResumeButtonItem.enabled = true;
+
+        this._timelineRecordingWarningElement.remove();
+        this._updateBreakpointsDisabledBanner();
+    }
+
+    _updateBreakpointsDisabledBanner()
+    {
+        let breakpointsEnabled = WebInspector.debuggerManager.breakpointsEnabled;
+        let timelineWarningShowing = !!this._timelineRecordingWarningElement.parentElement;
+
+        if (!breakpointsEnabled && !timelineWarningShowing)
+            this.contentView.element.insertBefore(this._breakpointsDisabledWarningElement, this.contentView.element.firstChild);
+        else
+            this._breakpointsDisabledWarningElement.remove();
+    }
+
+    _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 && !script.sourceURL)
+            return null;
+
+        // In general, do not show dynamically added script elements.
+        if (script.dynamicallyAddedScriptElement && !script.sourceURL)
+            return null;
+
+        // Don't add breakpoints if the script is represented by a Resource. They were
+        // already added by _resourceAdded.
+        if (script.resource)
+            return null;
+
+        let treeElement = this._addTreeElementForSourceCodeToTreeOutline(script, this._scriptsContentTreeOutline);
+        this._addBreakpointsForSourceCode(script);
+        this._addIssuesForSourceCode(script);
+
+        if (!this.contentBrowser.currentContentView)
+            this.showDefaultContentViewForTreeElement(treeElement);
+
+        return treeElement;
+    }
+
+    _scriptRemoved(event)
+    {
+        function removeScript(script, treeOutline)
+        {
+            let scriptTreeElement = treeOutline.getCachedTreeElement(script);
+            if (scriptTreeElement)
+                scriptTreeElement.parent.removeChild(scriptTreeElement);
+        }
+
+        let script = event.data.script;
+        removeScript(script, this._breakpointsContentTreeOutline);
+        removeScript(script, this._scriptsContentTreeOutline);
+    }
+
+    _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);
+        }
+
+        this._scriptsContentTreeOutline.removeChildren();
+
+        this._addResourcesRecursivelyForFrame(WebInspector.frameResourceManager.mainFrame);
+    }
+
+    _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);
+    }
+
+    _findThreadTreeElementForTarget(target)
+    {
+        for (let child of this._callStackTreeOutline.children) {
+            if (child.target === target)
+                return child;
+        }
+
+        return null;
+    }
+
+    _targetAdded(event)
+    {
+        let target = event.data.target;
+        let treeElement = new WebInspector.ThreadTreeElement(target);
+        this._callStackTreeOutline.appendChild(treeElement);
+
+        this._updateCallStackTreeOutline();
+    }
+
+    _targetRemoved(event)
+    {
+        let target = event.data.target;
+        let treeElement = this._findThreadTreeElementForTarget(target);
+        this._callStackTreeOutline.removeChild(treeElement);
+
+        this._updateCallStackTreeOutline();
+    }
+
+    _updateCallStackTreeOutline()
+    {
+        let singleThreadShowing = WebInspector.targets.size === 1;
+        this._callStackTreeOutline.element.classList.toggle("single-thread", singleThreadShowing);
+        this._mainTargetTreeElement.selectable = !singleThreadShowing;
+    }
+
+    _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)
+    {
+        // If this is a BreakpointTreeElement being deleted because of a cause
+        // outside of the TreeOutline then deselect if it is selected to avoid
+        // TreeOutline selection changes causing unexpected ContentView changes.
+        if (!debuggerTreeElement.__deletedViaDeleteKeyboardShortcut)
+            debuggerTreeElement.deselect();
+
+        let parentTreeElement = debuggerTreeElement.parent;
+        parentTreeElement.removeChild(debuggerTreeElement);
+
+        console.assert(parentTreeElement.parent === this._breakpointsContentTreeOutline);
+        if (parentTreeElement.children.length)
+            return;
+
+        parentTreeElement.treeOutline.removeChild(parentTreeElement);
+    }
+
+    _debuggerCallFramesDidChange(event)
+    {
+        let target = event.data.target;
+        let treeElement = this._findThreadTreeElementForTarget(target);
+        treeElement.refresh();
+    }
+
+    _debuggerActiveCallFrameDidChange()
+    {
+        if (this._activeCallFrameTreeElement) {
+            this._activeCallFrameTreeElement.isActiveCallFrame = false;
+            this._activeCallFrameTreeElement = null;
+        }
+
+        if (!WebInspector.debuggerManager.activeCallFrame)
+            return;
+
+        this._activeCallFrameTreeElement = this._callStackTreeOutline.findTreeElement(WebInspector.debuggerManager.activeCallFrame);
+        if (this._activeCallFrameTreeElement)
+            this._activeCallFrameTreeElement.isActiveCallFrame = true;
+    }
+
+    _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._assertionsBreakpointTreeElement || 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(contextMenu, event, treeElement)
+    {
+        // This check is necessary since the context menu is created by the TreeOutline, meaning
+        // that any child could be the target of the context menu event.
+        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);
+        };
+
+        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;
+
+        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
+            WebInspector.showSourceCode(treeElement.representedObject);
+            return;
+        }
+
+        if (treeElement instanceof WebInspector.CallFrameTreeElement) {
+            let callFrame = treeElement.callFrame;
+            if (callFrame.id)
+                WebInspector.debuggerManager.activeCallFrame = callFrame;
+
+            if (callFrame.sourceCodeLocation)
+                WebInspector.showSourceCodeLocation(callFrame.sourceCodeLocation);
+            return;
+        }
+
+        if (treeElement instanceof WebInspector.IssueTreeElement) {
+            WebInspector.showSourceCodeLocation(treeElement.issueMessage.sourceCodeLocation);
+            return;
+        }
+
+        if (!(treeElement instanceof WebInspector.BreakpointTreeElement))
+            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)
+    {
+        function isSpecialBreakpoint(treeElement)
+        {
+            return treeElement.representedObject === WebInspector.debuggerManager.allExceptionsBreakpoint
+                || treeElement.representedObject === WebInspector.debuggerManager.allUncaughtExceptionsBreakpoint
+                || treeElement.representedObject === WebInspector.debuggerManager.assertionsBreakpoint;
+        }
+
+        if (isSpecialBreakpoint(a))
+            return -1;
+        if (isSpecialBreakpoint(b))
+            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()
+    {
+        let target = WebInspector.debuggerManager.activeCallFrame.target;
+        let targetData = WebInspector.debuggerManager.dataForTarget(target);
+        let {pauseReason, pauseData} = targetData;
+
+        switch (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) {
+                const suppressFiltering = true;
+                this._pauseReasonTreeOutline = this.createContentTreeOutline(suppressFiltering);
+                this._pauseReasonTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+
+                let breakpoint = WebInspector.debuggerManager.breakpointForIdentifier(pauseData.breakpointId);
+                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, target);
+                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);
+
+        return null;
+    }
+
+    _addIssue(issueMessage)
+    {
+        let issueTreeElement = this._scriptsContentTreeOutline.findTreeElement(issueMessage);
+        if (issueTreeElement)
+            return issueTreeElement;
+
+        let parentTreeElement = this._addTreeElementForSourceCodeToTreeOutline(issueMessage.sourceCodeLocation.sourceCode, this._scriptsContentTreeOutline);
+        if (!parentTreeElement)
+            return null;
+
+        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)
+    {
+        let currentTreeElement = this._scriptsContentTreeOutline.children[0];
+        let issueTreeElements = [];
+
+        while (currentTreeElement && !currentTreeElement.root) {
+            if (currentTreeElement instanceof WebInspector.IssueTreeElement)
+                issueTreeElements.push(currentTreeElement);
+            currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, true);
+        }
+
+        issueTreeElements.forEach((treeElement) => treeElement.parent.removeChild(treeElement));
+    }
+};
+
+WebInspector.DebuggerSidebarPanel.DebuggerPausedStyleClassName = "paused";
+WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName = "breakpoint-exception-icon";
+WebInspector.DebuggerSidebarPanel.AssertionIconStyleClassName = "breakpoint-assertion-icon";
+WebInspector.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName = "breakpoint-paused-icon";
+
+WebInspector.DebuggerSidebarPanel.SelectedAllExceptionsCookieKey = "debugger-sidebar-panel-all-exceptions-breakpoint";
+WebInspector.DebuggerSidebarPanel.SelectedAllUncaughtExceptionsCookieKey = "debugger-sidebar-panel-all-uncaught-exceptions-breakpoint";
+WebInspector.DebuggerSidebarPanel.SelectedAssertionsCookieKey = "debugger-sidebar-panel-assertions-breakpoint";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js
new file mode 100644
index 000000000..a15406da1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js
@@ -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.
+ */
+
+WebInspector.DebuggerTabContentView = class DebuggerTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.DebuggerTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.GeneralTabBarItem(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;
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        return true;
+    }
+
+    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..07a0912b0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css
@@ -0,0 +1,196 @@
+/*
+ * 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, sans-serif;
+    font-variant-numeric: tabular-nums;
+}
+
+.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);
+    --dashboard-item-padding-start: 2px;
+}
+
+body[dir=ltr] .toolbar .dashboard.default > .item > div {
+    padding-left: var(--dashboard-item-padding-start);
+}
+
+body[dir=rtl] .toolbar .dashboard.default > .item > div {
+    padding-right: var(--dashboard-item-padding-start);
+}
+
+.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..79ce12309
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js
@@ -0,0 +1,200 @@
+/*
+ * 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, () => { this._updateDisplaySoon(); });
+        this._scheduledUpdateIdentifier = undefined;
+
+        this._items = {
+            resourcesCount: {
+                tooltip: WebInspector.UIString("Show page resources"),
+                handler: this._resourcesItemWasClicked
+            },
+            resourcesSize: {
+                tooltip: WebInspector.UIString("Show network information"),
+                handler: this._networkItemWasClicked
+            },
+            time: {
+                tooltip: WebInspector.UIString("Show page load timing"),
+                handler: this._timelineItemWasClicked
+            },
+            logs: {
+                tooltip: WebInspector.UIString("Show messages logged to the Console"),
+                handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Logs)
+            },
+            errors: {
+                tooltip: WebInspector.UIString("Show errors logged to the Console"),
+                handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Errors)
+            },
+            issues: {
+                tooltip: WebInspector.UIString("Show warnings logged to the Console"),
+                handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Warnings)
+            }
+        };
+
+        for (var name in this._items)
+            this._appendElementForNamedItem(name);
+    }
+
+    // Private
+
+    _updateDisplaySoon()
+    {
+        if (this._scheduledUpdateIdentifier)
+            return;
+
+        this._scheduledUpdateIdentifier = requestAnimationFrame(this._updateDisplay.bind(this));
+    }
+
+    _updateDisplay()
+    {
+        this._scheduledUpdateIdentifier = undefined;
+
+        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 = Number.abbreviate(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);
+    }
+
+    _appendElementForNamedItem(name)
+    {
+        var item = this._items[name];
+
+        item.container = this._element.appendChild(document.createElement("div"));
+        item.container.className = "item " + name;
+
+        item.container.appendChild(document.createElement("img"));
+
+        item.outlet = item.container.appendChild(document.createElement("div"));
+
+        Object.defineProperty(item, "text", {
+            set: function(newText)
+            {
+                newText = newText.toString();
+                if (newText === item.outlet.textContent)
+                    return;
+                item.outlet.textContent = newText;
+            }
+        });
+
+        item.container.addEventListener("click", (event) => {
+            this._itemWasClicked(name);
+        });
+    }
+
+    _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 = Number.abbreviate(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.title = item.tooltip;
+            item.container.classList.add(WebInspector.DefaultDashboardView.EnabledItemStyleClassName);
+        } else {
+            item.container.title = "";
+            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..6ef7d394a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
@@ -0,0 +1,284 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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 td.value-column {
+    height: auto;
+    line-height: initial;
+    white-space: normal;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.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..79f0d0b88
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionDataGridRow.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.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.inline = true;
+            dataGrid.variableHeightRows = true;
+
+            this.hideEmptyMessage();
+            this.element.appendChild(dataGrid.element);
+
+            dataGrid.updateLayoutIfNeeded();
+        } 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/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..1d0e0e61f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.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.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;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/Dialog.js b/Source/WebInspectorUI/UserInterface/Views/Dialog.js
new file mode 100644
index 000000000..54dd971a5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Dialog.js
@@ -0,0 +1,102 @@
+/*
+ * 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.Dialog = class Dialog extends WebInspector.View
+{
+    constructor(delegate)
+    {
+        super();
+
+        this._delegate = delegate;
+        this._dismissing = false;
+        this._representedObject = null;
+        this._cookie = null;
+        this._visible = false;
+    }
+
+    // Public
+
+    get visible() { return this._visible; }
+    get delegate() { return this._delegate; }
+    get representedObject() { return this._representedObject; }
+    get cookie() { return this._cookie; }
+
+    present(parentElement)
+    {
+        console.assert(!this.element.parentNode);
+
+        parentElement.appendChild(this.element);
+
+        this._visible = true;
+
+        this.didPresentDialog();
+    }
+
+    dismiss(representedObject, cookie)
+    {
+        if (this._dismissing)
+            return;
+
+        let parent = this.element.parentNode;
+        if (!parent)
+            return;
+
+        this._dismissing = true;
+        this._representedObject = representedObject || null;
+        this._cookie = cookie || null;
+        this._visible = false;
+
+        this.element.remove();
+
+        if (this._delegate && typeof this._delegate.dialogWasDismissed === "function")
+            this._delegate.dialogWasDismissed(this);
+
+        this._dismissing = false;
+
+        this.didDismissDialog();
+    }
+
+    // Protected
+
+    didDismissDialog()
+    {
+        // Implemented by subclasses.
+    }
+
+    didPresetDialog()
+    {
+        // Implemented by subclasses.
+    }
+
+    representedObjectIsValid(value)
+    {
+        // Can be overridden by subclasses.
+
+        if (this.delegate && typeof this.delegate.isDialogRepresentedObjectValid === "function")
+            return this.delegate.isDialogRepresentedObjectValid(this, value);
+
+        return true;
+    }
+};
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..9b4a7f244
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.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.ElementsTabContentView = class ElementsTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.ElementsTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.GeneralTabBarItem(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);
+    }
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/Elements.svg",
+            title: WebInspector.UIString("Elements"),
+        };
+    }
+
+    static isTabAllowed()
+    {
+        return !!window.DOMAgent;
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.ElementsTabContentView.Type;
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        return true;
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        return representedObject instanceof WebInspector.DOMTree;
+    }
+
+    showRepresentedObject(representedObject, cookie)
+    {
+        if (!this.contentBrowser.currentContentView)
+            this._showDOMTreeContentView();
+
+        if (!cookie || !cookie.nodeToSelect)
+            return;
+
+        let domTreeContentView = this.contentBrowser.currentContentView;
+        console.assert(domTreeContentView instanceof WebInspector.DOMTreeContentView, "Unexpected DOMTreeContentView representedObject.", domTreeContentView);
+
+        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;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        if (!this.contentBrowser.currentContentView)
+            this._showDOMTreeContentView();
+    }
+
+    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..6dbf9df4d
--- /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((properties) => {
+            console.assert(properties && properties.stack && properties.stack.value);
+
+            if (!this._hasStackTrace)
+                this._buildStackTrace(properties.stack.value.value);
+
+            this._hasStackTrace = true;
+        });
+    }
+
+    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)
+    {
+        let stackTrace = WebInspector.StackTrace.fromString(this._object.target, stackString);
+        let 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..92b7e42af
--- /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, WebInspector.mainTarget);
+        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..04b2f81bd
--- /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: var(--navigation-bar-height);
+
+    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"]::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/FilterBarNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/FilterBarNavigationItem.js
new file mode 100644
index 000000000..5b754bb45
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FilterBarNavigationItem.js
@@ -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.
+ */
+
+WebInspector.FilterBarNavigationItem = class FilterBarNavigationItem extends WebInspector.NavigationItem
+{
+    constructor()
+    {
+        super();
+
+        this._filterBar = new WebInspector.FilterBar(this.element);
+    }
+
+    // Public
+
+    get filterBar()
+    {
+        return this._filterBar;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/FindBanner.css b/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
new file mode 100644
index 000000000..04b9cb6ea
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
@@ -0,0 +1,240 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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 -1px 1px 6px;
+
+    width: 30vw;
+    min-width: 143px;
+    max-width: 210px;
+    height: 19px;
+    vertical-align: top;
+
+    -webkit-appearance: none;
+
+    outline: none;
+
+    border: 1px solid var(--border-color);
+    border-radius: 4px 0 0 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 var(--border-color);
+    color: var(--glyph-color);
+    background-color: var(--button-background-color);
+
+    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.4;
+}
+
+.find-banner > button:active:not(:disabled) {
+    border: 1px solid var(--border-color-dark);
+    background-color: var(--button-background-color-pressed);
+}
+
+.find-banner > button.segmented {
+    margin: 1px 0;
+}
+
+.find-banner > button.segmented.left {
+    border-radius: 0;
+    border-right: none;
+}
+
+.find-banner > button:not(:active).segmented.right:before {
+    content: "";
+    position: relative;
+    display: block;
+    float: left;
+    width: 1px;
+    height: 13px;
+    right: 6px;
+    top: -1px;
+    background-color: var(--border-color);
+}
+
+.find-banner > button.segmented.left:active + button.segmented.right,
+.find-banner > button.segmented.right:active {
+    border-left: solid 1px var(--border-color-dark);
+}
+
+.find-banner > button.segmented.left:active + button.segmented.right:before {
+    display: none;
+}
+
+.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;
+    border-left: none;
+}
+
+.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 > 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;
+    outline: none;
+    border: 1px solid hsla(0, 0%, 0%, 0.35);
+    border-radius: 3px 0 0 3px;
+    background-color: hsla(0, 0%, 100%, 0.2);
+    background-clip: padding-box;
+}
+
+.find-banner.console-find-banner > :matches(input[type="search"], button) {
+    height: 22px;
+}
+
+.find-banner.console-find-banner > input[type="search"]::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..0b037c637
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FindBanner.js
@@ -0,0 +1,327 @@
+/*
+ * 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._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._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);
+
+        let 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);
+
+        let nextResultButtonGlyphElement = document.createElement("div");
+        nextResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
+        this._nextResultButton.appendChild(nextResultButtonGlyphElement);
+
+        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..05c46ba45
--- /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: 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..7eb10fdf0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.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.FolderTreeElement = class FolderTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(title, representedObject)
+    {
+        console.assert(!representedObject || representedObject instanceof WebInspector.Collection);
+
+        const classNames = [WebInspector.FolderTreeElement.FolderIconStyleClassName];
+        const subtitle = null;
+        const hasChildren = true;
+        super(classNames, title, subtitle, representedObject, hasChildren);
+    }
+};
+
+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..fd5f659d3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FolderizedTreeElement.js
@@ -0,0 +1,393 @@
+/*
+ * 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, displayName, representedObject, treeElementConstructor)
+    {
+        console.assert(type);
+        console.assert(displayName || displayName === null);
+        console.assert(representedObject);
+        console.assert(typeof treeElementConstructor === "function");
+
+        let settings = {
+            type,
+            displayName,
+            topLevel: displayName === null,
+            representedObject,
+            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()
+    {
+        let hasChildren = false;
+        for (let settings of this._folderizeSettingsMap.values()) {
+            if (settings.representedObject.items.size) {
+                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)
+    {
+        // Folders before anything.
+        let aIsFolder = a instanceof WebInspector.FolderTreeElement;
+        let bIsFolder = b instanceof WebInspector.FolderTreeElement;
+        if (aIsFolder && !bIsFolder)
+            return -1;
+        if (bIsFolder && !aIsFolder)
+            return 1;
+
+        // Then sort by title.
+        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(settings)
+        {
+            let folderTreeElement = new WebInspector.FolderTreeElement(settings.displayName, settings.representedObject);
+            let folderExpandedSetting = new WebInspector.Setting(settings.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;
+        }
+
+        if (settings.topLevel)
+            return this;
+
+        var folder = this._folderTypeMap.get(settings.type);
+        if (folder)
+            return folder;
+
+        folder = createFolderTreeElement.call(this, settings);
+        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 (let settings of this._folderizeSettingsMap.values()) {
+            if (settings.representedObject.typeVerifier(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.representedObject.items.size))
+                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..310c22d63
--- /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..920e87067
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
@@ -0,0 +1,79 @@
+/*
+ * 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 li {
+    -webkit-user-select: none !important;
+}
+
+.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection-area {
+    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..f42d4c514
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js
@@ -0,0 +1,260 @@
+/*
+ * 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, "\\\\").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 || preview.description;
+    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.createElementForFunctionWithName = function(description)
+{
+    var span = document.createElement("span");
+    span.classList.add("formatted-function");
+    span.textContent = description.substring(0, description.indexOf("("));
+    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.createObjectPreviewOrFormattedValueForObjectPreview = function(objectPreview, previewViewMode)
+{
+    if (objectPreview.subtype === "node")
+        return WebInspector.FormattedValue.createElementForNodePreview(objectPreview);
+
+    if (objectPreview.type === "function")
+        return WebInspector.FormattedValue.createElementForFunctionWithName(objectPreview.description);
+
+    return new WebInspector.ObjectPreviewView(objectPreview, previewViewMode).element;
+};
+
+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..ceff8460c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js
@@ -0,0 +1,251 @@
+/*
+ * 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.ExtraScriptAdded, this._extraScriptAdded, 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);
+
+        this.shouldRefreshChildren = true;
+        this.folderSettingsKey = this._frame.url.hash;
+
+        this.registerFolderizeSettings("frames", WebInspector.UIString("Frames"), this._frame.childFrameCollection, WebInspector.FrameTreeElement);
+        this.registerFolderizeSettings("flows", WebInspector.UIString("Flows"), this._frame.domTree.contentFlowCollection, WebInspector.ContentFlowTreeElement);
+        this.registerFolderizeSettings("extra-scripts", WebInspector.UIString("Extra Scripts"), this._frame.extraScriptCollection, WebInspector.ScriptTreeElement);
+
+        for (let [key, value] of Object.entries(WebInspector.Resource.Type)) {
+            let folderName = WebInspector.Resource.displayNameForType(value, true);
+            this.registerFolderizeSettings(key, folderName, this._frame.resourceCollectionForType(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 (let frame of this._frame.childFrameCollection.items)
+            this.addChildForRepresentedObject(frame);
+
+        for (let resource of this._frame.resourceCollection.items)
+            this.addChildForRepresentedObject(resource);
+
+        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]);
+        }
+
+        for (let contentFlow of this._frame.domTree.contentFlowCollection.items)
+            this.addChildForRepresentedObject(contentFlow);
+
+        for (let extraScript of this._frame.extraScriptCollection.items) {
+            if (extraScript.sourceURL || extraScript.sourceMappingURL)
+                this.addChildForRepresentedObject(extraScript);
+        }
+    }
+
+    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);
+    }
+
+    _extraScriptAdded(event)
+    {
+        let extraScript = event.data.script;
+        if (extraScript.sourceURL || extraScript.sourceMappingURL)
+            this.addRepresentedObjectToNewChildQueue(extraScript);
+    }
+
+    _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/GeneralTabBarItem.js b/Source/WebInspectorUI/UserInterface/Views/GeneralTabBarItem.js
new file mode 100644
index 000000000..1c4ed83c9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralTabBarItem.js
@@ -0,0 +1,91 @@
+/*
+ * 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.GeneralTabBarItem = class GeneralTabBarItem extends WebInspector.TabBarItem
+{
+    constructor(image, title, representedObject)
+    {
+        super(image, title, representedObject);
+
+        let closeButtonElement = document.createElement("div");
+        closeButtonElement.classList.add(WebInspector.TabBarItem.CloseButtonStyleClassName);
+        closeButtonElement.title = WebInspector.UIString("Close tab");
+        this.element.insertBefore(closeButtonElement, this.element.firstChild);
+
+        this.element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
+    }
+
+    // Public
+
+    set title(title)
+    {
+        if (title) {
+            this._titleElement = document.createElement("span");
+            this._titleElement.classList.add("title");
+
+            let titleContentElement = document.createElement("span");
+            titleContentElement.classList.add("content");
+            titleContentElement.textContent = title;
+            this._titleElement.appendChild(titleContentElement);
+
+            this.element.insertBefore(this._titleElement, this.element.lastChild);
+        } else {
+            if (this._titleElement)
+                this._titleElement.remove();
+
+            this._titleElement = null;
+        }
+
+        super.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 instanceof WebInspector.PinnedTabBarItem)
+                    continue;
+                this._parentTabBar.removeTabBarItem(item);
+            }
+        };
+
+        let hasOtherNonPinnedTabs = this._parentTabBar.tabBarItems.some((item) => item !== this && !(item instanceof WebInspector.PinnedTabBarItem));
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        contextMenu.appendItem(WebInspector.UIString("Close Tab"), closeTab, this.isDefaultTab);
+        contextMenu.appendItem(WebInspector.UIString("Close Other Tabs"), closeOtherTabs, !hasOtherNonPinnedTabs);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
new file mode 100644
index 000000000..dd65cbe33
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
@@ -0,0 +1,350 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 (Array.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);
+    }
+
+    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..b34d376ac
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GoToLineDialog.css
@@ -0,0 +1,95 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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 {
+    display: flex;
+    flex-direction: column;
+
+    position: absolute;
+    left: 50%;
+    top: 21px;
+    width: calc(100% - 40px);
+    max-width: 452px;
+    height: 46px;
+
+    transform: translate(-50%, 0);
+
+    border-radius: 5px;
+    background-color: hsla(0, 0%, 95%, 0.8);
+    border: 1px hsla(0, 0%, 0%, 0.25) solid;
+    box-shadow: 1px 5px 20px 3px hsla(0, 0%, 0%, 0.33);
+
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.go-to-line-dialog > div {
+    margin: 8px 3px 8px 32px;
+}
+
+.go-to-line-dialog > div::before {
+    position: absolute;
+    left: 6px;
+    top: 6px;
+    width: 30px;
+    opacity: 0.5;
+    content: url(../Images/Search.svg);
+}
+
+.go-to-line-dialog > div > input {
+    display: block;
+    width: 100%;
+    border: none;
+    background-color: transparent;
+    font-size: 20px;
+    color: hsl(0, 0%, 4%);
+    padding: 0 30px 1px 7px;
+    outline: none;
+    -webkit-appearance: none;
+}
+
+.go-to-line-dialog > div > input::placeholder {
+    color: hsl(0, 0%, 0%, 0.25);
+}
+
+.go-to-line-dialog > div > img {
+    position: absolute;
+    top: 15px;
+    right: 10px;
+    padding: 2px;
+    border-radius: 9px;
+    width: 15px;
+    height: 15px;
+    background-color: hsl(0, 0%, 60%);
+    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..c954a86b3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GoToLineDialog.js
@@ -0,0 +1,137 @@
+/*
+ * 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.Dialog
+{
+    constructor(delegate)
+    {
+        super(delegate);
+
+        this.element.classList.add("go-to-line-dialog");
+
+        let 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;
+    }
+
+    // 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;
+        }
+    }
+
+    didPresentDialog()
+    {
+        this._input.focus();
+        this._clear();
+    }
+
+    // Private
+
+    _handleInputEvent(event)
+    {
+        let force = this._input.value !== "";
+        this.element.classList.toggle(WebInspector.GoToLineDialog.NonEmptyClassName, force);
+    }
+
+    _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) {
+            let value = parseInt(this._input.value, 10);
+
+            if (this.representedObjectIsValid(value)) {
+                this.dismiss(value);
+                return;
+            }
+
+            this._inputElement.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..b8da6fe1f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css
@@ -0,0 +1,111 @@
+/*
+ * 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: 40px;
+}
+
+.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 {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    font-size: 13px;
+}
+
+.gradient-editor.radial-gradient > .gradient-angle {
+    display: none;
+}
+
+.gradient-editor > .gradient-angle > input[type="range"] {
+    flex-grow: 1;
+    width: 0;
+    margin: 0 4px;
+}
+
+.gradient-editor > .gradient-angle > input[type="number"] {
+    width: 35px;
+    margin-right: 2px;
+    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;
+}
+
+.gradient-editor > .gradient-angle > input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js b/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js
new file mode 100644
index 000000000..f151f5fb3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js
@@ -0,0 +1,250 @@
+/*
+ * 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.enableColorComponentInputs = false;
+        this._colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
+
+        let angleContainerElement = this._element.appendChild(document.createElement("div"));
+        angleContainerElement.classList.add("gradient-angle");
+        angleContainerElement.append(WebInspector.UIString("Angle"));
+
+        let boundAngleValueChanged = this._angleValueChanged.bind(this);
+
+        this._angleSliderElement = angleContainerElement.appendChild(document.createElement("input"));
+        this._angleSliderElement.type = "range";
+        this._angleSliderElement.addEventListener("input", boundAngleValueChanged);
+
+        this._angleInputElement = angleContainerElement.appendChild(document.createElement("input"));
+        this._angleInputElement.type = "number";
+        this._angleInputElement.addEventListener("input", boundAngleValueChanged);
+
+        this._angleUnitsSelectElement = angleContainerElement.appendChild(document.createElement("select"));
+        this._angleUnitsSelectElement.addEventListener("change", this._angleUnitsChanged.bind(this));
+
+        const angleUnitsData = [
+            {name: WebInspector.LinearGradient.AngleUnits.DEG, min: 0, max: 360, step: 1},
+            {name: WebInspector.LinearGradient.AngleUnits.RAD, min: 0, max: 2 * Math.PI, step: 0.01},
+            {name: WebInspector.LinearGradient.AngleUnits.GRAD, min: 0, max: 400, step: 1},
+            {name: WebInspector.LinearGradient.AngleUnits.TURN, min: 0, max: 1, step: 0.01}
+        ];
+
+        this._angleUnitsConfiguration = new Map(angleUnitsData.map(({name, min, max, step}) => {
+            let optionElement = this._angleUnitsSelectElement.appendChild(document.createElement("option"));
+            optionElement.value = optionElement.textContent = name;
+
+            return [name, {element: optionElement, min, max, step}];
+        }));
+    }
+
+    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._angleUnitsChanged();
+        } 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._angleInputElement.blur();
+
+        this.dispatchEventToListeners(WebInspector.GradientEditor.Event.ColorPickerToggled);
+        this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+    }
+
+    // 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._angleUnitsChanged();
+            } 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});
+    }
+
+    _angleValueChanged(event)
+    {
+        switch (event.target) {
+        case this._angleInputElement:
+            this._gradient.angleValue = this._angleSliderElement.value = parseFloat(this._angleInputElement.value) || 0;
+            break;
+        case this._angleSliderElement:
+            this._gradient.angleValue = this._angleInputElement.value = parseFloat(this._angleSliderElement.value) || 0;
+            break;
+        default:
+            WebInspector.reportInternalError("Input event fired for disabled color component input");
+            return;
+        }
+
+        this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+    }
+
+    _angleUnitsChanged(event)
+    {
+        let units = this._angleUnitsSelectElement.value;
+        let configuration = this._angleUnitsConfiguration.get(units);
+        if (!configuration) {
+            WebInspector.reportInternalError(`Missing configuration data for selected angle units "${units}"`);
+            return;
+        }
+
+        this._gradient.angleUnits = units;
+
+        this._angleInputElement.min = this._angleSliderElement.min = configuration.min;
+        this._angleInputElement.max = this._angleSliderElement.max = configuration.max;
+        this._angleInputElement.step = this._angleSliderElement.step = configuration.step;
+        this._angleInputElement.value = this._angleSliderElement.value = this._gradient.angleValue;
+
+        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..4d5733c70
--- /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: 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: 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..5a94198d8
--- /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/HeapAllocationsTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineDataGridNode.js
new file mode 100644
index 000000000..f6d2e2f65
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineDataGridNode.js
@@ -0,0 +1,129 @@
+/*
+ * 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.HeapAllocationsTimelineDataGridNode = class HeapAllocationsTimelineDataGridNode extends WebInspector.TimelineDataGridNode
+{
+    constructor(heapAllocationsTimelineRecord, zeroTime, heapAllocationsView)
+    {
+        super(false, null);
+
+        this._record = heapAllocationsTimelineRecord;
+        this._heapAllocationsView = heapAllocationsView;
+
+        this._data = {
+            name: this.displayName(),
+            timestamp: zeroTime ? this._record.timestamp - zeroTime : NaN,
+            size: this._record.heapSnapshot.totalSize,
+            liveSize: this._record.heapSnapshot.liveSize,
+        };
+
+        this._record.heapSnapshot.addEventListener(WebInspector.HeapSnapshotProxy.Event.CollectedNodes, this._heapSnapshotCollectedNodes, this);
+        this._record.heapSnapshot.addEventListener(WebInspector.HeapSnapshotProxy.Event.Invalidated, this._heapSnapshotInvalidated, this);
+    }
+
+    // Public
+
+    get record() { return this._record; }
+    get data() { return this._data; }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        switch (columnIdentifier) {
+        case "name":
+            cell.classList.add(...this.iconClassNames());
+
+            var fragment = document.createDocumentFragment();
+            var titleElement = fragment.appendChild(document.createElement("span"));
+            titleElement.textContent = this._data.name;
+            if (!this._record.heapSnapshot.invalid) {
+                var goToButton = fragment.appendChild(WebInspector.createGoToArrowButton());
+                goToButton.addEventListener("click", (event) => {
+                    this._heapAllocationsView.showHeapSnapshotTimelineRecord(this._record);
+                });
+            }
+            return fragment;
+
+        case "timestamp":
+            return isNaN(this._data.timestamp) ? emDash : Number.secondsToString(this._data.timestamp, true);
+
+        case "size":
+            return Number.bytesToString(this._data.size);
+
+        case "liveSize":
+            return Number.bytesToString(this._data.liveSize);
+        }
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+
+    markAsBaseline()
+    {
+        this.element.classList.add("baseline");
+    }
+
+    clearBaseline()
+    {
+        this.element.classList.remove("baseline");
+    }
+
+    updateTimestamp(zeroTime)
+    {
+        console.assert(isNaN(this._data.timestamp));
+        this._data.timestamp = this._record.timestamp - zeroTime;
+        this.needsRefresh();
+    }
+
+    // Protected
+
+    createCells()
+    {
+        super.createCells();
+
+        if (this._record.heapSnapshot.invalid)
+            this.element.classList.add("invalid");
+    }
+
+    // Private
+
+    _heapSnapshotCollectedNodes()
+    {
+        let oldSize = this._data.liveSize;
+        let newSize = this._record.heapSnapshot.liveSize;
+
+        console.assert(newSize <= oldSize);
+        if (oldSize === newSize)
+            return;
+
+        this._data.liveSize = newSize;
+        this.needsRefresh();
+    }
+
+    _heapSnapshotInvalidated()
+    {
+        this._data.liveSize = 0;
+
+        this.needsRefresh();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineDataGridNodePathComponent.js b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineDataGridNodePathComponent.js
new file mode 100644
index 000000000..c2698f96c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineDataGridNodePathComponent.js
@@ -0,0 +1,53 @@
+/*
+ * 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.HeapAllocationsTimelineDataGridNodePathComponent = class HeapAllocationsTimelineDataGridNodePathComponent extends WebInspector.TimelineDataGridNodePathComponent
+{
+    // Protected
+
+    get previousSibling()
+    {
+        let previousSibling = this.timelineDataGridNode.previousSibling;
+        while (previousSibling && (previousSibling.hidden || previousSibling.record.heapSnapshot.invalid))
+            previousSibling = previousSibling.previousSibling;
+
+        if (!previousSibling)
+            return null;
+
+        return new WebInspector.HeapAllocationsTimelineDataGridNodePathComponent(previousSibling);
+    }
+
+    get nextSibling()
+    {
+        let nextSibling = this.timelineDataGridNode.nextSibling;
+        while (nextSibling && (nextSibling.hidden || nextSibling.record.heapSnapshot.invalid))
+            nextSibling = nextSibling.nextSibling;
+
+        if (!nextSibling)
+            return null;
+
+        return new WebInspector.HeapAllocationsTimelineDataGridNodePathComponent(nextSibling);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineOverviewGraph.css
new file mode 100644
index 000000000..c84d55843
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineOverviewGraph.css
@@ -0,0 +1,51 @@
+/*
+ * 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-overview-graph.heap-allocations {
+    position: relative;
+}
+
+.timeline-overview-graph.heap-allocations > img.snapshot {
+    content: url(../Images/HeapSnapshot.svg);
+    position: absolute;
+    top: 9px;
+    width: 16px;
+    height: 16px;
+
+    /* FIXME: Remove once https://webkit.org/b/147236 is fixed. */
+    z-index: calc(var(--z-index-resizer) + 2);
+}
+
+.timeline-overview-graph.heap-allocations > img.snapshot.invalid {
+    opacity: 0.7;
+}
+
+.timeline-overview-graph.heap-allocations > img.snapshot.selected {
+    content: url(../Images/HeapSnapshotSelected.svg);
+}
+
+.timeline-overview-graph.heap-allocations:not(.selected) > img.snapshot.selected {
+    filter: grayscale(100%) brightness(1.3);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineOverviewGraph.js
new file mode 100644
index 000000000..06e46d0df
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineOverviewGraph.js
@@ -0,0 +1,135 @@
+/*
+ * 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.HeapAllocationsTimelineOverviewGraph = class HeapAllocationsTimelineOverviewGraph extends WebInspector.TimelineOverviewGraph
+{
+    constructor(timeline, timelineOverview)
+    {
+        super(timelineOverview);
+
+        this.element.classList.add("heap-allocations");
+
+        this._heapAllocationsTimeline = timeline;
+        this._heapAllocationsTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._heapAllocationTimelineRecordAdded, this);
+
+        this._selectedImageElement = null;
+
+        this.reset();
+    }
+
+    // Protected
+
+    reset()
+    {
+        super.reset();
+
+        this.element.removeChildren();
+    }
+
+    layout()
+    {
+        if (!this.visible)
+            return;
+
+        this.element.removeChildren();
+
+        if (this._selectedImageElement) {
+            this._selectedImageElement.classList.remove("selected");
+            this._selectedImageElement = null;
+        }
+
+        // This may display records past the current time marker.
+        let visibleRecords = this._heapAllocationsTimeline.recordsInTimeRange(this.startTime, this.endTime);
+        if (!visibleRecords.length)
+            return;
+
+        let graphStartTime = this.startTime;
+        let secondsPerPixel = this.timelineOverview.secondsPerPixel;
+
+        function xScale(time) {
+            return (time - graphStartTime) / secondsPerPixel;
+        }
+
+        for (let record of visibleRecords) {
+            const halfImageWidth = 8;
+            let x = xScale(record.timestamp) - halfImageWidth;
+            if (x <= 1)
+                x = 1;
+
+            let imageElement = record[WebInspector.HeapAllocationsTimelineOverviewGraph.RecordElementAssociationSymbol];
+            if (!imageElement) {
+                imageElement = record[WebInspector.HeapAllocationsTimelineOverviewGraph.RecordElementAssociationSymbol] = document.createElement("img");
+                imageElement.classList.add("snapshot");
+                imageElement.addEventListener("click", () => {
+                    if (record.heapSnapshot.invalid)
+                        return;
+                    this.selectedRecord = record;
+                });
+            }
+
+            imageElement.style.left = x + "px";
+
+            if (record.heapSnapshot.invalid)
+                imageElement.classList.add("invalid");
+
+            this.element.appendChild(imageElement);
+        }
+
+        this._updateSnapshotMarkers();
+    }
+
+    updateSelectedRecord()
+    {
+        this._updateSnapshotMarkers();
+    }
+
+    // Private
+
+    _updateSnapshotMarkers()
+    {
+        if (this._selectedImageElement)
+            this._selectedImageElement.classList.remove("selected");
+
+        if (!this.selectedRecord) {
+            this._selectedImageElement = null;
+            return;
+        }
+
+        let imageElement = this.selectedRecord[WebInspector.HeapAllocationsTimelineOverviewGraph.RecordElementAssociationSymbol];
+        if (!imageElement)
+            return;
+
+        imageElement.classList.add("selected");
+
+        this._selectedImageElement = imageElement;
+    }
+
+    _heapAllocationTimelineRecordAdded(event)
+    {
+        this.needsLayout();
+    }
+};
+
+WebInspector.HeapAllocationsTimelineOverviewGraph.RecordElementAssociationSymbol = Symbol("record-element-association");
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineView.css
new file mode 100644
index 000000000..8527f0b66
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineView.css
@@ -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.
+ */
+
+.timeline-view.heap-allocations > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.timeline-view.heap-allocations > .data-grid td .icon.heap-snapshot {
+    content: url(../Images/HeapSnapshot.svg);
+}
+
+.timeline-view.heap-allocations > .data-grid tr.invalid {
+    color: gray;
+}
+
+.timeline-view.heap-allocations > .data-grid:not(:focus, .force-focus) tr.selected.invalid {
+    color: gray !important;
+}
+
+.timeline-view.heap-allocations > .data-grid tr.baseline {
+    background: hsl(129, 29%, 77%);
+}
+
+.timeline-view.heap-allocations > .content-view-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineView.js
new file mode 100644
index 000000000..b5f51e67e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapAllocationsTimelineView.js
@@ -0,0 +1,478 @@
+/*
+ * 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.HeapAllocationsTimelineView = class HeapAllocationsTimelineView extends WebInspector.TimelineView
+{
+    constructor(timeline, extraArguments)
+    {
+        super(timeline, extraArguments);
+
+        console.assert(timeline.type === WebInspector.TimelineRecord.Type.HeapAllocations, timeline);
+
+        this.element.classList.add("heap-allocations");
+
+        let columns = {
+            name: {
+                title: WebInspector.UIString("Name"),
+                width: "150px",
+                icon: true,
+            },
+            timestamp: {
+                title: WebInspector.UIString("Time"),
+                width: "80px",
+                sortable: true,
+                aligned: "right",
+            },
+            size: {
+                title: WebInspector.UIString("Size"),
+                width: "80px",
+                sortable: true,
+                aligned: "right",
+            },
+            liveSize: {
+                title: WebInspector.UIString("Live Size"),
+                width: "80px",
+                sortable: true,
+                aligned: "right",
+            },
+        };
+
+        let snapshotTooltip = WebInspector.UIString("Take snapshot");
+        this._takeHeapSnapshotButtonItem = new WebInspector.ButtonNavigationItem("take-snapshot", snapshotTooltip, "Images/Camera.svg", 16, 16);
+        this._takeHeapSnapshotButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._takeHeapSnapshotClicked, this);
+
+        let defaultToolTip = WebInspector.UIString("Compare snapshots");
+        let activatedToolTip = WebInspector.UIString("Cancel comparison");
+        this._compareHeapSnapshotsButtonItem = new WebInspector.ActivateButtonNavigationItem("compare-heap-snapshots", defaultToolTip, activatedToolTip, "Images/Compare.svg", 16, 16);
+        this._compareHeapSnapshotsButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._compareHeapSnapshotsClicked, this);
+        this._compareHeapSnapshotsButtonItem.enabled = false;
+        this._compareHeapSnapshotsButtonItem.activated = false;
+
+        this._compareHeapSnapshotHelpTextItem = new WebInspector.TextNavigationItem("compare-heap-snapshot-help-text", "");
+
+        this._selectingComparisonHeapSnapshots = false;
+        this._baselineDataGridNode = null;
+        this._baselineHeapSnapshotTimelineRecord = null;
+        this._heapSnapshotDiff = null;
+
+        this._snapshotListScrollTop = 0;
+        this._showingSnapshotList = true;
+
+        this._snapshotListPathComponent = new WebInspector.HierarchicalPathComponent(WebInspector.UIString("Snapshot List"), "snapshot-list-icon", "snapshot-list", false, false);
+        this._snapshotListPathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._snapshotListPathComponentClicked, this);
+
+        this._dataGrid = new WebInspector.TimelineDataGrid(columns);
+        this._dataGrid.sortColumnIdentifier = "timestamp";
+        this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+        this._dataGrid.createSettings("heap-allocations-timeline-view");
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+
+        this.addSubview(this._dataGrid);
+
+        this._contentViewContainer = new WebInspector.ContentViewContainer;
+        this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
+        WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
+
+        this._pendingRecords = [];
+        this._pendingZeroTimeDataGridNodes = [];
+
+        timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._heapAllocationsTimelineRecordAdded, this);
+
+        WebInspector.HeapSnapshotProxy.addEventListener(WebInspector.HeapSnapshotProxy.Event.Invalidated, this._heapSnapshotInvalidated, this);
+        WebInspector.HeapSnapshotWorkerProxy.singleton().addEventListener("HeapSnapshot.CollectionEvent", this._heapSnapshotCollectionEvent, this);
+    }
+
+    // Public
+
+    get scrollableElements()
+    {
+        if (this._showingSnapshotList)
+            return [this._dataGrid.scrollContainer];
+        if (this._contentViewContainer.currentContentView)
+            return this._contentViewContainer.currentContentView.scrollableElements;
+        return [];
+    }
+
+    showHeapSnapshotList()
+    {
+        if (this._showingSnapshotList)
+            return;
+
+        this._showingSnapshotList = true;
+        this._heapSnapshotDiff = null;
+        this._cancelSelectComparisonHeapSnapshots();
+
+        this._contentViewContainer.hidden();
+        this.removeSubview(this._contentViewContainer);
+        this.addSubview(this._dataGrid);
+
+        this._dataGrid.scrollContainer.scrollTop = this._snapshotListScrollTop;
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
+    }
+
+    showHeapSnapshotTimelineRecord(heapSnapshotTimelineRecord)
+    {
+        if (this._showingSnapshotList) {
+            this._snapshotListScrollTop = this._dataGrid.scrollContainer.scrollTop;
+            this.removeSubview(this._dataGrid);
+            this.addSubview(this._contentViewContainer);
+            this._contentViewContainer.shown();
+        }
+
+        this._showingSnapshotList = false;
+        this._heapSnapshotDiff = null;
+        this._cancelSelectComparisonHeapSnapshots();
+
+        for (let dataGridNode of this._dataGrid.children) {
+            if (dataGridNode.record === heapSnapshotTimelineRecord) {
+                dataGridNode.select();
+                break;
+            }
+        }
+
+        let shouldTriggerContentViewUpdate = this._contentViewContainer.currentContentView && this._contentViewContainer.currentContentView.representedObject === heapSnapshotTimelineRecord.heapSnapshot;
+
+        this._contentViewContainer.showContentViewForRepresentedObject(heapSnapshotTimelineRecord.heapSnapshot);
+
+        if (shouldTriggerContentViewUpdate)
+            this._currentContentViewDidChange();
+    }
+
+    showHeapSnapshotDiff(heapSnapshotDiff)
+    {
+        if (this._showingSnapshotList) {
+            this.removeSubview(this._dataGrid);
+            this.addSubview(this._contentViewContainer);
+            this._contentViewContainer.shown();
+        }
+
+        this._showingSnapshotList = false;
+        this._heapSnapshotDiff = heapSnapshotDiff;
+
+        this._contentViewContainer.showContentViewForRepresentedObject(heapSnapshotDiff);
+    }
+
+    // Protected
+
+    // FIXME: <https://webkit.org/b/157582> Web Inspector: Heap Snapshot Views should be searchable
+    get showsFilterBar() { return this._showingSnapshotList; }
+
+    get navigationItems()
+    {
+        if (this._showingSnapshotList) {
+            let items = [this._takeHeapSnapshotButtonItem, this._compareHeapSnapshotsButtonItem];
+            if (this._selectingComparisonHeapSnapshots)
+                items.push(this._compareHeapSnapshotHelpTextItem);
+            return items;
+        }
+
+        return this._contentViewContainer.currentContentView.navigationItems;
+    }
+
+    get selectionPathComponents()
+    {
+        let components = [this._snapshotListPathComponent];
+
+        if (this._showingSnapshotList)
+            return components;
+
+        if (this._heapSnapshotDiff) {
+            let firstSnapshotIdentifier = this._heapSnapshotDiff.snapshot1.identifier;
+            let secondSnapshotIdentifier = this._heapSnapshotDiff.snapshot2.identifier;
+            let diffComponent = new WebInspector.HierarchicalPathComponent(WebInspector.UIString("Snapshot Comparison (%d and %d)").format(firstSnapshotIdentifier, secondSnapshotIdentifier), "snapshot-diff-icon", "snapshot-diff");
+            components.push(diffComponent);
+        } else if (this._dataGrid.selectedNode) {
+            let heapSnapshotPathComponent = new WebInspector.HeapAllocationsTimelineDataGridNodePathComponent(this._dataGrid.selectedNode);
+            heapSnapshotPathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._snapshotPathComponentSelected, this);
+            components.push(heapSnapshotPathComponent);
+        }
+
+        return components.concat(this._contentViewContainer.currentContentView.selectionPathComponents);
+    }
+
+    selectRecord(record)
+    {
+        if (record)
+            this.showHeapSnapshotTimelineRecord(record);
+        else
+            this.showHeapSnapshotList();
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._dataGrid.shown();
+
+        if (!this._showingSnapshotList)
+            this._contentViewContainer.shown();
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        this._dataGrid.hidden();
+
+        if (!this._showingSnapshotList)
+            this._contentViewContainer.hidden();
+    }
+
+    closed()
+    {
+        console.assert(this.representedObject instanceof WebInspector.Timeline);
+        this.representedObject.removeEventListener(null, null, this);
+
+        this._dataGrid.closed();
+
+        this._contentViewContainer.closeAllContentViews();
+
+        WebInspector.ContentView.removeEventListener(null, null, this);
+        WebInspector.HeapSnapshotProxy.removeEventListener(null, null, this);
+        WebInspector.HeapSnapshotWorkerProxy.singleton().removeEventListener("HeapSnapshot.CollectionEvent", this._heapSnapshotCollectionEvent, this);
+    }
+
+    layout()
+    {
+        if (this._pendingZeroTimeDataGridNodes.length && this.zeroTime) {
+            for (let dataGridNode of this._pendingZeroTimeDataGridNodes)
+                dataGridNode.updateTimestamp(this.zeroTime);
+            this._pendingZeroTimeDataGridNodes = [];
+            this._dataGrid._sort();
+        }
+
+        if (this._pendingRecords.length) {
+            for (let heapAllocationsTimelineRecord of this._pendingRecords) {
+                let dataGridNode = new WebInspector.HeapAllocationsTimelineDataGridNode(heapAllocationsTimelineRecord, this.zeroTime, this);
+                this._dataGrid.addRowInSortOrder(null, dataGridNode);
+                if (!this.zeroTime)
+                    this._pendingZeroTimeDataGridNodes.push(dataGridNode);
+            }
+
+            this._pendingRecords = [];
+            this._updateCompareHeapSnapshotButton();
+        }
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._dataGrid.reset();
+
+        this.showHeapSnapshotList();
+        this._pendingRecords = [];
+        this._pendingZeroTimeDataGridNodes = [];
+        this._updateCompareHeapSnapshotButton();
+    }
+
+    updateFilter(filters)
+    {
+        this._dataGrid.filterText = filters ? filters.text : "";
+    }
+
+    // Private
+
+    _heapAllocationsTimelineRecordAdded(event)
+    {
+        this._pendingRecords.push(event.data.record);
+
+        this.needsLayout();
+    }
+
+    _heapSnapshotCollectionEvent(event)
+    {
+        function updateHeapSnapshotForEvent(heapSnapshot) {
+            if (heapSnapshot.invalid)
+                return;
+            heapSnapshot.updateForCollectionEvent(event);
+        }
+
+        for (let node of this._dataGrid.children)
+            updateHeapSnapshotForEvent(node.record.heapSnapshot);
+        for (let record of this._pendingRecords)
+            updateHeapSnapshotForEvent(record.heapSnapshot);
+        if (this._heapSnapshotDiff)
+            updateHeapSnapshotForEvent(this._heapSnapshotDiff);
+    }
+
+    _snapshotListPathComponentClicked(event)
+    {
+        this.showHeapSnapshotList();
+    }
+
+    _snapshotPathComponentSelected(event)
+    {
+        console.assert(event.data.pathComponent.representedObject instanceof WebInspector.HeapAllocationsTimelineRecord);
+        this.showHeapSnapshotTimelineRecord(event.data.pathComponent.representedObject);
+    }
+
+    _currentContentViewDidChange(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
+    }
+
+    _contentViewSelectionPathComponentDidChange(event)
+    {
+        if (event.target !== this._contentViewContainer.currentContentView)
+            return;
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _heapSnapshotInvalidated(event)
+    {
+        let heapSnapshot = event.target;
+
+        if (this._baselineHeapSnapshotTimelineRecord) {
+            if (heapSnapshot === this._baselineHeapSnapshotTimelineRecord.heapSnapshot)
+                this._cancelSelectComparisonHeapSnapshots();
+        }
+
+        if (this._heapSnapshotDiff) {
+            if (heapSnapshot === this._heapSnapshotDiff.snapshot1 || heapSnapshot === this._heapSnapshotDiff.snapshot2)
+                this.showHeapSnapshotList();
+        } else if (this._dataGrid.selectedNode) {
+            if (heapSnapshot === this._dataGrid.selectedNode.record.heapSnapshot)
+                this.showHeapSnapshotList();
+        }
+
+        this._updateCompareHeapSnapshotButton();
+    }
+
+    _updateCompareHeapSnapshotButton()
+    {
+        let hasAtLeastTwoValidSnapshots = false;
+
+        let count = 0;
+        for (let node of this._dataGrid.children) {
+            if (node.revealed && !node.hidden && !node.record.heapSnapshot.invalid) {
+                count++;
+                if (count === 2) {
+                    hasAtLeastTwoValidSnapshots = true;
+                    break;
+                }
+            }
+        }
+
+        this._compareHeapSnapshotsButtonItem.enabled = hasAtLeastTwoValidSnapshots;
+    }
+
+    _takeHeapSnapshotClicked()
+    {
+        HeapAgent.snapshot(function(error, timestamp, snapshotStringData) {
+            let workerProxy = WebInspector.HeapSnapshotWorkerProxy.singleton();
+            workerProxy.createSnapshot(snapshotStringData, ({objectId, snapshot: serializedSnapshot}) => {
+                let snapshot = WebInspector.HeapSnapshotProxy.deserialize(objectId, serializedSnapshot);
+                WebInspector.timelineManager.heapSnapshotAdded(timestamp, snapshot);
+            });
+        });
+    }
+
+    _cancelSelectComparisonHeapSnapshots()
+    {
+        if (!this._selectingComparisonHeapSnapshots)
+            return;
+
+        if (this._baselineDataGridNode)
+            this._baselineDataGridNode.clearBaseline();
+
+        this._selectingComparisonHeapSnapshots = false;
+        this._baselineDataGridNode = null;
+        this._baselineHeapSnapshotTimelineRecord = null;
+
+        this._compareHeapSnapshotsButtonItem.activated = false;
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
+    }
+
+    _compareHeapSnapshotsClicked(event)
+    {
+        let newActivated = !this._compareHeapSnapshotsButtonItem.activated;
+        this._compareHeapSnapshotsButtonItem.activated = newActivated;
+
+        if (!newActivated) {
+            this._cancelSelectComparisonHeapSnapshots();
+            return;
+        }
+
+        if (this._dataGrid.selectedNode)
+            this._dataGrid.selectedNode.deselect();
+
+        this._selectingComparisonHeapSnapshots = true;
+        this._baselineHeapSnapshotTimelineRecord = null;
+        this._compareHeapSnapshotHelpTextItem.text = WebInspector.UIString("Select baseline snapshot");
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
+    }
+
+    _dataGridNodeSelected(event)
+    {
+        if (!this._selectingComparisonHeapSnapshots)
+            return;
+
+        let dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return;
+
+        let heapAllocationsTimelineRecord = dataGridNode.record;
+
+        // Cancel the selection if the heap snapshot is invalid, or was already selected as the baseline.
+        if (heapAllocationsTimelineRecord.heapSnapshot.invalid || this._baselineHeapSnapshotTimelineRecord === heapAllocationsTimelineRecord) {
+            this._dataGrid.selectedNode.deselect();
+            return;
+        }
+
+        // Selected Baseline.
+        if (!this._baselineHeapSnapshotTimelineRecord) {
+            this._baselineDataGridNode = dataGridNode;
+            this._baselineDataGridNode.markAsBaseline();
+            this._baselineHeapSnapshotTimelineRecord = heapAllocationsTimelineRecord;
+            this._dataGrid.selectedNode.deselect();
+            this._compareHeapSnapshotHelpTextItem.text = WebInspector.UIString("Select comparison snapshot");
+            this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
+            return;
+        }
+
+        // Selected Comparison.
+        let snapshot1 = this._baselineHeapSnapshotTimelineRecord.heapSnapshot;
+        let snapshot2 = heapAllocationsTimelineRecord.heapSnapshot;
+        if (snapshot1.identifier > snapshot2.identifier)
+            [snapshot1, snapshot2] = [snapshot2, snapshot1];
+
+        let workerProxy = WebInspector.HeapSnapshotWorkerProxy.singleton();
+        workerProxy.createSnapshotDiff(snapshot1.proxyObjectId, snapshot2.proxyObjectId, ({objectId, snapshotDiff: serializedSnapshotDiff}) => {
+            let diff = WebInspector.HeapSnapshotDiffProxy.deserialize(objectId, serializedSnapshotDiff);
+            this.showHeapSnapshotDiff(diff);
+        });
+
+        this._baselineDataGridNode.clearBaseline();
+        this._baselineDataGridNode = null;
+        this._selectingComparisonHeapSnapshots = false;
+        this._compareHeapSnapshotsButtonItem.activated = false;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotClassDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotClassDataGridNode.js
new file mode 100644
index 000000000..2a691c1b1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotClassDataGridNode.js
@@ -0,0 +1,219 @@
+/*
+* 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.HeapSnapshotClassDataGridNode = class HeapSnapshotClassDataGridNode extends WebInspector.DataGridNode
+{
+    constructor(data, tree)
+    {
+        super(data, true);
+
+        this._data = data;
+        this._tree = tree;
+
+        this._batched = false;
+        this._instances = null;
+
+        this.addEventListener("populate", this._populate, this);
+    }
+
+    // Protected
+
+    get data() { return this._data; }
+
+    createCellContent(columnIdentifier)
+    {
+        if (columnIdentifier === "retainedSize") {
+            let size = this._data.retainedSize;
+            let fragment = document.createDocumentFragment();
+            let sizeElement = fragment.appendChild(document.createElement("span"));
+            sizeElement.classList.add("size");
+            sizeElement.textContent = Number.bytesToString(size);
+            let percentElement = fragment.appendChild(document.createElement("span"));
+            percentElement.classList.add("percentage");
+            percentElement.textContent = emDash;
+            return fragment;
+        }
+
+        if (columnIdentifier === "size")
+            return Number.bytesToString(this._data.size);
+
+        if (columnIdentifier === "className") {
+            let {className} = this._data;
+            let fragment = document.createDocumentFragment();
+            let iconElement = fragment.appendChild(document.createElement("img"));
+            iconElement.classList.add("icon", WebInspector.HeapSnapshotClusterContentView.iconStyleClassNameForClassName(className));
+            let nameElement = fragment.appendChild(document.createElement("span"));
+            nameElement.classList.add("class-name");
+            nameElement.textContent = className;
+            return fragment;
+        }
+
+        return super.createCellContent(columnIdentifier);
+    }
+
+    sort()
+    {
+        if (this._batched) {
+            this._removeFetchMoreDataGridNode();
+            this._sortInstances();
+            this._updateBatchedChildren();
+            this._appendFetchMoreDataGridNode();
+            return;
+        }
+
+        let children = this.children;
+        children.sort(this._tree._sortComparator);
+
+        for (let i = 0; i < children.length; ++i) {
+            children[i]._recalculateSiblings(i);
+            children[i].sort();
+        }
+    }
+
+    removeCollectedNodes(collectedNodes)
+    {
+        let nodesToRemove = [];
+
+        this.forEachImmediateChild((dataGridNode) => {
+            if (dataGridNode instanceof WebInspector.HeapSnapshotInstanceDataGridNode) {
+                let heapSnapshotNode = dataGridNode.node;
+                if (heapSnapshotNode.id in collectedNodes)
+                    nodesToRemove.push(dataGridNode);
+            }
+        });
+
+        if (nodesToRemove.length) {
+            for (let dataGridNode of nodesToRemove)
+                this.removeChild(dataGridNode);
+        }
+
+        if (this._instances) {
+            this._instances = this._instances.filter((instance) => !(instance.id in collectedNodes));
+            this._fetchBatch(nodesToRemove.length);
+        }
+    }
+
+    updateCount(count)
+    {
+        if (count === this._data.count)
+            return;
+
+        if (!count) {
+            this._tree.removeChild(this);
+            return;
+        }
+
+        this._data.count = count;
+        this.needsRefresh();
+    }
+
+    // Private
+
+    _populate()
+    {
+        this.removeEventListener("populate", this._populate, this);
+
+        this._tree.heapSnapshot.instancesWithClassName(this._data.className, (instances) => {
+            // FIXME: <https://webkit.org/b/157905> Web Inspector: Provide a way to toggle between showing only live objects and live+dead objects
+            this._instances = instances.filter((instance) => !instance.dead);
+            this._sortInstances();
+
+            // Batch.
+            if (instances.length > WebInspector.HeapSnapshotClassDataGridNode.ChildrenBatchLimit) {
+                this._batched = true;
+                this._fetchBatch(WebInspector.HeapSnapshotClassDataGridNode.ChildrenBatchLimit);
+                return;
+            }
+
+            for (let instance of this._instances)
+                this.appendChild(new WebInspector.HeapSnapshotInstanceDataGridNode(instance, this._tree));
+        });
+    }
+
+    _fetchBatch(batchSize)
+    {
+        if (this._batched && this.children.length)
+            this._removeFetchMoreDataGridNode();
+
+        let oldCount = this.children.length;
+        let newCount = oldCount + batchSize;
+
+        if (newCount >= this._instances.length) {
+            newCount = this._instances.length - 1;
+            this._batched = false;
+        }
+
+        let count = newCount - oldCount;
+        if (count) {
+            for (let i = 0; i <= count; ++i) {
+                let instance = this._instances[oldCount + i];
+                this.appendChild(new WebInspector.HeapSnapshotInstanceDataGridNode(instance, this._tree));
+            }
+        }
+
+        if (this._batched)
+            this._appendFetchMoreDataGridNode();
+    }
+
+    _sortInstances()
+    {
+        this._instances.sort((a, b) => {
+            let fakeDataGridNodeA = {data: a};
+            let fakeDataGridNodeB = {data: b};
+            return this._tree._sortComparator(fakeDataGridNodeA, fakeDataGridNodeB);
+        });
+    }
+
+    _updateBatchedChildren()
+    {
+        let count = this.children.length;
+
+        this.removeChildren();
+
+        for (let i = 0; i < count; ++i)
+            this.appendChild(new WebInspector.HeapSnapshotInstanceDataGridNode(this._instances[i], this._tree));
+    }
+
+    _removeFetchMoreDataGridNode()
+    {
+        console.assert(this.children[this.children.length - 1] instanceof WebInspector.HeapSnapshotInstanceFetchMoreDataGridNode);
+
+        this.removeChild(this.children[this.children.length - 1]);
+    }
+
+    _appendFetchMoreDataGridNode()
+    {
+        console.assert(!(this.children[this.children.length - 1] instanceof WebInspector.HeapSnapshotInstanceFetchMoreDataGridNode));
+
+        let count = this.children.length;
+        let totalCount = this._instances.length;
+        let remainingCount = totalCount - count;
+        let batchSize = remainingCount >= WebInspector.HeapSnapshotClassDataGridNode.ChildrenBatchLimit ? WebInspector.HeapSnapshotClassDataGridNode.ChildrenBatchLimit : 0;
+
+        this.appendChild(new WebInspector.HeapSnapshotInstanceFetchMoreDataGridNode(this._tree, batchSize, remainingCount, this._fetchBatch.bind(this)));
+    }
+};
+
+WebInspector.HeapSnapshotClassDataGridNode.ChildrenBatchLimit = 100;
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotClusterContentView.js b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotClusterContentView.js
new file mode 100644
index 000000000..e27fb05d6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotClusterContentView.js
@@ -0,0 +1,242 @@
+/*
+ * 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.HeapSnapshotClusterContentView = class HeapSnapshotClusterContentView extends WebInspector.ClusterContentView
+{
+    constructor(heapSnapshot)
+    {
+        super(heapSnapshot);
+
+        console.assert(heapSnapshot instanceof WebInspector.HeapSnapshotProxy || heapSnapshot instanceof WebInspector.HeapSnapshotDiffProxy);
+
+        this._heapSnapshot = heapSnapshot;
+
+        function createPathComponent(displayName, className, identifier)
+        {
+            let pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, identifier, false, true);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+            return pathComponent;
+        }
+
+        this._shownInitialContent = false;
+        this._instancesContentView = null;
+        this._objectGraphContentView = null;
+
+        this._instancesPathComponent = createPathComponent.call(this, WebInspector.UIString("Instances"), "heap-snapshot-instances-icon", WebInspector.HeapSnapshotClusterContentView.InstancesIdentifier);
+        this._objectGraphPathComponent = createPathComponent.call(this, WebInspector.UIString("Object Graph"), "heap-snapshot-object-graph-icon", WebInspector.HeapSnapshotClusterContentView.ObjectGraphIdentifier);
+
+        if (this._supportsObjectGraph()) {
+            this._instancesPathComponent.nextSibling = this._objectGraphPathComponent;
+            this._objectGraphPathComponent.previousSibling = this._instancesPathComponent;
+        }
+
+        this._currentContentViewSetting = new WebInspector.Setting("heap-snapshot-cluster-current-view", WebInspector.HeapSnapshotClusterContentView.InstancesIdentifier);
+    }
+
+    // Static
+
+    static iconStyleClassNameForClassName(className, internal)
+    {
+        if (internal)
+            return "native";
+
+        switch (className) {
+        case "Object":
+        case "Array":
+        case "Map":
+        case "Set":
+        case "WeakMap":
+        case "WeakSet":
+        case "Promise":
+        case "Error":
+        case "Window":
+        case "Map Iterator":
+        case "Set Iterator":
+        case "Math":
+        case "JSON":
+        case "GlobalObject":
+            return "object";
+        case "Function":
+            return "function";
+        case "RegExp":
+            return "regex";
+        case "Number":
+            return "number";
+        case "Boolean":
+            return "boolean";
+        case "String":
+        case "string":
+            return "string";
+        case "Symbol":
+        case "symbol":
+            return "symbol";
+        }
+
+        if (className.endsWith("Prototype"))
+            return "object";
+        if (className.endsWith("Element") || className === "Node" || className === "Text")
+            return "node";
+
+        return "native";
+    }
+
+    // Public
+
+    get heapSnapshot() { return this._heapSnapshot; }
+
+    get instancesContentView()
+    {
+        if (!this._instancesContentView)
+            this._instancesContentView = new WebInspector.HeapSnapshotInstancesContentView(this._heapSnapshot);
+        return this._instancesContentView;
+    }
+
+    get objectGraphContentView()
+    {
+        if (!this._supportsObjectGraph())
+            return null;
+
+        if (!this._objectGraphContentView)
+            this._objectGraphContentView = new WebInspector.HeapSnapshotObjectGraphContentView(this._heapSnapshot);
+        return this._objectGraphContentView;
+    }
+
+    get selectionPathComponents()
+    {
+        let currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView)
+            return [];
+
+        let 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.HeapSnapshotClusterContentView.ContentViewIdentifierCookieKey] = this._currentContentViewSetting.value;
+    }
+
+    restoreFromCookie(cookie)
+    {
+        this._showContentViewForIdentifier(cookie[WebInspector.HeapSnapshotClusterContentView.ContentViewIdentifierCookieKey]);
+    }
+
+    showInstances()
+    {
+        this._shownInitialContent = true;
+        return this._showContentViewForIdentifier(WebInspector.HeapSnapshotClusterContentView.InstancesIdentifier);
+    }
+
+    showObjectGraph()
+    {
+        this._shownInitialContent = true;
+        return this._showContentViewForIdentifier(WebInspector.HeapSnapshotClusterContentView.ObjectGraphIdentifier);
+    }
+
+    // Private
+
+    _supportsObjectGraph()
+    {
+        return this._heapSnapshot instanceof WebInspector.HeapSnapshotProxy;
+    }
+
+    _pathComponentForContentView(contentView)
+    {
+        console.assert(contentView);
+        if (!contentView)
+            return null;
+        if (contentView === this._instancesContentView)
+            return this._instancesPathComponent;
+        if (contentView === this._objectGraphContentView)
+            return this._objectGraphPathComponent;
+        console.error("Unknown contentView.");
+        return null;
+    }
+
+    _identifierForContentView(contentView)
+    {
+        console.assert(contentView);
+        if (!contentView)
+            return null;
+        if (contentView === this._instancesContentView)
+            return WebInspector.HeapSnapshotClusterContentView.InstancesIdentifier;
+        if (contentView === this._objectGraphContentView)
+            return WebInspector.HeapSnapshotClusterContentView.ObjectGraphIdentifier;
+        console.error("Unknown contentView.");
+        return null;
+    }
+
+    _showContentViewForIdentifier(identifier)
+    {
+        let contentViewToShow = null;
+
+        switch (identifier) {
+        case WebInspector.HeapSnapshotClusterContentView.InstancesIdentifier:
+            contentViewToShow = this.instancesContentView;
+            break;
+        case WebInspector.HeapSnapshotClusterContentView.ObjectGraphIdentifier:
+            contentViewToShow = this.objectGraphContentView;
+            break;
+        }
+
+        if (!contentViewToShow)
+            contentViewToShow = this.instancesContentView;
+
+        console.assert(contentViewToShow);
+
+        this._shownInitialContent = true;
+
+        this._currentContentViewSetting.value = this._identifierForContentView(contentViewToShow);
+
+        return this.contentViewContainer.showContentView(contentViewToShow);
+    }
+
+    _pathComponentSelected(event)
+    {
+        this._showContentViewForIdentifier(event.data.pathComponent.representedObject);
+    }
+};
+
+WebInspector.HeapSnapshotClusterContentView.ContentViewIdentifierCookieKey = "heap-snapshot-cluster-content-view-identifier";
+
+WebInspector.HeapSnapshotClusterContentView.InstancesIdentifier = "instances";
+WebInspector.HeapSnapshotClusterContentView.ObjectGraphIdentifier = "object-graph";
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotContentView.js b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotContentView.js
new file mode 100644
index 000000000..61efbcedd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotContentView.js
@@ -0,0 +1,158 @@
+/*
+ * 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.HeapSnapshotContentView = class HeapSnapshotContentView extends WebInspector.ContentView
+{
+    constructor(representedObject, identifier, columns, heapSnapshotDataGridTreeConstructor)
+    {
+        console.assert(representedObject instanceof WebInspector.HeapSnapshotProxy || representedObject instanceof WebInspector.HeapSnapshotDiffProxy);
+
+        super(representedObject);
+
+        this.element.classList.add("heap-snapshot");
+
+        this._dataGrid = new WebInspector.DataGrid(columns);
+        this._dataGrid.sortColumnIdentifier = "retainedSize";
+        this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Descending;
+        this._dataGrid.createSettings(identifier);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
+
+        let sortComparator = WebInspector.HeapSnapshotDataGridTree.buildSortComparator(this._dataGrid.sortColumnIdentifier, this._dataGrid.sortOrder);
+        this._heapSnapshotDataGridTree = new heapSnapshotDataGridTreeConstructor(this.representedObject, sortComparator);
+        this._heapSnapshotDataGridTree.addEventListener(WebInspector.HeapSnapshotDataGridTree.Event.DidPopulate, this._heapSnapshotDataGridTreeDidPopulate, this);
+
+        for (let child of this._heapSnapshotDataGridTree.children)
+            this._dataGrid.appendChild(child);
+
+        this.addSubview(this._dataGrid);
+        this._dataGrid.updateLayout();
+    }
+
+    // Protected
+
+    shown()
+    {
+        super.shown();
+
+        this._heapSnapshotDataGridTree.shown();
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        this._heapSnapshotDataGridTree.hidden();
+    }
+
+    get scrollableElements()
+    {
+        return [this._dataGrid.scrollContainer];
+    }
+
+    // Private
+
+    _sortDataGrid()
+    {
+        if (!this._heapSnapshotDataGridTree)
+            return;
+
+        this._heapSnapshotDataGridTree.sortComparator = WebInspector.HeapSnapshotDataGridTree.buildSortComparator(this._dataGrid.sortColumnIdentifier, this._dataGrid.sortOrder);
+
+        this._dataGrid.removeChildren();
+        for (let child of this._heapSnapshotDataGridTree.children)
+            this._dataGrid.appendChild(child);
+    }
+
+    _heapSnapshotDataGridTreeDidPopulate()
+    {
+        this._dataGrid.removeChildren();
+        for (let child of this._heapSnapshotDataGridTree.children)
+            this._dataGrid.appendChild(child);
+    }
+};
+
+WebInspector.HeapSnapshotInstancesContentView = class HeapSnapshotInstancesContentView extends WebInspector.HeapSnapshotContentView
+{
+    constructor(representedObject)
+    {
+        let columns = {
+            retainedSize: {
+                title: WebInspector.UIString("Retained Size"),
+                tooltip: WebInspector.UIString("Size of current object plus all objects it keeps alive"),
+                width: "140px",
+                aligned: "right",
+                sortable: true,
+            },
+            size: {
+                title: WebInspector.UIString("Self Size"),
+                width: "90px",
+                aligned: "right",
+                sortable: true,
+            },
+            count: {
+                title: WebInspector.UIString("Count"),
+                width: "75px",
+                aligned: "right",
+                sortable: true,
+            },
+            className: {
+                title: WebInspector.UIString("Name"),
+                sortable: true,
+                disclosure: true,
+            }
+        };
+
+        super(representedObject, "heap-snapshot-instances-content-view", columns, WebInspector.HeapSnapshotInstancesDataGridTree);
+    }
+};
+
+WebInspector.HeapSnapshotObjectGraphContentView = class HeapSnapshotObjectGraphContentView extends WebInspector.HeapSnapshotContentView
+{
+    constructor(representedObject)
+    {
+        let columns = {
+            retainedSize: {
+                title: WebInspector.UIString("Retained Size"),
+                tooltip: WebInspector.UIString("Size of current object plus all objects it keeps alive"),
+                width: "140px",
+                aligned: "right",
+                sortable: true,
+            },
+            size: {
+                title: WebInspector.UIString("Self Size"),
+                width: "90px",
+                aligned: "right",
+                sortable: true,
+            },
+            className: {
+                title: WebInspector.UIString("Name"),
+                sortable: true,
+                disclosure: true,
+            }
+        };
+
+        super(representedObject, "heap-snapshot-object-graph-content-view", columns, WebInspector.HeapSnapshotObjectGraphDataGridTree);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotDataGridTree.js b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotDataGridTree.js
new file mode 100644
index 000000000..7057f4c1b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotDataGridTree.js
@@ -0,0 +1,274 @@
+/*
+* 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.HeapSnapshotDataGridTree = class HeapSnapshotDataGridTree extends WebInspector.Object
+{
+    constructor(heapSnapshot, sortComparator)
+    {
+        super();
+
+        console.assert(heapSnapshot instanceof WebInspector.HeapSnapshotProxy || heapSnapshot instanceof WebInspector.HeapSnapshotDiffProxy);
+
+        this._heapSnapshot = heapSnapshot;
+        this._heapSnapshot.addEventListener(WebInspector.HeapSnapshotProxy.Event.CollectedNodes, this._heapSnapshotCollectedNodes, this);
+
+        this._children = [];
+        this._sortComparator = sortComparator;
+
+        this._visible = false;
+        this._popover = null;
+        this._popoverGridNode = null;
+        this._popoverTargetElement = null;
+
+        this.populateTopLevel();
+    }
+
+    // Static
+
+    static buildSortComparator(columnIdentifier, sortOrder)
+    {
+        let multiplier = sortOrder === WebInspector.DataGrid.SortOrder.Ascending ? 1 : -1;
+        let numberCompare = (columnIdentifier, a, b) => multiplier * (a.data[columnIdentifier] - b.data[columnIdentifier]);
+        let nameCompare = (a, b) => {
+            // Sort by property name if available. Property names before no property name.
+            if (a.propertyName || b.propertyName) {
+                if (a.propertyName && !b.propertyName)
+                    return multiplier * -1;
+                if (!a.propertyName && b.propertyName)
+                    return multiplier * 1;
+                let propertyNameCompare = a.propertyName.localeCompare(b.propertyName);
+                console.assert(propertyNameCompare !== 0, "Property names should be unique, we shouldn't have equal property names.");
+                return multiplier * propertyNameCompare;
+            }
+
+            // Sort by class name and object id if no property name.
+            let classNameCompare = a.data.className.localeCompare(b.data.className);
+            if (classNameCompare)
+                return multiplier * classNameCompare;
+            if (a.data.id || b.data.id)
+                return multiplier * (a.data.id - b.data.id);
+            return 0;
+        };
+
+        switch (columnIdentifier) {
+        case "retainedSize":
+            return numberCompare.bind(this, "retainedSize");
+        case "size":
+            return numberCompare.bind(this, "size");
+        case "count":
+            return numberCompare.bind(this, "count");
+        case "className":
+            return nameCompare;
+        }
+    }
+
+    // Public
+
+    get heapSnapshot() { return this._heapSnapshot; }
+
+    get visible() { return this._visible; }
+    get popoverGridNode() { return this._popoverGridNode; }
+    set popoverGridNode(x) { this._popoverGridNode = x; }
+    get popoverTargetElement() { return this._popoverTargetElement; }
+    set popoverTargetElement(x) { this._popoverTargetElement = x; }
+
+    get popover()
+    {
+        if (!this._popover) {
+            this._popover = new WebInspector.Popover(this);
+            this._popover.windowResizeHandler = () => {
+                let bounds = WebInspector.Rect.rectFromClientRect(this._popoverTargetElement.getBoundingClientRect());
+                this._popover.present(bounds.pad(2), [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X]);
+            };
+        }
+
+        return this._popover;
+    }
+
+    get children()
+    {
+        return this._children;
+    }
+
+    appendChild(node)
+    {
+        this._children.push(node);
+    }
+
+    insertChild(node, index)
+    {
+        this._children.splice(index, 0, node);
+    }
+
+    removeChild(node)
+    {
+        this._children.remove(node, true);
+    }
+
+    removeChildren()
+    {
+        this._children = [];
+    }
+
+    set sortComparator(comparator)
+    {
+        this._sortComparator = comparator;
+        this.sort();
+    }
+
+    sort()
+    {
+        let children = this._children;
+        children.sort(this._sortComparator);
+
+        for (let i = 0; i < children.length; ++i) {
+            children[i]._recalculateSiblings(i);
+            children[i].sort();
+        }
+    }
+
+    shown()
+    {
+        this._visible = true;
+    }
+
+    hidden()
+    {
+        this._visible = false;
+
+        if (this._popover && this._popover.visible)
+            this._popover.dismiss();
+    }
+
+    // Popover delegate
+
+    willDismissPopover(popover)
+    {
+        this._popoverGridNode = null;
+        this._popoverTargetElement = null;
+    }
+
+    // Protected
+
+    get alwaysShowRetainedSize()
+    {
+        return false;
+    }
+
+    populateTopLevel()
+    {
+        // Implemented by subclasses.
+    }
+
+    removeCollectedNodes(collectedNodes)
+    {
+        // Implemented by subclasses.
+    }
+
+    didPopulate()
+    {
+        this.sort();
+
+        this.dispatchEventToListeners(WebInspector.HeapSnapshotDataGridTree.Event.DidPopulate);
+    }
+
+    // Private
+
+    _heapSnapshotCollectedNodes(event)
+    {
+        this.removeCollectedNodes(event.data.collectedNodes);
+    }
+};
+
+WebInspector.HeapSnapshotDataGridTree.Event = {
+    DidPopulate: "heap-snapshot-data-grid-tree-did-populate",
+};
+
+WebInspector.HeapSnapshotInstancesDataGridTree = class HeapSnapshotInstancesDataGridTree extends WebInspector.HeapSnapshotDataGridTree
+{
+    get alwaysShowRetainedSize()
+    {
+        return false;
+    }
+
+    populateTopLevel()
+    {
+        // Populate the first level with the different non-internal classes.
+        for (let [className, {size, retainedSize, count, internalCount, deadCount}] of this.heapSnapshot.categories) {
+            if (count === internalCount)
+                continue;
+
+            // FIXME: <https://webkit.org/b/157905> Web Inspector: Provide a way to toggle between showing only live objects and live+dead objects
+            let liveCount = count - deadCount;
+            if (!liveCount)
+                continue;
+
+            this.appendChild(new WebInspector.HeapSnapshotClassDataGridNode({className, size, retainedSize, count: liveCount}, this));
+        }
+
+        this.didPopulate();
+    }
+
+    removeCollectedNodes(collectedNodes)
+    {
+        for (let classDataGridNode of this.children) {
+            let {count, deadCount} = this.heapSnapshot.categories.get(classDataGridNode.data.className);
+            let liveCount = count - deadCount;
+            classDataGridNode.updateCount(liveCount);
+            if (liveCount)
+                classDataGridNode.removeCollectedNodes(collectedNodes);
+        }
+
+        this.didPopulate();
+    }
+};
+
+WebInspector.HeapSnapshotObjectGraphDataGridTree = class HeapSnapshotInstancesDataGridTree extends WebInspector.HeapSnapshotDataGridTree
+{
+    get alwaysShowRetainedSize()
+    {
+        return true;
+    }
+
+    populateTopLevel()
+    {
+        this.heapSnapshot.instancesWithClassName("GlobalObject", (instances) => {
+            for (let instance of instances)
+                this.appendChild(new WebInspector.HeapSnapshotInstanceDataGridNode(instance, this));
+        });
+
+        this.heapSnapshot.instancesWithClassName("Window", (instances) => {
+            for (let instance of instances) {
+                // FIXME: Why is the window.Window Function classified as a Window?
+                // In any case, ignore objects not dominated by the root, as they
+                // are probably not what we want.
+                if (instance.dominatorNodeIdentifier === 0)
+                    this.appendChild(new WebInspector.HeapSnapshotInstanceDataGridNode(instance, this));
+            }
+
+            this.didPopulate();
+        });
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstanceDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstanceDataGridNode.js
new file mode 100644
index 000000000..c23bedcb3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstanceDataGridNode.js
@@ -0,0 +1,479 @@
+/*
+* 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.HeapSnapshotInstanceDataGridNode = class HeapSnapshotInstanceDataGridNode extends WebInspector.DataGridNode
+{
+    constructor(node, tree, edge, base)
+    {
+        // Don't treat strings as having child nodes, even if they have a Structure.
+        let hasChildren = node.hasChildren && node.className !== "string";
+
+        super(node, hasChildren);
+
+        console.assert(node instanceof WebInspector.HeapSnapshotNodeProxy);
+        console.assert(!edge || edge instanceof WebInspector.HeapSnapshotEdgeProxy);
+        console.assert(!base || base instanceof WebInspector.HeapSnapshotInstanceDataGridNode);
+
+        this._node = node;
+        this._tree = tree;
+        this._edge = edge || null;
+        this._base = base || null;
+
+        // FIXME: Make instance grid nodes copyable.
+        this.copyable = false;
+
+        if (hasChildren)
+            this.addEventListener("populate", this._populate, this);
+    }
+
+    // Static
+
+    static logHeapSnapshotNode(node)
+    {
+        let heapObjectIdentifier = node.id;
+        let shouldRevealConsole = true;
+        let text = WebInspector.UIString("Heap Snapshot Object (@%d)").format(heapObjectIdentifier);
+
+        node.shortestGCRootPath((gcRootPath) => {
+            if (gcRootPath.length) {
+                gcRootPath = gcRootPath.slice().reverse();
+                let windowIndex = gcRootPath.findIndex((x) => {
+                    return x instanceof WebInspector.HeapSnapshotNodeProxy && x.className === "Window";
+                });
+
+                let heapSnapshotRootPath = WebInspector.HeapSnapshotRootPath.emptyPath();
+                for (let i = windowIndex === -1 ? 0 : windowIndex; i < gcRootPath.length; ++i) {
+                    let component = gcRootPath[i];
+                    if (component instanceof WebInspector.HeapSnapshotNodeProxy) {
+                        if (component.className === "Window")
+                            heapSnapshotRootPath = heapSnapshotRootPath.appendGlobalScopeName(component, "window");
+                    } else if (component instanceof WebInspector.HeapSnapshotEdgeProxy)
+                        heapSnapshotRootPath = heapSnapshotRootPath.appendEdge(component);
+                }
+
+                if (!heapSnapshotRootPath.isFullPathImpossible())
+                    text = heapSnapshotRootPath.fullPath;
+            }
+
+            if (node.className === "string") {
+                HeapAgent.getPreview(heapObjectIdentifier, function(error, string, functionDetails, objectPreviewPayload) {
+                    let remoteObject = error ? WebInspector.RemoteObject.fromPrimitiveValue(undefined) : WebInspector.RemoteObject.fromPrimitiveValue(string);
+                    WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, remoteObject, shouldRevealConsole);
+                });
+            } else {
+                HeapAgent.getRemoteObject(heapObjectIdentifier, WebInspector.RuntimeManager.ConsoleObjectGroup, function(error, remoteObjectPayload) {
+                    let remoteObject = error ? WebInspector.RemoteObject.fromPrimitiveValue(undefined) : WebInspector.RemoteObject.fromPayload(remoteObjectPayload, WebInspector.assumingMainTarget());
+                    WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, remoteObject, shouldRevealConsole);
+                });
+            }
+        });
+    }
+
+    // Protected
+
+    get data() { return this._node; }
+    get node() { return this._node; }
+
+    get propertyName()
+    {
+        if (!this._edge)
+            return "";
+
+        if (!this._propertyName)
+            this._propertyName = WebInspector.HeapSnapshotRootPath.pathComponentForIndividualEdge(this._edge);
+        return this._propertyName;
+    }
+
+    createCells()
+    {
+        super.createCells();
+
+        this.element.classList.add("instance");
+    }
+
+    createCellContent(columnIdentifier)
+    {
+        if (columnIdentifier === "retainedSize") {
+            let subRetainedSize = false;
+            if (this._base && !this._tree.alwaysShowRetainedSize) {
+                if (this._isDominatedByNonBaseParent())
+                    subRetainedSize = true;
+                else if (!this._isDominatedByBase())
+                    return emDash;
+            }
+
+            let size = this._node.retainedSize;
+            let fragment = document.createDocumentFragment();
+            let sizeElement = fragment.appendChild(document.createElement("span"));
+            sizeElement.classList.add("size");
+            sizeElement.textContent = Number.bytesToString(size);
+            let fraction = size / this._tree._heapSnapshot.totalSize;
+            let percentElement = fragment.appendChild(document.createElement("span"));
+            percentElement.classList.add("percentage");
+            percentElement.textContent = Number.percentageString(fraction);
+
+            if (subRetainedSize) {
+                sizeElement.classList.add("sub-retained");
+                percentElement.classList.add("sub-retained");
+            }
+
+            return fragment;
+        }
+
+        if (columnIdentifier === "size")
+            return Number.bytesToString(this._node.size);
+
+        if (columnIdentifier === "className") {
+            let {className, id, internal} = this._node;
+            let containerElement = document.createElement("span");
+            containerElement.addEventListener("contextmenu", this._contextMenuHandler.bind(this));
+
+            let iconElement = containerElement.appendChild(document.createElement("img"));
+            iconElement.classList.add("icon", WebInspector.HeapSnapshotClusterContentView.iconStyleClassNameForClassName(className, internal));
+
+            if (this._edge) {
+                let nameElement = containerElement.appendChild(document.createElement("span"));
+                let propertyName = this.propertyName;
+                if (propertyName)
+                    nameElement.textContent = propertyName + ": " + this._node.className + " ";
+                else
+                    nameElement.textContent = this._node.className + " ";
+            }
+
+            let idElement = containerElement.appendChild(document.createElement("span"));
+            idElement.classList.add("object-id");
+            idElement.textContent = "@" + id;
+            idElement.addEventListener("click", WebInspector.HeapSnapshotInstanceDataGridNode.logHeapSnapshotNode.bind(null, this._node));
+            idElement.addEventListener("mouseover", this._mouseoverHandler.bind(this));
+
+            let spacerElement = containerElement.appendChild(document.createElement("span"));
+            spacerElement.textContent = " ";
+
+            if (className === "Window" && this._node.dominatorNodeIdentifier === 0) {
+                containerElement.append("Window ");
+                this._populateWindowPreview(containerElement);
+            } else
+                this._populatePreview(containerElement);
+
+            return containerElement;
+        }
+
+        return super.createCellContent(columnIdentifier);
+    }
+
+    sort()
+    {
+        let children = this.children;
+        children.sort(this._tree._sortComparator);
+
+        for (let i = 0; i < children.length; ++i) {
+            children[i]._recalculateSiblings(i);
+            children[i].sort();
+        }
+    }
+
+    // Private
+
+    _isDominatedByBase()
+    {
+        return this._node.dominatorNodeIdentifier === this._base.node.id;
+    }
+
+    _isDominatedByNonBaseParent()
+    {
+        for (let p = this.parent; p; p = p.parent) {
+            if (p === this._base)
+                return false;
+            if (this._node.dominatorNodeIdentifier === p.node.id)
+                return true;
+        }
+
+        return false;
+    }
+
+    _populate()
+    {
+        this.removeEventListener("populate", this._populate, this);
+
+        function propertyName(edge) {
+            return edge ? WebInspector.HeapSnapshotRootPath.pathComponentForIndividualEdge(edge) : "";
+        }
+
+        this._node.retainedNodes((instances, edges) => {
+            // Reference edge from instance so we can get it after sorting.
+            for (let i = 0; i < instances.length; ++i)
+                instances[i].__edge = edges[i];
+
+            instances.sort((a, b) => {
+                let fakeDataGridNodeA = {data: a, propertyName: propertyName(a.__edge)};
+                let fakeDataGridNodeB = {data: b, propertyName: propertyName(b.__edge)};
+                return this._tree._sortComparator(fakeDataGridNodeA, fakeDataGridNodeB);
+            });
+
+            // FIXME: This should gracefully handle a node that references many objects.
+
+            for (let instance of instances) {
+                if (instance.__edge && instance.__edge.isPrivateSymbol())
+                    continue;
+
+                this.appendChild(new WebInspector.HeapSnapshotInstanceDataGridNode(instance, this._tree, instance.__edge, this._base || this));
+            }
+        });
+    }
+
+    _contextMenuHandler(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        contextMenu.appendSeparator();
+        contextMenu.appendItem(WebInspector.UIString("Log Value"), WebInspector.HeapSnapshotInstanceDataGridNode.logHeapSnapshotNode.bind(null, this._node));
+    }
+
+    _populateError(containerElement)
+    {
+        if (this._node.internal)
+            return;
+
+        let previewErrorElement = containerElement.appendChild(document.createElement("span"));
+        previewErrorElement.classList.add("preview-error");
+        previewErrorElement.textContent = WebInspector.UIString("No preview available");
+    }
+
+    _populateWindowPreview(containerElement)
+    {
+        HeapAgent.getRemoteObject(this._node.id, (error, remoteObjectPayload) => {
+            if (error) {
+                this._populateError(containerElement);
+                return;
+            }
+
+            function inspectedPage_window_getLocationHref() {
+                return this.location.href;
+            }
+
+            let remoteObject = WebInspector.RemoteObject.fromPayload(remoteObjectPayload, WebInspector.assumingMainTarget());
+            remoteObject.callFunctionJSON(inspectedPage_window_getLocationHref, undefined, (href) => {
+                remoteObject.release();
+
+                if (!href)
+                    this._populateError(containerElement);
+                else {
+                    let primitiveRemoteObject = WebInspector.RemoteObject.fromPrimitiveValue(href);
+                    containerElement.appendChild(WebInspector.FormattedValue.createElementForRemoteObject(primitiveRemoteObject));
+                }
+            });
+        });
+    }
+
+    _populatePreview(containerElement)
+    {
+        HeapAgent.getPreview(this._node.id, (error, string, functionDetails, objectPreviewPayload) => {
+            if (error) {
+                this._populateError(containerElement);
+                return;
+            }
+
+            if (string) {
+                let primitiveRemoteObject = WebInspector.RemoteObject.fromPrimitiveValue(string);
+                containerElement.appendChild(WebInspector.FormattedValue.createElementForRemoteObject(primitiveRemoteObject));
+                return;
+            }
+
+            if (functionDetails) {
+                let {location, name, displayName} = functionDetails;
+                let functionNameElement = containerElement.appendChild(document.createElement("span"));
+                functionNameElement.classList.add("function-name");
+                functionNameElement.textContent = name || displayName || WebInspector.UIString("(anonymous function)");
+                let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId, WebInspector.assumingMainTarget());
+                if (sourceCode) {
+                    let locationElement = containerElement.appendChild(document.createElement("span"));
+                    locationElement.classList.add("location");
+                    let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber);
+                    sourceCodeLocation.populateLiveDisplayLocationString(locationElement, "textContent", WebInspector.SourceCodeLocation.ColumnStyle.Hidden, WebInspector.SourceCodeLocation.NameStyle.Short);
+
+                    const dontFloat = true;
+                    const useGoToArrowButton = true;
+                    let goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, dontFloat, useGoToArrowButton);
+                    containerElement.appendChild(goToArrowButtonLink);
+                }
+                return;
+            }
+
+            if (objectPreviewPayload) {
+                let objectPreview = WebInspector.ObjectPreview.fromPayload(objectPreviewPayload);
+                let previewElement = WebInspector.FormattedValue.createObjectPreviewOrFormattedValueForObjectPreview(objectPreview);
+                containerElement.appendChild(previewElement);
+                return;
+            }
+        });
+    }
+
+    _mouseoverHandler(event)
+    {
+        let targetFrame = WebInspector.Rect.rectFromClientRect(event.target.getBoundingClientRect());
+        if (!targetFrame.size.width && !targetFrame.size.height)
+            return;
+
+        if (this._tree.popoverGridNode === this._node)
+            return;
+
+        this._tree.popoverGridNode = this._node;
+        this._tree.popoverTargetElement = event.target;
+
+        let popoverContentElement = document.createElement("div");
+        popoverContentElement.classList.add("heap-snapshot", "heap-snapshot-instance-popover-content");
+
+        function appendTitle(node) {
+            let idElement = document.createElement("span");
+            idElement.classList.add("object-id");
+            idElement.textContent = "@" + node.id;
+            idElement.addEventListener("click", WebInspector.HeapSnapshotInstanceDataGridNode.logHeapSnapshotNode.bind(null, node));
+
+            let title = popoverContentElement.appendChild(document.createElement("div"));
+            title.classList.add("title");
+            let localizedString = WebInspector.UIString("Shortest property path to %s").format("@@@");
+            let [before, after] = localizedString.split(/\s*@@@\s*/);
+            title.append(before + " ", idElement, " " + after);
+        }
+
+        function appendPath(path) {
+            let tableContainer = popoverContentElement.appendChild(document.createElement("div"));
+            tableContainer.classList.add("table-container");
+
+            let tableElement = tableContainer.appendChild(document.createElement("table"));
+
+            path = path.slice().reverse();
+            let windowIndex = path.findIndex((x) => {
+                return x instanceof WebInspector.HeapSnapshotNodeProxy && x.className === "Window";
+            });
+
+            let edge = null;
+            for (let i = windowIndex === -1 ? 0 : windowIndex; i < path.length; ++i) {
+                let component = path[i];
+                if (component instanceof WebInspector.HeapSnapshotEdgeProxy) {
+                    edge = component;
+                    continue;
+                }
+                appendPathRow(tableElement, edge, component);
+                edge = null;
+            }
+        }
+
+        function appendPathRow(tableElement, edge, node) {
+            let tableRow = tableElement.appendChild(document.createElement("tr"));
+
+            // Edge name.
+            let pathDataElement = tableRow.appendChild(document.createElement("td"));
+            pathDataElement.classList.add("edge-name");
+
+            if (node.className === "Window")
+                pathDataElement.textContent = "window";
+            else if (edge) {
+                let edgeString = stringifyEdge(edge);
+                pathDataElement.textContent = typeof edgeString === "string" ? edgeString : emDash;
+            } else
+                pathDataElement.textContent = emDash;
+
+            if (pathDataElement.textContent.length > 10)
+                pathDataElement.title = pathDataElement.textContent;
+
+            // Object.
+            let objectDataElement = tableRow.appendChild(document.createElement("td"));
+            objectDataElement.classList.add("object-data");
+
+            let containerElement = objectDataElement.appendChild(document.createElement("div"));
+            containerElement.classList.add("node");
+
+            let iconElement = containerElement.appendChild(document.createElement("img"));
+            iconElement.classList.add("icon", WebInspector.HeapSnapshotClusterContentView.iconStyleClassNameForClassName(node.className, node.internal));
+
+            let classNameElement = containerElement.appendChild(document.createElement("span"));
+            classNameElement.textContent = sanitizeClassName(node.className) + " ";
+
+            let idElement = containerElement.appendChild(document.createElement("span"));
+            idElement.classList.add("object-id");
+            idElement.textContent = "@" + node.id;
+            idElement.addEventListener("click", WebInspector.HeapSnapshotInstanceDataGridNode.logHeapSnapshotNode.bind(null, node));
+
+            // Extra.
+            if (node.className === "Function") {
+                let goToArrowPlaceHolderElement = containerElement.appendChild(document.createElement("span"));
+                goToArrowPlaceHolderElement.style.display = "inline-block";
+                goToArrowPlaceHolderElement.style.width = "10px";
+                HeapAgent.getPreview(node.id, function(error, string, functionDetails, objectPreviewPayload) {
+                    if (functionDetails) {
+                        let location = functionDetails.location;
+                        let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId, WebInspector.assumingMainTarget());
+                        if (sourceCode) {
+                            const dontFloat = true;
+                            const useGoToArrowButton = true;
+                            let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber);
+                            let goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, dontFloat, useGoToArrowButton);
+                            containerElement.replaceChild(goToArrowButtonLink, goToArrowPlaceHolderElement);
+                        }
+                    }
+                });
+            }
+        }
+
+        function sanitizeClassName(className) {
+            if (className.endsWith("LexicalEnvironment"))
+                return WebInspector.UIString("Scope");
+            return className;
+        }
+
+        function stringifyEdge(edge) {
+            switch (edge.type) {
+            case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Property:
+            case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Variable:
+                if (/^(?![0-9])\w+$/.test(edge.data))
+                    return edge.data;
+                return "[" + doubleQuotedString(edge.data) + "]";
+            case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Index:
+                return "[" + edge.data + "]";
+            case WebInspector.HeapSnapshotEdgeProxy.EdgeType.Internal:
+            default:
+                return null;
+            }
+        }
+
+        this._node.shortestGCRootPath((path) => {
+            if (!this._tree.visible)
+                return;
+
+            if (path.length) {
+                appendTitle(this._node);
+                appendPath(path);
+            } else if (this._node.gcRoot) {
+                let textElement = popoverContentElement.appendChild(document.createElement("div"));
+                textElement.textContent = WebInspector.UIString("This object is a root");
+            } else {
+                let emptyElement = popoverContentElement.appendChild(document.createElement("div"));
+                emptyElement.textContent = WebInspector.UIString("This object is referenced by internal objects");
+            }
+
+            this._tree.popover.presentNewContentWithFrame(popoverContentElement, targetFrame.pad(2), [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X]);
+        });
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstanceFetchMoreDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstanceFetchMoreDataGridNode.js
new file mode 100644
index 000000000..2f7cf46ad
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstanceFetchMoreDataGridNode.js
@@ -0,0 +1,70 @@
+/*
+* 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.HeapSnapshotInstanceFetchMoreDataGridNode = class HeapSnapshotInstanceFetchMoreDataGridNode extends WebInspector.DataGridNode
+{
+    constructor(tree, batchCount, remainingCount, fetchCallback)
+    {
+        super({}, false);
+
+        console.assert(typeof batchCount === "number");
+        console.assert(typeof remainingCount === "number");
+        console.assert(typeof fetchCallback === "function");
+
+        this._tree = tree;
+        this._batchCount = batchCount;
+        this._remainingCount = remainingCount;
+        this._fetchCallback = fetchCallback;
+    }
+
+    // Protected
+
+    createCellContent(columnIdentifier)
+    {
+        if (columnIdentifier !== "className")
+            return "";
+
+        let fragment = document.createDocumentFragment();
+
+        if (this._batchCount) {
+            let buttonElement = fragment.appendChild(document.createElement("span"));
+            buttonElement.classList.add("more");
+            buttonElement.textContent = WebInspector.UIString("Show %d More").format(this._batchCount);
+            buttonElement.addEventListener("click", (event) => { this._fetchCallback(this._batchCount); });
+        }
+
+        let buttonElement = fragment.appendChild(document.createElement("span"));
+        buttonElement.classList.add("more");
+        buttonElement.textContent = WebInspector.UIString("Show Remaining (%d)").format(this._remainingCount);
+        buttonElement.addEventListener("click", (event) => { this._fetchCallback(this._remainingCount); });
+
+        return fragment;
+    }
+
+    sort()
+    {
+        // No children to sort.
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstancesContentView.css b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstancesContentView.css
new file mode 100644
index 000000000..8f899ce44
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstancesContentView.css
@@ -0,0 +1,199 @@
+/*
+ * 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.
+ */
+
+.heap-snapshot > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.heap-snapshot > .data-grid td .sub-retained {
+    color: hsl(0, 0%, 60%);
+}
+
+.heap-snapshot > .data-grid td .percentage {
+    width: 45px;
+    margin-left: 4px;
+    display: inline-block;
+}
+
+.heap-snapshot .object-id {
+    color: gray;
+}
+
+.heap-snapshot .object-id:hover {
+    text-decoration: underline;
+}
+
+.heap-snapshot > .data-grid:focus tr.selected > td .sub-retained {
+    color: var(--selected-secondary-text-color);
+}
+
+.heap-snapshot > .data-grid:focus tr.selected .object-id,
+.heap-snapshot > .data-grid:focus tr.selected .object-preview > .size {
+    color: var(--selected-secondary-text-color);
+}
+
+.heap-snapshot > .data-grid:focus tr.selected .formatted-string,
+.heap-snapshot > .data-grid:focus tr.selected .object-preview span {
+    color: var(--selected-foreground-color);
+}
+
+.heap-snapshot > .data-grid td .location {
+    margin-left: 1ex;
+    color: hsl(0, 0%, 60%);
+}
+
+.heap-snapshot > .data-grid:focus tr.selected td .location {
+    color: hsl(0, 0%, 85%);
+}
+
+.heap-snapshot > .data-grid tr:matches(.selected, :hover) td .go-to-arrow {
+    float: none;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    width: 16px;
+    height: 16px;
+    margin-left: 2px;
+}
+
+.heap-snapshot > .data-grid td .more {
+    text-decoration: underline;
+    margin-right: 1ex;
+}
+
+.heap-snapshot .icon {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    content: url(../Images/TypeUndefined.svg);
+}
+
+.heap-snapshot .icon.native {
+    content: url(../Images/Native.svg);
+}
+
+.heap-snapshot .icon.boolean {
+    content: url(../Images/TypeBoolean.svg);
+}
+
+.heap-snapshot .icon.function {
+    content: url(../Images/Function.svg);
+}
+
+.heap-snapshot .icon.number {
+    content: url(../Images/TypeNumber.svg);
+}
+
+.heap-snapshot .icon.object {
+    content: url(../Images/TypeObject.svg);
+}
+
+.heap-snapshot .icon.node {
+    content: url(../Images/DOMElement.svg);
+}
+
+.heap-snapshot .icon.regex {
+    content: url(../Images/TypeRegex.svg);
+}
+
+.heap-snapshot .icon.string {
+    content: url(../Images/TypeString.svg);
+}
+
+.heap-snapshot .icon.symbol {
+    content: url(../Images/TypeSymbol.svg);
+}
+
+.heap-snapshot > .data-grid td .formatted-node-preview,
+.heap-snapshot > .data-grid td .object-preview {
+    text-indent: 0; /* Do not inherit the DataGrid's indent. */
+    line-height: initial;
+}
+
+.heap-snapshot-instance-popover-content > .title {
+    font-family: -apple-system, sans-serif;
+    text-align: center;
+    border-bottom: 1px solid var(--border-color);
+    padding: 0 5px 2px 5px;
+    margin-bottom: 3px;
+}
+
+.heap-snapshot-instance-popover-content {
+    white-space: pre;
+    padding: 5px 0px;
+}
+
+.heap-snapshot-instance-popover-content > .table-container {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.heap-snapshot-instance-popover-content table {
+    border-collapse: collapse;
+}
+
+.heap-snapshot-instance-popover-content tr {
+    margin: 0;
+    padding: 1px 0;
+}
+
+.heap-snapshot-instance-popover-content td {
+    margin: 0;
+    padding: 0;
+}
+
+.heap-snapshot-instance-popover-content td.edge-name {
+    text-align: right;
+    max-width: 110px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    border-right: 1px solid var(--border-color);
+    padding-right: 5px;
+}
+
+.heap-snapshot-instance-popover-content td.object-data {
+    padding-left: 5px;
+}
+
+.heap-snapshot-instance-popover-content .node {
+    height: 17px;
+    line-height: 17px;
+}
+
+.heap-snapshot-instance-popover-content .node * {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.heap-snapshot-instance-popover-content .node .go-to-link {
+    position: relative;
+    top: 1px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css b/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css
new file mode 100644
index 000000000..2cda8470c
--- /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: 13px;
+    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..b7b60b7e3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.js
@@ -0,0 +1,314 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 (!Array.isArray(styleClassNames))
+            styleClassNames = [styleClassNames];
+
+        this._element.classList.add(...styleClassNames);
+
+        if (!textOnly) {
+            this._iconElement = document.createElement("img");
+            this._iconElement.className = "icon";
+            this._element.appendChild(this._iconElement);
+        } else
+            this._element.classList.add("text-only");
+
+        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._collapsed = false;
+        this._hidden = false;
+        this._selectorArrows = false;
+
+        this.displayName = displayName;
+        this.selectorArrows = showSelectorArrows;
+    }
+
+    // Public
+
+    get selectedPathComponent()
+    {
+        let selectedOption = this._selectElement[this._selectElement.selectedIndex];
+        if (!selectedOption && this._selectElement.options.length === 1)
+            selectedOption = this._selectElement.options[0];
+        return selectedOption && selectedOption._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()
+    {
+        let maxWidth = this._element.style.getProperty("width");
+        if (typeof maxWidth === "string")
+            return parseInt(maxWidth);
+        return null;
+    }
+
+    set forcedWidth(width)
+    {
+        if (typeof width === "number") {
+            let 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._hidden;
+    }
+
+    set hidden(flag)
+    {
+        if (this._hidden === flag)
+            return;
+
+        this._hidden = flag;
+        this._element.classList.toggle("hidden", this._hidden);
+    }
+
+    get collapsed()
+    {
+        return this._collapsed;
+    }
+
+    set collapsed(flag)
+    {
+        if (this._collapsed === flag)
+            return;
+
+        this._collapsed = flag;
+        this._element.classList.toggle("collapsed", this._collapsed);
+    }
+
+    get selectorArrows()
+    {
+        return this._selectorArrows;
+    }
+
+    set selectorArrows(flag)
+    {
+        if (this._selectorArrows === flag)
+            return;
+
+        this._selectorArrows = flag;
+
+        if (this._selectorArrows) {
+            this._selectorArrowsElement = document.createElement("img");
+            this._selectorArrowsElement.className = "selector-arrows";
+            this._element.insertBefore(this._selectorArrowsElement, this._separatorElement);
+        } else if (this._selectorArrowsElement) {
+            this._selectorArrowsElement.remove();
+            this._selectorArrowsElement = null;
+        }
+
+        this._element.classList.toggle("show-selector-arrows", !!this._selectorArrows);
+    }
+
+    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()
+    {
+        let 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)
+        {
+            let optionElement = document.createElement("option");
+            let 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;
+        }
+
+        let previousSiblingCount = 0;
+        let 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.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..0f7b81eec
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js
@@ -0,0 +1,249 @@
+/*
+ * 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 = [];
+
+        let componentsEqual = function(a, b) {
+            let getRepresentedObjects = (component) => component.representedObject;
+            let representedObjectsA = a.map(getRepresentedObjects);
+            let representedObjectsB = b.map(getRepresentedObjects);
+            return Array.shallowEqual(representedObjectsA, representedObjectsB);
+        };
+
+        if (this._components && componentsEqual(this._components, newComponents))
+            return;
+
+        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..521a902c4
--- /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: 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..09a6c9b0c
--- /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/IdleTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/IdleTreeElement.css
new file mode 100644
index 000000000..5a04bbaad
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IdleTreeElement.css
@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+.details-section.call-stack .idle .icon {
+    content: url(../Images/Native.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/IdleTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IdleTreeElement.js
new file mode 100644
index 000000000..b5452b604
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IdleTreeElement.js
@@ -0,0 +1,32 @@
+/*
+ * 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.IdleTreeElement = class IdleTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(target)
+    {
+        super("idle", WebInspector.UIString("Idle"));
+    }
+};
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/IndexedDatabaseDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseDetailsSidebarPanel.js
new file mode 100644
index 000000000..8167ee8b4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseDetailsSidebarPanel.js
@@ -0,0 +1,140 @@
+/*
+ * 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.IndexedDatabaseDetailsSidebarPanel = class IndexedDatabaseDetailsSidebarPanel extends WebInspector.DetailsSidebarPanel
+{
+    constructor()
+    {
+        super("indexed-database-details", WebInspector.UIString("Storage"), WebInspector.UIString("Storage"));
+
+        this.element.classList.add("indexed-database");
+
+        this._database = null;
+        this._objectStore = null;
+        this._index = null;
+
+        this._databaseNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Name"));
+        this._databaseVersionRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Version"));
+        this._databaseSecurityOriginRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Security Origin"));
+        this._databaseGroup = new WebInspector.DetailsSectionGroup([this._databaseNameRow, this._databaseVersionRow, this._databaseSecurityOriginRow]);
+        this._databaseSection = new WebInspector.DetailsSection("indexed-database-database", WebInspector.UIString("Database"), [this._databaseGroup]);
+
+        this._objectStoreNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Name"));
+        this._objectStoreKeyPathRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Key Path"));
+        this._objectStoreAutoIncrementRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Auto Increment"));
+        this._objectStoreGroup = new WebInspector.DetailsSectionGroup([this._objectStoreNameRow, this._objectStoreKeyPathRow, this._objectStoreAutoIncrementRow]);
+        this._objectStoreSection = new WebInspector.DetailsSection("indexed-database-object-store", WebInspector.UIString("Object Store"), [this._objectStoreGroup]);
+
+        this._indexNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Name"));
+        this._indexKeyPathRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Key Path"));
+        this._indexUniqueRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Unique"));
+        this._indexMultiEntryRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Multi-Entry"));
+        this._indexGroup = new WebInspector.DetailsSectionGroup([this._indexNameRow, this._indexKeyPathRow, this._indexUniqueRow, this._indexMultiEntryRow]);
+        this._indexSection = new WebInspector.DetailsSection("indexed-database-index", WebInspector.UIString("Index"), [this._indexGroup]);
+
+        this.contentView.element.appendChild(this._databaseSection.element);
+        this.contentView.element.appendChild(this._objectStoreSection.element);
+        this.contentView.element.appendChild(this._indexSection.element);
+    }
+
+    // Public
+
+    inspect(objects)
+    {
+        // Convert to a single item array if needed.
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        this._database = null;
+        this._objectStore = null;
+        this._index = null;
+
+        for (let object of objects) {
+            if (object instanceof WebInspector.IndexedDatabase) {
+                console.assert(!this._database, "Shouldn't have multiple IndexedDatabase objects in the list.");
+                this._database = object;
+            } else if (object instanceof WebInspector.IndexedDatabaseObjectStore) {
+                console.assert(!this._database, "Shouldn't have multiple IndexedDatabase objects in the list.");
+                this._objectStore = object;
+                this._database = this._objectStore.parentDatabase;
+            } else if (object instanceof WebInspector.IndexedDatabaseObjectStoreIndex) {
+                console.assert(!this._database, "Shouldn't have multiple IndexedDatabase objects in the list.");
+                this._index = object;
+                this._objectStore = this._index.parentObjectStore;
+                this._database = this._objectStore.parentDatabase;
+            }
+        }
+
+        let hasObject = this._database || this._objectStore || this._index;
+        if (hasObject)
+            this.needsLayout();
+
+        return hasObject;
+    }
+
+    // Protected
+
+    layout()
+    {
+        if (!this._database)
+            this._databaseSection.element.hidden = true;
+        else {
+            this._databaseSection.element.hidden = false;
+            this._databaseSecurityOriginRow.value = this._database.securityOrigin;
+            this._databaseNameRow.value = this._database.name;
+            this._databaseVersionRow.value = this._database.version;
+        }
+
+        if (!this._objectStore)
+            this._objectStoreSection.element.hidden = true;
+        else {
+            this._objectStoreSection.element.hidden = false;
+            this._objectStoreNameRow.value = this._objectStore.name;
+            this._objectStoreKeyPathRow.value = this._keyPathString(this._objectStore.keyPath);
+            this._objectStoreAutoIncrementRow.value = this._objectStore.autoIncrement ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+        }
+
+        if (!this._index)
+            this._indexSection.element.hidden = true;
+        else {
+            this._indexSection.element.hidden = false;
+            this._indexNameRow.value = this._index.name;
+            this._indexKeyPathRow.value = this._keyPathString(this._index.keyPath);
+            this._indexUniqueRow.value = this._index.unique ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+
+            if (this._index.keyPath.type !== IndexedDBAgent.KeyPathType.Array)
+                this._indexMultiEntryRow.value = null;
+            else
+                this._indexMultiEntryRow.value = this._index.multiEntry ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+        }
+    }
+
+    // Private
+
+    _keyPathString(keyPath)
+    {
+        return keyPath ? JSON.stringify(keyPath) : emDash;
+    }
+};
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..d4fb60c0d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseHostTreeElement.js
@@ -0,0 +1,49 @@
+/*
+ * 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;
+        this.expanded = 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..6bfc3a1be
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.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.
+ */
+
+.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 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..8cc45f66a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.js
@@ -0,0 +1,174 @@
+/*
+ * 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.variableHeightRows = true;
+        this._dataGrid.scrollContainer.addEventListener("scroll", this._dataGridScrolled.bind(this));
+        this.addSubview(this._dataGrid);
+
+        this._entries = [];
+
+        this._fetchingMoreData = false;
+        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);
+
+        this._clearButtonNavigationItem = new WebInspector.ButtonNavigationItem("indexed-database-object-store-clear", WebInspector.UIString("Clear object store"), "Images/NavigationItemTrash.svg", 15, 15);
+        this._clearButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearButtonClicked, this);
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._refreshButtonNavigationItem, this._clearButtonNavigationItem];
+    }
+
+    closed()
+    {
+        super.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;
+    }
+
+    get scrollableElements()
+    {
+        return [this._dataGrid.scrollContainer];
+    }
+
+    // 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);
+            }
+
+            this._fetchingMoreData = false;
+
+            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();
+    }
+
+    _clearButtonClicked()
+    {
+        WebInspector.storageManager.clearObjectStore(this._objectStore);
+        this._reset();
+    }
+};
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..f50217a55
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
@@ -0,0 +1,113 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-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.
+ */
+
+.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;
+    border-radius: 2px;
+    overflow: hidden;
+    cursor: default;
+}
+
+.inline-swatch:matches(.bezier, .spring) {
+    content: url(../Images/CubicBezier.svg);
+}
+
+.inline-swatch.variable {
+    content: url(../Images/CSSVariable.svg);
+}
+
+.inline-swatch:matches(.bezier, .spring, .variable) {
+    margin-right: 2px;
+    background: none;
+}
+
+.inline-swatch:matches(.bezier, .spring, .variable):hover {
+    filter: brightness(0.9);
+}
+
+.inline-swatch:matches(.bezier, .spring, .variable):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);
+    border-radius: 2px;
+    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:matches(.bezier, .spring) > span {
+    display: none;
+}
+
+.inline-swatch-variable-popover {
+    display: flex;
+    align-items: center;
+    min-height: 24px;
+    padding-top: 0.5px;
+}
+
+.inline-swatch-variable-popover .CodeMirror {
+    height: auto;
+    background-color: transparent;
+}
+
+.inline-swatch-variable-popover .CodeMirror pre {
+    padding: 0 3px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js b/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js
new file mode 100644
index 000000000..85a09d59d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js
@@ -0,0 +1,340 @@
+/*
+ * 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.Color:
+            this._swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
+            break;
+        case WebInspector.InlineSwatch.Type.Gradient:
+            this._swatchElement.title = WebInspector.UIString("Edit custom gradient");
+            break;
+        case WebInspector.InlineSwatch.Type.Bezier:
+            this._swatchElement.title = WebInspector.UIString("Edit “cubic-bezier“ function");
+            break;
+        case WebInspector.InlineSwatch.Type.Spring:
+            this._swatchElement.title = WebInspector.UIString("Edit “spring“ function");
+            break;
+        case WebInspector.InlineSwatch.Type.Variable:
+            this._swatchElement.title = WebInspector.UIString("View variable value");
+            break;
+        default:
+            WebInspector.reportInternalError(`Unknown InlineSwatch type "${type}"`);
+            break;
+        }
+
+        this._boundSwatchElementClicked = null;
+        if (!readOnly) {
+            this._boundSwatchElementClicked = this._swatchElementClicked.bind(this);
+            this._swatchElement.addEventListener("click", this._boundSwatchElementClicked);
+            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._valueEditor = null;
+
+        this._updateSwatch();
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._swatchElement;
+    }
+
+    get value()
+    {
+        return this._value;
+    }
+
+    set value(value)
+    {
+        this._value = value;
+        this._updateSwatch(true);
+    }
+
+    // Popover delegate
+
+    didDismissPopover(popover)
+    {
+        if (!this._valueEditor)
+            return;
+
+        if (typeof this._valueEditor.removeListeners === "function")
+            this._valueEditor.removeListeners();
+
+        if (this._boundSwatchElementClicked)
+            this._swatchElement.addEventListener("click", this._boundSwatchElementClicked);
+
+        this.dispatchEventToListeners(WebInspector.InlineSwatch.Event.Deactivated);
+    }
+
+    // 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.Spring:
+            return WebInspector.Spring.fromString("1 100 10 0");
+        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);
+
+        popover.windowResizeHandler = () => {
+            let bounds = WebInspector.Rect.rectFromClientRect(this._swatchElement.getBoundingClientRect());
+            popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
+        };
+
+        this._valueEditor = null;
+        if (this._type === WebInspector.InlineSwatch.Type.Color) {
+            this._valueEditor = new WebInspector.ColorPicker;
+            this._valueEditor.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._valueEditorValueDidChange, this);
+            this._valueEditor.addEventListener(WebInspector.ColorPicker.Event.FormatChanged, (event) => popover.update());
+        } else if (this._type === WebInspector.InlineSwatch.Type.Gradient) {
+            this._valueEditor = new WebInspector.GradientEditor;
+            this._valueEditor.addEventListener(WebInspector.GradientEditor.Event.GradientChanged, this._valueEditorValueDidChange, this);
+            this._valueEditor.addEventListener(WebInspector.GradientEditor.Event.ColorPickerToggled, (event) => popover.update());
+        } else if (this._type === WebInspector.InlineSwatch.Type.Bezier) {
+            this._valueEditor = new WebInspector.BezierEditor;
+            this._valueEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, this._valueEditorValueDidChange, this);
+        } else if (this._type === WebInspector.InlineSwatch.Type.Spring) {
+            this._valueEditor = new WebInspector.SpringEditor;
+            this._valueEditor.addEventListener(WebInspector.SpringEditor.Event.SpringChanged, this._valueEditorValueDidChange, this);
+        } else if (this._type === WebInspector.InlineSwatch.Type.Variable) {
+            this._valueEditor = {};
+
+            this._valueEditor.element = document.createElement("div");
+            this._valueEditor.element.classList.add("inline-swatch-variable-popover");
+
+            this._valueEditor.codeMirror = WebInspector.CodeMirrorEditor.create(this._valueEditor.element, {
+                mode: "css",
+                readOnly: "nocursor",
+            });
+            this._valueEditor.codeMirror.on("update", () => {
+                popover.update();
+            });
+        }
+
+        if (!this._valueEditor)
+            return;
+
+        popover.content = this._valueEditor.element;
+        popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
+
+        if (this._boundSwatchElementClicked)
+            this._swatchElement.removeEventListener("click", this._boundSwatchElementClicked);
+
+        this.dispatchEventToListeners(WebInspector.InlineSwatch.Event.Activated);
+
+        let value = this._value || this._fallbackValue();
+        if (this._type === WebInspector.InlineSwatch.Type.Color)
+            this._valueEditor.color = value;
+        else if (this._type === WebInspector.InlineSwatch.Type.Gradient)
+            this._valueEditor.gradient = value;
+        else if (this._type === WebInspector.InlineSwatch.Type.Bezier)
+            this._valueEditor.bezier = value;
+        else if (this._type === WebInspector.InlineSwatch.Type.Spring)
+            this._valueEditor.spring = value;
+        else if (this._type === WebInspector.InlineSwatch.Type.Variable)
+            this._valueEditor.codeMirror.setValue(value);
+    }
+
+    _valueEditorValueDidChange(event)
+    {
+        if (this._type === WebInspector.InlineSwatch.Type.Color)
+            this._value = event.data.color;
+        else if (this._type === WebInspector.InlineSwatch.Type.Gradient)
+            this._value = event.data.gradient;
+        else if (this._type === WebInspector.InlineSwatch.Type.Bezier)
+            this._value = event.data.bezier;
+        else if (this._type === WebInspector.InlineSwatch.Type.Spring)
+            this._value = event.data.spring;
+
+        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")
+            }
+        ];
+
+        let currentColorIsHEX = hexFormats.some((info) => info.format === this._value.format);
+
+        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",
+    Spring: "inline-swatch-type-spring",
+    Variable: "inline-swatch-type-variable",
+};
+
+WebInspector.InlineSwatch.Event = {
+    BeforeClicked: "inline-swatch-before-clicked",
+    ValueChanged: "inline-swatch-value-changed",
+    Activated: "inline-swatch-activated",
+    Deactivated: "inline-swatch-deactivated",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css
new file mode 100644
index 000000000..ead09058d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.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.
+ */
+
+.issue .icon {
+    content: "";
+}
+
+.issue.warning .icon {
+    background-image: url(../Images/IssuesEnabled.svg);
+}
+
+.issue.error .icon {
+    background-image: url(../Images/ErrorsEnabled.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js
new file mode 100644
index 000000000..666c085f1
--- /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.sourceCodeLocation.displayLineNumber;
+        var displayColumnNumber = this._issueMessage.sourceCodeLocation.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..dd7c898db
--- /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)
+    {
+        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 ? domNode.displayName : 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..fb019b057
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js
@@ -0,0 +1,431 @@
+/*
+ * 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);
+
+        this._buildLayerInfoSection();
+        this._buildDataGridSection();
+        this._buildBottomBar();
+    }
+
+    // DetailsSidebarPanel Overrides.
+
+    shown()
+    {
+        WebInspector.layerTreeManager.addEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
+
+        console.assert(this.parentSidebar);
+
+        super.shown();
+    }
+
+    hidden()
+    {
+        WebInspector.layerTreeManager.removeEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
+
+        super.hidden();
+    }
+
+    // DOMDetailsSidebarPanel Overrides
+
+    supportsDOMNode(nodeToInspect)
+    {
+        return WebInspector.layerTreeManager.supported && nodeToInspect.nodeType() === Node.ELEMENT_NODE;
+    }
+
+    // Protected
+
+    layout()
+    {
+        if (!this.domNode)
+            return;
+
+        WebInspector.layerTreeManager.layersForNode(this.domNode, (layerForNode, childLayers) => {
+            this._unfilteredChildLayers = childLayers;
+            this._updateDisplayWithLayers(layerForNode, childLayers);
+        });
+    }
+
+    // Private
+
+    _layerTreeDidChange(event)
+    {
+        this.needsLayout();
+    }
+
+    _showShadowDOMSettingChanged(event)
+    {
+        if (this.selected)
+            this._updateDisplayWithLayers(this._layerForNode, this._unfilteredChildLayers);
+    }
+
+    _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.inline = true;
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedDataGridNodeChanged, this);
+
+        this._dataGrid.sortColumnIdentifier = "memory";
+        this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Descending;
+        this._dataGrid.createSettings("layer-tree-details-sidebar-panel");
+
+        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);
+
+        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, (content) => {
+            if (dataGridNode === this._dataGrid.selectedNode)
+                this._updatePopoverForSelectedNode(content);
+        });
+    }
+
+    _updatePopoverForSelectedNode(content)
+    {
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return;
+
+        var popover = this._popover;
+        if (!popover) {
+            popover = this._popover = new WebInspector.Popover;
+            popover.windowResizeHandler = () => { this._updatePopoverForSelectedNode(); };
+        }
+
+        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, (compositingReasons) => {
+            if (isEmptyObject(compositingReasons)) {
+                callback(content);
+                return;
+            }
+
+            this._populateListOfCompositingReasons(list, compositingReasons);
+
+            callback(content);
+        });
+
+        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 may overlap another compositing element"));
+        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..ab0266e08
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGridNode.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.LayoutTimelineDataGridNode = class LayoutTimelineDataGridNode extends WebInspector.TimelineDataGridNode
+{
+    constructor(layoutTimelineRecord, baseStartTime)
+    {
+        super(false, null);
+
+        this._record = layoutTimelineRecord;
+        this._baseStartTime = baseStartTime || 0;
+    }
+
+    // Public
+
+    get records()
+    {
+        return [this._record];
+    }
+
+    get data()
+    {
+        if (!this._cachedData) {
+            this._cachedData = {
+                type: this._record.eventType,
+                name: this.displayName(),
+                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 "name":
+            cell.classList.add(...this.iconClassNames());
+            return value;
+
+        case "width":
+        case "height":
+            return isNaN(value) ? emDash : WebInspector.UIString("%dpx").format(value);
+
+        case "area":
+            return isNaN(value) ? emDash : WebInspector.UIString("%dpx²").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..00edba982
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js
@@ -0,0 +1,115 @@
+/*
+ * 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._timelineLayoutRecordRow = createRecordRow.call(this);
+        this._timelinePaintRecordRow = createRecordRow.call(this);
+    }
+
+    // Protected
+
+    layout()
+    {
+        if (!this.visible)
+            return;
+
+        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..24cd72bcc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.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.layout > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.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..cbeed2a19
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js
@@ -0,0 +1,322 @@
+/*
+ * 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);
+
+        let columns = {type: {}, name: {}, location: {}, area: {}, width: {}, height: {}, startTime: {}, totalTime: {}};
+
+        columns.name.title = WebInspector.UIString("Type");
+        columns.name.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.type.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("layout", typeToLabelMap);
+        columns.type.hidden = true;
+        columns.type.locked = true;
+
+        columns.name.disclosure = true;
+        columns.name.icon = true;
+        columns.name.locked = true;
+
+        this._scopeBar = columns.type.scopeBar;
+
+        columns.location.title = WebInspector.UIString("Initiator");
+        columns.location.width = "25%";
+
+        columns.area.title = WebInspector.UIString("Area");
+        columns.area.width = "8%";
+
+        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(columns);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridSelectedNodeChanged, this);
+
+        this.setupDataGrid(this._dataGrid);
+
+        this._dataGrid.sortColumnIdentifier = "startTime";
+        this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+        this._dataGrid.createSettings("layout-timeline-view");
+
+        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.element.classList.add("layout");
+        this.addSubview(this._dataGrid);
+
+        timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._layoutTimelineRecordAdded, this);
+
+        this._pendingRecords = [];
+    }
+
+    // Public
+
+    get selectionPathComponents()
+    {
+        let dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode || dataGridNode.hidden)
+            return null;
+
+        let pathComponents = [];
+
+        while (dataGridNode && !dataGridNode.root) {
+            console.assert(dataGridNode instanceof WebInspector.TimelineDataGridNode);
+            if (dataGridNode.hidden)
+                return null;
+
+            let pathComponent = new WebInspector.TimelineDataGridNodePathComponent(dataGridNode);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.dataGridNodePathComponentSelected, this);
+            pathComponents.unshift(pathComponent);
+            dataGridNode = dataGridNode.parent;
+        }
+
+        return pathComponents;
+    }
+
+    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();
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._hideHighlightIfNeeded();
+
+        this._dataGrid.reset();
+
+        this._pendingRecords = [];
+    }
+
+    // Protected
+
+    dataGridNodePathComponentSelected(event)
+    {
+        let dataGridNode = event.data.pathComponent.timelineDataGridNode;
+        console.assert(dataGridNode.dataGrid === this._dataGrid);
+
+        dataGridNode.revealAndSelect();
+    }
+
+    filterDidChange()
+    {
+        super.filterDidChange();
+
+        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) {
+            let dataGridNode = new WebInspector.LayoutTimelineDataGridNode(layoutTimelineRecord, this.zeroTime);
+
+            this._dataGrid.addRowInSortOrder(null, dataGridNode);
+
+            let stack = [{children: layoutTimelineRecord.children, parentDataGridNode: dataGridNode, index: 0}];
+            while (stack.length) {
+                let entry = stack.lastValue;
+                if (entry.index >= entry.children.length) {
+                    stack.pop();
+                    continue;
+                }
+
+                let childRecord = entry.children[entry.index];
+                console.assert(childRecord.type === WebInspector.TimelineRecord.Type.Layout, childRecord);
+
+                let childDataGridNode = new WebInspector.LayoutTimelineDataGridNode(childRecord, this.zeroTime);
+                console.assert(entry.parentDataGridNode, "entry without parent!");
+                this._dataGrid.addRowInSortOrder(null, childDataGridNode, entry.parentDataGridNode);
+
+                if (childDataGridNode && childRecord.children.length)
+                    stack.push({children: childRecord.children, parentDataGridNode: childDataGridNode, 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();
+    }
+
+    _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._dataGrid.selectedNode && this._dataGrid.selectedNode.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();
+    }
+
+    _dataGridSelectedNodeChanged(event)
+    {
+        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..8399c509b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LogContentView.css
@@ -0,0 +1,230 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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 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-header {
+    text-align: center;
+    padding: 6px 0;
+}
+
+.console-session:first-of-type .console-session-header {
+    color: hsl(0, 0%, 60%);
+}
+
+.console-session:not(:first-of-type) {
+    border-top: 0.5px dashed var(--border-color);
+}
+
+.console-session:not(:first-of-type) .console-session-header {
+    color: hsl(0, 0%, 30%);
+    background-color: hsl(0, 0%, 95%);
+}
+
+.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);
+}
+
+.search-in-progress .console-item:not(.filtered-out-by-search).special-user-log .console-message-text .highlighted {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color-highlight);
+
+    border-bottom: none;
+    text-decoration: underline;
+}
+
+.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..10b85c610
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LogContentView.js
@@ -0,0 +1,1032 @@
+/*
+ * 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;
+
+        const fixed = true;
+        this._findBanner = new WebInspector.FindBanner(this, "console-find-banner", fixed);
+        this._findBanner.inputField.placeholder = WebInspector.UIString("Filter Console Log");
+        this._findBanner.targetElement = this.element;
+
+        this._currentSearchQuery = "";
+        this._searchMatches = [];
+        this._selectedSearchMatch = null;
+        this._selectedSearchMatchIsValid = false;
+
+        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._garbageCollectNavigationItem = new WebInspector.ButtonNavigationItem("clear-log", WebInspector.UIString("Collect garbage"), "Images/NavigationItemGarbageCollect.svg", 16, 16);
+        this._garbageCollectNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._garbageCollect, this);
+
+        let clearImageDimensions = WebInspector.Platform.name === "mac" ? 16 : 15;
+        this._clearLogNavigationItem = new WebInspector.ButtonNavigationItem("clear-log", WebInspector.UIString("Clear log (%s or %s)").format(WebInspector.clearKeyboardShortcut.displayName, this._logViewController.messagesAlternateClearKeyboardShortcut.displayName), "Images/NavigationItemClear.svg", clearImageDimensions, clearImageDimensions);
+        this._clearLogNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearLog, this);
+
+        this._showConsoleTabNavigationItem = new WebInspector.ButtonNavigationItem("show-tab", WebInspector.UIString("Show console tab"), "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];
+        if (HeapAgent.gc)
+            navigationItems.push(this._garbageCollectNavigationItem);
+        navigationItems.push(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;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._logViewController.renderPendingMessages();
+    }
+
+    didAppendConsoleMessageView(messageView)
+    {
+        console.assert(messageView instanceof WebInspector.ConsoleMessageView || messageView instanceof WebInspector.ConsoleCommandView);
+
+        // Nest the message.
+        var type = messageView instanceof WebInspector.ConsoleCommandView ? null : messageView.message.type;
+        if (this._nestingLevel && 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.
+        let target = messageView.message ? messageView.message.target : WebInspector.runtimeManager.activeExecutionContext.target;
+        target.connection.runAfterPendingDispatches(this._clearFocusableChildren.bind(this));
+
+        if (type && type !== WebInspector.ConsoleMessage.MessageType.EndGroup) {
+            console.assert(messageView.message instanceof WebInspector.ConsoleMessage);
+            if (!(messageView.message instanceof WebInspector.ConsoleCommandResultMessage))
+                this._markScopeBarItemUnread(messageView.message.level);
+
+            console.assert(messageView.element instanceof Element);
+            this._filterMessageElements([messageView.element]);
+        }
+    }
+
+    get supportsSearch() { return true; }
+    get numberOfSearchResults() { return this.hasPerformedSearch ? this._searchMatches.length : null; }
+    get hasPerformedSearch() { return this._currentSearchQuery !== ""; }
+
+    get supportsCustomFindBanner()
+    {
+        return WebInspector.isShowingConsoleTab();
+    }
+
+    showCustomFindBanner()
+    {
+        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();
+    }
+
+    handleClearShortcut(event)
+    {
+        this._logViewController.requestClearMessages();
+    }
+
+    findBannerRevealPreviousResult()
+    {
+        if (!this.hasPerformedSearch || isEmptyObject(this._searchMatches))
+            return;
+
+        var index = this._selectedSearchMatch ? this._searchMatches.indexOf(this._selectedSearchMatch) : this._searchMatches.length;
+        this._highlightSearchMatchAtIndex(index - 1);
+    }
+
+    findBannerRevealNextResult()
+    {
+        if (!this.hasPerformedSearch || 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.settings.clearLogOnNavigate.value) {
+            this._reappendProvisionalMessages();
+            return;
+        }
+
+        const isFirstSession = false;
+        const newSessionReason = event.data.wasReloaded ? WebInspector.ConsoleSession.NewSessionReason.PageReloaded : WebInspector.ConsoleSession.NewSessionReason.PageNavigated;
+        this._logViewController.startNewSession(isFirstSession, {newSessionReason, timestamp: event.data.timestamp});
+
+        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;
+    }
+
+    _markScopeBarItemUnread(level)
+    {
+        let messageLevel = this._scopeFromMessageLevel(level);
+        if (!messageLevel)
+            return;
+
+        let 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._logViewController.appendConsoleMessage(event.data.message);
+    }
+
+    _previousMessageRepeatCountUpdated(event)
+    {
+        if (this._logViewController.updatePreviousMessageRepeatCount(event.data.count) && this._lastMessageView)
+            this._markScopeBarItemUnread(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;
+        }
+
+        // In the case that there are selected messages, only clear that selection if the right-click
+        // is not on the element or descendants of the selected messages.
+        if (this._selectedMessages.length && !this._selectedMessages.some(element => event.target.isSelfOrDescendant(element))) {
+            this._clearMessagesSelection();
+            this._mousedown(event);
+        }
+
+        // If there are no selected messages, right-clicking will not reset the current mouse state
+        // meaning that when the context menu is dismissed, console messages will be selected when
+        // the user moves the mouse even though no buttons are pressed.
+        if (!this._selectedMessages.length)
+            this._mouseup(event);
+
+        // 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);
+
+        if (this._selectedMessages.length) {
+            contextMenu.appendItem(WebInspector.UIString("Copy Selected"), () => {
+                InspectorFrontendHost.copyText(this._formatMessagesAsData(true));
+            });
+            contextMenu.appendSeparator();
+        }
+
+        contextMenu.appendItem(WebInspector.UIString("Clear Log"), this._clearLog.bind(this));
+        contextMenu.appendSeparator();
+    }
+
+    _mousedown(event)
+    {
+        if (this._selectedMessages.length && (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(() => { this.prompt.focus(); }, 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.hasPerformedSearch && 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.hasPerformedSearch)
+            return unfilteredMessages;
+
+        return unfilteredMessages.filter(function(message) {
+            return !message.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
+        });
+    }
+
+    _logCleared(event)
+    {
+        for (let item of this._scopeBar.items)
+            item.element.classList.remove("unread");
+
+        this._logViewController.clear();
+        this._nestingLevel = 0;
+
+        if (this._currentSearchQuery)
+            this.performSearch(this._currentSearchQuery);
+    }
+
+    _showConsoleTab()
+    {
+        WebInspector.showConsoleTab();
+    }
+
+    _clearLog()
+    {
+        WebInspector.logManager.requestClearMessages();
+    }
+
+    _garbageCollect()
+    {
+        // COMPATIBILITY (iOS 10.3): Worker targets did not support HeapAgent.
+        for (let target of WebInspector.targets) {
+            if (target.HeapAgent)
+                target.HeapAgent.gc();
+        }
+    }
+
+    _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._currentSearchQuery);
+    }
+
+    _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];
+        }
+        return null;
+    }
+
+    _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];
+        }
+        return null;
+    }
+
+    _clearFocusableChildren()
+    {
+        var focusableElements = this.messagesElement.querySelectorAll("[tabindex]");
+        for (var i = 0, count = focusableElements.length; i < count; ++i)
+            focusableElements[i].removeAttribute("tabindex");
+    }
+
+    findBannerPerformSearch(findBanner, searchQuery)
+    {
+        this.performSearch(searchQuery);
+    }
+
+    findBannerSearchCleared()
+    {
+        this.searchCleared();
+    }
+
+    revealNextSearchResult()
+    {
+        this.findBannerRevealNextResult();
+    }
+
+    revealPreviousSearchResult()
+    {
+        this.findBannerRevealPreviousResult();
+    }
+
+    performSearch(searchQuery)
+    {
+        if (!isEmptyObject(this._searchHighlightDOMChanges))
+            WebInspector.revertDomChanges(this._searchHighlightDOMChanges);
+
+        this._currentSearchQuery = searchQuery;
+        this._searchHighlightDOMChanges = [];
+        this._searchMatches = [];
+        this._selectedSearchMatchIsValid = false;
+        this._selectedSearchMatch = null;
+
+        if (this._currentSearchQuery === "") {
+            this.element.classList.remove(WebInspector.LogContentView.SearchInProgressStyleClassName);
+            this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+            return;
+        }
+
+        this.element.classList.add(WebInspector.LogContentView.SearchInProgressStyleClassName);
+
+        let searchRegex = new RegExp(this._currentSearchQuery.escapeForRegExp(), "gi");
+        this._unfilteredMessageElements().forEach(function(message) {
+            let matchRanges = [];
+            let text = message.textContent;
+            let 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);
+
+            let 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);
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+
+        if (!this._selectedSearchMatchIsValid && this._selectedSearchMatch) {
+            this._selectedSearchMatch.highlight.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+            this._selectedSearchMatch = null;
+        }
+    }
+
+    searchCleared()
+    {
+        this.performSearch("");
+    }
+
+    _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._selectedSearchMatchIsValid && this._selectedSearchMatch.message === message) {
+                this._selectedSearchMatchIsValid = this._rangesOverlap(this._selectedSearchMatch.range, range);
+                if (this._selectedSearchMatchIsValid) {
+                    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 (let provisionalMessage of this._provisionalMessages)
+            this._logViewController.appendConsoleMessage(provisionalMessage);
+
+        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";
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..84aaa58b4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Main.css
@@ -0,0 +1,397 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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 {
+    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;
+
+    background-color: white;
+}
+
+body.docked.bottom {
+    border-top: 1px solid var(--border-color);
+}
+
+body.docked.right {
+    border-left: 1px solid var(--border-color);
+}
+
+body.docked.left {
+    border-right: 1px solid var(--border-color);
+}
+
+#docked-resizer {
+    display: none;
+
+    z-index: var(--z-index-resizer);
+}
+
+body.docked #docked-resizer {
+    display: block;
+
+    position: absolute;
+    top: 0;
+}
+
+body.docked.bottom #docked-resizer {
+    left: 0;
+    right: 0;
+    height: 3px;
+
+    cursor: row-resize;
+}
+
+body.docked.right #docked-resizer {
+    left: 0;
+    bottom: 0;
+    width: 3px;
+
+    cursor: col-resize;
+}
+
+body.docked.left #docked-resizer {
+    right: 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-thumb {
+    margin-top: -7px;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    height: 1px;
+    margin-top: 1px;
+    background-color: var(--selected-background-color);
+}
+
+#main {
+    position: absolute;
+    top: calc(var(--toolbar-height) + var(--tab-bar-height));
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    display: flex;
+
+    background-color: white;
+
+    /* The position and z-index are needed to make negative z-index work in the DOM tree. */
+    z-index: 0;
+}
+
+#navigation-sidebar {
+    width: 300px;
+    height: 100%;
+}
+
+body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer {
+    pointer-events: none;
+}
+
+#content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    height: 100%; /* This reduces paint areas when typing in the console. http://webkit.org/b/145324 */
+}
+
+#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 :matches(.find-banner, .find-banner + .divider) {
+    display: none;
+}
+
+#split-content-browser > .navigation-bar .item {
+    height: 100%;
+}
+
+#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;
+    height: 100%;
+}
+
+.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..03565507f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js
@@ -0,0 +1,124 @@
+/*
+ * 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._cachedMinSize = undefined;
+        this._cachedMaxSize = undefined;
+
+        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)
+    {
+        if (this._cachedMinSize === minSize && this._cachedMaxSize === maxSize)
+            return;
+
+        this._cachedMinSize = minSize;
+        this._cachedMaxSize = 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..c9b6b9cd9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
@@ -0,0 +1,76 @@
+/*
+ * 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.memory .memory-pressure-event {
+    border-left: 1px solid black;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+}
+
+.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..1691d9815
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.js
@@ -0,0 +1,262 @@
+/*
+ * 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");
+
+        console.assert(timeline instanceof WebInspector.MemoryTimeline);
+
+        this._memoryTimeline = timeline;
+        this._memoryTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._memoryTimelineRecordAdded, this);
+        this._memoryTimeline.addEventListener(WebInspector.MemoryTimeline.Event.MemoryPressureEventAdded, this._memoryTimelineMemoryPressureEventAdded, 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._memoryPressureMarkersContainerElement = this.element.appendChild(document.createElement("div"));
+        this._memoryPressureMarkersContainerElement.classList.add("memory-pressure-markers-container");
+        this._memoryPressureMarkerElements = [];
+
+        this.reset();
+    }
+
+    // Protected
+
+    get height()
+    {
+        return 108;
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._maxSize = 0;
+        this._cachedMaxSize = undefined;
+
+        this._updateLegend();
+        this._chart.clear();
+        this._chart.needsLayout();
+
+        this._memoryPressureMarkersContainerElement.removeChildren();
+        this._memoryPressureMarkerElements = [];
+    }
+
+    layout()
+    {
+        if (!this.visible)
+            return;
+
+        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 visibleEndTime = Math.min(this.endTime, this.currentTime);
+
+        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);
+        }
+
+        let visibleMemoryPressureEventMarkers = this._visibleMemoryPressureEvents(graphStartTime, visibleEndTime);
+
+        // Reuse existing marker elements.
+        for (let i = 0; i < visibleMemoryPressureEventMarkers.length; ++i) {
+            let markerElement = this._memoryPressureMarkerElements[i];
+            if (!markerElement) {
+                markerElement = this._memoryPressureMarkersContainerElement.appendChild(document.createElement("div"));
+                markerElement.classList.add("memory-pressure-event");
+                this._memoryPressureMarkerElements[i] = markerElement;
+            }
+
+            let memoryPressureEvent = visibleMemoryPressureEventMarkers[i];
+            markerElement.style.left = xScale(memoryPressureEvent.timestamp) + "px";
+        }
+
+        // Remove excess marker elements.
+        let excess = this._memoryPressureMarkerElements.length - visibleMemoryPressureEventMarkers.length;
+        if (excess) {
+            let elementsToRemove = this._memoryPressureMarkerElements.splice(visibleMemoryPressureEventMarkers.length);
+            for (let element of elementsToRemove)
+                element.remove();
+        }
+
+        let discontinuities = this.timelineOverview.discontinuitiesInTimeRange(graphStartTime, visibleEndTime);
+
+        // Don't include the record before the graph start if the graph start is within a gap.
+        let includeRecordBeforeStart = !discontinuities.length || discontinuities[0].startTime > graphStartTime;
+
+        // FIXME: <https://webkit.org/b/153759> Web Inspector: Memory Timelines should better extend to future data
+        let visibleRecords = this._memoryTimeline.recordsInTimeRange(graphStartTime, visibleEndTime, includeRecordBeforeStart);
+        if (!visibleRecords.length)
+            return;
+
+        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] && (!discontinuities.length || discontinuities[0].startTime > visibleRecords[0].startTime))
+            this._chart.addPointSet(0, pointSetForRecord(visibleRecords[0]));
+
+        function insertDiscontinuity(previousRecord, discontinuity, nextRecord)
+        {
+            console.assert(previousRecord || nextRecord);
+            if (!(previousRecord || nextRecord))
+                return;
+
+            let xStart = xScale(discontinuity.startTime);
+            let xEnd = xScale(discontinuity.endTime);
+
+            // Extend the previous record to the start of the discontinuity.
+            if (previousRecord)
+                this._chart.addPointSet(xStart, pointSetForRecord(previousRecord));
+
+            let zeroValues = Array((previousRecord || nextRecord).categories.length).fill(yScale(0));
+            this._chart.addPointSet(xStart, zeroValues);
+
+            if (nextRecord) {
+                this._chart.addPointSet(xEnd, zeroValues);
+                this._chart.addPointSet(xEnd, pointSetForRecord(nextRecord));
+            } else {
+                // Extend the discontinuity to the visible end time to prevent
+                // drawing artifacts when the next record arrives.
+                this._chart.addPointSet(xScale(visibleEndTime), zeroValues);
+            }
+        }
+
+        // Points for visible records.
+        let previousRecord = null;
+        for (let record of visibleRecords) {
+            if (discontinuities.length && discontinuities[0].endTime < record.startTime) {
+                let discontinuity = discontinuities.shift();
+                insertDiscontinuity.call(this, previousRecord, discontinuity, record);
+            }
+
+            let x = xScale(record.startTime);
+            this._chart.addPointSet(x, pointSetForRecord(record));
+
+            previousRecord = record;
+        }
+
+        if (discontinuities.length)
+            insertDiscontinuity.call(this, previousRecord, discontinuities[0], null);
+        else {
+            // Extend the last value to current / end time.
+            let lastRecord = visibleRecords.lastValue;
+            if (lastRecord.startTime <= visibleEndTime) {
+                let x = Math.floor(xScale(visibleEndTime));
+                this._chart.addPointSet(x, pointSetForRecord(lastRecord));
+            }
+        }
+
+        this._chart.updateLayout();
+    }
+
+    // Private
+
+    _updateLegend()
+    {
+        if (this._cachedMaxSize === this._maxSize)
+            return;
+
+        this._cachedMaxSize = this._maxSize;
+
+        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));
+        }
+    }
+
+    _visibleMemoryPressureEvents(startTime, endTime)
+    {
+        let events = this._memoryTimeline.memoryPressureEvents;
+        if (!events.length)
+            return [];
+
+        let lowerIndex = events.lowerBound(startTime, (time, event) => time - event.timestamp);
+        let upperIndex = events.upperBound(endTime, (time, event) => time - event.timestamp);
+        return events.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();
+    }
+
+    _memoryTimelineMemoryPressureEventAdded(event)
+    {
+        this.needsLayout();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
new file mode 100644
index 000000000..d41d30eef
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
@@ -0,0 +1,182 @@
+/*
+ * 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;
+}
+
+.timeline-view.memory > .content {
+    width: 970px;
+    margin: 10px auto;
+}
+
+.timeline-view.memory > .content > .overview {
+    padding-bottom: 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: 5px;
+}
+
+.timeline-view.memory > .content > .details > .subtitle {
+    padding: 0 10px 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 {
+    padding-left: 20px;
+    text-align: left;
+}
+
+.timeline-view.memory .legend > .row {
+    position: relative;
+    width: 100px;
+    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..67bbc8739
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js
@@ -0,0 +1,408 @@
+/*
+ * 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);
+
+        this._recording = extraArguments.recording;
+
+        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
+
+    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._cachedLegendRecord = null;
+        this._cachedLegendMaxSize = undefined;
+        this._cachedLegendCurrentSize = undefined;
+
+        this._usageCircleChart.clear();
+        this._usageCircleChart.needsLayout();
+        this._clearUsageLegend();
+
+        this._maxComparisonCircleChart.clear();
+        this._maxComparisonCircleChart.needsLayout();
+        this._clearMaxComparisonLegend();
+
+        for (let categoryView of this._categoryViews)
+            categoryView.clear();
+    }
+
+    get scrollableElements()
+    {
+        return [this.element];
+    }
+
+    // Protected
+
+    get showsFilterBar() { return false; }
+
+    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 visibleEndTime = Math.min(this.endTime, this.currentTime);
+
+        let discontinuities = this._recording.discontinuitiesInTimeRange(graphStartTime, visibleEndTime);
+
+        // Don't include the record before the graph start if the graph start is within a gap.
+        let includeRecordBeforeStart = !discontinuities.length || discontinuities[0].startTime > graphStartTime;
+
+        // FIXME: <https://webkit.org/b/153759> Web Inspector: Memory Timelines should better extend to future data
+        let visibleRecords = this.representedObject.recordsInTimeRange(graphStartTime, visibleEndTime, includeRecordBeforeStart);
+        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;
+            let discontinuity = null;
+            if (discontinuities.length && discontinuities[0].endTime < time)
+                discontinuity = discontinuities.shift();
+
+            for (let category of record.categories) {
+                let categoryData = categoryDataMap[category.type];
+
+                if (discontinuity) {
+                    if (categoryData.dataPoints.length) {
+                        let previousDataPoint = categoryData.dataPoints.lastValue;
+                        categoryData.dataPoints.push({time: discontinuity.startTime, size: previousDataPoint.size});
+                    }
+
+                    categoryData.dataPoints.push({time: discontinuity.startTime, size: 0});
+                    categoryData.dataPoints.push({time: discontinuity.endTime, size: 0});
+                    categoryData.dataPoints.push({time: discontinuity.endTime, size: category.size});
+                }
+
+                categoryData.dataPoints.push({time, size: category.size});
+                categoryData.max = Math.max(categoryData.max, category.size);
+                categoryData.min = Math.min(categoryData.min, category.size);
+            }
+        }
+
+        // If the graph end time is inside a gap, the last data point should
+        // only be extended to the start of the discontinuity.
+        if (discontinuities.length)
+            visibleEndTime = discontinuities[0].startTime;
+
+        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)
+    {
+        if (this._cachedLegendRecord === record)
+            return;
+
+        this._cachedLegendRecord = 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)
+    {
+        if (this._cachedLegendMaxSize === this._maxSize && this._cachedLegendCurrentSize === currentSize)
+            return;
+
+        this._cachedLegendMaxSize = this._maxSize;
+        this._cachedLegendCurrentSize = 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)) + "%";
+    }
+
+    _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..f5d9c45ff
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationBar.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.
+ */
+
+.navigation-bar {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    border-bottom: 1px solid var(--border-color);
+
+    height: var(--navigation-bar-height);
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    outline: none;
+}
+
+.navigation-bar .item {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    height: auto;
+    outline: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js b/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js
new file mode 100644
index 000000000..382c36754
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js
@@ -0,0 +1,398 @@
+/*
+ * 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._forceLayout = 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;
+    }
+
+    needsLayout()
+    {
+        this._forceLayout = true;
+
+        super.needsLayout();
+    }
+
+    layout()
+    {
+        if (this.layoutReason !== WebInspector.View.LayoutReason.Resize && !this._forceLayout)
+            return;
+
+        this._forceLayout = false;
+
+        // 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..45da289a2
--- /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: var(--navigation-bar-height);
+}
+
+.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: calc(var(--navigation-bar-height) - 1px);
+    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..b1ddb6a20
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
@@ -0,0 +1,754 @@
+/*
+ * 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.contentView.element.addEventListener("scroll", this.soon._updateContentOverflowShadowVisibility);
+
+        this._contentTreeOutlineGroup = new WebInspector.TreeOutlineGroup;
+        this._contentTreeOutline = this.createContentTreeOutline();
+
+        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.soon._updateContentOverflowShadowVisibility;
+        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;
+    }
+
+    get contentTreeOutlines()
+    {
+        return this._contentTreeOutlineGroup.items;
+    }
+
+    get hasSelectedElement()
+    {
+        return !!this._contentTreeOutlineGroup.selectedTreeElement
+    }
+
+    get filterBar()
+    {
+        return this._filterBar;
+    }
+
+    get restoringState()
+    {
+        return this._restoringState;
+    }
+
+    cancelRestoringState()
+    {
+        if (!this._finalAttemptToRestoreViewStateTimeout)
+            return;
+
+        clearTimeout(this._finalAttemptToRestoreViewStateTimeout);
+        this._finalAttemptToRestoreViewStateTimeout = undefined;
+    }
+
+    createContentTreeOutline(suppressFiltering)
+    {
+        let contentTreeOutline = new WebInspector.TreeOutline;
+        contentTreeOutline.allowsRepeatSelection = true;
+        contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName);
+
+        this._contentTreeOutlineGroup.add(contentTreeOutline);
+
+        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[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol] = suppressFiltering;
+
+        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.contentTreeOutlines) {
+            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 false;
+
+        // FIXME: <https://webkit.org/b/153634> Web Inspector: some background tabs think they are the foreground tab and do unnecessary work
+        // Do not steal a content view if we are not the active tab/sidebar.
+        if (!this.selected) {
+            let contentView = this.contentBrowser.contentViewForRepresentedObject(treeElement.representedObject);
+            if (contentView && contentView.parentContainer && contentView.parentContainer !== this.contentBrowser.contentViewContainer)
+                return false;
+
+            // contentView.parentContainer may be null. Check for selected tab, too.
+            let selectedTabContentView = WebInspector.tabBrowser.selectedTabContentView;
+            if (selectedTabContentView && selectedTabContentView.contentBrowser !== this.contentBrowser)
+                return false;
+        }
+
+        let contentView = this.contentBrowser.showContentViewForRepresentedObject(treeElement.representedObject);
+        if (!contentView)
+            return false;
+
+        treeElement.revealAndSelect(true, false, true, true);
+        return true;
+    }
+
+    saveStateToCookie(cookie)
+    {
+        console.assert(cookie);
+
+        // This does not save folder selections, which lack a represented object and content view.
+        var selectedTreeElement = null;
+        this.contentTreeOutlines.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;
+    }
+
+    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 (let contentTreeOutline of this.contentTreeOutlines) {
+            // 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);
+            }
+        }
+    }
+
+    treeElementAddedOrChanged(treeElement)
+    {
+        // Implemented by subclasses if needed.
+    }
+
+    // Private
+
+    _updateContentOverflowShadowVisibility()
+    {
+        if (!this.visible)
+            return;
+
+        this._updateContentOverflowShadowVisibility.cancelDebounce();
+
+        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.contentTreeOutlines) {
+            if (treeOutline[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol])
+                continue;
+
+            checkTreeOutlineForEmptyFilterResults.call(this, treeOutline);
+        }
+    }
+
+    _filterDidChange()
+    {
+        this._updateFilter();
+    }
+
+    _updateFilter()
+    {
+        let selectedTreeElement;
+        for (let treeOutline of this.contentTreeOutlines) {
+            if (treeOutline.hidden || treeOutline[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol])
+                continue;
+
+            selectedTreeElement = treeOutline.selectedTreeElement;
+            if (selectedTreeElement)
+                break;
+        }
+
+        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.contentTreeOutlines) {
+            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();
+    }
+
+    _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();
+
+        if (this.visible)
+            this.soon._updateContentOverflowShadowVisibility();
+
+        if (this.selected)
+            this._checkElementsForPendingViewStateCookie([treeElement]);
+
+        this.treeElementAddedOrChanged(treeElement);
+    }
+
+    _treeElementDisclosureDidChange(event)
+    {
+        this.soon._updateContentOverflowShadowVisibility();
+    }
+
+    _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
+            || treeElement instanceof WebInspector.ApplicationCacheManifestTreeElement
+            || treeElement instanceof WebInspector.ThreadTreeElement
+            || treeElement instanceof WebInspector.IdleTreeElement
+            || typeof treeElement.representedObject === "string"
+            || treeElement.representedObject instanceof String;
+    }
+
+    _checkOutlinesForPendingViewStateCookie(matchTypeOnly)
+    {
+        if (!this._pendingViewStateCookie)
+            return;
+
+        this._checkForStaleResourcesIfNeeded();
+
+        var visibleTreeElements = [];
+        this.contentTreeOutlines.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((key) => candidateObjectCookie[key] === cookie[key]);
+        }
+
+        var matchedElement = null;
+        treeElements.some((element) => {
+            if (treeElementMatchesCookie.call(this, element)) {
+                matchedElement = element;
+                return true;
+            }
+            return false;
+        });
+
+        if (matchedElement) {
+            let didShowContentView = this.showDefaultContentViewForTreeElement(matchedElement);
+            if (!didShowContentView)
+                return;
+
+            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(() => {
+                this._restoringState = false;
+            }, 0);
+
+            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..c056c6542
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.css
@@ -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.
+ */
+
+.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 .preserved:not(.selected) .cell-content {
+    opacity: 0.5;
+}
+
+.content-view.network-grid > .data-grid .preserved:not(.selected) .cell-content .timeline-record-bar > .segment {
+    filter: grayscale();
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js
new file mode 100644
index 000000000..50c58f8de
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.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.NetworkGridContentView = class NetworkGridContentView extends WebInspector.ContentView
+{
+    constructor(representedObject, extraArguments)
+    {
+        console.assert(extraArguments);
+        console.assert(extraArguments.networkSidebarPanel instanceof WebInspector.NetworkSidebarPanel);
+
+        super(representedObject);
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        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: {}, graph: {}};
+
+        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._timelineRuler = new WebInspector.TimelineRuler;
+        this._timelineRuler.allowsClippedLabels = true;
+
+        columns.graph.title = WebInspector.UIString("Timeline");
+        columns.graph.width = "15%";
+        columns.graph.headerView = this._timelineRuler;
+        columns.graph.sortable = false;
+
+        this._dataGrid = new WebInspector.TimelineDataGrid(columns, this._contentTreeOutline);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+        this._dataGrid.sortColumnIdentifier = "requestSent";
+        this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+        this._dataGrid.createSettings("network-grid-content-view");
+
+        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);
+
+        let clearImageDimensions = WebInspector.Platform.name === "mac" ? 16 : 15;
+        this._clearNetworkItemsNavigationItem = new WebInspector.ButtonNavigationItem("clear-network-items", WebInspector.UIString("Clear Network Items (%s)").format(WebInspector.clearKeyboardShortcut.displayName), "Images/NavigationItemClear.svg", clearImageDimensions, clearImageDimensions);
+        this._clearNetworkItemsNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, () => this.reset());
+
+        this._pendingRecords = [];
+        this._loadingResourceCount = 0;
+        this._lastRecordEndTime = NaN;
+        this._lastUpdateTimestamp = NaN;
+        this._startTime = NaN;
+        this._endTime = NaN;
+        this._scheduledCurrentTimeUpdateIdentifier = undefined;
+    }
+
+    // Public
+
+    get secondsPerPixel() { return this._timelineRuler.secondsPerPixel; }
+    get startTime() { return this._startTime; }
+    get currentTime() { return this.endTime || this.startTime; }
+    get endTime() { return this._endTime; }
+    get zeroTime() { return this.startTime; }
+
+    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 navigationItems()
+    {
+        return [this._clearNetworkItemsNavigationItem];
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._dataGrid.shown();
+
+        this._dataGrid.updateLayout(WebInspector.View.LayoutReason.Resize);
+
+        if (this._loadingResourceCount && !this._scheduledCurrentTimeUpdateIdentifier)
+            this._startUpdatingCurrentTime();
+    }
+
+    hidden()
+    {
+        this._dataGrid.hidden();
+
+        if (this._scheduledCurrentTimeUpdateIdentifier)
+            this._stopUpdatingCurrentTime();
+
+        super.hidden();
+    }
+
+    closed()
+    {
+        super.closed();
+
+        this._dataGrid.closed();
+    }
+
+    reset()
+    {
+        this._contentTreeOutline.removeChildren();
+        this._dataGrid.reset();
+
+        if (this._scheduledCurrentTimeUpdateIdentifier)
+            this._stopUpdatingCurrentTime();
+
+        this._pendingRecords = [];
+        this._loadingResourceCount = 0;
+        this._lastRecordEndTime = NaN;
+        this._lastUpdateTimestamp = NaN;
+        this._startTime = NaN;
+        this._endTime = NaN;
+
+        this._timelineRuler.startTime = 0;
+        this._timelineRuler.endTime = 0;
+    }
+
+    // Protected
+
+    layout()
+    {
+        if (isNaN(this.startTime) || isNaN(this.endTime))
+            return;
+
+        let oldZeroTime = this._timelineRuler.zeroTime;
+        let oldStartTime = this._timelineRuler.startTime;
+        let oldEndTime = this._timelineRuler.endTime;
+
+        this._timelineRuler.zeroTime = this.zeroTime;
+        this._timelineRuler.startTime = this.startTime;
+
+        if (this.startTime >= this.endTime)
+            return;
+
+        if (!this._scheduledCurrentTimeUpdateIdentifier) {
+            this._timelineRuler.endTime = this.endTime;
+            this._endTime = this._lastRecordEndTime + WebInspector.TimelineRecordBar.MinimumWidthPixels * this.secondsPerPixel;
+        }
+
+        this._timelineRuler.endTime = this.endTime;
+
+        // We only need to refresh the graphs when the any of the times change.
+        if (this.zeroTime !== oldZeroTime || this.startTime !== oldStartTime || this.endTime !== oldEndTime) {
+            for (let dataGridNode of this._dataGrid.children)
+                dataGridNode.refreshGraph();
+        }
+
+        this._processPendingRecords();
+    }
+
+    handleClearShortcut(event)
+    {
+        this.reset();
+    }
+
+    // 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);
+
+            const includesGraph = false;
+            const shouldShowPopover = true;
+            let dataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, includesGraph, this, shouldShowPopover);
+
+            this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
+        }
+
+        this._pendingRecords = [];
+    }
+
+    _mainResourceDidChange(event)
+    {
+        let frame = event.target;
+        if (!frame.isMainFrame() || WebInspector.settings.clearNetworkOnNavigate.value)
+            return;
+
+        for (let dataGridNode of this._dataGrid.children)
+            dataGridNode.element.classList.add("preserved");
+    }
+
+    _networkTimelineReset(event)
+    {
+        this.reset();
+    }
+
+    _networkTimelineRecordAdded(event)
+    {
+        let resourceTimelineRecord = event.data.record;
+        console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
+
+        let update = (event) => {
+            if (event.target[WebInspector.NetworkGridContentView.ResourceDidFinishOrFail])
+                return;
+
+            event.target.removeEventListener(null, null, this);
+            event.target[WebInspector.NetworkGridContentView.ResourceDidFinishOrFail] = true;
+
+            this._loadingResourceCount--;
+            if (this._loadingResourceCount)
+                return;
+
+            this._lastRecordEndTime = resourceTimelineRecord.endTime;
+            this._endTime = Math.max(this._lastRecordEndTime, this._endTime);
+
+            if (this._scheduledCurrentTimeUpdateIdentifier)
+                this.debounce(150)._stopUpdatingCurrentTime();
+        };
+
+        this._pendingRecords.push(resourceTimelineRecord);
+
+        this.needsLayout();
+
+        let resource = resourceTimelineRecord.resource;
+        if (resource.finished || resource.failed || resource.canceled)
+            return;
+
+        resource[WebInspector.NetworkGridContentView.ResourceDidFinishOrFail] = false;
+        resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, update, this);
+        resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, update, this);
+
+        this._loadingResourceCount++;
+        if (this._scheduledCurrentTimeUpdateIdentifier)
+            return;
+
+        if (isNaN(this._startTime))
+            this._startTime = this._endTime = resourceTimelineRecord.startTime;
+
+        // FIXME: <https://webkit.org/b/153634> Web Inspector: some background tabs think they are the foreground tab and do unnecessary work
+        if (!(WebInspector.tabBrowser.selectedTabContentView instanceof WebInspector.NetworkTabContentView))
+            return;
+
+        this._startUpdatingCurrentTime();
+    }
+
+    _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);
+    }
+
+    _update(timestamp)
+    {
+        console.assert(this._scheduledCurrentTimeUpdateIdentifier);
+
+        if (!isNaN(this._lastUpdateTimestamp)) {
+            let timespanSinceLastUpdate = (timestamp - this._lastUpdateTimestamp) / 1000 || 0;
+            this._endTime += timespanSinceLastUpdate;
+
+            this.updateLayout();
+        }
+
+        this._lastUpdateTimestamp = timestamp;
+        this._scheduledCurrentTimeUpdateIdentifier = requestAnimationFrame(this._updateCallback);
+    }
+
+    _startUpdatingCurrentTime()
+    {
+        console.assert(!this._scheduledCurrentTimeUpdateIdentifier);
+        if (this._scheduledCurrentTimeUpdateIdentifier)
+            return;
+
+        // Don't update the current time if the Inspector is not visible, as the requestAnimationFrames won't work.
+        if (!WebInspector.visible)
+            return;
+
+        if (!this._updateCallback)
+            this._updateCallback = this._update.bind(this);
+
+        this._scheduledCurrentTimeUpdateIdentifier = requestAnimationFrame(this._updateCallback);
+    }
+
+    _stopUpdatingCurrentTime()
+    {
+        console.assert(this._scheduledCurrentTimeUpdateIdentifier);
+        if (!this._scheduledCurrentTimeUpdateIdentifier)
+            return;
+
+        this._stopUpdatingCurrentTime.cancelDebounce();
+
+        cancelAnimationFrame(this._scheduledCurrentTimeUpdateIdentifier);
+        this._scheduledCurrentTimeUpdateIdentifier = undefined;
+
+        this.needsLayout();
+    }
+};
+
+WebInspector.NetworkGridContentView.ResourceDidFinishOrFail = Symbol("ResourceDidFinishOrFail");
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
new file mode 100644
index 000000000..592015844
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.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.
+ */
+
+.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: var(--navigation-bar-height);
+    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;
+    overflow-y: overlay;
+}
+
+.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 .status .close.status-button {
+    padding-bottom: 1px;
+}
+
+.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;
+}
+
+.sidebar > .panel.navigation.network .tree-outline > .preserved:not(.selected) > :not(.status) {
+    opacity: 0.5;
+}
+
+.sidebar > .panel.navigation.network .tree-outline > .preserved:not(.selected) > .icon {
+    filter: grayscale(); 
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js
new file mode 100644
index 000000000..b2f0581ae
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js
@@ -0,0 +1,232 @@
+/*
+ * 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"), false);
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        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;
+    }
+
+    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
+
+    _mainResourceDidChange(event)
+    {
+        let frame = event.target;
+        if (!frame.isMainFrame() || WebInspector.settings.clearNetworkOnNavigate.value)
+            return;
+
+        for (let treeElement of this.contentTreeOutline.children)
+            treeElement.element.classList.add("preserved");
+    }
+
+    _networkTimelineReset(event)
+    {
+        this.contentBrowser.contentViewContainer.closeAllContentViews();
+
+        if (this.visible)
+            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..0e90a0756
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js
@@ -0,0 +1,70 @@
+/*
+ * 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.GeneralTabBarItem(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()
+    {
+        // Since the Network tab has a real sidebar, showing the split console would cause items in
+        // the sidebar to be aligned with an item in the datagrid that isn't shown.
+        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..ee73b6230
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js
@@ -0,0 +1,160 @@
+
+/*
+ * 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()
+    {
+        if (!this.visible)
+            return;
+
+        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;
+        }
+
+        let minimumBarPaddingTime = WebInspector.TimelineOverview.MinimumDurationPerPixel * (WebInspector.TimelineRecordBar.MinimumWidthPixels + WebInspector.TimelineRecordBar.MinimumMarginPixels);
+
+        // 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 + 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 + 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..47092ff5c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.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.network > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.timeline-view.network > .data-grid .name-column .subtitle {
+    display: none;
+}
+
+.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..86688e3ee
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
@@ -0,0 +1,264 @@
+/*
+ * 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);
+
+        let columns = {name: {}, domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}, graph: {}};
+
+        columns.name.title = WebInspector.UIString("Name");
+        columns.name.icon = true;
+        columns.name.width = "10%";
+        columns.name.locked = true;
+
+        columns.domain.title = WebInspector.UIString("Domain");
+        columns.domain.width = "8%";
+
+        columns.type.title = WebInspector.UIString("Type");
+        columns.type.width = "7%";
+
+        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 = "4%";
+
+        columns.scheme.title = WebInspector.UIString("Scheme");
+        columns.scheme.width = "4%";
+
+        columns.statusCode.title = WebInspector.UIString("Status");
+        columns.statusCode.width = "4%";
+
+        columns.cached.title = WebInspector.UIString("Cached");
+        columns.cached.width = "4%";
+
+        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._timelineRuler = new WebInspector.TimelineRuler;
+        this._timelineRuler.allowsClippedLabels = true;
+
+        columns.graph.title = WebInspector.UIString("Timeline");
+        columns.graph.width = "15%";
+        columns.graph.headerView = this._timelineRuler;
+        columns.graph.sortable = false;
+
+        this._dataGrid = new WebInspector.TimelineDataGrid(columns);
+        this._dataGrid.sortDelegate = this;
+        this._dataGrid.sortColumnIdentifier = "requestSent";
+        this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+        this._dataGrid.createSettings("network-timeline-view");
+
+        this.setupDataGrid(this._dataGrid);
+
+        this.element.classList.add("network");
+        this.addSubview(this._dataGrid);
+
+        timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
+
+        this._pendingRecords = [];
+        this._resourceDataGridNodeMap = new Map;
+    }
+
+    // Public
+
+    get secondsPerPixel() { return this._timelineRuler.secondsPerPixel; }
+
+    get selectionPathComponents()
+    {
+        if (!this._dataGrid.selectedNode || this._dataGrid.selectedNode.hidden)
+            return null;
+
+        console.assert(this._dataGrid.selectedNode instanceof WebInspector.ResourceTimelineDataGridNode);
+
+        let pathComponent = new WebInspector.TimelineDataGridNodePathComponent(this._dataGrid.selectedNode, this._dataGrid.selectedNode.resource);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.dataGridNodePathComponentSelected, this);
+        return [pathComponent];
+    }
+
+    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();
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._dataGrid.reset();
+
+        this._pendingRecords = [];
+        this._resourceDataGridNodeMap.clear();
+    }
+
+    // TimelineDataGrid sort delegate
+
+    dataGridSortComparator(sortColumnIdentifier, sortDirection, node1, node2)
+    {
+        if (sortColumnIdentifier !== "name")
+            return null;
+
+        let displayName1 = node1.displayName();
+        let displayName2 = node2.displayName();
+        if (displayName1 !== displayName2)
+            return displayName1.localeCompare(displayName2) * sortDirection;
+
+        return node1.resource.url.localeCompare(node2.resource.url) * sortDirection;
+    }
+
+    // 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);
+    }
+
+    dataGridNodePathComponentSelected(event)
+    {
+        let pathComponent = event.data.pathComponent;
+        console.assert(pathComponent instanceof WebInspector.TimelineDataGridNodePathComponent);
+
+        let dataGridNode = pathComponent.timelineDataGridNode;
+        console.assert(dataGridNode.dataGrid === this._dataGrid);
+
+        dataGridNode.revealAndSelect();
+    }
+
+    layout()
+    {
+        this.endTime = Math.min(this.endTime, this.currentTime);
+
+        let oldZeroTime = this._timelineRuler.zeroTime;
+        let oldStartTime = this._timelineRuler.startTime;
+        let oldEndTime = this._timelineRuler.endTime;
+
+        this._timelineRuler.zeroTime = this.zeroTime;
+        this._timelineRuler.startTime = this.startTime;
+        this._timelineRuler.endTime = this.endTime;
+
+        // We only need to refresh the graphs when the any of the times change.
+        if (this.zeroTime !== oldZeroTime || this.startTime !== oldStartTime || this.endTime !== oldEndTime) {
+            for (let dataGridNode of this._resourceDataGridNodeMap.values())
+                dataGridNode.refreshGraph();
+        }
+
+        this._processPendingRecords();
+    }
+
+    // Private
+
+    _processPendingRecords()
+    {
+        if (!this._pendingRecords.length)
+            return;
+
+        for (let resourceTimelineRecord of this._pendingRecords) {
+            // Skip the record if it already exists in the grid.
+            // FIXME: replace with this._dataGrid.findDataGridNode(resourceTimelineRecord.resource) once <https://webkit.org/b/155305> is fixed.
+            let dataGridNode = this._resourceDataGridNodeMap.get(resourceTimelineRecord.resource);
+            if (dataGridNode)
+                continue;
+
+            const includesGraph = false;
+            const shouldShowPopover = true;
+            dataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, includesGraph, this, shouldShowPopover);
+            this._resourceDataGridNodeMap.set(resourceTimelineRecord.resource, dataGridNode);
+
+            this._dataGrid.addRowInSortOrder(null, dataGridNode);
+        }
+
+        this._pendingRecords = [];
+    }
+
+    _networkTimelineRecordAdded(event)
+    {
+        var resourceTimelineRecord = event.data.record;
+        console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
+
+        this._pendingRecords.push(resourceTimelineRecord);
+
+        this.needsLayout();
+    }
+};
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..21c0142ab
--- /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.GeneralTabBarItem(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 = Array.from(WebInspector.knownTabClasses());
+        let allowedTabClasses = allTabClasses.filter((tabClass) => tabClass.isTabAllowed() && !tabClass.isEphemeral());
+        allowedTabClasses.sort((a, b) => a.tabInfo().title.localeCompare(b.tabInfo().title));
+
+        if (Array.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..d7631dca0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js
@@ -0,0 +1,290 @@
+/*
+ * 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 if (this._preview.subtype === "node")
+            this._titleElement.appendChild(WebInspector.FormattedValue.createElementForNodePreview(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" || preview.subtype === "node") {
+                // Display null / regexps / nodes 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)
+    {
+        if (preview.subtype === "node") {
+            element.appendChild(WebInspector.FormattedValue.createElementForNodePreview(preview));
+            return false;
+        }
+
+        element.appendChild(WebInspector.FormattedValue.createElementForObjectPreview(preview));
+        return true;
+    }
+
+    _contextMenuHandler(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        event.__addedObjectPreviewContextMenuItems = true;
+
+        contextMenu.appendItem(WebInspector.UIString("Log Value"), () => {
+            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/ObjectPropertiesDetailSectionRow.js b/Source/WebInspectorUI/UserInterface/Views/ObjectPropertiesDetailSectionRow.js
new file mode 100644
index 000000000..e085a1e13
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectPropertiesDetailSectionRow.js
@@ -0,0 +1,61 @@
+/*
+ * 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.ObjectPropertiesDetailSectionRow = class ObjectPropertiesDetailSectionRow extends WebInspector.DetailsSectionRow
+{
+    constructor(objectTree, sectionForDeferredExpand)
+    {
+        super();
+
+        console.assert(objectTree instanceof WebInspector.ObjectTreeView);
+        console.assert(!sectionForDeferredExpand || sectionForDeferredExpand instanceof WebInspector.DetailsSection);
+
+        this._objectTree = objectTree;
+
+        this.hideEmptyMessage();
+        this.element.classList.add("properties", WebInspector.SyntaxHighlightedStyleClassName);
+        this.element.appendChild(objectTree.element);
+
+        if (sectionForDeferredExpand && sectionForDeferredExpand.collapsed)
+            sectionForDeferredExpand.addEventListener(WebInspector.DetailsSection.Event.CollapsedStateChanged, this._detailsSectionCollapsedStateChanged, this);
+        else
+            this._objectTree.expand();
+    }
+
+    // Public
+
+    get objectTree() { return this._objectTree; }
+
+    // Private
+
+    _detailsSectionCollapsedStateChanged(event)
+    {
+        console.assert(!event.target.collapsed);
+
+        this._objectTree.expand();
+
+        event.target.removeEventListener(WebInspector.DetailsSection.Event.CollapsedStateChanged, this._detailsSectionCollapsedStateChanged, this);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css
new file mode 100644
index 000000000..cd556be28
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.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.
+ */
+
+.tree-outline .item.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, sans-serif;
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    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..53afa1392
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js
@@ -0,0 +1,260 @@
+/*
+ * 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
+
+    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", (event) => {
+            event.stopPropagation();
+            var lastNonPrototypeObject = this._propertyPath.lastNonPrototypeObject;
+            var getterObject = this._property.get;
+            lastNonPrototypeObject.invokeGetter(getterObject, (error, result, wasThrown) => {
+                this._getterHadError = !!(error || wasThrown);
+                this._getterValue = result;
+                if (this.invokedGetter && typeof this.invokedGetter === "function")
+                    this.invokedGetter();
+            });
+        });
+
+        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;
+    }
+
+    populateContextMenu(contextMenu, event)
+    {
+        if (event.__addedObjectPreviewContextMenuItems)
+            return;
+        if (event.__addedObjectTreeContextMenuItems)
+            return;
+
+        event.__addedObjectTreeContextMenuItems = true;
+
+        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);
+
+        super.populateContextMenu(contextMenu, event);
+    }
+
+    // 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);
+    }
+
+    _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() {
+                    resolvedValue.target.DebuggerAgent.getFunctionDetails(resolvedValue.objectId, function(error, response) {
+                        if (error)
+                            return;
+
+                        let location = response.location;
+                        let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId, resolvedValue.target);
+                        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..96447a26a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.css
@@ -0,0 +1,42 @@
+/*
+ * 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);
+}
+
+.tree-outline .item.object-tree-map-entry {
+    padding-top: 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..0f505e392
--- /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..1288837a6
--- /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") || ["Math", "JSON", "Reflect", "Console"].includes(parentDescription)) {
+                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__", (propertyDescriptor) => {
+            if (propertyDescriptor)
+                this.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, mode));
+        });
+    }
+
+    _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..3279ebde0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
@@ -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.
+ */
+
+.object-tree {
+    position: relative;
+    display: inline-block;
+    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 .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..1c1311eb6
--- /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__", (propertyDescriptor) => {
+            if (propertyDescriptor)
+                this._outline.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, this._mode));
+        });
+    }
+
+    _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/OpenResourceDialog.css b/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css
new file mode 100644
index 000000000..bbcd78889
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css
@@ -0,0 +1,132 @@
+/*
+ * 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.
+ */
+
+.open-resource-dialog {
+    display: flex;
+    flex-direction: column;
+
+    position: absolute;
+    left: 50%;
+    top: 50px;
+    width: calc(100% - 40px);
+    max-width: 452px;
+    max-height: calc(100% - 100px);
+    overflow: hidden;
+
+    transform: translate(-50%, 0);
+
+    border-radius: 5px;
+    background-color: hsla(0, 0%, 95%, 0.8);
+    border: 1px hsla(0, 0%, 0%, 0.25) solid;
+    box-shadow: 1px 5px 20px 3px hsla(0, 0%, 0%, 0.33);
+
+    -webkit-backdrop-filter: blur(10px);
+
+    z-index: var(--z-index-popover);
+}
+
+.open-resource-dialog > .field {
+    margin: 8px 3px 8px 32px;
+}
+
+.open-resource-dialog > .field::before {
+    position: absolute;
+    left: 6px;
+    top: 6px;
+    width: 30px;
+    opacity: 0.5;
+    content: url(../Images/Search.svg);
+}
+
+.open-resource-dialog > .field > input {
+    display: block;
+    width: 100%;
+    border: none;
+    background-color: transparent;
+    font-size: 20px;
+    color: hsl(0, 0%, 4%);
+    padding: 0 30px 1px 7px;
+    outline: none;
+    -webkit-appearance: none;
+}
+
+.open-resource-dialog > .field > input::placeholder {
+    color: hsl(0, 0%, 0%, 0.25);
+}
+
+.open-resource-dialog > .field > img {
+    position: absolute;
+    top: 15px;
+    right: 10px;
+    padding: 2px;
+    border-radius: 9px;
+    width: 15px;
+    height: 15px;
+    background-color: hsl(0, 0%, 60%);
+    display: none;
+    content: url(../Images/CloseWhite.svg);
+}
+
+.open-resource-dialog > .field > img:active {
+    background-color: hsl(0, 0%, 54%);
+}
+
+.open-resource-dialog.non-empty > .field > img {
+    display: block;
+}
+
+.open-resource-dialog > .tree-outline {
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.open-resource-dialog.has-results > .tree-outline {
+    border-top: solid 1px var(--border-color);
+}
+
+.open-resource-dialog > .tree-outline .item {
+    padding-left: 10px;
+    border: none;
+}
+
+.open-resource-dialog > .tree-outline .item.selected {
+    color: white;
+    background-color: hsl(209, 100%, 49%);
+}
+
+.open-resource-dialog > .tree-outline .item.selected .highlighted {
+    background-color: var(--selected-background-color-highlight);
+
+    border-bottom: none;
+    text-decoration: underline;
+}
+
+.open-resource-dialog > .tree-outline .item.selected .subtitle {
+    color: hsla(0, 0%, 100%, 0.9);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.js b/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.js
new file mode 100644
index 000000000..58a72f718
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.js
@@ -0,0 +1,335 @@
+/*
+ * 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.OpenResourceDialog = class OpenResourceDialog extends WebInspector.Dialog
+{
+    constructor(delegate)
+    {
+        super(delegate);
+
+        this.element.classList.add("open-resource-dialog");
+
+        let fieldElement = this.element.appendChild(document.createElement("div"));
+        fieldElement.classList.add("field");
+
+        this._inputElement = fieldElement.appendChild(document.createElement("input"));
+        this._inputElement.type = "text";
+        this._inputElement.placeholder = WebInspector.UIString("File or Resource");
+        this._inputElement.spellcheck = false;
+
+        this._clearIconElement = fieldElement.appendChild(document.createElement("img"));
+
+        this._inputElement.addEventListener("keydown", this._handleKeydownEvent.bind(this));
+        this._inputElement.addEventListener("keyup", this._handleKeyupEvent.bind(this));
+        this._inputElement.addEventListener("blur", this._handleBlurEvent.bind(this));
+        this._clearIconElement.addEventListener("mousedown", this._handleMousedownEvent.bind(this));
+        this._clearIconElement.addEventListener("click", this._handleClickEvent.bind(this));
+
+        this._treeOutline = new WebInspector.TreeOutline;
+        this._treeOutline.allowsRepeatSelection = true;
+        this._treeOutline.disclosureButtons = false;
+        this._treeOutline.large = true;
+
+        this._treeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+        this._treeOutline.element.addEventListener("focus", () => { this._inputElement.focus(); });
+
+        this.element.appendChild(this._treeOutline.element);
+
+        this._queryController = new WebInspector.ResourceQueryController;
+        this._filteredResults = [];
+    }
+
+    // Protected
+
+    _populateResourceTreeOutline()
+    {
+        function createHighlightedTitleFragment(title, highlightTextRanges)
+        {
+            let titleFragment = document.createDocumentFragment();
+            let lastIndex = 0;
+            for (let textRange of highlightTextRanges) {
+                if (textRange.startColumn > lastIndex)
+                    titleFragment.append(title.substring(lastIndex, textRange.startColumn));
+
+                let highlightSpan = document.createElement("span");
+                highlightSpan.classList.add("highlighted");
+                highlightSpan.append(title.substring(textRange.startColumn, textRange.endColumn));
+                titleFragment.append(highlightSpan);
+                lastIndex = textRange.endColumn;
+            }
+
+            if (lastIndex < title.length)
+                titleFragment.append(title.substring(lastIndex, title.length));
+
+            return titleFragment;
+        }
+
+        function createTreeElement(representedObject)
+        {
+            let treeElement = null;
+
+            if (representedObject instanceof WebInspector.SourceMapResource)
+                treeElement = new WebInspector.SourceMapResourceTreeElement(representedObject);
+            else if (representedObject instanceof WebInspector.Resource)
+                treeElement = new WebInspector.ResourceTreeElement(representedObject);
+            else if (representedObject instanceof WebInspector.Script)
+                treeElement = new WebInspector.ScriptTreeElement(representedObject);
+
+            return treeElement;
+        }
+
+        for (let result of this._filteredResults) {
+            let resource = result.resource;
+            if (this._treeOutline.findTreeElement(resource))
+                continue;
+
+            let treeElement = createTreeElement(resource);
+            if (!treeElement)
+                continue;
+
+            treeElement.mainTitle = createHighlightedTitleFragment(resource.displayName, result.matchingTextRanges);
+            treeElement[WebInspector.OpenResourceDialog.ResourceMatchCookieDataSymbol] = result.cookie;
+            this._treeOutline.appendChild(treeElement);
+        }
+
+        if (this._treeOutline.children.length)
+            this._treeOutline.children[0].select(true, false, true, true);
+    }
+
+    didDismissDialog()
+    {
+        WebInspector.Frame.removeEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        WebInspector.Frame.removeEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
+        WebInspector.Target.removeEventListener(WebInspector.Target.Event.ResourceAdded, this._resourceWasAdded, this);
+        WebInspector.debuggerManager.removeEventListener(WebInspector.DebuggerManager.Event.ScriptAdded, this._scriptAdded, this);
+
+        this._queryController.reset();
+    }
+
+    didPresentDialog()
+    {
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
+        WebInspector.Target.addEventListener(WebInspector.Target.Event.ResourceAdded, this._resourceWasAdded, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptAdded, this._scriptAdded, this);
+
+        if (WebInspector.frameResourceManager.mainFrame)
+            this._addResourcesForFrame(WebInspector.frameResourceManager.mainFrame);
+
+        for (let target of WebInspector.targets) {
+            if (target !== WebInspector.mainTarget)
+                this._addResourcesForTarget(target);
+        }
+
+        this._updateFilter();
+
+        this._inputElement.focus();
+        this._clear();
+    }
+
+    // Private
+
+    _handleKeydownEvent(event)
+    {
+        if (event.keyCode === WebInspector.KeyboardShortcut.Key.Escape.keyCode) {
+            if (this._inputElement.value === "")
+                this.dismiss();
+            else
+                this._clear();
+
+            event.preventDefault();
+        } else if (event.keyCode === WebInspector.KeyboardShortcut.Key.Enter.keyCode) {
+            if (this._treeOutline.selectedTreeElement) {
+                this.dismiss(this._treeOutline.selectedTreeElement.representedObject, this._treeOutline.selectedTreeElement[WebInspector.OpenResourceDialog.ResourceMatchCookieDataSymbol]);
+                event.preventDefault();
+                return;
+            }
+
+            // ":<line>:<column>" jumps to a location for the current ContentView.
+            if (/^:\d/.test(this._inputElement.value)) {
+                let visibleContentView = WebInspector.focusedOrVisibleContentView();
+                let representedObject = visibleContentView ? visibleContentView.representedObject : null;
+                if (representedObject && representedObject instanceof WebInspector.SourceCode) {
+                    let [, lineNumber, columnNumber] = this._inputElement.value.split(":");
+                    lineNumber = lineNumber ? parseInt(lineNumber, 10) - 1 : 0;
+                    columnNumber = columnNumber ? parseInt(columnNumber, 10) - 1 : 0;
+                    this.dismiss(representedObject, {lineNumber, columnNumber});
+                    event.preventDefault();
+                    return;
+                }
+            }
+
+            this._inputElement.select();
+        } else if (event.keyCode === WebInspector.KeyboardShortcut.Key.Up.keyCode || event.keyCode === WebInspector.KeyboardShortcut.Key.Down.keyCode) {
+            let treeElement = this._treeOutline.selectedTreeElement;
+            if (!treeElement)
+                return;
+
+            let adjacentSiblingProperty = event.keyCode === WebInspector.KeyboardShortcut.Key.Up.keyCode ? "previousSibling" : "nextSibling";
+            treeElement = treeElement[adjacentSiblingProperty];
+            if (treeElement)
+                treeElement.revealAndSelect(true, false, true, true);
+
+            event.preventDefault();
+        }
+    }
+
+    _handleKeyupEvent(event)
+    {
+        if (event.keyCode === WebInspector.KeyboardShortcut.Key.Up.keyCode || event.keyCode === WebInspector.KeyboardShortcut.Key.Down.keyCode)
+            return;
+
+        this._updateFilter();
+    }
+
+    _handleBlurEvent(event)
+    {
+        // Prevent the dialog from being dismissed while handling a tree item click event.
+        if (event.relatedTarget === this._treeOutline.element)
+            return;
+
+        this.dismiss();
+    }
+
+    _handleMousedownEvent(event)
+    {
+        this._inputElement.select();
+
+        // This ensures we don't get a "blur" event triggered for the text field
+        // that would cause the dialog to be dismissed.
+        event.preventDefault();
+    }
+
+    _handleClickEvent(event)
+    {
+        this._clear();
+    }
+
+    _clear()
+    {
+        this._inputElement.value = "";
+        this._updateFilter();
+    }
+
+    _updateFilter()
+    {
+        this._filteredResults = [];
+        this._treeOutline.removeChildren();
+
+        let filterText = this._inputElement.value.trim();
+        if (filterText) {
+            this._filteredResults = this._queryController.executeQuery(filterText);
+            this._populateResourceTreeOutline();
+        }
+
+        this.element.classList.toggle("non-empty", this._inputElement.value !== "");
+        this.element.classList.toggle("has-results", this._treeOutline.children.length);
+    }
+
+    _treeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
+        if (!event.data.selectedByUser)
+            return;
+
+        this.dismiss(treeElement.representedObject, treeElement[WebInspector.OpenResourceDialog.ResourceMatchCookieDataSymbol]);
+    }
+
+    _addResource(resource, suppressFilterUpdate)
+    {
+        if (!this.representedObjectIsValid(resource))
+            return;
+
+        this._queryController.addResource(resource);
+        if (suppressFilterUpdate)
+            return;
+
+        this._updateFilter();
+    }
+
+    _addResourcesForFrame(frame)
+    {
+        const suppressFilterUpdate = true;
+
+        let frames = [frame];
+        while (frames.length) {
+            let currentFrame = frames.shift();
+            let resources = [currentFrame.mainResource].concat(Array.from(currentFrame.resourceCollection.items));
+            for (let resource of resources)
+                this._addResource(resource, suppressFilterUpdate);
+
+            frames = frames.concat(currentFrame.childFrameCollection.toArray());
+        }
+    }
+
+    _addResourcesForTarget(target)
+    {
+        const suppressFilterUpdate = true;
+
+        this._addResource(target.mainResource);
+
+        for (let resource of target.resourceCollection.items)
+            this._addResource(resource, suppressFilterUpdate);
+
+        let targetData = WebInspector.debuggerManager.dataForTarget(target);
+        for (let script of targetData.scripts) {
+            if (script.resource)
+                continue;
+            if (isWebKitInternalScript(script.sourceURL) || isWebInspectorConsoleEvaluationScript(script.sourceURL))
+                continue;
+            this._addResource(script, suppressFilterUpdate);
+        }
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (event.target.isMainFrame())
+            this._queryController.reset();
+
+        this._addResource(event.target.mainResource);
+    }
+
+    _resourceWasAdded(event)
+    {
+        this._addResource(event.data.resource);
+    }
+
+    _scriptAdded(event)
+    {
+        let script = event.data.script;
+        if (script.resource)
+            return;
+
+        if (script.target === WebInspector.mainTarget)
+            return;
+
+        this._addResource(script);
+    }
+};
+
+WebInspector.OpenResourceDialog.ResourceMatchCookieDataSymbol = Symbol("open-resource-dialog-resource-match-cookie-data");
diff --git a/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css
new file mode 100644
index 000000000..30b8abdf8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.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.
+ */
+
+.timeline-view.overview > .data-grid th.graph-column > .timeline-ruler {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+}
+
+.timeline-view.overview > .data-grid th.graph-column > .timeline-ruler > .header {
+    border: none;
+    height: 22px;
+}
+
+.timeline-view.overview > .data-grid th.graph-column > .timeline-ruler > .event-markers {
+    top: 22px;
+}
+
+.timeline-view.overview > .data-grid {
+    position: absolute;
+    top: 0;
+    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..ed888b9e0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js
@@ -0,0 +1,305 @@
+/*
+ * 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;
+
+        let columns = {name: {}, graph: {}};
+
+        columns.name.title = WebInspector.UIString("Name");
+        columns.name.width = "20%";
+        columns.name.icon = true;
+        columns.name.disclosure = true;
+
+        this._timelineRuler = new WebInspector.TimelineRuler;
+        this._timelineRuler.allowsClippedLabels = true;
+
+        columns.graph.width = "80%";
+        columns.graph.headerView = this._timelineRuler;
+
+        this._dataGrid = new WebInspector.DataGrid(columns);
+
+        this.setupDataGrid(this._dataGrid);
+
+        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);
+        if (this._networkTimeline)
+            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 = [];
+        this._resourceDataGridNodeMap = new Map;
+    }
+
+    // Public
+
+    get secondsPerPixel()
+    {
+        return this._timelineRuler.secondsPerPixel;
+    }
+
+    set secondsPerPixel(x)
+    {
+        this._timelineRuler.secondsPerPixel = x;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._timelineRuler.updateLayout(WebInspector.View.LayoutReason.Resize);
+    }
+
+    closed()
+    {
+        if (this._networkTimeline)
+            this._networkTimeline.removeEventListener(null, null, this);
+        this._recording.removeEventListener(null, null, this);
+    }
+
+    get selectionPathComponents()
+    {
+        let dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode || dataGridNode.hidden)
+            return null;
+
+        let pathComponents = [];
+
+        while (dataGridNode && !dataGridNode.root) {
+            console.assert(dataGridNode instanceof WebInspector.TimelineDataGridNode);
+            if (dataGridNode.hidden)
+                return null;
+
+            let pathComponent = new WebInspector.TimelineDataGridNodePathComponent(dataGridNode);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.dataGridNodePathComponentSelected, this);
+            pathComponents.unshift(pathComponent);
+            dataGridNode = dataGridNode.parent;
+        }
+
+        return pathComponents;
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._dataGrid.removeChildren();
+
+        this._pendingRepresentedObjects = [];
+    }
+
+    // Protected
+
+    dataGridNodePathComponentSelected(event)
+    {
+        let dataGridNode = event.data.pathComponent.timelineDataGridNode;
+        console.assert(dataGridNode.dataGrid === this._dataGrid);
+
+        dataGridNode.revealAndSelect();
+    }
+
+    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
+
+    _compareDataGridNodesByStartTime(a, b)
+    {
+        function getStartTime(dataGridNode)
+        {
+            if (dataGridNode instanceof WebInspector.ResourceTimelineDataGridNode)
+                return dataGridNode.resource.firstTimestamp;
+            if (dataGridNode instanceof WebInspector.SourceCodeTimelineTimelineDataGridNode)
+                return dataGridNode.sourceCodeTimeline.startTime;
+
+            console.error("Unknown data grid node.", dataGridNode);
+            return 0;
+        }
+
+        let result = getStartTime(a) - getStartTime(b);
+        if (result)
+            return result;
+
+        // Fallback to comparing titles.
+        return a.displayName().localeCompare(b.displayName());
+    }
+
+    _insertDataGridNode(dataGridNode, parentDataGridNode)
+    {
+        console.assert(dataGridNode);
+        console.assert(!dataGridNode.parent);
+
+        if (parentDataGridNode)
+            parentDataGridNode.insertChild(dataGridNode, insertionIndexForObjectInListSortedByFunction(dataGridNode, parentDataGridNode.children, this._compareDataGridNodesByStartTime.bind(this)));
+        else
+            this._dataGrid.appendChild(dataGridNode);
+    }
+
+    _addResourceToDataGridIfNeeded(resource)
+    {
+        console.assert(resource);
+        if (!resource)
+            return null;
+
+        // FIXME: replace with this._dataGrid.findDataGridNode(resource) once <https://webkit.org/b/155305> is fixed.
+        let dataGridNode = this._resourceDataGridNodeMap.get(resource);
+        if (dataGridNode)
+            return dataGridNode;
+
+        let parentFrame = resource.parentFrame;
+        if (!parentFrame)
+            return null;
+
+        let resourceTimelineRecord = this._networkTimeline ? this._networkTimeline.recordForResource(resource) : null;
+        if (!resourceTimelineRecord)
+            resourceTimelineRecord = new WebInspector.ResourceTimelineRecord(resource);
+
+        const includesGraph = true;
+        const shouldShowPopover = false;
+        let resourceDataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, includesGraph, this, shouldShowPopover);
+        this._resourceDataGridNodeMap.set(resource, resourceDataGridNode);
+
+        let expandedByDefault = false;
+        if (parentFrame.mainResource === resource || parentFrame.provisionalMainResource === resource) {
+            parentFrame = parentFrame.parentFrame;
+            expandedByDefault = !parentFrame; // Main frame expands by default.
+        }
+
+        if (expandedByDefault)
+            resourceDataGridNode.expand();
+
+        let parentDataGridNode = null;
+        if (parentFrame) {
+            // Find the parent main resource, adding it if needed, to append this resource as a child.
+            let parentResource = parentFrame.provisionalMainResource || parentFrame.mainResource;
+
+            parentDataGridNode = this._addResourceToDataGridIfNeeded(parentResource);
+            console.assert(parentDataGridNode);
+            if (!parentDataGridNode)
+                return null;
+        }
+
+        this._insertDataGridNode(resourceDataGridNode, parentDataGridNode);
+
+        return resourceDataGridNode;
+    }
+
+    _addSourceCodeTimeline(sourceCodeTimeline)
+    {
+        let parentDataGridNode = sourceCodeTimeline.sourceCodeLocation ? this._addResourceToDataGridIfNeeded(sourceCodeTimeline.sourceCode) : null;
+        let sourceCodeTimelineDataGridNode = new WebInspector.SourceCodeTimelineTimelineDataGridNode(sourceCodeTimeline, this);
+        this._resourceDataGridNodeMap.set(sourceCodeTimeline, sourceCodeTimelineDataGridNode);
+
+        this._insertDataGridNode(sourceCodeTimelineDataGridNode, parentDataGridNode);
+    }
+
+    _processPendingRepresentedObjects()
+    {
+        if (!this._pendingRepresentedObjects.length)
+            return;
+
+        for (var representedObject of this._pendingRepresentedObjects) {
+            if (representedObject instanceof WebInspector.Resource)
+                this._addResourceToDataGridIfNeeded(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);
+    }
+
+    _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..70b84923e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/PathComponentIcons.css
@@ -0,0 +1,116 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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);
+}
+
+.heap-snapshot-summary-icon .icon {
+    content: url(../Images/HeapSnapshotSummary.svg);
+}
+
+.heap-snapshot-instances-icon .icon {
+    content: url(../Images/HeapSnapshotInstances.svg);
+}
+
+.heap-snapshot-object-graph-icon .icon {
+    content: url(../Images/HeapSnapshotObjectGraph.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);
+}
+
+.function-icon .icon {
+    content: url(../Images/Function.svg);
+}
+
+.native-icon .icon {
+    content: url(../Images/Native.svg);
+}
+
+.program-icon .icon {
+    content: url(../Images/Program.svg);
+}
+
+.events-icon .icon {
+    content: url(../Images/Events.svg);
+}
+
+.call-trees-icon .icon {
+    content: url(../Images/CallTrees.svg);
+}
+
+.snapshot-list-icon .icon {
+    content: url(../Images/Events.svg);
+}
+
+.snapshot-diff-icon .icon {
+    content: url(../Images/HeapSnapshotDiff.svg);
+}
+
+/* FIXME: <https://webkit.org/b/155077> [GTK] Web Inspector: Add new GTK+ icons for different Script Timeline Views */
+/* FIXME: <https://webkit.org/b/155282> [GTK] Web Inspector: Add new GTK+ icons for different Heap Allocations Timeline Views (Heap Snapshots) */
+body:not(.mac-platform, .windows-platform) .events-icon .icon,
+body:not(.mac-platform, .windows-platform) .call-trees-icon .icon,
+body:not(.mac-platform, .windows-platform) .heap-snapshot-record .icon,
+body:not(.mac-platform, .windows-platform) .heap-snapshot-summary-icon .icon,
+body:not(.mac-platform, .windows-platform) .heap-snapshot-instances-icon .icon,
+body:not(.mac-platform, .windows-platform) .snapshot-list-icon .icon,
+body:not(.mac-platform, .windows-platform) .snapshot-diff-icon .icon {
+    content: url(../Images/ResultLine.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/PinnedTabBarItem.js b/Source/WebInspectorUI/UserInterface/Views/PinnedTabBarItem.js
new file mode 100644
index 000000000..b41fd6bfd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/PinnedTabBarItem.js
@@ -0,0 +1,51 @@
+/*
+ * 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.PinnedTabBarItem = class PinnedTabBarItem extends WebInspector.TabBarItem
+{
+    constructor(image, title, representedObject)
+    {
+        super(image, title, representedObject);
+
+        this.element.classList.add("pinned");
+
+        this.element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
+    }
+
+    // Private
+
+    _handleContextMenuEvent(event)
+    {
+        event.preventDefault();
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        this.dispatchEventToListeners(WebInspector.PinnedTabBarItem.Event.ContextMenu, {contextMenu});
+    }
+};
+
+WebInspector.PinnedTabBarItem.Event = {
+    ContextMenu: "pinned-tab-bar-item-context-menu",
+};
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..3edee8c85
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Popover.js
@@ -0,0 +1,603 @@
+/*
+ * 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._resizeHandler = null;
+
+        this._contentNeedsUpdate = false;
+        this._dismissing = false;
+
+        this._canvasId = "popover-" + (WebInspector.Popover.canvasId++);
+
+        this._element = document.createElement("div");
+        this._element.className = "popover";
+        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);
+    }
+
+    set windowResizeHandler(resizeHandler)
+    {
+        console.assert(typeof resizeHandler === "function");
+        this._resizeHandler = resizeHandler;
+    }
+
+    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._dismissing || this._element.parentNode !== document.body)
+            return;
+
+        this._dismissing = true;
+
+        console.assert(this._isListeningForPopoverEvents);
+        this._isListeningForPopoverEvents = false;
+
+        window.removeEventListener("mousedown", this, true);
+        window.removeEventListener("scroll", this, true);
+        window.removeEventListener("resize", this, true);
+        window.removeEventListener("keypress", this, true);
+
+        WebInspector.quickConsole.keyboardShortcutDisabled = false;
+
+        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)
+                && !event[WebInspector.Popover.EventPreventDismissSymbol]) {
+                this.dismiss();
+            }
+            break;
+        case "resize":
+            if (this._resizeHandler)
+                this._resizeHandler();
+            break;
+        case "keypress":
+            if (event.keyCode === WebInspector.KeyboardShortcut.Key.Escape.keyCode)
+                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);
+
+                this._dismissing = false;
+                break;
+            }
+            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);
+
+        this._dismissing = false;
+
+        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)
+    {
+        let cornerRadius = WebInspector.Popover.CornerRadius;
+        let arrowHalfLength = WebInspector.Popover.AnchorSize.width * 0.5;
+        let anchorPoint = this._anchorPoint;
+
+        // Prevent the arrow from being positioned against one of the popover's rounded corners.
+        let arrowPadding = cornerRadius + arrowHalfLength;
+        if (anchorEdge === WebInspector.RectEdge.MIN_Y || anchorEdge === WebInspector.RectEdge.MAX_Y)
+            anchorPoint.x = Number.constrain(anchorPoint.x, bounds.minX() + arrowPadding, bounds.maxX() - arrowPadding);
+        else
+            anchorPoint.y = Number.constrain(anchorPoint.y, bounds.minY() + arrowPadding, bounds.maxY() - arrowPadding);
+
+        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() + cornerRadius);
+            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(), cornerRadius);
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), cornerRadius);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), cornerRadius);
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), cornerRadius);
+            break;
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            ctx.moveTo(bounds.minX(), bounds.maxY() - cornerRadius);
+            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(), cornerRadius);
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), cornerRadius);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), cornerRadius);
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), cornerRadius);
+            break;
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+            ctx.moveTo(bounds.maxX() - cornerRadius, 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(), cornerRadius);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), cornerRadius);
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), cornerRadius);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), cornerRadius);
+            break;
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            ctx.moveTo(bounds.minX() + cornerRadius, 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(), cornerRadius);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), cornerRadius);
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), cornerRadius);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), cornerRadius);
+            break;
+        }
+        ctx.closePath();
+    }
+
+    _addListenersIfNeeded()
+    {
+        if (!this._isListeningForPopoverEvents) {
+            this._isListeningForPopoverEvents = true;
+
+            window.addEventListener("mousedown", this, true);
+            window.addEventListener("scroll", this, true);
+            window.addEventListener("resize", this, true);
+            window.addEventListener("keypress", this, true);
+
+            WebInspector.quickConsole.keyboardShortcutDisabled = 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";
+WebInspector.Popover.EventPreventDismissSymbol = Symbol("popover-event-prevent-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..46e13f102
--- /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.inline = true;
+
+        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..526c19e73
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProbeSetDetailsSection.js
@@ -0,0 +1,163 @@
+/*
+ * 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.contentIdentifier, 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]);
+        popover.windowResizeHandler = () => {
+            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/ProfileDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/ProfileDataGridNode.js
new file mode 100644
index 000000000..1ab12987d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProfileDataGridNode.js
@@ -0,0 +1,269 @@
+/*
+* 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.ProfileDataGridNode = class ProfileDataGridNode extends WebInspector.DataGridNode
+{
+    constructor(callingContextTreeNode, tree)
+    {
+        super(callingContextTreeNode, false);
+
+        this._node = callingContextTreeNode;
+        this._tree = tree;
+
+        this._childrenToChargeToSelf = new Set;
+        this._extraSelfTimeFromChargedChildren = 0;
+
+        // FIXME: Make profile data grid nodes copyable.
+        this.copyable = false;
+
+        this.addEventListener("populate", this._populate, this);
+
+        this._updateChildrenForModifiers();
+        this._recalculateData();
+    }
+
+    // Public
+
+    get callingContextTreeNode() { return this._node; }
+
+    displayName()
+    {
+        let title = this._node.name;
+        if (!title)
+            return WebInspector.UIString("(anonymous function)");
+        if (title === "(program)")
+            return WebInspector.UIString("(program)");
+        return title;
+    }
+
+    iconClassName()
+    {
+        let script = WebInspector.debuggerManager.scriptForIdentifier(this._node.sourceID, WebInspector.assumingMainTarget());
+        if (!script || !script.url)
+            return "native-icon";
+        if (this._node.name === "(program)")
+            return "program-icon";
+        return "function-icon";
+    }
+
+    // Protected
+
+    get data()
+    {
+        return this._data;
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        switch (columnIdentifier) {
+        case "totalTime":
+            return this._totalTimeContent();
+        case "selfTime":
+            return Number.secondsToMillisecondsString(this._data.selfTime);
+        case "function":
+            return this._displayContent();
+        }
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+
+    sort()
+    {
+        let children = this.children;
+        children.sort(this._tree._sortComparator);
+
+        for (let i = 0; i < children.length; ++i) {
+            children[i]._recalculateSiblings(i);
+            children[i].sort();
+        }
+    }
+
+    refresh()
+    {
+        this._updateChildrenForModifiers();
+        this._recalculateData();
+
+        super.refresh();
+    }
+
+    appendContextMenuItems(contextMenu)
+    {
+        let disableFocus = this === this._tree.currentFocusNode;
+        contextMenu.appendItem(WebInspector.UIString("Focus on Subtree"), () => {
+            this._tree.addFocusNode(this);
+        }, disableFocus);
+
+        // FIXME: <https://webkit.org/b/155072> Web Inspector: Charge to Caller should work with Bottom Up Profile View
+        let disableChargeToCaller = this._tree.callingContextTree.type === WebInspector.CallingContextTree.Type.BottomUp;
+        contextMenu.appendItem(WebInspector.UIString("Charge ‘%s’ to Callers").format(this.displayName()), () => {
+            this._tree.addModifier({type: WebInspector.ProfileDataGridTree.ModifierType.ChargeToCaller, source: this._node});
+        }, disableChargeToCaller);
+
+        contextMenu.appendSeparator();
+    }
+
+    // Protected
+
+    filterableDataForColumn(columnIdentifier)
+    {
+        if (columnIdentifier === "function") {
+            let filterableData = [this.displayName()];
+            let script = WebInspector.debuggerManager.scriptForIdentifier(this._node.sourceID, WebInspector.assumingMainTarget());
+            if (script && script.url && this._node.line >= 0 && this._node.column >= 0)
+                filterableData.push(script.url);
+            return filterableData;
+        }
+
+        return super.filterableDataForColumn(columnIdentifier);
+    }
+
+    // Private
+
+    _updateChildrenForModifiers()
+    {
+        // NOTE: This currently assumes we either add modifiers or remove them all.
+        // This doesn't handle removing a single modifier and re-inserting a single child.
+
+        // FIXME: <https://webkit.org/b/155072> Web Inspector: Charge to Caller should work with Bottom Up Profile View
+        let isBottomUp = this._tree.callingContextTree.type === WebInspector.CallingContextTree.Type.BottomUp;
+        if (!this._tree.hasModifiers() || isBottomUp) {
+            // Add back child data grid nodes that were previously charged to us.
+            if (!this.shouldRefreshChildren && this._childrenToChargeToSelf.size) {
+                for (let child of this._childrenToChargeToSelf) {
+                    console.assert(child.hasStackTraceInTimeRange(this._tree.startTime, this._tree.endTime));
+                    this.appendChild(new WebInspector.ProfileDataGridNode(child, this._tree));
+                }
+
+                this.sort();
+            }
+
+            this._extraSelfTimeFromChargedChildren = 0;
+            this._childrenToChargeToSelf.clear();
+            this.hasChildren = this._node.hasChildrenInTimeRange(this._tree.startTime, this._tree.endTime);
+            return;
+        }
+
+        this._extraSelfTimeFromChargedChildren = 0;
+        this._childrenToChargeToSelf.clear();
+
+        let hasNonChargedChild = false;
+        this._node.forEachChild((child) => {
+            if (child.hasStackTraceInTimeRange(this._tree.startTime, this._tree.endTime)) {
+                for (let {type, source} of this._tree.modifiers) {
+                    if (type === WebInspector.ProfileDataGridTree.ModifierType.ChargeToCaller) {
+                        if (child.equals(source)) {
+                            this._childrenToChargeToSelf.add(child);
+                            this._extraSelfTimeFromChargedChildren += child.filteredTimestampsAndDuration(this._tree.startTime, this._tree.endTime).duration;
+                            continue;
+                        }
+                    }
+                    hasNonChargedChild = true;
+                }
+            }
+        });
+
+        this.hasChildren = hasNonChargedChild;
+
+        // Remove child data grid nodes that have been charged to us.
+        if (!this.shouldRefreshChildren && this._childrenToChargeToSelf.size) {
+            for (let childDataGridNode of this.children) {
+                if (this._childrenToChargeToSelf.has(childDataGridNode.callingContextTreeNode))
+                    this.removeChild(childDataGridNode);
+            }
+        }
+    }
+
+    _recalculateData()
+    {
+        let {timestamps, duration} = this._node.filteredTimestampsAndDuration(this._tree.startTime, this._tree.endTime);
+        let {leafTimestamps, leafDuration} = this._node.filteredLeafTimestampsAndDuration(this._tree.startTime, this._tree.endTime);
+
+        let totalTime = duration;
+        let selfTime = leafDuration + this._extraSelfTimeFromChargedChildren;
+        let fraction = totalTime / this._tree.totalSampleTime;
+
+        this._data = {totalTime, selfTime, fraction};
+    }
+
+    _totalTimeContent()
+    {
+        let {totalTime, fraction} = this._data;
+
+        let fragment = document.createDocumentFragment();
+        let timeElement = fragment.appendChild(document.createElement("span"));
+        timeElement.classList.add("time");
+        timeElement.textContent = Number.secondsToMillisecondsString(totalTime);
+        let percentElement = fragment.appendChild(document.createElement("span"));
+        percentElement.classList.add("percentage");
+        percentElement.textContent = Number.percentageString(fraction);
+        return fragment;
+    }
+
+    _displayContent()
+    {
+        let title = this.displayName();
+        let iconClassName = this.iconClassName();
+
+        let fragment = document.createDocumentFragment();
+        let iconElement = fragment.appendChild(document.createElement("img"));
+        iconElement.classList.add("icon", iconClassName);
+        let titleElement = fragment.appendChild(document.createElement("span"));
+        titleElement.textContent = title;
+
+        let script = WebInspector.debuggerManager.scriptForIdentifier(this._node.sourceID, WebInspector.assumingMainTarget());
+        if (script && script.url && this._node.line >= 0 && this._node.column >= 0) {
+            // Convert from 1-based line and column to 0-based.
+            let sourceCodeLocation = script.createSourceCodeLocation(this._node.line - 1, this._node.column - 1);
+
+            let locationElement = fragment.appendChild(document.createElement("span"));
+            locationElement.classList.add("location");
+            sourceCodeLocation.populateLiveDisplayLocationString(locationElement, "textContent", WebInspector.SourceCodeLocation.ColumnStyle.Hidden, WebInspector.SourceCodeLocation.NameStyle.Short);
+
+            let dontFloat = true;
+            let useGoToArrowButton = true;
+            let goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, dontFloat, useGoToArrowButton);
+            fragment.appendChild(goToArrowButtonLink);
+        }
+
+        return fragment;
+    }
+
+    _populate()
+    {
+        if (!this.shouldRefreshChildren)
+            return;
+
+        this.removeEventListener("populate", this._populate, this);
+
+        this._node.forEachChild((child) => {
+            if (!this._childrenToChargeToSelf.has(child)) {
+                if (child.hasStackTraceInTimeRange(this._tree.startTime, this._tree.endTime))
+                    this.appendChild(new WebInspector.ProfileDataGridNode(child, this._tree));
+            }
+        });
+
+        this.sort();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProfileDataGridTree.js b/Source/WebInspectorUI/UserInterface/Views/ProfileDataGridTree.js
new file mode 100644
index 000000000..165657c0a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProfileDataGridTree.js
@@ -0,0 +1,291 @@
+/*
+* 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.ProfileDataGridTree = class ProfileDataGridTree extends WebInspector.Object
+{
+    constructor(callingContextTree, startTime, endTime, sortComparator)
+    {
+        super();
+
+        console.assert(callingContextTree instanceof WebInspector.CallingContextTree);
+        console.assert(typeof sortComparator === "function");
+
+        this._children = [];
+        this._sortComparator = sortComparator;
+
+        this._callingContextTree = callingContextTree;
+        this._startTime = startTime;
+        this._endTime = endTime;
+        this._totalSampleTime = this._callingContextTree.totalDurationInTimeRange(startTime, endTime);
+
+        this._focusNodes = [];
+        this._modifiers = [];
+
+        this._repopulate();
+    }
+
+    // Static
+
+    static buildSortComparator(columnIdentifier, sortOrder)
+    {
+        let ascending = sortOrder === WebInspector.DataGrid.SortOrder.Ascending;
+        return function(a, b) {
+            let result = a.data[columnIdentifier] - b.data[columnIdentifier];
+            return ascending ? result : -result;
+        };
+    }
+
+    // Public
+
+    get callingContextTree() { return this._callingContextTree; }
+
+    get focusNodes()
+    {
+        return this._focusNodes;
+    }
+
+    get currentFocusNode()
+    {
+        return this._focusNodes.lastValue;
+    }
+
+    get modifiers()
+    {
+        return this._modifiers;
+    }
+
+    get startTime()
+    {
+        if (this._focusNodes.length)
+            return this._currentFocusStartTime;
+        return this._startTime;
+    }
+
+    get endTime()
+    {
+        if (this._focusNodes.length)
+            return this._currentFocusEndTime;
+        return this._endTime;
+    }
+
+    get totalSampleTime()
+    {
+        if (this._focusNodes.length)
+            return this._currentFocusTotalSampleTime;
+        return this._totalSampleTime;
+    }
+
+    get children()
+    {
+        return this._children;
+    }
+
+    appendChild(node)
+    {
+        this._children.push(node);
+    }
+
+    insertChild(node, index)
+    {
+        this._children.splice(index, 0, node);
+    }
+
+    removeChildren()
+    {
+        this._children = [];
+    }
+
+    set sortComparator(comparator)
+    {
+        this._sortComparator = comparator;
+        this.sort();
+    }
+
+    sort()
+    {
+        let children = this._children;
+        children.sort(this._sortComparator);
+
+        for (let i = 0; i < children.length; ++i) {
+            children[i]._recalculateSiblings(i);
+            children[i].sort();
+        }
+    }
+
+    refresh()
+    {
+        for (let child of this._children)
+            child.refreshRecursively();
+    }
+
+    addFocusNode(profileDataGridNode)
+    {
+        console.assert(profileDataGridNode instanceof WebInspector.ProfileDataGridNode);
+
+        // Save the original parent for when we rollback.
+        this._saveFocusedNodeOriginalParent(profileDataGridNode);
+
+        this._focusNodes.push(profileDataGridNode);
+        this._focusChanged();
+    }
+
+    rollbackFocusNode(profileDataGridNode)
+    {
+        console.assert(profileDataGridNode instanceof WebInspector.ProfileDataGridNode);
+
+        let index = this._focusNodes.indexOf(profileDataGridNode);
+        console.assert(index !== -1, "rollbackFocusNode should be rolling back to a previous focused node");
+        console.assert(index !== this._focusNodes.length - 1, "rollbackFocusNode should be rolling back to a previous focused node");
+        if (index === -1)
+            return;
+
+        this._focusParentsToExpand = [];
+
+        for (let i = index + 1; i < this._focusNodes.length; ++i)
+            this._restoreFocusedNodeToOriginalParent(this._focusNodes[i]);
+
+        // Remove everything after this node.
+        this._focusNodes.splice(index + 1);
+        this._focusChanged();
+    }
+
+    clearFocusNodes()
+    {
+        this._focusParentsToExpand = [];
+
+        for (let profileDataGridNode of this._focusNodes)
+            this._restoreFocusedNodeToOriginalParent(profileDataGridNode);
+
+        this._focusNodes = [];
+        this._focusChanged();
+    }
+
+    hasModifiers()
+    {
+        return this._modifiers.length > 0;
+    }
+
+    addModifier(modifier)
+    {
+        this._modifiers.push(modifier);
+        this._modifiersChanged();
+    }
+
+    clearModifiers()
+    {
+        this._modifiers = [];
+        this._modifiersChanged();
+    }
+
+    // Private
+
+    _repopulate()
+    {
+        this.removeChildren();
+
+        if (this._focusNodes.length) {
+            // The most recently focused node.
+            this.appendChild(this.currentFocusNode);
+        } else {
+            // All nodes in the time range in the calling context tree.
+            this._callingContextTree.forEachChild((child) => {
+                if (child.hasStackTraceInTimeRange(this._startTime, this._endTime))
+                    this.appendChild(new WebInspector.ProfileDataGridNode(child, this));
+            });
+        }
+
+        this.sort();
+    }
+
+    _focusChanged()
+    {
+        let profileDataGridNode = this.currentFocusNode;
+        if (profileDataGridNode)
+            this._updateCurrentFocusDetails(profileDataGridNode);
+
+        // FIXME: This re-creates top level children, without remembering their expanded / unexpanded state.
+        this._repopulate();
+
+        this.dispatchEventToListeners(WebInspector.ProfileDataGridTree.Event.FocusChanged);
+
+        if (this._focusParentsToExpand) {
+            for (let profileDataGridNode of this._focusParentsToExpand)
+                profileDataGridNode.expand();
+            this._focusParentsToExpand = null;
+        }
+    }
+
+    _updateCurrentFocusDetails(focusDataGridNode)
+    {
+        let {timestamps, duration} = focusDataGridNode.callingContextTreeNode.filteredTimestampsAndDuration(this._startTime, this._endTime);
+
+        this._currentFocusStartTime = timestamps[0];
+        this._currentFocusEndTime = timestamps.lastValue;
+        this._currentFocusTotalSampleTime = duration;
+    }
+
+    _saveFocusedNodeOriginalParent(focusDataGridNode)
+    {
+        focusDataGridNode.__previousParent = focusDataGridNode.parent;
+        focusDataGridNode.__previousParent.removeChild(focusDataGridNode);
+    }
+
+    _restoreFocusedNodeToOriginalParent(focusDataGridNode)
+    {
+        // NOTE: A DataGridTree maintains a list of children but those
+        // children get adopted by the DataGrid in ProfileView and
+        // actually displayed. When we focused this DataGridNode, its
+        // parent was removed from the real DataGrid, but if it was not
+        // at the top level it was not detached. When we re-append
+        // ourselves onto the previous parent, if it still thinks it is
+        // attached and expanded it will attach us immediately, which
+        // can create an orphaned <tr> in the DataGrid that is not one
+        // of the DataGrid's immediate children.
+        //
+        // Workaround this by:
+        //   - collapsing our parent to prevent attaching when we get added.
+        //   - reparent to our previous parent.
+        //   - expanding our parent after the DataGrid has had a chance to update.
+        focusDataGridNode.__previousParent.collapse();
+        this._focusParentsToExpand.push(focusDataGridNode.__previousParent);
+
+        focusDataGridNode.__previousParent.appendChild(focusDataGridNode);
+        focusDataGridNode.__previousParent = undefined;
+    }
+
+    _modifiersChanged()
+    {
+        this.dispatchEventToListeners(WebInspector.ProfileDataGridTree.Event.ModifiersChanged);
+    }
+};
+
+WebInspector.ProfileDataGridTree.Event = {
+    FocusChanged: "profile-data-grid-tree-focus-changed",
+    ModifiersChanged: "profile-data-grid-tree-modifiers-changed",
+};
+
+WebInspector.ProfileDataGridTree.ModifierType = {
+    ChargeToCaller: "charge",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProfileNodeDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/ProfileNodeDataGridNode.js
new file mode 100644
index 000000000..b620a4c33
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProfileNodeDataGridNode.js
@@ -0,0 +1,191 @@
+/*
+ * 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._cachedData = null;
+
+        this.addEventListener("populate", this._populate, this);
+    }
+
+    // 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()
+    {
+        if (!this._cachedData) {
+            this._cachedData = this._profileNode.computeCallInfoForTimeRange(this._rangeStartTime, this._rangeEndTime);
+            this._cachedData.name = this.displayName();
+            this._cachedData.location = this._profileNode.sourceCodeLocation;
+        }
+
+        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;
+
+        // 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 "name":
+            cell.classList.add(...this.iconClassNames());
+            return value;
+
+        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);
+    }
+
+    displayName()
+    {
+        let title = this._profileNode.functionName;
+        if (!title) {
+            switch (this._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: " + this._profileNode.type);
+            }
+        }
+
+        return title;
+    }
+
+    iconClassNames()
+    {
+        let className;
+        switch (this._profileNode.type) {
+        case WebInspector.ProfileNode.Type.Function:
+            className = WebInspector.CallFrameView.FunctionIconStyleClassName;
+            if (!this._profileNode.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 (this._profileNode.functionName && this._profileNode.functionName.startsWith("on") && this._profileNode.functionName.length >= 5)
+            className = WebInspector.CallFrameView.EventListenerIconStyleClassName;
+
+        return [className];
+    }
+
+    // Private
+
+    _populate()
+    {
+        if (!this.shouldRefreshChildren)
+            return;
+
+        this.removeEventListener("populate", this._populate, this);
+        this.removeChildren();
+
+        for (let node of this._profileNode.childNodes)
+            this.appendChild(new WebInspector.ProfileNodeDataGridNode(node, this.baseStartTime, this.rangeStartTime, this.rangeEndTime));
+    }
+};
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/ProfileView.css b/Source/WebInspectorUI/UserInterface/Views/ProfileView.css
new file mode 100644
index 000000000..711bfdd8b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProfileView.css
@@ -0,0 +1,105 @@
+/*
+* 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.
+*/
+
+.profile > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.profile > .data-grid td .icon {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    margin-right: 3px;
+}
+
+.profile > .data-grid td .percentage {
+    width: 45px;
+    margin-left: 4px;
+    display: inline-block;
+}
+
+.profile > .data-grid td .location {
+    margin-left: 1ex;
+    color: hsl(0, 0%, 60%);
+}
+
+.profile > .data-grid:matches(:focus, .force-focus) tr.selected td .location {
+    color: hsl(0, 0%, 85%);
+}
+
+.profile > .data-grid td .icon.function-icon {
+    content: url(../Images/Function.svg);
+}
+
+.profile > .data-grid td .icon.native-icon {
+    content: url(../Images/Native.svg);
+}
+
+.profile > .data-grid td .icon.program-icon {
+    content: url(../Images/Program.svg);
+}
+
+.profile > .data-grid tr:matches(.selected, :hover) .go-to-arrow {
+    float: none;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    width: 16px;
+    height: 16px;
+    margin-left: 2px;
+}
+
+.profile > .data-grid td.function-column {
+    position: relative;
+}
+
+.profile > .data-grid td .guidance {
+    width: 10px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    background-color: hsla(0, 0%, 50%, 0.4);
+}
+
+.profile > .data-grid td .guidance.hover {
+    background-color: hsla(0, 0%, 50%, 0.2);
+}
+
+.profile > .data-grid td .guidance.base {
+    height: 70%;
+    top: 30%;
+}
+
+.profile > .data-grid tr:not(.expanded) td .guidance.base {
+    display: none;
+}
+
+.profile > .data-grid tr.expanded td .guidance.base {
+    display: block;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProfileView.js b/Source/WebInspectorUI/UserInterface/Views/ProfileView.js
new file mode 100644
index 000000000..b6a503a14
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProfileView.js
@@ -0,0 +1,308 @@
+/*
+* 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.ProfileView = class ProfileView extends WebInspector.ContentView
+{
+    constructor(callingContextTree, extraArguments)
+    {
+        super(callingContextTree);
+
+        console.assert(callingContextTree instanceof WebInspector.CallingContextTree);
+
+        this._startTime = 0;
+        this._endTime = Infinity;
+        this._callingContextTree = callingContextTree;
+
+        this._hoveredDataGridNode = null;
+
+        this.element.classList.add("profile");
+
+        let columns = {
+            totalTime: {
+                title: WebInspector.UIString("Total Time"),
+                width: "120px",
+                sortable: true,
+                aligned: "right",
+            },
+            selfTime: {
+                title: WebInspector.UIString("Self Time"),
+                width: "75px",
+                sortable: true,
+                aligned: "right",
+            },
+            function: {
+                title: WebInspector.UIString("Function"),
+                disclosure: true,
+            },
+        };
+
+        this._dataGrid = new WebInspector.DataGrid(columns);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._dataGridSortChanged, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.ExpandedNode, this._dataGridNodeExpanded, this);
+        this._dataGrid.element.addEventListener("mouseover", this._mouseOverDataGrid.bind(this));
+        this._dataGrid.element.addEventListener("mouseleave", this._mouseLeaveDataGrid.bind(this));
+        this._dataGrid.indentWidth = 20;
+        this._dataGrid.sortColumnIdentifier = "totalTime";
+        this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Descending;
+        this._dataGrid.createSettings("profile-view");
+
+        // Currently we create a new ProfileView for each CallingContextTree, so
+        // to share state between them, use a common shared data object.
+        this._sharedData = extraArguments;
+
+        this.addSubview(this._dataGrid);
+    }
+
+    // Public
+
+    get callingContextTree() { return this._callingContextTree; }
+    get startTime() { return this._startTime; }
+    get endTime() { return this._endTime; }
+    get dataGrid() { return this._dataGrid; }
+
+    setStartAndEndTime(startTime, endTime)
+    {
+        console.assert(startTime >= 0);
+        console.assert(endTime >= 0);
+        console.assert(startTime <= endTime);
+
+        this._startTime = startTime;
+        this._endTime = endTime;
+
+        // FIXME: It would be ideal to update the existing tree, maintaining nodes that were expanded.
+        // For now just recreate the tree for the new time range.
+
+        this._recreate();
+    }
+
+    hasFocusNodes()
+    {
+        if (!this._profileDataGridTree)
+            return false;
+        return this._profileDataGridTree.focusNodes.length > 0;
+    }
+
+    clearFocusNodes()
+    {
+        if (!this._profileDataGridTree)
+            return;
+        this._profileDataGridTree.clearFocusNodes();
+    }
+
+    get scrollableElements()
+    {
+        return [this._dataGrid.scrollContainer];
+    }
+
+    // Protected
+
+    get selectionPathComponents()
+    {
+        let pathComponents = [];
+
+        if (this._profileDataGridTree) {
+            for (let profileDataGridNode of this._profileDataGridTree.focusNodes) {
+                let displayName = profileDataGridNode.displayName();
+                let className = profileDataGridNode.iconClassName();
+                let pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, profileDataGridNode);
+                pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._pathComponentClicked, this);
+                pathComponents.push(pathComponent);
+            }
+        }
+
+        return pathComponents;
+    }
+
+    // Private
+
+    _recreate()
+    {
+        let hadFocusNodes = this.hasFocusNodes();
+
+        let sortComparator = WebInspector.ProfileDataGridTree.buildSortComparator(this._dataGrid.sortColumnIdentifier, this._dataGrid.sortOrder);
+        this._profileDataGridTree = new WebInspector.ProfileDataGridTree(this._callingContextTree, this._startTime, this._endTime, sortComparator);
+        this._profileDataGridTree.addEventListener(WebInspector.ProfileDataGridTree.Event.FocusChanged, this._dataGridTreeFocusChanged, this);
+        this._profileDataGridTree.addEventListener(WebInspector.ProfileDataGridTree.Event.ModifiersChanged, this._dataGridTreeModifiersChanged, this);
+        this._repopulateDataGridFromTree();
+
+        if (hadFocusNodes)
+            this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _repopulateDataGridFromTree()
+    {
+        this._dataGrid.removeChildren();
+
+        for (let child of this._profileDataGridTree.children)
+            this._dataGrid.appendChild(child);
+
+        this._restoreSharedState();
+    }
+
+    _restoreSharedState()
+    {
+        const skipHidden = false;
+        const stayWithin = this._dataGrid;
+        const dontPopulate = true;
+
+        if (this._sharedData.selectedNodeHash) {
+            let nodeToSelect = this._dataGrid.findNode((node) => node.callingContextTreeNode.hash === this._sharedData.selectedNodeHash, skipHidden, stayWithin, dontPopulate);
+            if (nodeToSelect)
+                nodeToSelect.revealAndSelect();
+        }
+    }
+
+    _pathComponentClicked(event)
+    {
+        if (!event.data.pathComponent)
+            return;
+
+        let profileDataGridNode = event.data.pathComponent.representedObject;
+        if (profileDataGridNode === this._profileDataGridTree.currentFocusNode)
+            return;
+
+        this._profileDataGridTree.rollbackFocusNode(event.data.pathComponent.representedObject);
+    }
+
+    _dataGridTreeFocusChanged(event)
+    {
+        this._repopulateDataGridFromTree();
+        this._profileDataGridTree.refresh();
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _dataGridTreeModifiersChanged(event)
+    {
+        this._profileDataGridTree.refresh();
+    }
+
+    _dataGridSortChanged()
+    {
+        if (!this._profileDataGridTree)
+            return;
+
+        this._profileDataGridTree.sortComparator = WebInspector.ProfileDataGridTree.buildSortComparator(this._dataGrid.sortColumnIdentifier, this._dataGrid.sortOrder);
+        this._repopulateDataGridFromTree();
+    }
+
+    _dataGridNodeSelected(event)
+    {
+        let oldSelectedNode = event.data.oldSelectedNode;
+        if (oldSelectedNode) {
+            this._removeGuidanceElement(WebInspector.ProfileView.GuidanceType.Selected, oldSelectedNode);
+            oldSelectedNode.forEachChildInSubtree((node) => this._removeGuidanceElement(WebInspector.ProfileView.GuidanceType.Selected, node));
+        }
+
+        let newSelectedNode = this._dataGrid.selectedNode;
+        if (newSelectedNode) {
+            this._removeGuidanceElement(WebInspector.ProfileView.GuidanceType.Selected, newSelectedNode);
+            newSelectedNode.forEachChildInSubtree((node) => this._appendGuidanceElement(WebInspector.ProfileView.GuidanceType.Selected, node, newSelectedNode));
+
+            this._sharedData.selectedNodeHash = newSelectedNode.callingContextTreeNode.hash;
+        }
+    }
+
+    _dataGridNodeExpanded(event)
+    {
+        let expandedNode = event.data.dataGridNode;
+
+        if (this._dataGrid.selectedNode) {
+            if (expandedNode.isInSubtreeOfNode(this._dataGrid.selectedNode))
+                expandedNode.forEachImmediateChild((node) => this._appendGuidanceElement(WebInspector.ProfileView.GuidanceType.Selected, node, this._dataGrid.selectedNode));
+        }
+
+        if (this._hoveredDataGridNode) {
+            if (expandedNode.isInSubtreeOfNode(this._hoveredDataGridNode))
+                expandedNode.forEachImmediateChild((node) => this._appendGuidanceElement(WebInspector.ProfileView.GuidanceType.Hover, node, this._hoveredDataGridNode));
+        }
+    }
+
+    _mouseOverDataGrid(event)
+    {
+        let hoveredDataGridNode = this._dataGrid.dataGridNodeFromNode(event.target);
+        if (hoveredDataGridNode === this._hoveredDataGridNode)
+            return;
+
+        if (this._hoveredDataGridNode) {
+            this._removeGuidanceElement(WebInspector.ProfileView.GuidanceType.Hover, this._hoveredDataGridNode);
+            this._hoveredDataGridNode.forEachChildInSubtree((node) => this._removeGuidanceElement(WebInspector.ProfileView.GuidanceType.Hover, node));
+        }
+
+        this._hoveredDataGridNode = hoveredDataGridNode;
+
+        if (this._hoveredDataGridNode) {
+            this._appendGuidanceElement(WebInspector.ProfileView.GuidanceType.Hover, this._hoveredDataGridNode, this._hoveredDataGridNode);
+            this._hoveredDataGridNode.forEachChildInSubtree((node) => this._appendGuidanceElement(WebInspector.ProfileView.GuidanceType.Hover, node, this._hoveredDataGridNode));
+        }
+    }
+
+    _mouseLeaveDataGrid(event)
+    {
+        if (!this._hoveredDataGridNode)
+            return;
+
+        this._removeGuidanceElement(WebInspector.ProfileView.GuidanceType.Hover, this._hoveredDataGridNode);
+        this._hoveredDataGridNode.forEachChildInSubtree((node) => this._removeGuidanceElement(WebInspector.ProfileView.GuidanceType.Hover, node));
+
+        this._hoveredDataGridNode = null;
+    }
+
+    _guidanceElementKey(type)
+    {
+        return "guidance-element-" + type;
+    }
+
+    _removeGuidanceElement(type, node)
+    {
+        let key = this._guidanceElementKey(type);
+        let element = node.elementWithColumnIdentifier("function");
+        if (!element || !element[key])
+            return;
+
+        element[key].remove();
+        element[key] = null;
+    }
+
+    _appendGuidanceElement(type, node, baseElement)
+    {
+        let depth = baseElement.depth;
+        let guidanceMarkerLeft = depth ? (depth * this._dataGrid.indentWidth) + 1.5 : 7.5;
+
+        let key = this._guidanceElementKey(type);
+        let element = node.elementWithColumnIdentifier("function");
+        let guidanceElement = element[key] || element.appendChild(document.createElement("div"));
+        element[key] = guidanceElement;
+        guidanceElement.classList.add("guidance", type);
+        guidanceElement.classList.toggle("base", node === baseElement);
+        guidanceElement.style.left = guidanceMarkerLeft + "px";
+    }
+};
+
+WebInspector.ProfileView.GuidanceType = {
+    Selected: "selected",
+    Hover: "hover",
+};
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..6ec9e77c0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js
@@ -0,0 +1,361 @@
+/*
+ * 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.QuickConsole = class QuickConsole extends WebInspector.View
+{
+    constructor(element)
+    {
+        super(element);
+
+        this._toggleOrFocusKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._toggleOrFocus.bind(this));
+
+        this._mainExecutionContextPathComponent = this._createExecutionContextPathComponent(WebInspector.mainTarget.executionContext);
+
+        this._otherExecutionContextPathComponents = [];
+        this._frameToPathComponent = new Map;
+        this._targetToPathComponent = new Map;
+
+        this._restoreSelectedExecutionContextForFrame = false;
+
+        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);
+
+        WebInspector.runtimeManager.addEventListener(WebInspector.RuntimeManager.Event.ActiveExecutionContextChanged, this._activeExecutionContextChanged, this);
+
+        WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Event.TargetAdded, this._targetAdded, this);
+        WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Event.TargetRemoved, this._targetRemoved, this);
+    }
+
+    // Public
+
+    get navigationBar()
+    {
+        return this._navigationBar;
+    }
+
+    get selectedExecutionContext()
+    {
+        return WebInspector.runtimeManager.activeExecutionContext;
+    }
+
+    set selectedExecutionContext(executionContext)
+    {
+        WebInspector.runtimeManager.activeExecutionContext = executionContext;
+    }
+
+    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);
+    }
+
+    set keyboardShortcutDisabled(disabled)
+    {
+        this._toggleOrFocusKeyboardShortcut.disabled = disabled;
+    }
+
+    // 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 ExecutionContext, don't show the selector.
+        if (!this._otherExecutionContextPathComponents.length)
+            return [];
+
+        if (this.selectedExecutionContext === WebInspector.mainTarget.executionContext)
+            return [this._mainExecutionContextPathComponent];
+
+        return this._otherExecutionContextPathComponents.filter((component) => component.representedObject === this.selectedExecutionContext);
+    }
+
+    _rebuildExecutionContextPathComponents()
+    {
+        let components = this._executionContextPathComponentsToDisplay();
+        let isEmpty = !components.length;
+
+        this._executionContextSelectorItem.components = components;
+
+        this._executionContextSelectorItem.hidden = isEmpty;
+        this._executionContextSelectorDivider.hidden = isEmpty;
+    }
+
+    _framePageExecutionContextsChanged(event)
+    {
+        let frame = event.target;
+
+        let shouldAutomaticallySelect = this._restoreSelectedExecutionContextForFrame === frame;
+
+        let newExecutionContextPathComponent = this._insertExecutionContextPathComponentForFrame(frame, shouldAutomaticallySelect);
+
+        if (shouldAutomaticallySelect) {
+            this._restoreSelectedExecutionContextForFrame = null;
+            this.selectedExecutionContext = newExecutionContextPathComponent.representedObject;
+        }
+    }
+
+    _frameExecutionContextsCleared(event)
+    {
+        let 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) {
+            let executionContextPathComponent = this._frameToPathComponent.get(frame);
+            if (executionContextPathComponent && executionContextPathComponent.representedObject === this.selectedExecutionContext) {
+                this._restoreSelectedExecutionContextForFrame = frame;
+                // As a fail safe, if the frame never gets an execution context, clear the restore value.
+                setTimeout(() => { this._restoreSelectedExecutionContextForFrame = false; }, 10);
+            }
+        }
+
+        this._removeExecutionContextPathComponentForFrame(frame);
+    }
+
+    _activeExecutionContextChanged(event)
+    {
+        this._rebuildExecutionContextPathComponents();
+    }
+
+    _createExecutionContextPathComponent(executionContext, preferredName)
+    {
+        console.assert(executionContext instanceof WebInspector.ExecutionContext);
+
+        let pathComponent = new WebInspector.HierarchicalPathComponent(preferredName || executionContext.name, "execution-context", executionContext, true, true);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._pathComponentClicked, this);
+        pathComponent.truncatedDisplayNameLength = 50;
+        return pathComponent;
+    }
+
+    _createExecutionContextPathComponentFromFrame(frame)
+    {
+        let preferredName = frame.name ? frame.name + " \u2014 " + frame.mainResource.displayName : frame.mainResource.displayName;
+        return this._createExecutionContextPathComponent(frame.pageExecutionContext, preferredName);
+    }
+
+    _compareExecutionContextPathComponents(a, b)
+    {
+        let aExecutionContext = a.representedObject;
+        let bExecutionContext = b.representedObject;
+
+        // "Targets" (workers) at the top.
+        let aNonMainTarget = aExecutionContext.target !== WebInspector.mainTarget;
+        let bNonMainTarget = bExecutionContext.target !== WebInspector.mainTarget;
+        if (aNonMainTarget && !bNonMainTarget)
+            return -1;
+        if (bNonMainTarget && !aNonMainTarget)
+            return 1;
+        if (aNonMainTarget && bNonMainTarget)
+            return a.displayName.localeCompare(b.displayName);
+
+        // "Main Frame" follows.
+        if (aExecutionContext === WebInspector.mainTarget.executionContext)
+            return -1;
+        if (bExecutionContext === WebInspector.mainTarget.executionContext)
+            return 1;
+
+        // Only Frame contexts remain.
+        console.assert(aExecutionContext.frame);
+        console.assert(bExecutionContext.frame);
+
+        // Frames with a name above frames without a name.
+        if (aExecutionContext.frame.name && !bExecutionContext.frame.name)
+            return -1;
+        if (!aExecutionContext.frame.name && bExecutionContext.frame.name)
+            return 1;
+
+        return a.displayName.localeCompare(b.displayName);
+    }
+
+    _insertOtherExecutionContextPathComponent(executionContextPathComponent, skipRebuild)
+    {
+        let index = insertionIndexForObjectInListSortedByFunction(executionContextPathComponent, this._otherExecutionContextPathComponents, this._compareExecutionContextPathComponents);
+
+        let prev = index > 0 ? this._otherExecutionContextPathComponents[index - 1] : this._mainExecutionContextPathComponent;
+        let 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);
+
+        if (!skipRebuild)
+            this._rebuildExecutionContextPathComponents();
+    }
+
+    _removeOtherExecutionContextPathComponent(executionContextPathComponent, skipRebuild)
+    {
+        executionContextPathComponent.removeEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+        executionContextPathComponent.removeEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._pathComponentClicked, this);
+
+        let prev = executionContextPathComponent.previousSibling;
+        let next = executionContextPathComponent.nextSibling;
+        if (prev)
+            prev.nextSibling = next;
+        if (next)
+            next.previousSibling = prev;
+
+        this._otherExecutionContextPathComponents.remove(executionContextPathComponent, true);
+
+        if (!skipRebuild)
+            this._rebuildExecutionContextPathComponents();
+    }
+
+    _insertExecutionContextPathComponentForFrame(frame, skipRebuild)
+    {
+        if (frame.isMainFrame())
+            return this._mainExecutionContextPathComponent;
+
+        let executionContextPathComponent = this._createExecutionContextPathComponentFromFrame(frame);
+        this._insertOtherExecutionContextPathComponent(executionContextPathComponent, skipRebuild);
+        this._frameToPathComponent.set(frame, executionContextPathComponent);
+
+        return executionContextPathComponent;
+    }
+
+    _removeExecutionContextPathComponentForFrame(frame, skipRebuild)
+    {
+        if (frame.isMainFrame())
+            return;
+
+        let executionContextPathComponent = this._frameToPathComponent.take(frame);
+        this._removeOtherExecutionContextPathComponent(executionContextPathComponent, skipRebuild);
+    }
+
+    _targetAdded(event)
+    {
+        let target = event.data.target;
+        console.assert(target.type === WebInspector.Target.Type.Worker);
+        let preferredName = WebInspector.UIString("Worker \u2014 %s").format(target.displayName);
+        let executionContextPathComponent = this._createExecutionContextPathComponent(target.executionContext, preferredName);
+
+        this._targetToPathComponent.set(target, executionContextPathComponent);
+        this._insertOtherExecutionContextPathComponent(executionContextPathComponent);
+    }
+
+    _targetRemoved(event)
+    {
+        let target = event.data.target;
+        let executionContextPathComponent = this._targetToPathComponent.take(target);
+        this._removeOtherExecutionContextPathComponent(executionContextPathComponent);
+
+        if (this.selectedExecutionContext === executionContextPathComponent.representedObject)
+            this.selectedExecutionContext = WebInspector.mainTarget.executionContext;
+    }
+
+    _pathComponentSelected(event)
+    {
+        let executionContext = event.data.pathComponent.representedObject;
+        this.selectedExecutionContext = executionContext;
+    }
+
+    _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.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..c2be0bf0b
--- /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: var(--selected-foreground-color);
+    background-color: var(--selected-background-color-hover);
+}
+
+.navigation-bar .item.radio.button.text-only.selected {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color);
+}
+
+.navigation-bar .item.radio.button.text-only:active {
+    color: var(--selected-foreground-color);
+    background-color: hsla(212, 92%, 54%, 0.55);
+}
+
+.navigation-bar .item.radio.button.text-only.selected:active {
+    background-color: var(--selected-background-color-active);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.js
new file mode 100644
index 000000000..4ceac6daf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.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.RadioButtonNavigationItem = class RadioButtonNavigationItem extends WebInspector.ButtonNavigationItem
+{
+    constructor(identifier, toolTip, image, imageWidth, imageHeight)
+    {
+        super(identifier, toolTip, image, imageWidth, imageHeight, null, "tab");
+
+        this._initializedMinWidth = false;
+    }
+
+    // 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");
+        }
+
+        if (!this._initializedMinWidth) {
+            var width = this.element.offsetWidth;
+            if (width) {
+                this._initializedMinWidth = true;
+                this.element.style.minWidth = width + "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..38ecbf468
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.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.RenderingFrameTimelineDataGridNode = class RenderingFrameTimelineDataGridNode extends WebInspector.TimelineDataGridNode
+{
+    constructor(renderingFrameTimelineRecord, baseStartTime)
+    {
+        super(false, null);
+
+        this._record = renderingFrameTimelineRecord;
+        this._baseStartTime = baseStartTime || 0;
+    }
+
+    // Public
+
+    get records()
+    {
+        return [this._record];
+    }
+
+    get data()
+    {
+        if (!this._cachedData) {
+            let name = WebInspector.TimelineTabContentView.displayNameForRecord(this._record);
+            let scriptTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Script);
+            let layoutTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Layout);
+            let paintTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint);
+            let otherTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Other);
+            this._cachedData = {
+                name,
+                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 "name":
+            cell.classList.add(...this.iconClassNames());
+            return value;
+
+        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..0f609387a
--- /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: linear-gradient(to right, 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: linear-gradient(to right, 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..5a74257d0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js
@@ -0,0 +1,276 @@
+/*
+ * 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.visible)
+            return;
+
+        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;
+
+        let overviewGraphHeight = this.height;
+
+        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);
+            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;
+    }
+
+    _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;
+
+        if (this.selectedRecord === newSelectedRecord)
+            return;
+
+        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..5b7289007
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js
@@ -0,0 +1,307 @@
+/*
+ * 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);
+
+        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 = {name: {}, totalTime: {}, scriptTime: {}, layoutTime: {}, paintTime: {}, otherTime: {}, startTime: {}, location: {}};
+
+        columns.name.title = WebInspector.UIString("Name");
+        columns.name.width = "20%";
+        columns.name.icon = true;
+        columns.name.disclosure = true;
+        columns.name.locked = true;
+
+        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(columns);
+        this._dataGrid.sortColumnIdentifier = "startTime";
+        this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+        this._dataGrid.createSettings("rendering-frame-timeline-view");
+
+        this.setupDataGrid(this._dataGrid);
+
+        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 showsLiveRecordingData() { return false; }
+
+    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()
+    {
+        let dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode || dataGridNode.hidden)
+            return null;
+
+        let pathComponents = [];
+
+        while (dataGridNode && !dataGridNode.root) {
+            console.assert(dataGridNode instanceof WebInspector.TimelineDataGridNode);
+            if (dataGridNode.hidden)
+                return null;
+
+            let pathComponent = new WebInspector.TimelineDataGridNodePathComponent(dataGridNode);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.dataGridNodePathComponentSelected, this);
+            pathComponents.unshift(pathComponent);
+            dataGridNode = dataGridNode.parent;
+        }
+
+        return pathComponents;
+    }
+
+    get filterStartTime()
+    {
+        let records = this.representedObject.records;
+        let startIndex = this.startTime;
+        if (startIndex >= records.length)
+            return Infinity;
+
+        return records[startIndex].startTime;
+    }
+
+    get filterEndTime()
+    {
+        let records = this.representedObject.records;
+        let endIndex = this.endTime - 1;
+        if (endIndex >= records.length)
+            return Infinity;
+
+        return records[endIndex].endTime;
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._dataGrid.reset();
+
+        this._pendingRecords = [];
+    }
+
+    // Protected
+
+    dataGridNodePathComponentSelected(event)
+    {
+        let dataGridNode = event.data.pathComponent.timelineDataGridNode;
+        console.assert(dataGridNode.dataGrid === this._dataGrid);
+
+        dataGridNode.revealAndSelect();
+    }
+
+    dataGridNodeForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ProfileNodeTreeElement)
+            return new WebInspector.ProfileNodeDataGridNode(treeElement.profileNode, this.zeroTime, this.startTime, this.endTime);
+        return null;
+    }
+
+    matchDataGridNodeAgainstCustomFilters(node)
+    {
+        if (!super.matchDataGridNodeAgainstCustomFilters(node))
+            return false;
+
+        console.assert(node instanceof WebInspector.TimelineDataGridNode);
+        console.assert(this._scopeBar.selectedItems.length === 1);
+        let selectedScopeBarItem = this._scopeBar.selectedItems[0];
+        if (!selectedScopeBarItem || selectedScopeBarItem.id === WebInspector.RenderingFrameTimelineView.DurationFilter.All)
+            return true;
+
+        while (node && !(node.record instanceof WebInspector.RenderingFrameTimelineRecord))
+            node = node.parent;
+
+        console.assert(node, "Cannot apply duration filter: no RenderingFrameTimelineRecord found.");
+        if (!node)
+            return false;
+
+        let minimumDuration = selectedScopeBarItem.id === WebInspector.RenderingFrameTimelineView.DurationFilter.OverOneMillisecond ? 0.001 : 0.015;
+        return node.record.duration > minimumDuration;
+    }
+
+    layout()
+    {
+        this._processPendingRecords();
+    }
+
+    // Private
+
+    _processPendingRecords()
+    {
+        if (!this._pendingRecords.length)
+            return;
+
+        for (let renderingFrameTimelineRecord of this._pendingRecords) {
+            console.assert(renderingFrameTimelineRecord instanceof WebInspector.RenderingFrameTimelineRecord);
+
+            let dataGridNode = new WebInspector.RenderingFrameTimelineDataGridNode(renderingFrameTimelineRecord, this.zeroTime);
+            this._dataGrid.addRowInSortOrder(null, dataGridNode);
+
+            let stack = [{children: renderingFrameTimelineRecord.children, parentDataGridNode: dataGridNode, index: 0}];
+            while (stack.length) {
+                let entry = stack.lastValue;
+                if (entry.index >= entry.children.length) {
+                    stack.pop();
+                    continue;
+                }
+
+                let childRecord = entry.children[entry.index];
+                let childDataGridNode = null;
+                if (childRecord.type === WebInspector.TimelineRecord.Type.Layout) {
+                    childDataGridNode = new WebInspector.LayoutTimelineDataGridNode(childRecord, this.zeroTime);
+
+                    this._dataGrid.addRowInSortOrder(null, childDataGridNode, entry.parentDataGridNode);
+                } else if (childRecord.type === WebInspector.TimelineRecord.Type.Script) {
+                    let rootNodes = [];
+                    if (childRecord.profile) {
+                        // FIXME: Support using the bottom-up tree once it is implemented.
+                        rootNodes = childRecord.profile.topDownRootNodes;
+                    }
+
+                    childDataGridNode = new WebInspector.ScriptTimelineDataGridNode(childRecord, this.zeroTime);
+
+                    this._dataGrid.addRowInSortOrder(null, childDataGridNode, entry.parentDataGridNode);
+
+                    for (let profileNode of rootNodes) {
+                        let profileNodeDataGridNode = new WebInspector.ProfileNodeDataGridNode(profileNode, this.zeroTime, this.startTime, this.endTime);
+                        this._dataGrid.addRowInSortOrder(null, profileNodeDataGridNode, childDataGridNode);
+                    }
+                }
+
+                if (childDataGridNode && childRecord.children.length)
+                    stack.push({children: childRecord.children, parentDataGridNode: childDataGridNode, 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();
+    }
+
+    _scopeBarSelectionDidChange()
+    {
+        this._dataGrid.filterDidChange();
+    }
+};
+
+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..3f084df9a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceClusterContentView.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.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:
+            this._responseContentView = new WebInspector.TextResourceContentView(this._resource);
+            break;
+
+        case WebInspector.Resource.Type.XHR:
+        case WebInspector.Resource.Type.Fetch:
+            // FIXME: <https://webkit.org/b/165495> Web Inspector: XHR / Fetch for non-text content should not show garbled text
+            // XHR / Fetch content may not always be text.
+            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..db1417a90
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceContentView.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.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()
+    {
+        super.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));
+
+        this.dispatchEventToListeners(WebInspector.ResourceContentView.Event.ContentError);
+    }
+
+    _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;
+        if (!WebInspector.IssueManager.issueMatchSourceCode(issue, this.resource))
+            return;
+
+        this.addIssue(issue);
+    }
+
+    _mouseWasClicked(event)
+    {
+        WebInspector.handlePossibleLinkClick(event, this.resource.parentFrame);
+    }
+};
+
+WebInspector.ResourceContentView.Event = {
+    ContentError: "resource-content-view-content-error",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js
new file mode 100644
index 000000000..fe193f608
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js
@@ -0,0 +1,508 @@
+/*
+ * 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 (let object of objects) {
+            if (object instanceof WebInspector.Resource) {
+                resourceToInspect = object;
+                break;
+            }
+
+            if (object instanceof WebInspector.Frame) {
+                resourceToInspect = object.mainResource;
+                break;
+            }
+
+            // FIXME: <https://webkit.org/b/164427> Web Inspector: WorkerTarget's mainResource should be a Resource not a Script
+            // If that was the case, then we could just have WorkerTreeElement contain the Resource and not a Script.
+            if (object instanceof WebInspector.Script && object.isMainResource() && object.resource) {
+                resourceToInspect = object.resource;
+                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.needsLayout();
+    }
+
+    // Protected
+
+    layout()
+    {
+        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}
+        });
+        dataGrid.copyTextDelimiter = ": ";
+
+        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((size) => {
+            this._imageWidthRow.value = WebInspector.UIString("%dpx").format(size.width);
+            this._imageHeightRow.value = WebInspector.UIString("%dpx").format(size.height);
+        });
+    }
+
+    _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..e4beda5ae
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css
@@ -0,0 +1,114 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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: image-set(url(../Images/DocumentGeneric.png) 1x, url(../Images/DocumentGeneric@2x.png) 2x);
+}
+
+.resource-icon.resource-type-document .icon {
+    content: image-set(url(../Images/DocumentMarkup.png) 1x, url(../Images/DocumentMarkup@2x.png) 2x);
+}
+
+.resource-icon.resource-type-image .icon {
+    content: image-set(url(../Images/DocumentImage.png) 1x, url(../Images/DocumentImage@2x.png) 2x);
+}
+
+.resource-icon.resource-type-font .icon {
+    content: image-set(url(../Images/DocumentFont.png) 1x, url(../Images/DocumentFont@2x.png) 2x);
+}
+
+.resource-icon.resource-type-stylesheet .icon {
+    content: image-set(url(../Images/DocumentCSS.png) 1x, url(../Images/DocumentCSS@2x.png) 2x);
+}
+
+.resource-icon.resource-type-script .icon {
+    content: image-set(url(../Images/DocumentJS.png) 1x, url(../Images/DocumentJS@2x.png) 2x);
+}
+
+.anonymous-script-icon .icon {
+    content: image-set(url(../Images/ClippingJS.png) 1x, url(../Images/ClippingJS@2x.png) 2x);
+}
+
+.source-map-resource.resource-icon .icon {
+    content: image-set(url(../Images/ClippingGeneric.png) 1x, url(../Images/ClippingGeneric@2x.png) 2x);
+}
+
+.source-map-resource.resource-icon.resource-type-stylesheet .icon {
+    content: image-set(url(../Images/ClippingCSS.png) 1x, url(../Images/ClippingCSS@2x.png) 2x);
+}
+
+.source-map-resource.resource-icon.resource-type-script .icon {
+    content: image-set(url(../Images/ClippingJS.png) 1x, url(../Images/ClippingJS@2x.png) 2x);
+}
+
+/* FIXME: <https://webkit.org/b/164138> [GTK] Web Inspector: Add new GTK+ icons for Worker Scripts */
+body:matches(.mac-platform, .windows-platform) .script.worker-icon .icon {
+    content: image-set(url(../Images/WorkerScript.png) 1x, url(../Images/WorkerScript@2x.png) 2x);
+}
+
+.large .resource-icon .icon {
+    content: image-set(url(../Images/DocumentGenericLarge.png) 1x, url(../Images/DocumentGenericLarge@2x.png) 2x);
+}
+
+.large .resource-icon.resource-type-document .icon {
+    content: image-set(url(../Images/DocumentMarkupLarge.png) 1x, url(../Images/DocumentMarkupLarge@2x.png) 2x);
+}
+
+.large .resource-icon.resource-type-image .icon {
+    content: image-set(url(../Images/DocumentImageLarge.png) 1x, url(../Images/DocumentImageLarge@2x.png) 2x);
+}
+
+.large .resource-icon.resource-type-font .icon {
+    content: image-set(url(../Images/DocumentFontLarge.png) 1x, url(../Images/DocumentFontLarge@2x.png) 2x);
+}
+
+.large .resource-icon.resource-type-stylesheet .icon {
+    content: image-set(url(../Images/DocumentCSSLarge.png) 1x, url(../Images/DocumentCSSLarge@2x.png) 2x);
+}
+
+.large .resource-icon.resource-type-script .icon {
+    content: image-set(url(../Images/DocumentJSLarge.png) 1x, url(../Images/DocumentJSLarge@2x.png) 2x);
+}
+
+.large .anonymous-script-icon .icon {
+    content: image-set(url(../Images/ClippingJSLarge.png) 1x, url(../Images/ClippingJSLarge@2x.png) 2x);
+}
+
+.large .source-map-resource.resource-icon .icon {
+    content: image-set(url(../Images/ClippingGenericLarge.png) 1x, url(../Images/ClippingGenericLarge@2x.png) 2x);
+}
+
+.large .source-map-resource.resource-icon.resource-type-stylesheet .icon {
+    content: image-set(url(../Images/ClippingCSSLarge.png) 1x, url(../Images/ClippingCSSLarge@2x.png) 2x);
+}
+
+.large .source-map-resource.resource-icon.resource-type-script .icon {
+    content: image-set(url(../Images/ClippingJSLarge.png) 1x, url(../Images/ClippingJSLarge@2x.png) 2x);
+}
+
+/* FIXME: <https://webkit.org/b/164138> [GTK] Web Inspector: Add new GTK+ icons for Worker Scripts */
+body:matches(.mac-platform, .windows-platform) .large .script.worker-icon .icon {
+    content: image-set(url(../Images/WorkerScriptLarge.png) 1x, url(../Images/WorkerScriptLarge@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..3109735df
--- /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: var(--navigation-bar-height);
+}
+
+.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..4b93e61f9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js
@@ -0,0 +1,458 @@
+/*
+ * 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);
+
+        this._targetTreeElementMap = new Map;
+
+        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.targetManager.addEventListener(WebInspector.TargetManager.Event.TargetRemoved, this._targetRemoved, 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 || representedObject instanceof WebInspector.Collection)) {
+            // 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) {
+            let collection = new WebInspector.Collection(WebInspector.Collection.TypeVerifier.Script);
+            this._anonymousScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Anonymous Scripts"), collection);
+        }
+
+        if (!this._anonymousScriptsFolderTreeElement.parent) {
+            var index = insertionIndexForObjectInListSortedByFunction(this._anonymousScriptsFolderTreeElement, this.contentTreeOutline.children, this._compareTreeElements);
+            this.contentTreeOutline.insertChild(this._anonymousScriptsFolderTreeElement, index);
+        }
+
+        this._anonymousScriptsFolderTreeElement.representedObject.add(representedObject);
+
+        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 && !script.sourceURL)
+            return;
+
+        // Worker script.
+        if (script.target !== WebInspector.mainTarget) {
+            if (script.isMainResource())
+                this._addTargetWithMainResource(script.target);
+            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 || script.dynamicallyAddedScriptElement)
+            return;
+
+        let insertIntoTopLevel = false;
+        let parentFolderTreeElement = null;
+
+        if (script.injected) {
+            if (!this._extensionScriptsFolderTreeElement) {
+                let collection = new WebInspector.Collection(WebInspector.Collection.TypeVerifier.Script);
+                this._extensionScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Extension Scripts"), collection);
+            }
+
+            parentFolderTreeElement = this._extensionScriptsFolderTreeElement;
+        } else {
+            if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript && !WebInspector.hasExtraDomains)
+                insertIntoTopLevel = true;
+            else {
+                if (!this._extraScriptsFolderTreeElement) {
+                    let collection = new WebInspector.Collection(WebInspector.Collection.TypeVerifier.Script);
+                    this._extraScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Extra Scripts"), collection);
+                }
+
+                parentFolderTreeElement = this._extraScriptsFolderTreeElement;
+            }
+        }
+
+        if (parentFolderTreeElement)
+            parentFolderTreeElement.representedObject.add(script);
+
+        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;
+
+        let parentTreeElement = scriptTreeElement.parent;
+        parentTreeElement.removeChild(scriptTreeElement);
+
+        if (parentTreeElement instanceof WebInspector.FolderTreeElement) {
+            parentTreeElement.representedObject.remove(script);
+
+            if (!parentTreeElement.children.length)
+                parentTreeElement.parent.removeChild(parentTreeElement);
+        }
+    }
+
+    _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.representedObject.clear();
+            this._extensionScriptsFolderTreeElement = null;
+        }
+
+        if (this._extraScriptsFolderTreeElement) {
+            if (this._extraScriptsFolderTreeElement.parent)
+                this._extraScriptsFolderTreeElement.parent.removeChild(this._extraScriptsFolderTreeElement, suppressOnDeselect, suppressSelectSibling);
+
+            this._extraScriptsFolderTreeElement.representedObject.clear();
+            this._extraScriptsFolderTreeElement = null;
+        }
+
+        if (this._anonymousScriptsFolderTreeElement) {
+            if (this._anonymousScriptsFolderTreeElement.parent)
+                this._anonymousScriptsFolderTreeElement.parent.removeChild(this._anonymousScriptsFolderTreeElement, suppressOnDeselect, suppressSelectSibling);
+
+            this._anonymousScriptsFolderTreeElement.representedObject.clear();
+            this._anonymousScriptsFolderTreeElement = null;
+        }
+
+        if (this._targetTreeElementMap.size) {
+            for (let treeElement of this._targetTreeElementMap)
+                treeElement.parent.removeChild(treeElement, suppressOnDeselect, suppressSelectSibling);
+            this._targetTreeElementMap.clear();
+        }
+    }
+
+    _addTargetWithMainResource(target)
+    {
+        console.assert(target.type === WebInspector.Target.Type.Worker);
+
+        let targetTreeElement = new WebInspector.WorkerTreeElement(target);
+        this._targetTreeElementMap.set(target, targetTreeElement);
+
+        let index = insertionIndexForObjectInListSortedByFunction(targetTreeElement, this.contentTreeOutline.children, this._compareTreeElements);
+        this.contentTreeOutline.insertChild(targetTreeElement, index);
+    }
+
+    _targetRemoved(event)
+    {
+        let removedTarget = event.data.target;
+
+        let targetTreeElement = this._targetTreeElementMap.take(removedTarget);
+        if (targetTreeElement)
+            targetTreeElement.parent.removeChild(targetTreeElement);
+    }
+
+    _treeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
+        if (treeElement instanceof WebInspector.FolderTreeElement
+            || 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.css b/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.css
new file mode 100644
index 000000000..13b058c69
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.css
@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+.resource-timing-popover-content .data-grid {
+    border: none;
+    width: 280px;
+}
+
+.resource-timing-popover-content .data-grid .graph-column > .cell-content {
+    position: relative;
+}
+
+.resource-timing-popover-content .data-grid td {
+    border-right: none;
+}
+
+.resource-timing-popover-content .data-grid td.graph-column {
+    padding: 4px 0 0;
+}
+
+.resource-timing-popover-content .data-grid table.data {
+    background-image: none;
+}
+
+.resource-timing-popover-content .data-grid tr:nth-last-child(2) {
+    border-top: 1px solid var(--border-color);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js
new file mode 100644
index 000000000..a82fabef9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js
@@ -0,0 +1,387 @@
+/*
+ * 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, includesGraph, graphDataSource, shouldShowPopover)
+    {
+        super(includesGraph, graphDataSource);
+
+        this._resource = resourceTimelineRecord.resource;
+        this._record = resourceTimelineRecord;
+        this._shouldShowPopover = shouldShowPopover;
+
+        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.URLDidChange, this._needsRefresh, this);
+
+        if (includesGraph)
+            this._record.addEventListener(WebInspector.TimelineRecord.Event.Updated, this._timelineRecordUpdated, this);
+        else {
+            this._resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, 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._includesGraph) {
+            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 "name":
+            cell.classList.add(...this.iconClassNames());
+            cell.title = resource.displayURL;
+            this._updateStatus(cell);
+            return this._createNameCellDocumentFragment();
+
+        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();
+    }
+
+    iconClassNames()
+    {
+        return [WebInspector.ResourceTreeElement.ResourceIconStyleClassName, this.resource.type];
+    }
+
+    appendContextMenuItems(contextMenu)
+    {
+        WebInspector.appendContextMenuItemsForSourceCode(contextMenu, this._resource);
+    }
+
+    // Protected
+
+    didAddRecordBar(recordBar)
+    {
+        if (!this._shouldShowPopover)
+            return;
+
+        if (!recordBar.records.length || recordBar.records[0].type !== WebInspector.TimelineRecord.Type.Network)
+            return;
+
+        console.assert(!this._mouseEnterRecordBarListener);
+        this._mouseEnterRecordBarListener = this._mouseoverRecordBar.bind(this);
+        recordBar.element.addEventListener("mouseenter", this._mouseEnterRecordBarListener);
+    }
+
+    didRemoveRecordBar(recordBar)
+    {
+        if (!this._shouldShowPopover)
+            return;
+
+        if (!recordBar.records.length || recordBar.records[0].type !== WebInspector.TimelineRecord.Type.Network)
+            return;
+
+        recordBar.element.removeEventListener("mouseenter", this._mouseEnterRecordBarListener);
+        this._mouseEnterRecordBarListener = null;
+    }
+
+    filterableDataForColumn(columnIdentifier)
+    {
+        if (columnIdentifier === "name")
+            return this._resource.url;
+        return super.filterableDataForColumn(columnIdentifier);
+    }
+
+    // Private
+
+    _createNameCellDocumentFragment()
+    {
+        let fragment = document.createDocumentFragment();
+        let mainTitle = this.displayName();
+        fragment.append(mainTitle);
+
+        // Show the host as the subtitle if it is different from the main resource or if this is the main frame's main resource.
+        let frame = this._resource.parentFrame;
+        let isMainResource = this._resource.isMainResource();
+        let parentResourceHost;
+        if (frame && isMainResource) {
+            // When the resource is a main resource, get the host from the current frame's parent frame instead of the current frame.
+            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.
+            parentResourceHost = frame.mainResource.urlComponents.host;
+        }
+
+        if (parentResourceHost !== this._resource.urlComponents.host || frame.isMainFrame() && isMainResource) {
+            let subtitle = WebInspector.displayNameForHost(this._resource.urlComponents.host);
+            if (mainTitle !== subtitle) {
+                let subtitleElement = document.createElement("span");
+                subtitleElement.classList.add("subtitle");
+                subtitleElement.textContent = subtitle;
+                fragment.append(subtitleElement);
+            }
+        }
+
+        return fragment;
+    }
+
+    _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();
+    }
+
+    _dataGridNodeGoToArrowClicked()
+    {
+        WebInspector.showSourceCode(this._resource);
+    }
+
+    _updateStatus(cell)
+    {
+        if (this._resource.failed)
+            cell.classList.add("error");
+        else {
+            cell.classList.remove("error");
+
+            if (this._resource.finished)
+                this.createGoToArrowButton(cell, this._dataGridNodeGoToArrowClicked.bind(this));
+        }
+
+        if (this._spinner)
+            this._spinner.element.remove();
+
+        if (this._resource.finished || this._resource.failed)
+            return;
+
+        if (!this._spinner)
+            this._spinner = new WebInspector.IndeterminateProgressSpinner;
+
+        let contentElement = cell.firstChild;
+        contentElement.appendChild(this._spinner.element);
+    }
+
+    _mouseoverRecordBar(event)
+    {
+        let recordBar = WebInspector.TimelineRecordBar.fromElement(event.target);
+        console.assert(recordBar);
+        if (!recordBar)
+            return;
+
+        let calculateTargetFrame = () => {
+            let columnRect = WebInspector.Rect.rectFromClientRect(this.elementWithColumnIdentifier("graph").getBoundingClientRect());
+            let barRect = WebInspector.Rect.rectFromClientRect(event.target.getBoundingClientRect());
+            return columnRect.intersectionWithRect(barRect);
+        };
+
+        let targetFrame = calculateTargetFrame();
+        if (!targetFrame.size.width && !targetFrame.size.height)
+            return;
+
+        console.assert(recordBar.records.length);
+        let resource = recordBar.records[0].resource;
+        if (!resource.timingData)
+            return;
+
+        if (!resource.timingData.responseEnd)
+            return;
+
+        if (this.dataGrid._dismissPopoverTimeout) {
+            clearTimeout(this.dataGrid._dismissPopoverTimeout);
+            this.dataGrid._dismissPopoverTimeout = undefined;
+        }
+
+        let popoverContentElement = document.createElement("div");
+        popoverContentElement.classList.add("resource-timing-popover-content");
+
+        if (resource.failed || resource.urlComponents.scheme === "data" || (resource.cached && resource.statusCode !== 304)) {
+            let descriptionElement = document.createElement("span");
+            descriptionElement.classList.add("description");
+            if (resource.failed)
+                descriptionElement.textContent = WebInspector.UIString("Resource failed to load.");
+            else if (resource.urlComponents.scheme === "data")
+                descriptionElement.textContent = WebInspector.UIString("Resource was loaded with the “data“ scheme.");
+            else
+                descriptionElement.textContent = WebInspector.UIString("Resource was served from the cache.");
+            popoverContentElement.appendChild(descriptionElement);
+        } else {
+            let columns = {
+                description: {
+                    width: "80px"
+                },
+                graph: {
+                    width: `${WebInspector.ResourceTimelineDataGridNode.PopoverGraphColumnWidthPixels}px`
+                },
+                duration: {
+                    width: "70px",
+                    aligned: "right"
+                }
+            };
+
+            let popoverDataGrid = new WebInspector.DataGrid(columns);
+            popoverDataGrid.inline = true;
+            popoverDataGrid.headerVisible = false;
+            popoverContentElement.appendChild(popoverDataGrid.element);
+
+            let graphDataSource = {
+                get secondsPerPixel() { return resource.duration / WebInspector.ResourceTimelineDataGridNode.PopoverGraphColumnWidthPixels; },
+                get zeroTime() { return resource.firstTimestamp; },
+                get startTime() { return resource.firstTimestamp; },
+                get currentTime() { return this.endTime; },
+
+                get endTime()
+                {
+                    let endTimePadding = this.secondsPerPixel * WebInspector.TimelineRecordBar.MinimumWidthPixels;
+                    return resource.lastTimestamp + endTimePadding;
+                }
+            };
+
+            let secondTimestamp = resource.timingData.domainLookupStart || resource.timingData.connectStart || resource.timingData.requestStart;
+            if (secondTimestamp - resource.timingData.startTime)
+                popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("Stalled"), resource.timingData.startTime, secondTimestamp, graphDataSource));
+            if (resource.timingData.domainLookupStart)
+                popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("DNS"), resource.timingData.domainLookupStart, resource.timingData.domainLookupEnd, graphDataSource));
+            if (resource.timingData.connectStart)
+                popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("Connection"), resource.timingData.connectStart, resource.timingData.connectEnd, graphDataSource));
+            if (resource.timingData.secureConnectionStart)
+                popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("Secure"), resource.timingData.secureConnectionStart, resource.timingData.connectEnd, graphDataSource));
+            popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("Request"), resource.timingData.requestStart, resource.timingData.responseStart, graphDataSource));
+            popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("Response"), resource.timingData.responseStart, resource.timingData.responseEnd, graphDataSource));
+
+            const higherResolution = true;
+            let totalData = {
+                description: WebInspector.UIString("Total time"),
+                duration: Number.secondsToMillisecondsString(resource.timingData.responseEnd - resource.timingData.startTime, higherResolution)
+            };
+            popoverDataGrid.appendChild(new WebInspector.DataGridNode(totalData));
+
+            popoverDataGrid.updateLayout();
+        }
+
+        if (!this.dataGrid._popover)
+            this.dataGrid._popover = new WebInspector.Popover;
+
+        let preferredEdges = [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MIN_X];
+        this.dataGrid._popover.windowResizeHandler = () => {
+            let bounds = calculateTargetFrame();
+            this.dataGrid._popover.present(bounds.pad(2), preferredEdges);
+        };
+
+        recordBar.element.addEventListener("mouseleave", () => {
+            if (!this.dataGrid)
+                return;
+            this.dataGrid._dismissPopoverTimeout = setTimeout(() => this.dataGrid._popover.dismiss(), WebInspector.ResourceTimelineDataGridNode.DelayedPopoverDismissalTimeout);
+        }, {once: true});
+
+        this.dataGrid._popover.presentNewContentWithFrame(popoverContentElement, targetFrame.pad(2), preferredEdges);
+    }
+};
+
+WebInspector.ResourceTimelineDataGridNode.PopoverGraphColumnWidthPixels = 110;
+WebInspector.ResourceTimelineDataGridNode.DelayedPopoverDismissalTimeout = 500;
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceTimingPopoverDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/ResourceTimingPopoverDataGridNode.js
new file mode 100644
index 000000000..79a1eab4a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTimingPopoverDataGridNode.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.ResourceTimingPopoverDataGridNode = class ResourceTimingPopoverDataGridNode extends WebInspector.TimelineDataGridNode
+{
+    constructor(description, startTime, endTime, graphDataSource)
+    {
+        super(true, graphDataSource);
+
+        const higherResolution = true;
+        let duration = Number.secondsToMillisecondsString(endTime - startTime, higherResolution);
+
+        this._data = {description, duration};
+        this._record = new WebInspector.TimelineRecord(WebInspector.TimelineRecord.Type.Network, startTime, endTime);
+    }
+
+    // Public
+
+    get records() { return [this._record]; }
+    get data() { return this._data; }
+    get selectable() { return false; }
+
+    // Protected
+
+    createCellContent(columnIdentifier, cell)
+    {
+        let value = this.data[columnIdentifier];
+
+        switch (columnIdentifier) {
+        case "description":
+        case "duration":
+            return value || emDash;
+        }
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css
new file mode 100644
index 000000000..90a5b3e0d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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: var(--error-text-color) !important;
+}
+
+.item.resource.failed .subtitle {
+    color: var(--error-text-color) !important;
+    opacity: 0.7;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js
new file mode 100644
index 000000000..a07347153
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js
@@ -0,0 +1,205 @@
+/*
+ * 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.Fetch
+            || 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()
+    {
+        let urlComponents = this._resource.urlComponents;
+        return {text: [urlComponents.lastPathComponent, urlComponents.path, 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 target = this._resource.target;
+
+        var isMainResource = this._resource.isMainResource();
+        var parentResourceHost = target.mainResource ? target.mainResource.urlComponents.host : null;
+        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.
+            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.
+            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 && frame.isMainFrame() && isMainResource ? WebInspector.displayNameForHost(urlComponents.host) : null;
+        this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
+
+        if (oldMainTitle !== this.mainTitle)
+            this.callFirstAncestorFunction("descendantResourceTreeElementMainTitleDidChange", [this, oldMainTitle]);
+    }
+
+    populateContextMenu(contextMenu, event)
+    {
+        WebInspector.appendContextMenuItemsForSourceCode(contextMenu, this._resource);
+
+        super.populateContextMenu(contextMenu, event);
+    }
+
+    // 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..5d39607d6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.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 INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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.GeneralTabBarItem(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;
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        return true;
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        return representedObject instanceof WebInspector.Frame
+            || representedObject instanceof WebInspector.Resource
+            || representedObject instanceof WebInspector.Script
+            || representedObject instanceof WebInspector.ContentFlow
+            || representedObject instanceof WebInspector.Collection;
+    }
+};
+
+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..c03d89f94
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js
@@ -0,0 +1,474 @@
+/*
+ * 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._inspectorSection = null;
+        this._isInspectorSectionPendingFocus = false;
+        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 = new WebInspector.CSSStyleDeclarationSection(this, style);
+                style.__rulesSection = section;
+            } else
+                section.refresh();
+
+            if (this._isInspectorSectionPendingFocus && style.isInspectorRule())
+                this._inspectorSection = section;
+
+            // 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, 100));
+                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();
+        }
+    }
+
+    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.selectorEditable) {
+            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);
+    }
+
+    newRuleButtonClicked()
+    {
+        if (this.nodeStyles.node.isInUserAgentShadowTree())
+            return;
+
+        for (let existingRule of this.nodeStyles.rulesForSelector()) {
+            if (this.focusEmptySectionWithStyle(existingRule.style))
+                return;
+        }
+
+        this._isInspectorSectionPendingFocus = true;
+        let newInspectorRuleSelector = this.nodeStyles.node.appropriateSelectorFor(true);
+        this.nodeStyles.addRule(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;
+    }
+
+    sizeDidChange()
+    {
+        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._isInspectorSectionPendingFocus) {
+            this._isInspectorSectionPendingFocus = false;
+
+            if (this._inspectorSection) {
+                this._inspectorSection.focus();
+                this._inspectorSection = null;
+            }
+        }
+    }
+
+    // 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..09a474382
--- /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: var(--selected-foreground-color);
+}
+
+.scope-bar > li:matches(.selected, :active) {
+    transition-duration: 75ms;
+}
+
+.scope-bar > li:hover {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color-hover);
+}
+
+.scope-bar > li.selected {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color);
+}
+
+.scope-bar > li:active {
+    color: var(--selected-foreground-color);
+    background-color: hsla(212, 92%, 54%, 0.55);
+}
+
+.scope-bar > li.selected:active {
+    background-color: var(--selected-background-color-active);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js
new file mode 100644
index 000000000..9f36720c4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js
@@ -0,0 +1,163 @@
+/*
+ * 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((item) => item.selected);
+    }
+
+    hasNonDefaultItemSelected()
+    {
+        return this._items.some((item) => item.selected && item !== this._defaultItem);
+    }
+
+    // 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..7da0685e7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js
@@ -0,0 +1,500 @@
+/*
+ * 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.needsLayout();
+
+        // 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 when console execution context changes.
+        WebInspector.runtimeManager.addEventListener(WebInspector.RuntimeManager.Event.ActiveExecutionContextChanged, this._activeExecutionContextChanged, this);
+
+        // Update watch expressions on navigations.
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        // Update watch expressions on active call frame changes.
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._activeCallFrameDidChange, 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.needsLayout();
+    }
+
+    // Protected
+
+    layout()
+    {
+        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);
+
+        let scopeChain = callFrame.mergedScopeChain();
+        for (let scope of scopeChain) {
+            // Don't show sections for empty scopes unless it is the local scope, since it has "this".
+            if (scope.empty && scope.type !== WebInspector.ScopeChainNode.Type.Local)
+                continue;
+
+            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 (callFrame.thisObject)
+                    extraPropertyDescriptor = new WebInspector.PropertyDescriptor({name: "this", value: callFrame.thisObject});
+                break;
+
+            case WebInspector.ScopeChainNode.Type.Closure:
+                if (scope.__baseClosureScope && scope.name)
+                    title = WebInspector.UIString("Closure Variables (%s)").format(scope.name);
+                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);
+            let detailsSection = new WebInspector.DetailsSection(detailsSectionIdentifier, title, null, null, collapsedByDefault);
+
+            // FIXME: This just puts two ObjectTreeViews next to each other, 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.ObjectPropertiesDetailSectionRow(objectTree, detailsSection));
+            }
+
+            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;
+                for (let target of WebInspector.targets)
+                    target.RuntimeAgent.releaseObjectGroup(WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName);
+            }
+            return Promise.resolve(null);
+        }
+
+        for (let target of WebInspector.targets)
+            target.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) {
+                let options = {objectGroup: WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName, includeCommandLineAPI: false, doNotPauseOnExceptionsAndMuteConsole: true, returnByValue: false, generatePreview: true, saveResult: false};
+                WebInspector.runtimeManager.evaluateInInspectedWindow(expression, options, function(object, wasThrown) {
+                    if (!object)
+                        return;
+                    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.ObjectPropertiesDetailSectionRow(objectTree));
+        });
+    }
+
+    _addWatchExpression(expression)
+    {
+        let watchExpressions = this._watchExpressionsSetting.value.slice(0);
+        watchExpressions.push(expression);
+        this._watchExpressionsSetting.value = watchExpressions;
+
+        this.needsLayout();
+    }
+
+    _removeWatchExpression(expression)
+    {
+        let watchExpressions = this._watchExpressionsSetting.value.slice(0);
+        watchExpressions.remove(expression, true);
+        this._watchExpressionsSetting.value = watchExpressions;
+
+        this.needsLayout();
+    }
+
+    _clearAllWatchExpressions()
+    {
+        this._watchExpressionsSetting.value = [];
+
+        this.needsLayout();
+    }
+
+    _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": () => { this._popoverCommitted = true; popover.dismiss(); },
+        });
+
+        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);
+            }
+        });
+
+        popover.content = content;
+
+        popover.windowResizeHandler = presentPopoverOverTargetElement;
+        presentPopoverOverTargetElement();
+
+        // CodeMirror needs a refresh after the popover displays, to layout, otherwise it doesn't appear.
+        setTimeout(() => {
+            this._codeMirror.refresh();
+            this._codeMirror.focus();
+            popover.update();
+        }, 0);
+    }
+
+    willDismissPopover(popover)
+    {
+        if (this._popoverCommitted) {
+            let expression = this._codeMirror.getValue().trim();
+            if (expression)
+                this._addWatchExpression(expression);
+        }
+
+        this._codeMirror = null;
+    }
+
+    _refreshAllWatchExpressionsButtonClicked(event)
+    {
+        this.needsLayout();
+    }
+
+    _clearAllWatchExpressionsButtonClicked(event)
+    {
+        this._clearAllWatchExpressions();
+    }
+
+    _didEvaluateExpression(event)
+    {
+        if (event.data.objectGroup === WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName)
+            return;
+
+        this.needsLayout();
+    }
+
+    _activeExecutionContextChanged()
+    {
+        this.needsLayout();
+    }
+
+    _activeCallFrameDidChange()
+    {
+        this.needsLayout();
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this.needsLayout();
+    }
+
+    _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"), () => {
+            let expression = objectTreeElement.property.name;
+            this._removeWatchExpression(expression);
+        });
+    }
+
+    _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";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.css
new file mode 100644
index 000000000..e69f8be63
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.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.
+ */
+
+.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: -2px;
+    left: 0px;
+    border: none;
+}
+
+.scope-radio-button-navigation-item > .arrows {
+    width: 5px;
+    height: 11px;
+    margin-left: 4px;
+    transform: translateY(1px);
+}
+
+.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..f0c30a0c3
--- /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/Views/ScriptClusterTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/ScriptClusterTimelineView.js
new file mode 100644
index 000000000..8c46d91e4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptClusterTimelineView.js
@@ -0,0 +1,215 @@
+/*
+ * 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.ScriptClusterTimelineView = class ScriptClusterTimelineView extends WebInspector.ClusterContentView
+{
+    constructor(timeline, extraArguments)
+    {
+        super(timeline);
+
+        console.assert(timeline.type === WebInspector.TimelineRecord.Type.Script);
+
+        this._currentContentViewSetting = new WebInspector.Setting("script-cluster-timeline-view-current-view", WebInspector.ScriptClusterTimelineView.EventsIdentifier);
+
+        let showSelectorArrows = this._canShowProfileView();
+        function createPathComponent(displayName, className, identifier)
+        {
+            let pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, identifier, false, showSelectorArrows);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+            return pathComponent;
+        }
+
+        this._eventsPathComponent = createPathComponent.call(this, WebInspector.UIString("Events"), "events-icon", WebInspector.ScriptClusterTimelineView.EventsIdentifier);
+        this._profilePathComponent = createPathComponent.call(this, WebInspector.UIString("Call Trees"), "call-trees-icon", WebInspector.ScriptClusterTimelineView.ProfileIdentifier);
+
+        if (this._canShowProfileView()) {
+            this._eventsPathComponent.nextSibling = this._profilePathComponent;
+            this._profilePathComponent.previousSibling = this._eventsPathComponent;
+        }
+
+        // FIXME: We should be able to create these lazily.
+        this._eventsContentView = new WebInspector.ScriptDetailsTimelineView(this.representedObject, extraArguments);
+        this._profileContentView = this._canShowProfileView() ? new WebInspector.ScriptProfileTimelineView(this.representedObject, extraArguments) : null;
+
+        this._showContentViewForIdentifier(this._currentContentViewSetting.value);
+
+        this.contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._scriptClusterViewCurrentContentViewDidChange, this);
+    }
+
+    // TimelineView
+
+    // FIXME: Determine a better way to bridge TimelineView methods to the sub-timeline views.
+    get showsLiveRecordingData() { return this._contentViewContainer.currentContentView.showsLiveRecordingData; }
+    get showsFilterBar() { return this._contentViewContainer.currentContentView.showsFilterBar; }
+    get zeroTime() { return this._contentViewContainer.currentContentView.zeroTime; }
+    set zeroTime(x) { this._contentViewContainer.currentContentView.zeroTime = x; }
+    get startTime() { return this._contentViewContainer.currentContentView.startTime; }
+    set startTime(x) { this._contentViewContainer.currentContentView.startTime = x; }
+    get endTime() { return this._contentViewContainer.currentContentView.endTime; }
+    set endTime(x) { this._contentViewContainer.currentContentView.endTime = x; }
+    get currentTime() { return this._contentViewContainer.currentContentView.currentTime; }
+    set currentTime(x) { this._contentViewContainer.currentContentView.currentTime = x; }
+    selectRecord(record) { this._contentViewContainer.currentContentView.selectRecord(record); }
+    updateFilter(filters) { return this._contentViewContainer.currentContentView.updateFilter(filters); }
+    filterDidChange() { return this._contentViewContainer.currentContentView.filterDidChange(); }
+    matchDataGridNodeAgainstCustomFilters(node) { return this._contentViewContainer.currentContentView.matchDataGridNodeAgainstCustomFilters(node); }
+
+    reset()
+    {
+        this._eventsContentView.reset();
+
+        if (this._profileContentView)
+            this._profileContentView.reset();
+    }
+
+    // Public
+
+    get eventsContentView()
+    {
+        return this._eventsContentView;
+    }
+
+    get profileContentView()
+    {
+        return this._profileContentView;
+    }
+
+    get selectionPathComponents()
+    {
+        let currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView)
+            return [];
+
+        let components = [this._pathComponentForContentView(currentContentView)];
+        let subComponents = currentContentView.selectionPathComponents;
+        if (subComponents)
+            return components.concat(subComponents);
+        return components;
+    }
+
+    saveToCookie(cookie)
+    {
+        cookie[WebInspector.ScriptClusterTimelineView.ContentViewIdentifierCookieKey] = this._currentContentViewSetting.value;
+    }
+
+    restoreFromCookie(cookie)
+    {
+        this._showContentViewForIdentifier(cookie[WebInspector.ScriptClusterTimelineView.ContentViewIdentifierCookieKey]);
+    }
+
+    showEvents()
+    {
+        return this._showContentViewForIdentifier(WebInspector.ScriptClusterTimelineView.EventsIdentifier);
+    }
+
+    showProfile()
+    {
+        if (!this._canShowProfileView())
+            return this.showEvents();
+
+        return this._showContentViewForIdentifier(WebInspector.ScriptClusterTimelineView.ProfileIdentifier);
+    }
+
+    // Private
+
+    _canShowProfileView()
+    {
+        // COMPATIBILITY (iOS 9): Legacy backends did not include CallingContextTree ScriptProfiler data.
+        return window.ScriptProfilerAgent;
+    }
+
+    _pathComponentForContentView(contentView)
+    {
+        console.assert(contentView);
+        if (!contentView)
+            return null;
+        if (contentView === this._eventsContentView)
+            return this._eventsPathComponent;
+        if (contentView === this._profileContentView)
+            return this._profilePathComponent;
+        console.error("Unknown contentView.");
+        return null;
+    }
+
+    _identifierForContentView(contentView)
+    {
+        console.assert(contentView);
+        if (!contentView)
+            return null;
+        if (contentView === this._eventsContentView)
+            return WebInspector.ScriptClusterTimelineView.EventsIdentifier;
+        if (contentView === this._profileContentView)
+            return WebInspector.ScriptClusterTimelineView.ProfileIdentifier;
+        console.error("Unknown contentView.");
+        return null;
+    }
+
+    _showContentViewForIdentifier(identifier)
+    {
+        let contentViewToShow = null;
+
+        switch (identifier) {
+        case WebInspector.ScriptClusterTimelineView.EventsIdentifier:
+            contentViewToShow = this.eventsContentView;
+            break;
+        case WebInspector.ScriptClusterTimelineView.ProfileIdentifier:
+            contentViewToShow = this.profileContentView;
+            break;
+        }
+
+        if (!contentViewToShow)
+            contentViewToShow = this.eventsContentView;
+
+        console.assert(contentViewToShow);
+
+        this._currentContentViewSetting.value = this._identifierForContentView(contentViewToShow);
+
+        return this.contentViewContainer.showContentView(contentViewToShow);
+    }
+
+    _pathComponentSelected(event)
+    {
+        this._showContentViewForIdentifier(event.data.pathComponent.representedObject);
+    }
+
+    _scriptClusterViewCurrentContentViewDidChange(event)
+    {
+        let currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView)
+            return;
+
+        let previousContentView = currentContentView === this._eventsContentView ? this._profileContentView : this._eventsContentView;
+
+        currentContentView.zeroTime = previousContentView.zeroTime;
+        currentContentView.startTime = previousContentView.startTime;
+        currentContentView.endTime = previousContentView.endTime;
+        currentContentView.currentTime = previousContentView.currentTime;
+    }
+};
+
+WebInspector.ScriptClusterTimelineView.ContentViewIdentifierCookieKey = "script-cluster-timeline-view-identifier";
+
+WebInspector.ScriptClusterTimelineView.EventsIdentifier = "events";
+WebInspector.ScriptClusterTimelineView.ProfileIdentifier = "profile";
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..82c43abb5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.js
@@ -0,0 +1,272 @@
+/*
+ * 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);
+
+        let toolTipCodeCoverage = WebInspector.UIString("Fade unexecuted code");
+        let activatedToolTipCodeCoverage = WebInspector.UIString("Do not fade unexecuted code");
+        this._codeCoverageButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("code-coverage", toolTipCodeCoverage, activatedToolTipCodeCoverage, "Images/NavigationItemCodeCoverage.svg", 13, 14);
+        this._codeCoverageButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleUnexecutedCodeHighlights, this);
+        this._codeCoverageButtonNavigationItem.enabled = false;
+        WebInspector.enableControlFlowProfilerSetting.addEventListener(WebInspector.Setting.Event.Changed, this._enableControlFlowProfilerSettingChanged, this);
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._prettyPrintButtonNavigationItem, this._showTypesButtonNavigationItem, this._codeCoverageButtonNavigationItem];
+    }
+
+    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()
+    {
+        super.shown();
+
+        this._textEditor.shown();
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        this._textEditor.hidden();
+    }
+
+    closed()
+    {
+        super.closed();
+
+        WebInspector.showJavaScriptTypeInformationSetting.removeEventListener(null, null, this);
+        WebInspector.enableControlFlowProfilerSetting.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;
+
+        this._codeCoverageButtonNavigationItem.enabled = this._textEditor.canShowCoverageHints();
+        this._codeCoverageButtonNavigationItem.activated = WebInspector.enableControlFlowProfilerSetting.value;
+    }
+
+    _togglePrettyPrint(event)
+    {
+        var activated = !this._prettyPrintButtonNavigationItem.activated;
+        this._textEditor.updateFormattedState(activated);
+    }
+
+    _toggleTypeAnnotations(event)
+    {
+        this._showTypesButtonNavigationItem.enabled = false;
+        this._textEditor.toggleTypeAnnotations().then(() => {
+            this._showTypesButtonNavigationItem.enabled = true;
+        });
+    }
+
+    _toggleUnexecutedCodeHighlights(event)
+    {
+        this._codeCoverageButtonNavigationItem.enabled = false;
+        this._textEditor.toggleUnexecutedCodeHighlights().then(() => {
+            this._codeCoverageButtonNavigationItem.enabled = true;
+        });
+    }
+
+    _showJavaScriptTypeInformationSettingChanged(event)
+    {
+        this._showTypesButtonNavigationItem.activated = WebInspector.showJavaScriptTypeInformationSetting.value;
+    }
+
+    _enableControlFlowProfilerSettingChanged(event)
+    {
+        this._codeCoverageButtonNavigationItem.activated = WebInspector.enableControlFlowProfilerSetting.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/ScriptDetailsTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/ScriptDetailsTimelineView.css
new file mode 100644
index 000000000..06af3d941
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptDetailsTimelineView.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/ScriptDetailsTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/ScriptDetailsTimelineView.js
new file mode 100644
index 000000000..016cfc439
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptDetailsTimelineView.js
@@ -0,0 +1,239 @@
+/*
+ * 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.ScriptDetailsTimelineView = class ScriptDetailsTimelineView extends WebInspector.TimelineView
+{
+    constructor(timeline, extraArguments)
+    {
+        super(timeline, extraArguments);
+
+        console.assert(timeline.type === WebInspector.TimelineRecord.Type.Script);
+
+        let columns = {name: {}, location: {}, callCount: {}, startTime: {}, totalTime: {}, selfTime: {}, averageTime: {}};
+
+        columns.name.title = WebInspector.UIString("Name");
+        columns.name.width = "10%";
+        columns.name.icon = true;
+        columns.name.disclosure = true;
+        columns.name.locked = true;
+
+        columns.location.title = WebInspector.UIString("Location");
+        columns.location.icon = true;
+        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(columns);
+        this._dataGrid.sortDelegate = this;
+        this._dataGrid.sortColumnIdentifier = "startTime";
+        this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+        this._dataGrid.createSettings("script-timeline-view");
+
+        this.setupDataGrid(this._dataGrid);
+
+        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 showsLiveRecordingData() { return false; }
+
+    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) {
+            console.assert(dataGridNode instanceof WebInspector.TimelineDataGridNode);
+            if (dataGridNode.hidden)
+                return null;
+
+            let pathComponent = new WebInspector.TimelineDataGridNodePathComponent(dataGridNode);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.dataGridNodePathComponentSelected, this);
+            pathComponents.unshift(pathComponent);
+            dataGridNode = dataGridNode.parent;
+        }
+
+        return pathComponents;
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._dataGrid.reset();
+
+        this._pendingRecords = [];
+    }
+
+    // TimelineDataGrid sort delegate
+
+    dataGridSortComparator(sortColumnIdentifier, sortDirection, node1, node2)
+    {
+        if (sortColumnIdentifier !== "name")
+            return null;
+
+        let displayName1 = node1.displayName();
+        let displayName2 = node2.displayName();
+        if (displayName1 !== displayName2)
+            return displayName1.localeCompare(displayName2) * sortDirection;
+
+        return node1.subtitle.localeCompare(node2.subtitle) * sortDirection;
+    }
+
+    // Protected
+
+    dataGridNodePathComponentSelected(event)
+    {
+        let dataGridNode = event.data.pathComponent.timelineDataGridNode;
+        console.assert(dataGridNode.dataGrid === this._dataGrid);
+
+        dataGridNode.revealAndSelect();
+    }
+
+    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 (let scriptTimelineRecord of this._pendingRecords) {
+            let rootNodes = [];
+            if (scriptTimelineRecord.profile) {
+                // FIXME: Support using the bottom-up tree once it is implemented.
+                rootNodes = scriptTimelineRecord.profile.topDownRootNodes;
+            }
+
+            let dataGridNode = new WebInspector.ScriptTimelineDataGridNode(scriptTimelineRecord, zeroTime);
+            this._dataGrid.addRowInSortOrder(null, dataGridNode);
+
+            for (let profileNode of rootNodes) {
+                let profileNodeDataGridNode = new WebInspector.ProfileNodeDataGridNode(profileNode, zeroTime, startTime, endTime);
+                this._dataGrid.addRowInSortOrder(null, profileNodeDataGridNode, dataGridNode);
+            }
+        }
+
+        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();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptProfileTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/ScriptProfileTimelineView.js
new file mode 100644
index 000000000..2c7bba25a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptProfileTimelineView.js
@@ -0,0 +1,215 @@
+/*
+ * 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.ScriptProfileTimelineView = class ScriptProfileTimelineView extends WebInspector.TimelineView
+{
+    constructor(timeline, extraArguments)
+    {
+        super(timeline, extraArguments);
+
+        console.assert(timeline.type === WebInspector.TimelineRecord.Type.Script);
+
+        this.element.classList.add("script");
+
+        this._recording = extraArguments.recording;
+
+        this._forceNextLayout = false;
+        this._lastLayoutStartTime = undefined;
+        this._lastLayoutEndTime = undefined;
+
+        this._sharedProfileViewData = {
+            selectedNodeHash: null,
+        };
+
+        if (!WebInspector.ScriptProfileTimelineView.profileOrientationSetting)
+            WebInspector.ScriptProfileTimelineView.profileOrientationSetting = new WebInspector.Setting("script-profile-timeline-view-profile-orientation-setting", WebInspector.ScriptProfileTimelineView.ProfileOrientation.TopDown);
+        if (!WebInspector.ScriptProfileTimelineView.profileTypeSetting)
+            WebInspector.ScriptProfileTimelineView.profileTypeSetting = new WebInspector.Setting("script-profile-timeline-view-profile-type-setting", WebInspector.ScriptProfileTimelineView.ProfileViewType.Hierarchy);
+
+        this._showProfileViewForOrientation(WebInspector.ScriptProfileTimelineView.profileOrientationSetting.value, WebInspector.ScriptProfileTimelineView.profileTypeSetting.value);
+
+        let clearTooltip = WebInspector.UIString("Clear focus");
+        this._clearFocusNodesButtonItem = new WebInspector.ButtonNavigationItem("clear-profile-focus", clearTooltip, "Images/Close.svg", 16, 16);
+        this._clearFocusNodesButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearFocusNodes, this);
+        this._updateClearFocusNodesButtonItem();
+
+        this._profileOrientationButton = new WebInspector.TextToggleButtonNavigationItem("profile-orientation", WebInspector.UIString("Inverted"));
+        this._profileOrientationButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._profileOrientationButtonClicked, this);
+        if (WebInspector.ScriptProfileTimelineView.profileOrientationSetting.value === WebInspector.ScriptProfileTimelineView.ProfileOrientation.TopDown)
+            this._profileOrientationButton.activated = false;
+        else
+            this._profileOrientationButton.activated = true;
+
+        this._topFunctionsButton = new WebInspector.TextToggleButtonNavigationItem("top-functions", WebInspector.UIString("Top Functions"));
+        this._topFunctionsButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._topFunctionsButtonClicked, this);
+        if (WebInspector.ScriptProfileTimelineView.profileTypeSetting.value === WebInspector.ScriptProfileTimelineView.ProfileViewType.Hierarchy)
+            this._topFunctionsButton.activated = false;
+        else
+            this._topFunctionsButton.activated = true;
+
+        timeline.addEventListener(WebInspector.Timeline.Event.Refreshed, this._scriptTimelineRecordRefreshed, this);
+    }
+
+    // Public
+
+    get scrollableElements() { return this._profileView.scrollableElements; }
+
+    get showsLiveRecordingData() { return false; }
+
+    // Protected
+
+    closed()
+    {
+        console.assert(this.representedObject instanceof WebInspector.Timeline);
+        this.representedObject.removeEventListener(null, null, this);
+    }
+
+    get navigationItems()
+    {
+        return [this._clearFocusNodesButtonItem, this._profileOrientationButton, this._topFunctionsButton];
+    }
+
+    get selectionPathComponents()
+    {
+        return this._profileView.selectionPathComponents;
+    }
+
+    layout()
+    {
+        if (!this._forceNextLayout && (this._lastLayoutStartTime === this.startTime && this._lastLayoutEndTime === this.endTime))
+            return;
+
+        this._forceNextLayout = false;
+        this._lastLayoutStartTime = this.startTime;
+        this._lastLayoutEndTime = this.endTime;
+
+        this._profileView.setStartAndEndTime(this.startTime, this.endTime);
+    }
+
+    // Private
+
+    _callingContextTreeForOrientation(profileOrientation, profileViewType)
+    {
+        switch (profileOrientation) {
+        case WebInspector.ScriptProfileTimelineView.ProfileOrientation.TopDown:
+            return profileViewType === WebInspector.ScriptProfileTimelineView.ProfileViewType.Hierarchy ? this._recording.topDownCallingContextTree : this._recording.topFunctionsTopDownCallingContextTree;
+        case WebInspector.ScriptProfileTimelineView.ProfileOrientation.BottomUp:
+            return profileViewType === WebInspector.ScriptProfileTimelineView.ProfileViewType.Hierarchy ? this._recording.bottomUpCallingContextTree : this._recording.topFunctionsBottomUpCallingContextTree;
+        }
+
+        console.assert(false, "Should not be reached.");
+        return this._recording.topDownCallingContextTree;
+    }
+
+    _profileViewSelectionPathComponentsDidChange(event)
+    {
+        this._updateClearFocusNodesButtonItem();
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _scriptTimelineRecordRefreshed(event)
+    {
+        this._forceNextLayout = true;
+        this.needsLayout();
+    }
+
+    _profileOrientationButtonClicked()
+    {
+        this._profileOrientationButton.activated = !this._profileOrientationButton.activated;
+        let isInverted = this._profileOrientationButton.activated;
+        let newOrientation;
+        if (isInverted)
+            newOrientation = WebInspector.ScriptProfileTimelineView.ProfileOrientation.BottomUp;
+        else
+            newOrientation = WebInspector.ScriptProfileTimelineView.ProfileOrientation.TopDown;
+
+        WebInspector.ScriptProfileTimelineView.profileOrientationSetting.value = newOrientation;
+        this._showProfileViewForOrientation(newOrientation, WebInspector.ScriptProfileTimelineView.profileTypeSetting.value);
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+
+        this._forceNextLayout = true;
+        this.needsLayout();
+    }
+
+    _topFunctionsButtonClicked()
+    {
+        this._topFunctionsButton.activated = !this._topFunctionsButton.activated;
+        let isTopFunctionsEnabled = this._topFunctionsButton.activated;
+        let newOrientation;
+        if (isTopFunctionsEnabled)
+            newOrientation = WebInspector.ScriptProfileTimelineView.ProfileViewType.TopFunctions;
+        else
+            newOrientation = WebInspector.ScriptProfileTimelineView.ProfileViewType.Hierarchy;
+
+        WebInspector.ScriptProfileTimelineView.profileTypeSetting.value = newOrientation;
+        this._showProfileViewForOrientation(WebInspector.ScriptProfileTimelineView.profileOrientationSetting.value, newOrientation);
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+
+        this._forceNextLayout = true;
+        this.needsLayout();
+    }
+
+    _showProfileViewForOrientation(profileOrientation, profileViewType)
+    {
+        let filterText;
+        if (this._profileView) {
+            this._profileView.removeEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._profileViewSelectionPathComponentsDidChange, this);
+            this.removeSubview(this._profileView);
+            filterText = this._profileView.dataGrid.filterText;
+        }
+
+        let callingContextTree = this._callingContextTreeForOrientation(profileOrientation, profileViewType);
+        this._profileView = new WebInspector.ProfileView(callingContextTree, this._sharedProfileViewData);
+        this._profileView.addEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._profileViewSelectionPathComponentsDidChange, this);
+
+        this.addSubview(this._profileView);
+        this.setupDataGrid(this._profileView.dataGrid);
+
+        if (filterText)
+            this._profileView.dataGrid.filterText = filterText;
+    }
+
+    _updateClearFocusNodesButtonItem()
+    {
+        this._clearFocusNodesButtonItem.enabled = this._profileView.hasFocusNodes();
+    }
+
+    _clearFocusNodes()
+    {
+        this._profileView.clearFocusNodes();
+    }
+};
+
+WebInspector.ScriptProfileTimelineView.ProfileOrientation = {
+    BottomUp: "bottom-up",
+    TopDown: "top-down",
+};
+
+WebInspector.ScriptProfileTimelineView.ProfileViewType = {
+    Hierarchy: "hierarchy",
+    TopFunctions: "top-functions",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGrid.js
new file mode 100644
index 000000000..eecff7c1b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGrid.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.ScriptTimelineDataGrid = class ScriptTimelineDataGrid extends WebInspector.TimelineDataGrid
+{
+    // 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..8650086e8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGridNode.js
@@ -0,0 +1,185 @@
+/*
+ * 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 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;
+    }
+
+    get subtitle()
+    {
+        if (this._subtitle !== undefined)
+            return this._subtitle;
+
+        this._subtitle = "";
+
+        if (this._record.eventType === WebInspector.ScriptTimelineRecord.EventType.TimerInstalled) {
+            let timeoutString = Number.secondsToString(this._record.details.timeout / 1000);
+            if (this._record.details.repeating)
+                this._subtitle = WebInspector.UIString("%s interval").format(timeoutString);
+            else
+                this._subtitle = WebInspector.UIString("%s delay").format(timeoutString);
+        }
+
+        return this._subtitle;
+    }
+
+    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 "name":
+            cell.classList.add(...this.iconClassNames());
+            return this._createNameCellDocumentFragment();
+
+        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);
+    }
+
+    // Protected
+
+    filterableDataForColumn(columnIdentifier)
+    {
+        if (columnIdentifier === "name")
+            return [this.displayName(), this.subtitle];
+
+        return super.filterableDataForColumn(columnIdentifier);
+    }
+
+    // Private
+
+    _createNameCellDocumentFragment(cellElement)
+    {
+        let fragment = document.createDocumentFragment();
+        fragment.append(this.displayName());
+
+        if (this.subtitle) {
+            let subtitleElement = document.createElement("span");
+            subtitleElement.classList.add("subtitle");
+            subtitleElement.textContent = this.subtitle;
+            fragment.append(subtitleElement);
+        }
+
+        return fragment;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.css
index f671511d9..f671511d9 100644
--- a/Source/WebInspectorUI/UserInterface/ScriptTimelineOverviewGraph.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.js
new file mode 100644
index 000000000..c106735f3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.js
@@ -0,0 +1,95 @@
+/*
+ * 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.element.removeChildren();
+    }
+
+    // Protected
+
+    layout()
+    {
+        if (!this.visible)
+            return;
+
+        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/ScriptTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ScriptTreeElement.js
new file mode 100644
index 000000000..6fceb44d3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTreeElement.js
@@ -0,0 +1,64 @@
+/*
+ * 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 && !script.dynamicallyAddedScriptElement) {
+            // 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);
+
+        if (script.isMainResource()) {
+            console.assert(script.target.type === WebInspector.Target.Type.Worker);
+            this.addClassName("worker-icon");
+        }
+
+        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..0e5691a5c
--- /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"]::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..3212f2176
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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: calc(var(--navigation-bar-height) - 1px);
+}
+
+.sidebar > .panel.navigation.search > .search-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    display: flex;
+
+    height: calc(var(--navigation-bar-height) - 1px);
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar > .panel.navigation.search > .search-bar > input[type="search"] {
+    display: flex;
+    flex: 1;
+
+    margin: 3px 6px;
+}
+
+.sidebar > .panel.navigation.search > .search-bar > input[type="search"]::-webkit-search-results-button {
+    margin-right: 4px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js
new file mode 100644
index 000000000..20a77c268
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.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.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(performSearch)
+    {
+        this.show();
+
+        this._inputElement.select();
+
+        if (performSearch)
+            this.performSearch(this._inputElement.value);
+    }
+
+    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 createTreeElementForMatchObject(matchObject, parentTreeElement)
+        {
+            let matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
+            matchTreeElement.addEventListener(WebInspector.TreeElement.Event.DoubleClick, this._treeElementDoubleClick, this);
+
+            parentTreeElement.appendChild(matchTreeElement);
+
+            if (!this.contentTreeOutline.selectedTreeElement)
+                matchTreeElement.revealAndSelect(false, true);
+        }
+
+        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(frameId, url, error, resourceMatches)
+            {
+                updateEmptyContentPlaceholderSoon.call(this);
+
+                if (error || !resourceMatches || !resourceMatches.length)
+                    return;
+
+                var frame = WebInspector.frameResourceManager.frameForIdentifier(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, (lineMatch, lastIndex) => {
+                        var matchObject = new WebInspector.SourceCodeSearchMatchObject(resource, match.lineContent, searchQuery, new WebInspector.TextRange(match.lineNumber, lineMatch.index, match.lineNumber, lastIndex));
+                        createTreeElementForMatchObject.call(this, matchObject, resourceTreeElement);
+                    });
+                }
+
+                updateEmptyContentPlaceholder.call(this);
+            }
+
+            for (var i = 0; i < result.length; ++i) {
+                var searchResult = result[i];
+                if (!searchResult.url || !searchResult.frameId)
+                    continue;
+
+                // COMPATIBILITY (iOS 9): Page.searchInResources did not have the optional requestId parameter.
+                PageAgent.searchInResource(searchResult.frameId, searchResult.url, searchQuery, isCaseSensitive, isRegex, searchResult.requestId, resourceCallback.bind(this, searchResult.frameId, 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, (lineMatch, lastIndex) => {
+                        var matchObject = new WebInspector.SourceCodeSearchMatchObject(script, match.lineContent, searchQuery, new WebInspector.TextRange(match.lineNumber, lineMatch.index, match.lineNumber, lastIndex));
+                        createTreeElementForMatchObject.call(this, matchObject, scriptTreeElement);
+                    });
+                }
+
+                updateEmptyContentPlaceholder.call(this);
+            }
+
+            for (let script of scriptsToSearch)
+                script.target.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, (lineMatch, lastIndex) => {
+                        var matchObject = new WebInspector.DOMSearchMatchObject(resource, domNode, domNodeTitle, searchQuery, new WebInspector.TextRange(0, lineMatch.index, 0, lastIndex));
+                        createTreeElementForMatchObject.call(this, matchObject, resourceTreeElement);
+                        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));
+                        createTreeElementForMatchObject.call(this, matchObject, resourceTreeElement);
+                    }
+
+                    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);
+    }
+
+    _treeElementDoubleClick(event)
+    {
+        let treeElement = event.target;
+        if (!treeElement)
+            return;
+
+        const options = {ignoreSearchTab: true};
+        if (treeElement.representedObject instanceof WebInspector.DOMSearchMatchObject)
+            WebInspector.showMainFrameDOMTree(treeElement.representedObject.domNode, options);
+        else if (treeElement.representedObject instanceof WebInspector.SourceCodeSearchMatchObject)
+            WebInspector.showOriginalOrFormattedSourceCodeTextRange(treeElement.representedObject.sourceCodeTextRange, options);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js
new file mode 100644
index 000000000..cedabd788
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js
@@ -0,0 +1,98 @@
+/*
+ * 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.GeneralTabBarItem(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);
+
+        this._forcePerformSearch = false;
+    }
+
+    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(this._forcePerformSearch);
+
+        this._forcePerformSearch = false;
+    }
+
+    performSearch(searchQuery)
+    {
+        this.navigationSidebarPanel.performSearch(searchQuery);
+    }
+
+    // Protected
+
+    initialLayout()
+    {
+        super.initialLayout();
+
+        this._forcePerformSearch = true;
+    }
+};
+
+WebInspector.SearchTabContentView.Type = "search";
diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
new file mode 100644
index 000000000..f595d97d1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2016 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ * 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.
+ */
+
+.content-view.settings {
+    overflow-y: auto;
+    background-color: hsl(0, 0%, 93%);
+}
+
+.content-view.settings > .header {
+    margin: 6vh auto 4vh;
+    text-align: center;
+    font-size: 32px;
+    font-weight: lighter;
+}
+
+.content-view.settings > .setting-container {
+    display: flex;
+    align-items: center;
+    margin: 1em 0;
+    font-size: 13px;
+}
+
+.content-view.settings > .setting-container > .setting-name {
+    width: 50%;
+    margin-right: 6px;
+    text-align: right;
+}
+
+.content-view.settings > .setting-container > .setting-value-controller {
+    display: flex;
+    align-items: center;
+    width: 50%;
+}
+
+.content-view.settings > .setting-container > .setting-value-controller input {
+    font-size: inherit;
+}
+
+.content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"] {
+    font-size: 16px;
+    margin-right: 4px;
+}
+
+.content-view.settings > .setting-container > .setting-value-controller select {
+    /*
+    To set the font-size of <select> to be exactly 13px, it needs to be set to 16px.
+    Setting the font-size to 13px actually sets it to 11px.
+    */
+    font-size: 16px;
+
+    /* Vertically align <select> with its label text. */
+    position: relative;
+    top: 0.5px;
+}
+
+.content-view.settings > .setting-container > .setting-value-controller input[type="number"] {
+    max-width: 48px;
+    margin: 0 5px 0 2px;
+    text-align: right;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
new file mode 100644
index 000000000..09ab4cbc5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
@@ -0,0 +1,221 @@
+/*
+ * Copyright (C) 2015-2017 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.SettingsTabContentView = class SettingsTabContentView extends WebInspector.TabContentView
+{
+    constructor(identifier)
+    {
+        let tabBarItem = new WebInspector.PinnedTabBarItem("Images/Gear.svg", WebInspector.UIString("Open Settings"));
+
+        super(identifier || "settings", "settings", tabBarItem);
+
+        // Ensures that the Settings tab is displayable from a pinned tab bar item.
+        tabBarItem.representedObject = this;
+
+        let boundNeedsLayout = this.needsLayout.bind(this, WebInspector.View.LayoutReason.Dirty);
+        WebInspector.notifications.addEventListener(WebInspector.Notification.DebugUIEnabledDidChange, boundNeedsLayout);
+        WebInspector.settings.zoomFactor.addEventListener(WebInspector.Setting.Event.Changed, boundNeedsLayout);
+    }
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/Gear.svg",
+            title: WebInspector.UIString("Settings"),
+        };
+    }
+
+    static isEphemeral()
+    {
+        return true;
+    }
+
+    static shouldSaveTab()
+    {
+        return false;
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.SettingsTabContentView.Type;
+    }
+
+    layout()
+    {
+        this.element.removeChildren();
+
+        let header = this.element.createChild("div", "header");
+        header.textContent = WebInspector.UIString("Settings");
+
+        let createContainer = (title, createValueController) => {
+            let container = this.element.createChild("div", "setting-container");
+
+            let titleContainer = container.createChild("div", "setting-name");
+            titleContainer.textContent = title;
+
+            let valueControllerContainer = container.createChild("div", "setting-value-controller");
+            let labelElement = valueControllerContainer.createChild("label");
+            if (typeof createValueController === "function")
+                createValueController(labelElement);
+        };
+
+        let createCheckbox = (setting) => {
+            let checkbox = document.createElement("input");
+            checkbox.type = "checkbox";
+            checkbox.checked = setting.value;
+            checkbox.addEventListener("change", (event) => {
+                setting.value = checkbox.checked;
+            });
+            return checkbox;
+        };
+
+        createContainer(WebInspector.UIString("Prefer indent using:"), (valueControllerContainer) => {
+            let select = valueControllerContainer.createChild("select");
+            select.addEventListener("change", (event) => {
+                WebInspector.settings.indentWithTabs.value = select.value === "tabs";
+            });
+
+            let tabsOption = select.createChild("option");
+            tabsOption.value = "tabs";
+            tabsOption.textContent = WebInspector.UIString("Tabs");
+            tabsOption.selected = WebInspector.settings.indentWithTabs.value;
+
+            let spacesOption = select.createChild("option");
+            spacesOption.value = "spaces";
+            spacesOption.textContent = WebInspector.UIString("Spaces");
+            spacesOption.selected = !WebInspector.settings.indentWithTabs.value;
+        });
+
+        createContainer(WebInspector.UIString("Tab width:"), (valueControllerContainer) => {
+            let input = valueControllerContainer.createChild("input");
+            input.type = "number";
+            input.min = 1;
+            input.value = WebInspector.settings.tabSize.value;
+            input.addEventListener("change", (event) => {
+                WebInspector.settings.tabSize.value = parseInt(input.value) || 4;
+            });
+
+            valueControllerContainer.append(WebInspector.UIString("spaces"));
+        });
+
+        createContainer(WebInspector.UIString("Indent width:"), (valueControllerContainer) => {
+            let input = valueControllerContainer.createChild("input");
+            input.type = "number";
+            input.min = 1;
+            input.value = WebInspector.settings.indentUnit.value;
+            input.addEventListener("change", (event) => {
+                WebInspector.settings.indentUnit.value = parseInt(input.value) || 4;
+            });
+
+            valueControllerContainer.append(WebInspector.UIString("spaces"));
+        });
+
+        createContainer(WebInspector.UIString("Line wrapping:"), (valueControllerContainer) => {
+            let checkbox = createCheckbox(WebInspector.settings.enableLineWrapping);
+            valueControllerContainer.appendChild(checkbox);
+
+            valueControllerContainer.append(WebInspector.UIString("Wrap lines to editor width"));
+        });
+
+        createContainer(WebInspector.UIString("Whitespace Characters:"), (valueControllerContainer) => {
+            let checkbox = createCheckbox(WebInspector.settings.showWhitespaceCharacters);
+            valueControllerContainer.appendChild(checkbox);
+
+            valueControllerContainer.append(WebInspector.UIString("Visible"));
+        });
+
+        createContainer(WebInspector.UIString("Invalid Characters:"), (valueControllerContainer) => {
+            let checkbox = createCheckbox(WebInspector.settings.showInvalidCharacters);
+            valueControllerContainer.appendChild(checkbox);
+
+            valueControllerContainer.append(WebInspector.UIString("Visible"));
+        });
+
+        this.element.appendChild(document.createElement("br"));
+
+        createContainer(WebInspector.UIString("Network:"), (valueControllerContainer) => {
+            let checkbox = createCheckbox(WebInspector.settings.clearNetworkOnNavigate);
+            valueControllerContainer.appendChild(checkbox);
+
+            valueControllerContainer.append(WebInspector.UIString("Clear when page navigates"));
+        });
+
+        this.element.appendChild(document.createElement("br"));
+
+        createContainer(WebInspector.UIString("Console:"), (valueControllerContainer) => {
+            let checkbox = createCheckbox(WebInspector.settings.clearLogOnNavigate);
+            valueControllerContainer.appendChild(checkbox);
+
+            valueControllerContainer.append(WebInspector.UIString("Clear when page navigates"));
+        });
+
+        this.element.appendChild(document.createElement("br"));
+
+        createContainer(WebInspector.UIString("Zoom:"), (valueControllerContainer) => {
+            let select = valueControllerContainer.createChild("select");
+            select.addEventListener("change", (event) => {
+                WebInspector.setZoomFactor(select.value);
+            });
+
+            let currentZoom = WebInspector.getZoomFactor().maxDecimals(1);
+            [0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2, 2.2, 2.4].forEach((level) => {
+                let option = select.createChild("option");
+                option.value = level;
+                option.textContent = Number.percentageString(level, 0);
+                option.selected = currentZoom === level;
+            });
+        });
+
+        if (WebInspector.isDebugUIEnabled()) {
+            this.element.appendChild(document.createElement("br"));
+
+            createContainer(WebInspector.unlocalizedString("Layout Direction:"), (valueControllerContainer) => {
+                let selectElement = valueControllerContainer.appendChild(document.createElement("select"));
+                selectElement.addEventListener("change", (event) => {
+                    WebInspector.setLayoutDirection(selectElement.value);
+                });
+
+                let currentLayoutDirection = WebInspector.settings.layoutDirection.value;
+                let options = new Map([
+                    [WebInspector.LayoutDirection.System, WebInspector.unlocalizedString("System Default")],
+                    [WebInspector.LayoutDirection.LTR, WebInspector.unlocalizedString("Left to Right (LTR)")],
+                    [WebInspector.LayoutDirection.RTL, WebInspector.unlocalizedString("Right to Left (RTL)")],
+                ]);
+
+                for (let [key, value] of options) {
+                    let optionElement = selectElement.appendChild(document.createElement("option"));
+                    optionElement.value = key;
+                    optionElement.textContent = value;
+                    optionElement.selected = currentLayoutDirection === key;
+                }
+            });
+        }
+    }
+};
+
+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..235fc07d3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Sidebar.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.
+ */
+
+.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;
+}
+
+.sidebar.has-navigation-bar > .panel {
+    top: var(--navigation-bar-height);
+}
+
+.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..6071fa6ba
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Sidebar.js
@@ -0,0 +1,297 @@
+/*
+ * 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.selected = false;
+
+        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.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();
+            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 = Math.ceil(Number.constrain(newWidth, this.minimumWidth + 1, this.maximumWidth));
+        this.element.style.width = `${newWidth}px`;
+
+        if (!this.collapsed && this._navigationBar)
+            this._navigationBar.needsLayout();
+
+        if (!this.collapsed && this._selectedSidebarPanel)
+            this._selectedSidebarPanel.updateLayoutIfNeeded(WebInspector.View.LayoutReason.Resize);
+
+        this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange, {newWidth});
+    }
+
+    _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..f31f951e2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.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.SidebarPanel = class SidebarPanel extends WebInspector.View
+{
+    constructor(identifier, displayName, element, role, label)
+    {
+        super(element);
+
+        this._identifier = identifier;
+        this._displayName = displayName;
+        this._selected = false;
+
+        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 displayName()
+    {
+        return this._displayName;
+    }
+
+    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;
+    }
+
+    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;
+    }
+
+    added()
+    {
+        console.assert(this.parentSidebar);
+
+        // Implemented by subclasses.
+    }
+
+    removed()
+    {
+        console.assert(!this.parentSidebar);
+
+        // Implemented by subclasses.
+    }
+
+    shown()
+    {
+        this._contentView.element.scrollTop = this._savedScrollPosition;
+
+        // FIXME: remove once <https://webkit.org/b/150741> is fixed.
+        this.updateLayoutIfNeeded();
+
+        // Implemented by subclasses.
+    }
+
+    hidden()
+    {
+        this._savedScrollPosition = this._contentView.element.scrollTop;
+
+        // 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..ca3b6ef39
--- /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: image-set(url(../Images/SliderThumb.png) 1x, url(../Images/SliderThumb@2x.png) 2x);
+}
+
+.slider > img.dragging {
+    content: 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..8e6754050
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
@@ -0,0 +1,218 @@
+/*
+ * 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 .thread-indicator {
+    background-color: hsla(99, 38%, 86%, 0.5);
+}
+
+.source-code.text-editor > .CodeMirror .line-indicator-widget {
+    float: right;
+    padding: 0 5px 1px 5px;
+    border-bottom-left-radius: 5px;
+    cursor: default;
+}
+
+.source-code.text-editor > .CodeMirror .line-indicator-widget.inline {
+    position: relative;
+    top: -13px;
+    height: 13px;
+    padding: 0px 5px 0 3px;
+    border-bottom-left-radius: 0;
+}
+
+.source-code.text-editor > .CodeMirror .line-indicator-widget > .arrow {
+    display: none;
+}
+
+.source-code.text-editor > .CodeMirror .line-indicator-widget.inline > .arrow {
+    position: absolute;
+    left: -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;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .source-code.text-editor > .CodeMirror .line-indicator-widget.inline > .arrow {
+        left: -5.5px;
+    }
+}
+
+.source-code.text-editor > .CodeMirror .line-indicator-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 .line-indicator-widget > .text {
+    font-family: -apple-system, sans-serif;
+}
+
+.source-code.text-editor > .CodeMirror .line-indicator-widget.inline > .text {
+    display: inline-block;
+    max-width: 300px;
+    vertical-align: baseline;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.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 .thread-widget {
+    background-color: hsl(90, 30%, 82%);
+}
+
+.source-code.text-editor > .CodeMirror .thread-widget.inline {
+    background-color: hsl(90, 30%, 82%);
+}
+
+.source-code.text-editor > .CodeMirror .thread-widget.inline > .arrow {
+    border-right-color: hsl(90, 30%, 82%);
+}
+
+.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 6px 4px 6px;
+    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 {
+    min-width: 200px;
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+.popover .debugger-popover-content.function > .body .CodeMirror {
+    height: auto;
+    background-color: inherit;
+}
+
+.popover .debugger-popover-content.function > .body .CodeMirror pre {
+    padding-left: 0;
+}
+
+/* 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: 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..215bfbc5e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
@@ -0,0 +1,2251 @@
+/*
+ * 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._requestingScriptContent = false;
+        this._activeCallFrameSourceCodeLocation = null;
+
+        this._threadLineNumberMap = new Map; // line -> [targets]
+        this._threadWidgetMap = new Map; // line -> widget
+        this._threadTargetMap = new Map; // target -> line
+
+        this._typeTokenScrollHandler = null;
+        this._typeTokenAnnotator = null;
+        this._basicBlockAnnotator = null;
+        this._editingController = null;
+
+        this._autoFormat = false;
+        this._isProbablyMinified = false;
+
+        this._ignoreContentDidChange = 0;
+        this._ignoreLocationUpdateBreakpoint = null;
+        this._ignoreBreakpointAddedBreakpoint = null;
+        this._ignoreBreakpointRemovedBreakpoint = null;
+        this._ignoreAllBreakpointLocationUpdates = 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.targetManager.addEventListener(WebInspector.TargetManager.Event.TargetAdded, this._targetAdded, this);
+            WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Event.TargetRemoved, this._targetRemoved, 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.CallFramesDidChange, this._callFramesDidChange, 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));
+
+        new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "G", this.showGoToLineDialog.bind(this), this.element);
+
+        WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.Cleared, this._logCleared, this);
+    }
+
+    // Public
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    }
+
+    get target()
+    {
+        if (this._sourceCode instanceof WebInspector.SourceMapResource) {
+            if (this._sourceCode.sourceMap.originalSourceCode instanceof WebInspector.Script)
+                return this._sourceCode.sourceMap.originalSourceCode.target;
+        }
+
+        if (this._sourceCode instanceof WebInspector.Script)
+            return this._sourceCode.target;
+
+        return WebInspector.mainTarget;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        if (WebInspector.showJavaScriptTypeInformationSetting.value) {
+            if (this._typeTokenAnnotator)
+                this._typeTokenAnnotator.resume();
+            if (!this._typeTokenScrollHandler && this._typeTokenAnnotator)
+                this._enableScrollEventsForTypeTokenAnnotator();
+        } else {
+            if (this._typeTokenAnnotator)
+                this._setTypeTokenAnnotatorEnabledState(false);
+        }
+
+        if (WebInspector.enableControlFlowProfilerSetting.value) {
+            if (this._basicBlockAnnotator)
+                this._basicBlockAnnotator.resume();
+
+            if (!this._controlFlowScrollHandler && this._basicBlockAnnotator)
+                this._enableScrollEventsForControlFlowAnnotator();
+        } else {
+            this._basicBlockAnnotatorEnabled = 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()
+    {
+        super.close();
+
+        if (this._supportsDebugging) {
+            WebInspector.Breakpoint.removeEventListener(null, null, this);
+            WebInspector.debuggerManager.removeEventListener(null, null, this);
+            WebInspector.targetManager.removeEventListener(null, null, this);
+
+            if (this._activeCallFrameSourceCodeLocation) {
+                this._activeCallFrameSourceCodeLocation.removeEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
+                this._activeCallFrameSourceCodeLocation = null;
+            }
+        }
+
+        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()
+    {
+        // Type annotations for modified scripts are currently unsupported.
+        return !!this._getAssociatedScript() && !this.hasModified;
+    }
+
+    canShowCoverageHints()
+    {
+        // Code coverage hints for modified scripts are currently unsupported.
+        return !!this._getAssociatedScript() && !this.hasModified;
+    }
+
+    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)
+            this._sourceCode.target.DebuggerAgent.searchInContent(this._sourceCode.id, query, false, false, searchResultCallback.bind(this));
+        return true;
+    }
+
+    showGoToLineDialog()
+    {
+        if (!this._goToLineDialog)
+            this._goToLineDialog = new WebInspector.GoToLineDialog(this);
+
+        this._goToLineDialog.present(this.element);
+    }
+
+    isDialogRepresentedObjectValid(goToLineDialog, lineNumber)
+    {
+        return !isNaN(lineNumber) && lineNumber > 0 && lineNumber <= this.lineCount;
+    }
+
+    dialogWasDismissed(goToLineDialog)
+    {
+        let lineNumber = goToLineDialog.representedObject;
+        let position = new WebInspector.SourceCodePosition(lineNumber - 1, 0);
+        let range = new WebInspector.TextRange(lineNumber - 1, 0, lineNumber, 0);
+
+        this.revealPosition(position, range, false, true);
+        this.focus();
+    }
+
+    contentDidChange(replacedRanges, newRanges)
+    {
+        super.contentDidChange(replacedRanges, newRanges);
+
+        if (this._ignoreContentDidChange > 0)
+            return;
+
+        for (var range of newRanges)
+            this._updateEditableMarkers(range);
+
+        if (this._basicBlockAnnotator) {
+            this._basicBlockAnnotatorEnabled = false;
+            this._basicBlockAnnotator = null;
+        }
+
+        if (this._typeTokenAnnotator) {
+            this._setTypeTokenAnnotatorEnabledState(false);
+            this._typeTokenAnnotator = null;
+        }
+    }
+
+    toggleTypeAnnotations()
+    {
+        if (!this._typeTokenAnnotator)
+            return false;
+
+        var newActivatedState = !this._typeTokenAnnotator.isActive();
+        if (newActivatedState && this._isProbablyMinified && !this.formatted) {
+            return this.updateFormattedState(true).then(() => {
+                this._setTypeTokenAnnotatorEnabledState(newActivatedState);
+            });
+        }
+
+        this._setTypeTokenAnnotatorEnabledState(newActivatedState);
+        return Promise.resolve();
+    }
+
+    toggleUnexecutedCodeHighlights()
+    {
+        if (!this._basicBlockAnnotator)
+            return false;
+
+        let newActivatedState = !this._basicBlockAnnotator.isActive();
+        if (newActivatedState && this._isProbablyMinified && !this.formatted) {
+            return this.updateFormattedState(true).then(() => {
+                this._basicBlockAnnotatorEnabled = newActivatedState;
+            });
+        }
+
+        this._basicBlockAnnotatorEnabled = newActivatedState;
+        return Promise.resolve();
+    }
+
+    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 shouldResumeBasicBlockAnnotator = this._basicBlockAnnotator && this._basicBlockAnnotator.isActive();
+        if (shouldResumeBasicBlockAnnotator)
+            this._basicBlockAnnotatorEnabled = false;
+
+        let shouldResumeTypeTokenAnnotator = this._typeTokenAnnotator && this._typeTokenAnnotator.isActive();
+        if (shouldResumeTypeTokenAnnotator)
+            this._setTypeTokenAnnotatorEnabledState(false);
+
+        return super.prettyPrint(pretty).then(() => {
+            if (pretty || !this._isProbablyMinified) {
+                if (shouldResumeBasicBlockAnnotator)
+                    this._basicBlockAnnotatorEnabled = true;
+
+                if (shouldResumeTypeTokenAnnotator)
+                    this._setTypeTokenAnnotatorEnabledState(true);
+            } else {
+                console.assert(!pretty && this._isProbablyMinified);
+                if (this._basicBlockAnnotator)
+                    this._basicBlockAnnotatorEnabled = false;
+
+                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];
+    }
+
+    _populateWithContent(content)
+    {
+        content = content || "";
+
+        this._prepareEditorForInitialContent(content);
+
+        // If we can auto format, format the TextEditor before showing it.
+        if (this._autoFormat) {
+            console.assert(!this.formatted);
+            this._autoFormat = false;
+            this.deferReveal = true;
+            this.string = content;
+            this.deferReveal = false;
+            this.updateFormattedState(true).then(() => {
+                this._proceedPopulateWithContent(this.string);
+            });
+            return;
+        }
+
+        this._proceedPopulateWithContent(content);
+    }
+
+    _proceedPopulateWithContent(content)
+    {
+        this.dispatchEventToListeners(WebInspector.SourceCodeTextEditor.Event.ContentWillPopulate);
+
+        this.string = content;
+
+        this._createBasicBlockAnnotator();
+        if (WebInspector.enableControlFlowProfilerSetting.value && this._basicBlockAnnotator)
+            this._basicBlockAnnotatorEnabled = true;
+
+        this._createTypeTokenAnnotator();
+        if (WebInspector.showJavaScriptTypeInformationSetting.value)
+            this._setTypeTokenAnnotatorEnabledState(true);
+
+        this._contentDidPopulate();
+    }
+
+    _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._reinsertAllThreadIndicators();
+
+        this._updateEditableMarkers();
+    }
+
+    _prepareEditorForInitialContent(content)
+    {
+        // Only do 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";
+
+        // Decide to automatically format the content if it looks minified and it can be formatted.
+        console.assert(!this.formatted);
+        if (this.canBeFormatted() && isTextLikelyMinified(content)) {
+            this._autoFormat = true;
+            this._isProbablyMinified = true;
+        }
+    }
+
+    _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);
+    }
+
+    _targetAdded(event)
+    {
+        if (WebInspector.targets.size === 2)
+            this._reinsertAllThreadIndicators();
+    }
+
+    _targetRemoved(event)
+    {
+        if (WebInspector.targets.size === 1) {
+            // Back to one thread, remove thread indicators.
+            this._reinsertAllThreadIndicators();
+            return;
+        }
+
+        let target = event.data.target;
+        this._removeThreadIndicatorForTarget(target);
+    }
+
+    _callFramesDidChange(event)
+    {
+        if (WebInspector.targets.size === 1)
+            return;
+
+        let target = event.data.target;
+        this._removeThreadIndicatorForTarget(target);
+        this._addThreadIndicatorForTarget(target);
+    }
+
+    _addThreadIndicatorForTarget(target)
+    {
+        let targetData = WebInspector.debuggerManager.dataForTarget(target);
+        let topCallFrame = targetData.callFrames[0];
+        if (!topCallFrame)
+            return;
+
+        let sourceCodeLocation = topCallFrame.sourceCodeLocation;
+        console.assert(sourceCodeLocation, "Expected source code location to place thread indicator.");
+        if (!sourceCodeLocation)
+            return;
+
+        if (!this._looselyMatchesSourceCodeLocation(sourceCodeLocation))
+            return;
+
+        let lineNumberWithIndicator = sourceCodeLocation.formattedLineNumber;
+        this._threadTargetMap.set(target, lineNumberWithIndicator);
+
+        let threads = this._threadLineNumberMap.get(lineNumberWithIndicator);
+        if (!threads) {
+            threads = [];
+            this._threadLineNumberMap.set(lineNumberWithIndicator, threads);
+        }
+        threads.push(target);
+
+        let widget = this._threadIndicatorWidgetForLine(target, lineNumberWithIndicator);
+        this._updateThreadIndicatorWidget(widget, threads);
+
+        this.addStyleClassToLine(lineNumberWithIndicator, "thread-indicator");
+    }
+
+    _removeThreadIndicatorForTarget(target)
+    {
+        let lineNumberWithIndicator = this._threadTargetMap.take(target);
+        if (lineNumberWithIndicator === undefined)
+            return;
+
+        let threads = this._threadLineNumberMap.get(lineNumberWithIndicator);
+        threads.remove(target);
+        if (threads.length) {
+            let widget = this._threadWidgetMap.get(lineNumberWithIndicator);
+            this._updateThreadIndicatorWidget(widget, threads);
+            return;
+        }
+
+        this._threadLineNumberMap.delete(lineNumberWithIndicator);
+
+        let widget = this._threadWidgetMap.take(lineNumberWithIndicator);
+        if (widget)
+            widget.clear();
+
+        this.removeStyleClassFromLine(lineNumberWithIndicator, "thread-indicator");
+    }
+
+    _threadIndicatorWidgetForLine(target, lineNumber)
+    {
+        let widget = this._threadWidgetMap.get(lineNumber);
+        if (widget)
+            return widget;
+
+        widget = this.createWidgetForLine(lineNumber);
+        if (!widget)
+            return null;
+
+        let widgetElement = widget.widgetElement;
+        widgetElement.classList.add("line-indicator-widget", "thread-widget", "inline");
+        widgetElement.addEventListener("click", this._handleThreadIndicatorWidgetClick.bind(this, widget, lineNumber));
+
+        this._threadWidgetMap.set(lineNumber, widget);
+
+        return widget;
+    }
+
+    _updateThreadIndicatorWidget(widget, threads)
+    {
+        if (!widget)
+            return;
+
+        console.assert(WebInspector.targets.size > 1);
+
+        let widgetElement = widget.widgetElement;
+        widgetElement.removeChildren();
+
+        widget[WebInspector.SourceCodeTextEditor.WidgetContainsMultipleThreadsSymbol] = threads.length > 1;
+
+        if (widgetElement.classList.contains("inline") || threads.length === 1) {
+            let arrowElement = widgetElement.appendChild(document.createElement("span"));
+            arrowElement.className = "arrow";
+
+            let textElement = widgetElement.appendChild(document.createElement("span"));
+            textElement.className = "text";
+            textElement.textContent = threads.length === 1 ? threads[0].displayName : WebInspector.UIString("%d Threads").format(threads.length);
+        } else {
+            for (let target of threads) {
+                let textElement = widgetElement.appendChild(document.createElement("span"));
+                textElement.className = "text";
+                textElement.textContent = target.displayName;
+
+                widgetElement.appendChild(document.createElement("br"));
+            }
+        }
+
+        widget.update();
+    }
+
+    _handleThreadIndicatorWidgetClick(widget, lineNumber, event)
+    {
+        if (!this._isWidgetToggleable(widget))
+            return;
+
+        widget.widgetElement.classList.toggle("inline");
+
+        let threads = this._threadLineNumberMap.get(lineNumber);
+        this._updateThreadIndicatorWidget(widget, threads);
+    }
+
+    _activeCallFrameDidChange()
+    {
+        console.assert(this._supportsDebugging);
+
+        if (this._activeCallFrameSourceCodeLocation) {
+            this._activeCallFrameSourceCodeLocation.removeEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
+            this._activeCallFrameSourceCodeLocation = null;
+        }
+
+        let activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
+        if (!activeCallFrame || !this._matchesSourceCodeLocation(activeCallFrame.sourceCodeLocation)) {
+            this.setExecutionLineAndColumn(NaN, 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).
+
+        let lineInfo = this._editorLineInfoForSourceCodeLocation(activeCallFrame.sourceCodeLocation);
+        this.setExecutionLineAndColumn(lineInfo.lineNumber, 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.setExecutionLineAndColumn(lineInfo.lineNumber, 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;
+
+            this._requestingScriptContent = false;
+
+            // 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;
+            this._requestingScriptContent = false;
+
+            // 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));
+    }
+
+    _looselyMatchesSourceCodeLocation(sourceCodeLocation)
+    {
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return sourceCodeLocation.displaySourceCode === this._sourceCode;
+        if (this._sourceCode instanceof WebInspector.Resource || this._sourceCode instanceof WebInspector.Script)
+            return sourceCodeLocation.sourceCode.url === this._sourceCode.url;
+        return false;
+    }
+
+    _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.contentIdentifier === this._sourceCode.contentIdentifier;
+        if (this._sourceCode instanceof WebInspector.Script)
+            return breakpoint.contentIdentifier === this._sourceCode.contentIdentifier || breakpoint.scriptIdentifier === this._sourceCode.id;
+        return false;
+    }
+
+    _issueWasAdded(event)
+    {
+        var issue = event.data.issue;
+        if (!WebInspector.IssueManager.issueMatchSourceCode(issue, this._sourceCode))
+            return;
+
+        this._addIssue(issue);
+    }
+
+    _addIssue(issue)
+    {
+        var sourceCodeLocation = issue.sourceCodeLocation;
+        console.assert(sourceCodeLocation, "Expected source code location to place issue.");
+        if (!sourceCodeLocation)
+            return;
+
+        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.sourceCodeLocation.columnNumber === sourceCodeLocation.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("line-indicator-widget", "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[WebInspector.SourceCodeTextEditor.WidgetContainsMultipleThreadsSymbol])
+            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;
+    }
+
+    textEditorScriptSourceType(textEditor)
+    {
+        let script = this._getAssociatedScript();
+        return script ? script.sourceType : WebInspector.Script.SourceType.Program;
+    }
+
+    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, 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(breakpoints[0]);
+                });
+            }
+
+            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;
+        const shouldSpeculativelyResolveBreakpoint = true;
+        WebInspector.debuggerManager.addBreakpoint(breakpoint, shouldSpeculativelyResolveBreakpoint);
+        this._ignoreBreakpointAddedBreakpoint = null;
+
+        // 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);
+        this._ignoreBreakpointRemovedBreakpoint = null;
+    }
+
+    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);
+        this._ignoreLocationUpdateBreakpoint = null;
+
+        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;
+        this._ignoreAllBreakpointLocationUpdates = false;
+
+        // 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();
+        this._reinsertAllThreadIndicators();
+    }
+
+    textEditorExecutionHighlightRange(offset, position, characterAtOffset, callback)
+    {
+        let script = this._getAssociatedScript(position);
+        if (!script) {
+            callback(null);
+            return;
+        }
+
+        // If this is an inline script, then convert to offset within the inline script.
+        let adjustment = script.range.startOffset || 0;
+        offset = offset - adjustment;
+
+        // When returning offsets, convert to offsets within the SourceCode being viewed.
+        function convertRangeOffsetsToSourceCodeOffsets(range) {
+            return range.map((offset) => offset + adjustment);
+        }
+
+        script.requestScriptSyntaxTree((syntaxTree) => {
+            let nodes = syntaxTree.containersOfOffset(offset);
+            if (!nodes.length) {
+                callback(null);
+                return;
+            }
+
+            // Find a node starting at this offset.
+            // Avoid highlighting the entire program if this is the start of the first statement.
+            // Special case the assignment expression inside of a for..of and for..in to highlight a larger range.
+            for (let node of nodes) {
+                let startOffset = node.range[0];
+                if (startOffset === offset && node.type !== WebInspector.ScriptSyntaxTree.NodeType.Program) {
+                    callback(convertRangeOffsetsToSourceCodeOffsets(node.range));
+                    return;
+                }
+                if (node.type === WebInspector.ScriptSyntaxTree.NodeType.ForInStatement || node.type === WebInspector.ScriptSyntaxTree.NodeType.ForOfStatement) {
+                    if (node.left.range[0] === offset) {
+                        callback(convertRangeOffsetsToSourceCodeOffsets([node.left.range[0], node.right.range[1]]));
+                        return;
+                    }
+                }
+                if (startOffset > offset)
+                    break;
+            }
+
+            // Find a node ending at this offset. (Leaving a block).
+            // We check this after ensuring nothing starts with this offset,
+            // as that would be more important.
+            for (let node of nodes) {
+                let startOffset = node.range[0];
+                let endOffset = node.range[1];
+                if (endOffset === offset) {
+                    if (node.type === WebInspector.ScriptSyntaxTree.NodeType.BlockStatement) {
+                        // Closing brace of a block, only highlight the closing brace character.
+                        callback(convertRangeOffsetsToSourceCodeOffsets([offset - 1, offset]));
+                        return;
+                    }
+                }
+                if (startOffset > offset)
+                    break;
+            }
+
+            // Find the best container node for this expression.
+            // Sort by the tightest bounds so we can walk from specific to general nodes.
+            nodes.sort((a, b) => {
+                let aLength = a.range[1] - a.range[0];
+                let bLength = b.range[1] - b.range[0];
+                return aLength - bLength;
+            });
+
+            let characterAtOffsetIsDotOrBracket = characterAtOffset === "." || characterAtOffset === "[";
+
+            for (let i = 0; i < nodes.length; ++i) {
+                let node = nodes[i];
+
+                // In a function call.
+                if (node.type === WebInspector.ScriptSyntaxTree.NodeType.CallExpression
+                    || node.type === WebInspector.ScriptSyntaxTree.NodeType.NewExpression
+                    || node.type === WebInspector.ScriptSyntaxTree.NodeType.ThrowStatement) {
+                    callback(convertRangeOffsetsToSourceCodeOffsets(node.range));
+                    return;
+                }
+
+                // In the middle of a member expression we want to highlight the best
+                // member expression range. We can end up in the middle when we are
+                // paused inside of a getter and select the parent call frame. For
+                // these cases we may be at a '.' or '[' and we can find the best member
+                // expression from there.
+                //
+                // Examples:
+                //
+                //     foo*.x.y.z => inside x looking at parent call frame => |foo.x|.y.z
+                //     foo.x*.y.z => inside y looking at parent call frame => |foo.x.y|.z
+                //
+                //     foo*["x"]["y"]["z"] => inside x looking at parent call frame => |foo["x"]|["y"]["z"]
+                //     foo["x"]*["y"]["z"] => inside y looking at parent call frame => |foo["x"]["y"]|["z"]
+                //
+                if (node.type === WebInspector.ScriptSyntaxTree.NodeType.ThisExpression
+                    || (characterAtOffsetIsDotOrBracket && (node.type === WebInspector.ScriptSyntaxTree.NodeType.Identifier || node.type === WebInspector.ScriptSyntaxTree.NodeType.MemberExpression))) {
+                    let memberExpressionNode = null;
+                    for (let j = i + 1; j < nodes.length; ++j) {
+                        let nextNode = nodes[j];
+                        if (nextNode.type === WebInspector.ScriptSyntaxTree.NodeType.MemberExpression) {
+                            memberExpressionNode = nextNode;
+                            if (offset === memberExpressionNode.range[1])
+                                continue;
+                        }
+                        break;
+                    }
+
+                    if (memberExpressionNode) {
+                        callback(convertRangeOffsetsToSourceCodeOffsets(memberExpressionNode.range));
+                        return;
+                    }
+
+                    callback(convertRangeOffsetsToSourceCodeOffsets(node.range));
+                    return;
+                }
+            }
+
+            // No matches, just highlight the line.
+            callback(null);
+        });
+    }
+
+    _clearIssueWidgets()
+    {
+        for (var widget of this._widgetMap.values())
+            widget.clear();
+
+        this._widgetMap.clear();
+    }
+
+    _reinsertAllIssues()
+    {
+        this._issuesLineNumberMap.clear();
+        this._clearIssueWidgets();
+
+        let issues = WebInspector.issueManager.issuesForSourceCode(this._sourceCode);
+        for (let issue of issues)
+            this._addIssue(issue);
+    }
+
+    _reinsertAllThreadIndicators()
+    {
+        // Clear line styles.
+        for (let lineNumber of this._threadLineNumberMap.keys())
+            this.removeStyleClassFromLine(lineNumber, "thread-indicator");
+        this._threadLineNumberMap.clear();
+
+        // Clear widgets.
+        for (let widget of this._threadWidgetMap.values())
+            widget.clear();
+        this._threadWidgetMap.clear();
+
+        // Clear other maps.
+        this._threadTargetMap.clear();
+
+        if (WebInspector.targets.size > 1) {
+            for (let target of WebInspector.targets)
+                this._addThreadIndicatorForTarget(target);
+        }
+    }
+
+    _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;
+
+            let data = WebInspector.RemoteObject.fromPayload(result, this.target);
+            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;
+            }
+        }
+
+        let target = WebInspector.debuggerManager.activeCallFrame ? WebInspector.debuggerManager.activeCallFrame.target : this.target;
+        let expression = appendWebInspectorSourceURL(candidate.expression);
+
+        if (WebInspector.debuggerManager.activeCallFrame) {
+            target.DebuggerAgent.evaluateOnCallFrame.invoke({callFrameId: WebInspector.debuggerManager.activeCallFrame.id, expression, objectGroup: "popover", doNotPauseOnExceptionsAndMuteConsole: true}, populate.bind(this), target.DebuggerAgent);
+            return;
+        }
+
+        // No call frame available. Use the SourceCode's page's context.
+        target.RuntimeAgent.evaluate.invoke({expression, objectGroup: "popover", doNotPauseOnExceptionsAndMuteConsole: true}, populate.bind(this), target.RuntimeAgent);
+    }
+
+    _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(range.start);
+
+        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);
+            }
+        }
+
+        this.target.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 content = document.createElement("div");
+            content.classList.add("function");
+
+            let title = document.createElement("div");
+            title.classList.add("title");
+            title.textContent = response.name || response.displayName || WebInspector.UIString("(anonymous function)");
+            content.appendChild(title);
+
+            let location = response.location;
+            let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId, this.target);
+            let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber);
+            let functionSourceCodeLink = WebInspector.createSourceCodeLocationLink(sourceCodeLocation);
+            title.appendChild(functionSourceCodeLink);
+
+            let wrapper = document.createElement("div");
+            wrapper.classList.add("body");
+            content.appendChild(wrapper);
+
+            let codeMirror = WebInspector.CodeMirrorEditor.create(wrapper, {
+                mode: "text/javascript",
+                readOnly: "nocursor",
+            });
+            codeMirror.on("update", () => {
+                this._popover.update();
+            });
+
+            const isModule = false;
+            const indentString = WebInspector.indentString();
+            const includeSourceMapData = false;
+            let workerProxy = WebInspector.FormatterWorkerProxy.singleton();
+            workerProxy.formatJavaScript(data.description, isModule, indentString, includeSourceMapData, ({formattedText}) => {
+                codeMirror.setValue(formattedText || data.description);
+            });
+
+            this._showPopover(content);
+        }
+
+        data.target.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();
+
+        this.target.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);
+    }
+
+    _hasStyleSheetContents()
+    {
+        let mimeType = this.mimeType;
+        return mimeType === "text/css"
+            || mimeType === "text/x-less"
+            || mimeType === "text/x-sass"
+            || mimeType === "text/x-scss";
+    }
+
+    _updateEditableMarkers(range)
+    {
+        if (this._hasStyleSheetContents()) {
+            this.createColorMarkers(range);
+            this.createGradientMarkers(range);
+            this.createCubicBezierMarkers(range);
+            this.createSpringMarkers(range);
+        }
+
+        this._updateTokenTrackingControllerState();
+    }
+
+    _tokenTrackingControllerHighlightedMarkedExpression(candidate, markers)
+    {
+        // Look for the outermost editable marker.
+        var editableMarker;
+        for (var marker of markers) {
+            if (!marker.range || !Object.values(WebInspector.TextMarker.Type).includes(marker.type))
+                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();
+                this._editingController = null;
+                return;
+            }
+        }
+
+        this._editingController.delegate = this;
+        this._editingController.presentHoverMenu();
+    }
+
+    _dismissEditingController(discrete)
+    {
+        if (this._editingController)
+            this._editingController.dismissHoverMenu(discrete);
+
+        this.tokenTrackingController.hoveredMarker = null;
+        this._editingController = null;
+    }
+
+    // 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--;
+
+        this._editingController = null;
+    }
+
+    _setTypeTokenAnnotatorEnabledState(shouldActivate)
+    {
+        if (!this._typeTokenAnnotator)
+            return;
+
+        if (shouldActivate) {
+            console.assert(this.visible, "Annotators should not be enabled if the TextEditor is not visible");
+
+            this._typeTokenAnnotator.reset();
+
+            if (!this._typeTokenScrollHandler)
+                this._enableScrollEventsForTypeTokenAnnotator();
+        } else {
+            this._typeTokenAnnotator.clear();
+
+            if (this._typeTokenScrollHandler)
+                this._disableScrollEventsForTypeTokenAnnotator();
+        }
+
+        WebInspector.showJavaScriptTypeInformationSetting.value = shouldActivate;
+
+        this._updateTokenTrackingControllerState();
+    }
+
+    set _basicBlockAnnotatorEnabled(shouldActivate)
+    {
+        if (!this._basicBlockAnnotator)
+            return;
+
+        if (shouldActivate) {
+            console.assert(this.visible, "Annotators should not be enabled if the TextEditor is not visible");
+
+            console.assert(!this._basicBlockAnnotator.isActive());
+            this._basicBlockAnnotator.reset();
+
+            if (!this._controlFlowScrollHandler)
+                this._enableScrollEventsForControlFlowAnnotator();
+        } else {
+            this._basicBlockAnnotator.clear();
+
+            if (this._controlFlowScrollHandler)
+                this._disableScrollEventsForControlFlowAnnotator();
+        }
+
+        WebInspector.enableControlFlowProfilerSetting.value = shouldActivate;
+    }
+
+    _getAssociatedScript(position)
+    {
+        let script = null;
+
+        if (this._sourceCode instanceof WebInspector.Script)
+            script = this._sourceCode;
+        else if (this._sourceCode instanceof WebInspector.Resource && this._sourceCode.scripts.length) {
+            if (this._sourceCode.type === WebInspector.Resource.Type.Script)
+                script = this._sourceCode.scripts[0];
+            else if (this._sourceCode.type === WebInspector.Resource.Type.Document && position) {
+                for (let inlineScript of this._sourceCode.scripts) {
+                    if (inlineScript.range.contains(position.lineNumber, position.columnNumber)) {
+                        if (isNaN(inlineScript.range.startOffset))
+                            inlineScript.range.resolveOffsets(this._sourceCode.content);
+                        script = inlineScript;
+                        break;
+                    }
+                }
+            }
+        }
+
+        return script;
+    }
+
+    _createTypeTokenAnnotator()
+    {
+        // 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);
+    }
+
+    _createBasicBlockAnnotator()
+    {
+        // 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._createTypeTokenScrollEventHandler();
+        this.addScrollHandler(this._typeTokenScrollHandler);
+    }
+
+    _enableScrollEventsForControlFlowAnnotator()
+    {
+        console.assert(!this._controlFlowScrollHandler);
+        this._controlFlowScrollHandler = this._createControlFlowScrollEventHandler();
+        this.addScrollHandler(this._controlFlowScrollHandler);
+    }
+
+    _disableScrollEventsForTypeTokenAnnotator()
+    {
+        console.assert(this._typeTokenScrollHandler);
+        this.removeScrollHandler(this._typeTokenScrollHandler);
+        this._typeTokenScrollHandler = null;
+    }
+
+    _disableScrollEventsForControlFlowAnnotator()
+    {
+        console.assert(this._controlFlowScrollHandler);
+        this.removeScrollHandler(this._controlFlowScrollHandler);
+        this._controlFlowScrollHandler = null;
+    }
+
+    _createTypeTokenScrollEventHandler()
+    {
+        let timeoutIdentifier = null;
+        let scrollHandler = () => {
+            if (timeoutIdentifier)
+                clearTimeout(timeoutIdentifier);
+            else {
+                if (this._typeTokenAnnotator)
+                    this._typeTokenAnnotator.pause();
+            }
+
+            timeoutIdentifier = setTimeout(() => {
+                timeoutIdentifier = null;
+                if (this._typeTokenAnnotator)
+                    this._typeTokenAnnotator.resume();
+            }, WebInspector.SourceCodeTextEditor.DurationToUpdateTypeTokensAfterScrolling);
+        };
+
+        return scrollHandler;
+    }
+
+    _createControlFlowScrollEventHandler()
+    {
+        let timeoutIdentifier = null;
+        let scrollHandler = () => {
+            if (timeoutIdentifier)
+                clearTimeout(timeoutIdentifier);
+            else if (this._basicBlockAnnotator)
+                this._basicBlockAnnotator.pause();
+
+            timeoutIdentifier = setTimeout(() => {
+                timeoutIdentifier = null;
+                if (this._basicBlockAnnotator)
+                    this._basicBlockAnnotator.resume();
+            }, WebInspector.SourceCodeTextEditor.DurationToUpdateTypeTokensAfterScrolling);
+        };
+
+        return scrollHandler;
+    }
+
+    _logCleared(event)
+    {
+        for (let lineNumber of this._issuesLineNumberMap.keys()) {
+            this.removeStyleClassFromLine(lineNumber, WebInspector.SourceCodeTextEditor.LineErrorStyleClassName);
+            this.removeStyleClassFromLine(lineNumber, WebInspector.SourceCodeTextEditor.LineWarningStyleClassName);
+        }
+
+        this._issuesLineNumberMap.clear();
+        this._clearIssueWidgets();
+    }
+};
+
+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.WidgetContainsMultipleThreadsSymbol = Symbol("source-code-widget-contains-multiple-threads");
+
+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..c76665427
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTimelineDataGridNode.js
@@ -0,0 +1,106 @@
+/*
+ * 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};
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        if (columnIdentifier === "name" && this.records.length) {
+            cell.classList.add(...this.iconClassNames());
+            return this._createNameCellContent(cell);
+        }
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+
+    // Protected
+
+    filterableDataForColumn(columnIdentifier)
+    {
+        if (columnIdentifier === "name")
+            return this.displayName();
+
+        return super.filterableDataForColumn(columnIdentifier);
+    }
+
+    // Private
+
+    _createNameCellContent(cellElement)
+    {
+        if (!this.records.length)
+            return null;
+
+        let fragment = document.createDocumentFragment();
+        let mainTitle = this.displayName();
+        fragment.append(mainTitle);
+
+        let sourceCodeLocation = this._sourceCodeTimeline.sourceCodeLocation;
+        if (sourceCodeLocation) {
+            let subtitleElement = document.createElement("span");
+            subtitleElement.classList.add("subtitle");
+            sourceCodeLocation.populateLiveDisplayLocationString(subtitleElement, "textContent", null, WebInspector.SourceCodeLocation.NameStyle.None, WebInspector.UIString("line "));
+
+            let goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, false, true);
+            fragment.append(goToArrowButtonLink, subtitleElement);
+
+            // Give the whole cell a tooltip and keep it up to date.
+            sourceCodeLocation.populateLiveDisplayLocationTooltip(cellElement, mainTitle + "\n");
+        } else
+            cellElement.title = mainTitle;
+
+        return fragment;
+    }
+
+    _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..d02bcf889
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js
@@ -0,0 +1,207 @@
+/*
+ * 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);
+
+        let parentTreeElement = childTreeElement.parent;
+
+        let wasParentExpanded = parentTreeElement.expanded;
+        let wasSelected = childTreeElement.selected;
+
+        parentTreeElement.removeChild(childTreeElement, true, true);
+        parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements));
+
+        if (wasParentExpanded)
+            parentTreeElement.expand();
+        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/SpringEditor.css b/Source/WebInspectorUI/UserInterface/Views/SpringEditor.css
new file mode 100644
index 000000000..03e42a784
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SpringEditor.css
@@ -0,0 +1,109 @@
+/*
+ * 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.
+ */
+
+.spring-editor {
+    width: 200px;
+    height: 200px;
+    --spring-editor-horizontal-margin: 5px;
+}
+
+.spring-editor > .spring-preview {
+    width: calc(100% - 10px);
+    height: 25px;
+    margin: 5px var(--spring-editor-horizontal-margin) 0;
+    border-bottom: 1px solid lightgrey;
+}
+
+.spring-editor > .spring-preview > div {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    background-color: var(--selected-background-color);
+    border-radius: 50%;
+}
+
+.spring-editor > .spring-timing {
+    position: relative;
+    margin: -0.5px calc(2 * var(--spring-editor-horizontal-margin)) 10px;
+    padding: 0 1px;
+}
+
+.spring-editor > .spring-timing > div {
+    width: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid black;
+    transition-timing-function: linear;
+}
+
+.spring-editor > .spring-timing:matches(::before, ::after) {
+    position: absolute;
+    top: 2.5px;
+    font-size: 9px;
+}
+
+.spring-editor > .spring-timing::before {
+    left: 0;
+    content: "0s";
+}
+
+.spring-editor > .spring-timing::after {
+    right: 0;
+    content: attr(data-duration) "s";
+}
+
+.spring-editor > :matches(.spring-preview, .spring-timing) > div {
+    transition-property: none;
+}
+
+.spring-editor > .animate:matches(.spring-preview, .spring-timing) > div {
+    transition-property: transform;
+}
+
+.spring-editor > .number-input-container > .number-input-row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 3px;
+}
+
+.spring-editor > .number-input-container > .number-input-row > .number-input-row-title {
+    width: 100%;
+    margin: 5px var(--spring-editor-horizontal-margin) 0;
+}
+
+.spring-editor > .number-input-container > .number-input-row > input {
+    width: calc(25% - 2 * var(--spring-editor-horizontal-margin));
+    text-align: right;
+    margin: 0 var(--spring-editor-horizontal-margin);
+}
+
+.spring-editor > .number-input-container > .number-input-row > input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+
+.spring-editor > .number-input-container > .number-input-row > input[type="range"] {
+    width: calc(75% - 2 * var(--spring-editor-horizontal-margin));
+    background-color: transparent;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SpringEditor.js b/Source/WebInspectorUI/UserInterface/Views/SpringEditor.js
new file mode 100644
index 000000000..e03449360
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SpringEditor.js
@@ -0,0 +1,242 @@
+/*
+ * 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.SpringEditor = class SpringEditor extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._element = document.createElement("div");
+        this._element.classList.add("spring-editor");
+
+        this._previewContainer = this._element.createChild("div", "spring-preview");
+        this._previewContainer.title = WebInspector.UIString("Restart animation");
+        this._previewContainer.addEventListener("mousedown", this._resetPreviewAnimation.bind(this));
+
+        this._previewElement = this._previewContainer.createChild("div");
+        this._previewElement.addEventListener("transitionend", this.debounce(500)._resetPreviewAnimation);
+
+        this._timingContainer = this._element.createChild("div", "spring-timing");
+
+        this._timingElement = this._timingContainer.createChild("div");
+
+        this._numberInputContainer = this._element.createChild("div", "number-input-container");
+
+        function createInputsForParameter(id, title)
+        {
+            let row = this._numberInputContainer.createChild("div", `number-input-row ${id}`);
+
+            row.createChild("div", "number-input-row-title").textContent = title;
+
+            let sliderKey = `_${id}Slider`;
+            this[sliderKey] = row.createChild("input");
+            this[sliderKey].type = "range";
+            this[sliderKey].addEventListener("input", this._handleNumberSliderInput.bind(this));
+            this[sliderKey].addEventListener("mousedown", this._handleNumberSliderMousedown.bind(this));
+            this[sliderKey].addEventListener("mouseup", this._handleNumberSliderMouseup.bind(this));
+
+            let inputKey = `_${id}Input`;
+            this[inputKey] = row.createChild("input");
+            this[inputKey].type = "number";
+            this[inputKey].addEventListener("input", this._handleNumberInputInput.bind(this));
+            this[inputKey].addEventListener("keydown", this._handleNumberInputKeydown.bind(this));
+        }
+
+        createInputsForParameter.call(this, "mass", WebInspector.UIString("Mass"));
+        this._massInput.min = this._massSlider.min = 1;
+
+        createInputsForParameter.call(this, "stiffness", WebInspector.UIString("Stiffness"));
+        this._stiffnessInput.min = this._stiffnessSlider.min = 1;
+
+        createInputsForParameter.call(this, "damping", WebInspector.UIString("Damping"));
+        this._dampingInput.min = this._dampingSlider.min = 0;
+
+        createInputsForParameter.call(this, "initialVelocity", WebInspector.UIString("Initial Velocity"));
+
+        this._spring = new WebInspector.Spring(1, 100, 10, 0);
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get spring()
+    {
+        return this._spring;
+    }
+
+    set spring(spring)
+    {
+        if (!spring)
+            return;
+
+        let isSpring = spring instanceof WebInspector.Spring;
+        console.assert(isSpring);
+        if (!isSpring)
+            return;
+
+        this._spring = spring;
+        this._massInput.value = this._massSlider.value = this._spring.mass;
+        this._stiffnessInput.value = this._stiffnessSlider.value = this._spring.stiffness;
+        this._dampingInput.value = this._dampingSlider.value = this._spring.damping;
+        this._initialVelocityInput.value = this._initialVelocitySlider.value = this._spring.initialVelocity;
+        this._resetPreviewAnimation();
+    }
+
+    // Private
+
+    _handleNumberInputInput(event)
+    {
+        this._changeSpringForInput(event.target, event.target.value);
+    }
+
+    _handleNumberInputKeydown(event)
+    {
+        let shift = 0;
+        if (event.keyIdentifier === "Up")
+            shift = 1;
+         else if (event.keyIdentifier === "Down")
+            shift = -1;
+
+        if (!shift)
+            return;
+
+        if (event.shiftKey)
+            shift *= 10;
+        else if (event.altKey)
+            shift /= 10;
+
+        let value = parseFloat(event.target.value) || 0;
+        this._changeSpringForInput(event.target, value + shift);
+
+        event.preventDefault();
+    }
+
+    _handleNumberSliderInput(event)
+    {
+        this._changeSpringForInput(event.target, event.target.value);
+    }
+
+    _handleNumberSliderMousedown(event)
+    {
+        this._changeSpringForInput(event.target, event.target.value);
+    }
+
+    _handleNumberSliderMouseup(event)
+    {
+        this._changeSpringForInput(event.target, event.target.value);
+    }
+
+    _changeSpringForInput(target, value)
+    {
+        value = parseFloat(value) || 0;
+
+        switch (target) {
+        case this._massInput:
+        case this._massSlider:
+            if (this._spring.mass === value)
+                return;
+
+            this._spring.mass = Math.max(1, value);
+            this._massInput.value = this._massSlider.value = this._spring.mass.maxDecimals(3);
+            break;
+        case this._stiffnessInput:
+        case this._stiffnessSlider:
+            if (this._spring.stiffness === value)
+                return;
+
+            this._spring.stiffness = Math.max(1, value);
+            this._stiffnessInput.value = this._stiffnessSlider.value = this._spring.stiffness.maxDecimals(3);
+            break;
+        case this._dampingInput:
+        case this._dampingSlider:
+            if (this._spring.damping === value)
+                return;
+
+            this._spring.damping = Math.max(0, value);
+            this._dampingInput.value = this._dampingSlider.value = this._spring.damping.maxDecimals(3);
+            break;
+        case this._initialVelocityInput:
+        case this._initialVelocitySlider:
+            if (this._spring.initialVelocity === value)
+                return;
+
+            this._spring.initialVelocity = value;
+            this._initialVelocityInput.value = this._initialVelocitySlider.value = this._spring.initialVelocity.maxDecimals(3);
+            break;
+        default:
+            WebInspector.reportInternalError("Input event fired for unrecognized element");
+            return;
+        }
+
+        this.dispatchEventToListeners(WebInspector.SpringEditor.Event.SpringChanged, {spring: this._spring});
+
+        this._resetPreviewAnimation();
+    }
+
+    _resetPreviewAnimation(event)
+    {
+        this._previewContainer.classList.remove("animate");
+        this._previewElement.style.transitionTimingFunction = null;
+        this._previewElement.style.transform = null;
+
+        this._timingContainer.classList.remove("animate");
+        this._timingElement.style.transform = null;
+
+        // Only reset the duration text when a spring parameter is changed.
+        if (!event)
+            this._timingContainer.dataset.duration = "0";
+
+        this.debounce(500)._updatePreviewAnimation(event);
+    }
+
+    _updatePreviewAnimation(event)
+    {
+        this._previewContainer.classList.add("animate");
+        this._previewElement.style.transform = "translateX(85px)";
+        this._previewElement.style.transitionTimingFunction = this._spring.toString();
+
+        this._timingContainer.classList.add("animate");
+        this._timingElement.style.transform = "translateX(170px)";
+
+        // Only calculate the duration when a spring parameter is changed.
+        if (!event) {
+            let duration = this._spring.calculateDuration();
+
+            this._timingContainer.dataset.duration = duration.toFixed(2);
+            this._timingElement.style.transitionDuration = `${duration}s`;
+
+            this._previewElement.style.transitionDuration = `${duration}s`;
+        }
+    }
+};
+
+WebInspector.SpringEditor.Event = {
+    SpringChanged: "spring-editor-spring-changed"
+};
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..35defef9b
--- /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..d418a9f4a
--- /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: var(--navigation-bar-height);
+}
+
+.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..55f980088
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js
@@ -0,0 +1,381 @@
+/*
+ * 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)
+    {
+        if (!this.visible)
+            return;
+
+        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)
+    {
+        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)
+    {
+        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)
+    {
+        this.contentBrowser.contentViewContainer.closeAllContentViews();
+
+        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..40467f030
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StorageTabContentView.js
@@ -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.
+ */
+
+WebInspector.StorageTabContentView = class StorageTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.StorageTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.GeneralTabBarItem(image, title);
+        let detailsSidebarPanels = [WebInspector.applicationCacheDetailsSidebarPanel, WebInspector.indexedDatabaseDetailsSidebarPanel];
+
+        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;
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        return true;
+    }
+
+    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..6ae8e32ee
--- /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();
+
+        // FIXME: remove once <https://webkit.org/b/150741> is fixed.
+        this.updateLayoutIfNeeded();
+    }
+
+    hidden()
+    {
+        this._visible = false;
+
+        this.cancelLayout();
+    }
+
+    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"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/StyleRuleIcons.css b/Source/WebInspectorUI/UserInterface/Views/StyleRuleIcons.css
new file mode 100644
index 000000000..7b86c30e1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StyleRuleIcons.css
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2013 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.
+ */
+
+.author-style-rule-icon .icon {
+    content: url(../Images/StyleRule.svg#author);
+}
+
+.author-style-rule-icon.pseudo-element-selector .icon {
+    content: url(../Images/StyleRulePseudoElement.svg#author);
+}
+
+.user-style-rule-icon .icon {
+    content: url(../Images/StyleRule.svg#user);
+}
+
+.user-style-rule-icon.pseudo-element-selector .icon {
+    content: url(../Images/StyleRulePseudoElement.svg#user);
+}
+
+.user-agent-style-rule-icon .icon {
+    content: url(../Images/StyleRule.svg#useragent);
+}
+
+.user-agent-style-rule-icon.pseudo-element-selector .icon {
+    content: url(../Images/StyleRulePseudoElement.svg#useragent);
+}
+
+.inspector-style-rule-icon .icon {
+    content: url(../Images/StyleRule.svg#inspector);
+}
+
+.inspector-style-rule-icon.pseudo-element-selector .icon {
+    content: url(../Images/StyleRulePseudoElement.svg#inspector);
+}
+
+.inherited-style-rule-icon .icon {
+    content: url(../Images/StyleRule.svg#inherited);
+}
+
+.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..c808767cf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabBar.css
@@ -0,0 +1,377 @@
+/*
+ * Copyright (C) 2015-2017 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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 {
+    position: absolute;
+    top: var(--toolbar-height);
+    left: 0;
+    right: 0;
+    height: var(--tab-bar-height);
+
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    border-bottom: var(--tab-item-medium-border-style);
+
+    background-image: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
+    background-size: 100% 200%;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    outline: none;
+
+    --tab-item-dark-border-color: hsl(0, 0%, 59%);
+    --tab-item-medium-border-color: hsl(0, 0%, 65%);
+    --tab-item-light-border-color: hsl(0, 0%, 85%);
+    --tab-item-extra-light-border-color: hsl(0, 0%, 92%);
+
+    --tab-item-medium-border-style: 1px solid var(--tab-item-medium-border-color);
+    --tab-item-light-border-style: 1px solid var(--tab-item-light-border-color);
+}
+
+body.window-inactive .tab-bar {
+    border-bottom-color: var(--tab-item-light-border-color);
+
+    background-image: none !important;
+    background-color: var(--tab-item-extra-light-border-color) !important;
+}
+
+.tab-bar > .top-border {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+
+    background-color: var(--tab-item-medium-border-color);
+
+    z-index: 0;
+}
+
+body.window-inactive .tab-bar > .top-border {
+    background-color: var(--tab-item-light-border-color);
+}
+
+.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: var(--tab-item-medium-border-style);
+
+    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; */
+}
+
+body[dir=ltr] .tab-bar > :nth-child(n + 2 of .item),
+body[dir=ltr] .tab-bar.dragging-tab > .item.selected {
+    border-left: var(--tab-item-medium-border-style);
+}
+
+body[dir=rtl] .tab-bar > :nth-child(n + 2 of .item),
+body[dir=rtl] .tab-bar.dragging-tab > .item.selected {
+    border-right: var(--tab-item-medium-border-style);
+}
+
+.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%;
+}
+
+.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover {
+    background-position: 0 100%;
+    border-top-color: var(--tab-item-dark-border-color);
+}
+
+body[dir=ltr] .tab-bar:not(.animating) > .item:not(.selected, .disabled):hover,
+body[dir=ltr] .tab-bar:not(.animating) > .item:not(.selected, .disabled):hover + .item {
+    border-left-color: var(--tab-item-dark-border-color);
+}
+
+body[dir=rtl] .tab-bar:not(.animating) > .item:not(.selected, .disabled):hover,
+body[dir=rtl] .tab-bar:not(.animating) > .item:not(.selected, .disabled):hover + .item {
+    border-right-color: var(--tab-item-dark-border-color);
+}
+
+body.window-inactive .tab-bar > .item {
+    border-top-color: var(--tab-item-light-border-color) !important;
+
+    background-image: none !important;
+    background-color: var(--tab-item-extra-light-border-color) !important;
+
+    transition: none;
+}
+
+body[dir=ltr].window-inactive .tab-bar > .item {
+    border-left-color: var(--tab-item-light-border-color) !important;
+}
+
+body[dir=rtl].window-inactive .tab-bar > .item {
+    border-right-color: var(--tab-item-light-border-color) !important;
+}
+
+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;
+
+    transition-property: background-color, opacity;
+    transition-duration: 250ms, 500ms;
+    transition-delay: 0, 50ms;
+
+    --tab-item-close-button-margin-end: 4px;
+}
+
+body[dir=ltr] .tab-bar > .item > .close {
+    margin-right: var(--tab-item-close-button-margin-end);
+}
+
+body[dir=rtl] .tab-bar > .item > .close {
+    margin-left: var(--tab-item-close-button-margin-end);
+}
+
+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:not(.pinned) > .flex-space:last-child {
+    --tab-item-unpinned-trailing-flex-space-margin-end: 16px;
+}
+
+body[dir=ltr] .tab-bar > .item:not(.pinned) > .flex-space:last-child {
+    margin-right: var(--tab-item-unpinned-trailing-flex-space-margin-end);
+}
+
+body[dir=rtl] .tab-bar > .item:not(.pinned) > .flex-space:last-child {
+    margin-left: var(--tab-item-unpinned-trailing-flex-space-margin-end);
+}
+
+.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.pinned > .icon {
+    width: 15px;
+    height: 15px;
+    min-width: 15px;
+    min-height: 15px;
+}
+
+.tab-bar > .item.selected > .icon {
+    opacity: 0.7;
+}
+
+.tab-bar > .item.disabled > .icon {
+    opacity: 0.35;
+}
+
+.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover > .icon {
+    opacity: 0.6;
+}
+
+.tab-bar > .item > .title {
+    color: hsla(0, 0%, 0%, 0.55);
+
+    display: flex;
+
+    min-width: 0;
+    max-width: 400px;
+
+    --tab-item-title-margin-start: 6px;
+}
+
+body[dir=ltr] .tab-bar > .item > .title {
+    margin-left: var(--tab-item-title-margin-start);
+}
+
+body[dir=rtl] .tab-bar > .item > .title {
+    margin-right: var(--tab-item-title-margin-start);
+}
+
+.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;
+    --tab-item-close-button-margin-end: 0;
+}
+
+body[dir=ltr] .tab-bar.collapsed > .item > .close {
+    margin-right: var(--tab-item-close-button-margin-end);
+}
+
+body[dir=rtl] .tab-bar.collapsed > .item > .close {
+    margin-left: var(--tab-item-close-button-margin-end);
+}
+
+.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: var(--tab-item-medium-border-style);
+}
+
+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: var(--tab-item-light-border-color) !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..d79393d8a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabBar.js
@@ -0,0 +1,764 @@
+/*
+ * 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");
+        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.element.createChild("div", "top-border");
+
+        this._tabBarItems = [];
+
+        if (tabBarItems) {
+            for (let tabBarItem in tabBarItems)
+                this.addTabBarItem(tabBarItem);
+        }
+
+        this.addTabBarItem(WebInspector.settingsTabContentView.tabBarItem, true);
+
+        this._newTabTabBarItem = new WebInspector.PinnedTabBarItem("Images/NewTabPlus.svg", WebInspector.UIString("Create a new tab"));
+        this._newTabTabBarItem.element.addEventListener("mouseenter", this._handleNewTabMouseEnter.bind(this));
+        this._newTabTabBarItem.element.addEventListener("click", this._handleNewTabClick.bind(this));
+        this.addTabBarItem(this._newTabTabBarItem, true);
+    }
+
+    // Public
+
+    get newTabTabBarItem() { return this._newTabTabBarItem; }
+
+    updateNewTabTabBarItemState()
+    {
+        let newTabExists = !WebInspector.isNewTabWithTypeAllowed(WebInspector.NewTabContentView.Type);
+        this._newTabTabBarItem.disabled = newTabExists;
+    }
+
+    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(() => {
+                this.insertTabBarItem(tabBarItem, index, doNotAnimate);
+            });
+            return;
+        }
+
+        if (tabBarItem.parentTabBar)
+            tabBarItem.parentTabBar.removeTabBarItem(tabBarItem);
+
+        tabBarItem.parentTabBar = this;
+
+        index = Number.constrain(index, 0, this.normalTabCount);
+
+        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];
+        let nextSiblingElement = nextSibling ? nextSibling.element : this._tabBarItems.lastValue.element;
+
+        if (this.element.isAncestor(nextSiblingElement))
+            this.element.insertBefore(tabBarItem.element, nextSiblingElement);
+        else
+            this.element.appendChild(tabBarItem.element);
+
+        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();
+
+            let tabBarItems = this._tabBarItemsFromLeftToRight();
+            let previousTabBarItem = tabBarItems[tabBarItems.indexOf(tabBarItem) - 1] || null;
+            let 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();
+
+        if (!(tabBarItem instanceof WebInspector.PinnedTabBarItem))
+            this.updateNewTabTabBarItemState();
+
+        this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemAdded, {tabBarItem});
+
+        return tabBarItem;
+    }
+
+    removeTabBarItem(tabBarItemOrIndex, doNotAnimate, doNotExpand)
+    {
+        let tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
+        if (!tabBarItem || tabBarItem instanceof WebInspector.PinnedTabBarItem)
+            return null;
+
+        tabBarItem.parentTabBar = null;
+
+        if (this._selectedTabBarItem === tabBarItem) {
+            var index = this._tabBarItems.indexOf(tabBarItem);
+            var nextTabBarItem = this._tabBarItems[index + 1];
+            if (!nextTabBarItem || nextTabBarItem instanceof WebInspector.PinnedTabBarItem)
+                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();
+
+        // Subtract 1 from normalTabCount since arrays begin indexing at 0.
+        let wasLastNormalTab = this._tabBarItems.indexOf(tabBarItem) === this.normalTabCount - 1;
+
+        this._tabBarItems.remove(tabBarItem);
+        tabBarItem.element.remove();
+
+        var hasMoreThanOneNormalTab = this._hasMoreThanOneNormalTab();
+        this.element.classList.toggle("single-tab", !hasMoreThanOneNormalTab);
+
+        const shouldOpenDefaultTab = !tabBarItem.isDefaultTab && !this.normalTabCount;
+        if (shouldOpenDefaultTab)
+            doNotAnimate = true;
+
+        if (!hasMoreThanOneNormalTab || wasLastNormalTab || !doNotExpand) {
+            if (!doNotAnimate) {
+                this._tabAnimatedClosedSinceMouseEnter = true;
+                this._finishExpandingTabsAfterClose(beforeTabSizesAndPositions);
+            } else
+                this.needsLayout();
+
+            this.updateNewTabTabBarItemState();
+
+            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");
+
+            // For RTL, we need to place extra space between pinned tab and first normal tab.
+            // From left to right there is pinned tabs, extra space, then normal tabs. Compute
+            // how much extra space we need to additionally add for normal tab items.
+            let extraSpaceBetweenNormalAndPinnedTabs = 0;
+            if (WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL) {
+                extraSpaceBetweenNormalAndPinnedTabs = this.element.getBoundingClientRect().width;
+                for (let currentTabBarItem of this._tabBarItemsFromLeftToRight())
+                    extraSpaceBetweenNormalAndPinnedTabs -= currentTabBarItem.element.getBoundingClientRect().width;
+            }
+
+            let left = 0;
+            for (let currentTabBarItem of this._tabBarItemsFromLeftToRight()) {
+                let sizeAndPosition = beforeTabSizesAndPositions.get(currentTabBarItem);
+
+                if (!(currentTabBarItem instanceof WebInspector.PinnedTabBarItem)) {
+                    currentTabBarItem.element.style.left = extraSpaceBetweenNormalAndPinnedTabs + 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.updateNewTabTabBarItemState();
+
+        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] instanceof WebInspector.PinnedTabBarItem))
+                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] instanceof WebInspector.PinnedTabBarItem))
+                break;
+        } while (newIndex !== startIndex);
+
+        if (newIndex === startIndex)
+            return;
+
+        this.selectedTabBarItem = this._tabBarItems[newIndex];
+    }
+
+    get selectedTabBarItem()
+    {
+        return this._selectedTabBarItem;
+    }
+
+    set selectedTabBarItem(tabBarItemOrIndex)
+    {
+        let tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
+        if (tabBarItem === this._newTabTabBarItem) {
+            // Get the item before the New-Tab item since it is not selectable.
+            tabBarItem = this._tabBarItems[this.normalTabCount - 1];
+        }
+
+        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;
+    }
+
+    get normalTabCount()
+    {
+        return this._tabBarItems.filter((item) => !(item instanceof WebInspector.PinnedTabBarItem)).length;
+    }
+
+    // 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 instanceof WebInspector.PinnedTabBarItem)
+                continue;
+
+            firstNormalTabItem = tabItem;
+            break;
+        }
+
+        if (!firstNormalTabItem)
+            return;
+
+        if (firstNormalTabItem.element.offsetWidth >= 120)
+            return;
+
+        this.element.classList.add("collapsed");
+
+        if (firstNormalTabItem.element.offsetWidth >= 75)
+            return;
+
+        this.element.classList.add("hide-titles");
+    }
+
+    // Private
+
+    _tabBarItemsFromLeftToRight()
+    {
+        return WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.LTR ? this._tabBarItems : this._tabBarItems.slice().reverse();
+    }
+
+    _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()
+    {
+        let normalTabCount = 0;
+        for (let tabBarItem of this._tabBarItems) {
+            if (tabBarItem instanceof WebInspector.PinnedTabBarItem)
+                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;
+
+        let itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.StyleClassName);
+        if (!itemElement)
+            return;
+
+        let tabBarItem = itemElement[WebInspector.TabBarItem.ElementReferenceSymbol];
+        if (!tabBarItem)
+            return;
+
+        if (tabBarItem.disabled)
+            return;
+
+        if (tabBarItem === this._newTabTabBarItem)
+            return;
+
+        let closeButtonElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.CloseButtonStyleClassName);
+        if (closeButtonElement)
+            return;
+
+        this.selectedTabBarItem = tabBarItem;
+
+        if (tabBarItem instanceof WebInspector.PinnedTabBarItem || !this._hasMoreThanOneNormalTab())
+            return;
+
+        this._firstNormalTabItemIndex = 0;
+        for (let i = 0; i < this._tabBarItems.length; ++i) {
+            if (this._tabBarItems[i] instanceof WebInspector.PinnedTabBarItem)
+                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 (let 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;
+        }
+
+        // Subtract 1 from normalTabCount since arrays begin indexing at 0.
+        newIndex = Number.constrain(newIndex, this._firstNormalTabItemIndex, this.normalTabCount - 1);
+
+        if (currentIndex === newIndex)
+            return;
+
+        this._tabBarItems.splice(currentIndex, 1);
+        this._tabBarItems.splice(newIndex, 0, this._selectedTabBarItem);
+
+        let nextSibling = this._tabBarItems[newIndex + 1];
+        let nextSiblingElement = nextSibling ? nextSibling.element : this._newTabTabBarItem.element;
+
+        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.
+
+        let left = 0;
+        for (let tabBarItem of this._tabBarItemsFromLeftToRight()) {
+            if (tabBarItem !== this._selectedTabBarItem && tabBarItem !== this._newTabTabBarItem && 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 {
+            let left = 0;
+            for (let tabBarItem of this._tabBarItemsFromLeftToRight()) {
+                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._newTabTabBarItem.element.getBoundingClientRect();
+        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)
+    {
+        const shouldAnimate = true;
+        WebInspector.showNewTabTab(shouldAnimate);
+    }
+
+    _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",
+    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..3182b9557
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js
@@ -0,0 +1,108 @@
+/*
+ * 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.TabBarItem = class TabBarItem extends WebInspector.Object
+{
+    constructor(image, title, 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;
+        this._element[WebInspector.TabBarItem.ElementReferenceSymbol] = this;
+
+        this._element.createChild("div", "flex-space");
+
+        this._iconElement = document.createElement("img");
+        this._iconElement.classList.add("icon");
+        this._element.appendChild(this._iconElement);
+
+        this._element.createChild("div", "flex-space");
+
+        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 image() { return this._iconElement.src; }
+    set image(url) { this._iconElement.src = url || ""; }
+
+    get title() { return this._element.title || ""; }
+    set title(title) { this._element.title = title || ""; }
+};
+
+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..de872367e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js
@@ -0,0 +1,474 @@
+/*
+ * 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);
+            this._navigationSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, 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._detailsSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
+        }
+
+        this._contentViewContainer = new WebInspector.ContentViewContainer;
+        this.addSubview(this._contentViewContainer);
+
+        let showNextTab = () => { this._showNextTab(); };
+        let showPreviousTab = () => { this._showPreviousTab(); };
+
+        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.addEventListener(WebInspector.TabBar.Event.TabBarItemSelected, this._tabBarItemSelected, this);
+        this._tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemAdded, this._tabBarItemAdded, this);
+        this._tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._tabBarItemRemoved, this);
+        this._tabBar.newTabTabBarItem.addEventListener(WebInspector.PinnedTabBarItem.Event.ContextMenu, this._handleNewTabContextMenu, this);
+
+        this._recentTabContentViews = [];
+        this._closedTabClasses = new Set;
+    }
+
+    // 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, options = {})
+    {
+        console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
+
+        for (var tabContentView of this._recentTabContentViews) {
+            if (options.ignoreSearchTab && tabContentView instanceof WebInspector.SearchTabContentView)
+                continue;
+
+            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;
+
+        let 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.normalTabCount);
+        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.normalTabCount);
+        console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
+
+        return true;
+    }
+
+    // Protected
+
+    layout()
+    {
+        if (this.layoutReason !== WebInspector.View.LayoutReason.Resize)
+            return;
+
+        for (let tabContentView of this._recentTabContentViews)
+            tabContentView[WebInspector.TabBrowser.NeedsResizeLayoutSymbol] = tabContentView !== this.selectedTabContentView;
+    }
+
+    // Private
+
+    _tabBarItemSelected(event)
+    {
+        let tabContentView = this._tabBar.selectedTabBarItem ? this._tabBar.selectedTabBarItem.representedObject : null;
+
+        if (tabContentView) {
+            let isSettingsTab = tabContentView instanceof WebInspector.SettingsTabContentView;
+            if (!isSettingsTab) {
+                this._recentTabContentViews.remove(tabContentView);
+                this._recentTabContentViews.unshift(tabContentView);
+            }
+
+            this._contentViewContainer.showContentView(tabContentView);
+
+            console.assert(this.selectedTabContentView);
+            console.assert(this._recentTabContentViews.length === this._tabBar.normalTabCount);
+            console.assert(this.selectedTabContentView === this._recentTabContentViews[0] || isSettingsTab);
+        } else {
+            this._contentViewContainer.closeAllContentViews();
+
+            console.assert(!this.selectedTabContentView);
+        }
+
+        this._showNavigationSidebarPanelForTabContentView(tabContentView);
+        this._showDetailsSidebarPanelsForTabContentView(tabContentView);
+
+        // If the tab browser was resized prior to showing the tab, the new tab needs to perform a resize layout.
+        if (tabContentView && tabContentView[WebInspector.TabBrowser.NeedsResizeLayoutSymbol]) {
+            tabContentView[WebInspector.TabBrowser.NeedsResizeLayoutSymbol] = false;
+            tabContentView.updateLayout(WebInspector.View.LayoutReason.Resize);
+        }
+
+        this.dispatchEventToListeners(WebInspector.TabBrowser.Event.SelectedTabContentViewDidChange);
+    }
+
+    _tabBarItemAdded(event)
+    {
+        let tabContentView = event.data.tabBarItem.representedObject;
+
+        console.assert(tabContentView);
+        if (!tabContentView)
+            return;
+
+        this._closedTabClasses.delete(tabContentView.constructor);
+    }
+
+    _tabBarItemRemoved(event)
+    {
+        let tabContentView = event.data.tabBarItem.representedObject;
+
+        console.assert(tabContentView);
+        if (!tabContentView)
+            return;
+
+        this._recentTabContentViews.remove(tabContentView);
+
+        if (!tabContentView.constructor.isEphemeral())
+            this._closedTabClasses.add(tabContentView.constructor);
+
+        this._contentViewContainer.closeContentView(tabContentView);
+
+        tabContentView.parentTabBrowser = null;
+
+        console.assert(this._recentTabContentViews.length === this._tabBar.normalTabCount);
+        console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
+    }
+
+    _handleNewTabContextMenu(event)
+    {
+        // The array must be reversed because Sets insert into the end, and we want to display the
+        // most recently closed item first (which is the last item added to the set).
+        let closedTabClasses = Array.from(this._closedTabClasses).reverse();
+        let allTabClasses = Array.from(WebInspector.knownTabClasses());
+        let tabClassesToDisplay = closedTabClasses.concat(allTabClasses.filter((tabClass) => {
+            if (closedTabClasses.includes(tabClass))
+                return false;
+
+            if (tabClass.isEphemeral())
+                return false;
+
+            return WebInspector.isNewTabWithTypeAllowed(tabClass.Type);
+        }));
+        if (!tabClassesToDisplay.length)
+            return;
+
+        let contextMenu = event.data.contextMenu;
+
+        contextMenu.appendItem(WebInspector.UIString("Recently Closed Tabs"), null, true);
+
+        for (let tabClass of tabClassesToDisplay) {
+            contextMenu.appendItem(tabClass.tabInfo().title, () => {
+                WebInspector.createNewTabWithType(tabClass.Type, {shouldShowNewTab: true});
+            });
+        }
+    }
+
+    _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;
+    }
+
+    _sidebarWidthDidChange(event)
+    {
+        if (this._ignoreSidebarEvents || !event.data)
+            return;
+
+        let tabContentView = this.selectedTabContentView;
+        if (!tabContentView)
+            return;
+
+        switch (event.target) {
+        case this._navigationSidebar:
+            tabContentView.navigationSidebarWidthSetting.value = event.data.newWidth;
+            break;
+
+        case this._detailsSidebar:
+            tabContentView.detailsSidebarWidthSetting.value = event.data.newWidth;
+            break;
+        }
+    }
+
+    _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;
+        }
+
+        if (tabContentView.navigationSidebarWidthSetting.value)
+            this._navigationSidebar.width = tabContentView.navigationSidebarWidthSetting.value;
+
+        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.detailsSidebarWidthSetting.value)
+            this._detailsSidebar.width = tabContentView.detailsSidebarWidthSetting.value;
+
+        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.NeedsResizeLayoutSymbol = Symbol("needs-resize-layout");
+
+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..d0a88ab98
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabContentView.js
@@ -0,0 +1,184 @@
+/*
+ * 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((className) => typeof className === "string"));
+        console.assert(tabBarItem instanceof WebInspector.TabBarItem);
+        console.assert(!navigationSidebarPanel || navigationSidebarPanel instanceof WebInspector.NavigationSidebarPanel);
+        console.assert(!detailsSidebarPanels || detailsSidebarPanels.every((detailsSidebarPanel) => 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 || [];
+
+        const defaultSidebarWidth = 300;
+
+        this._navigationSidebarCollapsedSetting = new WebInspector.Setting(identifier + "-navigation-sidebar-collapsed", false);
+        this._navigationSidebarWidthSetting = new WebInspector.Setting(identifier + "-navigation-sidebar-width", defaultSidebarWidth);
+
+        this._detailsSidebarCollapsedSetting = new WebInspector.Setting(identifier + "-details-sidebar-collapsed", true);
+        this._detailsSidebarSelectedPanelSetting = new WebInspector.Setting(identifier + "-details-sidebar-selected-panel", null);
+        this._detailsSidebarWidthSetting = new WebInspector.Setting(identifier + "-details-sidebar-width", defaultSidebarWidth);
+
+        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()
+    {
+        super.shown();
+
+        if (this._shouldRestoreStateWhenShown)
+            this.restoreStateFromCookie(WebInspector.StateRestorationType.Delayed);
+    }
+
+    restoreStateFromCookie(restorationType)
+    {
+        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;
+
+        let cookie = this._cookieSetting.value || {};
+
+        if (this.navigationSidebarPanel)
+            this.navigationSidebarPanel.restoreStateFromCookie(cookie, relaxMatchDelay);
+
+        this.restoreFromCookie(cookie);
+    }
+
+    saveStateToCookie(cookie)
+    {
+        if (this._shouldRestoreStateWhenShown)
+            return;
+
+        cookie = cookie || {};
+
+        if (this.navigationSidebarPanel)
+            this.navigationSidebarPanel.saveStateToCookie(cookie);
+
+        this.saveToCookie(cookie);
+
+        this._cookieSetting.value = cookie;
+    }
+
+    get navigationSidebarPanel() { return this._navigationSidebarPanel; }
+    get navigationSidebarCollapsedSetting() { return this._navigationSidebarCollapsedSetting; }
+    get navigationSidebarWidthSetting() { return this._navigationSidebarWidthSetting; }
+
+    get detailsSidebarPanels() { return this._detailsSidebarPanels; }
+    get detailsSidebarCollapsedSetting() { return this._detailsSidebarCollapsedSetting; }
+    get detailsSidebarSelectedPanelSetting() { return this._detailsSidebarSelectedPanelSetting; }
+    get detailsSidebarWidthSetting() { return this._detailsSidebarWidthSetting; }
+};
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..ab1544424
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextContentView.js
@@ -0,0 +1,172 @@
+/*
+ * 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;
+
+        let toolTipCodeCoverage = WebInspector.UIString("Fade unexecuted code");
+        let activatedToolTipCodeCoverage = WebInspector.UIString("Do not fade unexecuted code");
+        this._codeCoverageButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("code-coverage", toolTipCodeCoverage, activatedToolTipCodeCoverage, "Images/NavigationItemCodeCoverage.svg", 13, 14);
+        this._codeCoverageButtonNavigationItem.enabled = false;
+    }
+
+    // Public
+
+    get textEditor()
+    {
+        return this._textEditor;
+    }
+
+    get navigationItems()
+    {
+        return [this._prettyPrintButtonNavigationItem, this._showTypesButtonNavigationItem, this._codeCoverageButtonNavigationItem];
+    }
+
+    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.updateFormattedState(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..12290e2c1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
@@ -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.
+ */
+
+.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: 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: 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.primary .CodeMirror-linenumber::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: -9px;
+    width: 9px;
+
+    content: "";
+
+    z-index: -1;
+
+    background-image: 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: hsla(99, 38%, 86%, 0.5) !important;
+}
+
+.text-editor > .CodeMirror .execution-line .CodeMirror-matchingbracket {
+    background-color: hsla(90, 30%, 82%, 0.7);
+    border-bottom: 1px dotted hsl(78, 18%, 58%);
+}
+
+.text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext) {
+    background-color: hsl(90, 30%, 82%);
+}
+
+.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..7754f32ef
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextEditor.js
@@ -0,0 +1,1663 @@
+/*
+ * 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);
+
+        this._codeMirror = WebInspector.CodeMirrorEditor.create(this.element, {
+            readOnly: true,
+            indentWithTabs: WebInspector.settings.indentWithTabs.value,
+            indentUnit: WebInspector.settings.indentUnit.value,
+            tabSize: WebInspector.settings.tabSize.value,
+            lineNumbers: true,
+            lineWrapping: WebInspector.settings.enableLineWrapping.value,
+            matchBrackets: true,
+            autoCloseBrackets: true,
+            showWhitespaceCharacters: WebInspector.settings.showWhitespaceCharacters.value,
+            styleSelectedText: true,
+        });
+
+        WebInspector.settings.indentWithTabs.addEventListener(WebInspector.Setting.Event.Changed, (event) => {
+            this._codeMirror.setOption("indentWithTabs", WebInspector.settings.indentWithTabs.value);
+        });
+
+        WebInspector.settings.indentUnit.addEventListener(WebInspector.Setting.Event.Changed, (event) => {
+            this._codeMirror.setOption("indentUnit", WebInspector.settings.indentUnit.value);
+        });
+
+        WebInspector.settings.tabSize.addEventListener(WebInspector.Setting.Event.Changed, (event) => {
+            this._codeMirror.setOption("tabSize", WebInspector.settings.tabSize.value);
+        });
+
+        WebInspector.settings.enableLineWrapping.addEventListener(WebInspector.Setting.Event.Changed, (event) => {
+            this._codeMirror.setOption("lineWrapping", WebInspector.settings.enableLineWrapping.value);
+        });
+
+        WebInspector.settings.showWhitespaceCharacters.addEventListener(WebInspector.Setting.Event.Changed, (event) => {
+            this._codeMirror.setOption("showWhitespaceCharacters", WebInspector.settings.showWhitespaceCharacters.value);
+        });
+
+        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._executionLineHandle = null;
+        this._executionMultilineHandles = [];
+        this._executionRangeHighlightMarker = null;
+
+        this._searchQuery = null;
+        this._searchResults = [];
+        this._currentSearchResultIndex = -1;
+        this._ignoreCodeMirrorContentDidChangeEvent = 0;
+
+        this._formatted = false;
+        this._formattingPromise = null;
+        this._formatterSourceMap = null;
+        this._deferReveal = false;
+
+        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");
+
+            if (this._codeMirror.getValue() !== newString) {
+                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.");
+            } else {
+                // Ensure we at display content even if the value did not change. This often happens when auto formatting.
+                this.layout();
+            }
+
+            if (this._initialStringNotSet) {
+                this._codeMirror.clearHistory();
+                this._codeMirror.markClean();
+                this._initialStringNotSet = false;
+            }
+
+            // Update the execution line now that we might have content for that line.
+            this._updateExecutionLine();
+            this._updateExecutionRangeHighlight();
+
+            // 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;
+    }
+
+    get hasModified()
+    {
+        let historySize = this._codeMirror.historySize().undo;
+
+        // Formatting code creates a history item.
+        if (this._formatted)
+            historySize--;
+
+        return historySize > 0;
+    }
+
+    updateFormattedState(formatted)
+    {
+        return this._format(formatted).catch(handlePromiseException);
+    }
+
+    hasFormatter()
+    {
+        let mode = this._codeMirror.getMode().name;
+        return mode === "javascript" || mode === "css";
+    }
+
+    canBeFormatted()
+    {
+        // Can be overriden by subclasses.
+        return this.hasFormatter();
+    }
+
+    canShowTypeAnnotations()
+    {
+        return false;
+    }
+
+    canShowCoverageHints()
+    {
+        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", {name: newMIMEType, globalVars: true});
+    }
+
+    get executionLineNumber()
+    {
+        return this._executionLineNumber;
+    }
+
+    get executionColumnNumber()
+    {
+        return this._executionColumnNumber;
+    }
+
+    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();
+        }
+    }
+
+    set deferReveal(defer)
+    {
+        this._deferReveal = defer;
+    }
+
+    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();
+    }
+
+    setExecutionLineAndColumn(lineNumber, columnNumber)
+    {
+        // 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._executionColumnNumber = columnNumber;
+
+        if (!this._initialStringNotSet) {
+            this._updateExecutionLine();
+            this._updateExecutionRangeHighlight();
+        }
+
+        // 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);
+    }
+
+    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;
+
+        if (!this._visible || this._initialStringNotSet || this._deferReveal) {
+            // 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.updateFormattedState(false).then(() => {
+                setTimeout(this.revealPosition.bind(this), 0, position, textRangeToSelect);
+            });
+            return;
+        }
+
+        let line = Number.constrain(position.lineNumber, 0, this._codeMirror.lineCount() - 1);
+        let lineHandle = this._codeMirror.getLineHandle(line);
+
+        if (!textRangeToSelect) {
+            let column = Number.constrain(position.columnNumber, 0, this._codeMirror.getLine(line).length - 1);
+            textRangeToSelect = new WebInspector.TextRange(line, column, line, column);
+        }
+
+        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;
+
+            // Avoid highlighting the execution line while debugging.
+            if (WebInspector.debuggerManager.paused && (!this._executionLineNumber || line === this._executionLineNumber))
+                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;
+    }
+
+    close()
+    {
+        WebInspector.settings.indentWithTabs.removeEventListener(null, null, this);
+        WebInspector.settings.indentUnit.removeEventListener(null, null, this);
+        WebInspector.settings.tabSize.removeEventListener(null, null, this);
+        WebInspector.settings.enableLineWrapping.removeEventListener(null, null, this);
+        WebInspector.settings.showWhitespaceCharacters.removeEventListener(null, null, this);
+    }
+
+    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);
+    }
+
+    createSpringMarkers(range)
+    {
+        return createCodeMirrorSpringTextMarkers(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);
+        case WebInspector.TextMarker.Type.Spring:
+            return new WebInspector.CodeMirrorSpringEditingController(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)
+    {
+        let offset = null;
+
+        if (this._formatterSourceMap)
+            offset = this._formatterSourceMap.formattedToOriginalOffset(position.line, position.ch);
+        else
+            offset = this._codeMirror.getDoc().indexFromPos(position);
+
+        return offset;
+    }
+
+    currentPositionToOriginalPosition(position)
+    {
+        if (!this._formatterSourceMap)
+            return position;
+
+        let location = this._formatterSourceMap.formattedToOriginal(position.line, position.ch);
+        return {line: location.lineNumber, ch: location.columnNumber};
+    }
+
+    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();
+    }
+
+    _format(formatted)
+    {
+        if (this._formatted === formatted)
+            return Promise.resolve(this._formatted);
+
+        console.assert(!formatted || this.canBeFormatted());
+        if (formatted && !this.canBeFormatted())
+            return Promise.resolve(this._formatted);
+
+        if (this._formattingPromise)
+            return this._formattingPromise;
+
+        this._ignoreCodeMirrorContentDidChangeEvent++;
+        this._formattingPromise = this.prettyPrint(formatted).then(() => {
+            this._ignoreCodeMirrorContentDidChangeEvent--;
+            console.assert(this._ignoreCodeMirrorContentDidChangeEvent >= 0);
+
+            this._formattingPromise = null;
+
+            let originalFormatted = this._formatted;
+            this._formatted = !!this._formatterSourceMap;
+
+            if (this._formatted !== originalFormatted)
+                this.dispatchEventToListeners(WebInspector.TextEditor.Event.FormattingDidChange);
+
+            return this._formatted;
+        });
+
+        return this._formattingPromise;
+    }
+
+    prettyPrint(pretty)
+    {
+        return new Promise((resolve, reject) => {
+            let beforePrettyPrintState = {
+                selectionAnchor: this._codeMirror.getCursor("anchor"),
+                selectionHead: this._codeMirror.getCursor("head"),
+            };
+
+            if (!pretty)
+                this._undoFormatting(beforePrettyPrintState, resolve);
+            else if (this._canUseFormatterWorker())
+                this._startWorkerPrettyPrint(beforePrettyPrintState, resolve);
+            else
+                this._startCodeMirrorPrettyPrint(beforePrettyPrintState, resolve);
+        });
+    }
+
+    _canUseFormatterWorker()
+    {
+        return this._codeMirror.getMode().name === "javascript";
+    }
+
+    _startWorkerPrettyPrint(beforePrettyPrintState, callback)
+    {
+        let sourceText = this._codeMirror.getValue();
+        let indentString = WebInspector.indentString();
+        const includeSourceMapData = true;
+
+        let sourceType = this._delegate.textEditorScriptSourceType(this);
+        const isModule = sourceType === WebInspector.Script.SourceType.Module;
+
+        let workerProxy = WebInspector.FormatterWorkerProxy.singleton();
+        workerProxy.formatJavaScript(sourceText, isModule, indentString, includeSourceMapData, ({formattedText, sourceMapData}) => {
+            // Handle if formatting failed, which is possible for invalid programs.
+            if (formattedText === null) {
+                callback();
+                return;
+            }
+            this._finishPrettyPrint(beforePrettyPrintState, formattedText, sourceMapData, callback);
+        });
+    }
+
+    _startCodeMirrorPrettyPrint(beforePrettyPrintState, callback)
+    {
+        let indentString = WebInspector.indentString();
+        let start = {line: 0, ch: 0};
+        let end = {line: this._codeMirror.lineCount() - 1};
+        let builder = new FormatterContentBuilder(indentString);
+        let formatter = new WebInspector.Formatter(this._codeMirror, builder);
+        formatter.format(start, end);
+
+        let formattedText = builder.formattedContent;
+        let sourceMapData = builder.sourceMapData;
+        this._finishPrettyPrint(beforePrettyPrintState, formattedText, sourceMapData, callback);
+    }
+
+    _finishPrettyPrint(beforePrettyPrintState, formattedText, sourceMapData, callback)
+    {
+        this._codeMirror.operation(() => {
+            this._formatterSourceMap = WebInspector.FormatterSourceMap.fromSourceMapData(sourceMapData);
+            this._codeMirror.setValue(formattedText);
+            this._updateAfterFormatting(true, beforePrettyPrintState);
+        });
+
+        callback();
+    }
+
+    _undoFormatting(beforePrettyPrintState, callback)
+    {
+        this._codeMirror.operation(() => {
+            this._codeMirror.undo();
+            this._updateAfterFormatting(false, beforePrettyPrintState);
+        });
+
+        callback();
+    }
+
+    _updateAfterFormatting(pretty, beforePrettyPrintState)
+    {
+        let oldSelectionAnchor = beforePrettyPrintState.selectionAnchor;
+        let oldSelectionHead = beforePrettyPrintState.selectionHead;
+        let newSelectionAnchor, newSelectionHead;
+        let newExecutionLocation = null;
+
+        if (pretty) {
+            if (this._positionToReveal) {
+                let newRevealPosition = this._formatterSourceMap.originalToFormatted(this._positionToReveal.lineNumber, this._positionToReveal.columnNumber);
+                this._positionToReveal = new WebInspector.SourceCodePosition(newRevealPosition.lineNumber, newRevealPosition.columnNumber);
+            }
+
+            if (this._textRangeToSelect) {
+                let mappedRevealSelectionStart = this._formatterSourceMap.originalToFormatted(this._textRangeToSelect.startLine, this._textRangeToSelect.startColumn);
+                let 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);
+            }
+
+            let mappedAnchorLocation = this._formatterSourceMap.originalToFormatted(oldSelectionAnchor.line, oldSelectionAnchor.ch);
+            let mappedHeadLocation = this._formatterSourceMap.originalToFormatted(oldSelectionHead.line, oldSelectionHead.ch);
+            newSelectionAnchor = {line: mappedAnchorLocation.lineNumber, ch: mappedAnchorLocation.columnNumber};
+            newSelectionHead = {line: mappedHeadLocation.lineNumber, ch: mappedHeadLocation.columnNumber};
+        } else {
+            if (this._positionToReveal) {
+                let newRevealPosition = this._formatterSourceMap.formattedToOriginal(this._positionToReveal.lineNumber, this._positionToReveal.columnNumber);
+                this._positionToReveal = new WebInspector.SourceCodePosition(newRevealPosition.lineNumber, newRevealPosition.columnNumber);
+            }
+
+            if (this._textRangeToSelect) {
+                let mappedRevealSelectionStart = this._formatterSourceMap.formattedToOriginal(this._textRangeToSelect.startLine, this._textRangeToSelect.startColumn);
+                let 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);
+            }
+
+            let mappedAnchorLocation = this._formatterSourceMap.formattedToOriginal(oldSelectionAnchor.line, oldSelectionAnchor.ch);
+            let 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) {
+            this._executionLineHandle = null;
+            this._executionMultilineHandles = [];
+            this.setExecutionLineAndColumn(newExecutionLocation.lineNumber, newExecutionLocation.columnNumber);
+        }
+
+        // FIXME: <rdar://problem/13129955> FindBanner: New searches should not lose search position (start from current selection/caret)
+        if (this.currentSearchQuery) {
+            let 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(() => { this.performSearch(searchQuery); }, 0);
+        }
+
+        if (this._delegate && typeof this._delegate.textEditorUpdatedFormatting === "function")
+            this._delegate.textEditorUpdatedFormatting(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);
+
+        let scrollHandler = () => {
+            if (this._bouncyHighlightElement)
+                this._bouncyHighlightElement.remove();
+        };
+
+        this.addScrollHandler(scrollHandler);
+
+        function animationEnded()
+        {
+            if (!this._bouncyHighlightElement)
+                return;
+
+            this._bouncyHighlightElement.remove();
+            delete this._bouncyHighlightElement;
+
+            this.removeScrollHandler(scrollHandler);
+        }
+
+        // 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();
+        }
+    }
+
+    _clearMultilineExecutionLineHighlights()
+    {
+        if (this._executionMultilineHandles.length) {
+            for (let lineHandle of this._executionMultilineHandles)
+                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.ExecutionLineStyleClassName);
+            this._executionMultilineHandles = [];
+        }
+    }
+
+    _updateExecutionLine()
+    {
+        this._codeMirror.operation(() => {
+            if (this._executionLineHandle) {
+                this._codeMirror.removeLineClass(this._executionLineHandle, "wrap", WebInspector.TextEditor.ExecutionLineStyleClassName);
+                this._codeMirror.removeLineClass(this._executionLineHandle, "wrap", "primary");
+            }
+
+            this._clearMultilineExecutionLineHighlights();
+
+            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.addLineClass(this._executionLineHandle, "wrap", "primary");
+                this._codeMirror.removeLineClass(this._executionLineHandle, "wrap", WebInspector.TextEditor.HighlightedStyleClassName);
+            }
+        });
+    }
+
+    _updateExecutionRangeHighlight()
+    {
+        if (this._executionRangeHighlightMarker) {
+            this._executionRangeHighlightMarker.clear();
+            this._executionRangeHighlightMarker = null;
+        }
+
+        if (isNaN(this._executionLineNumber))
+            return;
+
+        let currentPosition = {line: this._executionLineNumber, ch: this._executionColumnNumber};
+        let originalOffset = this.currentPositionToOriginalOffset(currentPosition);
+        let originalCodeMirrorPosition = this.currentPositionToOriginalPosition(currentPosition);
+        let originalPosition = new WebInspector.SourceCodePosition(originalCodeMirrorPosition.line, originalCodeMirrorPosition.ch);
+        let characterAtOffset = this._codeMirror.getRange(currentPosition, {line: this._executionLineNumber, ch: this._executionColumnNumber + 1});
+
+        this._delegate.textEditorExecutionHighlightRange(originalOffset, originalPosition, characterAtOffset, (range) => {
+            let start, end;
+            if (!range) {
+                // Highlight the rest of the line.
+                start = {line: this._executionLineNumber, ch: this._executionColumnNumber};
+                end = {line: this._executionLineNumber};
+            } else {
+                // Highlight the range.
+                start = this.originalOffsetToCurrentPosition(range[0]);
+                end = this.originalOffsetToCurrentPosition(range[1]);
+            }
+
+            // Ensure the marker is cleared in case there were multiple updates very quickly.
+            if (this._executionRangeHighlightMarker) {
+                this._executionRangeHighlightMarker.clear();
+                this._executionRangeHighlightMarker = null;
+            }
+
+            // Avoid highlighting trailing whitespace.
+            let text = this._codeMirror.getRange(start, end);
+            let trailingWhitespace = text.match(/\s+$/);
+            if (trailingWhitespace)
+                end.ch = Math.max(0, end.ch - trailingWhitespace[0].length);
+
+            // Give each line containing part of the range the full line style.
+            this._clearMultilineExecutionLineHighlights();
+            if (start.line !== end.line) {
+                for (let line = start.line; line < end.line; ++line) {
+                    let lineHandle = this._codeMirror.getLineHandle(line);
+                    this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.ExecutionLineStyleClassName);
+                    this._executionMultilineHandles.push(lineHandle);
+                }
+            }
+
+            this._executionRangeHighlightMarker = this._codeMirror.markText(start, end, {className: "execution-range-highlight"});
+        });
+    }
+
+    _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/Views/TextNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/TextNavigationItem.css
new file mode 100644
index 000000000..ca29e8c07
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextNavigationItem.css
@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+.navigation-bar .item.text {
+    width: auto;
+    padding: 1px 8px 3px;
+    margin: 0 2px;
+
+    line-height: 11px;
+    color: hsl(0, 0%, 18%);
+    text-align: center;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TextNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/TextNavigationItem.js
new file mode 100644
index 000000000..1ab2e55e3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextNavigationItem.js
@@ -0,0 +1,49 @@
+/*
+ * 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.TextNavigationItem = class TextNavigationItem extends WebInspector.NavigationItem
+{
+    constructor(identifier, label)
+    {
+        super(identifier);
+
+        console.assert(identifier);
+
+        this._element.classList.add("text");
+        this._element.textContent = label || "";
+    }
+
+    // Public
+
+    get text()
+    {
+        return this._element.textContent;
+    }
+
+    set text(x)
+    {
+        this._element.textContent = x || "";
+    }
+};
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..267a8e4a9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextResourceContentView.js
@@ -0,0 +1,282 @@
+/*
+ * 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);
+
+        let toolTipCodeCoverage = WebInspector.UIString("Fade unexecuted code");
+        let activatedToolTipCodeCoverage = WebInspector.UIString("Do not fade unexecuted code");
+        this._codeCoverageButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("code-coverage", toolTipCodeCoverage, activatedToolTipCodeCoverage, "Images/NavigationItemCodeCoverage.svg", 13, 14);
+        this._codeCoverageButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleUnexecutedCodeHighlights, this);
+        this._codeCoverageButtonNavigationItem.enabled = false;
+        WebInspector.enableControlFlowProfilerSetting.addEventListener(WebInspector.Setting.Event.Changed, this._enableControlFlowProfilerSettingChanged, this);
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._prettyPrintButtonNavigationItem, this._showTypesButtonNavigationItem, this._codeCoverageButtonNavigationItem];
+    }
+
+    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.contentIdentifier === probeSet.breakpoint.contentIdentifier;
+        }, 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);
+        WebInspector.enableControlFlowProfilerSetting.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;
+
+        this._codeCoverageButtonNavigationItem.enabled = this._textEditor.canShowCoverageHints();
+        this._codeCoverageButtonNavigationItem.activated = WebInspector.enableControlFlowProfilerSetting.value;
+    }
+
+    _togglePrettyPrint(event)
+    {
+        var activated = !this._prettyPrintButtonNavigationItem.activated;
+        this._textEditor.updateFormattedState(activated);
+    }
+
+    _toggleTypeAnnotations(event)
+    {
+        this._showTypesButtonNavigationItem.enabled = false;
+        this._textEditor.toggleTypeAnnotations().then(() => {
+            this._showTypesButtonNavigationItem.enabled = true;
+        });
+    }
+
+    _toggleUnexecutedCodeHighlights(event)
+    {
+        this._codeCoverageButtonNavigationItem.enabled = false;
+        this._textEditor.toggleUnexecutedCodeHighlights().then(() => {
+            this._codeCoverageButtonNavigationItem.enabled = true;
+        });
+    }
+
+    _showJavaScriptTypeInformationSettingChanged(event)
+    {
+        this._showTypesButtonNavigationItem.activated = WebInspector.showJavaScriptTypeInformationSetting.value;
+    }
+
+    _enableControlFlowProfilerSettingChanged(event)
+    {
+        this._codeCoverageButtonNavigationItem.activated = WebInspector.enableControlFlowProfilerSetting.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/TextToggleButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/TextToggleButtonNavigationItem.css
new file mode 100644
index 000000000..9a68840c6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextToggleButtonNavigationItem.css
@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+.navigation-bar .item.text-toggle.button.text-only {
+    width: auto;
+    height: 17px;
+    margin: auto;
+    margin-left: 8px;
+    margin-right: 8px;
+}
+
+.navigation-bar .item.text-toggle.button.text-only:hover {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color-hover);
+}
+
+.navigation-bar .item.text-toggle.button.text-only.selected {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color);
+}
+
+.navigation-bar .item.text-toggle.button.text-only:active {
+    color: var(--selected-foreground-color);
+    background-color: hsla(212, 92%, 54%, 0.55);
+}
+
+.navigation-bar .item.text-toggle.button.text-only.selected:active {
+    background-color: var(--selected-background-color-active);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TextToggleButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/TextToggleButtonNavigationItem.js
new file mode 100644
index 000000000..9db5f6b6a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextToggleButtonNavigationItem.js
@@ -0,0 +1,62 @@
+/*
+ * 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.
+ */
+
+{
+    const selectedStyleClassName = "selected";
+
+    WebInspector.TextToggleButtonNavigationItem = class TextToggleButtonNavigationItem extends WebInspector.ButtonNavigationItem
+    {
+        constructor(identifier, title)
+        {
+            super(identifier, title);
+
+            this._title = title;
+        }
+
+        // Public
+
+        get title()
+        {
+            return this._title;
+        }
+
+        get activated()
+        {
+            return this.element.classList.contains(selectedStyleClassName);
+        }
+
+        set activated(flag)
+        {
+            this.element.classList.toggle(selectedStyleClassName, flag);
+        }
+
+        // Protected
+
+        get additionalClassNames()
+        {
+            return ["text-toggle", "button"];
+        }
+    };
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.css
new file mode 100644
index 000000000..459d9186a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.css
@@ -0,0 +1,67 @@
+/*
+ * 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 > .item.thread .icon {
+    content: url(../Images/Thread.svg);
+    width: 15px;
+    height: 15px;
+}
+
+.tree-outline > .item.thread .status-button.resume {
+    width: 11px;
+    height: 11px;
+    vertical-align: middle;
+    fill: hsla(0, 0%, 0%, 0.5);
+    stroke: none;
+    display: none;
+}
+
+.tree-outline > .item.thread .status-button.resume:active {
+    fill: hsla(0, 0%, 0%, 0.7);
+}
+
+.tree-outline:matches(:focus, .force-focus) > .item.thread.selected .status-button.resume {
+    fill: var(--selected-foreground-color);
+}
+
+.tree-outline > .item.thread.selected .status-button.resume,
+.tree-outline > .item.thread:hover .status-button.resume {
+    display: inline-block;
+}
+
+.tree-outline > .item.thread + ol > .item.truncated-call-frames {
+    color: var(--text-color-gray-medium);
+    border-top: dashed 0.5px var(--border-color);
+    margin-left: 31px;
+    margin-right: 6px;
+    padding-left: 0;
+    cursor: default;
+}
+
+.tree-outline > .item.thread + ol > .item.truncated-call-frames .icon {
+    margin-left: 0;
+    content: url(../Images/Function.svg);
+    opacity: 0.6;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.js
new file mode 100644
index 000000000..0ff45d1be
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.js
@@ -0,0 +1,153 @@
+/*
+ * 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.ThreadTreeElement = class ThreadTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(target)
+    {
+        super("thread", target.displayName);
+
+        this._target = target;
+
+        this._idleTreeElement = new WebInspector.IdleTreeElement;
+    }
+
+    // Public
+
+    get target() { return this._target; }
+
+    refresh()
+    {
+        this.removeChildren();
+
+        this._updateStatus();
+
+        let targetData = WebInspector.debuggerManager.dataForTarget(this._target);
+        let callFrames = targetData.callFrames;
+
+        if (targetData.pausing || !callFrames.length) {
+            this.appendChild(this._idleTreeElement);
+            this.expand();
+            return;
+        }
+
+        let activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
+        let activeCallFrameTreeElement = null;
+
+        for (let callFrame of callFrames) {
+            let callFrameTreeElement = new WebInspector.CallFrameTreeElement(callFrame);
+            if (callFrame === activeCallFrame)
+                activeCallFrameTreeElement = callFrameTreeElement;
+            this.appendChild(callFrameTreeElement);
+        }
+
+        if (activeCallFrameTreeElement) {
+            activeCallFrameTreeElement.select(true, true);
+            activeCallFrameTreeElement.isActiveCallFrame = true;
+        }
+
+        let currentStackTrace = targetData.asyncStackTrace;
+        while (currentStackTrace) {
+            console.assert(currentStackTrace.callFrames.length, "StackTrace should have non-empty call frames array.");
+            if (!currentStackTrace.callFrames.length)
+                break;
+
+            let boundaryCallFrame;
+            if (currentStackTrace.topCallFrameIsBoundary) {
+                boundaryCallFrame = currentStackTrace.callFrames[0];
+                console.assert(boundaryCallFrame.nativeCode && !boundaryCallFrame.sourceCodeLocation);
+            } else {
+                // Create a generic native CallFrame for the asynchronous boundary.
+                const functionName = WebInspector.UIString("(async)");
+                const nativeCode = true;
+                boundaryCallFrame = new WebInspector.CallFrame(null, null, null, functionName, null, null, nativeCode);
+            }
+
+            const isAsyncBoundaryCallFrame = true;
+            this.appendChild(new WebInspector.CallFrameTreeElement(boundaryCallFrame, isAsyncBoundaryCallFrame));
+
+            let startIndex = currentStackTrace.topCallFrameIsBoundary ? 1 : 0;
+            for (let i = startIndex; i < currentStackTrace.callFrames.length; ++i)
+                this.appendChild(new WebInspector.CallFrameTreeElement(currentStackTrace.callFrames[i]));
+
+            if (currentStackTrace.truncated) {
+                let truncatedTreeElement = new WebInspector.GeneralTreeElement("truncated-call-frames", WebInspector.UIString("Call Frames Truncated"));
+                truncatedTreeElement.selectable = false;
+                this.appendChild(truncatedTreeElement);
+            }
+
+            currentStackTrace = currentStackTrace.parentStackTrace;
+        }
+
+        this.expand();
+    }
+
+    // Protected (GeneralTreeElement)
+
+    onattach()
+    {
+        super.onattach();
+
+        this.refresh();
+        this.expand();
+    }
+
+    populateContextMenu(contextMenu, event)
+    {
+        let targetData = WebInspector.debuggerManager.dataForTarget(this._target);
+
+        contextMenu.appendItem(WebInspector.UIString("Resume Thread"), () => {
+            WebInspector.debuggerManager.continueUntilNextRunLoop(this._target);
+        }, !targetData.paused);
+
+        super.populateContextMenu(contextMenu, event);
+    }
+
+    // Private
+
+    _updateStatus()
+    {
+        this.status = null;
+
+        if (!this.element)
+            return;
+
+        let targetData = WebInspector.debuggerManager.dataForTarget(this._target);
+        if (!targetData.paused)
+            return;
+
+        if (!this._statusButton) {
+            let tooltip = WebInspector.UIString("Resume Thread");
+            this._statusButton = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/Resume.svg", "resume", tooltip));
+            this._statusButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, () => { WebInspector.debuggerManager.continueUntilNextRunLoop(this._target); });
+            this._statusButton.element.addEventListener("mousedown", (event) => {
+                // Prevent tree element from being selected.
+                event.stopPropagation();
+            });
+        }
+
+        this.status = this._statusButton.element;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
new file mode 100644
index 000000000..89e86d42a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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.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;
+}
+
+.data-grid.timeline th {
+    border-top: none;
+}
+
+.data-grid.timeline th.graph-column > .timeline-ruler {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+}
+
+.data-grid.timeline td.graph-column {
+    padding: 2px 0;
+}
+
+.data-grid.timeline td.graph-column > .cell-content {
+    position: relative;
+}
+
+.data-grid.timeline td.graph-column .timeline-record-bar {
+    top: 2px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js
new file mode 100644
index 000000000..01f112590
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js
@@ -0,0 +1,534 @@
+/*
+ * 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(columns, treeOutline, synchronizerDelegate, editCallback, deleteCallback)
+    {
+        super(columns, editCallback, deleteCallback);
+
+        if (treeOutline)
+            this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(treeOutline, this, synchronizerDelegate);
+
+        this.element.classList.add("timeline");
+
+        this._sortDelegate = null;
+        this._scopeBarColumns = [];
+
+        // Check if any of the cells can be filtered.
+        for (var [identifier, column] of this.columns) {
+            var scopeBar = column.scopeBar;
+
+            if (!scopeBar)
+                continue;
+
+            this._scopeBarColumns.push(identifier);
+            scopeBar.columnIdentifier = identifier;
+            scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectedItemsDidChange, this);
+        }
+
+        if (this._scopeBarColumns.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);
+
+        this.columnChooserEnabled = true;
+    }
+
+    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
+
+    get sortDelegate()
+    {
+        return this._sortDelegate;
+    }
+
+    set sortDelegate(delegate)
+    {
+        delegate = delegate || null;
+        if (this._sortDelegate === delegate)
+            return;
+
+        this._sortDelegate = delegate;
+
+        if (this.sortOrder !== WebInspector.DataGrid.SortOrder.Indeterminate)
+            this.dispatchEventToListeners(WebInspector.DataGrid.Event.SortChanged);
+    }
+
+    reset()
+    {
+        // May be overridden by subclasses. If so, they should call the superclass.
+
+        if (!this._treeOutlineDataGridSynchronizer)
+            this.removeChildren();
+
+        this._hidePopover();
+    }
+
+    shown()
+    {
+        // May be overridden by subclasses. If so, they should call the superclass.
+
+        if (this._treeOutlineDataGridSynchronizer)
+            this._treeOutlineDataGridSynchronizer.synchronize();
+    }
+
+    hidden()
+    {
+        // May be overridden by subclasses. If so, they should call the superclass.
+
+        this._hidePopover();
+    }
+
+    treeElementForDataGridNode(dataGridNode)
+    {
+        if (!this._treeOutlineDataGridSynchronizer)
+            return null;
+
+        return this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
+    }
+
+    dataGridNodeForTreeElement(treeElement)
+    {
+        if (!this._treeOutlineDataGridSynchronizer)
+            return null;
+
+        return this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(treeElement);
+    }
+
+    callFramePopoverAnchorElement()
+    {
+        // Implemented by subclasses.
+        return null;
+    }
+
+    addRowInSortOrder(treeElement, dataGridNode, parentTreeElementOrDataGridNode)
+    {
+        let parentDataGridNode;
+        let childElement = dataGridNode;
+
+        if (treeElement) {
+            console.assert(this._treeOutlineDataGridSynchronizer);
+            if (!this._treeOutlineDataGridSynchronizer)
+                return;
+
+            this._treeOutlineDataGridSynchronizer.associate(treeElement, dataGridNode);
+
+            console.assert(!parentTreeElementOrDataGridNode || parentTreeElementOrDataGridNode instanceof WebInspector.TreeElement);
+
+            let parentTreeElement = parentTreeElementOrDataGridNode || this._treeOutlineDataGridSynchronizer.treeOutline;
+            parentDataGridNode = parentTreeElement.root ? this : this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(parentTreeElement);
+
+            parentTreeElementOrDataGridNode = parentTreeElement;
+            childElement = treeElement;
+        } else {
+            parentTreeElementOrDataGridNode = parentTreeElementOrDataGridNode || this;
+            parentDataGridNode = parentTreeElementOrDataGridNode;
+        }
+
+        if (this.sortColumnIdentifier) {
+            let insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, parentDataGridNode.children, this._sortComparator.bind(this));
+
+            // If parent is a tree element, the synchronizer will insert into the data grid.
+            parentTreeElementOrDataGridNode.insertChild(childElement, insertionIndex);
+        } else {
+            // If parent is a tree element, the synchronizer will append to the data grid.
+            parentTreeElementOrDataGridNode.appendChild(childElement);
+        }
+    }
+
+    shouldIgnoreSelectionEvent()
+    {
+        return this._ignoreSelectionEvent || false;
+    }
+
+    // Protected
+
+    dataGridNodeNeedsRefresh(dataGridNode)
+    {
+        if (!this._dirtyDataGridNodes)
+            this._dirtyDataGridNodes = new Set;
+        this._dirtyDataGridNodes.add(dataGridNode);
+
+        if (this._scheduledDataGridNodeRefreshIdentifier)
+            return;
+
+        this._scheduledDataGridNodeRefreshIdentifier = requestAnimationFrame(this._refreshDirtyDataGridNodes.bind(this));
+    }
+
+    hasCustomFilters()
+    {
+        return true;
+    }
+
+    matchNodeAgainstCustomFilters(node)
+    {
+        if (!super.matchNodeAgainstCustomFilters(node))
+            return false;
+
+        for (let identifier of this._scopeBarColumns) {
+            let scopeBar = this.columns.get(identifier).scopeBar;
+            if (!scopeBar || scopeBar.defaultItem.selected)
+                continue;
+
+            let value = node.data[identifier];
+            if (!scopeBar.selectedItems.some((scopeBarItem) => scopeBarItem.value === value))
+                return false;
+        }
+
+        return true;
+    }
+
+    // Private
+
+    _refreshDirtyDataGridNodes()
+    {
+        if (this._scheduledDataGridNodeRefreshIdentifier) {
+            cancelAnimationFrame(this._scheduledDataGridNodeRefreshIdentifier);
+            this._scheduledDataGridNodeRefreshIdentifier = undefined;
+        }
+
+        if (!this._dirtyDataGridNodes)
+            return;
+
+        let selectedNode = this.selectedNode;
+        let sortComparator = this._sortComparator.bind(this);
+
+        if (this._treeOutlineDataGridSynchronizer)
+            this._treeOutlineDataGridSynchronizer.enabled = false;
+
+        for (let dataGridNode of this._dirtyDataGridNodes) {
+            dataGridNode.refresh();
+
+            if (!this.sortColumnIdentifier)
+                continue;
+
+            if (dataGridNode === selectedNode)
+                this._ignoreSelectionEvent = true;
+
+            console.assert(!dataGridNode.parent || dataGridNode.parent === this);
+            if (dataGridNode.parent === this)
+                this.removeChild(dataGridNode);
+
+            let insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this.children, sortComparator);
+            this.insertChild(dataGridNode, insertionIndex);
+
+            if (dataGridNode === selectedNode) {
+                selectedNode.revealAndSelect();
+                this._ignoreSelectionEvent = false;
+            }
+
+            if (!this._treeOutlineDataGridSynchronizer)
+                continue;
+
+            let treeOutline = this._treeOutlineDataGridSynchronizer.treeOutline;
+            let treeElement = this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
+            console.assert(treeElement);
+
+            console.assert(!treeElement.parent || treeElement.parent === treeOutline);
+            if (treeElement.parent === treeOutline)
+                treeOutline.removeChild(treeElement);
+
+            treeOutline.insertChild(treeElement, 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 (this._treeOutlineDataGridSynchronizer)
+            this._treeOutlineDataGridSynchronizer.enabled = true;
+
+        this._dirtyDataGridNodes = null;
+    }
+
+    _sort()
+    {
+        if (!this.children.length)
+            return;
+
+        let sortColumnIdentifier = this.sortColumnIdentifier;
+        if (!sortColumnIdentifier)
+            return;
+
+        let selectedNode = this.selectedNode;
+        this._ignoreSelectionEvent = true;
+
+        let treeOutline;
+        if (this._treeOutlineDataGridSynchronizer) {
+            this._treeOutlineDataGridSynchronizer.enabled = false;
+
+            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.
+        let parentDataGridNodes = [this];
+        let 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 (let parentDataGridNode of parentDataGridNodes) {
+            let childDataGridNodes = parentDataGridNode.children.slice();
+            parentDataGridNode.removeChildren();
+
+            let parentTreeElement;
+            if (this._treeOutlineDataGridSynchronizer) {
+                parentTreeElement = parentDataGridNode === this ? treeOutline : this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(parentDataGridNode);
+                console.assert(parentTreeElement);
+
+                parentTreeElement.removeChildren();
+            }
+
+            childDataGridNodes.sort(this._sortComparator.bind(this));
+
+            for (let dataGridNode of childDataGridNodes) {
+                if (this._treeOutlineDataGridSynchronizer) {
+                    let treeElement = this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
+                    console.assert(treeElement);
+
+                    if (parentTreeElement)
+                        parentTreeElement.appendChild(treeElement);
+
+                    // 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);
+                }
+
+                parentDataGridNode.appendChild(dataGridNode);
+            }
+        }
+
+        if (this._treeOutlineDataGridSynchronizer)
+            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;
+
+        if (this._sortDelegate && typeof this._sortDelegate.dataGridSortComparator === "function") {
+            let result = this._sortDelegate.dataGridSortComparator(sortColumnIdentifier, sortDirection, node1, node2);
+            if (typeof result === "number")
+                return result;
+        }
+
+        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 || "" : "";
+        }
+
+        if (value1 instanceof WebInspector.SourceCodeLocation || value2 instanceof WebInspector.SourceCodeLocation) {
+            value1 = value1 ? value1.displayLocationString() || "" : "";
+            value2 = value2 ? value2.displayLocationString() || "" : "";
+        }
+
+        // For everything else (mostly booleans).
+        return (value1 < value2 ? -1 : (value1 > value2 ? 1 : 0)) * sortDirection;
+    }
+
+    _scopeBarSelectedItemsDidChange(event)
+    {
+        this.filterDidChange();
+    }
+
+    _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();
+    }
+
+    _showPopoverForSelectedNodeSoon()
+    {
+        if (this._showPopoverTimeout)
+            return;
+
+        this._showPopoverTimeout = setTimeout(() => {
+            if (!this._popover) {
+                this._popover = new WebInspector.Popover;
+                this._popover.windowResizeHandler = () => { this._updatePopoverForSelectedNode(false); };
+            }
+            this._updatePopoverForSelectedNode(true);
+            this._showPopoverTimeout = undefined;
+        }, WebInspector.TimelineDataGrid.DelayedPopoverShowTimeout);
+    }
+
+    _hidePopover()
+    {
+        if (this._showPopoverTimeout) {
+            clearTimeout(this._showPopoverTimeout);
+            this._showPopoverTimeout = undefined;
+        }
+
+        if (this._popover)
+            this._popover.dismiss();
+
+        if (this._hidePopoverContentClearTimeout)
+            clearTimeout(this._hidePopoverContentClearTimeout);
+
+        this._hidePopoverContentClearTimeout = setTimeout(() => {
+            if (this._popoverCallStackTreeOutline)
+                this._popoverCallStackTreeOutline.removeChildren();
+        }, WebInspector.TimelineDataGrid.DelayedPopoverHideContentClearTimeout);
+    }
+
+    _updatePopoverForSelectedNode(updateContent)
+    {
+        if (!this._popover || !this.selectedNode)
+            return;
+
+        let targetPopoverElement = this.callFramePopoverAnchorElement();
+        console.assert(targetPopoverElement, "TimelineDataGrid subclass should always return a valid element from callFramePopoverAnchorElement.");
+        if (!targetPopoverElement)
+            return;
+
+        // The element might be hidden if it does not have a width and height.
+        let rect = WebInspector.Rect.rectFromClientRect(targetPopoverElement.getBoundingClientRect());
+        if (!rect.size.width && !rect.size.height)
+            return;
+
+        if (this._hidePopoverContentClearTimeout) {
+            clearTimeout(this._hidePopoverContentClearTimeout);
+            this._hidePopoverContentClearTimeout = undefined;
+        }
+
+        let targetFrame = rect.pad(2);
+        let preferredEdges = [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X];
+
+        if (updateContent)
+            this._popover.presentNewContentWithFrame(this._createPopoverContent(), targetFrame, preferredEdges);
+        else
+            this._popover.present(targetFrame, preferredEdges);
+    }
+
+    _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;
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js
new file mode 100644
index 000000000..6255260f3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js
@@ -0,0 +1,401 @@
+/*
+ * 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(includesGraph, graphDataSource, hasChildren)
+    {
+        super({}, hasChildren);
+
+        this.copyable = false;
+
+        this._includesGraph = includesGraph || false;
+        this._graphDataSource = graphDataSource || null;
+
+        if (graphDataSource) {
+            this._graphContainerElement = document.createElement("div");
+            this._timelineRecordBars = [];
+        }
+    }
+
+    // Public
+
+    get record()
+    {
+        return this.records && this.records.length ? this.records[0] : null;
+    }
+
+    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 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);
+
+                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._includesGraph)
+            this.needsGraphRefresh();
+
+        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);
+                this.didAddRecordBar(timelineRecordBar);
+            }
+            ++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].element.remove();
+            this.didRemoveRecordBar(this._timelineRecordBars[recordBarIndex]);
+            this._timelineRecordBars[recordBarIndex].records = null;
+        }
+    }
+
+    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));
+    }
+
+    displayName()
+    {
+        // Can be overridden by subclasses.
+        const includeDetails = true;
+        return WebInspector.TimelineTabContentView.displayNameForRecord(this.record, true);
+    }
+
+    iconClassNames()
+    {
+        // Can be overridden by subclasses.
+        return [WebInspector.TimelineTabContentView.iconClassNameForRecord(this.record)];
+    }
+
+    // Protected
+
+    createGoToArrowButton(cellElement, callback)
+    {
+        function buttonClicked(event)
+        {
+            if (this.hidden || !this.revealed)
+                return;
+
+            event.stopPropagation();
+
+            callback(this, cellElement.__columnIdentifier);
+        }
+
+        let button = WebInspector.createGoToArrowButton();
+        button.addEventListener("click", buttonClicked.bind(this));
+
+        let contentElement = cellElement.firstChild;
+        contentElement.appendChild(button);
+    }
+
+    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;
+    }
+
+    filterableDataForColumn(columnIdentifier)
+    {
+        let value = this.data[columnIdentifier];
+        if (value instanceof WebInspector.SourceCodeLocation)
+            return value.displayLocationString();
+
+        if (value instanceof WebInspector.CallFrame)
+            return [value.functionName, value.sourceCodeLocation.displayLocationString()];
+
+        return super.filterableDataForColumn(columnIdentifier);
+    }
+
+    didAddRecordBar(recordBar)
+    {
+        // Implemented by subclasses.
+    }
+
+    didRemoveRecordBar(recordBar)
+    {
+        // Implemented by subclasses.
+    }
+
+    didResizeColumn(columnIdentifier)
+    {
+        if (columnIdentifier !== "graph")
+            return;
+
+        this.needsGraphRefresh();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNodePathComponent.js b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNodePathComponent.js
new file mode 100644
index 000000000..1c319f1b4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNodePathComponent.js
@@ -0,0 +1,65 @@
+/*
+ * 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.TimelineDataGridNodePathComponent = class TimelineDataGridNodePathComponent extends WebInspector.HierarchicalPathComponent
+{
+    constructor(timelineDataGridNode, representedObject)
+    {
+        super(timelineDataGridNode.displayName(), timelineDataGridNode.iconClassNames(), representedObject || timelineDataGridNode.record);
+
+        this._timelineDataGridNode = timelineDataGridNode;
+    }
+
+    // Public
+
+    get timelineDataGridNode()
+    {
+        return this._timelineDataGridNode;
+    }
+
+    get previousSibling()
+    {
+        let previousSibling = this._timelineDataGridNode.previousSibling;
+        while (previousSibling && previousSibling.hidden)
+            previousSibling = previousSibling.previousSibling;
+
+        if (!previousSibling)
+            return null;
+
+        return new WebInspector.TimelineDataGridNodePathComponent(previousSibling);
+    }
+
+    get nextSibling()
+    {
+        let nextSibling = this._timelineDataGridNode.nextSibling;
+        while (nextSibling && nextSibling.hidden)
+            nextSibling = nextSibling.nextSibling;
+
+        if (!nextSibling)
+            return null;
+
+        return new WebInspector.TimelineDataGridNodePathComponent(nextSibling);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css b/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
new file mode 100644
index 000000000..9cac987e2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
@@ -0,0 +1,118 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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);
+}
+
+.heap-allocations-icon .icon {
+    content: url(../Images/HeapAllocationsInstrument.svg);
+}
+
+.layout-icon .icon {
+    content: url(../Images/LayoutInstrument.svg);
+}
+
+.rendering-frame-icon .icon {
+    content: url(../Images/RenderingFramesInstrument.svg);
+}
+
+.stopwatch-icon .icon {
+    content: url(../Images/Stopwatch.svg);
+}
+
+.time-icon .icon {
+    content: url(../Images/Timeline.svg);
+    width: 13px;
+    opacity: 0.6;
+}
+
+.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);
+}
+
+.heap-snapshot-record .icon {
+    content: url(../Images/HeapSnapshot.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
new file mode 100644
index 000000000..6b39887f1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
@@ -0,0 +1,218 @@
+/*
+ * 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.
+ */
+
+.timeline-overview {
+    --timeline-sidebar-width: 197px;
+}
+
+.timeline-overview > .navigation-bar.timelines {
+    justify-content: flex-start;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--timeline-sidebar-width);
+    height: 23px;
+
+    box-sizing: border-box;
+    z-index: var(--z-index-header);
+
+    background-color: white;
+    border-right: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):matches(:focus, .activate.activated, .radio.selected) {
+    color: var(--glyph-color-active);
+}
+
+.navigation-bar.timelines .item.button.toggle-edit-instruments:not(.disabled):active:matches(:focus, .activate.activated, .radio.selected) {
+    color: var(--glyph-color-active-pressed);
+}
+
+.navigation-bar.timelines .item.button.toggle-edit-instruments.disabled {
+    color: var(--glyph-color-disabled);
+}
+
+.navigation-bar.timelines .toggle-edit-instruments:not(.disabled):active {
+    color: var(--glyph-color-pressed);
+}
+
+.timeline-overview > .tree-outline.timelines {
+    position: absolute;
+    top: 23px;
+    left: 0;
+    width: var(--timeline-sidebar-width);
+    z-index: var(--z-index-header);
+    background-color: var(--panel-background-color);
+    border-right: 1px solid var(--border-color);
+}
+
+.timeline-overview.edit-instruments > .tree-outline.timelines {
+    bottom: 0;
+}
+
+.timeline-overview.edit-instruments > .tree-outline.timelines .item.selected {
+    color: initial;
+    background-color: transparent;
+}
+
+.timeline-overview > .tree-outline.timelines .close-button {
+    width: 14px;
+
+    visibility: hidden;
+}
+
+.timeline-overview > .tree-outline.timelines .item.selected .close-button {
+    visibility: visible;
+}
+
+.timeline-overview > .tree-outline.timelines input[type=checkbox].status-button {
+    width: 12px;
+    height: 12px;
+}
+
+.timeline-overview.edit-instruments > .tree-outline.timelines .item:nth-child(even),
+.timeline-overview > .tree-outline.timelines .item:not(.selected):nth-child(even) {
+    background-color: hsla(0, 0%, 0%, 0.03);
+    background-clip: padding-box;
+}
+
+.timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),
+.timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
+    border-top: 1px solid hsla(0, 0%, 0%, 0.09);
+}
+
+.timeline-overview > .tree-outline.timelines .item.selected + .item {
+    border-top-color: hsl(0, 0%, 83%);
+}
+
+body.window-inactive .timeline-overview > .tree-outline.timelines .item.selected + .item {
+    border-top-color: hsl(0, 0%, 83%);
+}
+
+.timeline-overview > .tree-outline.timelines :focus .item.selected + .item {
+    border-top-color: hsl(209, 100%, 49%);
+}
+
+.timeline-overview > .scroll-container {
+    position: absolute;
+    left: var(--timeline-sidebar-width);
+    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.frames > :matches(.tree-outline.timelines, .navigation-bar.timelines) {
+    display: none;
+}
+
+.timeline-overview.frames > .scroll-container {
+    left: 0;
+}
+
+.timeline-overview:hover > .scroll-container {
+    opacity: 0.75;
+}
+
+.timeline-overview > .scroll-container:hover {
+    opacity: 1;
+}
+
+.timeline-overview > .timeline-ruler {
+    position: absolute;
+    top: 0;
+    left: var(--timeline-sidebar-width);
+    bottom: 0;
+    right: 0;
+}
+
+.timeline-overview.frames > .timeline-ruler {
+    left: 0;
+}
+
+.timeline-overview > .timeline-ruler > .markers {
+    top: 23px;
+}
+
+.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: 23px;
+    left: var(--timeline-sidebar-width);
+    bottom: 0;
+    right: 0;
+}
+
+.timeline-overview.frames > .graphs-container {
+    left: 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..9f09d01ef
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js
@@ -0,0 +1,1011 @@
+/*
+ * Copyright (C) 2013, 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.TimelineOverview = class TimelineOverview extends WebInspector.View
+{
+    constructor(timelineRecording, delegate)
+    {
+        super();
+
+        console.assert(timelineRecording instanceof WebInspector.TimelineRecording);
+
+        this._timelinesViewModeSettings = this._createViewModeSettings(WebInspector.TimelineOverview.ViewMode.Timelines, WebInspector.TimelineOverview.MinimumDurationPerPixel, WebInspector.TimelineOverview.MaximumDurationPerPixel, 0.01, 0, 15);
+        this._instrumentTypes = WebInspector.TimelineManager.availableTimelineTypes();
+
+        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._delegate = delegate;
+
+        this.element.classList.add("timeline-overview");
+        this._updateWheelAndGestureHandlers();
+
+        this._graphsContainerView = new WebInspector.View;
+        this._graphsContainerView.element.classList.add("graphs-container");
+        this.addSubview(this._graphsContainerView);
+
+        this._overviewGraphsByTypeMap = new Map;
+
+        this._editInstrumentsButton = new WebInspector.ActivateButtonNavigationItem("toggle-edit-instruments", WebInspector.UIString("Edit configuration"), WebInspector.UIString("Save configuration"));
+        this._editInstrumentsButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleEditingInstruments, this);
+        this._editingInstruments = false;
+        this._updateEditInstrumentsButton();
+
+        let instrumentsNavigationBar = new WebInspector.NavigationBar;
+        instrumentsNavigationBar.element.classList.add("timelines");
+        instrumentsNavigationBar.addNavigationItem(new WebInspector.FlexibleSpaceNavigationItem);
+        instrumentsNavigationBar.addNavigationItem(this._editInstrumentsButton);
+        this.addSubview(instrumentsNavigationBar);
+
+        this._timelinesTreeOutline = new WebInspector.TreeOutline;
+        this._timelinesTreeOutline.element.classList.add("timelines");
+        this._timelinesTreeOutline.disclosureButtons = false;
+        this._timelinesTreeOutline.large = true;
+        this._timelinesTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._timelinesTreeSelectionDidChange, this);
+        this.element.appendChild(this._timelinesTreeOutline.element);
+
+        this._treeElementsByTypeMap = 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;
+        this._selectedTimeline = null;
+
+        for (let instrument of this._recording.instruments)
+            this._instrumentAdded(instrument);
+
+        if (!WebInspector.timelineManager.isCapturingPageReload())
+            this._resetSelection();
+
+        this._viewModeDidChange();
+
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStarted, this);
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
+    }
+
+    // Public
+
+    get selectedTimeline()
+    {
+        return this._selectedTimeline;
+    }
+
+    set selectedTimeline(x)
+    {
+        if (this._editingInstruments)
+            return;
+
+        if (this._selectedTimeline === x)
+            return;
+
+        this._selectedTimeline = x;
+        if (this._selectedTimeline) {
+            let treeElement = this._treeElementsByTypeMap.get(this._selectedTimeline.type);
+            console.assert(treeElement, "Missing tree element for timeline", this._selectedTimeline);
+
+            let omitFocus = true;
+            let wasSelectedByUser = false;
+            treeElement.select(omitFocus, wasSelectedByUser);
+        } else if (this._timelinesTreeOutline.selectedTreeElement)
+            this._timelinesTreeOutline.selectedTreeElement.deselect();
+    }
+
+    get editingInstruments()
+    {
+        return this._editingInstruments;
+    }
+
+    get viewMode()
+    {
+        return this._viewMode;
+    }
+
+    set viewMode(x)
+    {
+        if (this._editingInstruments)
+            return;
+
+        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;
+    }
+
+    userSelectedRecord(record)
+    {
+        if (this._delegate && this._delegate.timelineOverviewUserSelectedRecord)
+            this._delegate.timelineOverviewUserSelectedRecord(this, record);
+    }
+
+    updateLayoutIfNeeded()
+    {
+        if (this.layoutPending) {
+            super.updateLayoutIfNeeded();
+            return;
+        }
+
+        this._timelineRuler.updateLayoutIfNeeded();
+
+        for (let overviewGraph of this._overviewGraphsByTypeMap.values()) {
+            if (overviewGraph.visible)
+                overviewGraph.updateLayoutIfNeeded();
+        }
+    }
+
+    discontinuitiesInTimeRange(startTime, endTime)
+    {
+        return this._recording.discontinuitiesInTimeRange(startTime, endTime);
+    }
+
+    // Protected
+
+    get timelineRuler()
+    {
+        return this._timelineRuler;
+    }
+
+    layout()
+    {
+        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;
+        }
+    }
+
+    sizeDidChange()
+    {
+        this._cachedScrollContainerWidth = NaN;
+    }
+
+    // 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._graphsContainerView.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._graphsContainerView.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._graphsContainerView.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);
+        console.assert(!this._treeElementsByTypeMap.has(timeline.type), timeline);
+
+        let treeElement = new WebInspector.TimelineTreeElement(timeline);
+        let insertionIndex = insertionIndexForObjectInListSortedByFunction(treeElement, this._timelinesTreeOutline.children, this._compareTimelineTreeElements.bind(this));
+        this._timelinesTreeOutline.insertChild(treeElement, insertionIndex);
+        this._treeElementsByTypeMap.set(timeline.type, treeElement);
+
+        let overviewGraph = WebInspector.TimelineOverviewGraph.createForTimeline(timeline, this);
+        overviewGraph.addEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
+        this._overviewGraphsByTypeMap.set(timeline.type, overviewGraph);
+        this._graphsContainerView.insertSubviewBefore(overviewGraph, this._graphsContainerView.subviews[insertionIndex]);
+
+        treeElement.element.style.height = overviewGraph.height + "px";
+
+        if (!this._canShowTimelineType(timeline.type)) {
+            overviewGraph.hidden();
+            treeElement.hidden = true;
+        }
+    }
+
+    _instrumentRemoved(event)
+    {
+        let instrument = event.data.instrument;
+        console.assert(instrument instanceof WebInspector.Instrument, instrument);
+
+        let timeline = this._recording.timelineForInstrument(instrument);
+        let overviewGraph = this._overviewGraphsByTypeMap.get(timeline.type);
+        console.assert(overviewGraph, "Missing overview graph for timeline type", timeline.type);
+
+        let treeElement = this._treeElementsByTypeMap.get(timeline.type);
+        let shouldSuppressOnDeselect = false;
+        let shouldSuppressSelectSibling = true;
+        this._timelinesTreeOutline.removeChild(treeElement, shouldSuppressOnDeselect, shouldSuppressSelectSibling);
+
+        overviewGraph.removeEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
+        this._graphsContainerView.removeSubview(overviewGraph);
+
+        this._overviewGraphsByTypeMap.delete(timeline.type);
+        this._treeElementsByTypeMap.delete(timeline.type);
+    }
+
+    _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) {
+            let treeElement = this._treeElementsByTypeMap.get(type);
+            console.assert(treeElement, "Missing tree element for timeline type", type);
+
+            treeElement.hidden = !this._canShowTimelineType(type);
+            if (treeElement.hidden)
+                overviewGraph.hidden();
+            else
+                overviewGraph.shown();
+        }
+
+        this.element.classList.toggle("frames", isRenderingFramesMode);
+
+        this.updateLayout(WebInspector.View.LayoutReason.Resize);
+    }
+
+    _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;
+    }
+
+    _timelinesTreeSelectionDidChange(event)
+    {
+        function updateGraphSelectedState(timeline, selected)
+        {
+            let overviewGraph = this._overviewGraphsByTypeMap.get(timeline.type);
+            console.assert(overviewGraph, "Missing overview graph for timeline", timeline);
+            overviewGraph.selected = selected;
+        }
+
+        let selectedTreeElement = event.data.selectedElement;
+        let deselectedTreeElement = event.data.deselectedElement;
+        let timeline = null;
+        if (selectedTreeElement) {
+            timeline = selectedTreeElement.representedObject;
+            console.assert(timeline instanceof WebInspector.Timeline, timeline);
+            console.assert(this._recording.timelines.get(timeline.type) === timeline, timeline);
+
+            updateGraphSelectedState.call(this, timeline, true);
+        }
+
+        if (deselectedTreeElement)
+            updateGraphSelectedState.call(this, deselectedTreeElement.representedObject, false);
+
+        this._selectedTimeline = timeline;
+        this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.TimelineSelected);
+    }
+
+    _toggleEditingInstruments(event)
+    {
+        if (this._editingInstruments)
+            this._stopEditingInstruments();
+        else
+            this._startEditingInstruments();
+    }
+
+    _editingInstrumentsDidChange()
+    {
+        this.element.classList.toggle(WebInspector.TimelineOverview.EditInstrumentsStyleClassName, this._editingInstruments);
+        this._timelineRuler.enabled = !this._editingInstruments;
+
+        this._updateWheelAndGestureHandlers();
+        this._updateEditInstrumentsButton();
+
+        this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.EditingInstrumentsDidChange);
+    }
+
+    _updateEditInstrumentsButton()
+    {
+        let newLabel = this._editingInstruments ? WebInspector.UIString("Done") : WebInspector.UIString("Edit");
+        this._editInstrumentsButton.label = newLabel;
+        this._editInstrumentsButton.activated = this._editingInstruments;
+        this._editInstrumentsButton.enabled = !WebInspector.timelineManager.isCapturing();
+    }
+
+    _updateWheelAndGestureHandlers()
+    {
+        if (this._editingInstruments) {
+            this.element.removeEventListener("wheel", this._handleWheelEventListener);
+            this.element.removeEventListener("gesturestart", this._handleGestureStartEventListener);
+            this.element.removeEventListener("gesturechange", this._handleGestureChangeEventListener);
+            this.element.removeEventListener("gestureend", this._handleGestureEndEventListener);
+            this._handleWheelEventListener = null;
+            this._handleGestureStartEventListener = null;
+            this._handleGestureChangeEventListener = null;
+            this._handleGestureEndEventListener = null;
+        } else {
+            this._handleWheelEventListener = this._handleWheelEvent.bind(this);
+            this._handleGestureStartEventListener = this._handleGestureStart.bind(this);
+            this._handleGestureChangeEventListener = this._handleGestureChange.bind(this);
+            this._handleGestureEndEventListener = this._handleGestureEnd.bind(this);
+            this.element.addEventListener("wheel", this._handleWheelEventListener);
+            this.element.addEventListener("gesturestart", this._handleGestureStartEventListener);
+            this.element.addEventListener("gesturechange", this._handleGestureChangeEventListener);
+            this.element.addEventListener("gestureend", this._handleGestureEndEventListener);
+        }
+    }
+
+    _startEditingInstruments()
+    {
+        console.assert(this._viewMode === WebInspector.TimelineOverview.ViewMode.Timelines);
+
+        if (this._editingInstruments)
+            return;
+
+        this._editingInstruments = true;
+
+        for (let type of this._instrumentTypes) {
+            let treeElement = this._treeElementsByTypeMap.get(type);
+            if (!treeElement) {
+                let timeline = this._recording.timelines.get(type);
+                console.assert(timeline, "Missing timeline for type " + type);
+
+                const placeholder = true;
+                treeElement = new WebInspector.TimelineTreeElement(timeline, placeholder);
+
+                let insertionIndex = insertionIndexForObjectInListSortedByFunction(treeElement, this._timelinesTreeOutline.children, this._compareTimelineTreeElements.bind(this));
+                this._timelinesTreeOutline.insertChild(treeElement, insertionIndex);
+
+                let placeholderGraph = new WebInspector.View;
+                placeholderGraph.element.classList.add("timeline-overview-graph");
+                treeElement[WebInspector.TimelineOverview.PlaceholderOverviewGraph] = placeholderGraph;
+                this._graphsContainerView.insertSubviewBefore(placeholderGraph, this._graphsContainerView.subviews[insertionIndex]);
+            }
+
+            treeElement.editing = true;
+            treeElement.addEventListener(WebInspector.TimelineTreeElement.Event.EnabledDidChange, this._timelineTreeElementEnabledDidChange, this);
+        }
+
+        this._editingInstrumentsDidChange();
+    }
+
+    _stopEditingInstruments()
+    {
+        if (!this._editingInstruments)
+            return;
+
+        this._editingInstruments = false;
+
+        let instruments = this._recording.instruments;
+        for (let treeElement of this._treeElementsByTypeMap.values()) {
+            if (treeElement.status.checked) {
+                treeElement.editing = false;
+                treeElement.removeEventListener(WebInspector.TimelineTreeElement.Event.EnabledDidChange, this._timelineTreeElementEnabledDidChange, this);
+                continue;
+            }
+
+            let timelineInstrument = instruments.find((instrument) => instrument.timelineRecordType === treeElement.representedObject.type);
+            this._recording.removeInstrument(timelineInstrument);
+        }
+
+        let placeholderTreeElements = this._timelinesTreeOutline.children.filter((treeElement) => treeElement.placeholder);
+        for (let treeElement of placeholderTreeElements) {
+            this._timelinesTreeOutline.removeChild(treeElement);
+
+            let placeholderGraph = treeElement[WebInspector.TimelineOverview.PlaceholderOverviewGraph];
+            console.assert(placeholderGraph);
+            this._graphsContainerView.removeSubview(placeholderGraph);
+
+            if (treeElement.status.checked) {
+                let instrument = WebInspector.Instrument.createForTimelineType(treeElement.representedObject.type);
+                this._recording.addInstrument(instrument);
+            }
+        }
+
+        let instrumentTypes = instruments.map((instrument) => instrument.timelineRecordType);
+        WebInspector.timelineManager.enabledTimelineTypes = instrumentTypes;
+
+        this._editingInstrumentsDidChange();
+    }
+
+    _capturingStarted()
+    {
+        this._editInstrumentsButton.enabled = false;
+        this._stopEditingInstruments();
+    }
+
+    _capturingStopped()
+    {
+        this._editInstrumentsButton.enabled = true;
+    }
+
+    _compareTimelineTreeElements(a, b)
+    {
+        let aTimelineType = a.representedObject.type;
+        let bTimelineType = b.representedObject.type;
+
+        // Always sort the Rendering Frames timeline last.
+        if (aTimelineType === WebInspector.TimelineRecord.Type.RenderingFrame)
+            return 1;
+        if (bTimelineType === WebInspector.TimelineRecord.Type.RenderingFrame)
+            return -1;
+
+        if (a.placeholder !== b.placeholder)
+            return a.placeholder ? 1 : -1;
+
+        let aTimelineIndex = this._instrumentTypes.indexOf(aTimelineType);
+        let bTimelineIndex = this._instrumentTypes.indexOf(bTimelineType);
+        return aTimelineIndex - bTimelineIndex;
+    }
+
+    _timelineTreeElementEnabledDidChange(event)
+    {
+        let enabled = this._timelinesTreeOutline.children.some((treeElement) => {
+            let timelineType = treeElement.representedObject.type;
+            return this._canShowTimelineType(timelineType) && treeElement.status.checked;
+        });
+
+        this._editInstrumentsButton.enabled = enabled;
+    }
+};
+
+WebInspector.TimelineOverview.PlaceholderOverviewGraph = Symbol("placeholder-overview-graph");
+
+WebInspector.TimelineOverview.ScrollDeltaDenominator = 500;
+WebInspector.TimelineOverview.EditInstrumentsStyleClassName = "edit-instruments";
+WebInspector.TimelineOverview.MinimumDurationPerPixel = 0.0001;
+WebInspector.TimelineOverview.MaximumDurationPerPixel = 60;
+
+WebInspector.TimelineOverview.ViewMode = {
+    Timelines: "timeline-overview-view-mode-timelines",
+    RenderingFrames: "timeline-overview-view-mode-rendering-frames"
+};
+
+WebInspector.TimelineOverview.Event = {
+    EditingInstrumentsDidChange: "editing-instruments-did-change",
+    RecordSelected: "timeline-overview-record-selected",
+    TimelineSelected: "timeline-overview-timeline-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..2f232cd71
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js
@@ -0,0 +1,258 @@
+/*
+ * 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._selected = false;
+        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);
+
+        if (timelineType === WebInspector.TimelineRecord.Type.HeapAllocations)
+            return new WebInspector.HeapAllocationsTimelineOverviewGraph(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 secondsPerPixel() { return this._timelineOverview.secondsPerPixel; }
+
+    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;
+    }
+
+    get selected() { return this._selected; }
+
+    set selected(x)
+    {
+        if (this._selected === x)
+            return;
+
+        this._selected = x;
+        this.element.classList.toggle("selected", this._selected);
+    }
+
+    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
+
+    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(() => {
+            this._scheduledSelectedRecordLayoutUpdateIdentifier = undefined;
+
+            this.updateSelectedRecord();
+            this.dispatchEventToListeners(WebInspector.TimelineOverviewGraph.Event.RecordSelected, {record: this.selectedRecord});
+        });
+    }
+};
+
+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..0f494c4a8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js
@@ -0,0 +1,380 @@
+/*
+ * 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._element[WebInspector.TimelineRecordBar.ElementReferenceSymbol] = this;
+
+        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 i = 0; i < records.length; ++i) {
+            var record = records[i];
+            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 i = 0; i < visibleRecords.length; ++i) {
+                var record = visibleRecords[i];
+
+                // 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 i = 0; i < visibleRecords.length; ++i) {
+            var record = visibleRecords[i];
+            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);
+    }
+
+    static fromElement(element)
+    {
+        return element[WebInspector.TimelineRecordBar.ElementReferenceSymbol] || null;
+    }
+
+    // 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)
+    {
+        let oldRecordType;
+        let oldRecordEventType;
+        let oldRecordUsesActiveStartTime = false;
+        if (this._records && this._records.length) {
+            let oldRecord = this._records[0];
+            oldRecordType = oldRecord.type;
+            oldRecordEventType = oldRecord.eventType;
+            oldRecordUsesActiveStartTime = oldRecord.usesActiveStartTime;
+        }
+
+        records = records || [];
+
+        this._records = records;
+
+        // Assume all records in the group are the same type.
+        if (this._records.length) {
+            let newRecord = this._records[0];
+            if (newRecord.type !== oldRecordType) {
+                this._element.classList.remove(oldRecordType);
+                this._element.classList.add(newRecord.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 (newRecord.eventType !== oldRecordEventType) {
+                this._element.classList.remove(oldRecordEventType);
+                this._element.classList.add(newRecord.eventType);
+            }
+            if (newRecord.usesActiveStartTime !== oldRecordUsesActiveStartTime)
+                this._element.classList.toggle("has-inactive-segment", newRecord.usesActiveStartTime);
+        } else
+            this._element.classList.remove(oldRecordType, oldRecordEventType, "has-inactive-segment");
+    }
+
+    refresh(graphDataSource)
+    {
+        console.assert(graphDataSource.zeroTime);
+        console.assert(graphDataSource.startTime);
+        console.assert(graphDataSource.currentTime);
+        console.assert(graphDataSource.endTime);
+        console.assert(graphDataSource.secondsPerPixel);
+
+        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;
+
+        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.toggle("unfinished", barUnfinished);
+
+            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;
+        }
+
+        // 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;
+        else if (this._renderMode === WebInspector.TimelineRecordBar.RenderMode.Normal) {
+            // Hide the inactive segment when its duration is less than the minimum displayable size.
+            let minimumSegmentDuration = graphDataSource.secondsPerPixel * WebInspector.TimelineRecordBar.MinimumWidthPixels;
+            if (barActiveStartTime - barStartTime < minimumSegmentDuration) {
+                barActiveStartTime = barStartTime;
+                if (this._inactiveBarElement)
+                    this._inactiveBarElement.remove();
+            }
+        }
+
+        let showInactiveSegment = barActiveStartTime > barStartTime;
+        this._element.classList.toggle("has-inactive-segment", showInactiveSegment);
+
+        let middlePercentage = (barActiveStartTime - barStartTime) / barDuration;
+        if (showInactiveSegment && 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;
+
+        let newPositionAprox = Math.round(newPosition * 100);
+        let currentPositionAprox = Math.round(parseFloat(element.style[property]) * 100);
+        if (currentPositionAprox !== newPositionAprox)
+            element.style[property] = (newPositionAprox / 100) + "%";
+    }
+};
+
+WebInspector.TimelineRecordBar.ElementReferenceSymbol = Symbol("timeline-record-bar");
+
+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..dbc6bd1ec
--- /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: 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: linear-gradient(to right, hsl(210, 98%, 96%), hsl(210, 98%, 96%)) no-repeat 1px -1px;
+}
+
+body.window-inactive .timeline-record-frame.selected {
+    background: linear-gradient(to right, 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..15430b133
--- /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;
+
+        let newPositionAprox = Math.round(newPosition * 100);
+        let currentPositionAprox = Math.round(parseFloat(element.style[property]) * 100);
+        if (currentPositionAprox !== newPositionAprox)
+            element.style[property] = (newPositionAprox / 100) + "%";
+    }
+};
+
+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..e9da67fa5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css
@@ -0,0 +1,88 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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.edit-instruments > .timeline-overview {
+    bottom: 0;
+}
+
+.content-view.timeline-recording.edit-instruments > .content-browser {
+    display: none;
+}
+
+.content-view.timeline-recording > .content-browser {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+
+    border-top: 1px solid var(--border-color);
+}
+
+.content-view.timeline-recording > .content-browser > .navigation-bar {
+    background-color: var(--panel-background-color);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple {
+    background-color: transparent;
+    color: black;
+}
+
+.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows {
+    color: black;
+}
+
+.content-view.timeline-recording > .content-browser .recording-progress {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--navigation-bar-height);
+    bottom: 0;
+    text-align: center;
+    background-color: var(--panel-background-color-light);
+}
+
+.content-view.timeline-recording > .content-browser .recording-progress > .status {
+    margin-top: 40px;
+    margin-bottom: 10px;
+    text-align: center;
+    font-size: 12px;
+    color: hsl(0, 0%, 12%);
+}
+
+.content-view.timeline-recording > .content-browser .recording-progress > .status > .indeterminate-progress-spinner {
+    display: inline-block;
+    margin-top: -1px;
+    margin-left: 8px;
+    vertical-align: middle;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js
new file mode 100644
index 000000000..c4266d0c0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js
@@ -0,0 +1,817 @@
+/*
+ * 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)
+    {
+        super(recording);
+
+        this._recording = recording;
+
+        this.element.classList.add("timeline-recording");
+
+        this._timelineOverview = new WebInspector.TimelineOverview(this._recording, this);
+        this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
+        this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.RecordSelected, this._recordSelected, this);
+        this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimelineSelected, this._timelineSelected, this);
+        this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.EditingInstrumentsDidChange, this._editingInstrumentsDidChange, this);
+        this.addSubview(this._timelineOverview);
+
+        const disableBackForward = true;
+        const disableFindBanner = true;
+        this._timelineContentBrowser = new WebInspector.ContentBrowser(null, this, disableBackForward, disableFindBanner);
+        this._timelineContentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
+
+        this._entireRecordingPathComponent = this._createTimelineRangePathComponent(WebInspector.UIString("Entire Recording"));
+        this._timelineSelectionPathComponent = this._createTimelineRangePathComponent();
+        this._timelineSelectionPathComponent.previousSibling = this._entireRecordingPathComponent;
+        this._selectedTimeRangePathComponent = this._entireRecordingPathComponent;
+
+        this._filterBarNavigationItem = new WebInspector.FilterBarNavigationItem;
+        this._filterBarNavigationItem.filterBar.placeholder = WebInspector.UIString("Filter Records");
+        this._filterBarNavigationItem.filterBar.addEventListener(WebInspector.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
+        this._timelineContentBrowser.navigationBar.addNavigationItem(this._filterBarNavigationItem);
+        this.addSubview(this._timelineContentBrowser);
+
+        let clearImageDimensions = WebInspector.Platform.name === "mac" ? 16 : 15;
+        this._clearTimelineNavigationItem = new WebInspector.ButtonNavigationItem("clear-timeline", WebInspector.UIString("Clear Timeline"), "Images/NavigationItemClear.svg", clearImageDimensions, clearImageDimensions);
+        this._clearTimelineNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearTimeline, this);
+
+        this._overviewTimelineView = new WebInspector.OverviewTimelineView(recording);
+        this._overviewTimelineView.secondsPerPixel = this._timelineOverview.secondsPerPixel;
+
+        this._progressView = new WebInspector.TimelineRecordingProgressView;
+        this._timelineContentBrowser.addSubview(this._progressView);
+
+        this._timelineViewMap = new Map;
+        this._pathComponentMap = new Map;
+
+        this._updating = false;
+        this._currentTime = NaN;
+        this._discontinuityStartTime = 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);
+
+        WebInspector.TimelineView.addEventListener(WebInspector.TimelineView.Event.RecordWasFiltered, this._recordWasFiltered, this);
+
+        WebInspector.notifications.addEventListener(WebInspector.Notification.VisibilityStateDidChange, this._inspectorVisibilityStateChanged, this);
+
+        for (let instrument of this._recording.instruments)
+            this._instrumentAdded(instrument);
+
+        this.showOverviewTimelineView();
+    }
+
+    // Public
+
+    showOverviewTimelineView()
+    {
+        this._timelineContentBrowser.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._timelineContentBrowser.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._timelineContentBrowser.currentContentView)
+            return [];
+
+        let pathComponents = [];
+        let representedObject = this._timelineContentBrowser.currentContentView.representedObject;
+        if (representedObject instanceof WebInspector.Timeline)
+            pathComponents.push(this._pathComponentMap.get(representedObject));
+
+        pathComponents.push(this._selectedTimeRangePathComponent);
+        return pathComponents;
+    }
+
+    get supplementalRepresentedObjects()
+    {
+        if (!this._timelineContentBrowser.currentContentView)
+            return [];
+        return this._timelineContentBrowser.currentContentView.supplementalRepresentedObjects;
+    }
+
+    get navigationItems()
+    {
+        return [this._clearTimelineNavigationItem];
+    }
+
+    get handleCopyEvent()
+    {
+        let currentContentView = this._timelineContentBrowser.currentContentView;
+        return currentContentView && typeof currentContentView.handleCopyEvent === "function" ? currentContentView.handleCopyEvent.bind(currentContentView) : null;
+    }
+
+    get supportsSave()
+    {
+        let currentContentView = this._timelineContentBrowser.currentContentView;
+        return currentContentView && currentContentView.supportsSave;
+    }
+
+    get saveData()
+    {
+        let currentContentView = this._timelineContentBrowser.currentContentView;
+        return currentContentView && currentContentView.saveData || null;
+    }
+
+    get currentTimelineView()
+    {
+        return this._timelineContentBrowser.currentContentView;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._timelineOverview.shown();
+        this._timelineContentBrowser.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()
+    {
+        super.hidden();
+
+        this._timelineOverview.hidden();
+        this._timelineContentBrowser.hidden();
+
+        if (this._updating)
+            this._stopUpdatingCurrentTime();
+    }
+
+    closed()
+    {
+        super.closed();
+
+        this._timelineContentBrowser.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._timelineContentBrowser.canGoBack();
+    }
+
+    canGoForward()
+    {
+        return this._timelineContentBrowser.canGoForward();
+    }
+
+    goBack()
+    {
+        this._timelineContentBrowser.goBack();
+    }
+
+    goForward()
+    {
+        this._timelineContentBrowser.goForward();
+    }
+
+    // ContentBrowser delegate
+
+    contentBrowserTreeElementForRepresentedObject(contentBrowser, representedObject)
+    {
+        if (!(representedObject instanceof WebInspector.Timeline) && !(representedObject instanceof WebInspector.TimelineRecording))
+            return null;
+
+        let iconClassName;
+        let title;
+        if (representedObject instanceof WebInspector.Timeline) {
+            iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimelineType(representedObject.type);
+            title = WebInspector.UIString("Details");
+        } else {
+            iconClassName = WebInspector.TimelineTabContentView.StopwatchIconStyleClass;
+            title = WebInspector.UIString("Overview");
+        }
+
+        const hasChildren = false;
+        return new WebInspector.GeneralTreeElement(iconClassName, title, representedObject, hasChildren);
+    }
+
+    // TimelineOverview delegate
+
+    timelineOverviewUserSelectedRecord(timelineOverview, timelineRecord)
+    {
+        let timelineViewForRecord = null;
+        for (let timelineView of this._timelineViewMap.values()) {
+            if (timelineView.representedObject.type === timelineRecord.type) {
+                timelineViewForRecord = timelineView;
+                break;
+            }
+        }
+
+        if (!timelineViewForRecord)
+            return;
+
+        this._timelineContentBrowser.showContentView(timelineViewForRecord);
+        timelineViewForRecord.userSelectedRecordFromOverview(timelineRecord);
+    }
+
+    // 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;
+        this._updateTimelineOverviewHeight();
+        this._updateProgressView();
+        this._updateFilterBar();
+
+        if (timelineView) {
+            this._updateTimelineViewTimes(timelineView);
+            this._filterDidChange();
+
+            let timeline = null;
+            if (timelineView.representedObject instanceof WebInspector.Timeline)
+                timeline = timelineView.representedObject;
+
+            this._timelineOverview.selectedTimeline = timeline;
+        }
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
+    }
+
+    _timelinePathComponentSelected(event)
+    {
+        let selectedTimeline = event.data.pathComponent.representedObject;
+        this.showTimelineViewForTimeline(selectedTimeline);
+    }
+
+    _timeRangePathComponentSelected(event)
+    {
+        let selectedPathComponent = event.data.pathComponent;
+        if (selectedPathComponent === this._selectedTimeRangePathComponent)
+            return;
+
+        let timelineRuler = this._timelineOverview.timelineRuler;
+        if (selectedPathComponent === this._entireRecordingPathComponent)
+            timelineRuler.selectEntireRange();
+        else {
+            let timelineRange = selectedPathComponent.representedObject;
+            timelineRuler.selectionStartTime = timelineRuler.zeroTime + timelineRange.startValue;
+            timelineRuler.selectionEndTime = timelineRuler.zeroTime + timelineRange.endValue;
+        }
+    }
+
+    _contentViewSelectionPathComponentDidChange(event)
+    {
+        if (!this.visible)
+            return;
+
+        if (event.target !== this._timelineContentBrowser.currentContentView)
+            return;
+
+        this._updateFilterBar();
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+
+        if (this.currentTimelineView === this._overviewTimelineView)
+            return;
+
+        let record = null;
+        if (this.currentTimelineView.selectionPathComponents) {
+            let recordPathComponent = this.currentTimelineView.selectionPathComponents.find((element) => element.representedObject instanceof WebInspector.TimelineRecord);
+            record = recordPathComponent ? recordPathComponent.representedObject : null;
+        }
+
+        this._timelineOverview.selectRecord(event.target.representedObject, record);
+    }
+
+    _contentViewSupplementalRepresentedObjectsDidChange(event)
+    {
+        if (event.target !== this._timelineContentBrowser.currentContentView)
+            return;
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
+    }
+
+    _inspectorVisibilityStateChanged()
+    {
+        if (WebInspector.timelineManager.activeRecording !== this._recording)
+            return;
+
+        // Stop updating since the results won't be rendered anyway.
+        if (!WebInspector.visible && this._updating) {
+            this._stopUpdatingCurrentTime();
+            return;
+        }
+
+        // Nothing else to do if the current time was not being updated.
+        if (!WebInspector.visible)
+            return;
+
+        let {startTime, endTime} = this.representedObject;
+        if (!WebInspector.timelineManager.isCapturing()) {
+            // Force the overview to render data from the entire recording.
+            // This is necessary if the recording was started when the inspector was not
+            // visible because the views were never updated with currentTime/endTime.
+            this._updateTimes(startTime, endTime, endTime);
+            return;
+        }
+
+        this._startUpdatingCurrentTime(endTime);
+    }
+
+    _update(timestamp)
+    {
+        // FIXME: <https://webkit.org/b/153634> Web Inspector: some background tabs think they are the foreground tab and do unnecessary work
+        if (!(WebInspector.tabBrowser.selectedTabContentView instanceof WebInspector.TimelineTabContentView))
+            return;
+
+        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 (let 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._updateTimelineViewTimes(this.currentTimelineView);
+
+        // 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;
+
+        // Don't update the current time if the Inspector is not visible, as the requestAnimationFrames won't work.
+        if (!WebInspector.visible)
+            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)
+    {
+        this._updateProgressView();
+
+        let startTime = event.data.startTime;
+        if (!this._updating)
+            this._startUpdatingCurrentTime(startTime);
+        this._clearTimelineNavigationItem.enabled = !this._recording.readonly;
+
+        // A discontinuity occurs when the recording is stopped and resumed at
+        // a future time. Capturing started signals the end of the current
+        // discontinuity, if one exists.
+        if (!isNaN(this._discontinuityStartTime)) {
+            this._recording.addDiscontinuity(this._discontinuityStartTime, startTime);
+            this._discontinuityStartTime = NaN;
+        }
+    }
+
+    _capturingStopped(event)
+    {
+        this._updateProgressView();
+
+        if (this._updating)
+            this._stopUpdatingCurrentTime();
+
+        if (this.currentTimelineView)
+            this._updateTimelineViewTimes(this.currentTimelineView);
+
+        this._discontinuityStartTime = event.data.endTime || this._currentTime;
+    }
+
+    _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()
+    {
+        if (this._timelineOverview.editingInstruments)
+            this._timelineOverview.element.style.height = "";
+        else {
+            const rulerHeight = 23;
+
+            let styleValue = (rulerHeight + this._timelineOverview.height) + "px";
+            this._timelineOverview.element.style.height = styleValue;
+            this._timelineContentBrowser.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, {recording: this._recording}));
+        if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+            this._renderingFrameTimeline = timeline;
+
+        let displayName = WebInspector.TimelineTabContentView.displayNameForTimelineType(timeline.type);
+        let iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimelineType(timeline.type);
+        let pathComponent = new WebInspector.HierarchicalPathComponent(displayName, iconClassName, timeline);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._timelinePathComponentSelected, 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)
+    {
+        for (let timelineView of this._timelineViewMap.values())
+            timelineView.reset();
+
+        this._currentTime = NaN;
+        this._discontinuityStartTime = 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();
+        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)
+    {
+        console.assert(this.currentTimelineView);
+        if (!this.currentTimelineView)
+            return;
+
+        this._updateTimelineViewTimes(this.currentTimelineView);
+
+        let selectedPathComponent;
+        if (this._timelineOverview.timelineRuler.entireRangeSelected)
+            selectedPathComponent = this._entireRecordingPathComponent;
+        else {
+            let timelineRange = this._timelineSelectionPathComponent.representedObject;
+            timelineRange.startValue = this.currentTimelineView.startTime;
+            timelineRange.endValue = this.currentTimelineView.endTime;
+
+            if (!(this.currentTimelineView instanceof WebInspector.RenderingFrameTimelineView)) {
+                timelineRange.startValue -= this.currentTimelineView.zeroTime;
+                timelineRange.endValue -= this.currentTimelineView.zeroTime;
+            }
+
+            this._updateTimeRangePathComponents();
+            selectedPathComponent = this._timelineSelectionPathComponent;
+        }
+
+        if (this._selectedTimeRangePathComponent !== selectedPathComponent) {
+            this._selectedTimeRangePathComponent = selectedPathComponent;
+            this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+        }
+    }
+
+    _recordSelected(event)
+    {
+        let {record, timeline} = event.data;
+        let timelineView = this._timelineViewMap.get(timeline);
+
+        if (record && timelineView !== this.currentTimelineView)
+            this.showTimelineViewForTimeline(timeline);
+
+        timelineView.selectRecord(record);
+    }
+
+    _timelineSelected()
+    {
+        let timeline = this._timelineOverview.selectedTimeline;
+        if (timeline)
+            this.showTimelineViewForTimeline(timeline);
+        else
+            this.showOverviewTimelineView();
+    }
+
+    _updateTimeRangePathComponents()
+    {
+        let timelineRange = this._timelineSelectionPathComponent.representedObject;
+        let startValue = timelineRange.startValue;
+        let endValue = timelineRange.endValue;
+        if (isNaN(startValue) || isNaN(endValue)) {
+            this._entireRecordingPathComponent.nextSibling = null;
+            return;
+        }
+
+        this._entireRecordingPathComponent.nextSibling = this._timelineSelectionPathComponent;
+
+        let displayName;
+        if (this._timelineOverview.viewMode === WebInspector.TimelineOverview.ViewMode.Timelines) {
+            let selectionStart = Number.secondsToString(startValue, true);
+            let selectionEnd = Number.secondsToString(endValue, true);
+            displayName = WebInspector.UIString("%s \u2013 %s").format(selectionStart, selectionEnd);
+        } else {
+            startValue += 1; // Convert index to frame number.
+            if (startValue === endValue)
+                displayName = WebInspector.UIString("Frame %d").format(startValue);
+            else
+                displayName = WebInspector.UIString("Frames %d \u2013 %d").format(startValue, endValue);
+        }
+
+        this._timelineSelectionPathComponent.displayName = displayName;
+        this._timelineSelectionPathComponent.title = displayName;
+    }
+
+    _createTimelineRangePathComponent(title)
+    {
+        let range = new WebInspector.TimelineRange(NaN, NaN);
+        let pathComponent = new WebInspector.HierarchicalPathComponent(title || enDash, "time-icon", range);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._timeRangePathComponentSelected, this);
+
+        return pathComponent;
+    }
+
+    _updateTimelineViewTimes(timelineView)
+    {
+        let timelineRuler = this._timelineOverview.timelineRuler;
+        let entireRangeSelected = timelineRuler.entireRangeSelected;
+        let endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
+
+        if (entireRangeSelected) {
+            if (timelineView instanceof WebInspector.RenderingFrameTimelineView) {
+                endTime = this._renderingFrameTimeline.records.length;
+            } else {
+                // Clamp selection to the end of the recording (with padding),
+                // so graph views will show an auto-sized graph without a lot of
+                // empty space at the end.
+                endTime = isNaN(this._recording.endTime) ? this._recording.currentTime : this._recording.endTime;
+                endTime += timelineRuler.minimumSelectionDuration;
+            }
+        }
+
+        timelineView.startTime = this._timelineOverview.selectionStartTime;
+        timelineView.currentTime = this._currentTime;
+        timelineView.endTime = endTime;
+    }
+
+    _editingInstrumentsDidChange(event)
+    {
+        let editingInstruments = this._timelineOverview.editingInstruments;
+        this.element.classList.toggle(WebInspector.TimelineOverview.EditInstrumentsStyleClassName, editingInstruments);
+
+        this._updateTimelineOverviewHeight();
+    }
+
+    _filterDidChange()
+    {
+        if (!this.currentTimelineView)
+            return;
+
+        this.currentTimelineView.updateFilter(this._filterBarNavigationItem.filterBar.filters);
+    }
+
+    _recordWasFiltered(event)
+    {
+        if (event.target !== this.currentTimelineView)
+            return;
+
+        console.assert(this.currentTimelineView);
+
+        let timeline = this.currentTimelineView.representedObject;
+        if (!(timeline instanceof WebInspector.Timeline))
+            return;
+
+        let record = event.data.record;
+        let filtered = event.data.filtered;
+        this._timelineOverview.recordWasFiltered(timeline, record, filtered);
+    }
+
+    _updateProgressView()
+    {
+        let isCapturing = WebInspector.timelineManager.isCapturing();
+        this._progressView.visible = isCapturing && this.currentTimelineView && !this.currentTimelineView.showsLiveRecordingData;
+    }
+
+    _updateFilterBar()
+    {
+        this._filterBarNavigationItem.hidden = !this.currentTimelineView || !this.currentTimelineView.showsFilterBar;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingProgressView.js b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingProgressView.js
new file mode 100644
index 000000000..ca2890a58
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingProgressView.js
@@ -0,0 +1,61 @@
+/*
+ * 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.TimelineRecordingProgressView = class TimelineRecordingProgressView extends WebInspector.View
+{
+    constructor()
+    {
+        super();
+
+        this.element.classList.add("recording-progress");
+
+        let statusElement = document.createElement("div");
+        statusElement.classList.add("status");
+        statusElement.textContent = WebInspector.UIString("Recording Timeline Data");
+        this.element.append(statusElement);
+
+        let spinner = new WebInspector.IndeterminateProgressSpinner;
+        statusElement.append(spinner.element);
+
+        this._stopRecordingButtonElement = document.createElement("button");
+        this._stopRecordingButtonElement.textContent = WebInspector.UIString("Stop Recording");
+        this._stopRecordingButtonElement.addEventListener("click", () => WebInspector.timelineManager.stopCapturing());
+        this.element.append(this._stopRecordingButtonElement);
+    }
+
+    // Public
+
+    get visible() { return this._visible; }
+
+    set visible(x)
+    {
+        if (this._visible === x)
+            return;
+
+        // FIXME: remove once <https://webkit.org/b/150741> is fixed.
+        this._visible = x;
+        this.element.classList.toggle("hidden", !this._visible);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css b/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
new file mode 100644
index 000000000..db126e7ae
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
@@ -0,0 +1,233 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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:not(.disabled) {
+    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: 23px;
+}
+
+.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: 6px;
+    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: 23px;
+}
+
+.timeline-ruler:not(.disabled, .resizing-selection) > .selection-drag {
+    cursor: -webkit-grab;
+    pointer-events: all;
+}
+
+.timeline-ruler:not(.disabled, .resizing-selection) > .selection-drag:active {
+    cursor: -webkit-grabbing;
+}
+
+.timeline-ruler > .selection-handle {
+    position: absolute;
+    top: 0;
+    width: 8px;
+    height: 22px;
+    border-radius: 5px;
+    background-color: hsl(0, 0%, 64%);
+    border: 1px solid white;
+    cursor: col-resize;
+    pointer-events: all;
+    z-index: 15;
+}
+
+.timeline-ruler.disabled > .selection-handle {
+    display: none;
+}
+
+.timeline-ruler.selection-hidden > :matches(.selection-drag, .selection-handle, .shaded-area) {
+    display: none;
+}
+
+.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..79bc1d364
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js
@@ -0,0 +1,943 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 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 = Number.MAX_VALUE;
+        this._endTimePinned = false;
+        this._snapInterval = 0;
+        this._allowsClippedLabels = false;
+        this._allowsTimeRangeSelection = false;
+        this._minimumSelectionDuration = 0.01;
+        this._formatLabelCallback = null;
+        this._timeRangeSelectionChanged = false;
+        this._enabled = true;
+
+        this._markerElementMap = new Map;
+    }
+
+    // Public
+
+    get enabled()
+    {
+        return this._enabled;
+    }
+
+    set enabled(x)
+    {
+        if (this._enabled === x)
+            return;
+
+        this._enabled = x;
+        this.element.classList.toggle(WebInspector.TreeElementStatusButton.DisabledStyleClassName, !this._enabled);
+    }
+
+    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._clickEventListener = this._handleClick.bind(this);
+            this._doubleClickEventListener = this._handleDoubleClick.bind(this);
+            this._mouseDownEventListener = this._handleMouseDown.bind(this);
+            this.element.addEventListener("click", this._clickEventListener);
+            this.element.addEventListener("dblclick", this._doubleClickEventListener);
+            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("click", this._clickEventListener);
+            this.element.removeEventListener("dblclick", this._doubleClickEventListener);
+            this.element.removeEventListener("mousedown", this._mouseDownEventListener);
+            this._clickEventListener = null;
+            this._doubleClickEventListener = null;
+            this._mouseDownEventListener = null;
+
+            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;
+
+        if (this.entireRangeSelected)
+            this.selectionStartTime = x;
+
+        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._currentDividers = null;
+
+        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._currentDividers = null;
+        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();
+    }
+
+    get entireRangeSelected()
+    {
+        return this._selectionStartTime === this._zeroTime && this._selectionEndTime === Number.MAX_VALUE;
+    }
+
+    selectEntireRange()
+    {
+        this.selectionStartTime = this._zeroTime;
+        this.selectionEndTime = Number.MAX_VALUE;
+    }
+
+    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()
+    {
+        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;
+        }
+
+        // Calculate the divider count now based on the final slice time.
+        dividerCount = Math.floor(visibleWidth * this.secondsPerPixel / sliceTime);
+
+        let firstDividerTime = (Math.ceil((this._startTime - this._zeroTime) / sliceTime) * sliceTime) + this._zeroTime;
+        let lastDividerTime = firstDividerTime + sliceTime * dividerCount;
+
+        // 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);
+    }
+
+    sizeDidChange()
+    {
+        this._cachedClientWidth = this.element.clientWidth;
+    }
+
+    // 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;
+
+        let newPositionAprox = Math.round(newPosition * 100);
+        let currentPositionAprox = Math.round(parseFloat(element.style[property]) * 100);
+        if (currentPositionAprox !== newPositionAprox)
+            element.style[property] = (newPositionAprox / 100) + (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("allows-time-range-selection", this._allowsTimeRangeSelection);
+
+        if (!this._allowsTimeRangeSelection)
+            return;
+
+        this.element.classList.toggle("selection-hidden", this.entireRangeSelected);
+
+        if (this.entireRangeSelected) {
+            this._dispatchTimeRangeSelectionChangedEvent();
+            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 - this._zeroTime);
+        let formattedEndTimeText = this._formatDividerLabelText(this._selectionEndTime - this._zeroTime);
+
+        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();
+    }
+
+    _handleClick(event)
+    {
+        if (!this._enabled)
+            return;
+
+        if (this._mouseMoved)
+            return;
+
+        this.element.style.pointerEvents = "none";
+        let newTarget = document.elementFromPoint(event.pageX, event.pageY);
+        this.element.style.pointerEvents = null;
+
+        if (newTarget && newTarget.click)
+            newTarget.click();
+    }
+
+    _handleDoubleClick(event)
+    {
+        if (this.entireRangeSelected)
+            return;
+
+        this.selectEntireRange();
+    }
+
+    _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._mouseMoved = false;
+
+        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);
+
+        this._mouseMoved = true;
+
+        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._mouseMoveEventListener;
+        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.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/TimelineTabContentView.css b/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.css
new file mode 100644
index 000000000..32fb33194
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.css
@@ -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.
+ */
+
+.timeline.tab.content-view .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%);
+}
+
+.timeline.tab.content-view .navigation-bar > .item.record-start-stop:hover {
+    filter: brightness(95%);
+}
+
+.timeline.tab.content-view .navigation-bar > .item.record-start-stop:active {
+    filter: brightness(80%);
+}
+
+.timeline.tab.content-view .navigation-bar > .item.record-start-stop * {
+    pointer-events: none;
+}
+
+.timeline.tab.content-view .navigation-bar > .item.radio {
+    margin-top: 5px;
+    height: 17px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js
new file mode 100644
index 000000000..1c56ca625
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js
@@ -0,0 +1,571 @@
+/*
+ * 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.GeneralTabBarItem(image, title);
+        let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
+
+        super(identifier || "timeline", "timeline", tabBarItem, null, detailsSidebarPanels);
+
+        // 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 = new WebInspector.TreeOutline;
+        this._recordingsTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._recordingsTreeSelectionDidChange, this);
+
+        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;
+
+        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.contentBrowser.navigationBar.insertNavigationItem(this._recordButton, 0);
+
+        if (WebInspector.FPSInstrument.supported()) {
+            let timelinesNavigationItem = new WebInspector.RadioButtonNavigationItem(WebInspector.TimelineOverview.ViewMode.Timelines, WebInspector.UIString("Events"));
+            let renderingFramesNavigationItem = new WebInspector.RadioButtonNavigationItem(WebInspector.TimelineOverview.ViewMode.RenderingFrames, WebInspector.UIString("Frames"));
+
+            this.contentBrowser.navigationBar.insertNavigationItem(timelinesNavigationItem, 1);
+            this.contentBrowser.navigationBar.insertNavigationItem(renderingFramesNavigationItem, 2);
+
+            this.contentBrowser.navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._viewModeSelected, this);
+        }
+
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingCreated, this._recordingCreated, this);
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingLoaded, this._recordingLoaded, this);
+
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStartedOrStopped, this);
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStartedOrStopped, this);
+
+        WebInspector.notifications.addEventListener(WebInspector.Notification.VisibilityStateDidChange, this._inspectorVisibilityChanged, this);
+
+        this._displayedRecording = null;
+        this._displayedContentView = null;
+        this._viewMode = null;
+        this._previousSelectedTimelineType = null;
+
+        const selectedByUser = false;
+        this._changeViewMode(WebInspector.TimelineOverview.ViewMode.Timelines, selectedByUser);
+
+        for (let recording of WebInspector.timelineManager.recordings)
+            this._addRecording(recording);
+
+        this._recordingCountChanged();
+
+        if (WebInspector.timelineManager.activeRecording)
+            this._recordingLoaded();
+
+        // Explicitly update the path for the navigation bar to prevent it from showing up as blank.
+        this.contentBrowser.updateHierarchicalPathForCurrentContentView();
+    }
+
+    // Static
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/Timeline.svg",
+            title: WebInspector.UIString("Timelines"),
+        };
+    }
+
+    static isTabAllowed()
+    {
+        return !!window.TimelineAgent || !!window.ScriptProfilerAgent;
+    }
+
+    static displayNameForTimelineType(timelineType)
+    {
+        switch (timelineType) {
+        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");
+        case WebInspector.TimelineRecord.Type.HeapAllocations:
+            return WebInspector.UIString("JavaScript Allocations");
+        default:
+            console.error("Unknown Timeline type:", timelineType);
+        }
+
+        return null;
+    }
+
+    static iconClassNameForTimelineType(timelineType)
+    {
+        switch (timelineType) {
+        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.HeapAllocations:
+            return "heap-allocations-icon";
+        case WebInspector.TimelineRecord.Type.Script:
+            return "script-icon";
+        case WebInspector.TimelineRecord.Type.RenderingFrame:
+            return "rendering-frame-icon";
+        default:
+            console.error("Unknown Timeline type:", timelineType);
+        }
+
+        return null;
+    }
+
+    static genericClassNameForTimelineType(timelineType)
+    {
+        switch (timelineType) {
+        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.HeapAllocations:
+            return "heap-allocations";
+        case WebInspector.TimelineRecord.Type.Script:
+            return "script";
+        case WebInspector.TimelineRecord.Type.RenderingFrame:
+            return "rendering-frame";
+        default:
+            console.error("Unknown Timeline type:", timelineType);
+        }
+
+        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.HeapAllocations:
+            return "heap-snapshot-record";
+
+        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.HeapAllocations:
+            if (timelineRecord.heapSnapshot.title)
+                return WebInspector.UIString("Snapshot %d \u2014 %s").format(timelineRecord.heapSnapshot.identifier, timelineRecord.heapSnapshot.title);
+            return WebInspector.UIString("Snapshot %d").format(timelineRecord.heapSnapshot.identifier);
+        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();
+
+        this._toggleRecordingShortcut.disabled = false;
+        this._toggleNewRecordingShortcut.disabled = false;
+
+        if (WebInspector.visible)
+            WebInspector.timelineManager.autoCaptureOnPageLoad = true;
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        this._toggleRecordingShortcut.disabled = true;
+        this._toggleNewRecordingShortcut.disabled = true;
+
+        WebInspector.timelineManager.autoCaptureOnPageLoad = false;
+    }
+
+    closed()
+    {
+        super.closed();
+
+        if (WebInspector.FPSInstrument.supported())
+            this.contentBrowser.navigationBar.removeEventListener(null, null, this);
+
+        WebInspector.timelineManager.removeEventListener(null, null, this);
+        WebInspector.notifications.removeEventListener(null, null, this);
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        return representedObject instanceof WebInspector.TimelineRecording;
+    }
+
+    // Protected
+
+    restoreFromCookie(cookie)
+    {
+        console.assert(cookie);
+        console.assert(this._displayedContentView);
+
+        this._restoredShowingTimelineRecordingContentView = cookie[WebInspector.TimelineTabContentView.ShowingTimelineRecordingContentViewCookieKey];
+        if (!this._restoredShowingTimelineRecordingContentView) {
+            if (!this.contentBrowser.currentContentView)
+                this._showTimelineViewForType(WebInspector.TimelineTabContentView.OverviewTimelineIdentifierCookieValue);
+            return;
+        }
+
+        let selectedTimelineViewIdentifier = cookie[WebInspector.TimelineTabContentView.SelectedTimelineViewIdentifierCookieKey];
+        if (selectedTimelineViewIdentifier === WebInspector.TimelineRecord.Type.RenderingFrame && !WebInspector.FPSInstrument.supported())
+            selectedTimelineViewIdentifier = null;
+
+        this._showTimelineViewForType(selectedTimelineViewIdentifier);
+
+        super.restoreFromCookie(cookie);
+    }
+
+    saveToCookie(cookie)
+    {
+        console.assert(cookie);
+
+        cookie[WebInspector.TimelineTabContentView.ShowingTimelineRecordingContentViewCookieKey] = this.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
+
+        if (this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames)
+            cookie[WebInspector.TimelineTabContentView.SelectedTimelineViewIdentifierCookieKey] = WebInspector.TimelineRecord.Type.RenderingFrame;
+        else {
+            let selectedTimeline = this._getTimelineForCurrentContentView();
+            if (selectedTimeline)
+                cookie[WebInspector.TimelineTabContentView.SelectedTimelineViewIdentifierCookieKey] = selectedTimeline.type;
+            else
+                cookie[WebInspector.TimelineTabContentView.SelectedTimelineViewIdentifierCookieKey] = WebInspector.TimelineTabContentView.OverviewTimelineIdentifierCookieValue;
+        }
+
+        super.saveToCookie(cookie);
+    }
+
+    treeElementForRepresentedObject(representedObject)
+    {
+        // This can be called by the base class constructor before the map is created.
+        if (!this._recordingTreeElementMap)
+            return null;
+
+        if (representedObject instanceof WebInspector.TimelineRecording)
+            return this._recordingTreeElementMap.get(representedObject);
+
+        return null;
+    }
+
+    // Private
+
+    _capturingStartedOrStopped(event)
+    {
+        let isCapturing = WebInspector.timelineManager.isCapturing();
+        this._recordButton.toggled = isCapturing;
+    }
+
+    _inspectorVisibilityChanged(event)
+    {
+        WebInspector.timelineManager.autoCaptureOnPageLoad = !!this.visible && !!WebInspector.visible;
+    }
+
+    _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)
+    {
+        let isCapturing = WebInspector.timelineManager.isCapturing();
+        this._recordButton.toggled = isCapturing;
+
+        if (isCapturing)
+            WebInspector.timelineManager.stopCapturing();
+        else {
+            WebInspector.timelineManager.startCapturing(shouldCreateRecording);
+            // Show the timeline to which events will be appended.
+            this._recordingLoaded();
+        }
+    }
+
+    _recordButtonClicked(event)
+    {
+        let shouldCreateNewRecording = window.event ? window.event.shiftKey : false;
+        this._recordButton.toggled = !WebInspector.timelineManager.isCapturing();
+        this._toggleRecording(shouldCreateNewRecording);
+    }
+
+    _recordingsTreeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
+        console.assert(treeElement.representedObject instanceof WebInspector.TimelineRecording);
+
+        this._recordingSelected(treeElement.representedObject);
+    }
+
+    _recordingCreated(event)
+    {
+        this._addRecording(event.data.recording);
+        this._recordingCountChanged();
+    }
+
+    _addRecording(recording)
+    {
+        console.assert(recording instanceof WebInspector.TimelineRecording, recording);
+
+        let recordingTreeElement = new WebInspector.GeneralTreeElement(WebInspector.TimelineTabContentView.StopwatchIconStyleClass, recording.displayName, null, recording);
+        this._recordingTreeElementMap.set(recording, recordingTreeElement);
+        this._recordingsTreeOutline.appendChild(recordingTreeElement);
+    }
+
+    _recordingCountChanged()
+    {
+        let previousTreeElement = null;
+        for (let treeElement of this._recordingTreeElementMap.values()) {
+            if (previousTreeElement) {
+                previousTreeElement.nextSibling = treeElement;
+                treeElement.previousSibling = previousTreeElement;
+            }
+
+            previousTreeElement = treeElement;
+        }
+    }
+
+    _recordingSelected(recording)
+    {
+        console.assert(recording instanceof WebInspector.TimelineRecording, recording);
+
+        this._displayedRecording = recording;
+
+        // Save the current state incase we need to restore it to a new recording.
+        let cookie = {};
+        this.saveToCookie(cookie);
+
+        if (this._displayedContentView)
+            this._displayedContentView.removeEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._displayedContentViewNavigationItemsDidChange, this);
+
+        // Try to get the recording content view if it exists already, if it does we don't want to restore the cookie.
+        let onlyExisting = true;
+        this._displayedContentView = this.contentBrowser.contentViewForRepresentedObject(this._displayedRecording, onlyExisting);
+        if (this._displayedContentView) {
+            this._displayedContentView.addEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._displayedContentViewNavigationItemsDidChange, this);
+
+            // Show the timeline that was being shown to update the sidebar tree state.
+            let currentTimelineView = this._displayedContentView.currentTimelineView;
+            let timelineType = currentTimelineView && currentTimelineView.representedObject instanceof WebInspector.Timeline ? currentTimelineView.representedObject.type : null;
+            this._showTimelineViewForType(timelineType);
+
+            return;
+        }
+
+        onlyExisting = false;
+        this._displayedContentView = this.contentBrowser.contentViewForRepresentedObject(this._displayedRecording, onlyExisting);
+        if (this._displayedContentView)
+            this._displayedContentView.addEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._displayedContentViewNavigationItemsDidChange, this);
+
+        // Restore the cookie to carry over the previous recording view state to the new recording.
+        this.restoreFromCookie(cookie);
+    }
+
+    _recordingLoaded(event)
+    {
+        this._recordingSelected(WebInspector.timelineManager.activeRecording);
+    }
+
+    _viewModeSelected(event)
+    {
+        let selectedNavigationItem = event.target.selectedNavigationItem;
+        console.assert(selectedNavigationItem);
+        if (!selectedNavigationItem)
+            return;
+
+        const selectedByUser = true;
+        this._changeViewMode(selectedNavigationItem.identifier, selectedByUser);
+    }
+
+    _changeViewMode(mode, selectedByUser)
+    {
+        if (this._viewMode === mode)
+            return;
+
+        this._viewMode = mode;
+        this.contentBrowser.navigationBar.selectedNavigationItem = this._viewMode;
+
+        if (!selectedByUser)
+            return;
+
+        let timelineType = this._previousSelectedTimelineType;
+        if (this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames) {
+            let timeline = this._getTimelineForCurrentContentView();
+            this._previousSelectedTimelineType = timeline ? timeline.type : null;
+            timelineType = WebInspector.TimelineRecord.Type.RenderingFrame;
+        }
+
+        this._showTimelineViewForType(timelineType);
+    }
+
+    _showTimelineViewForType(timelineType)
+    {
+        let timeline = timelineType ? this._displayedRecording.timelines.get(timelineType) : null;
+        if (timeline)
+            this._displayedContentView.showTimelineViewForTimeline(timeline);
+        else
+            this._displayedContentView.showOverviewTimelineView();
+
+        if (this.contentBrowser.currentContentView !== this._displayedContentView)
+            this.contentBrowser.showContentView(this._displayedContentView);
+    }
+
+    _displayedContentViewNavigationItemsDidChange(event)
+    {
+        let timeline = this._getTimelineForCurrentContentView();
+        let newViewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
+        if (timeline && timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+            newViewMode = WebInspector.TimelineOverview.ViewMode.RenderingFrames;
+
+        const selectedByUser = false;
+        this._changeViewMode(newViewMode, selectedByUser);
+    }
+
+    _getTimelineForCurrentContentView()
+    {
+        let currentContentView = this.contentBrowser.currentContentView;
+        if (!(currentContentView instanceof WebInspector.TimelineRecordingContentView))
+            return null;
+
+        let timelineView = currentContentView.currentTimelineView;
+        return (timelineView && timelineView.representedObject instanceof WebInspector.Timeline) ? timelineView.representedObject : null;
+    }
+};
+
+WebInspector.TimelineTabContentView.Type = "timeline";
+
+WebInspector.TimelineTabContentView.ShowingTimelineRecordingContentViewCookieKey = "timeline-sidebar-panel-showing-timeline-recording-content-view";
+WebInspector.TimelineTabContentView.SelectedTimelineViewIdentifierCookieKey = "timeline-sidebar-panel-selected-timeline-view-identifier";
+WebInspector.TimelineTabContentView.OverviewTimelineIdentifierCookieValue = "overview";
+WebInspector.TimelineTabContentView.StopwatchIconStyleClass = "stopwatch-icon";
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/TimelineTreeElement.js
new file mode 100644
index 000000000..c02b77ee8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineTreeElement.js
@@ -0,0 +1,120 @@
+/*
+ * 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.TimelineTreeElement = class TimelineTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(timeline, placeholder)
+    {
+        let displayName = WebInspector.TimelineTabContentView.displayNameForTimelineType(timeline.type);
+        let iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimelineType(timeline.type);
+        let genericClassName = WebInspector.TimelineTabContentView.genericClassNameForTimelineType(timeline.type);
+
+        super([iconClassName, genericClassName], displayName, "", timeline);
+
+        this._placeholder = placeholder || false;
+        this.editing = this._placeholder;
+    }
+
+    // Public
+
+    get placeholder()
+    {
+        return this._placeholder;
+    }
+
+    get editing()
+    {
+        return this._editing;
+    }
+
+    set editing(x)
+    {
+        if (this._editing === x)
+            return;
+
+        this._editing = x;
+        this.selectable = !this._editing;
+
+        this._updateStatusButton();
+    }
+
+    // Protected
+
+    onattach()
+    {
+        super.onattach();
+
+        this.listItemElement.addEventListener("click", this._clickHandler.bind(this));
+    }
+
+    // Private
+
+    _showCloseButton()
+    {
+        let tooltip = WebInspector.UIString("Close %s timeline view").format(this.mainTitle);
+        let button = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/CloseLarge.svg", "close-button", tooltip));
+        button.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, () => { this.deselect(); });
+
+        this.status = button.element;
+    }
+
+    _showCheckbox()
+    {
+        let checkboxElement = document.createElement("input");
+        checkboxElement.type = "checkbox";
+        checkboxElement.checked = !this._placeholder;
+
+        let button = new WebInspector.TreeElementStatusButton(checkboxElement);
+        checkboxElement.addEventListener("change", () => { this._dispatchEnabledDidChangeEvent(); });
+
+        this.status = checkboxElement;
+    }
+
+    _updateStatusButton()
+    {
+        if (this._editing)
+            this._showCheckbox();
+        else
+            this._showCloseButton();
+    }
+
+    _clickHandler()
+    {
+        if (!this._editing)
+            return;
+
+        this.status.checked = !this.status.checked;
+        this._dispatchEnabledDidChangeEvent();
+    }
+
+    _dispatchEnabledDidChangeEvent()
+    {
+        this.dispatchEventToListeners(WebInspector.TimelineTreeElement.Event.EnabledDidChange);
+    }
+};
+
+WebInspector.TimelineTreeElement.Event = {
+    EnabledDidChange: "timeline-tree-element-enabled-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineView.css b/Source/WebInspectorUI/UserInterface/Views/TimelineView.css
new file mode 100644
index 000000000..f7a3d4bf3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineView.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.
+ */
+
+.timeline-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.timeline-view > .data-grid .indeterminate-progress-spinner {
+    float: right;
+    margin-left: 2px;
+}
+
+.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..63035a1f5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineView.js
@@ -0,0 +1,344 @@
+/*
+ * 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)
+    {
+        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.element.classList.add("timeline-view");
+
+        this._zeroTime = 0;
+        this._startTime = 0;
+        this._endTime = 5;
+        this._currentTime = 0;
+    }
+
+    // Public
+
+    get scrollableElements()
+    {
+        if (!this._timelineDataGrid)
+            return [];
+        return [this._timelineDataGrid.scrollContainer];
+    }
+
+    get showsLiveRecordingData()
+    {
+        // Implemented by sub-classes if needed.
+        return true;
+    }
+
+    get showsFilterBar()
+    {
+        // Implemented by sub-classes if needed.
+        return true;
+    }
+
+    get navigationItems()
+    {
+        return this._scopeBar ? [this._scopeBar] : [];
+    }
+
+    get selectionPathComponents()
+    {
+        // Implemented by sub-classes if needed.
+        return null;
+    }
+
+    get zeroTime()
+    {
+        return this._zeroTime;
+    }
+
+    set zeroTime(x)
+    {
+        x = x || 0;
+
+        if (this._zeroTime === x)
+            return;
+
+        this._zeroTime = x;
+
+        this._timesDidChange();
+    }
+
+    get startTime()
+    {
+        return this._startTime;
+    }
+
+    set startTime(x)
+    {
+        x = x || 0;
+
+        if (this._startTime === x)
+            return;
+
+        this._startTime = x;
+
+        this._timesDidChange();
+        this._scheduleFilterDidChange();
+    }
+
+    get endTime()
+    {
+        return this._endTime;
+    }
+
+    set endTime(x)
+    {
+        x = x || 0;
+
+        if (this._endTime === x)
+            return;
+
+        this._endTime = x;
+
+        this._timesDidChange();
+        this._scheduleFilterDidChange();
+    }
+
+    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._timesDidChange();
+    }
+
+    get filterStartTime()
+    {
+        // Implemented by sub-classes if needed.
+        return this.startTime;
+    }
+
+    get filterEndTime()
+    {
+        // Implemented by sub-classes if needed.
+        return this.endTime;
+    }
+
+    setupDataGrid(dataGrid)
+    {
+        if (this._timelineDataGrid) {
+            this._timelineDataGrid.filterDelegate = null;
+            this._timelineDataGrid.removeEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._timelineDataGridSelectedNodeChanged, this);
+            this._timelineDataGrid.removeEventListener(WebInspector.DataGrid.Event.NodeWasFiltered, this._timelineDataGridNodeWasFiltered, this);
+            this._timelineDataGrid.removeEventListener(WebInspector.DataGrid.Event.FilterDidChange, this.filterDidChange, this);
+        }
+
+        this._timelineDataGrid = dataGrid;
+        this._timelineDataGrid.filterDelegate = this;
+        this._timelineDataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._timelineDataGridSelectedNodeChanged, this);
+        this._timelineDataGrid.addEventListener(WebInspector.DataGrid.Event.NodeWasFiltered, this._timelineDataGridNodeWasFiltered, this);
+        this._timelineDataGrid.addEventListener(WebInspector.DataGrid.Event.FilterDidChange, this.filterDidChange, this);
+    }
+
+    selectRecord(record)
+    {
+        if (!this._timelineDataGrid)
+            return;
+
+        let selectedDataGridNode = this._timelineDataGrid.selectedNode;
+        if (!record) {
+            if (selectedDataGridNode)
+                selectedDataGridNode.deselect();
+            return;
+        }
+
+        let dataGridNode = this._timelineDataGrid.findNode((node) => node.record === record);
+        console.assert(dataGridNode, "Timeline view has no grid node for record selected in timeline overview.", this, record);
+        if (!dataGridNode || dataGridNode.selected)
+            return;
+
+        // Don't select the record's grid node if one of it's children is already selected.
+        if (selectedDataGridNode && selectedDataGridNode.hasAncestor(dataGridNode))
+            return;
+
+        dataGridNode.revealAndSelect();
+    }
+
+    reset()
+    {
+        // Implemented by sub-classes if needed.
+    }
+
+    updateFilter(filters)
+    {
+        if (!this._timelineDataGrid)
+            return;
+
+        this._timelineDataGrid.filterText = filters ? filters.text : "";
+    }
+
+    matchDataGridNodeAgainstCustomFilters(node)
+    {
+        // Implemented by sub-classes if needed.
+        return true;
+    }
+
+    needsLayout()
+    {
+        // FIXME: needsLayout can be removed once <https://webkit.org/b/150741> is fixed.
+        if (!this.visible)
+            return;
+
+        super.needsLayout();
+    }
+
+    // DataGrid filter delegate
+
+    dataGridMatchNodeAgainstCustomFilters(node)
+    {
+        console.assert(node);
+        if (!this.matchDataGridNodeAgainstCustomFilters(node))
+            return false;
+
+        let startTime = this.filterStartTime;
+        let endTime = this.filterEndTime;
+        let currentTime = this.currentTime;
+
+        function checkTimeBounds(itemStartTime, itemEndTime)
+        {
+            itemStartTime = itemStartTime || currentTime;
+            itemEndTime = itemEndTime || currentTime;
+
+            return startTime <= itemEndTime && itemStartTime <= endTime;
+        }
+
+        if (node instanceof WebInspector.ResourceTimelineDataGridNode) {
+            let resource = node.resource;
+            return checkTimeBounds(resource.requestSentTimestamp, resource.finishedOrFailedTimestamp);
+        }
+
+        if (node instanceof WebInspector.SourceCodeTimelineTimelineDataGridNode) {
+            let sourceCodeTimeline = node.sourceCodeTimeline;
+
+            // Do a quick check of the timeline bounds before we check each record.
+            if (!checkTimeBounds(sourceCodeTimeline.startTime, sourceCodeTimeline.endTime))
+                return false;
+
+            for (let record of sourceCodeTimeline.records) {
+                if (checkTimeBounds(record.startTime, record.endTime))
+                    return true;
+            }
+
+            return false;
+        }
+
+        if (node instanceof WebInspector.ProfileNodeDataGridNode) {
+            let profileNode = node.profileNode;
+            if (checkTimeBounds(profileNode.startTime, profileNode.endTime))
+                return true;
+
+            return false;
+        }
+
+        if (node instanceof WebInspector.TimelineDataGridNode) {
+            let record = node.record;
+            return checkTimeBounds(record.startTime, record.endTime);
+        }
+
+        if (node instanceof WebInspector.ProfileDataGridNode)
+            return node.callingContextTreeNode.hasStackTraceInTimeRange(startTime, endTime);
+
+        console.error("Unknown DataGridNode, can't filter by time.");
+        return true;
+    }
+
+    // Protected
+
+    userSelectedRecordFromOverview(timelineRecord)
+    {
+        // Implemented by sub-classes if needed.
+    }
+
+    filterDidChange()
+    {
+        // Implemented by sub-classes if needed.
+    }
+
+    // Private
+
+    _timelineDataGridSelectedNodeChanged(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _timelineDataGridNodeWasFiltered(event)
+    {
+        let node = event.data.node;
+        if (!(node instanceof WebInspector.TimelineDataGridNode))
+            return;
+
+        this.dispatchEventToListeners(WebInspector.TimelineView.Event.RecordWasFiltered, {record: node.record, filtered: node.hidden});
+    }
+
+    _timesDidChange()
+    {
+        if (!WebInspector.timelineManager.isCapturing() || this.showsLiveRecordingData)
+            this.needsLayout();
+    }
+
+    _scheduleFilterDidChange()
+    {
+        if (!this._timelineDataGrid || this._updateFilterTimeout)
+            return;
+
+        this._updateFilterTimeout = setTimeout(() => {
+            this._updateFilterTimeout = undefined;
+            this._timelineDataGrid.filterDidChange();
+        }, 0);
+    }
+};
+
+WebInspector.TimelineView.Event = {
+    RecordWasFiltered: "record-was-filtered"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TitleView.css b/Source/WebInspectorUI/UserInterface/Views/TitleView.css
new file mode 100644
index 000000000..ab541d8f0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TitleView.css
@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+.title-view {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    font-size: 40px;
+    font-weight: lighter;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TitleView.js b/Source/WebInspectorUI/UserInterface/Views/TitleView.js
new file mode 100644
index 000000000..d0384fc81
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TitleView.js
@@ -0,0 +1,35 @@
+/*
+ * 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.TitleView = class TitleView extends WebInspector.View
+{
+    constructor(title)
+    {
+        super();
+
+        this.element.classList.add("title-view");
+        this.element.textContent = title;
+    }
+};
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..1835f1e34
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Toolbar.css
@@ -0,0 +1,215 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (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 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--toolbar-height);
+
+    display: flex;
+    padding-top: 3px;
+    padding-bottom: 3px;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    outline: none;
+}
+
+body .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 .toolbar {
+    background-image: none;
+    background-color: hsl(0, 0%, 96%);
+}
+
+body.mac-platform:not(.docked) .toolbar {
+    padding-top: 21px;
+}
+
+body.mac-platform:not(.docked) {
+    --toolbar-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/TreeElement.js b/Source/WebInspectorUI/UserInterface/Views/TreeElement.js
new file mode 100644
index 000000000..aeecf1849
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeElement.js
@@ -0,0 +1,635 @@
+/*
+ * 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.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()
+    {
+        if (this.treeOutline)
+            this.treeOutline._treeElementDidChange(this);
+    }
+
+    didChange()
+    {
+        if (!this.treeOutline)
+            return;
+
+        this.onNextFrame._fireDidChange();
+    }
+
+    _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.dispatchEventToListeners(WebInspector.TreeElement.Event.DoubleClick))
+            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;
+
+        let treeOutlineGroup = WebInspector.TreeOutlineGroup.groupForTreeOutline(treeOutline);
+        if (!treeOutlineGroup)
+            return;
+
+        treeOutlineGroup.didSelectTreeElement(this);
+    }
+
+    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;
+    }
+
+    populateContextMenu(contextMenu, event)
+    {
+        if (this.children.some((child) => child.hasChildren) || (this.hasChildren && !this.children.length)) {
+            contextMenu.appendSeparator();
+
+            contextMenu.appendItem(WebInspector.UIString("Expand All"), this.expandRecursively.bind(this));
+            contextMenu.appendItem(WebInspector.UIString("Collapse All"), this.collapseRecursively.bind(this));
+        }
+    }
+};
+
+WebInspector.TreeElement.Event = {
+    DoubleClick: "tree-element-double-click",
+};
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..be1dc06e1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
@@ -0,0 +1,225 @@
+/*
+ * 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 {
+    margin-top: 5px;
+    margin-right: 6px;
+
+    width: 24px;
+    height: 24px;
+}
+
+.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: var(--selected-background-color-unfocused);
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.selected {
+    color: var(--selected-foreground-color);
+    background-color: var(--selected-background-color);
+}
+
+.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: 10px;
+}
+
+.tree-outline .item .highlighted {
+    background-color: hsla(53, 83%, 53%, 0.2);
+    border-bottom: 1px solid hsl(47, 82%, 60%);
+}
+
+.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..34a45e046
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
@@ -0,0 +1,687 @@
+/*
+ * 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.element.addEventListener("contextmenu", this._handleContextmenu.bind(this));
+
+        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.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;
+    }
+
+    // Protected
+
+    treeElementFromEvent(event)
+    {
+        let 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.
+        let x = scrollContainer.totalOffsetLeft + scrollContainer.offsetWidth - 36;
+        let 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.
+        let elementUnderMouse = this.treeElementFromPoint(x, y);
+        let elementAboveMouse = this.treeElementFromPoint(x, y - 2);
+        let element = null;
+        if (elementUnderMouse === elementAboveMouse)
+            element = elementUnderMouse;
+        else
+            element = this.treeElementFromPoint(x, y + 2);
+
+        return element;
+    }
+
+    populateContextMenu(contextMenu, event, treeElement)
+    {
+        treeElement.populateContextMenu(contextMenu, event);
+    }
+
+    // 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);
+    }
+
+    _handleContextmenu(event)
+    {
+        let treeElement = this.treeElementFromEvent(event);
+        if (!treeElement)
+            return;
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        this.populateContextMenu(contextMenu, event, treeElement);
+    }
+};
+
+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;
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/TreeOutlineGroup.js b/Source/WebInspectorUI/UserInterface/Views/TreeOutlineGroup.js
new file mode 100644
index 000000000..f649b8ecf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutlineGroup.js
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2017 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TreeOutlineGroup = class TreeOutlineGroup extends WebInspector.Collection
+{
+    constructor()
+    {
+        super((object) => object instanceof WebInspector.TreeOutline);
+    }
+
+    // Static
+
+    static groupForTreeOutline(treeOutline)
+    {
+        return treeOutline[WebInspector.TreeOutlineGroup.GroupForTreeOutlineSymbol] || null;
+    }
+
+    // Public
+
+    get selectedTreeElement()
+    {
+        for (let treeOutline of this.items) {
+            if (treeOutline.selectedTreeElement)
+                return treeOutline.selectedTreeElement;
+        }
+
+        return null;
+    }
+
+    // Protected
+
+    itemAdded(treeOutline)
+    {
+        console.assert(!treeOutline[WebInspector.TreeOutlineGroup.GroupForTreeOutlineSymbol]);
+        treeOutline[WebInspector.TreeOutlineGroup.GroupForTreeOutlineSymbol] = this;
+
+        if (treeOutline.selectedTreeElement)
+            this._removeConflictingTreeSelections(treeOutline.selectedTreeElement);
+    }
+
+    itemRemoved(treeOutline)
+    {
+        console.assert(treeOutline[WebInspector.TreeOutlineGroup.GroupForTreeOutlineSymbol] === this);
+        treeOutline[WebInspector.TreeOutlineGroup.GroupForTreeOutlineSymbol] = null;
+    }
+
+    didSelectTreeElement(treeElement)
+    {
+        // Called by TreeOutline.
+
+        if (!treeElement)
+            return;
+
+        this._removeConflictingTreeSelections(treeElement);
+    }
+
+    // Private
+
+    _removeConflictingTreeSelections(treeElement)
+    {
+        let selectedTreeOutline = treeElement.treeOutline;
+        console.assert(selectedTreeOutline, "Should have a parent tree outline.");
+
+        for (let treeOutline of this.items) {
+            if (selectedTreeOutline === treeOutline)
+                continue;
+
+            if (treeOutline.selectedTreeElement)
+                treeOutline.selectedTreeElement.deselect();
+        }
+    }
+};
+
+WebInspector.TreeOutlineGroup.GroupForTreeOutlineSymbol = Symbol("group-for-tree-outline");
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..e7d75f0be
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.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.
+ */
+
+.item.type-tree-element {
+    margin-top: 1px;
+    height: auto;
+}
+
+.item.type-tree-element > .titles {
+    position: relative;
+    top: auto;
+    line-height: normal;
+    padding-bottom: 1px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.item.type-tree-element > .disclosure-button {
+    display: inline-block;
+    vertical-align: top;
+
+    width: 15px;
+
+    margin-left: -1px;
+    border: 0;
+    background: none;
+    -webkit-appearance: none;
+}
+
+.item.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;
+}
+
+.item.type-tree-element.parent.expanded > .disclosure-button {
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+}
+
+.item.type-tree-element > .icon {
+    display: none;
+}
+
+.item.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 -1px;
+}
+
+.item.type-tree-element.prototype:hover,
+.item.type-tree-element.prototype:focus {
+    border-color: hsla(0, 0%, 0%, 0.1);
+}
+
+.item.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..082382b7e
--- /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..0b07ad39d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css
@@ -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.
+ */
+
+.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 {
+    padding: 0;
+    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..0b65eea23
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js
@@ -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.
+ */
+
+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.customIndent = true;
+        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..4257ac7f3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css
@@ -0,0 +1,102 @@
+/*
+ * 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;
+
+    --selected-foreground-color: white;
+    --selected-secondary-text-color: hsla(0, 100%, 100%, 0.7);
+    --selected-background-color: hsl(212, 92%, 54%);
+    --selected-background-color-unfocused: hsl(0, 0%, 83%);
+    --selected-background-color-active: hsl(218, 85%, 52%);
+    --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
+    --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
+
+    --glyph-color: hsl(0, 0%, 30%);
+    --glyph-color-pressed: hsl(0, 0%, 15%);
+    --glyph-color-disabled: hsla(0, 0%, 30%, 0.55);
+    --glyph-color-active: hsl(212, 92%, 54%);
+    --glyph-color-active-pressed: hsl(218, 85%, 52%);
+
+    --border-color: hsl(0, 0%, 70%);
+    --border-color-dark: hsl(0, 0%, 57%);
+
+    --button-background-color: white;
+    --button-background-color-pressed: hsl(0, 0%, 85%);
+
+    --panel-background-color: hsl(0, 0%, 94%);
+    --panel-background-color-light: hsl(0, 0%, 96%);
+
+    --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
+    --console-prompt-min-height: 30px;
+
+    --text-color-gray-medium: hsl(0, 0%, 50%);
+    --error-text-color: hsl(0, 86%, 47%);
+
+    --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%);
+
+    --even-zebra-stripe-row-background-color: white;
+    --odd-zebra-stripe-row-background-color: hsl(0, 0%, 95%);
+
+    --toolbar-height: 36px;
+    --tab-bar-height: 24px;
+    --navigation-bar-height: 29px;
+
+    --style-declaration-section-header-padding: 4px 5px 3px 25px;
+}
+
+body.window-inactive {
+    /* FIXME: Use CSS4 color blend functions once they're available. */
+    --selected-background-color: hsla(212, 92%, 54%, 0.5);
+
+    --glyph-color-active: hsla(212, 92%, 54%, 0.5);
+    --glyph-color: hsla(0, 0%, 30%, 0.65);
+    --glyph-color-disabled: hsla(0, 0%, 30%, 0.35);
+}
+
+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..ace04b96b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/View.js
@@ -0,0 +1,342 @@
+/*
+ * 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;
+        this._didInitialLayout = false;
+    }
+
+    // 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)
+    {
+        this.cancelLayout();
+
+        this._setLayoutReason(layoutReason);
+        this._layoutSubtree();
+    }
+
+    updateLayoutIfNeeded()
+    {
+        if (!this._dirty && this._didInitialLayout)
+            return;
+
+        this.updateLayout();
+    }
+
+    needsLayout(layoutReason)
+    {
+        this._setLayoutReason(layoutReason);
+
+        if (this._dirty)
+            return;
+
+        WebInspector.View._scheduleLayoutForView(this);
+    }
+
+    cancelLayout()
+    {
+        WebInspector.View._cancelScheduledLayoutForView(this);
+    }
+
+    // Protected
+
+    get layoutReason() { return this._layoutReason; }
+
+    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;
+        }
+    }
+
+    initialLayout()
+    {
+        // Implemented by subclasses.
+
+        // Called once when the view is shown for the first time.
+        // Views with complex DOM subtrees should create UI elements in
+        // initialLayout rather than at construction time.
+    }
+
+    layout()
+    {
+        // Implemented by subclasses.
+
+        // Not responsible for recursing to child views.
+        // Should not be called directly; use updateLayout() instead.
+    }
+
+    sizeDidChange()
+    {
+        // Implemented by subclasses.
+
+        // Called after initialLayout, and before layout.
+    }
+
+    // Private
+
+    _layoutSubtree()
+    {
+        this._dirty = false;
+        this._dirtyDescendantsCount = 0;
+
+        if (!this._didInitialLayout) {
+            this.initialLayout();
+            this._didInitialLayout = true;
+        }
+
+        if (this._layoutReason === WebInspector.View.LayoutReason.Resize)
+            this.sizeDidChange();
+
+        this.layout();
+
+        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..1ea0725f1
--- /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.debounce(250)._valueInputValueChanged);
+        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..ee385be6a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleBasicInput.js
@@ -0,0 +1,77 @@
+/*
+ * 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.debounce(250)._handleInputElementInput);
+    }
+
+    // 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)
+    {
+        let value = this.value;
+        if (value && value.trim().length) {
+            let validItems = [];
+            for (let item of value.split(/([^\"\'\s]+|\"[^\"]*\"|\'[^\']*\')/)) {
+                if (!item.length || (!item.hasMatchingEscapedQuotes() && !/^[\w\s\-\.\(\)]+$/.test(item)))
+                    continue;
+
+                validItems.push(item);
+            }
+
+            this.value = validItems.filter(item => item.trim().length).join(" ");
+        }
+
+        this._valueDidChange();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css
new file mode 100644
index 000000000..50507963f
--- /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 0 0 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..40bbcc395
--- /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.debounce(250)._textInputKeyUp);
+        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..4c98c5d81
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css
@@ -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.
+ */
+
+.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-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: var(--selected-background-color) !important;
+    color: var(--selected-foreground-color);
+}
+
+.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::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..02a03343b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js
@@ -0,0 +1,291 @@
+/*
+ * 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("Remove 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) ? ")" : "";
+        }
+
+        // Allow splitting with parenthesis if the parenthesis does not have any commas.
+        let hasParenthesis = values[0] && (values[0].includes("(") || values[0].includes(")"));
+        if (values.length === 1 && (!hasParenthesis || !/\([^\)]*,[^\)]*\)/.test(values[0])))
+            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..4065225c7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.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.
+ */
+
+.sidebar > .panel.details.css-style .visual > .details-section :matches(.details-section, .group).inactive {
+    border-bottom: none;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section :matches(.details-section, .group).inactive > * {
+    display: none;
+}
+
+.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: var(--selected-background-color);
+    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;
+    flex-wrap: wrap;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .metric-section-row {
+    flex-wrap: nowrap;
+}
+
+.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.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..a0ae56565
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js
@@ -0,0 +1,1611 @@
+/*
+ * 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
+        };
+    }
+
+    // Public
+
+    refresh(significantChange)
+    {
+        if (significantChange)
+            this._selectorSection.update(this._nodeStyles);
+        else
+            this._updateSections();
+
+        super.refresh();
+    }
+
+    // Protected
+
+    initialLayout()
+    {
+        // Selector Section
+        this._selectorSection = new WebInspector.VisualStyleSelectorSection;
+        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("fill", WebInspector.UIString("Fill"));
+        this._generateSection("stroke", WebInspector.UIString("Stroke"));
+        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.fill.section, this._groups.stroke.section, 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);
+    }
+
+    sizeDidChange()
+    {
+        super.sizeDidChange();
+
+        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("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;
+            }
+        }
+
+        let hasMatchedElementPseudoSelector = this._currentStyle.ownerRule && this._currentStyle.ownerRule.hasMatchedPseudoElementSelector();
+        this._groups.content.section.element.classList.toggle("inactive", !hasMatchedElementPseudoSelector);
+        this._groups.listStyle.section.element.classList.toggle("inactive", hasMatchedElementPseudoSelector);
+
+        let node = this._nodeStyles.node;
+        let isSVGElement = node.isSVGElement();
+
+        this._groups.float.section.element.classList.toggle("inactive", isSVGElement);
+        this._groups.border.section.element.classList.toggle("inactive", isSVGElement);
+        this._groups.boxShadow.section.element.classList.toggle("inactive", isSVGElement);
+        this._groups.listStyle.section.element.classList.toggle("inactive", isSVGElement);
+
+        this._groups.fill.section.element.classList.toggle("inactive", !isSVGElement);
+        this._groups.stroke.section.element.classList.toggle("inactive", !isSVGElement);
+
+        let isSVGCircle = node.nodeName() === "circle";
+        let isSVGEllipse = node.nodeName() === "ellipse";
+        let isSVGRadialGradient = node.nodeName() === "radialGradient";
+        let isSVGRect = node.nodeName() === "rect";
+        let isSVGLine = node.nodeName() === "line";
+        let isSVGLinearGradient = node.nodeName() === "linearGradient";
+
+        // Only show the dimensions section if the current element is not an SVG element or is <ellipse>, <rect>, <circle>, or <radialGradient>.
+        this._groups.dimensions.section.element.classList.toggle("inactive", !(!isSVGElement || isSVGEllipse || isSVGRect || isSVGCircle || isSVGRadialGradient));
+
+        // Only show the non-SVG dimensions group if the current element is not an SVG element or is <rect>.
+        this._groups.dimensions.defaultGroup.element.classList.toggle("inactive", !(!isSVGElement || isSVGRect));
+
+        // Only show the SVG dimensions group if the current element is an SVG element, <rect>, <circle>, or <radialGradient>.
+        this._groups.dimensions.svgGroup.element.classList.toggle("inactive", !(isSVGEllipse || isSVGRect || isSVGCircle || isSVGRadialGradient));
+
+        // Only show editor for "r" if the current element is <circle> or <radialGradient>.
+        this._groups.dimensions.properties.r.element.classList.toggle("inactive", !(isSVGCircle || isSVGRadialGradient));
+
+        // Only show editors for "rx" and "ry" if the current element is <ellipse> or <rect>.
+        this._groups.dimensions.properties.rx.element.classList.toggle("inactive", !(isSVGEllipse || isSVGRect));
+        this._groups.dimensions.properties.ry.element.classList.toggle("inactive", !(isSVGEllipse || isSVGRect));
+
+        // Only show the SVG position group if the current element is <rect>, <circle>, <ellipse>, <line>, <radialGradient>, or <linearGradient>.
+        this._groups.position.svgGroup.element.classList.toggle("inactive", !(isSVGRect || isSVGCircle || isSVGEllipse || isSVGLine || isSVGRadialGradient || isSVGLinearGradient));
+
+        // Only show editors for "x" and "y" if the current element is <rect>.
+        this._groups.position.properties.x.element.classList.toggle("inactive", !isSVGRect);
+        this._groups.position.properties.y.element.classList.toggle("inactive", !isSVGRect);
+
+        // Only show editors for "x1", "y1", "x2", and "y2" if the current element is <line> or <linearGradient>.
+        this._groups.position.properties.x1.element.classList.toggle("inactive", !(isSVGLine || isSVGLinearGradient));
+        this._groups.position.properties.y1.element.classList.toggle("inactive", !(isSVGLine || isSVGLinearGradient));
+        this._groups.position.properties.x2.element.classList.toggle("inactive", !(isSVGLine || isSVGLinearGradient));
+        this._groups.position.properties.y2.element.classList.toggle("inactive", !(isSVGLine || isSVGLinearGradient));
+
+        // Only show editors for "cx" and "cy" if the current element is <circle>, <ellipse>, or <radialGradient>.
+        this._groups.position.properties.cx.element.classList.toggle("inactive", !(isSVGCircle || isSVGEllipse || isSVGRadialGradient));
+        this._groups.position.properties.cy.element.classList.toggle("inactive", !(isSVGCircle || isSVGEllipse || isSVGRadialGradient));
+    }
+
+    _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);
+        }
+
+        vertical.element.classList.add("metric-section-row");
+        horizontal.element.classList.add("metric-section-row");
+        allLinkRow.element.classList.add("metric-section-row");
+
+        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);
+
+        group.defaultGroup = new WebInspector.DetailsSectionGroup(rows);
+
+        let xyRow = new WebInspector.DetailsSectionRow;
+
+        properties.x = new WebInspector.VisualStyleNumberInputBox("x", WebInspector.UIString("X"), this._keywords.boxModel, this._units.defaults, true);
+        properties.y = new WebInspector.VisualStyleNumberInputBox("y", WebInspector.UIString("Y"), this._keywords.boxModel, this._units.defaults, true);
+
+        xyRow.element.appendChild(properties.x.element);
+        xyRow.element.appendChild(properties.y.element);
+
+        let x1y1Row = new WebInspector.DetailsSectionRow;
+
+        properties.x1 = new WebInspector.VisualStyleNumberInputBox("x1", WebInspector.UIString("X1"), this._keywords.boxModel, this._units.defaults, true);
+        properties.y1 = new WebInspector.VisualStyleNumberInputBox("y1", WebInspector.UIString("Y1"), this._keywords.boxModel, this._units.defaults, true);
+
+        x1y1Row.element.appendChild(properties.x1.element);
+        x1y1Row.element.appendChild(properties.y1.element);
+
+        let x2y2Row = new WebInspector.DetailsSectionRow;
+
+        properties.x2 = new WebInspector.VisualStyleNumberInputBox("x2", WebInspector.UIString("X2"), this._keywords.boxModel, this._units.defaults, true);
+        properties.y2 = new WebInspector.VisualStyleNumberInputBox("y2", WebInspector.UIString("Y2"), this._keywords.boxModel, this._units.defaults, true);
+
+        x2y2Row.element.appendChild(properties.x2.element);
+        x2y2Row.element.appendChild(properties.y2.element);
+
+        let cxcyRow = new WebInspector.DetailsSectionRow;
+
+        properties.cx = new WebInspector.VisualStyleNumberInputBox("cx", WebInspector.UIString("Center X"), this._keywords.boxModel, this._units.defaults, true);
+        properties.cy = new WebInspector.VisualStyleNumberInputBox("cy", WebInspector.UIString("Center Y"), this._keywords.boxModel, this._units.defaults, true);
+
+        cxcyRow.element.appendChild(properties.cx.element);
+        cxcyRow.element.appendChild(properties.cy.element);
+
+        group.svgGroup = new WebInspector.DetailsSectionGroup([xyRow, x1y1Row, x2y2Row, cxcyRow]);
+
+        this._populateSection(group, [group.defaultGroup, group.svgGroup]);
+
+        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);
+
+        group.defaultGroup = new WebInspector.DetailsSectionGroup([dimensionsTabController, dimensionsRegularGroup, dimensionsMinGroup, dimensionsMaxGroup]);
+
+        let rRow = new WebInspector.DetailsSectionRow;
+
+        properties.r = new WebInspector.VisualStyleRelativeNumberSlider("r", WebInspector.UIString("Radius"), this._keywords.boxModel, this._units.defaults);
+
+        rRow.element.appendChild(properties.r.element);
+
+        let rxRow = new WebInspector.DetailsSectionRow;
+
+        properties.rx = new WebInspector.VisualStyleRelativeNumberSlider("rx", WebInspector.UIString("Radius X"), this._keywords.boxModel, this._units.defaults);
+
+        rxRow.element.appendChild(properties.rx.element);
+
+        let ryRow = new WebInspector.DetailsSectionRow;
+
+        properties.ry = new WebInspector.VisualStyleRelativeNumberSlider("ry", WebInspector.UIString("Radius Y"), this._keywords.boxModel, this._units.defaults);
+
+        ryRow.element.appendChild(properties.ry.element);
+
+        group.svgGroup = new WebInspector.DetailsSectionGroup([rRow, rxRow, ryRow]);
+
+        this._populateSection(group, [group.defaultGroup, group.svgGroup]);
+    }
+
+    _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 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]);
+    }
+
+    _populateFillSection()
+    {
+        let group = this._groups.fill;
+        let properties = group.properties;
+
+        let fillRow = new WebInspector.DetailsSectionRow;
+
+        properties.fill = new WebInspector.VisualStyleColorPicker("fill", WebInspector.UIString("Color"));
+        properties.fillRule = new WebInspector.VisualStyleKeywordPicker("fill-rule", WebInspector.UIString("Rule"), this._keywords.defaults.concat(["Nonzero", "Evenodd"]));
+
+        fillRow.element.appendChild(properties.fill.element);
+        fillRow.element.appendChild(properties.fillRule.element);
+
+        let fillOpacityRow = new WebInspector.DetailsSectionRow;
+
+        properties.fillOpacity = new WebInspector.VisualStyleUnitSlider("fill-opacity", WebInspector.UIString("Opacity"));
+
+        fillOpacityRow.element.appendChild(properties.fillOpacity.element);
+
+        group.specifiedWidthProperties = [properties.fillOpacity];
+
+        let fillGroup = new WebInspector.DetailsSectionGroup([fillRow, fillOpacityRow]);
+        this._populateSection(group, [fillGroup]);
+    }
+
+    _populateStrokeSection()
+    {
+        let group = this._groups.stroke;
+        let properties = group.properties;
+
+        let strokeRow = new WebInspector.DetailsSectionRow;
+
+        properties.stroke = new WebInspector.VisualStyleColorPicker("stroke", WebInspector.UIString("Color"));
+        properties.strokeWidth = new WebInspector.VisualStyleNumberInputBox("stroke-width", WebInspector.UIString("Width"), this._keywords.defaults, this._units.defaults);
+
+        strokeRow.element.appendChild(properties.stroke.element);
+        strokeRow.element.appendChild(properties.strokeWidth.element);
+
+        let strokeOpacity = new WebInspector.DetailsSectionRow;
+
+        properties.strokeOpacity = new WebInspector.VisualStyleUnitSlider("stroke-opacity", WebInspector.UIString("Opacity"));
+
+        strokeOpacity.element.appendChild(properties.strokeOpacity.element);
+
+        let strokeDasharrayRow = new WebInspector.DetailsSectionRow;
+
+        properties.strokeDasharray = new WebInspector.VisualStyleBasicInput("stroke-dasharray", WebInspector.UIString("Dash Array"), WebInspector.UIString("Enter an array value"));
+
+        strokeDasharrayRow.element.appendChild(properties.strokeDasharray.element);
+
+        let strokeDasharrayOptionsRow = new WebInspector.DetailsSectionRow;
+
+        properties.strokeDashoffset = new WebInspector.VisualStyleNumberInputBox("stroke-dashoffset", WebInspector.UIString("Offset"), this._keywords.defaults, this._units.defaults);
+        properties.strokeMiterlimit = new WebInspector.VisualStyleNumberInputBox("stroke-miterlimit", WebInspector.UIString("Miter"), this._keywords.defaults);
+
+        strokeDasharrayOptionsRow.element.appendChild(properties.strokeDashoffset.element);
+        strokeDasharrayOptionsRow.element.appendChild(properties.strokeMiterlimit.element);
+
+        let strokeLineOptionsRow = new WebInspector.DetailsSectionRow;
+
+        properties.strokeLinecap = new WebInspector.VisualStyleKeywordPicker("stroke-linecap", WebInspector.UIString("Cap"), this._keywords.defaults.concat(["Butt", "Round", "Square"]));
+        properties.strokeLinejoin = new WebInspector.VisualStyleKeywordPicker("stroke-linejoin", WebInspector.UIString("Join"), this._keywords.defaults.concat(["Miter", "Round", "Bevel"]));
+
+        strokeLineOptionsRow.element.appendChild(properties.strokeLinecap.element);
+        strokeLineOptionsRow.element.appendChild(properties.strokeLinejoin.element);
+
+        group.specifiedWidthProperties = [properties.strokeOpacity];
+
+        let strokeGroup = new WebInspector.DetailsSectionGroup([strokeRow, strokeOpacity, strokeDasharrayRow, strokeDasharrayOptionsRow, strokeLineOptionsRow]);
+        this._populateSection(group, [strokeGroup]);
+    }
+
+    _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"));
+        transitionProperty.masterProperty = true;
+        let transitionTiming = new WebInspector.VisualStyleTimingEditor("transition-timing-function", WebInspector.UIString("Timing"), ["Linear", "Ease", "Ease In", "Ease Out", "Ease In Out"]);
+        transitionTiming.optionalProperty = true;
+
+        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);
+        transitionDuration.optionalProperty = true;
+        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, transitionDuration, transitionTiming, 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 animationRow = new WebInspector.DetailsSectionRow;
+
+        properties.animation = new WebInspector.VisualStyleCommaSeparatedKeywordEditor("animation", null, {
+            "animation-name": "none",
+            "animation-timing-function": "ease",
+            "animation-iteration-count": "1",
+            "animation-duration": "0",
+            "animation-delay": "0",
+            "animation-direction": "normal",
+            "animation-fill-mode": "none",
+            "animation-play-state": "running"
+        });
+
+        animationRow.element.appendChild(properties.animation.element);
+
+        let animationNameRow = new WebInspector.DetailsSectionRow;
+
+        let animationName = new WebInspector.VisualStyleBasicInput("animation-name", WebInspector.UIString("Name"), WebInspector.UIString("Enter the name of a Keyframe"));
+        animationName.masterProperty = true;
+
+        animationNameRow.element.appendChild(animationName.element);
+
+        let animationTimingRow = new WebInspector.DetailsSectionRow;
+
+        let animationTiming = new WebInspector.VisualStyleTimingEditor("animation-timing-function", WebInspector.UIString("Timing"), ["Linear", "Ease", "Ease In", "Ease Out", "Ease In Out"]);
+        animationTiming.optionalProperty = true;
+        let animationIterationCount = new WebInspector.VisualStyleNumberInputBox("animation-iteration-count", WebInspector.UIString("Iterations"), this._keywords.defaults.concat(["Infinite"]), null);
+        animationIterationCount.optionalProperty = true;
+
+        animationTimingRow.element.appendChild(animationTiming.element);
+        animationTimingRow.element.appendChild(animationIterationCount.element);
+
+        let animationDurationRow = new WebInspector.DetailsSectionRow;
+
+        let animationTimeKeywords = ["s", "ms"];
+        let animationDuration = new WebInspector.VisualStyleNumberInputBox("animation-duration", WebInspector.UIString("Duration"), null, animationTimeKeywords);
+        animationDuration.optionalProperty = true;
+        let animationDelay = new WebInspector.VisualStyleNumberInputBox("animation-delay", WebInspector.UIString("Delay"), null, animationTimeKeywords);
+        animationDelay.optionalProperty = true;
+
+        animationDurationRow.element.appendChild(animationDuration.element);
+        animationDurationRow.element.appendChild(animationDelay.element);
+
+        let animationDirectionRow = new WebInspector.DetailsSectionRow;
+
+        let animationDirection = new WebInspector.VisualStyleKeywordPicker("animation-direction", WebInspector.UIString("Direction"), {
+            basic: this._keywords.normal.concat(["Reverse"]),
+            advanced: ["Alternate", "Alternate Reverse"]
+        });
+        animationDirection.optionalProperty = true;
+        let animationFillMode = new WebInspector.VisualStyleKeywordPicker("animation-fill-mode", WebInspector.UIString("Fill Mode"), this._keywords.defaults.concat(["None", "Forwards", "Backwards", "Both"]));
+        animationFillMode.optionalProperty = true;
+
+        animationDirectionRow.element.appendChild(animationDirection.element);
+        animationDirectionRow.element.appendChild(animationFillMode.element);
+
+        let animationStateRow = new WebInspector.DetailsSectionRow;
+
+        let animationPlayState = new WebInspector.VisualStyleKeywordIconList("animation-play-state", WebInspector.UIString("State"), ["Running", "Paused", "Initial"]);
+        animationPlayState.optionalProperty = true;
+
+        animationStateRow.element.appendChild(animationPlayState.element);
+
+        let animationProperties = [animationName, animationDuration, animationTiming, animationDelay, animationIterationCount, animationDirection, animationFillMode, animationPlayState];
+        let animationPropertyCombiner = new WebInspector.VisualStylePropertyCombiner("animation", animationProperties);
+
+        let noRemainingCommaSeparatedEditorItems = this._noRemainingCommaSeparatedEditorItems.bind(this, animationPropertyCombiner, animationProperties);
+        properties.animation.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems, noRemainingCommaSeparatedEditorItems, this);
+
+        let selectedCommaSeparatedEditorItemValueChanged = this._selectedCommaSeparatedEditorItemValueChanged.bind(this, properties.animation, animationPropertyCombiner);
+        animationPropertyCombiner.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, selectedCommaSeparatedEditorItemValueChanged, this);
+
+        let commaSeparatedEditorTreeItemSelected = this._commaSeparatedEditorTreeItemSelected.bind(animationPropertyCombiner);
+        properties.animation.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
+
+        group.specifiedWidthProperties = [properties.animation];
+
+        let animationGroup = new WebInspector.DetailsSectionGroup([animationRow, 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..3e9e2d0f2
--- /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: var(--selected-background-color);
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected {
+    background-color: var(--selected-background-color);
+    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..74fff017c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js
@@ -0,0 +1,157 @@
+/*
+ * 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);
+    }
+
+    // Protected
+
+    get value()
+    {
+        return this._keywordSelectElement.value;
+    }
+
+    set value(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;
+    }
+
+    set placeholder(placeholder)
+    {
+        if (this._updatedValues.conflictingValues)
+            return;
+
+        this.specialPropertyPlaceholderElement.textContent = this._canonicalizedKeywordForKey(placeholder) || placeholder;
+    }
+
+    get synthesizedValue()
+    {
+        return this._unchangedOptionElement.selected ? null : this._keywordSelectElement.value;
+    }
+
+    updateEditorValues(updatedValues)
+    {
+        if (!updatedValues.conflictingValues) {
+            let missing = this._propertyMissing || !updatedValues.value;
+            this._unchangedOptionElement.selected = missing;
+            this.specialPropertyPlaceholderElement.hidden = !missing;
+        }
+
+        super.updateEditorValues(updatedValues);
+    }
+
+    // Private
+
+    _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..bd25393e2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js
@@ -0,0 +1,408 @@
+/*
+ * 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.debounce(250)._valueNumberInputKeyUp);
+        this._valueNumberInputElement.addEventListener("blur", this._blurContentElement.bind(this));
+        this._valueNumberInputElement.addEventListener("change", this.debounce(250)._valueNumberInputChanged);
+        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;
+
+        super.specialPropertyPlaceholderElementText = 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.debounce(250)._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..8f68d27f7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css
@@ -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.
+ */
+
+.visual-style-property-container {
+    display: flex;
+    min-height: 22px;
+    margin: 0 6px;
+
+    flex-basis: 160px;
+    flex-grow: 1;
+}
+
+.visual-style-property-container.inactive {
+    display: none;
+}
+
+.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.missing-dependency > .visual-style-property-editor-warning {
+    display: block;
+    content: url(../Images/Warning.svg);
+}
+
+.visual-style-property-container.invalid-value > .visual-style-property-editor-warning {
+    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:matches(.missing-dependency, .invalid-value) > *:first-child:matches(.visual-style-property-value-container) {
+    margin-left: 2px;
+}
+
+.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-container > *:first-child:matches(.visual-style-property-value-container) > .visual-style-special-property-placeholder {
+    display: none;
+}
+
+.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..85276dd24
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js
@@ -0,0 +1,617 @@
+/*
+ * 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 || "";
+
+        let linePrefixText = WebInspector.indentString();
+        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._element.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._element.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._element.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._element.classList.remove("missing-dependency");
+            return;
+        }
+
+        let title = "";
+
+        let dependencies = this._style.nodeStyles.computedStyle.properties.filter((property) => {
+            return this._dependencies.has(property.name) || this._dependencies.has(property.canonicalName);
+        });
+
+        for (let property of dependencies) {
+            let dependencyValues = this._dependencies.get(property.name);
+            if (!dependencyValues.includes(property.value))
+                title += "\n " + property.name + ": " + dependencyValues.join("/");
+        }
+
+        this._element.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]);
+        popover.windowResizeHandler = () => {
+            let bounds = WebInspector.Rect.rectFromClientRect(this._titleElement.getBoundingClientRect());
+            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..b46ba162c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css
@@ -0,0 +1,150 @@
+/*
+ * 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;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .visual-style-property-editor-link {
+        margin-left: 0;
+    }
+}
+
+.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: 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.link-vertical {
+    position: relative;
+    top: -1px;
+}
+
+.visual-style-property-editor-link:not(.link-all) {
+    height: 20px;
+}
+
+.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..00d11fb82
--- /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("Remove link") : WebInspector.UIString("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..ea3697ea7
--- /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 property name");
+        this._propertyNameInputElement.addEventListener("keydown", this._inputKeyDown.bind(this));
+        this._propertyNameInputElement.addEventListener("keyup", this.debounce(250)._inputKeyUp);
+        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..2aae59716
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.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.
+ */
+
+.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-top: 0;
+    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..e9717a051
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css
@@ -0,0 +1,120 @@
+/*
+ * 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;
+}
+
+.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 ~ .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..0d7240557
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js
@@ -0,0 +1,329 @@
+/*
+ * 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()
+    {
+        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._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("Add 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(inherited.node.displayName);
+                    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 null;
+
+        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.isInUserAgentShadowTree())
+            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..9e0338fa3
--- /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: var(--selected-background-color) !important;
+    color: var(--selected-foreground-color);
+}
+
+.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..807c3a171
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js
@@ -0,0 +1,295 @@
+/*
+ * 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;
+        }
+
+        let iconClasses = [iconClassName];
+        if (style.ownerRule && style.ownerRule.hasMatchedPseudoElementSelector())
+            iconClasses.push(WebInspector.CSSStyleDeclarationSection.PseudoElementSelectorStyleClassName);
+
+        title = title.trim();
+
+        super(["visual-style-selector-item", ...iconClasses], title, subtitle, style);
+
+        this._delegate = delegate;
+
+        this._iconClasses = iconClasses;
+        this._lastValue = title;
+        this._enableEditing = true;
+        this._hasInvalidSelector = false;
+    }
+
+    // Public
+
+    get iconClassName()
+    {
+        return this._iconClasses.join(" ");
+    }
+
+    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._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");
+    }
+
+    populateContextMenu(contextMenu, 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);
+            });
+        }
+
+        super.populateContextMenu(contextMenu, event);
+    }
+
+    // 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();
+    }
+
+    _handleCheckboxChanged(event)
+    {
+        this._updateCheckboxTitle();
+        this.dispatchEventToListeners(WebInspector.VisualStyleSelectorTreeItem.Event.CheckboxChanged, {enabled: this._checkboxElement.checked});
+    }
+
+    _updateCheckboxTitle()
+    {
+        if (this._checkboxElement.checked)
+            this._checkboxElement.title = WebInspector.UIString("Comment out rule");
+        else
+            this._checkboxElement.title = WebInspector.UIString("Uncomment 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 previous selector “%s”").format(this.representedObject.ownerRule.selectorText);
+            return;
+        }
+
+        this._iconElement.title = null;
+        this.mainTitleElement.title = null;
+
+        let hasMatchedPseudoElementSelector = this.representedObject.ownerRule && this.representedObject.ownerRule.hasMatchedPseudoElementSelector();
+        this._iconClasses.toggleIncludes(WebInspector.CSSStyleDeclarationSection.PseudoElementSelectorStyleClassName, hasMatchedPseudoElementSelector);
+    }
+
+    _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..1b5550e11
--- /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: var(--selected-foreground-color);
+    background-color: var(--selected-background-color);
+}
+
+.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..4b2cfbe32
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.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.
+ */
+
+.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:matches(.bezier, .spring) {
+    width: 23px;
+    height: 20px;
+}
+
+.visual-style-property-container.timing-editor > .visual-style-property-value-container:not(.bezier-value) > .inline-swatch.bezier,
+.visual-style-property-container.timing-editor > .visual-style-property-value-container:not(.spring-value) > .inline-swatch.spring {
+    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..f9d0ecbf1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js
@@ -0,0 +1,161 @@
+/*
+ * 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._keywordSelectElement.createChild("hr");
+
+        this._customBezierOptionElement = this._keywordSelectElement.createChild("option");
+        this._customBezierOptionElement.value = "bezier";
+        this._customBezierOptionElement.text = WebInspector.UIString("Bezier");
+
+        this._customSpringOptionElement = this._keywordSelectElement.createChild("option");
+        this._customSpringOptionElement.value = "spring";
+        this._customSpringOptionElement.text = WebInspector.UIString("Spring");
+
+        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);
+
+        this._springSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Spring);
+        this._springSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._springSwatchValueChanged, this);
+        this.contentElement.appendChild(this._springSwatch.element);
+    }
+
+    // Protected
+
+    get value()
+    {
+        if (this._customBezierOptionElement.selected)
+            return this._bezierValue;
+
+        if (this._customSpringOptionElement.selected)
+            return this._springValue;
+
+        return super.value;
+    }
+
+    set value(value)
+    {
+        this._bezierValue = value;
+        this._springValue = value;
+        if (this.valueIsSupportedKeyword(value)) {
+            super.value = value;
+            this.contentElement.classList.remove("bezier-value", "spring-value");
+            return;
+        }
+
+        let bezier = this._bezierValue;
+        this._customBezierOptionElement.selected = !!bezier;
+        this.contentElement.classList.toggle("bezier-value", !!bezier);
+
+        let spring = this._springValue;
+        this._customSpringOptionElement.selected = !!spring;
+        this.contentElement.classList.toggle("spring-value", !!spring);
+
+        this.specialPropertyPlaceholderElement.hidden = !!bezier || !!spring;
+        if (!bezier && !spring)
+            super.value = value;
+    }
+
+    get synthesizedValue()
+    {
+        if (this._customBezierOptionElement.selected)
+            return this._bezierValue;
+
+        if (this._customSpringOptionElement.selected)
+            return this._springValue;
+
+        return super.synthesizedValue;
+    }
+
+    parseValue(text)
+    {
+        return /((?:cubic-bezier|spring)\(.+\))/.exec(text);
+    }
+
+    // Private
+
+    get _bezierValue()
+    {
+        let bezier = this._bezierSwatch.value;
+        if (!bezier)
+            return null;
+
+        return bezier.toString();
+    }
+
+    set _bezierValue(text)
+    {
+        this._bezierSwatch.value = WebInspector.CubicBezier.fromString(text);
+    }
+
+    get _springValue()
+    {
+        let spring = this._springSwatch.value;
+        if (!spring)
+            return null;
+
+        return spring.toString();
+    }
+
+    set _springValue(text)
+    {
+        this._springSwatch.value = WebInspector.Spring.fromString(text);
+    }
+
+    _handleKeywordChanged()
+    {
+        super._handleKeywordChanged();
+
+        let customBezierOptionSelected = this._customBezierOptionElement.selected;
+        this.contentElement.classList.toggle("bezier-value", !!customBezierOptionSelected);
+        if (customBezierOptionSelected)
+            this._bezierValue = "linear";
+
+        let customSpringOptionSelected = this._customSpringOptionElement.selected;
+        this.contentElement.classList.toggle("spring-value", !!customSpringOptionSelected);
+        if (customSpringOptionSelected)
+            this._springValue = "1 100 10 0";
+
+        this.specialPropertyPlaceholderElement.hidden = !!customBezierOptionSelected || !!customSpringOptionSelected;
+    }
+
+    _bezierSwatchValueChanged(event)
+    {
+        this._valueDidChange();
+    }
+
+    _springSwatchValueChanged(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..f6ec6d79b
--- /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.debounce(250)._valueDidChange);
+        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..3a35eb7fa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.css
@@ -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.
+ */
+
+.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider {
+    position: relative;
+    margin: 5px 1px 0;
+    background-image: linear-gradient(90deg, transparent, black), url(../Images/Checkers.svg);
+}
+
+.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider > img {
+    top: -1px;
+}
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/Views/WorkerTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/WorkerTreeElement.js
new file mode 100644
index 000000000..d2d3de692
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/WorkerTreeElement.js
@@ -0,0 +1,166 @@
+/*
+ * 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.
+ */
+
+// FIXME: <https://webkit.org/b/164427> Web Inspector: WorkerTarget's mainResource should be a Resource not a Script
+// When we are guaranteed a Resource and not a Script we can extend ResourceTreeElement.
+
+WebInspector.WorkerTreeElement = class WorkerTreeElement extends WebInspector.ScriptTreeElement
+{
+    constructor(target)
+    {
+        super(target.mainResource);
+
+        console.assert(target instanceof WebInspector.Target);
+        console.assert(target.type === WebInspector.Target.Type.Worker);
+        console.assert(target.mainResource instanceof WebInspector.Script);
+
+        this._target = target;
+        this._target.addEventListener(WebInspector.Target.Event.ResourceAdded, this._resourceAdded, this);
+        this._target.addEventListener(WebInspector.Target.Event.ScriptAdded, this._scriptAdded, this);
+
+        this._expandedSetting = new WebInspector.Setting("worker-expanded-" + this._target.name.hash, true);
+
+        // Scripts are top level.
+        this.registerFolderizeSettings("scripts", null, this._target.resourceCollection.resourceCollectionForType(WebInspector.Resource.Type.Script), WebInspector.ResourceTreeElement);
+        this.registerFolderizeSettings("extra-scripts", null, this._target.extraScriptCollection, WebInspector.ScriptTreeElement);
+
+        // All other resources may be folderized.
+        for (let [key, value] of Object.entries(WebInspector.Resource.Type)) {
+            if (value === WebInspector.Resource.Type.Script)
+                continue;
+            let folderName = WebInspector.Resource.displayNameForType(value, true);
+            this.registerFolderizeSettings(key, folderName, this._target.resourceCollection.resourceCollectionForType(value), WebInspector.ResourceTreeElement);
+        }
+
+        this.updateParentStatus();
+
+        if (this._expandedSetting.value)
+            this.expand();
+    }
+
+    // Public
+
+    get target() { return this._target; }
+
+    // Protected (TreeElement)
+
+    onexpand()
+    {
+        this._expandedSetting.value = true;
+    }
+
+    oncollapse()
+    {
+        if (this.hasChildren)
+            this._expandedSetting.value = false;
+    }
+
+    onpopulate()
+    {
+        if (this.children.length && !this.shouldRefreshChildren)
+            return;
+
+        this.shouldRefreshChildren = false;
+
+        this.removeChildren();
+        this.prepareToPopulate();
+
+        for (let resource of this._target.resourceCollection.items)
+            this.addChildForRepresentedObject(resource);
+
+        for (let script of this._target.extraScriptCollection.items)
+            this.addChildForRepresentedObject(script);
+
+        let sourceMaps = this._target.mainResource.sourceMaps;
+        for (let sourceMap of sourceMaps) {
+            for (let resource of sourceMap.resources)
+                this.addChildForRepresentedObject(resource);
+        }
+    }
+
+    populateContextMenu(contextMenu, event)
+    {
+        // FIXME: <https://webkit.org/b/164427> Web Inspector: WorkerTarget's mainResource should be a Resource not a Script
+        WebInspector.appendContextMenuItemsForSourceCode(contextMenu, this.script.resource ? this.script.resource : this.script);
+
+        super.populateContextMenu(contextMenu, event);
+    }
+
+    // Overrides from SourceCodeTreeElement.
+
+    updateSourceMapResources()
+    {
+        // Handle our own SourceMapResources.
+
+        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
+            return;
+
+        this.updateParentStatus();
+
+        if (this._target.mainResource.sourceMaps.length) {
+            this.hasChildren = true;
+            this.shouldRefreshChildren = true;
+        }
+    }
+
+    onattach()
+    {
+        // Handle our own SourceMapResources. Skip immediate superclasses.
+
+        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
+    }
+
+    // Overrides from FolderizedTreeElement
+
+    compareChildTreeElements(a, b)
+    {
+        let aIsResource = a instanceof WebInspector.ResourceTreeElement;
+        let bIsResource = b instanceof WebInspector.ResourceTreeElement;
+
+        if (aIsResource && bIsResource)
+            return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
+
+        if (!aIsResource && !bIsResource)
+            return super.compareChildTreeElements(a, b);
+
+        return aIsResource ? 1 : -1;
+    }
+
+    // Private
+
+    _scriptAdded(event)
+    {
+        let script = event.data.script;
+        if (!script.url && !script.sourceURL)
+            return;
+
+        this.addRepresentedObjectToNewChildQueue(script);
+    }
+
+    _resourceAdded(event)
+    {
+        this.addRepresentedObjectToNewChildQueue(event.data.resource);
+    }
+};
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
diff --git a/Source/WebInspectorUI/UserInterface/Workers/Formatter/ESTreeWalker.js b/Source/WebInspectorUI/UserInterface/Workers/Formatter/ESTreeWalker.js
new file mode 100644
index 000000000..fafcb6a04
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Workers/Formatter/ESTreeWalker.js
@@ -0,0 +1,309 @@
+/*
+ * 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.
+ */
+
+// Visit ES6 ESTree compatible AST nodes in program order.
+// <https://github.com/estree/estree>.
+//
+// The Node types and properties (for ES6) are described in:
+// <https://github.com/estree/estree/blob/master/es6.md>
+//
+// The ESTree spec doesn't appear to be complete yet, so this
+// currently assumes some Esprima nodes and properties.
+// <http://esprima.org/demo/parse.html>
+
+// FIXME: Add support for Import/Export/Modules nodes if we allow parsing modules.
+
+ESTreeWalker = class ESTreeWalker
+{
+    constructor(before, after)
+    {
+        console.assert(typeof before === "function");
+        console.assert(typeof after === "function");
+
+        this._before = before;
+        this._after = after;
+    }
+
+    walk(node)
+    {
+        this._walk(node, null);
+    }
+
+    // Private
+
+    _walk(node, parent)
+    {
+        if (!node)
+            return;
+
+        node.parent = parent;
+
+        this._before(node);
+        this._walkChildren(node);
+        this._after(node);
+    }
+
+    _walkArray(array, parent)
+    {
+        for (let i = 0; i < array.length; ++i)
+            this._walk(array[i], parent);
+    }
+
+    _walkChildren(node)
+    {
+        switch (node.type) {
+        case "AssignmentExpression":
+            this._walk(node.left, node);
+            this._walk(node.right, node);
+            break;
+        case "ArrayExpression":
+        case "ArrayPattern":
+            this._walkArray(node.elements, node);
+            break;
+        case "AssignmentPattern":
+            this._walk(node.left, node);
+            this._walk(node.right, node);
+            break;
+        case "AwaitExpression":
+            this._walk(node.argument, node);
+            break;
+        case "BlockStatement":
+            this._walkArray(node.body, node);
+            break;
+        case "BinaryExpression":
+            this._walk(node.left, node);
+            this._walk(node.right, node);
+            break;
+        case "BreakStatement":
+        case "ContinueStatement":
+            this._walk(node.label, node);
+            break;
+        case "CallExpression":
+            this._walk(node.callee, node);
+            this._walkArray(node.arguments, node);
+            break;
+        case "CatchClause":
+            this._walk(node.param, node);
+            this._walk(node.body, node);
+            break;
+        case "ClassBody":
+            this._walkArray(node.body, node);
+            break;
+        case "ClassDeclaration":
+        case "ClassExpression":
+            this._walk(node.id, node);
+            this._walk(node.superClass, node);
+            this._walk(node.body, node);
+            break;
+        case "DoWhileStatement":
+            this._walk(node.body, node);
+            this._walk(node.test, node);
+            break;
+        case "ExpressionStatement":
+            this._walk(node.expression, node);
+            break;
+        case "ForStatement":
+            this._walk(node.init, node);
+            this._walk(node.test, node);
+            this._walk(node.update, node);
+            this._walk(node.body, node);
+            break;
+        case "ForInStatement":
+        case "ForOfStatement":
+            this._walk(node.left, node);
+            this._walk(node.right, node);
+            this._walk(node.body, node);
+            break;
+        case "FunctionDeclaration":
+        case "FunctionExpression":
+        case "ArrowFunctionExpression":
+            this._walk(node.id, node);
+            this._walkArray(node.params, node);
+            this._walk(node.body, node);
+            break;
+        case "IfStatement":
+            this._walk(node.test, node);
+            this._walk(node.consequent, node);
+            this._walk(node.alternate, node);
+            break;
+        case "LabeledStatement":
+            this._walk(node.label, node);
+            this._walk(node.body, node);
+            break;
+        case "LogicalExpression":
+            this._walk(node.left, node);
+            this._walk(node.right, node);
+            break;
+        case "MemberExpression":
+            this._walk(node.object, node);
+            this._walk(node.property, node);
+            break;
+        case "MethodDefinition":
+            this._walk(node.key, node);
+            this._walk(node.value, node);
+            break;
+        case "NewExpression":
+            this._walk(node.callee, node);
+            this._walkArray(node.arguments, node);
+            break;
+        case "ObjectExpression":
+        case "ObjectPattern":
+            this._walkArray(node.properties, node);
+            break;
+        case "Program":
+            this._walkArray(node.body, node);
+            break;
+        case "Property":
+            this._walk(node.key, node);
+            this._walk(node.value, node);
+            break;
+        case "RestElement":
+            this._walk(node.argument, node);
+            break;
+        case "RestProperty":
+            this._walk(node.argument, node);
+            break;
+        case "ReturnStatement":
+            this._walk(node.argument, node);
+            break;
+        case "SequenceExpression":
+            this._walkArray(node.expressions, node);
+            break;
+        case "SpreadElement":
+            this._walk(node.argument, node);
+            break;
+        case "SpreadProperty":
+            this._walk(node.argument, node);
+            break;
+        case "SwitchStatement":
+            this._walk(node.discriminant, node);
+            this._walkArray(node.cases, node);
+            break;
+        case "SwitchCase":
+            this._walk(node.test, node);
+            this._walkArray(node.consequent, node);
+            break;
+        case "ConditionalExpression":
+            this._walk(node.test, node);
+            this._walk(node.consequent, node);
+            this._walk(node.alternate, node);
+            break;
+        case "TaggedTemplateExpression":
+            this._walk(node.tag, node);
+            this._walk(node.quasi, node);
+            break;
+        case "ThrowStatement":
+            this._walk(node.argument, node);
+            break;
+        case "TryStatement":
+            this._walk(node.block, node);
+            this._walk(node.handler, node);
+            this._walk(node.finalizer, node);
+            break;
+        case "UnaryExpression":
+            this._walk(node.argument, node);
+            break;
+        case "UpdateExpression":
+            this._walk(node.argument, node);
+            break;
+        case "VariableDeclaration":
+            this._walkArray(node.declarations, node);
+            break;
+        case "VariableDeclarator":
+            this._walk(node.id, node);
+            this._walk(node.init, node);
+            break;
+        case "WhileStatement":
+            this._walk(node.test, node);
+            this._walk(node.body, node);
+            break;
+        case "WithStatement":
+            this._walk(node.object, node);
+            this._walk(node.body, node);
+            break;
+        case "YieldExpression":
+            this._walk(node.argument, node);
+            break;
+
+        case "ExportAllDeclaration":
+            this._walk(node.source, node);
+            break;
+        case "ExportNamedDeclaration":
+            this._walk(node.declaration, node);
+            this._walkArray(node.specifiers, node);
+            this._walk(node.source, node);
+            break;
+        case "ExportDefaultDeclaration":
+            this._walk(node.declaration, node);
+            break;
+        case "ExportSpecifier":
+            this._walk(node.local, node);
+            this._walk(node.exported, node);
+            break;
+        case "ImportDeclaration":
+            this._walkArray(node.specifiers, node);
+            this._walk(node.source, node);
+            break;
+        case "ImportDefaultSpecifier":
+            this._walk(node.local, node);
+            break;
+        case "ImportNamespaceSpecifier":
+            this._walk(node.local, node);
+            break;
+        case "ImportSpecifier":
+            this._walk(node.imported, node);
+            this._walk(node.local, node);
+            break;
+        case "MetaProperty":
+            this._walk(node.meta, node);
+            this._walk(node.property, node);
+            break;
+
+        // Special case. We want to walk in program order,
+        // so walk quasi, expression, quasi, expression, etc.
+        case "TemplateLiteral":
+            for (var i = 0; i < node.expressions.length; ++i) {
+                this._walk(node.quasis[i], node);
+                this._walk(node.expressions[i], node);
+            }
+            break;
+
+        // Leaf nodes.
+        case "DebuggerStatement":
+        case "EmptyStatement":
+        case "Identifier":
+        case "Import":
+        case "Literal":
+        case "Super":
+        case "ThisExpression":
+        case "TemplateElement":
+            break;
+
+        default:
+            console.error("ESTreeWalker unhandled node type", node.type);
+            break;
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Workers/Formatter/EsprimaFormatter.js b/Source/WebInspectorUI/UserInterface/Workers/Formatter/EsprimaFormatter.js
new file mode 100644
index 000000000..7feae46b8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Workers/Formatter/EsprimaFormatter.js
@@ -0,0 +1,934 @@
+/*
+ * 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.
+ */
+
+// There is no standard for tokenizer types in JavaScript ASTs.
+// This currently assumes Esprima tokens, ranges, and comments.
+// <http://esprima.org/demo/parse.html>
+
+EsprimaFormatter = class EsprimaFormatter
+{
+    constructor(sourceText, sourceType, indentString = "    ")
+    {
+        this._success = false;
+
+        let tree = (function() {
+            try {
+                return esprima.parse(sourceText, {attachComment: true, range: true, tokens: true, sourceType});
+            } catch (error) {
+                return null;
+            }
+        })();
+
+        if (!tree)
+            return;
+
+        this._sourceText = sourceText;
+        this._builder = null;
+
+        let walker = new ESTreeWalker(this._before.bind(this), this._after.bind(this));
+
+        this._tokens = tree.tokens;
+        this._tokensLength = this._tokens.length;
+        this._tokenIndex = 0;
+
+        this._lineEndings = sourceText.lineEndings();
+        this._lineEndingsIndex = 0;
+
+        this._builder = new FormatterContentBuilder(indentString);
+        this._builder.setOriginalLineEndings(this._lineEndings.slice());
+
+        walker.walk(tree);
+        this._afterProgram(tree);
+        this._builder.appendNewline();
+
+        this._success = true;
+    }
+
+    // Static
+
+    static isWhitespace(ch)
+    {
+        return isECMAScriptWhitespace(ch) || isECMAScriptLineTerminator(ch);
+    }
+
+    // Public
+
+    get success()
+    {
+        return this._success;
+    }
+
+    get formattedText()
+    {
+        if (!this._success)
+            return null;
+        return this._builder.formattedContent;
+    }
+
+    get sourceMapData()
+    {
+        if (!this._success)
+            return null;
+        return this._builder.sourceMapData;
+    }
+
+    // Private
+
+    _insertNewlinesBeforeToken(token)
+    {
+        let force = false;
+        while (token.range[0] > this._lineEndings[this._lineEndingsIndex]) {
+            this._builder.appendNewline(force);
+            this._lineEndingsIndex++;
+            force = true;
+        }
+    }
+
+    _insertComment(comment)
+    {
+        if (comment.type === "Line")
+            this._builder.appendToken("//" + comment.value, comment.range[0]);
+        else if (comment.type === "Block")
+            this._builder.appendToken("/*" + comment.value + "*/", comment.range[0]);
+        this._builder.appendNewline();
+        comment.__handled = true;
+    }
+
+    _insertSameLineTrailingComments(node)
+    {
+        let endOfLine = this._lineEndings[this._lineEndingsIndex];
+        for (let comment of node.trailingComments) {
+            if (comment.range[0] > endOfLine)
+                break;
+            this._builder.removeLastNewline();
+            this._builder.appendSpace();
+            this._insertComment(comment);
+        }
+    }
+
+    _insertCommentsAndNewlines(comments)
+    {
+        for (let comment of comments) {
+            // A previous node may have handled this as a trailing comment.
+            if (comment.__handled)
+                continue;
+
+            // We expect the comment to be ahead of the last line.
+            // But if it is ahead of the next line ending, then it
+            // was preceded by an empty line. So include that.
+            if (comment.range[0] > this._lineEndings[this._lineEndingsIndex + 1])
+                this._builder.appendNewline(true);
+
+            this._insertComment(comment);
+
+            // Remove line endings for this comment.
+            while (comment.range[1] > this._lineEndings[this._lineEndingsIndex])
+                this._lineEndingsIndex++;
+        }
+    }
+
+    _before(node)
+    {
+        if (!node.parent)
+            return;
+
+        // Handle the tokens before this node, so in the context of our parent node.
+        while (this._tokenIndex < this._tokensLength && this._tokens[this._tokenIndex].range[0] < node.range[0]) {
+            let token = this._tokens[this._tokenIndex++];
+            this._insertNewlinesBeforeToken(token);
+            this._handleTokenAtNode(token, node.parent);
+        }
+
+        if (node.leadingComments)
+            this._insertCommentsAndNewlines(node.leadingComments);
+    }
+
+    _after(node)
+    {
+        // Handle any other tokens inside of this node before exiting.
+        while (this._tokenIndex < this._tokensLength && this._tokens[this._tokenIndex].range[0] < node.range[1]) {
+            let token = this._tokens[this._tokenIndex++];
+            this._insertNewlinesBeforeToken(token);
+            this._handleTokenAtNode(token, node);
+        }
+
+        this._exitNode(node);
+
+        if (node.trailingComments)
+            this._insertSameLineTrailingComments(node);
+    }
+
+    _isInForHeader(node)
+    {
+        let parent = node.parent;
+        if (!parent)
+            return false;
+
+        return (parent.type === "ForStatement" || parent.type === "ForInStatement" || parent.type === "ForOfStatement") && node !== parent.body;
+    }
+
+    _isRangeWhitespace(from, to)
+    {
+        let substring = this._sourceText.substring(from, to);
+        for (let i = 0; i < substring.length; ++i) {
+            if (!EsprimaFormatter.isWhitespace(substring.charCodeAt(i)))
+                return false;
+        }
+
+        return true;
+    }
+
+    _handleTokenAtNode(token, node)
+    {
+        let builder = this._builder;
+        let nodeType = node.type;
+        let tokenType = token.type;
+        let tokenValue = token.value;
+        let tokenOffset = token.range[0];
+
+        // Very common types that just pass through.
+        if (nodeType === "MemberExpression" || nodeType === "Literal" || nodeType === "ThisExpression" || nodeType === "UpdateExpression") {
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        // Most identifiers just pass through, but a few are special.
+        if (nodeType === "Identifier") {
+            builder.appendToken(tokenValue, tokenOffset);
+            if (tokenValue === "async" && node.parent.type === "Property" && node.parent.value.async && token.range[1] !== node.range[1])
+                builder.appendSpace();
+            return;
+        }
+
+        // Most newline handling is done with semicolons. However, we preserve
+        // newlines so code relying on automatic semicolon insertion should
+        // continue to work.
+        if (tokenValue === ";") {
+            // Avoid newlines for for loop header semicolons.
+            if (nodeType === "ForStatement") {
+                builder.appendToken(tokenValue, tokenOffset);
+                // Do not include spaces in empty for loop header sections: for(;;)
+                if (node.test || node.update) {
+                    if (node.test && this._isRangeWhitespace(token.range[1], node.test.range[0]))
+                        builder.appendSpace();
+                    else if (node.update && this._isRangeWhitespace(token.range[1], node.update.range[0]))
+                        builder.appendSpace();
+                }
+                return;
+            }
+
+            // Sometimes more specific nodes gets the semicolon inside a for loop header.
+            // Avoid newlines. Example is a VariableDeclaration in: for (var a, b; ...; ...).
+            if (this._isInForHeader(node)) {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+
+            // Avoid newline for single statement arrow functions with semicolons.
+            if (node.parent.type === "BlockStatement" && node.parent.body.length === 1 && node.parent.parent && node.parent.parent.type === "ArrowFunctionExpression") {
+                builder.appendToken(tokenValue, tokenOffset);
+                return;
+            }
+
+            builder.appendToken(tokenValue, tokenOffset);
+            builder.appendNewline();
+            return;
+        }
+
+        if (nodeType === "CallExpression" || nodeType === "ArrayExpression" || nodeType === "ArrayPattern" || nodeType === "ObjectPattern" || nodeType === "SequenceExpression") {
+            if (tokenValue === ",") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "LogicalExpression" || nodeType === "BinaryExpression") {
+            if (tokenValue !== "(" && tokenValue !== ")") {
+                builder.appendSpace();
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            if (tokenType === "Keyword") {
+                // in, instanceof, ...
+                builder.appendSpace();
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "BlockStatement") {
+            let isSingleStatementArrowFunction = node.parent.type === "ArrowFunctionExpression" && node.body.length === 1;
+            if (tokenValue === "{") {
+                // Class methods we put the opening brace on its own line.
+                if (node.parent && node.parent.parent && node.parent.parent.type === "MethodDefinition" && node.body.length) {
+                    builder.appendNewline();
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendNewline();
+                    builder.indent();
+                    return;
+                }
+                builder.appendToken(tokenValue, tokenOffset);
+                if (node.body.length && !isSingleStatementArrowFunction)
+                    builder.appendNewline();
+                builder.indent();
+                return;
+            }
+            if (tokenValue === "}") {
+                if (node.body.length && !isSingleStatementArrowFunction)
+                    builder.appendNewline();
+                builder.dedent();
+                builder.appendToken(tokenValue, tokenOffset);
+                return;
+            }
+            console.warn("Unexpected BlockStatement token", token);
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "VariableDeclaration") {
+            if (tokenValue === ",") {
+                if (this._isInForHeader(node)) {
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendSpace();
+                    return;
+                }
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendNewline();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            builder.appendSpace();
+            // If this is a multiple variable declaration, indent.
+            if (node.declarations.length > 1 && !node.__autoDedent) {
+                builder.indent();
+                node.__autoDedent = true;
+            }
+            return;
+        }
+
+        if (nodeType === "VariableDeclarator" || nodeType === "AssignmentExpression") {
+            if (tokenType === "Punctuator") {
+                let surroundWithSpaces = tokenValue !== "(" && tokenValue !== ")";
+                if (surroundWithSpaces)
+                    builder.appendSpace();
+                builder.appendToken(tokenValue, tokenOffset);
+                if (surroundWithSpaces)
+                    builder.appendSpace();
+                return;
+            }
+            console.warn("Unexpected " + nodeType + " token", token);
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "IfStatement") {
+            if (tokenType === "Keyword") {
+                if (tokenValue === "else") {
+                    if (node.__autoDedent) {
+                        builder.dedent();
+                        node.__autoDedent = false;
+                    }
+                    builder.appendSpace();
+                    builder.appendToken(tokenValue, tokenOffset);
+
+                    if (node.alternate && (node.alternate.type !== "BlockStatement" && node.alternate.type !== "IfStatement")) {
+                        builder.appendNewline();
+                        builder.indent();
+                        node.__autoDedent = true;
+                    } else
+                        builder.appendSpace();
+                    return;
+                }
+
+                console.assert(tokenValue === "if", token);
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+
+            // The last ')' in if(){}.
+            if (tokenValue === ")" && this._isRangeWhitespace(token.range[1], node.consequent.range[0])) {
+                if (node.consequent.type === "BlockStatement") {
+                    // The block will handle indenting.
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendSpace();
+                    return;
+                }
+
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendNewline();
+                builder.indent();
+                node.__autoDedent = true;
+                return;
+            }
+
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "ReturnStatement") {
+            if (tokenValue === ";") {
+                builder.appendToken(tokenValue, tokenOffset);
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            if (node.argument) {
+                // Multi-line LogicalExpressions (&& and ||) are a common style of return
+                // statement that benefits from indentation.
+                if (node.argument.type === "LogicalExpression" && !node.__autoDedent) {
+                    builder.indent();
+                    node.__autoDedent = true;
+                }
+                builder.appendSpace();
+            }
+            return;
+        }
+
+        if (nodeType === "FunctionDeclaration" || nodeType === "FunctionExpression") {
+            if (tokenType === "Keyword") {
+                console.assert(tokenValue === "function", token);
+                builder.appendToken(tokenValue, tokenOffset);
+                if (node.id)
+                    builder.appendSpace();
+                return;
+            }
+            if (tokenType === "Punctuator") {
+                if (tokenValue === "*") {
+                    builder.removeLastWhitespace();
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendSpace();
+                    return;
+                }
+                builder.appendToken(tokenValue, tokenOffset);
+                if (tokenValue === ")" || tokenValue === ",")
+                    builder.appendSpace();
+                return;
+            }
+            if (tokenType === "Identifier" && tokenValue === "async") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "WhileStatement" || nodeType === "WithStatement") {
+            if (tokenValue === "while" || tokenValue === "with") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+
+            // The last ')' in while(){} or with(){}.
+            if (tokenValue === ")" && this._isRangeWhitespace(token.range[1], node.body.range[0])) {
+                if (node.body.type === "BlockStatement") {
+                    // The block will handle indenting.
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendSpace();
+                    return;
+                }
+
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendNewline();
+                builder.indent();
+                node.__autoDedent = true;
+                return;
+            }
+
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "ForStatement" || nodeType === "ForOfStatement" || nodeType === "ForInStatement") {
+            if (tokenValue === "for") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            if (tokenValue === "in" || tokenValue === "of") {
+                builder.appendSpace();
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+
+            // The last ')' in for(){}.
+            if (tokenValue === ")" && this._isRangeWhitespace(token.range[1], node.body.range[0])) {
+                if (node.body.type === "BlockStatement") {
+                    // The block will handle indenting.
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendSpace();
+                    return;
+                }
+
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendNewline();
+                builder.indent();
+                node.__autoDedent = true;
+                return;
+            }
+
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "SwitchStatement") {
+            if (tokenValue === "switch") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            if (tokenType === "Punctuator") {
+                if (tokenValue === ")") {
+                    // FIXME: Would be nice to only add a space if this the ')' closing the discriminant: switch((1)){}
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendSpace();
+                    return;
+                }
+                if (tokenValue === "{") {
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendNewline();
+                    return;
+                }
+                if (tokenValue === "}") {
+                    builder.appendNewline();
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendNewline();
+                    return;
+                }
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "SwitchCase") {
+            if (tokenType === "Keyword") {
+                if (tokenValue === "case") {
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendSpace();
+                    return;
+                }
+                if (tokenValue === "default") {
+                    builder.appendToken(tokenValue, tokenOffset);
+                    return;
+                }
+                console.warn("Unexpected SwitchCase Keyword token", token);
+                builder.appendToken(tokenValue, tokenOffset);
+                return;
+            }
+
+            if (tokenValue === ":") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendNewline();
+                if (node.consequent.length) {
+                    builder.indent();
+                    node.__autoDedent = true;
+                }
+                return;
+            }
+
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "NewExpression") {
+            if (tokenValue === "new") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            if (tokenValue === ",") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "DoWhileStatement") {
+            if (tokenValue === "do") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            if (tokenValue === "while") {
+                builder.appendSpace();
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "ThrowStatement") {
+            if (tokenValue === "throw") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "UnaryExpression") {
+            if (tokenType === "Keyword") {
+                // typeof, instanceof, void
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "ConditionalExpression") {
+            if (tokenValue === "?" || tokenValue === ":") {
+                builder.appendSpace();
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "ObjectExpression") {
+            // FIXME: It would be nice to detect if node.properties is very short
+            // and the node.properties themselves are very small then inline them
+            // instead of always adding newlines. Objects like: {a}, {a:1} but
+            // not objects like {a:function(){1;}}.
+            if (tokenValue === "{") {
+                builder.appendToken(tokenValue, tokenOffset);
+                if (node.properties.length) {
+                    builder.appendNewline();
+                    builder.indent();
+                }
+                return;
+            }
+            if (tokenValue === "}") {
+                if (node.properties.length) {
+                    builder.appendNewline();
+                    builder.dedent();
+                }
+                builder.appendToken(tokenValue, tokenOffset);
+                return;
+            }
+            if (tokenValue === ",") {
+                builder.appendToken(tokenValue, tokenOffset);
+                if (node.properties.length)
+                    builder.appendNewline();
+                else
+                    builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "ArrowFunctionExpression") {
+            if (tokenType === "Punctuator") {
+                if (tokenValue === "=>") {
+                    builder.appendSpace();
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendSpace();
+                    return;
+                }
+                if (tokenValue === ",") {
+                    builder.appendToken(tokenValue, tokenOffset);
+                    builder.appendSpace();
+                    return;
+                }
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            if (tokenType === "Identifier" && tokenValue === "async")
+                builder.appendSpace();
+            return;
+        }
+
+        if (nodeType === "AwaitExpression") {
+            builder.appendToken(tokenValue, tokenOffset);
+            if (tokenType === "Identifier" && tokenValue === "await")
+                builder.appendSpace();
+            return;
+        }
+
+        if (nodeType === "Property") {
+            console.assert(tokenValue === ":" || tokenValue === "get" || tokenValue === "set" || tokenValue === "async" || tokenValue === "*" || tokenValue === "[" || tokenValue === "]" || tokenValue === "(" || tokenValue === ")", token);
+            builder.appendToken(tokenValue, tokenOffset);
+            if (tokenValue === ":" || tokenValue === "get" || tokenValue === "set" || tokenValue === "async")
+                builder.appendSpace();
+            return;
+        }
+
+        if (nodeType === "MethodDefinition") {
+            console.assert(tokenValue === "static" || tokenValue === "get" || tokenValue === "set" || tokenValue === "async" || tokenValue === "*" || tokenValue === "[" || tokenValue === "]" || tokenValue === "(" || tokenValue === ")", token);
+            builder.appendToken(tokenValue, tokenOffset);
+            if (tokenValue === "static" || tokenValue === "get" || tokenValue === "set" || tokenValue === "async")
+                builder.appendSpace();
+            return;
+        }
+
+        if (nodeType === "BreakStatement" || nodeType === "ContinueStatement") {
+            builder.appendToken(tokenValue, tokenOffset);
+            if (tokenType === "Keyword" && node.label)
+                builder.appendSpace();
+            return;
+        }
+
+        if (nodeType === "LabeledStatement") {
+            console.assert(tokenValue === ":", token);
+            builder.appendToken(tokenValue, tokenOffset);
+            builder.appendNewline();
+            return;
+        }
+
+        if (nodeType === "TryStatement") {
+            if (tokenValue === "try") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            if (tokenValue === "finally") {
+                builder.appendSpace();
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            console.warn("Unexpected TryStatement token", token);
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "CatchClause") {
+            if (tokenValue === "catch") {
+                builder.appendSpace();
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            if (tokenValue === ")") {
+                // The block will handle indenting.
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "ClassExpression" || nodeType === "ClassDeclaration") {
+            if (tokenValue === "class") {
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            if (tokenValue === "extends") {
+                builder.appendSpace();
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "ClassBody") {
+            if (tokenValue === "{") {
+                if (node.parent.id)
+                    builder.appendSpace();
+                builder.appendToken(tokenValue, tokenOffset);
+                if (node.body.length)
+                    builder.appendNewline();
+                builder.indent();
+                return;
+            }
+            if (tokenValue === "}") {
+                if (node.body.length)
+                    builder.appendNewline();
+                builder.dedent();
+                builder.appendToken(tokenValue, tokenOffset);
+                builder.appendNewline();
+                return;
+            }
+            console.warn("Unexpected ClassBody token", token);
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "YieldExpression") {
+            if (tokenType === "Keyword") {
+                console.assert(tokenValue === "yield", token);
+                builder.appendToken(tokenValue, tokenOffset);
+                if (node.argument)
+                    builder.appendSpace();
+                return;
+            }
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        if (nodeType === "ImportDeclaration" || nodeType === "ExportNamedDeclaration") {
+            if (tokenValue === "}" || (tokenType === "Identifier" && tokenValue === "from"))
+                builder.appendSpace();
+            builder.appendToken(tokenValue, tokenOffset);
+            if (tokenValue !== "}")
+                builder.appendSpace();
+            return;
+        }
+
+        if (nodeType === "ExportSpecifier" || nodeType === "ImportSpecifier") {
+            if (tokenType === "Identifier" && tokenValue === "as")
+                builder.appendSpace();
+            builder.appendToken(tokenValue, tokenOffset);
+            builder.appendSpace();
+            return;
+        }
+
+        if (nodeType === "ExportAllDeclaration" || nodeType === "ExportDefaultDeclaration" || nodeType === "ImportDefaultSpecifier" || nodeType === "ImportNamespaceSpecifier") {
+            builder.appendToken(tokenValue, tokenOffset);
+            if (tokenValue !== "(" && tokenValue !== ")")
+                builder.appendSpace();
+            return;
+        }
+
+        // Include these here so we get only get warnings about unhandled nodes.
+        if (nodeType === "ExpressionStatement"
+            || nodeType === "SpreadElement"
+            || nodeType === "SpreadProperty"
+            || nodeType === "Super"
+            || nodeType === "Import"
+            || nodeType === "MetaProperty"
+            || nodeType === "RestElement"
+            || nodeType === "RestProperty"
+            || nodeType === "TemplateElement"
+            || nodeType === "TemplateLiteral"
+            || nodeType === "DebuggerStatement"
+            || nodeType === "AssignmentPattern") {
+            builder.appendToken(tokenValue, tokenOffset);
+            return;
+        }
+
+        // Warn about possible unhandled types.
+        console.warn(nodeType, tokenValue);
+
+        // Fallback behavior in case there are unhandled types.
+        builder.appendToken(tokenValue, tokenOffset);
+
+        if (tokenType === "Keyword")
+            builder.appendSpace();
+    }
+
+    _exitNode(node)
+    {
+        if (node.__autoDedent)
+            this._builder.dedent();
+
+        if (node.type === "BlockStatement") {
+            if (node.parent) {
+                // Newline after if(){}
+                if (node.parent.type === "IfStatement" && (!node.parent.alternate || node.parent.consequent !== node)) {
+                    this._builder.appendNewline();
+                    return;
+                }
+                // Newline after for(){}
+                if (node.parent.type === "ForStatement" || node.parent.type === "ForOfStatement" || node.parent.type === "ForInStatement") {
+                    this._builder.appendNewline();
+                    return;
+                }
+                // Newline after while(){}
+                if (node.parent.type === "WhileStatement") {
+                    this._builder.appendNewline();
+                    return;
+                }
+                // Newline after function(){}
+                if (node.parent.type === "FunctionDeclaration") {
+                    this._builder.appendNewline();
+                    return;
+                }
+                // Newline after catch block in try{}catch(e){}
+                if (node.parent.type === "CatchClause" && !node.parent.parent.finalizer) {
+                    this._builder.appendNewline();
+                    return;
+                }
+                // Newline after finally block in try{}catch(e){}finally{}
+                if (node.parent.type === "TryStatement" && node.parent.finalizer && node.parent.finalizer === node) {
+                    this._builder.appendNewline();
+                    return;
+                }
+                // Newline after class body methods in class {method(){}}
+                if (node.parent.parent && node.parent.parent.type === "MethodDefinition") {
+                    this._builder.appendNewline();
+                    return;
+                }
+                // Newline after anonymous block inside a block or program.
+                if (node.parent.type === "BlockStatement" || node.parent.type === "Program") {
+                    this._builder.appendNewline();
+                    return;
+                }
+            }
+            return;
+        }
+    }
+
+    _afterProgram(programNode)
+    {
+        if (!programNode)
+            return;
+
+        console.assert(programNode.type === "Program");
+
+        // If a program ends with comments, Esprima puts those
+        // comments on the last node of the body. However, if
+        // a program is entirely comments, then they are
+        // leadingComments on the program node.
+
+        if (programNode.body.length) {
+            let lastNode = programNode.body[programNode.body.length - 1];
+            if (lastNode.trailingComments)
+                this._insertCommentsAndNewlines(lastNode.trailingComments);
+        } else {
+            if (programNode.leadingComments)
+                this._insertCommentsAndNewlines(programNode.leadingComments);
+            console.assert(!programNode.trailingComments);
+        }
+    }
+};
+
+EsprimaFormatter.SourceType = {
+    Script: "script",
+    Module: "module",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Workers/Formatter/FormatterContentBuilder.js b/Source/WebInspectorUI/UserInterface/Workers/Formatter/FormatterContentBuilder.js
new file mode 100644
index 000000000..a60a27e32
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Workers/Formatter/FormatterContentBuilder.js
@@ -0,0 +1,244 @@
+/*
+ * 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.
+ */
+
+FormatterContentBuilder = class FormatterContentBuilder
+{
+    constructor(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 = {original: [0], formatted: [0]};
+        this._originalLineEndings = [];
+        this._formattedLineEndings = [];
+        this._originalOffset = 0;
+        this._formattedOffset = 0;
+
+        this._lastOriginalPosition = 0;
+        this._lastFormattedPosition = 0;
+    }
+
+    // Public
+
+    get originalContent()
+    {
+        return this._originalContent;
+    }
+
+    get formattedContent()
+    {
+        let formatted = this._formattedContent.join("");
+        console.assert(formatted.length === this._formattedContentLength);
+        return formatted;
+    }
+
+    get sourceMapData()
+    {
+        return {
+            mapping: this._mapping,
+            originalLineEndings: this._originalLineEndings,
+            formattedLineEndings: this._formattedLineEndings,
+        };
+    }
+
+    setOriginalContent(originalContent)
+    {
+        console.assert(!this._originalContent);
+        this._originalContent = originalContent;
+    }
+
+    setOriginalLineEndings(originalLineEndings)
+    {
+        console.assert(!this._originalLineEndings.length);
+        this._originalLineEndings = originalLineEndings;
+    }
+
+    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) {
+            if (this.lastTokenWasWhitespace)
+                this._popFormattedContent();
+            this._append("\n");
+            this._addFormattedLineEnding();
+            this._startOfLine = true;
+            this.lastTokenWasNewline = true;
+            this.lastTokenWasWhitespace = false;
+            this.lastNewlineAppendWasMultiple = false;
+        }
+    }
+
+    appendMultipleNewlines(newlines)
+    {
+        console.assert(newlines > 0);
+
+        let 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()
+    {
+        let 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.
+        let maxCacheIndent = 20;
+        let max = Math.min(this._indent, maxCacheIndent);
+        for (let i = this._indentCache.length; i <= max; ++i)
+            this._indentCache[i] = this._indentCache[i - 1] + this._indentString;
+
+        // Append indents as needed.
+        let 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/Workers/Formatter/FormatterUtilities.js b/Source/WebInspectorUI/UserInterface/Workers/Formatter/FormatterUtilities.js
new file mode 100644
index 000000000..3d77c14d2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Workers/Formatter/FormatterUtilities.js
@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+
+Object.defineProperty(Array.prototype, "lastValue",
+{
+    get()
+    {
+        if (!this.length)
+            return undefined;
+        return this[this.length - 1];
+    }
+});
+
+Object.defineProperty(String.prototype, "lineEndings",
+{
+    value()
+    {
+        let lineEndings = [];
+
+        let index = this.indexOf("\n");
+        while (index !== -1) {
+            lineEndings.push(index);
+            index = this.indexOf("\n", index + 1);
+        }
+
+        lineEndings.push(this.length);
+        return lineEndings;
+    }
+});
+
+// Whitespace helpers from Esprima.
+
+// ECMA-262 11.2 White Space
+function isECMAScriptWhitespace(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 isECMAScriptLineTerminator(ch) {
+    return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Workers/Formatter/FormatterWorker.js b/Source/WebInspectorUI/UserInterface/Workers/Formatter/FormatterWorker.js
new file mode 100644
index 000000000..9c056f11d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Workers/Formatter/FormatterWorker.js
@@ -0,0 +1,108 @@
+/*
+ * 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.
+ */
+
+importScripts(...[
+    "../../External/Esprima/esprima.js",
+    "FormatterUtilities.js",
+    "FormatterContentBuilder.js",
+    "ESTreeWalker.js",
+    "EsprimaFormatter.js",
+]);
+
+FormatterWorker = class FormatterWorker
+{
+    constructor()
+    {
+        self.addEventListener("message", this._handleMessage.bind(this));
+    }
+
+    // Actions
+
+    formatJavaScript(sourceText, isModule, indentString, includeSourceMapData)
+    {
+        let sourceType = isModule ? EsprimaFormatter.SourceType.Module : EsprimaFormatter.SourceType.Script;
+
+        // Format a JavaScript program.
+        let formatter = new EsprimaFormatter(sourceText, sourceType, indentString);
+        if (formatter.success) {
+            let result = {formattedText: formatter.formattedText};
+            if (includeSourceMapData) {
+                result.sourceMapData = formatter.sourceMapData;
+                // NOTE: With the EsprimaFormatter, multi-line tokens, such as comments and strings,
+                // would not have had their newlines counted properly by the builder. Rather then
+                // modify the formatter to check and account for newlines in every token just
+                // compute the list of line endings directly on the result.
+                result.sourceMapData.formattedLineEndings = result.formattedText.lineEndings();
+            }
+            return result;
+        }
+
+        // Format valid JSON.
+        // The formatter could fail if this was just a JSON string. So try a JSON.parse and stringify.
+        // This will produce empty source map data, but it is not code, so it is not as important.
+        try {
+            let jsonStringified = JSON.stringify(JSON.parse(sourceText), null, indentString);
+            let result = {formattedText: jsonStringified};
+            if (includeSourceMapData)
+                result.sourceMapData = {mapping: {original: [], formatted: []}, originalLineEndings: [], formattedLineEndings: []};
+            return result;
+        } catch (e) {}
+
+        // Format invalid JSON and anonymous functions.
+        // Some applications do not use JSON.parse but eval on JSON content. That is more permissive
+        // so try to format invalid JSON. Again no source map data since it is not code.
+        // Likewise, an unnamed function's toString() produces a "function() { ... }", which is not
+        // a valid program on its own. Wrap it in parenthesis to make it a function expression,
+        // which is a valid program.
+        let invalidJSONFormatter = new EsprimaFormatter("(" + sourceText + ")", sourceType, indentString);
+        if (invalidJSONFormatter.success) {
+            let formattedTextWithParens = invalidJSONFormatter.formattedText;
+            let result = {formattedText: formattedTextWithParens.substring(1, formattedTextWithParens.length - 2)}; // Remove "(" and ")\n".
+            if (includeSourceMapData)
+                result.sourceMapData = {mapping: {original: [], formatted: []}, originalLineEndings: [], formattedLineEndings: []};
+            return result;
+        }
+
+        return {formattedText: null};
+    }
+
+    // Private
+
+    _handleMessage(event)
+    {
+        let data = event.data;
+
+        // Action.
+        if (data.actionName) {
+            let result = this[data.actionName](...data.actionArguments);
+            self.postMessage({callId: data.callId, result});
+            return;
+        }
+
+        console.error("Unexpected FormatterWorker message", data);
+    }
+};
+
+self.formatterWorker = new FormatterWorker;
diff --git a/Source/WebInspectorUI/UserInterface/Workers/HeapSnapshot/HeapSnapshot.js b/Source/WebInspectorUI/UserInterface/Workers/HeapSnapshot/HeapSnapshot.js
new file mode 100644
index 000000000..b9e14dd65
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Workers/HeapSnapshot/HeapSnapshot.js
@@ -0,0 +1,838 @@
+/*
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ * 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:
+ *
+ *     * 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.
+ */
+
+// nodes
+// [<0:id>, <1:size>, <2:classNameTableIndex>, <3:internal>]
+const nodeFieldCount = 4;
+const nodeIdOffset = 0;
+const nodeSizeOffset = 1;
+const nodeClassNameOffset = 2;
+const nodeInternalOffset = 3;
+
+// edges
+// [<0:fromId>, <1:toId>, <2:typeTableIndex>, <3:edgeDataIndexOrEdgeNameIndex>]
+const edgeFieldCount = 4;
+const edgeFromIdOffset = 0;
+const edgeToIdOffset = 1;
+const edgeTypeOffset = 2;
+const edgeDataOffset = 3;
+
+// Other constants.
+const rootNodeIndex = 0;
+const rootNodeOrdinal = 0;
+const rootNodeIdentifier = 0;
+
+// Terminology:
+//   - `nodeIndex` is an index into the `nodes` list.
+//   - `nodeOrdinal` is the order of the node in the `nodes` list. (nodeIndex / nodeFieldCount).
+//   - `nodeIdentifier` is the node's id value. (nodes[nodeIndex + nodeIdOffset]).
+//   - `edgeIndex` is an index into the `edges` list.
+//
+// Lists:
+//   - _nodeOrdinalToFirstOutgoingEdge - `nodeOrdinal` to `edgeIndex` in `edges`.
+//     Iterate edges by walking `edges` (edgeFieldCount) and checking if fromIdentifier is current.
+//   - _nodeOrdinalToFirstIncomingEdge - `nodeOrdinal` to `incomingEdgeIndex` in `incomingEdges`.
+//     Iterate edges by walking `incomingEdges` until `nodeOrdinal+1`'s first incoming edge index.
+//   - _nodeOrdinalToDominatorNodeOrdinal - `nodeOrdinal` to `nodeOrdinal` of dominator.
+//   - _nodeOrdinalToRetainedSizes - `nodeOrdinal` to retain size value.
+//   - _nodeOrdinalIsDead - `nodeOrdinal` is dead or alive.
+//
+// Temporary Lists:
+//   - nodeOrdinalToPostOrderIndex - `nodeOrdinal` to a `postOrderIndex`.
+//   - postOrderIndexToNodeOrdinal - `postOrderIndex` to a `nodeOrdinal`.
+
+let nextSnapshotIdentifier = 1;
+
+HeapSnapshot = class HeapSnapshot
+{
+    constructor(objectId, snapshotDataString, title = null)
+    {
+        this._identifier = nextSnapshotIdentifier++;
+        this._objectId = objectId;
+        this._title = title;
+
+        let json = JSON.parse(snapshotDataString);
+        snapshotDataString = null;
+
+        let {version, nodes, nodeClassNames, edges, edgeTypes, edgeNames} = json;
+        console.assert(version === 1, "Expect JavaScriptCore Heap Snapshot version 1");
+
+        this._nodes = nodes;
+        this._nodeCount = nodes.length / nodeFieldCount;
+
+        this._edges = edges;
+        this._edgeCount = edges.length / edgeFieldCount;
+
+        this._edgeTypesTable = edgeTypes;
+        this._edgeNamesTable = edgeNames;
+        this._nodeClassNamesTable = nodeClassNames;
+
+        this._totalSize = 0;
+        this._nodeIdentifierToOrdinal = new Map; // <node identifier> => nodeOrdinal
+        this._lastNodeIdentifier = 0;
+        for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex += nodeFieldCount) {
+            let nodeOrdinal = nodeIndex / nodeFieldCount;
+            let nodeIdentifier = nodes[nodeIndex + nodeIdOffset];
+            this._nodeIdentifierToOrdinal.set(nodeIdentifier, nodeOrdinal);
+            this._totalSize += nodes[nodeIndex + nodeSizeOffset];
+            if (nodeIdentifier > this._lastNodeIdentifier)
+                this._lastNodeIdentifier = nodeIdentifier;
+        }
+
+        // FIXME: Replace toIdentifier and fromIdentifier in edges with nodeIndex to reduce hash lookups?
+
+        this._nodeOrdinalToFirstOutgoingEdge = new Uint32Array(this._nodeCount); // nodeOrdinal => edgeIndex
+        this._buildOutgoingEdges();
+
+        this._nodeOrdinalToFirstIncomingEdge = new Uint32Array(this._nodeCount + 1); // nodeOrdinal => incomingNodes/incomingEdges index
+        this._incomingNodes = new Uint32Array(this._edgeCount); // from nodeOrdinals.
+        this._incomingEdges = new Uint32Array(this._edgeCount); // edgeIndex.
+        this._buildIncomingEdges();
+
+        let {nodeOrdinalToPostOrderIndex, postOrderIndexToNodeOrdinal} = this._buildPostOrderIndexes();
+
+        this._nodeOrdinalToDominatorNodeOrdinal = new Uint32Array(this._nodeCount);
+        this._nodeOrdinalIsGCRoot = new Uint8Array(this._nodeCount);
+        this._buildDominatorIndexes(nodeOrdinalToPostOrderIndex, postOrderIndexToNodeOrdinal);
+
+        nodeOrdinalToPostOrderIndex = null;
+
+        this._nodeOrdinalToRetainedSizes = new Uint32Array(this._nodeCount);
+        this._buildRetainedSizes(postOrderIndexToNodeOrdinal);
+
+        postOrderIndexToNodeOrdinal = null;
+
+        this._nodeOrdinalIsDead = new Uint8Array(this._nodeCount);
+
+        let {liveSize, categories} = HeapSnapshot.updateCategoriesAndMetadata(this);
+        this._liveSize = liveSize;
+        this._categories = categories;
+    }
+
+    // Static
+
+    static updateCategoriesAndMetadata(snapshot, allowNodeIdentifierCallback)
+    {
+        let liveSize = 0;
+        let categories = {};
+
+        let nodes = snapshot._nodes;
+        let nodeClassNamesTable = snapshot._nodeClassNamesTable;
+        let nodeOrdinalToRetainedSizes = snapshot._nodeOrdinalToRetainedSizes;
+        let nodeOrdinalIsDead = snapshot._nodeOrdinalIsDead;
+
+        // Skip the <root> node.
+        let firstNodeIndex = nodeFieldCount;
+        let firstNodeOrdinal = 1;
+        for (let nodeIndex = firstNodeIndex, nodeOrdinal = firstNodeOrdinal; nodeIndex < nodes.length; nodeIndex += nodeFieldCount, nodeOrdinal++) {
+            if (allowNodeIdentifierCallback && !allowNodeIdentifierCallback(nodes[nodeIndex + nodeIdOffset]))
+                continue;
+
+            let classNameTableIndex = nodes[nodeIndex + nodeClassNameOffset];
+            let className = nodeClassNamesTable[classNameTableIndex];
+            let size = nodes[nodeIndex + nodeSizeOffset];
+            let retainedSize = nodeOrdinalToRetainedSizes[nodeOrdinal];
+            let internal = nodes[nodeIndex + nodeInternalOffset] ? true : false;
+            let dead = nodeOrdinalIsDead[nodeOrdinal] ? true : false;
+
+            let category = categories[className];
+            if (!category)
+                category = categories[className] = {className, size: 0, retainedSize: 0, count: 0, internalCount: 0, deadCount: 0};
+
+            category.size += size;
+            category.retainedSize += retainedSize;
+            category.count += 1;
+            if (internal)
+                category.internalCount += 1;
+            if (dead)
+                category.deadCount += 1;
+            else
+                liveSize += size;
+        }
+
+        return {liveSize, categories};
+    }
+
+    static allocationBucketCounts(snapshot, bucketSizes, allowNodeIdentifierCallback)
+    {
+        let counts = new Array(bucketSizes.length + 1);
+        let remainderBucket = counts.length - 1;
+        counts.fill(0);
+
+        let nodes = snapshot._nodes;
+
+        // Skip the <root> node.
+        let firstNodeIndex = nodeFieldCount;
+
+    outer:
+        for (let nodeIndex = firstNodeIndex; nodeIndex < nodes.length; nodeIndex += nodeFieldCount) {
+            if (allowNodeIdentifierCallback && !allowNodeIdentifierCallback(nodes[nodeIndex + nodeIdOffset]))
+                continue;
+
+            let size = nodes[nodeIndex + nodeSizeOffset];
+            for (let i = 0; i < bucketSizes.length; ++i) {
+                if (size < bucketSizes[i]) {
+                    counts[i]++;
+                    continue outer;
+                }
+            }
+            counts[remainderBucket]++;
+        }
+
+        return counts;
+    }
+
+    static instancesWithClassName(snapshot, className, allowNodeIdentifierCallback)
+    {
+        let instances = [];
+
+        let nodes = snapshot._nodes;
+        let nodeClassNamesTable = snapshot._nodeClassNamesTable;
+
+        // Skip the <root> node.
+        let firstNodeIndex = nodeFieldCount;
+        let firstNodeOrdinal = 1;
+        for (let nodeIndex = firstNodeIndex, nodeOrdinal = firstNodeOrdinal; nodeIndex < nodes.length; nodeIndex += nodeFieldCount, nodeOrdinal++) {
+            if (allowNodeIdentifierCallback && !allowNodeIdentifierCallback(nodes[nodeIndex + nodeIdOffset]))
+                continue;
+
+            let classNameTableIndex = nodes[nodeIndex + nodeClassNameOffset];
+            if (nodeClassNamesTable[classNameTableIndex] === className)
+                instances.push(nodeIndex);
+        }
+
+        return instances.map(snapshot.serializeNode, snapshot);
+    }
+
+    // Worker Methods
+
+    allocationBucketCounts(bucketSizes)
+    {
+        return HeapSnapshot.allocationBucketCounts(this, bucketSizes);
+    }
+
+    instancesWithClassName(className)
+    {
+        return HeapSnapshot.instancesWithClassName(this, className);
+    }
+
+    update()
+    {
+        return HeapSnapshot.updateCategoriesAndMetadata(this);
+    }
+
+    nodeWithIdentifier(nodeIdentifier)
+    {
+        let nodeOrdinal = this._nodeIdentifierToOrdinal.get(nodeIdentifier);
+        let nodeIndex = nodeOrdinal * nodeFieldCount;
+        return this.serializeNode(nodeIndex);
+    }
+
+    shortestGCRootPath(nodeIdentifier)
+    {
+        // Returns an array from this node to a gcRoot node.
+        // E.g. [Node (target), Edge, Node, Edge, Node (root)].
+        // Internal nodes are avoided, so if the path is empty this
+        // node is either a gcRoot or only reachable via Internal nodes.
+
+        let paths = this._gcRootPathes(nodeIdentifier);
+        if (!paths.length)
+            return [];
+
+        paths.sort((a, b) => a.length - b.length);
+
+        let shortestPathWithGlobalObject = null;
+        for (let path of paths) {
+            let lastNodeIndex = path[path.length - 1].node;
+            if (this._isNodeGlobalObject(lastNodeIndex)) {
+                shortestPathWithGlobalObject = path;
+                break;
+            }
+        }
+
+        let shortestPath = shortestPathWithGlobalObject || paths[0];
+        console.assert("node" in shortestPath[0], "Path should start with a node");
+        console.assert("node" in shortestPath[shortestPath.length - 1], "Path should end with a node");
+
+        return shortestPath.map((component) => {
+            if (component.node)
+                return this.serializeNode(component.node);
+            return this.serializeEdge(component.edge);
+        });
+    }
+
+    dominatedNodes(nodeIdentifier)
+    {
+        let dominatedNodes = [];
+
+        let targetNodeOrdinal = this._nodeIdentifierToOrdinal.get(nodeIdentifier);
+        for (let nodeOrdinal = 0; nodeOrdinal < this._nodeCount; ++nodeOrdinal) {
+            if (this._nodeOrdinalToDominatorNodeOrdinal[nodeOrdinal] === targetNodeOrdinal)
+                dominatedNodes.push(nodeOrdinal * nodeFieldCount);
+        }
+
+        return dominatedNodes.map(this.serializeNode, this);
+    }
+
+    retainedNodes(nodeIdentifier)
+    {
+        let retainedNodes = [];
+        let edges = [];
+
+        let nodeOrdinal = this._nodeIdentifierToOrdinal.get(nodeIdentifier);
+        let edgeIndex = this._nodeOrdinalToFirstOutgoingEdge[nodeOrdinal];
+        for (; this._edges[edgeIndex + edgeFromIdOffset] === nodeIdentifier; edgeIndex += edgeFieldCount) {
+            let toNodeIdentifier = this._edges[edgeIndex + edgeToIdOffset];
+            let toNodeOrdinal = this._nodeIdentifierToOrdinal.get(toNodeIdentifier);
+            let toNodeIndex = toNodeOrdinal * nodeFieldCount;
+            retainedNodes.push(toNodeIndex);
+            edges.push(edgeIndex);
+        }
+
+        return {
+            retainedNodes: retainedNodes.map(this.serializeNode, this),
+            edges: edges.map(this.serializeEdge, this),
+        };
+    }
+
+    retainers(nodeIdentifier)
+    {
+        let retainers = [];
+        let edges = [];
+
+        let nodeOrdinal = this._nodeIdentifierToOrdinal.get(nodeIdentifier);
+        let incomingEdgeIndex = this._nodeOrdinalToFirstIncomingEdge[nodeOrdinal];
+        let incomingEdgeIndexEnd = this._nodeOrdinalToFirstIncomingEdge[nodeOrdinal + 1];
+        for (let edgeIndex = incomingEdgeIndex; edgeIndex < incomingEdgeIndexEnd; ++edgeIndex) {
+            let fromNodeOrdinal = this._incomingNodes[edgeIndex];
+            let fromNodeIndex = fromNodeOrdinal * nodeFieldCount;
+            retainers.push(fromNodeIndex);
+            edges.push(this._incomingEdges[edgeIndex]);
+        }
+
+        return {
+            retainers: retainers.map(this.serializeNode, this),
+            edges: edges.map(this.serializeEdge, this),
+        };
+    }
+
+    updateDeadNodesAndGatherCollectionData(snapshots)
+    {
+        let previousSnapshotIndex = snapshots.indexOf(this) - 1;
+        let previousSnapshot = snapshots[previousSnapshotIndex];
+        if (!previousSnapshot)
+            return null;
+
+        let lastNodeIdentifier = previousSnapshot._lastNodeIdentifier;
+
+        // All of the node identifiers that could have existed prior to this snapshot.
+        let known = new Map;
+        for (let nodeIndex = 0; nodeIndex < this._nodes.length; nodeIndex += nodeFieldCount) {
+            let nodeIdentifier = this._nodes[nodeIndex + nodeIdOffset];
+            if (nodeIdentifier > lastNodeIdentifier)
+                continue;
+            known.set(nodeIdentifier, nodeIndex);
+        }
+
+        // Determine which node identifiers have since been deleted.
+        let collectedNodesList = [];
+        for (let nodeIndex = 0; nodeIndex < previousSnapshot._nodes.length; nodeIndex += nodeFieldCount) {
+            let nodeIdentifier = previousSnapshot._nodes[nodeIndex + nodeIdOffset];
+            let wasDeleted = !known.has(nodeIdentifier);
+            if (wasDeleted)
+                collectedNodesList.push(nodeIdentifier);
+        }
+
+        // Update dead nodes in previous snapshots.
+        let affectedSnapshots = [];
+        for (let snapshot of snapshots) {
+            if (snapshot === this)
+                break;
+            if (snapshot._markDeadNodes(collectedNodesList))
+                affectedSnapshots.push(snapshot._identifier);
+        }
+
+        // Convert list to a map.
+        let collectedNodes = {};
+        for (let i = 0; i < collectedNodesList.length; ++i)
+            collectedNodes[collectedNodesList[i]] = true;
+
+        return {
+            collectedNodes,
+            affectedSnapshots,
+        };
+    }
+
+    // Public
+
+    serialize()
+    {
+        return {
+            identifier: this._identifier,
+            title: this._title,
+            totalSize: this._totalSize,
+            totalObjectCount: this._nodeCount - 1, // <root>.
+            liveSize: this._liveSize,
+            categories: this._categories,
+        };
+    }
+
+    serializeNode(nodeIndex)
+    {
+        console.assert((nodeIndex % nodeFieldCount) === 0, "Invalid nodeIndex to serialize");
+
+        let nodeIdentifier = this._nodes[nodeIndex + nodeIdOffset];
+        let nodeOrdinal = nodeIndex / nodeFieldCount;
+        let edgeIndex = this._nodeOrdinalToFirstOutgoingEdge[nodeOrdinal];
+        let hasChildren = this._edges[edgeIndex + edgeFromIdOffset] === nodeIdentifier;
+
+        let dominatorNodeOrdinal = this._nodeOrdinalToDominatorNodeOrdinal[nodeOrdinal];
+        let dominatorNodeIndex = dominatorNodeOrdinal * nodeFieldCount;
+        let dominatorNodeIdentifier = this._nodes[dominatorNodeIndex + nodeIdOffset];
+
+        return {
+            id: nodeIdentifier,
+            className: this._nodeClassNamesTable[this._nodes[nodeIndex + nodeClassNameOffset]],
+            size: this._nodes[nodeIndex + nodeSizeOffset],
+            retainedSize: this._nodeOrdinalToRetainedSizes[nodeOrdinal],
+            internal: this._nodes[nodeIndex + nodeInternalOffset] ? true : false,
+            gcRoot: this._nodeOrdinalIsGCRoot[nodeOrdinal] ? true : false,
+            dead: this._nodeOrdinalIsDead[nodeOrdinal] ? true : false,
+            dominatorNodeIdentifier,
+            hasChildren,
+        };
+    }
+
+    serializeEdge(edgeIndex)
+    {
+        console.assert((edgeIndex % edgeFieldCount) === 0, "Invalid edgeIndex to serialize");
+
+        let edgeType = this._edgeTypesTable[this._edges[edgeIndex + edgeTypeOffset]];
+        let edgeData = this._edges[edgeIndex + edgeDataOffset];
+        switch (edgeType) {
+        case "Internal":
+            // edgeData can be ignored.
+            break;
+        case "Property":
+        case "Variable":
+            // edgeData is a table index.
+            edgeData = this._edgeNamesTable[edgeData];
+            break;
+        case "Index":
+            // edgeData is the index.
+            break;
+        default:
+            console.error("Unexpected edge type: " + edgeType);
+            break;
+        }
+
+        return {
+            from: this._edges[edgeIndex + edgeFromIdOffset],
+            to: this._edges[edgeIndex + edgeToIdOffset],
+            type: edgeType,
+            data: edgeData,
+        };
+    }
+
+    // Private
+
+    _buildOutgoingEdges()
+    {
+        let lastFromIdentifier = -1;
+        for (let edgeIndex = 0; edgeIndex < this._edges.length; edgeIndex += edgeFieldCount) {
+            let fromIdentifier = this._edges[edgeIndex + edgeFromIdOffset];
+            console.assert(lastFromIdentifier <= fromIdentifier, "Edge list should be ordered by from node identifier");
+            if (fromIdentifier !== lastFromIdentifier) {
+                let nodeOrdinal = this._nodeIdentifierToOrdinal.get(fromIdentifier);
+                this._nodeOrdinalToFirstOutgoingEdge[nodeOrdinal] = edgeIndex;
+                lastFromIdentifier = fromIdentifier;
+            }
+        }
+    }
+
+    _buildIncomingEdges()
+    {
+        // First calculate the count of incoming edges for each node.
+        for (let edgeIndex = 0; edgeIndex < this._edges.length; edgeIndex += edgeFieldCount) {
+            let toIdentifier = this._edges[edgeIndex + edgeToIdOffset];
+            let toNodeOrdinal = this._nodeIdentifierToOrdinal.get(toIdentifier);
+            this._nodeOrdinalToFirstIncomingEdge[toNodeOrdinal]++;
+        }
+
+        // Replace the counts with what will be the resulting index by running up the counts.
+        // Store the counts in what will be the edges list to use when placing edges in the list.
+        let runningFirstIndex = 0;
+        for (let nodeOrdinal = 0; nodeOrdinal < this._nodeCount; ++nodeOrdinal) {
+            let count = this._nodeOrdinalToFirstIncomingEdge[nodeOrdinal];
+            this._nodeOrdinalToFirstIncomingEdge[nodeOrdinal] = runningFirstIndex;
+            this._incomingNodes[runningFirstIndex] = count;
+            runningFirstIndex += count;
+        }
+
+        // Fill in the incoming edges list. Use the count as an offset when placing edges in the list.
+        for (let edgeIndex = 0; edgeIndex < this._edges.length; edgeIndex += edgeFieldCount) {
+            let fromIdentifier = this._edges[edgeIndex + edgeFromIdOffset];
+            let fromNodeOrdinal = this._nodeIdentifierToOrdinal.get(fromIdentifier);
+            let toIdentifier = this._edges[edgeIndex + edgeToIdOffset];
+            let toNodeOrdinal = this._nodeIdentifierToOrdinal.get(toIdentifier);
+
+            let firstIncomingEdgeIndex = this._nodeOrdinalToFirstIncomingEdge[toNodeOrdinal];
+            console.assert(this._incomingNodes[firstIncomingEdgeIndex] > 0, "Should be expecting edges for this node");
+            let countAsOffset = this._incomingNodes[firstIncomingEdgeIndex]--;
+            let index = firstIncomingEdgeIndex + countAsOffset - 1;
+            this._incomingNodes[index] = fromNodeOrdinal;
+            this._incomingEdges[index] = edgeIndex;
+        }
+
+        // Duplicate value on the end. Incoming edge iteration walks firstIncomingEdge(ordinal) to firstIncomingEdge(ordinal+1).
+        this._nodeOrdinalToFirstIncomingEdge[this._nodeCount] = this._nodeOrdinalToFirstIncomingEdge[this._nodeCount - 1];
+    }
+
+    _buildPostOrderIndexes()
+    {
+        let postOrderIndex = 0;
+        let nodeOrdinalToPostOrderIndex = new Uint32Array(this._nodeCount);
+        let postOrderIndexToNodeOrdinal = new Uint32Array(this._nodeCount);
+
+        let stackNodes = new Uint32Array(this._nodeCount); // nodeOrdinal.
+        let stackEdges = new Uint32Array(this._nodeCount); // edgeIndex.
+        let visited = new Uint8Array(this._nodeCount);
+
+        let stackTop = 0;
+        stackNodes[stackTop] = rootNodeOrdinal;
+        stackEdges[stackTop] = this._nodeOrdinalToFirstOutgoingEdge[rootNodeOrdinal];
+
+        while (stackTop >= 0) {
+            let nodeOrdinal = stackNodes[stackTop];
+            let nodeIdentifier = this._nodes[(nodeOrdinal * nodeFieldCount) + nodeIdOffset];
+            let edgeIndex = stackEdges[stackTop];
+
+            if (this._edges[edgeIndex + edgeFromIdOffset] === nodeIdentifier) {
+                // Prepare the next child for the current node.
+                stackEdges[stackTop] += edgeFieldCount;
+
+                let toIdentifier = this._edges[edgeIndex + edgeToIdOffset];
+                let toNodeOrdinal = this._nodeIdentifierToOrdinal.get(toIdentifier);
+                if (visited[toNodeOrdinal])
+                    continue;
+
+                // Child.
+                stackTop++;
+                stackNodes[stackTop] = toNodeOrdinal;
+                stackEdges[stackTop] = this._nodeOrdinalToFirstOutgoingEdge[toNodeOrdinal];
+                visited[toNodeOrdinal] = 1;
+            } else {
+                // Self.
+                nodeOrdinalToPostOrderIndex[nodeOrdinal] = postOrderIndex;
+                postOrderIndexToNodeOrdinal[postOrderIndex] = nodeOrdinal;
+                postOrderIndex++;
+                stackTop--;
+            }
+        }
+
+        // Unvisited nodes.
+        // This can happen if the parent node was disallowed on the backend, but other nodes
+        // that were only referenced from that disallowed node were eventually allowed because
+        // they may be generic system objects. Give these nodes a postOrderIndex anyways.
+        if (postOrderIndex !== this._nodeCount) {
+            // Root was the last node visited. Revert assigning it an index, add it back at the end.
+            postOrderIndex--;
+
+            // Visit unvisited nodes.
+            for (let nodeOrdinal = 1; nodeOrdinal < this._nodeCount; ++nodeOrdinal) {
+                if (visited[nodeOrdinal])
+                    continue;
+                nodeOrdinalToPostOrderIndex[nodeOrdinal] = postOrderIndex;
+                postOrderIndexToNodeOrdinal[postOrderIndex] = nodeOrdinal;
+                postOrderIndex++;
+            }
+
+            // Visit root again.
+            nodeOrdinalToPostOrderIndex[rootNodeOrdinal] = postOrderIndex;
+            postOrderIndexToNodeOrdinal[postOrderIndex] = rootNodeOrdinal;
+            postOrderIndex++;
+        }
+
+        console.assert(postOrderIndex === this._nodeCount, "All nodes were visited");
+        console.assert(nodeOrdinalToPostOrderIndex[rootNodeOrdinal] === this._nodeCount - 1, "Root node should have the last possible postOrderIndex");
+
+        return {nodeOrdinalToPostOrderIndex, postOrderIndexToNodeOrdinal};
+    }
+
+    _buildDominatorIndexes(nodeOrdinalToPostOrderIndex, postOrderIndexToNodeOrdinal)
+    {
+        // The algorithm is based on the article:
+        // K. Cooper, T. Harvey and K. Kennedy "A Simple, Fast Dominance Algorithm"
+
+        let rootPostOrderIndex = this._nodeCount - 1;
+        let noEntry = this._nodeCount;
+
+        let affected = new Uint8Array(this._nodeCount);
+        let dominators = new Uint32Array(this._nodeCount);
+
+        // Initialize with unset value.
+        dominators.fill(noEntry);
+
+        // Mark the root's dominator value.
+        dominators[rootPostOrderIndex] = rootPostOrderIndex;
+
+        // Affect the root's children. Also use this opportunity to mark them as GC roots.
+        let rootEdgeIndex = this._nodeOrdinalToFirstOutgoingEdge[rootNodeOrdinal];
+        for (let edgeIndex = rootEdgeIndex; this._edges[edgeIndex + edgeFromIdOffset] === rootNodeIdentifier; edgeIndex += edgeFieldCount) {
+            let toIdentifier = this._edges[edgeIndex + edgeToIdOffset];
+            let toNodeOrdinal = this._nodeIdentifierToOrdinal.get(toIdentifier);
+            let toPostOrderIndex = nodeOrdinalToPostOrderIndex[toNodeOrdinal];
+            affected[toPostOrderIndex] = 1;
+            this._nodeOrdinalIsGCRoot[toNodeOrdinal] = 1;
+        }
+
+        let changed = true;
+        while (changed) {
+            changed = false;
+
+            for (let postOrderIndex = rootPostOrderIndex - 1; postOrderIndex >= 0; --postOrderIndex) {
+                if (!affected[postOrderIndex])
+                    continue;
+                affected[postOrderIndex] = 0;
+
+                // The dominator is already the root, nothing to do.
+                if (dominators[postOrderIndex] === rootPostOrderIndex)
+                    continue;
+
+                let newDominatorIndex = noEntry;
+                let nodeOrdinal = postOrderIndexToNodeOrdinal[postOrderIndex];
+                let incomingEdgeIndex = this._nodeOrdinalToFirstIncomingEdge[nodeOrdinal];
+                let incomingEdgeIndexEnd = this._nodeOrdinalToFirstIncomingEdge[nodeOrdinal + 1];
+                for (let edgeIndex = incomingEdgeIndex; edgeIndex < incomingEdgeIndexEnd; ++edgeIndex) {
+                    let fromNodeOrdinal = this._incomingNodes[edgeIndex];
+                    let fromPostOrderIndex = nodeOrdinalToPostOrderIndex[fromNodeOrdinal];
+                    if (dominators[fromPostOrderIndex] !== noEntry) {
+                        if (newDominatorIndex === noEntry)
+                            newDominatorIndex = fromPostOrderIndex;
+                        else {
+                            while (fromPostOrderIndex !== newDominatorIndex) {
+                                while (fromPostOrderIndex < newDominatorIndex)
+                                    fromPostOrderIndex = dominators[fromPostOrderIndex];
+                                while (newDominatorIndex < fromPostOrderIndex)
+                                    newDominatorIndex = dominators[newDominatorIndex];
+                            }
+                        }
+                    }
+                    if (newDominatorIndex === rootPostOrderIndex)
+                        break;
+                }
+
+                // Changed. Affect children.
+                if (newDominatorIndex !== noEntry && dominators[postOrderIndex] !== newDominatorIndex) {
+                    dominators[postOrderIndex] = newDominatorIndex;
+                    changed = true;
+
+                    let outgoingEdgeIndex = this._nodeOrdinalToFirstOutgoingEdge[nodeOrdinal];
+                    let nodeIdentifier = this._nodes[(nodeOrdinal * nodeFieldCount) + nodeIdOffset];
+                    for (let edgeIndex = outgoingEdgeIndex; this._edges[edgeIndex + edgeFromIdOffset] === nodeIdentifier; edgeIndex += edgeFieldCount) {
+                        let toNodeIdentifier = this._edges[edgeIndex + edgeToIdOffset];
+                        let toNodeOrdinal = this._nodeIdentifierToOrdinal.get(toNodeIdentifier);
+                        let toNodePostOrder = nodeOrdinalToPostOrderIndex[toNodeOrdinal];
+                        affected[toNodePostOrder] = 1;
+                    }
+                }
+            }
+        }
+
+        for (let postOrderIndex = 0; postOrderIndex < this._nodeCount; ++postOrderIndex) {
+            let nodeOrdinal = postOrderIndexToNodeOrdinal[postOrderIndex];
+            let dominatorNodeOrdinal = postOrderIndexToNodeOrdinal[dominators[postOrderIndex]];
+            this._nodeOrdinalToDominatorNodeOrdinal[nodeOrdinal] = dominatorNodeOrdinal;
+        }
+    }
+
+    _buildRetainedSizes(postOrderIndexToNodeOrdinal)
+    {
+        // Self size.
+        for (let nodeIndex = 0, nodeOrdinal = 0; nodeOrdinal < this._nodeCount; nodeIndex += nodeFieldCount, nodeOrdinal++)
+            this._nodeOrdinalToRetainedSizes[nodeOrdinal] = this._nodes[nodeIndex + nodeSizeOffset];
+
+        // Attribute size to dominator.
+        for (let postOrderIndex = 0; postOrderIndex < this._nodeCount - 1; ++postOrderIndex) {
+            let nodeOrdinal = postOrderIndexToNodeOrdinal[postOrderIndex];
+            let nodeRetainedSize = this._nodeOrdinalToRetainedSizes[nodeOrdinal];
+            let dominatorNodeOrdinal = this._nodeOrdinalToDominatorNodeOrdinal[nodeOrdinal];
+            this._nodeOrdinalToRetainedSizes[dominatorNodeOrdinal] += nodeRetainedSize;
+        }
+    }
+
+    _markDeadNodes(collectedNodesList)
+    {
+        let affected = false;
+
+        for (let i = 0; i < collectedNodesList.length; ++i) {
+            let nodeIdentifier = collectedNodesList[i];
+            if (nodeIdentifier > this._lastNodeIdentifier)
+                continue;
+            let nodeOrdinal = this._nodeIdentifierToOrdinal.get(nodeIdentifier);
+            this._nodeOrdinalIsDead[nodeOrdinal] = 1;
+            affected = true;
+        }
+
+        return affected;
+    }
+
+    _isNodeGlobalObject(nodeIndex)
+    {
+        let className = this._nodeClassNamesTable[this._nodes[nodeIndex + nodeClassNameOffset]];
+        return className === "Window"
+            || className === "JSDOMWindowShell"
+            || className === "GlobalObject";
+    }
+
+    _gcRootPathes(nodeIdentifier)
+    {
+        let targetNodeOrdinal = this._nodeIdentifierToOrdinal.get(nodeIdentifier);
+
+        if (this._nodeOrdinalIsGCRoot[targetNodeOrdinal])
+            return [];
+
+        // FIXME: Array push/pop can affect performance here, but in practice it hasn't been an issue.
+
+        let paths = [];
+        let currentPath = [];
+        let visited = new Uint8Array(this._nodeCount);
+
+        function visitNode(nodeOrdinal)
+        {
+            if (this._nodeOrdinalIsGCRoot[nodeOrdinal]) {
+                let fullPath = currentPath.slice();
+                let nodeIndex = nodeOrdinal * nodeFieldCount;
+                fullPath.push({node: nodeIndex});
+                paths.push(fullPath);
+                return;
+            }
+
+            if (visited[nodeOrdinal])
+                return;
+            visited[nodeOrdinal] = 1;
+
+            let nodeIndex = nodeOrdinal * nodeFieldCount;
+            currentPath.push({node: nodeIndex});
+
+            // Loop in reverse order because edges were added in reverse order.
+            // It doesn't particularly matter other then consistency with previous code.
+            let incomingEdgeIndexStart = this._nodeOrdinalToFirstIncomingEdge[nodeOrdinal];
+            let incomingEdgeIndexEnd = this._nodeOrdinalToFirstIncomingEdge[nodeOrdinal + 1];
+            for (let incomingEdgeIndex = incomingEdgeIndexEnd - 1; incomingEdgeIndex >= incomingEdgeIndexStart; --incomingEdgeIndex) {
+                let fromNodeOrdinal = this._incomingNodes[incomingEdgeIndex];
+                let fromNodeIndex = fromNodeOrdinal * nodeFieldCount;
+                let fromNodeIsInternal = this._nodes[fromNodeIndex + nodeInternalOffset];
+                if (fromNodeIsInternal)
+                    continue;
+
+                let edgeIndex = this._incomingEdges[incomingEdgeIndex];
+                currentPath.push({edge: edgeIndex});
+                visitNode.call(this, fromNodeOrdinal);
+                currentPath.pop();
+            }
+
+            currentPath.pop();
+        }
+
+        visitNode.call(this, targetNodeOrdinal);
+
+        return paths;
+    }
+};
+
+HeapSnapshotDiff = class HeapSnapshotDiff
+{
+    constructor(objectId, snapshot1, snapshot2)
+    {
+        this._objectId = objectId;
+
+        this._snapshot1 = snapshot1;
+        this._snapshot2 = snapshot2;
+
+        this._totalSize = 0;
+        this._addedNodeIdentifiers = new Set;
+
+        let known = new Map;
+        for (let nodeIndex = 0; nodeIndex < this._snapshot1._nodes.length; nodeIndex += nodeFieldCount) {
+            let nodeIdentifier = this._snapshot1._nodes[nodeIndex + nodeIdOffset];
+            known.set(nodeIdentifier, nodeIndex);
+        }
+
+        for (let nodeIndex = 0; nodeIndex < this._snapshot2._nodes.length; nodeIndex += nodeFieldCount) {
+            let nodeIdentifier = this._snapshot2._nodes[nodeIndex + nodeIdOffset];
+            let existed = known.delete(nodeIdentifier);
+            if (!existed) {
+                this._addedNodeIdentifiers.add(nodeIdentifier);
+                this._totalSize += this._snapshot2._nodes[nodeIndex + nodeSizeOffset];
+            }
+        }
+
+        let {liveSize, categories} = HeapSnapshot.updateCategoriesAndMetadata(this._snapshot2, (nodeIdentifier) => this._addedNodeIdentifiers.has(nodeIdentifier));
+        this._categories = categories;
+    }
+
+    // Worker Methods
+
+    allocationBucketCounts(bucketSizes)
+    {
+        return HeapSnapshot.allocationBucketCounts(this._snapshot2, bucketSizes, (nodeIdentifier) => this._addedNodeIdentifiers.has(nodeIdentifier));
+    }
+
+    instancesWithClassName(className)
+    {
+        return HeapSnapshot.instancesWithClassName(this._snapshot2, className, (nodeIdentifier) => this._addedNodeIdentifiers.has(nodeIdentifier));
+    }
+
+    update()
+    {
+        return HeapSnapshot.updateCategoriesAndMetadata(this._snapshot2, (nodeIdentifier) => this._addedNodeIdentifiers.has(nodeIdentifier));
+    }
+
+    nodeWithIdentifier(nodeIdentifier) { return this._snapshot2.nodeWithIdentifier(nodeIdentifier); }
+    shortestGCRootPath(nodeIdentifier) { return this._snapshot2.shortestGCRootPath(nodeIdentifier); }
+    dominatedNodes(nodeIdentifier) { return this._snapshot2.dominatedNodes(nodeIdentifier); }
+    retainedNodes(nodeIdentifier) { return this._snapshot2.retainedNodes(nodeIdentifier); }
+    retainers(nodeIdentifier) { return this._snapshot2.retainers(nodeIdentifier); }
+
+    // Public
+
+    serialize()
+    {
+        return {
+            snapshot1: this._snapshot1.serialize(),
+            snapshot2: this._snapshot2.serialize(),
+            totalSize: this._totalSize,
+            totalObjectCount: this._addedNodeIdentifiers.size,
+            categories: this._categories,
+        };
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Workers/HeapSnapshot/HeapSnapshotWorker.js b/Source/WebInspectorUI/UserInterface/Workers/HeapSnapshot/HeapSnapshotWorker.js
new file mode 100644
index 000000000..13f684983
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Workers/HeapSnapshot/HeapSnapshotWorker.js
@@ -0,0 +1,120 @@
+/*
+ * 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.
+ */
+
+importScripts(...[
+    "HeapSnapshot.js"
+]);
+
+HeapSnapshotWorker = class HeapSnapshotWorker
+{
+    constructor()
+    {
+        this._nextObjectId = 1;
+        this._objects = new Map;
+        this._snapshots = [];
+
+        self.addEventListener("message", this._handleMessage.bind(this));
+    }
+
+    // Actions
+
+    clearSnapshots()
+    {
+        this._objects.clear();
+
+        this._snapshots = [];
+    }
+
+    createSnapshot(snapshotString, title)
+    {
+        let objectId = this._nextObjectId++;
+        let snapshot = new HeapSnapshot(objectId, snapshotString, title);
+        this._snapshots.push(snapshot);
+        this._objects.set(objectId, snapshot);
+
+        if (this._snapshots.length > 1) {
+            setTimeout(() => {
+                let collectionData = snapshot.updateDeadNodesAndGatherCollectionData(this._snapshots);
+                if (!collectionData || !collectionData.affectedSnapshots.length)
+                    return;
+                this.sendEvent("HeapSnapshot.CollectionEvent", collectionData);
+            }, 0);
+        }
+
+        return {objectId, snapshot: snapshot.serialize()};
+    }
+
+    createSnapshotDiff(objectId1, objectId2)
+    {
+        let snapshot1 = this._objects.get(objectId1);
+        let snapshot2 = this._objects.get(objectId2);
+
+        console.assert(snapshot1 instanceof HeapSnapshot);
+        console.assert(snapshot2 instanceof HeapSnapshot);
+
+        let objectId = this._nextObjectId++;
+        let snapshotDiff = new HeapSnapshotDiff(objectId, snapshot1, snapshot2);
+        this._objects.set(objectId, snapshotDiff);
+        return {objectId, snapshotDiff: snapshotDiff.serialize()};
+    }
+
+    // Public
+
+    sendEvent(eventName, eventData)
+    {
+        self.postMessage({eventName, eventData});
+    }
+
+    // Private
+
+    _handleMessage(event)
+    {
+        let data = event.data;
+
+        // Action.
+        if (data.actionName) {
+            let result = this[data.actionName](...data.actionArguments);
+            self.postMessage({callId: data.callId, result});
+            return;
+        }
+
+        // Method.
+        if (data.methodName) {
+            console.assert(data.objectId, "Must have an objectId to call the method on");
+            let object = this._objects.get(data.objectId);
+            if (!object)
+                self.postMessage({callId: data.callId, error: "No such object."});
+            else {
+                let result = object[data.methodName](...data.methodArguments);
+                self.postMessage({callId: data.callId, result});
+            }
+            return;
+        }
+
+        console.error("Unexpected HeapSnapshotWorker message", data);
+    }
+};
+
+self.heapSnapshotWorker = new HeapSnapshotWorker;
diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json b/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json
new file mode 100644
index 000000000..d90885fa3
--- /dev/null
+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-10.0.json
@@ -0,0 +1,3650 @@
+{"domains":[
+{
+    "domain": "ApplicationCache",
+    "availability": "web",
+    "types": [
+        {
+            "id": "ApplicationCacheResource",
+            "type": "object",
+            "description": "Detailed application cache resource information.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource url." },
+                { "name": "size", "type": "integer", "description": "Resource size." },
+                { "name": "type", "type": "string", "description": "Resource type." }
+            ]
+        },
+        {
+            "id": "ApplicationCache",
+            "type": "object",
+            "description": "Detailed application cache information.",
+            "properties": [
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "size", "type": "number", "description": "Application cache size." },
+                { "name": "creationTime", "type": "number", "description": "Application cache creation time." },
+                { "name": "updateTime", "type": "number", "description": "Application cache update time." },
+                { "name": "resources", "type": "array", "items": { "$ref": "ApplicationCacheResource" }, "description": "Application cache resources." }
+            ]
+        },
+        {
+            "id": "FrameWithManifest",
+            "type": "object",
+            "description": "Frame identifier - manifest URL pair.",
+            "properties": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame identifier." },
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "status", "type": "integer", "description": "Application cache status." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "getFramesWithManifests",
+            "returns": [
+                { "name": "frameIds", "type": "array", "items": { "$ref": "FrameWithManifest" }, "description": "Array of frame identifiers with manifest urls for each frame containing a document associated with some application cache." }
+            ],
+            "description": "Returns array of frame identifiers with manifest urls for each frame containing a document associated with some application cache."
+        },
+        {
+            "name": "enable",
+            "description": "Enables application cache domain notifications."
+        },
+        {
+            "name": "getManifestForFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose manifest is retrieved." }
+            ],
+            "returns": [
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL for document in the given frame." }
+            ],
+            "description": "Returns manifest URL for document in the given frame."
+        },
+        {
+            "name": "getApplicationCacheForFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache is retrieved." }
+            ],
+            "returns": [
+                { "name": "applicationCache", "$ref": "ApplicationCache", "description": "Relevant application cache data for the document in given frame." }
+            ],
+            "description": "Returns relevant application cache data for the document in given frame."
+        }
+    ],
+    "events": [
+        {
+            "name": "applicationCacheStatusUpdated",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache updated status." },
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "status", "type": "integer", "description": "Updated application cache status." }
+            ]
+        },
+        {
+            "name": "networkStateUpdated",
+            "parameters": [
+                { "name": "isNowOnline", "type": "boolean" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "CSS",
+    "description": "This domain exposes CSS read/write operations. All CSS objects, like stylesheets, rules, and styles, have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). Alternatively, a client can discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "StyleSheetId",
+            "type": "string"
+        },
+        {
+            "id": "CSSStyleId",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                { "name": "ordinal", "type": "integer", "description": "The style ordinal within the stylesheet." }
+            ],
+            "description": "This object identifies a CSS style in a unique way."
+        },
+        {
+            "id": "StyleSheetOrigin",
+            "type": "string",
+            "enum": ["user", "user-agent", "inspector", "regular"],
+            "description": "Stylesheet type: \"user\" for user stylesheets, \"user-agent\" for user-agent stylesheets, \"inspector\" for stylesheets created by the inspector (i.e. those holding the \"via inspector\" rules), \"regular\" for regular stylesheets."
+        },
+        {
+            "id": "CSSRuleId",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                { "name": "ordinal", "type": "integer", "description": "The rule ordinal within the stylesheet." }
+            ],
+            "description": "This object identifies a CSS rule in a unique way."
+        },
+        {
+            "id": "PseudoIdMatches",
+            "type": "object",
+            "properties": [
+                { "name": "pseudoId", "type": "integer", "description": "Pseudo style identifier (see <code>enum PseudoId</code> in <code>RenderStyleConstants.h</code>)."},
+                { "name": "matches", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules applicable to the pseudo style."}
+            ],
+            "description": "CSS rule collection for a single pseudo style."
+        },
+        {
+            "id": "InheritedStyleEntry",
+            "type": "object",
+            "properties": [
+                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "The ancestor node's inline style, if any, in the style inheritance chain." },
+                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules matching the ancestor node in the style inheritance chain." }
+            ],
+            "description": "CSS rule collection for a single pseudo style."
+        },
+        {
+            "id": "RuleMatch",
+            "type": "object",
+            "properties": [
+                { "name": "rule", "$ref": "CSSRule", "description": "CSS rule in the match." },
+                { "name": "matchingSelectors", "type": "array", "items": { "type": "integer" }, "description": "Matching selector indices in the rule's selectorList selectors (0-based)." }
+            ],
+            "description": "Match data for a CSS rule."
+        },
+        {
+            "id": "CSSSelector",
+            "type": "object",
+            "properties": [
+                { "name": "text", "type": "string", "description": "Canonicalized selector text." },
+                { "name": "specificity", "optional": true, "type": "array", "items": { "type": "integer" }, "description": "Specificity (a, b, c) tuple. Included if the selector is sent in response to CSS.getMatchedStylesForNode which provides a context element." },
+                { "name": "dynamic", "optional": true, "type": "boolean", "description": "Whether or not the specificity can be dynamic. Included if the selector is sent in response to CSS.getMatchedStylesForNode which provides a context element." }
+            ],
+            "description": "CSS selector."
+        },
+        {
+            "id": "SelectorList",
+            "type": "object",
+            "properties": [
+                { "name": "selectors", "type": "array", "items": { "$ref": "CSSSelector" }, "description": "Selectors in the list." },
+                { "name": "text", "type": "string", "description": "Rule selector text." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Rule selector range in the underlying resource (if available)." }
+            ],
+            "description": "Selector list data."
+        },
+        {
+            "id": "CSSStyleAttribute",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "DOM attribute name (e.g. \"width\")."},
+                { "name": "style", "$ref": "CSSStyle", "description": "CSS style generated by the respective DOM attribute."}
+            ],
+            "description": "CSS style information for a DOM style attribute."
+        },
+        {
+            "id": "CSSStyleSheetHeader",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Owner frame identifier."},
+                { "name": "sourceURL", "type": "string", "description": "Stylesheet resource URL."},
+                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Stylesheet origin."},
+                { "name": "title", "type": "string", "description": "Stylesheet title."},
+                { "name": "disabled", "type": "boolean", "description": "Denotes whether the stylesheet is disabled."},
+                { "name": "isInline", "type": "boolean", "description": "Whether this stylesheet is a <style> tag created by the parser. This is not set for document.written <style> tags." },
+                { "name": "startLine", "type": "number", "description": "Line offset of the stylesheet within the resource (zero based)." },
+                { "name": "startColumn", "type": "number", "description": "Column offset of the stylesheet within the resource (zero based)." }
+            ],
+            "description": "CSS stylesheet metainformation."
+        },
+        {
+            "id": "CSSStyleSheetBody",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                { "name": "rules", "type": "array", "items": { "$ref": "CSSRule" }, "description": "Stylesheet resource URL."},
+                { "name": "text", "type": "string", "optional": true, "description": "Stylesheet resource contents (if available)."}
+            ],
+            "description": "CSS stylesheet contents."
+        },
+        {
+            "id": "CSSRule",
+            "type": "object",
+            "properties": [
+                { "name": "ruleId", "$ref": "CSSRuleId", "optional": true, "description": "The CSS rule identifier (absent for user agent stylesheet and user-specified stylesheet rules)."},
+                { "name": "selectorList", "$ref": "SelectorList", "description": "Rule selector data." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "Parent stylesheet resource URL (for regular rules)."},
+                { "name": "sourceLine", "type": "integer", "description": "Line ordinal of the rule selector start character in the resource."},
+                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."},
+                { "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." },
+                { "name": "media", "type": "array", "items": { "$ref": "CSSMedia" }, "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards." }
+            ],
+            "description": "CSS rule representation."
+        },
+        {
+            "id": "SourceRange",
+            "type": "object",
+            "properties": [
+                { "name": "startLine", "type": "integer", "description": "Start line of range." },
+                { "name": "startColumn", "type": "integer", "description": "Start column of range (inclusive)." },
+                { "name": "endLine", "type": "integer", "description": "End line of range" },
+                { "name": "endColumn", "type": "integer", "description": "End column of range (exclusive)." }
+            ],
+            "description": "Text range within a resource."
+        },
+        {
+            "id": "ShorthandEntry",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Shorthand name." },
+                { "name": "value", "type": "string", "description": "Shorthand value." }
+            ]
+        },
+        {
+            "id": "CSSPropertyInfo",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "longhands", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Longhand property names." },
+                { "name": "values", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Supported values for this property." }
+            ]
+        },
+        {
+            "id": "CSSComputedStyleProperty",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Computed style property name." },
+                { "name": "value", "type": "string", "description": "Computed style property value." }
+            ]
+        },
+        {
+            "id": "CSSStyle",
+            "type": "object",
+            "properties": [
+                { "name": "styleId", "$ref": "CSSStyleId", "optional": true, "description": "The CSS style identifier (absent for attribute styles)." },
+                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSProperty" }, "description": "CSS properties in the style." },
+                { "name": "shorthandEntries", "type": "array", "items": { "$ref": "ShorthandEntry" }, "description": "Computed values for all shorthands found in the style." },
+                { "name": "cssText", "type": "string", "optional": true, "description": "Style declaration text (if available)." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Style declaration range in the enclosing stylesheet (if available)." },
+                { "name": "width", "type": "string", "optional": true, "description": "The effective \"width\" property value from this style." },
+                { "name": "height", "type": "string", "optional": true, "description": "The effective \"height\" property value from this style." }
+            ],
+            "description": "CSS style representation."
+        },
+        {
+            "id": "CSSPropertyStatus",
+	    "type": "string",
+            "enum": ["active", "inactive", "disabled", "style"],
+            "description": "The property status: \"active\" if the property is effective in the style, \"inactive\" if the property is overridden by a same-named property in this style later on, \"disabled\" if the property is disabled by the user, \"style\" (implied if absent) if the property is reported by the browser rather than by the CSS source parser."
+        },
+        {
+            "id": "CSSProperty",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "The property name." },
+                { "name": "value", "type": "string", "description": "The property value." },
+                { "name": "priority", "type": "string", "optional": true, "description": "The property priority (implies \"\" if absent)." },
+                { "name": "implicit", "type": "boolean", "optional": true, "description": "Whether the property is implicit (implies <code>false</code> if absent)." },
+                { "name": "text", "type": "string", "optional": true, "description": "The full property text as specified in the style." },
+                { "name": "parsedOk", "type": "boolean", "optional": true, "description": "Whether the property is understood by the browser (implies <code>true</code> if absent)." },
+                { "name": "status", "$ref": "CSSPropertyStatus", "optional": true, "description": "Whether the property is active or disabled." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "The entire property range in the enclosing style declaration (if available)." }
+            ],
+            "description": "CSS style effective visual dimensions and source offsets."
+        },
+        {
+            "id": "CSSMedia",
+            "type": "object",
+            "properties": [
+                { "name": "text", "type": "string", "description": "Media query text." },
+                { "name": "source", "type": "string", "enum": ["mediaRule", "importRule", "linkedSheet", "inlineSheet"], "description": "Source of the media query: \"mediaRule\" if specified by a @media rule, \"importRule\" if specified by an @import rule, \"linkedSheet\" if specified by a \"media\" attribute in a linked stylesheet's LINK tag, \"inlineSheet\" if specified by a \"media\" attribute in an inline stylesheet's STYLE tag." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the media query description." },
+                { "name": "sourceLine", "type": "integer", "optional": true, "description": "Line in the document containing the media query (not defined for the \"stylesheet\" source)." }
+            ],
+            "description": "CSS media query descriptor."
+        },
+        {
+            "id": "Region",
+            "type": "object",
+            "properties": [
+                { "name": "regionOverset", "type": "string", "enum": ["overset", "fit", "empty"], "description": "The \"overset\" attribute of a Named Flow." },
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The corresponding DOM node id." }
+            ],
+            "description": "This object represents a region that flows from a Named Flow."
+        },
+        {
+            "id": "NamedFlow",
+            "type": "object",
+            "properties": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "name", "type": "string", "description": "Named Flow identifier." },
+                { "name": "overset", "type": "boolean", "description": "The \"overset\" attribute of a Named Flow." },
+                { "name": "content", "type": "array", "items": { "$ref": "DOM.NodeId" }, "description": "An array of nodes that flow into the Named Flow." },
+                { "name": "regions", "type": "array", "items": { "$ref": "Region" }, "description": "An array of regions associated with the Named Flow." }
+            ],
+            "description": "This object represents a Named Flow."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables the CSS agent for the given page. Clients should not assume that the CSS agent has been enabled until the result of this command is received."
+        },
+        {
+            "name": "disable",
+            "description": "Disables the CSS agent for the given page."
+        },
+        {
+            "name": "getMatchedStylesForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" },
+                { "name": "includePseudo", "type": "boolean", "optional": true, "description": "Whether to include pseudo styles (default: true)." },
+                { "name": "includeInherited", "type": "boolean", "optional": true, "description": "Whether to include inherited styles (default: true)." }
+            ],
+            "returns": [
+                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "optional": true, "description": "CSS rules matching this node, from all applicable stylesheets." },
+                { "name": "pseudoElements", "type": "array", "items": { "$ref": "PseudoIdMatches" }, "optional": true, "description": "Pseudo style matches for this node." },
+                { "name": "inherited", "type": "array", "items": { "$ref": "InheritedStyleEntry" }, "optional": true, "description": "A chain of inherited styles (from the immediate node parent up to the DOM tree root)." }
+            ],
+            "description": "Returns requested styles for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getInlineStylesForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" }
+            ],
+            "returns": [
+                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "Inline style for the specified DOM node." },
+                { "name": "attributesStyle", "$ref": "CSSStyle", "optional": true, "description": "Attribute-defined element style (e.g. resulting from \"width=20 height=100%\")."}
+            ],
+            "description": "Returns the styles defined inline (explicitly in the \"style\" attribute and implicitly, using DOM attributes) for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getComputedStyleForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" }
+            ],
+            "returns": [
+                { "name": "computedStyle", "type": "array", "items": { "$ref": "CSSComputedStyleProperty" }, "description": "Computed style for the specified DOM node." }
+            ],
+            "description": "Returns the computed style for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getAllStyleSheets",
+            "returns": [
+                { "name": "headers", "type": "array", "items": { "$ref": "CSSStyleSheetHeader" }, "description": "Descriptor entries for all available stylesheets." }
+            ],
+            "description": "Returns metainfo entries for all known stylesheets."
+        },
+        {
+            "name": "getStyleSheet",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "returns": [
+                { "name": "styleSheet", "$ref": "CSSStyleSheetBody", "description": "Stylesheet contents for the specified <code>styleSheetId</code>." }
+            ],
+            "description": "Returns stylesheet data for the specified <code>styleSheetId</code>."
+        },
+        {
+            "name": "getStyleSheetText",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "returns": [
+                { "name": "text", "type": "string", "description": "The stylesheet text." }
+            ],
+            "description": "Returns the current textual content and the URL for a stylesheet."
+        },
+        {
+            "name": "setStyleSheetText",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" },
+                { "name": "text", "type": "string" }
+            ],
+            "description": "Sets the new stylesheet text, thereby invalidating all existing <code>CSSStyleId</code>'s and <code>CSSRuleId</code>'s contained by this stylesheet."
+        },
+        {
+            "name": "setStyleText",
+            "parameters": [
+                { "name": "styleId", "$ref": "CSSStyleId" },
+                { "name": "text", "type": "string" }
+            ],
+            "returns": [
+                { "name": "style", "$ref": "CSSStyle", "description": "The resulting style after the text modification." }
+            ],
+            "description": "Sets the new <code>text</code> for the respective style."
+        },
+        {
+            "name": "setRuleSelector",
+            "parameters": [
+                { "name": "ruleId", "$ref": "CSSRuleId" },
+                { "name": "selector", "type": "string" }
+            ],
+            "returns": [
+                { "name": "rule", "$ref": "CSSRule", "description": "The resulting rule after the selector modification." }
+            ],
+            "description": "Modifies the rule selector."
+        },
+        {
+            "name": "createStyleSheet",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame where the new \"inspector\" stylesheet should be created." }
+            ],
+            "returns": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the created \"inspector\" stylesheet." }
+            ],
+            "description": "Creates a new special \"inspector\" stylesheet in the frame with given <code>frameId</code>."
+        },
+        {
+            "name": "addRule",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" },
+                { "name": "selector", "type": "string" }
+            ],
+            "returns": [
+                { "name": "rule", "$ref": "CSSRule", "description": "The newly created rule." }
+            ],
+            "description": "Creates a new empty rule with the given <code>selector</code> in a stylesheet with given <code>styleSheetId</code>."
+        },
+        {
+            "name": "getSupportedCSSProperties",
+            "returns": [
+                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSPropertyInfo" }, "description": "Supported property metainfo." }
+            ],
+            "description": "Returns all supported CSS property names."
+        },
+        {
+            "name": "getSupportedSystemFontFamilyNames",
+            "returns": [
+                { "name": "fontFamilyNames", "type": "array", "items": { "type": "string" }, "description": "Supported system font families." }
+            ],
+            "description": "Returns all supported system font family names."
+        },
+        {
+            "name": "forcePseudoState",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The element id for which to force the pseudo state." },
+                { "name": "forcedPseudoClasses", "type": "array", "items": { "type": "string", "enum": ["active", "focus", "hover", "visited"] }, "description": "Element pseudo classes to force when computing the element's style." }
+            ],
+            "description": "Ensures that the given node will have specified pseudo-classes whenever its style is computed by the browser."
+        },
+        {
+            "name": "getNamedFlowCollection",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id for which to get the Named Flow Collection." }
+            ],
+            "returns": [
+                { "name": "namedFlows", "type": "array", "items": { "$ref": "NamedFlow" }, "description": "An array containing the Named Flows in the document." }
+            ],
+            "description": "Returns the Named Flows from the document."
+        }
+    ],
+    "events": [
+        {
+            "name": "mediaQueryResultChanged",
+            "description": "Fires whenever a MediaQuery result changes (for example, after a browser window has been resized.) The current implementation considers only viewport-dependent media features."
+        },
+        {
+            "name": "styleSheetChanged",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "description": "Fired whenever a stylesheet is changed as a result of the client operation."
+        },
+        {
+            "name": "styleSheetAdded",
+            "parameters": [
+                { "name": "header", "$ref": "CSSStyleSheetHeader", "description": "Added stylesheet metainfo." }
+            ],
+            "description": "Fired whenever an active document stylesheet is added."
+        },
+        {
+            "name": "styleSheetRemoved",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the removed stylesheet." }
+            ],
+            "description": "Fired whenever an active document stylesheet is removed."
+        },
+        {
+            "name": "namedFlowCreated",
+            "parameters": [
+                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The new Named Flow." }
+            ],
+            "description": "Fires when a Named Flow is created."
+        },
+        {
+            "name": "namedFlowRemoved",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Identifier of the removed Named Flow." }
+            ],
+            "description": "Fires when a Named Flow is removed: has no associated content nodes and regions."
+        },
+        {
+            "name": "regionOversetChanged",
+            "parameters": [
+                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The Named Flow containing the regions whose regionOverset values changed." }
+            ],
+            "description": "Fires if any of the regionOverset values changed in a Named Flow's region chain."
+        },
+        {
+            "name": "registeredNamedFlowContentElement",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was registered." },
+                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the registered content node." },
+                { "name": "nextContentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the element following the registered content node." }
+            ],
+            "description": "Fires when a Named Flow's has been registered with a new content node."
+        },
+        {
+            "name": "unregisteredNamedFlowContentElement",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was unregistered." },
+                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the unregistered content node." }
+            ],
+            "description": "Fires when a Named Flow's has been registered with a new content node."
+        }
+    ]
+}
+,
+{
+    "domain": "Console",
+    "description": "Console domain defines methods and events for interaction with the JavaScript console. Console collects messages created by means of the <a href='http://getfirebug.com/wiki/index.php/Console_API'>JavaScript Console API</a>. One needs to enable this domain using <code>enable</code> command in order to start receiving the console messages. Browser collects messages issued while console domain is not enabled as well and reports them using <code>messageAdded</code> notification upon enabling.",
+    "types": [
+        {
+            "id": "ConsoleMessage",
+            "type": "object",
+            "description": "Console message.",
+            "properties": [
+                { "name": "source", "type": "string", "enum": ["xml", "javascript", "network", "console-api", "storage", "appcache", "rendering", "css", "security", "content-blocker", "other"], "description": "Message source." },
+                { "name": "level", "type": "string", "enum": ["log", "info", "warning", "error", "debug"], "description": "Message severity." },
+                { "name": "text", "type": "string", "description": "Message text." },
+                { "name": "type", "type": "string", "optional": true, "enum": ["log", "dir", "dirxml", "table", "trace", "clear", "startGroup", "startGroupCollapsed", "endGroup", "assert", "timing", "profile", "profileEnd"], "description": "Console message type." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL of the message origin." },
+                { "name": "line", "type": "integer", "optional": true, "description": "Line number in the resource that generated this message." },
+                { "name": "column", "type": "integer", "optional": true, "description": "Column number on the line in the resource that generated this message." },
+                { "name": "repeatCount", "type": "integer", "optional": true, "description": "Repeat count for repeated messages." },
+                { "name": "parameters", "type": "array", "items": { "$ref": "Runtime.RemoteObject" }, "optional": true, "description": "Message parameters in case of the formatted message." },
+                { "name": "stackTrace", "$ref": "StackTrace", "optional": true, "description": "JavaScript stack trace for assertions and error messages." },
+                { "name": "networkRequestId", "$ref": "Network.RequestId", "optional": true, "description": "Identifier of the network request associated with this message." }
+            ]
+        },
+        {
+            "id": "CallFrame",
+            "type": "object",
+            "description": "Stack entry for console errors and assertions.",
+            "properties": [
+                { "name": "functionName", "type": "string", "description": "JavaScript function name." },
+                { "name": "url", "type": "string", "description": "JavaScript script name or url." },
+                { "name": "scriptId", "$ref": "Debugger.ScriptId", "description": "Script identifier." },
+                { "name": "lineNumber", "type": "integer", "description": "JavaScript script line number." },
+                { "name": "columnNumber", "type": "integer", "description": "JavaScript script column number." }
+            ]
+        },
+        {
+            "id": "StackTrace",
+            "type": "array",
+            "items": { "$ref": "CallFrame" },
+            "description": "Call frames for assertions or error messages."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables console domain, sends the messages collected so far to the client by means of the <code>messageAdded</code> notification."
+        },
+        {
+            "name": "disable",
+            "description": "Disables console domain, prevents further console messages from being reported to the client."
+        },
+        {
+            "name": "clearMessages",
+            "description": "Clears console messages collected in the browser."
+        },
+        {
+            "name": "setMonitoringXHREnabled",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "Monitoring enabled state." }
+            ],
+            "description": "Toggles monitoring of XMLHttpRequest. If <code>true</code>, console will receive messages upon each XHR issued."
+        },
+        {
+            "name": "addInspectedNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "DOM node id to be accessible by means of $0 command line API." }
+            ],
+            "description": "Enables console to refer to the node with given id via $0 (see Command Line API for more details)."
+        }
+    ],
+    "events": [
+        {
+            "name": "messageAdded",
+            "parameters": [
+                { "name": "message", "$ref": "ConsoleMessage", "description": "Console message that has been added." }
+            ],
+            "description": "Issued when new console message is added."
+        },
+        {
+            "name": "messageRepeatCountUpdated",
+            "parameters": [
+                { "name": "count", "type": "integer", "description": "New repeat count value." }
+            ],
+            "description": "Issued when subsequent message(s) are equal to the previous one(s)."
+        },
+        {
+            "name": "messagesCleared",
+            "description": "Issued when console is cleared. This happens either upon <code>clearMessages</code> command or after page navigation."
+        },
+        {
+            "name": "heapSnapshot",
+            "description": "Issued from console.takeHeapSnapshot.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "snapshotData", "$ref": "Heap.HeapSnapshotData", "description": "Snapshot at the end of tracking." },
+                { "name": "title", "type": "string", "optional": true, "description": "Optional title provided to console.takeHeapSnapshot." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "DOM",
+    "description": "This domain exposes DOM read/write operations. Each DOM Node is represented with its mirror object that has an <code>id</code>. This <code>id</code> can be used to get additional information on the Node, resolve it into the JavaScript object wrapper, etc. It is important that client receives DOM events only for the nodes that are known to the client. Backend keeps track of the nodes that were sent to the client and never sends the same node twice. It is client's responsibility to collect information about the nodes that were sent to the client.<p>Note that <code>iframe</code> owner elements will return corresponding document elements as their child nodes.</p>",
+    "availability": "web",
+    "types": [
+        {
+            "id": "NodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier."
+        },
+        {
+            "id": "BackendNodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier used to reference a node that may not have been pushed to the front-end."
+        },
+        {
+            "id": "PseudoType",
+            "type": "string",
+            "enum": ["before", "after"],
+            "description": "Pseudo element type."
+        },
+        {
+            "id": "ShadowRootType",
+            "type": "string",
+            "enum": ["user-agent", "open", "closed"],
+            "description": "Shadow root type."
+        },
+        {
+            "id": "LiveRegionRelevant",
+            "type": "string",
+            "enum": ["additions", "removals", "text"],
+            "description": "Token values of @aria-relevant attribute."
+        },
+        {
+            "id": "Node",
+            "type": "object",
+            "properties": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Node identifier that is passed into the rest of the DOM messages as the <code>nodeId</code>. Backend will only push node with given <code>id</code> once. It is aware of all requested nodes and will only fire DOM events for nodes known to the client." },
+                { "name": "nodeType", "type": "integer", "description": "<code>Node</code>'s nodeType." },
+                { "name": "nodeName", "type": "string", "description": "<code>Node</code>'s nodeName." },
+                { "name": "localName", "type": "string", "description": "<code>Node</code>'s localName." },
+                { "name": "nodeValue", "type": "string", "description": "<code>Node</code>'s nodeValue." },
+                { "name": "childNodeCount", "type": "integer", "optional": true, "description": "Child count for <code>Container</code> nodes." },
+                { "name": "children", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Child nodes of this node when requested with children." },
+                { "name": "attributes", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Attributes of the <code>Element</code> node in the form of flat array <code>[name1, value1, name2, value2]</code>." },
+                { "name": "documentURL", "type": "string", "optional": true, "description": "Document URL that <code>Document</code> or <code>FrameOwner</code> node points to." },
+                { "name": "baseURL", "type": "string", "optional": true, "description": "Base URL that <code>Document</code> or <code>FrameOwner</code> node uses for URL completion." },
+                { "name": "publicId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s publicId." },
+                { "name": "systemId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s systemId." },
+                { "name": "internalSubset", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s internalSubset." },
+                { "name": "xmlVersion", "type": "string", "optional": true, "description": "<code>Document</code>'s XML version in case of XML documents." },
+                { "name": "name", "type": "string", "optional": true, "description": "<code>Attr</code>'s name." },
+                { "name": "value", "type": "string", "optional": true, "description": "<code>Attr</code>'s value." },
+                { "name": "pseudoType", "$ref": "PseudoType", "optional": true, "description": "Pseudo element type for this node." },
+                { "name": "shadowRootType", "$ref": "ShadowRootType", "optional": true, "description": "Shadow root type." },
+                { "name": "frameId", "$ref": "Network.FrameId", "optional": true, "description": "Frame ID for frame owner elements." },
+                { "name": "contentDocument", "$ref": "Node", "optional": true, "description": "Content document for frame owner elements." },
+                { "name": "shadowRoots", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Shadow root list for given element host." },
+                { "name": "templateContent", "$ref": "Node", "optional": true, "description": "Content document fragment for template elements" },
+                { "name": "pseudoElements", "type": "array", "items": { "$ref": "Node" }, "optional": true, "description": "Pseudo elements associated with this node." },
+                { "name": "role", "type": "string", "optional": true, "description": "Computed value for first recognized role token, default role per element, or overridden role." },
+                { "name": "contentSecurityPolicyHash", "type": "string", "optional": true, "description": "Computed SHA-256 Content Security Policy hash source for given element." }
+            ],
+            "description": "DOM interaction is implemented in terms of mirror objects that represent the actual DOM nodes. DOMNode is a base node mirror type."
+        },
+        {
+            "id": "EventListener",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "description": "<code>EventListener</code>'s type." },
+                { "name": "useCapture", "type": "boolean", "description": "<code>EventListener</code>'s useCapture." },
+                { "name": "isAttribute", "type": "boolean", "description": "<code>EventListener</code>'s isAttribute." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                { "name": "handlerBody", "type": "string", "description": "Event handler function body." },
+                { "name": "location", "$ref": "Debugger.Location", "optional": true, "description": "Handler code location." },
+                { "name": "sourceName", "type": "string", "optional": true, "description": "Source script URL." },
+                { "name": "handler", "$ref": "Runtime.RemoteObject", "optional": true, "description": "Event handler function value." }
+            ],
+            "description": "A structure holding event listener properties."
+        },
+        {
+            "id": "AccessibilityProperties",
+            "description": "A structure holding accessibility properties.",
+            "type": "object",
+            "properties": [
+                { "name": "activeDescendantNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of the accessibility object referenced by aria-activedescendant." },
+                { "name": "busy", "type": "boolean", "optional": true, "description": "Value of @aria-busy on current or ancestor node." },
+                { "name": "checked", "type": "string", "optional": true, "enum": ["true", "false", "mixed"], "description": "Checked state of certain form controls." },
+                { "name": "childNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of the accessibility tree children if available." },
+                { "name": "controlledNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-controls." },
+                { "name": "current", "type": "string", "optional": true, "enum": ["true", "false", "page", "step", "location", "date", "time"], "description": "Current item within a container or set of related elements." },
+                { "name": "disabled", "type": "boolean", "optional": true, "description": "Disabled state of form controls." },
+                { "name": "exists", "type": "boolean", "description": "Indicates whether there is an existing AX object for the DOM node. If this is false, all the other properties will be default values." },
+                { "name": "expanded", "type": "boolean", "optional": true, "description": "Expanded state." },
+                { "name": "flowedNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-flowto." },
+                { "name": "focused", "type": "boolean", "optional": true, "description": "Focused state. Only defined on focusable elements." },
+                { "name": "ignored", "type": "boolean", "optional": true, "description": "Indicates whether the accessibility of the associated AX object node is ignored, whether heuristically or explicitly." },
+                { "name": "ignoredByDefault", "type": "boolean", "optional": true, "description": "State indicating whether the accessibility of the associated AX object node is ignored by default for node type." },
+                { "name": "invalid", "type": "string", "optional": true, "enum": ["true", "false", "grammar", "spelling"], "description": "Invalid status of form controls." },
+                { "name": "hidden", "type": "boolean", "optional": true, "description": "Hidden state. True if node or an ancestor is hidden via CSS or explicit @aria-hidden, to clarify why the element is ignored." },
+                { "name": "label", "type": "string", "description": "Computed label value for the node, sometimes calculated by referencing other nodes." },
+                { "name": "liveRegionAtomic", "type": "boolean", "optional": true, "description": "Value of @aria-atomic." },
+                { "name": "liveRegionRelevant", "type": "array", "items": { "type": "string" }, "optional": true, "description": "Token value(s) of element's @aria-relevant attribute. Array of string values matching $ref LiveRegionRelevant. FIXME: Enum values blocked by http://webkit.org/b/133711" },
+                { "name": "liveRegionStatus", "type": "string", "optional": true, "enum": ["assertive", "polite", "off"], "description": "Value of element's @aria-live attribute." },
+                { "name": "mouseEventNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of node or closest ancestor node that has a mousedown, mouseup, or click event handler." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                { "name": "ownedNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-owns." },
+                { "name": "parentNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of the accessibility tree parent object if available." },
+                { "name": "pressed", "type": "boolean", "optional": true, "description": "Pressed state for toggle buttons." },
+                { "name": "readonly", "type": "boolean", "optional": true, "description": "Readonly state of text controls." },
+                { "name": "required", "type": "boolean", "optional": true, "description": "Required state of form controls." },
+                { "name": "role", "type": "string", "description": "Computed value for first recognized role token, default role per element, or overridden role." },
+                { "name": "selected", "type": "boolean", "optional": true, "description": "Selected state of certain form controls." },
+                { "name": "selectedChildNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any children marked as selected." }
+            ]
+        },
+        {
+            "id": "RGBAColor",
+            "type": "object",
+            "properties": [
+                { "name": "r", "type": "integer", "description": "The red component, in the [0-255] range." },
+                { "name": "g", "type": "integer", "description": "The green component, in the [0-255] range." },
+                { "name": "b", "type": "integer", "description": "The blue component, in the [0-255] range." },
+                { "name": "a", "type": "number", "optional": true, "description": "The alpha component, in the [0-1] range (default: 1)." }
+            ],
+            "description": "A structure holding an RGBA color."
+        },
+        {
+            "id": "Quad",
+            "type": "array",
+            "items": { "type": "number" },
+            "minItems": 8,
+            "maxItems": 8,
+            "description": "An array of quad vertices, x immediately followed by y for each point, points clock-wise."
+        },
+        {
+            "id": "HighlightConfig",
+            "type": "object",
+            "properties": [
+                { "name": "showInfo", "type": "boolean", "optional": true, "description": "Whether the node info tooltip should be shown (default: false)." },
+                { "name": "contentColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                { "name": "paddingColor", "$ref": "RGBAColor", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
+                { "name": "borderColor", "$ref": "RGBAColor", "optional": true, "description": "The border highlight fill color (default: transparent)." },
+                { "name": "marginColor", "$ref": "RGBAColor", "optional": true, "description": "The margin highlight fill color (default: transparent)." }
+            ],
+            "description": "Configuration data for the highlighting of page elements."
+        }
+    ],
+    "commands": [
+        {
+            "name": "getDocument",
+            "returns": [
+                { "name": "root", "$ref": "Node", "description": "Resulting node." }
+            ],
+            "description": "Returns the root DOM node to the caller."
+        },
+        {
+            "name": "requestChildNodes",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get children for." },
+                { "name": "depth", "type": "integer", "optional": true, "description": "The maximum depth at which children should be retrieved, defaults to 1. Use -1 for the entire subtree or provide an integer larger than 0." }
+            ],
+            "description": "Requests that children of the node with given id are returned to the caller in form of <code>setChildNodes</code> events where not only immediate children are retrieved, but all children down to the specified depth."
+        },
+        {
+            "name": "querySelector",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                { "name": "selector", "type": "string", "description": "Selector string." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Query selector result." }
+            ],
+            "description": "Executes <code>querySelector</code> on a given node."
+        },
+        {
+            "name": "querySelectorAll",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                { "name": "selector", "type": "string", "description": "Selector string." }
+            ],
+            "returns": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Query selector result." }
+            ],
+            "description": "Executes <code>querySelectorAll</code> on a given node."
+        },
+        {
+            "name": "setNodeName",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set name for." },
+                { "name": "name", "type": "string", "description": "New node's name." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "New node's id." }
+            ],
+            "description": "Sets node name for a node with given id."
+        },
+        {
+            "name": "setNodeValue",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set value for." },
+                { "name": "value", "type": "string", "description": "New node's value." }
+            ],
+            "description": "Sets node value for a node with given id."
+        },
+        {
+            "name": "removeNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to remove." }
+            ],
+            "description": "Removes node with given id."
+        },
+        {
+            "name": "setAttributeValue",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attribute for." },
+                { "name": "name", "type": "string", "description": "Attribute name." },
+                { "name": "value", "type": "string", "description": "Attribute value." }
+            ],
+            "description": "Sets attribute for an element with given id."
+        },
+        {
+            "name": "setAttributesAsText",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attributes for." },
+                { "name": "text", "type": "string", "description": "Text with a number of attributes. Will parse this text using HTML parser." },
+                { "name": "name", "type": "string", "optional": true, "description": "Attribute name to replace with new attributes derived from text in case text parsed successfully." }
+            ],
+            "description": "Sets attributes on element with given id. This method is useful when user edits some existing attribute value and types in several attribute name/value pairs."
+        },
+        {
+            "name": "removeAttribute",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to remove attribute from." },
+                { "name": "name", "type": "string", "description": "Name of the attribute to remove." }
+            ],
+            "description": "Removes attribute with given name from an element with given id."
+        },
+        {
+            "name": "getEventListenersForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get listeners for." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name for handler value. Handler value is not returned without this parameter specified." }
+            ],
+            "returns": [
+                { "name": "listeners", "type": "array", "items": { "$ref": "EventListener"}, "description": "Array of relevant listeners." }
+            ],
+            "description": "Returns event listeners relevant to the node."
+        },
+        {
+            "name": "getAccessibilityPropertiesForNode",
+            "description": "Returns a dictionary of accessibility properties for the node.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for which to get accessibility properties." }
+            ],
+            "returns": [
+                { "name": "properties", "$ref": "AccessibilityProperties", "description": "Dictionary of relevant accessibility properties." }
+            ]
+        },
+        {
+            "name": "getOuterHTML",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get markup for." }
+            ],
+            "returns": [
+                { "name": "outerHTML", "type": "string", "description": "Outer HTML markup." }
+            ],
+            "description": "Returns node's HTML markup."
+        },
+        {
+            "name": "setOuterHTML",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set markup for." },
+                { "name": "outerHTML", "type": "string", "description": "Outer HTML markup to set." }
+            ],
+            "description": "Sets node HTML markup, returns new node id."
+        },
+        {
+            "name": "performSearch",
+            "parameters": [
+                { "name": "query", "type": "string", "description": "Plain text or query selector or XPath search query." },
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Ids of nodes to use as starting points for the search." }
+            ],
+            "returns": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                { "name": "resultCount", "type": "integer", "description": "Number of search results." }
+            ],
+            "description": "Searches for a given string in the DOM tree. Use <code>getSearchResults</code> to access search results or <code>cancelSearch</code> to end this search session."
+        },
+        {
+            "name": "getSearchResults",
+            "parameters": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                { "name": "fromIndex", "type": "integer", "description": "Start index of the search result to be returned." },
+                { "name": "toIndex", "type": "integer", "description": "End index of the search result to be returned." }
+            ],
+            "returns": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the search result nodes." }
+            ],
+            "description": "Returns search results from given <code>fromIndex</code> to given <code>toIndex</code> from the sarch with the given identifier."
+        },
+        {
+            "name": "discardSearchResults",
+            "parameters": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." }
+            ],
+            "description": "Discards search results from the session with the given id. <code>getSearchResults</code> should no longer be called for that search."
+        },
+        {
+            "name": "requestNode",
+            "parameters": [
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "description": "JavaScript object id to convert into node." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Node id for given object." }
+            ],
+            "description": "Requests that the node is sent to the caller given the JavaScript node object reference. All nodes that form the path from the node to the root are also sent to the client as a series of <code>setChildNodes</code> notifications."
+        },
+        {
+            "name": "setInspectModeEnabled",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "True to enable inspection mode, false to disable it." },
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "optional": true, "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>." }
+            ],
+            "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspect' command upon element selection."
+        },
+        {
+            "name": "highlightRect",
+            "parameters": [
+                { "name": "x", "type": "integer", "description": "X coordinate" },
+                { "name": "y", "type": "integer", "description": "Y coordinate" },
+                { "name": "width", "type": "integer", "description": "Rectangle width" },
+                { "name": "height", "type": "integer", "description": "Rectangle height" },
+                { "name": "color", "$ref": "RGBAColor", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                { "name": "outlineColor", "$ref": "RGBAColor", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+            ],
+            "description": "Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport."
+        },
+        {
+            "name": "highlightQuad",
+            "parameters": [
+                { "name": "quad", "$ref": "Quad", "description": "Quad to highlight" },
+                { "name": "color", "$ref": "RGBAColor", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                { "name": "outlineColor", "$ref": "RGBAColor", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+            ],
+            "description": "Highlights given quad. Coordinates are absolute with respect to the main frame viewport."
+        },
+        {
+            "name": "highlightSelector",
+            "parameters": [
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
+                { "name": "selectorString", "type": "string", "description": "A CSS selector for finding matching nodes to highlight." },
+                { "name": "frameId", "type": "string", "optional": true, "description": "Identifier of the frame which will be searched using the selector.  If not provided, the main frame will be used." }
+            ],
+            "description": "Highlights all DOM nodes that match a given selector. A string containing a CSS selector must be specified."
+        },
+        {
+            "name": "highlightNode",
+            "parameters": [
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
+                { "name": "nodeId", "$ref": "NodeId", "optional": true, "description": "Identifier of the node to highlight." },
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "optional": true, "description": "JavaScript object id of the node to be highlighted." }
+            ],
+            "description": "Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified."
+        },
+        {
+            "name": "hideHighlight",
+            "description": "Hides DOM node highlight."
+        },
+        {
+            "name": "highlightFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame to highlight." },
+                { "name": "contentColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                { "name": "contentOutlineColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight outline color (default: transparent)." }
+            ],
+            "description": "Highlights owner element of the frame with given id."
+        },
+        {
+            "name": "pushNodeByPathToFrontend",
+            "parameters": [
+                { "name": "path", "type": "string", "description": "Path to node in the proprietary format." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for given path." }
+            ],
+            "description": "Requests that the node is sent to the caller given its path. // FIXME, use XPath"
+        },
+        {
+            "name": "pushNodeByBackendIdToFrontend",
+            "parameters": [
+                { "name": "backendNodeId", "$ref": "BackendNodeId", "description": "The backend node id of the node." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "The pushed node's id." }
+            ],
+            "description": "Requests that the node is sent to the caller given its backend node id."
+        },
+        {
+            "name": "releaseBackendNodeIds",
+            "parameters": [
+                { "name": "nodeGroup", "type": "string", "description": "The backend node ids group name." }
+            ],
+            "description": "Requests that group of <code>BackendNodeIds</code> is released."
+        },
+        {
+            "name": "resolveNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to resolve." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." }
+            ],
+            "returns": [
+                { "name": "object", "$ref": "Runtime.RemoteObject", "description": "JavaScript object wrapper for given node." }
+            ],
+            "description": "Resolves JavaScript node object for given node id."
+        },
+        {
+            "name": "getAttributes",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to retrieve attibutes for." }
+            ],
+            "returns": [
+                { "name": "attributes", "type": "array", "items": { "type": "string" }, "description": "An interleaved array of node attribute names and values." }
+            ],
+            "description": "Returns attributes for the specified node."
+        },
+        {
+            "name": "moveTo",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to drop." },
+                { "name": "targetNodeId", "$ref": "NodeId", "description": "Id of the element to drop into." },
+                { "name": "insertBeforeNodeId", "$ref": "NodeId", "optional": true, "description": "Drop node before given one." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "New id of the moved node." }
+            ],
+            "description": "Moves node into the new container, places it before the given anchor."
+        },
+        {
+            "name": "undo",
+            "description": "Undoes the last performed action."
+        },
+        {
+            "name": "redo",
+            "description": "Re-does the last undone action."
+        },
+        {
+            "name": "markUndoableState",
+            "description": "Marks last undoable state."
+        },
+        {
+            "name": "focus",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to focus." }
+            ],
+            "description": "Focuses the given element."
+        }
+    ],
+    "events": [
+        {
+            "name": "documentUpdated",
+            "description": "Fired when <code>Document</code> has been totally updated. Node ids are no longer valid."
+        },
+        {
+            "name": "setChildNodes",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Parent node id to populate with children." },
+                { "name": "nodes", "type": "array", "items": { "$ref": "Node"}, "description": "Child nodes array." }
+            ],
+            "description": "Fired when backend wants to provide client with the missing DOM structure. This happens upon most of the calls requesting node ids."
+        },
+        {
+            "name": "attributeModified",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "name", "type": "string", "description": "Attribute name." },
+                { "name": "value", "type": "string", "description": "Attribute value." }
+            ],
+            "description": "Fired when <code>Element</code>'s attribute is modified."
+        },
+        {
+            "name": "attributeRemoved",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "name", "type": "string", "description": "A ttribute name." }
+            ],
+            "description": "Fired when <code>Element</code>'s attribute is removed."
+        },
+        {
+            "name": "inlineStyleInvalidated",
+            "parameters": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the nodes for which the inline styles have been invalidated." }
+            ],
+            "description": "Fired when <code>Element</code>'s inline style is modified via a CSS property modification."
+        },
+        {
+            "name": "characterDataModified",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "characterData", "type": "string", "description": "New text value." }
+            ],
+            "description": "Mirrors <code>DOMCharacterDataModified</code> event."
+        },
+        {
+            "name": "childNodeCountUpdated",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "childNodeCount", "type": "integer", "description": "New node count." }
+            ],
+            "description": "Fired when <code>Container</code>'s child node count has changed."
+        },
+        {
+            "name": "childNodeInserted",
+            "parameters": [
+                { "name": "parentNodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "previousNodeId", "$ref": "NodeId", "description": "If of the previous siblint." },
+                { "name": "node", "$ref": "Node", "description": "Inserted node data." }
+            ],
+            "description": "Mirrors <code>DOMNodeInserted</code> event."
+        },
+        {
+            "name": "childNodeRemoved",
+            "parameters": [
+                { "name": "parentNodeId", "$ref": "NodeId", "description": "Parent id." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has been removed." }
+            ],
+            "description": "Mirrors <code>DOMNodeRemoved</code> event."
+        },
+        {
+            "name": "shadowRootPushed",
+            "parameters": [
+                { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                { "name": "root", "$ref": "Node", "description": "Shadow root." }
+            ],
+            "description": "Called when shadow root is pushed into the element."
+        },
+        {
+            "name": "shadowRootPopped",
+            "parameters": [
+                { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                { "name": "rootId", "$ref": "NodeId", "description": "Shadow root id." }
+            ],
+            "description": "Called when shadow root is popped from the element."
+        },
+        {
+            "name": "pseudoElementAdded",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Pseudo element's parent element id." },
+                { "name": "pseudoElement", "$ref": "Node", "description": "The added pseudo element." }
+            ],
+            "description": "Called when a pseudo element is added to an element."
+        },
+        {
+            "name": "pseudoElementRemoved",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Pseudo element's parent element id." },
+                { "name": "pseudoElementId", "$ref": "NodeId", "description": "The removed pseudo element id." }
+            ],
+            "description": "Called when a pseudo element is removed from an element."
+        }
+    ]
+}
+,
+{
+    "domain": "DOMDebugger",
+    "description": "DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DOMBreakpointType",
+            "type": "string",
+            "enum": ["subtree-modified", "attribute-modified", "node-removed"],
+            "description": "DOM breakpoint type."
+        }
+    ],
+    "commands": [
+        {
+            "name": "setDOMBreakpoint",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to set breakpoint on." },
+                { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the operation to stop upon." }
+            ],
+            "description": "Sets breakpoint on particular operation with DOM."
+        },
+        {
+            "name": "removeDOMBreakpoint",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to remove breakpoint from." },
+                { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the breakpoint to remove." }
+            ],
+            "description": "Removes DOM breakpoint that was set using <code>setDOMBreakpoint</code>."
+        },
+        {
+            "name": "setEventListenerBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "DOM Event name to stop on (any DOM event will do)." }
+            ],
+            "description": "Sets breakpoint on particular DOM event."
+        },
+        {
+            "name": "removeEventListenerBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Event name." }
+            ],
+            "description": "Removes breakpoint on particular DOM event."
+        },
+        {
+            "name": "setInstrumentationBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+            ],
+            "description": "Sets breakpoint on particular native event."
+        },
+        {
+            "name": "removeInstrumentationBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+            ],
+            "description": "Sets breakpoint on particular native event."
+        },
+        {
+            "name": "setXHRBreakpoint",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "Resource URL substring. All XHRs having this substring in the URL will get stopped upon." }
+            ],
+            "description": "Sets breakpoint on XMLHttpRequest."
+        },
+        {
+            "name": "removeXHRBreakpoint",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "Resource URL substring." }
+            ],
+            "description": "Removes breakpoint from XMLHttpRequest."
+        }
+    ]
+}
+,
+{
+    "domain": "DOMStorage",
+    "description": "Query and modify DOM storage.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "StorageId",
+            "type": "object",
+            "description": "DOM Storage identifier.",
+            "properties": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin for the storage." },
+                { "name": "isLocalStorage", "type": "boolean", "description": "Whether the storage is local storage (not session storage)." }
+            ]
+        },
+        {
+            "id": "Item",
+            "type": "array",
+            "description": "DOM Storage item.",
+            "items": { "type": "string" }
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables storage tracking, storage events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables storage tracking, prevents storage events from being sent to the client."
+        },
+        {
+            "name": "getDOMStorageItems",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" }
+            ],
+            "returns": [
+                { "name": "entries", "type": "array", "items": { "$ref": "Item" } }
+            ]
+        },
+        {
+            "name": "setDOMStorageItem",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "value", "type": "string" }
+            ]
+        },
+        {
+            "name": "removeDOMStorageItem",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "domStorageItemsCleared",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" }
+            ]
+        },
+        {
+            "name": "domStorageItemRemoved",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" }
+            ]
+        },
+        {
+            "name": "domStorageItemAdded",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "newValue", "type": "string" }
+            ]
+        },
+        {
+            "name": "domStorageItemUpdated",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "oldValue", "type": "string" },
+                { "name": "newValue", "type": "string" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Database",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DatabaseId",
+            "type": "string",
+            "description": "Unique identifier of Database object."
+        },
+        {
+            "id": "Database",
+            "type": "object",
+            "description": "Database object.",
+            "properties": [
+                { "name": "id", "$ref": "DatabaseId", "description": "Database ID." },
+                { "name": "domain", "type": "string", "description": "Database domain." },
+                { "name": "name", "type": "string", "description": "Database name." },
+                { "name": "version", "type": "string", "description": "Database version." }
+            ]
+        },
+        {
+            "id": "Error",
+            "type": "object",
+            "description": "Database error.",
+            "properties": [
+                { "name": "message", "type": "string", "description": "Error message." },
+                { "name": "code", "type": "integer", "description": "Error code." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables database tracking, database events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables database tracking, prevents database events from being sent to the client."
+        },
+        {
+            "name": "getDatabaseTableNames",
+            "parameters": [
+                { "name": "databaseId", "$ref": "DatabaseId" }
+            ],
+            "returns": [
+                { "name": "tableNames", "type": "array", "items": { "type": "string" } }
+            ]
+        },
+        {
+            "name": "executeSQL",
+            "async": true,
+            "parameters": [
+                { "name": "databaseId", "$ref": "DatabaseId" },
+                { "name": "query", "type": "string" }
+            ],
+            "returns": [
+                { "name": "columnNames", "type": "array", "optional": true, "items": { "type": "string" } },
+                { "name": "values", "type": "array", "optional": true, "items": { "type": "any" }},
+                { "name": "sqlError", "$ref": "Error", "optional": true }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "addDatabase",
+            "parameters": [
+                { "name": "database", "$ref": "Database" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Debugger",
+    "description": "Debugger domain exposes JavaScript debugging capabilities. It allows setting and removing breakpoints, stepping through execution, exploring stack traces, etc.",
+    "types": [
+        {
+            "id": "BreakpointId",
+            "type": "string",
+            "description": "Breakpoint identifier."
+        },
+        {
+            "id": "BreakpointActionIdentifier",
+            "type": "integer",
+            "description": "Breakpoint action identifier."
+        },
+        {
+            "id": "ScriptId",
+            "type": "string",
+            "description": "Unique script identifier."
+        },
+        {
+            "id": "CallFrameId",
+            "type": "string",
+            "description": "Call frame identifier."
+        },
+        {
+            "id": "Location",
+            "type": "object",
+            "properties": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Script identifier as reported in the <code>Debugger.scriptParsed</code>." },
+                { "name": "lineNumber", "type": "integer", "description": "Line number in the script." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Column number in the script." }
+            ],
+            "description": "Location in the source code."
+        },
+        {
+            "id": "BreakpointAction",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["log", "evaluate", "sound", "probe"], "description": "Different kinds of breakpoint actions." },
+                { "name": "data", "type": "string", "optional": true, "description": "Data associated with this breakpoint type (e.g. for type \"eval\" this is the JavaScript string to evalulate)." },
+                { "name": "id", "$ref": "BreakpointActionIdentifier", "optional": true, "description": "A frontend-assigned identifier for this breakpoint action." }
+            ],
+            "description": "Action to perform when a breakpoint is triggered."
+        },
+        {
+            "id": "BreakpointOptions",
+            "type": "object",
+            "properties": [
+                { "name": "condition", "type": "string", "optional": true, "description": "Expression to use as a breakpoint condition. When specified, debugger will only stop on the breakpoint if this expression evaluates to true." },
+                { "name": "actions", "type": "array", "optional": true, "items": { "$ref": "BreakpointAction" }, "description": "Actions to perform automatically when the breakpoint is triggered." },
+                { "name": "autoContinue", "type": "boolean", "optional": true, "description": "Automatically continue after hitting this breakpoint and running actions." },
+                { "name": "ignoreCount", "type": "integer", "optional": true, "description": "Number of times to ignore this breakpoint, before stopping on the breakpoint and running actions." }
+            ],
+            "description": "Extra options that modify breakpoint behavior."
+        },
+        {
+            "id": "FunctionDetails",
+            "type": "object",
+            "properties": [
+                { "name": "location", "$ref": "Location", "description": "Location of the function." },
+                { "name": "name", "type": "string", "optional": true, "description": "Name of the function. Not present for anonymous functions." },
+                { "name": "displayName", "type": "string", "optional": true, "description": "Display name of the function(specified in 'displayName' property on the function object)." },
+                { "name": "scopeChain", "type": "array", "optional": true, "items": { "$ref": "Scope" }, "description": "Scope chain for this closure." }
+            ],
+            "description": "Information about the function."
+        },
+        {
+            "id": "CallFrame",
+            "type": "object",
+            "properties": [
+                { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier. This identifier is only valid while the virtual machine is paused." },
+                { "name": "functionName", "type": "string", "description": "Name of the JavaScript function called on this call frame." },
+                { "name": "location", "$ref": "Location", "description": "Location in the source code." },
+                { "name": "scopeChain", "type": "array", "items": { "$ref": "Scope" }, "description": "Scope chain for this call frame." },
+                { "name": "this", "$ref": "Runtime.RemoteObject", "description": "<code>this</code> object for this call frame." },
+                { "name": "isTailDeleted", "type": "boolean", "description": "Is the current frame tail deleted from a tail call." }
+            ],
+            "description": "JavaScript call frame. Array of call frames form the call stack."
+        },
+        {
+            "id": "Scope",
+            "type": "object",
+            "properties": [
+                { "name": "object", "$ref": "Runtime.RemoteObject", "description": "Object representing the scope. For <code>global</code> and <code>with</code> scopes it represents the actual object; for the rest of the scopes, it is artificial transient object enumerating scope variables as its properties." },
+                { "name": "type", "type": "string", "enum": ["global", "with", "closure", "catch", "functionName", "globalLexicalEnvironment", "nestedLexical"], "description": "Scope type." },
+                { "name": "name", "type": "string", "optional": true, "description": "Name associated with the scope." },
+                { "name": "location", "$ref": "Location", "optional": true, "description": "Location if available of the scope definition." }
+            ],
+            "description": "Scope description."
+        },
+        {
+            "id": "ProbeSample",
+            "description": "A sample collected by evaluating a probe breakpoint action.",
+            "type": "object",
+            "properties": [
+                { "name": "probeId", "$ref": "BreakpointActionIdentifier", "description": "Identifier of the probe breakpoint action that created the sample." },
+                { "name": "sampleId", "type": "integer", "description": "Unique identifier for this sample." },
+                { "name": "batchId", "type": "integer", "description": "A batch identifier which is the same for all samples taken at the same breakpoint hit." },
+                { "name": "timestamp", "type": "number", "description": "Timestamp of when the sample was taken." },
+                { "name": "payload", "$ref": "Runtime.RemoteObject", "description": "Contents of the sample." }
+            ]
+        },
+        {
+            "id": "AssertPauseReason",
+            "description": "The pause reason auxiliary data when paused because of an assertion.",
+            "type": "object",
+            "properties": [
+                { "name": "message", "type": "string", "optional": true, "description": "The console.assert message string if provided." }
+            ]
+        },
+        {
+            "id": "BreakpointPauseReason",
+            "description": "The pause reason auxiliary data when paused because of hitting a breakpoint.",
+            "type": "object",
+            "properties": [
+                { "name": "breakpointId", "type": "string", "description": "The identifier of the breakpoint causing the pause." }
+            ]
+        },
+        {
+            "id": "CSPViolationPauseReason",
+            "description": "The pause reason auxiliary data when paused because of a Content Security Policy directive.",
+            "type": "object",
+            "properties": [
+                { "name": "directive", "type": "string", "description": "The CSP directive that blocked script execution." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables debugger for the given page. Clients should not assume that the debugging has been enabled until the result for this command is received."
+        },
+        {
+            "name": "disable",
+            "description": "Disables debugger for given page."
+        },
+        {
+            "name": "setBreakpointsActive",
+            "parameters": [
+                { "name": "active", "type": "boolean", "description": "New value for breakpoints active state." }
+            ],
+            "description": "Activates / deactivates all breakpoints on the page."
+        },
+        {
+            "name": "setBreakpointByUrl",
+            "parameters": [
+                { "name": "lineNumber", "type": "integer", "description": "Line number to set breakpoint at." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL of the resources to set breakpoint on." },
+                { "name": "urlRegex", "type": "string", "optional": true, "description": "Regex pattern for the URLs of the resources to set breakpoints on. Either <code>url</code> or <code>urlRegex</code> must be specified." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Offset in the line to set breakpoint at." },
+                { "name": "options", "$ref": "BreakpointOptions", "optional": true, "description": "Options to apply to this breakpoint to modify its behavior." }
+            ],
+            "returns": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                { "name": "locations", "type": "array", "items": { "$ref": "Location"}, "description": "List of the locations this breakpoint resolved into upon addition." }
+            ],
+            "description": "Sets JavaScript breakpoint at given location specified either by URL or URL regex. Once this command is issued, all existing parsed scripts will have breakpoints resolved and returned in <code>locations</code> property. Further matching script parsing will result in subsequent <code>breakpointResolved</code> events issued. This logical breakpoint will survive page reloads."
+        },
+        {
+            "name": "setBreakpoint",
+            "parameters": [
+                { "name": "location", "$ref": "Location", "description": "Location to set breakpoint in." },
+                { "name": "options", "$ref": "BreakpointOptions", "optional": true, "description": "Options to apply to this breakpoint to modify its behavior." }
+            ],
+            "returns": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                { "name": "actualLocation", "$ref": "Location", "description": "Location this breakpoint resolved into." }
+            ],
+            "description": "Sets JavaScript breakpoint at a given location."
+        },
+        {
+            "name": "removeBreakpoint",
+            "parameters": [
+                { "name": "breakpointId", "$ref": "BreakpointId" }
+            ],
+            "description": "Removes JavaScript breakpoint."
+        },
+        {
+            "name": "continueToLocation",
+            "parameters": [
+                { "name": "location", "$ref": "Location", "description": "Location to continue to." }
+            ],
+            "description": "Continues execution until specific location is reached."
+        },
+        {
+            "name": "stepOver",
+            "description": "Steps over the statement."
+        },
+        {
+            "name": "stepInto",
+            "description": "Steps into the function call."
+        },
+        {
+            "name": "stepOut",
+            "description": "Steps out of the function call."
+        },
+        {
+            "name": "pause",
+            "description": "Stops on the next JavaScript statement."
+        },
+        {
+            "name": "resume",
+            "description": "Resumes JavaScript execution."
+        },
+        {
+            "name": "searchInContent",
+            "description": "Searches for given string in script content.",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to search in." },
+                { "name": "query", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "GenericTypes.SearchMatch" }, "description": "List of search matches." }
+            ]
+        },
+        {
+            "name": "getScriptSource",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to get source for." }
+            ],
+            "returns": [
+                { "name": "scriptSource", "type": "string", "description": "Script source." }
+            ],
+            "description": "Returns source for the script with given id."
+        },
+        {
+            "name": "getFunctionDetails",
+            "parameters": [
+                { "name": "functionId", "$ref": "Runtime.RemoteObjectId", "description": "Id of the function to get location for." }
+            ],
+            "returns": [
+                { "name": "details", "$ref": "FunctionDetails", "description": "Information about the function." }
+            ],
+            "description": "Returns detailed information on given function."
+        },
+        {
+            "name": "setPauseOnExceptions",
+            "parameters": [
+                { "name": "state", "type": "string", "enum": ["none", "uncaught", "all"], "description": "Pause on exceptions mode." }
+            ],
+            "description": "Defines pause on exceptions state. Can be set to stop on all exceptions, uncaught exceptions or no exceptions. Initial pause on exceptions state is <code>none</code>."
+        },
+        {
+            "name": "evaluateOnCallFrame",
+            "parameters": [
+                { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier to evaluate on." },
+                { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "String object group name to put result into (allows rapid releasing resulting object handles using <code>releaseObjectGroup</code>)." },
+                { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Specifies whether command line API should be available to the evaluated expression, defaults to false." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." },
+                { "name": "saveResult", "type": "boolean", "optional": true, "description": "Whether the resulting value should be considered for saving in the $n history." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "Runtime.RemoteObject", "description": "Object wrapper for the evaluation result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Evaluates expression on a given call frame."
+        },
+        {
+            "name": "setOverlayMessage",
+            "parameters": [
+                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
+            ],
+            "description": "Sets overlay message."
+        }
+    ],
+    "events": [
+        {
+            "name": "globalObjectCleared",
+            "description": "Called when global has been cleared and debugger client should reset its state. Happens upon navigation or reload."
+        },
+        {
+            "name": "scriptParsed",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Identifier of the script parsed." },
+                { "name": "url", "type": "string", "description": "URL of the script parsed (if any)." },
+                { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource with given URL (for script tags)." },
+                { "name": "startColumn", "type": "integer", "description": "Column offset of the script within the resource with given URL." },
+                { "name": "endLine", "type": "integer", "description": "Last line of the script." },
+                { "name": "endColumn", "type": "integer", "description": "Length of the last line of the script." },
+                { "name": "isContentScript", "type": "boolean", "optional": true, "description": "Determines whether this script is a user extension script." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "sourceURL name of the script (if any)." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with script (if any)." }
+            ],
+            "description": "Fired when virtual machine parses script. This event is also fired for all known and uncollected scripts upon enabling debugger."
+        },
+        {
+            "name": "scriptFailedToParse",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "URL of the script that failed to parse." },
+                { "name": "scriptSource", "type": "string", "description": "Source text of the script that failed to parse." },
+                { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource." },
+                { "name": "errorLine", "type": "integer", "description": "Line with error." },
+                { "name": "errorMessage", "type": "string", "description": "Parse error message." }
+            ],
+            "description": "Fired when virtual machine fails to parse the script."
+        },
+        {
+            "name": "breakpointResolved",
+            "parameters": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Breakpoint unique identifier." },
+                { "name": "location", "$ref": "Location", "description": "Actual breakpoint location." }
+            ],
+            "description": "Fired when breakpoint is resolved to an actual script and location."
+        },
+        {
+            "name": "paused",
+            "parameters": [
+                { "name": "callFrames", "type": "array", "items": { "$ref": "CallFrame" }, "description": "Call stack the virtual machine stopped on." },
+                { "name": "reason", "type": "string", "enum": ["XHR", "DOM", "EventListener", "exception", "assert", "CSPViolation", "DebuggerStatement", "Breakpoint", "PauseOnNextStatement", "other"], "description": "Pause reason." },
+                { "name": "data", "type": "object", "optional": true, "description": "Object containing break-specific auxiliary properties." }
+            ],
+            "description": "Fired when the virtual machine stopped on breakpoint or exception or any other stop criteria."
+        },
+        {
+            "name": "resumed",
+            "description": "Fired when the virtual machine resumed execution."
+        },
+        {
+            "name": "didSampleProbe",
+            "description": "Fires when a new probe sample is collected.",
+            "parameters": [
+                { "name": "sample", "$ref": "ProbeSample", "description": "A collected probe sample." }
+            ]
+        },
+        {
+            "name": "playBreakpointActionSound",
+            "description": "Fired when a \"sound\" breakpoint action is triggered on a breakpoint.",
+            "parameters": [
+                { "name": "breakpointActionId", "$ref": "BreakpointActionIdentifier", "description": "Breakpoint action identifier." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "GenericTypes",
+    "description": "Exposes generic types to be used by any domain.",
+    "types": [
+        {
+            "id": "SearchMatch",
+            "type": "object",
+            "description": "Search match in a resource.",
+            "properties": [
+                { "name": "lineNumber", "type": "number", "description": "Line number in resource content." },
+                { "name": "lineContent", "type": "string", "description": "Line with match content." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Heap",
+    "description": "Heap domain exposes JavaScript heap attributes and capabilities.",
+    "types": [
+        {
+            "id": "GarbageCollection",
+            "description": "Information about a garbage collection.",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["full", "partial"], "description": "The type of garbage collection." },
+                { "name": "startTime", "type": "number" },
+                { "name": "endTime", "type": "number" }
+            ]
+        },
+        {
+            "id": "HeapSnapshotData",
+            "description": "JavaScriptCore HeapSnapshot JSON data.",
+            "type": "string"
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables Heap domain events."
+        },
+        {
+            "name": "disable",
+            "description": "Disables Heap domain events."
+        },
+        {
+            "name": "gc",
+            "description": "Trigger a full garbage collection."
+        },
+        {
+            "name": "snapshot",
+            "description": "Take a heap snapshot.",
+            "returns": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "snapshotData", "$ref": "HeapSnapshotData" }
+            ]
+        },
+        {
+            "name": "startTracking",
+            "description": "Start tracking heap changes. This will produce a `trackingStart` event."
+        },
+        {
+            "name": "stopTracking",
+            "description": "Stop tracking heap changes. This will produce a `trackingComplete` event."
+        },
+        {
+            "name": "getPreview",
+            "description": "Returns a preview (string, Debugger.FunctionDetails, or Runtime.ObjectPreview) for a Heap.HeapObjectId.",
+            "parameters": [
+                { "name": "heapObjectId", "type": "integer", "description": "Identifier of the heap object within the snapshot." }
+            ],
+            "returns": [
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "functionDetails", "$ref": "Debugger.FunctionDetails", "optional": true, "description": "Function details." },
+                { "name": "preview", "$ref": "Runtime.ObjectPreview", "optional": true, "description": "Object preview." }
+            ]
+        },
+        {
+            "name": "getRemoteObject",
+            "description": "Returns the strongly referenced Runtime.RemoteObject for a Heap.HeapObjectId.",
+            "parameters": [
+                { "name": "heapObjectId", "type": "integer", "description": "Identifier of the heap object within the snapshot." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "Runtime.RemoteObject", "description": "Resulting object." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "garbageCollected",
+            "description": "Information about the garbage collection.",
+            "parameters": [
+                { "name": "collection", "$ref": "GarbageCollection" }
+            ]
+        },
+        {
+            "name": "trackingStart",
+            "description": "Tracking started.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "snapshotData", "$ref": "HeapSnapshotData", "description": "Snapshot at the start of tracking." }
+            ]
+        },
+        {
+            "name": "trackingComplete",
+            "description": "Tracking stopped.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "snapshotData", "$ref": "HeapSnapshotData", "description": "Snapshot at the end of tracking." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "IndexedDB",
+    "featureGuard": "ENABLE(INDEXED_DATABASE)",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DatabaseWithObjectStores",
+            "type": "object",
+            "description": "Database with an array of object stores.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Database name." },
+                { "name": "version", "type": "number", "description": "Database version." },
+                { "name": "objectStores", "type": "array", "items": { "$ref": "ObjectStore" }, "description": "Object stores in this database." }
+            ]
+        },
+        {
+            "id": "ObjectStore",
+            "type": "object",
+            "description": "Object store.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Object store name." },
+                { "name": "keyPath", "$ref": "KeyPath", "description": "Object store key path." },
+                { "name": "autoIncrement", "type": "boolean", "description": "If true, object store has auto increment flag set." },
+                { "name": "indexes", "type": "array", "items": { "$ref": "ObjectStoreIndex" }, "description": "Indexes in this object store." }
+            ]
+        },
+        {
+            "id": "ObjectStoreIndex",
+            "type": "object",
+            "description": "Object store index.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Index name." },
+                { "name": "keyPath", "$ref": "KeyPath", "description": "Index key path." },
+                { "name": "unique", "type": "boolean", "description": "If true, index is unique." },
+                { "name": "multiEntry", "type": "boolean", "description": "If true, index allows multiple entries for a key." }
+            ]
+        },
+        {
+            "id": "Key",
+            "type": "object",
+            "description": "Key.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["number", "string", "date", "array"], "description": "Key type." },
+                { "name": "number", "type": "number", "optional": true, "description": "Number value." },
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "date", "type": "number", "optional": true, "description": "Date value." },
+                { "name": "array", "type": "array", "optional": true, "items": { "$ref": "Key" }, "description": "Array value." }
+            ]
+        },
+        {
+            "id": "KeyRange",
+            "type": "object",
+            "description": "Key range.",
+            "properties": [
+                { "name": "lower", "$ref": "Key", "optional": true, "description": "Lower bound." },
+                { "name": "upper", "$ref": "Key", "optional": true, "description": "Upper bound." },
+                { "name": "lowerOpen", "type": "boolean", "description": "If true lower bound is open." },
+                { "name": "upperOpen", "type": "boolean", "description": "If true upper bound is open." }
+            ]
+        },
+        {
+            "id": "DataEntry",
+            "type": "object",
+            "description": "Data entry.",
+            "properties": [
+                { "name": "key", "$ref": "Runtime.RemoteObject", "description": "Key." },
+                { "name": "primaryKey", "$ref": "Runtime.RemoteObject", "description": "Primary key." },
+                { "name": "value", "$ref": "Runtime.RemoteObject", "description": "Value." }
+            ]
+        },
+        {
+            "id": "KeyPath",
+            "type": "object",
+            "description": "Key path.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["null", "string", "array"], "description": "Key path type." },
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "array", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Array value." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables events from backend."
+        },
+        {
+            "name": "disable",
+            "description": "Disables events from backend."
+        },
+        {
+            "name": "requestDatabaseNames",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." }
+            ],
+            "returns": [
+                { "name": "databaseNames", "type": "array", "items": { "type": "string" }, "description": "Database names for origin." }
+            ],
+            "description": "Requests database names for given security origin."
+        },
+        {
+            "name": "requestDatabase",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." }
+            ],
+            "returns": [
+                { "name": "databaseWithObjectStores", "$ref": "DatabaseWithObjectStores", "description": "Database with an array of object stores." }
+            ],
+            "description": "Requests database with given name in given frame."
+        },
+        {
+            "name": "requestData",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." },
+                { "name": "objectStoreName", "type": "string", "description": "Object store name." },
+                { "name": "indexName", "type": "string", "description": "Index name, empty string for object store data requests." },
+                { "name": "skipCount", "type": "integer", "description": "Number of records to skip." },
+                { "name": "pageSize", "type": "integer", "description": "Number of records to fetch." },
+                { "name": "keyRange", "$ref": "KeyRange", "optional": true, "description": "Key range." }
+            ],
+            "returns": [
+                { "name": "objectStoreDataEntries", "type": "array", "items": { "$ref": "DataEntry" }, "description": "Array of object store data entries." },
+                { "name": "hasMore", "type": "boolean", "description": "If true, there are more entries to fetch in the given range." }
+            ],
+            "description": "Requests data from object store or index."
+        },
+        {
+            "name": "clearObjectStore",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." },
+                { "name": "objectStoreName", "type": "string", "description": "Object store name." }
+            ],
+            "returns": [
+            ],
+            "description": "Clears all entries from an object store."
+        }
+    ]
+}
+,
+{
+    "domain": "Inspector",
+    "types": [],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables inspector domain notifications."
+        },
+        {
+            "name": "disable",
+            "description": "Disables inspector domain notifications."
+        },
+        {
+            "name": "initialized",
+            "description": "Sent by the frontend after all initialization messages have been sent."
+        }
+    ],
+    "events": [
+        {
+            "name": "evaluateForTestInFrontend",
+            "parameters": [
+                { "name": "script", "type": "string" }
+            ]
+        },
+        {
+            "name": "inspect",
+            "parameters": [
+                { "name": "object", "$ref": "Runtime.RemoteObject" },
+                { "name": "hints", "type": "object" }
+            ]
+        },
+        {
+            "name": "detached",
+            "description": "Fired when remote debugging connection is about to be terminated. Contains detach reason.",
+            "parameters": [
+                { "name": "reason", "type": "string", "description": "The reason why connection has been terminated." }
+            ]
+        },
+        {
+            "name": "activateExtraDomains",
+            "description": "Fired when the backend has alternate domains that need to be activated.",
+            "parameters": [
+                { "name": "domains", "type": "array", "items": { "type": "string" }, "description": "Domain names that need activation" }
+            ]
+        },
+        {
+            "name": "targetCrashed",
+            "description": "Fired when debugging target has crashed"
+        }
+    ]
+}
+,
+{
+    "domain": "LayerTree",
+    "availability": "web",
+    "types": [
+        {
+            "id": "LayerId",
+            "type": "string",
+            "description": "Unique RenderLayer identifier."
+        },
+        {
+            "id": "PseudoElementId",
+            "type": "string",
+            "description": "Unique PseudoElement identifier."
+        },
+        {
+            "id": "IntRect",
+            "type": "object",
+            "description": "A rectangle.",
+            "properties": [
+                { "name": "x", "type": "integer", "description": "The x position." },
+                { "name": "y", "type": "integer", "description": "The y position." },
+                { "name": "width", "type": "integer", "description": "The width metric." },
+                { "name": "height", "type": "integer", "description": "The height metric." }
+            ]
+        },
+        {
+            "id": "Layer",
+            "type": "object",
+            "description": "Information about a compositing layer.",
+            "properties": [
+                { "name": "layerId", "$ref": "LayerId", "description": "The unique id for this layer." },
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The id for the node associated with this layer." },
+                { "name": "bounds", "$ref": "IntRect", "description": "Bounds of the layer in absolute page coordinates." },
+                { "name": "paintCount", "type": "integer", "description": "Indicates how many time this layer has painted." },
+                { "name": "memory", "type": "integer", "description": "Estimated memory used by this layer." },
+                { "name": "compositedBounds", "$ref": "IntRect", "description": "The bounds of the composited layer." },
+                { "name": "isInShadowTree", "type": "boolean", "optional": true, "description": "Indicates whether this layer is associated with an element hosted in a shadow tree." },
+                { "name": "isReflection", "type": "boolean", "optional": true, "description": "Indicates whether this layer was used to provide a reflection for the element." },
+                { "name": "isGeneratedContent", "type": "boolean", "optional": true, "description": "Indicates whether the layer is attached to a pseudo element that is CSS generated content." },
+                { "name": "isAnonymous", "type": "boolean", "optional": true, "description": "Indicates whether the layer was created for a CSS anonymous block or box." },
+                { "name": "pseudoElementId", "$ref": "PseudoElementId", "optional": true, "description": "The id for the pseudo element associated with this layer." },
+                { "name": "pseudoElement", "type": "string", "optional": true, "description": "The name of the CSS pseudo-element that prompted the layer to be generated." }
+            ]
+        },
+        {
+            "id": "CompositingReasons",
+            "type": "object",
+            "description": "An object containing the reasons why the layer was composited as properties.",
+            "properties": [
+                { "name": "transform3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a CSS 3D transform." },
+                { "name": "video", "type": "boolean", "optional": true, "description": "Composition due to association with a <video> element." },
+                { "name": "canvas", "type": "boolean", "optional": true, "description": "Composition due to the element being a <canvas> element." },
+                { "name": "plugin", "type": "boolean", "optional": true, "description": "Composition due to association with a plugin." },
+                { "name": "iFrame", "type": "boolean", "optional": true, "description": "Composition due to association with an <iframe> element." },
+                { "name": "backfaceVisibilityHidden", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"backface-visibility: hidden\" style." },
+                { "name": "clipsCompositingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element clipping compositing descendants." },
+                { "name": "animation", "type": "boolean", "optional": true, "description": "Composition due to association with an animated element." },
+                { "name": "filters", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied." },
+                { "name": "positionFixed", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: fixed\" style." },
+                { "name": "positionSticky", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: sticky\" style." },
+                { "name": "overflowScrollingTouch", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"overflow-scrolling: touch\" style." },
+                { "name": "stacking", "type": "boolean", "optional": true, "description": "Composition due to association with an element establishing a stacking context." },
+                { "name": "overlap", "type": "boolean", "optional": true, "description": "Composition due to association with an element overlapping other composited elements." },
+                { "name": "negativeZIndexChildren", "type": "boolean", "optional": true, "description": "Composition due to association with an element with descendants that have a negative z-index." },
+                { "name": "transformWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with composited descendants." },
+                { "name": "opacityWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with opacity applied and composited descendants." },
+                { "name": "maskWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with a masked element and composited descendants." },
+                { "name": "reflectionWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a reflection and composited descendants." },
+                { "name": "filterWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied and composited descendants." },
+                { "name": "blendingWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS blending applied and composited descendants." },
+                { "name": "isolatesCompositedBlendingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element isolating compositing descendants having CSS blending applied." },
+                { "name": "perspective", "type": "boolean", "optional": true, "description": "Composition due to association with an element with perspective applied." },
+                { "name": "preserve3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"transform-style: preserve-3d\" style." },
+                { "name": "willChange", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"will-change\" style." },
+                { "name": "root", "type": "boolean", "optional": true, "description": "Composition due to association with the root element." },
+                { "name": "blending", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"blend-mode\" style." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables compositing tree inspection."
+        },
+        {
+            "name": "disable",
+            "description": "Disables compositing tree inspection."
+        },
+        {
+            "name": "layersForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Root of the subtree for which we want to gather layers." }                ],
+            "description": "Returns the layer tree structure of the current page.",
+            "returns": [
+                { "name": "layers", "type": "array", "items": { "$ref": "Layer" }, "description": "Child layers." }
+            ]
+        },
+        {
+            "name": "reasonsForCompositingLayer",
+            "parameters": [
+                { "name": "layerId", "$ref": "LayerId", "description": "The id of the layer for which we want to get the reasons it was composited." }
+            ],
+            "description": "Provides the reasons why the given layer was composited.",
+            "returns": [
+                { "name": "compositingReasons", "$ref": "CompositingReasons", "description": "An object containing the reasons why the layer was composited as properties." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "layerTreeDidChange"
+        }
+    ]
+}
+,
+{
+    "domain": "Memory",
+    "description": "Memory domain exposes page memory tracking.",
+    "featureGuard": "ENABLE(RESOURCE_USAGE)",
+    "availability": "web",
+    "types": [
+        {
+            "id": "Event",
+            "type": "object",
+            "properties": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "categories", "type": "array", "items": { "$ref": "CategoryData" }, "description": "Breakdown of memory in categories." }
+            ]
+        },
+        {
+            "id": "CategoryData",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["javascript", "jit", "images", "layers", "page", "other"], "description": "Category type." },
+                { "name": "size", "type": "number", "description": "Category size in bytes." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables Memory domain events."
+        },
+        {
+            "name": "disable",
+            "description": "Disables Memory domain events."
+        },
+        {
+            "name": "startTracking",
+            "description": "Start tracking memory. This will produce a `trackingStart` event."
+        },
+        {
+            "name": "stopTracking",
+            "description": "Stop tracking memory. This will produce a `trackingComplete` event."
+        }
+    ],
+    "events": [
+        {
+            "name": "memoryPressure",
+            "description": "Memory pressure was encountered.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "severity", "type": "string", "enum": ["critical", "non-critical"], "description": "The severity of the memory pressure event." }
+            ]
+        },
+        {
+            "name": "trackingStart",
+            "description": "Tracking started.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "trackingUpdate",
+            "description": "Periodic tracking updates with event data.",
+            "parameters": [
+                { "name": "event", "$ref": "Event" }
+            ]
+        },
+        {
+            "name": "trackingComplete",
+            "description": "Tracking stopped."
+        }
+    ]
+}
+,
+{
+    "domain": "Network",
+    "description": "Network domain allows tracking network activities of the page. It exposes information about http, file, data and other requests and responses, their headers, bodies, timing, etc.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "LoaderId",
+            "type": "string",
+            "description": "Unique loader identifier."
+        },
+        {
+            "id": "FrameId",
+            "type": "string",
+            "description": "Unique frame identifier."
+        },
+        {
+            "id": "RequestId",
+            "type": "string",
+            "description": "Unique request identifier."
+        },
+        {
+            "id": "Timestamp",
+            "type": "number",
+            "description": "Number of seconds since epoch."
+        },
+        {
+            "id": "Headers",
+            "type": "object",
+            "description": "Request / response headers as keys / values of JSON object."
+        },
+        {
+            "id": "ResourceTiming",
+            "type": "object",
+            "description": "Timing information for the request.",
+            "properties": [
+                { "name": "navigationStart", "type": "number", "description": "Timing's navigationStart is a baseline in seconds, while the other numbers are ticks in milliseconds relatively to this navigationStart." },
+                { "name": "domainLookupStart", "type": "number", "description": "Started DNS address resolve." },
+                { "name": "domainLookupEnd", "type": "number", "description": "Finished DNS address resolve." },
+                { "name": "connectStart", "type": "number", "description": "Started connecting to the remote host." },
+                { "name": "connectEnd", "type": "number", "description": "Connected to the remote host." },
+                { "name": "secureConnectionStart", "type": "number", "description": "Started SSL handshake." },
+                { "name": "requestStart", "type": "number", "description": "Started sending request." },
+                { "name": "responseStart", "type": "number", "description": "Started receiving response headers." }
+            ]
+        },
+        {
+            "id": "Request",
+            "type": "object",
+            "description": "HTTP request data.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Request URL." },
+                { "name": "method", "type": "string", "description": "HTTP request method." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP request headers." },
+                { "name": "postData", "type": "string", "optional": true, "description": "HTTP POST request data." }
+            ]
+        },
+        {
+            "id": "Response",
+            "type": "object",
+            "description": "HTTP response data.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Response URL. This URL can be different from CachedResource.url in case of redirect." },
+                { "name": "status", "type": "number", "description": "HTTP response status code." },
+                { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." },
+                { "name": "headersText", "type": "string", "optional": true, "description": "HTTP response headers text." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                { "name": "requestHeaders", "$ref": "Headers", "optional": true, "description": "Refined HTTP request headers that were actually transmitted over the network." },
+                { "name": "requestHeadersText", "type": "string", "optional": true, "description": "HTTP request headers text." },
+                { "name": "fromDiskCache", "type": "boolean", "optional": true, "description": "Specifies that the request was served from the disk cache." },
+                { "name": "timing", "$ref": "ResourceTiming", "optional": true, "description": "Timing information for the given request." }
+            ]
+        },
+        {
+            "id": "WebSocketRequest",
+            "type": "object",
+            "description": "WebSocket request data.",
+            "properties": [
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+            ]
+        },
+        {
+            "id": "WebSocketResponse",
+            "type": "object",
+            "description": "WebSocket response data.",
+            "properties": [
+                { "name": "status", "type": "number", "description": "HTTP response status code." },
+                { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+            ]
+        },
+        {
+            "id": "WebSocketFrame",
+            "type": "object",
+            "description": "WebSocket frame data.",
+            "properties": [
+                { "name": "opcode", "type": "number", "description": "WebSocket frame opcode." },
+                { "name": "mask", "type": "boolean", "description": "WebSocket frame mask." },
+                { "name": "payloadData", "type": "string", "description": "WebSocket frame payload data." }
+            ]
+        },
+        {
+            "id": "CachedResource",
+            "type": "object",
+            "description": "Information about the cached resource.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL. This is the url of the original network request." },
+                { "name": "type", "$ref": "Page.ResourceType", "description": "Type of this resource." },
+                { "name": "response", "$ref": "Response", "optional": true, "description": "Cached response data." },
+                { "name": "bodySize", "type": "number", "description": "Cached response body size." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "id": "Initiator",
+            "type": "object",
+            "description": "Information about the request initiator.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["parser", "script", "other"], "description": "Type of this initiator." },
+                { "name": "stackTrace", "$ref": "Console.StackTrace", "optional": true, "description": "Initiator JavaScript stack trace, set for Script only." },
+                { "name": "url", "type": "string", "optional": true, "description": "Initiator URL, set for Parser type only." },
+                { "name": "lineNumber", "type": "number", "optional": true, "description": "Initiator line number, set for Parser type only." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables network tracking, network events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables network tracking, prevents network events from being sent to the client."
+        },
+        {
+            "name": "setExtraHTTPHeaders",
+            "description": "Specifies whether to always send extra HTTP headers with the requests from this page.",
+            "parameters": [
+                { "name": "headers", "$ref": "Headers", "description": "Map with extra HTTP headers." }
+            ]
+        },
+        {
+            "name": "getResponseBody",
+            "description": "Returns content served for the given request.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Identifier of the network request to get content for." }
+            ],
+            "returns": [
+                { "name": "body", "type": "string", "description": "Response body." },
+                { "name": "base64Encoded", "type": "boolean", "description": "True, if content was sent as base64." }
+            ]
+        },
+        {
+            "name": "setCacheDisabled",
+            "parameters": [
+                { "name": "cacheDisabled", "type": "boolean", "description": "Cache disabled state." }
+            ],
+            "description": "Toggles ignoring cache for each request. If <code>true</code>, cache will not be used."
+        },
+        {
+            "name": "loadResource",
+            "async": true,
+            "parameters": [
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame to load the resource from." },
+                { "name": "url", "type": "string", "description": "URL of the resource to load." }
+            ],
+            "returns": [
+                { "name": "content", "type": "string", "description": "Resource content." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType." },
+                { "name": "status", "type": "number", "description": "HTTP response status code." }
+            ],
+            "description": "Loads a resource in the context of a frame on the inspected page without cross origin checks."
+        }
+    ],
+    "events": [
+        {
+            "name": "requestWillBeSent",
+            "description": "Fired when page is about to send HTTP request.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                { "name": "request", "$ref": "Request", "description": "Request data." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                { "name": "redirectResponse", "optional": true, "$ref": "Response", "description": "Redirect response data." },
+                { "name": "type", "$ref": "Page.ResourceType", "optional": true, "description": "Resource type." }
+            ]
+        },
+        {
+            "name": "requestServedFromCache",
+            "description": "Fired if request ended up loading from cache.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." }
+            ]
+        },
+        {
+            "name": "responseReceived",
+            "description": "Fired when HTTP response is available.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "type", "$ref": "Page.ResourceType", "description": "Resource type." },
+                { "name": "response", "$ref": "Response", "description": "Response data." }
+            ]
+        },
+        {
+            "name": "dataReceived",
+            "description": "Fired when data chunk was received over the network.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "dataLength", "type": "integer", "description": "Data chunk length." },
+                { "name": "encodedDataLength", "type": "integer", "description": "Actual bytes received (might be less than dataLength for compressed encodings)." }
+            ]
+        },
+        {
+            "name": "loadingFinished",
+            "description": "Fired when HTTP request has finished loading.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "name": "loadingFailed",
+            "description": "Fired when HTTP request has failed to load.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "errorText", "type": "string", "description": "User friendly error message." },
+                { "name": "canceled", "type": "boolean", "optional": true, "description": "True if loading was canceled." }
+            ]
+        },
+        {
+            "name": "requestServedFromMemoryCache",
+            "description": "Fired when HTTP request has been served from memory cache.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                { "name": "resource", "$ref": "CachedResource", "description": "Cached resource data." }
+            ]
+        },
+        {
+            "name": "webSocketWillSendHandshakeRequest",
+            "description": "Fired when WebSocket is about to initiate handshake.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "request", "$ref": "WebSocketRequest", "description": "WebSocket request data." }
+            ]
+        },
+        {
+            "name": "webSocketHandshakeResponseReceived",
+            "description": "Fired when WebSocket handshake response becomes available.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketResponse", "description": "WebSocket response data." }
+            ]
+        },
+        {
+            "name": "webSocketCreated",
+            "description": "Fired upon WebSocket creation.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "url", "type": "string", "description": "WebSocket request URL." }
+            ]
+        },
+        {
+            "name": "webSocketClosed",
+            "description": "Fired when WebSocket is closed.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." }
+            ]
+        },
+        {
+            "name": "webSocketFrameReceived",
+            "description": "Fired when WebSocket frame is received.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+            ]
+        },
+        {
+            "name": "webSocketFrameError",
+            "description": "Fired when WebSocket frame error occurs.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "errorMessage", "type": "string", "description": "WebSocket frame error message." }
+            ]
+        },
+        {
+            "name": "webSocketFrameSent",
+            "description": "Fired when WebSocket frame is sent.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "OverlayTypes",
+    "description": "Exposes types to be used by the inspector overlay.",
+    "types": [
+        {
+            "id": "Point",
+            "type": "object",
+            "properties": [
+                { "name": "x", "type": "number" },
+                { "name": "y", "type": "number" }
+            ]
+        },
+        {
+            "id": "Size",
+            "type": "object",
+            "properties": [
+                { "name": "width", "type": "integer" },
+                { "name": "height", "type": "integer" }
+            ]
+        },
+        {
+            "id": "Quad",
+            "description": "A quad is a collection of 4 points. When initialized from a rect, the points are in clockwise order from top left.",
+            "type": "array",
+            "items": { "$ref": "Point" }
+        },
+        {
+            "id": "Rect",
+            "description": "A rectangle specified by a reference coordinate and width/height offsets.",
+            "type": "object",
+            "properties": [
+                { "name": "x", "type": "number" },
+                { "name": "y", "type": "number" },
+                { "name": "width", "type": "number" },
+                { "name": "height", "type": "number" }
+            ]
+        },
+        {
+            "id": "Region",
+            "description": "A single region in a flow thread.",
+            "type": "object",
+            "properties": [
+                { "name": "borderQuad", "$ref": "Quad" },
+                { "name": "incomingQuad", "$ref": "Quad" },
+                { "name": "outgoingQuad", "$ref": "Quad" },
+                { "name": "isHighlighted", "type": "boolean", "optional": true }
+            ]
+        },
+        {
+            "id": "DisplayPath",
+            "description": "A vector path described using SVG path syntax.",
+            "type": "array",
+            "items": { "type": "any" }
+        },
+        {
+            "id": "RegionFlowData",
+            "type": "object",
+            "properties": [
+                { "name": "regions", "type": "array", "items": { "$ref": "Region"} },
+                { "name": "name", "type": "string" }
+            ]
+        },
+        {
+            "id": "ContentFlowData",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string" }
+            ]
+        },
+        {
+            "id": "ShapeOutsideData",
+            "type": "object",
+            "properties": [
+                { "name": "bounds", "$ref": "Quad", "description": "Bounds for the shape-outside paths." },
+                { "name": "shape", "$ref": "DisplayPath", "description": "Path for the element's shape.", "optional": true },
+                { "name": "marginShape", "$ref": "DisplayPath", "description": "Path for the element's margin shape.", "optional": true }
+            ]
+        },
+        {
+            "id": "ElementData",
+            "description": "Data that describes an element to be highlighted.",
+            "type": "object",
+            "properties": [
+                { "name": "tagName", "type": "string" },
+                { "name": "idValue", "type": "string", "description": "The value of the element's 'id' attribute." },
+                { "name": "className", "type": "string", "optional": true },
+                { "name": "size", "$ref": "Size", "optional": true },
+                { "name": "role", "type": "string", "description": "Computed accessibility role for the element.", "optional": true },
+                { "name": "regionFlowData", "$ref": "RegionFlowData", "optional": true },
+                { "name": "contentFlowData", "$ref": "ContentFlowData", "optional": true },
+                { "name": "shapeOutsideData", "$ref": "ShapeOutsideData", "optional": true }
+            ]
+        },
+        {
+            "id": "FragmentHighlightData",
+            "description": "Data required to highlight multiple quads.",
+            "type": "object",
+            "properties": [
+                { "name": "quads", "type": "array", "items": { "$ref": "Quad" }, "description": "Quads for which the highlight should be applied."},
+                { "name": "contentColor", "type": "string" },
+                { "name": "contentOutlineColor", "type": "string" },
+                { "name": "paddingColor", "type": "string" },
+                { "name": "borderColor", "type": "string" },
+                { "name": "marginColor", "type": "string" },
+                { "name": "regionClippingArea", "$ref": "Quad", "optional": true }
+            ]
+        },
+        {
+            "id": "NodeHighlightData",
+            "description": "Data required to highlight a DOM node.",
+            "type": "object",
+            "properties": [
+                { "name": "scrollOffset", "$ref": "Point", "description": "Scroll offset for the MainFrame's FrameView that is shared across all quads." },
+                { "name": "fragments", "type": "array", "items": { "$ref": "FragmentHighlightData" } },
+                { "name": "elementData", "$ref": "ElementData", "optional": true }
+            ]
+        },
+        {
+            "id": "OverlayConfiguration",
+            "description": "Data required to configure the overlay's size and scaling behavior.",
+            "type": "object",
+            "properties": [
+                { "name": "deviceScaleFactor", "type": "number" },
+                { "name": "viewportSize", "$ref": "Size" },
+                { "name": "frameViewFullSize", "$ref": "Size" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Page",
+    "description": "Actions and events related to the inspected page belong to the page domain.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "ResourceType",
+            "type": "string",
+            "enum": ["Document", "Stylesheet", "Image", "Font", "Script", "XHR", "WebSocket", "Other"],
+            "description": "Resource type as it was perceived by the rendering engine."
+        },
+        {
+            "id": "CoordinateSystem",
+            "type": "string",
+            "enum": ["Viewport", "Page"],
+            "description": "Coordinate system used by supplied coordinates."
+        },
+        {
+            "id": "Frame",
+            "type": "object",
+            "description": "Information about the Frame on the page.",
+            "properties": [
+                { "name": "id", "type": "string", "description": "Frame unique identifier." },
+                { "name": "parentId", "type": "string", "optional": true, "description": "Parent frame identifier." },
+                { "name": "loaderId", "$ref": "Network.LoaderId", "description": "Identifier of the loader associated with this frame." },
+                { "name": "name", "type": "string", "optional": true, "description": "Frame's name as specified in the tag." },
+                { "name": "url", "type": "string", "description": "Frame document's URL." },
+                { "name": "securityOrigin", "type": "string", "description": "Frame document's security origin." },
+                { "name": "mimeType", "type": "string", "description": "Frame document's mimeType as determined by the browser." }
+            ]
+        },
+        {
+            "id": "FrameResource",
+            "type": "object",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL." },
+                { "name": "type", "$ref": "ResourceType", "description": "Type of this resource." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                { "name": "failed", "type": "boolean", "optional": true, "description": "True if the resource failed to load." },
+                { "name": "canceled", "type": "boolean", "optional": true, "description": "True if the resource was canceled during loading." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "id": "FrameResourceTree",
+            "type": "object",
+            "description": "Information about the Frame hierarchy along with their cached resources.",
+            "properties": [
+                { "name": "frame", "$ref": "Frame", "description": "Frame information for this tree item." },
+                { "name": "childFrames", "type": "array", "optional": true, "items": { "$ref": "FrameResourceTree" }, "description": "Child frames." },
+                { "name": "resources", "type": "array", "items": { "$ref": "FrameResource" }, "description": "Information about frame resources." }
+            ]
+        },
+        {
+            "id": "SearchResult",
+            "type": "object",
+            "description": "Search result for resource.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL." },
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Resource frame id." },
+                { "name": "matchesCount", "type": "number", "description": "Number of matches in the resource content." },
+                { "name": "requestId", "$ref": "Network.RequestId", "optional": true, "description": "Network request id." }
+            ]
+        },
+        {
+            "id": "Cookie",
+            "type": "object",
+            "description": "Cookie object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Cookie name." },
+                { "name": "value", "type": "string", "description": "Cookie value." },
+                { "name": "domain", "type": "string", "description": "Cookie domain." },
+                { "name": "path", "type": "string", "description": "Cookie path." },
+                { "name": "expires", "type": "number", "description": "Cookie expires." },
+                { "name": "size", "type": "integer", "description": "Cookie size." },
+                { "name": "httpOnly", "type": "boolean", "description": "True if cookie is http-only." },
+                { "name": "secure", "type": "boolean", "description": "True if cookie is secure." },
+                { "name": "session", "type": "boolean", "description": "True in case of session cookie." }
+            ]
+        },
+        {
+            "id": "ScriptIdentifier",
+            "type": "string",
+            "description": "Unique script identifier."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables page domain notifications."
+        },
+        {
+            "name": "disable",
+            "description": "Disables page domain notifications."
+        },
+        {
+            "name": "addScriptToEvaluateOnLoad",
+            "parameters": [
+                { "name": "scriptSource", "type": "string" }
+            ],
+            "returns": [
+                { "name": "identifier", "$ref": "ScriptIdentifier", "description": "Identifier of the added script." }
+            ]
+        },
+        {
+            "name": "removeScriptToEvaluateOnLoad",
+            "parameters": [
+                { "name": "identifier", "$ref": "ScriptIdentifier" }
+            ]
+        },
+        {
+            "name": "reload",
+            "parameters": [
+                { "name": "ignoreCache", "type": "boolean", "optional": true, "description": "If true, browser cache is ignored (as if the user pressed Shift+refresh)." },
+                { "name": "scriptToEvaluateOnLoad", "type": "string", "optional": true, "description": "If set, the script will be injected into all frames of the inspected page after reload." }
+            ],
+            "description": "Reloads given page optionally ignoring the cache."
+        },
+        {
+            "name": "navigate",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "URL to navigate the page to." }
+            ],
+            "description": "Navigates current page to the given URL."
+        },
+        {
+            "name": "getCookies",
+            "returns": [
+                { "name": "cookies", "type": "array", "items": { "$ref": "Cookie"}, "description": "Array of cookie objects." }
+            ],
+            "description": "Returns all browser cookies. Depending on the backend support, will return detailed cookie information in the <code>cookies</code> field."
+        },
+        {
+            "name": "deleteCookie",
+            "parameters": [
+                { "name": "cookieName", "type": "string", "description": "Name of the cookie to remove." },
+                { "name": "url", "type": "string", "description": "URL to match cooke domain and path." }
+            ],
+            "description": "Deletes browser cookie with given name, domain and path."
+        },
+        {
+            "name": "getResourceTree",
+            "description": "Returns present frame / resource tree structure.",
+            "returns": [
+                { "name": "frameTree", "$ref": "FrameResourceTree", "description": "Present frame / resource tree structure." }
+            ]
+        },
+        {
+            "name": "getResourceContent",
+            "description": "Returns content of the given resource.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to get resource for." },
+                { "name": "url", "type": "string", "description": "URL of the resource to get content for." }
+            ],
+            "returns": [
+                { "name": "content", "type": "string", "description": "Resource content." },
+                { "name": "base64Encoded", "type": "boolean", "description": "True, if content was served as base64." }
+            ]
+        },
+        {
+            "name": "searchInResource",
+            "description": "Searches for given string in resource content.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id for resource to search in." },
+                { "name": "url", "type": "string", "description": "URL of the resource to search in." },
+                { "name": "query", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." },
+                { "name": "requestId", "$ref": "Network.RequestId", "optional": true, "description": "Request id for resource to search in." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "GenericTypes.SearchMatch" }, "description": "List of search matches." }
+            ]
+        },
+        {
+            "name": "searchInResources",
+            "description": "Searches for given string in frame / resource tree structure.",
+            "parameters": [
+                { "name": "text", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "SearchResult" }, "description": "List of search results." }
+            ]
+        },
+        {
+            "name": "setDocumentContent",
+            "description": "Sets given markup as the document's HTML.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to set HTML for." },
+                { "name": "html", "type": "string", "description": "HTML content to set."  }
+            ]
+        },
+        {
+            "name": "setShowPaintRects",
+            "description": "Requests that backend shows paint rectangles",
+            "parameters": [
+                { "name": "result", "type": "boolean", "description": "True for showing paint rectangles" }
+            ]
+        },
+        {
+            "name": "getScriptExecutionStatus",
+            "description": "Determines if scripts can be executed in the page.",
+            "returns": [
+                { "name": "result", "type": "string", "enum": ["allowed", "disabled", "forbidden"], "description": "Script execution status: \"allowed\" if scripts can be executed, \"disabled\" if script execution has been disabled through page settings, \"forbidden\" if script execution for the given page is not possible for other reasons." }
+            ]
+        },
+        {
+            "name": "setScriptExecutionDisabled",
+            "description": "Switches script execution in the page.",
+            "parameters": [
+                { "name": "value", "type": "boolean", "description": "Whether script execution should be disabled in the page." }
+            ]
+        },
+        {
+            "name": "setEmulatedMedia",
+            "parameters": [
+                { "name": "media", "type": "string", "description": "Media type to emulate. Empty string disables the override." }
+            ],
+            "description": "Emulates the given media for CSS media queries."
+        },
+        {
+            "name": "getCompositingBordersVisible",
+            "description": "Indicates the visibility of compositing borders.",
+            "returns": [
+                { "name": "result", "type": "boolean", "description": "If true, compositing borders are visible." }
+            ]
+        },
+        {
+            "name": "setCompositingBordersVisible",
+            "description": "Controls the visibility of compositing borders.",
+            "parameters": [
+                { "name": "visible", "type": "boolean", "description": "True for showing compositing borders." }
+            ]
+        },
+        {
+            "name": "snapshotNode",
+            "description": "Capture a snapshot of the specified node that does not include unrelated layers.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Id of the node to snapshot." }
+            ],
+            "returns": [
+                { "name": "dataURL", "type": "string", "description": "Base64-encoded image data (PNG)." }
+            ]
+        },
+        {
+            "name": "snapshotRect",
+            "description": "Capture a snapshot of the page within the specified rectangle and coordinate system.",
+            "parameters": [
+                { "name": "x", "type": "integer", "description": "X coordinate" },
+                { "name": "y", "type": "integer", "description": "Y coordinate" },
+                { "name": "width", "type": "integer", "description": "Rectangle width" },
+                { "name": "height", "type": "integer", "description": "Rectangle height" },
+                { "name": "coordinateSystem", "$ref": "CoordinateSystem", "description": "Indicates the coordinate system of the supplied rectangle." }
+            ],
+            "returns": [
+                { "name": "dataURL", "type": "string", "description": "Base64-encoded image data (PNG)." }
+            ]
+        },
+        {
+            "name": "archive",
+            "description": "Grab an archive of the page.",
+            "returns": [
+                { "name": "data", "type": "string", "description": "Base64-encoded web archive." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "domContentEventFired",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "loadEventFired",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "frameNavigated",
+            "description": "Fired once navigation of the frame has completed. Frame is now associated with the new loader.",
+            "parameters": [
+                { "name": "frame", "$ref": "Frame", "description": "Frame object." }
+            ]
+        },
+        {
+            "name": "frameDetached",
+            "description": "Fired when frame has been detached from its parent.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has been detached." }
+            ]
+        },
+        {
+            "name": "frameStartedLoading",
+            "description": "Fired when frame has started loading.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has started loading." }
+            ]
+        },
+        {
+            "name": "frameStoppedLoading",
+            "description": "Fired when frame has stopped loading.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has stopped loading." }
+            ]
+        },
+        {
+            "name": "frameScheduledNavigation",
+            "description": "Fired when frame schedules a potential navigation.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has scheduled a navigation." },
+                { "name": "delay", "type": "number", "description": "Delay (in seconds) until the navigation is scheduled to begin. The navigation is not guaranteed to start." }
+            ]
+        },
+        {
+            "name": "frameClearedScheduledNavigation",
+            "description": "Fired when frame no longer has a scheduled navigation.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has cleared its scheduled navigation." }
+            ]
+        },
+        {
+            "name": "javascriptDialogOpening",
+            "description": "Fired when a JavaScript initiated dialog (alert, confirm, prompt, or onbeforeunload) is about to open.",
+            "parameters": [
+                { "name": "message", "type": "string", "description": "Message that will be displayed by the dialog." }
+            ]
+        },
+        {
+            "name": "javascriptDialogClosed",
+            "description": "Fired when a JavaScript initiated dialog (alert, confirm, prompt, or onbeforeunload) has been closed."
+        },
+        {
+            "name": "scriptsEnabled",
+            "description": "Fired when the JavaScript is enabled/disabled on the page",
+            "parameters": [
+                { "name": "isEnabled", "type": "boolean", "description": "Whether script execution is enabled or disabled on the page." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Runtime",
+    "description": "Runtime domain exposes JavaScript runtime by means of remote evaluation and mirror objects. Evaluation results are returned as mirror object that expose object type, string representation and unique identifier that can be used for further object reference. Original objects are maintained in memory unless they are either explicitly released or are released along with the other objects in their object group.",
+    "types": [
+        {
+            "id": "RemoteObjectId",
+            "type": "string",
+            "description": "Unique object identifier."
+        },
+        {
+            "id": "RemoteObject",
+            "type": "object",
+            "description": "Mirror object referencing original JavaScript object.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class"], "description": "Object subtype hint. Specified for <code>object</code> <code>function</code> (for class) type values only." },
+                { "name": "className", "type": "string", "optional": true, "description": "Object class (constructor) name. Specified for <code>object</code> type values only." },
+                { "name": "value", "type": "any", "optional": true, "description": "Remote object value (in case of primitive values or JSON values if it was requested)." },
+                { "name": "description", "type": "string", "optional": true, "description": "String representation of the object." },
+                { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Unique object identifier (for non-primitive values)." },
+                { "name": "size", "type": "integer", "optional": true, "description": "Size of the array/collection. Specified for array/map/set/weakmap/weakset object type values only." },
+                { "name": "classPrototype", "$ref": "RemoteObject", "optional": true, "description": "Remote object for the class prototype. Specified for class object type values only." },
+                { "name": "preview", "$ref": "ObjectPreview", "optional": true, "description": "Preview containing abbreviated property values. Specified for <code>object</code> type values only." }
+            ]
+        },
+        {
+            "id": "ObjectPreview",
+            "type": "object",
+            "description": "Object containing abbreviated remote object value.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class"], "description": "Object subtype hint. Specified for <code>object</code> type values only." },
+                { "name": "description", "type": "string", "optional": true, "description": "String representation of the object." },
+                { "name": "lossless", "type": "boolean", "description": "Determines whether preview is lossless (contains all information of the original object)." },
+                { "name": "overflow", "type": "boolean", "optional": true, "description": "True iff some of the properties of the original did not fit." },
+                { "name": "properties", "type": "array", "items": { "$ref": "PropertyPreview" }, "optional": true, "description": "List of the properties." },
+                { "name": "entries", "type": "array", "items": { "$ref": "EntryPreview" }, "optional": true, "description": "List of the entries. Specified for <code>map</code> and <code>set</code> subtype values only." },
+                { "name": "size", "type": "integer", "optional": true, "description": "Size of the array/collection. Specified for array/map/set/weakmap/weakset object type values only." }
+            ]
+        },
+        {
+            "id": "PropertyPreview",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol", "accessor"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class"], "description": "Object subtype hint. Specified for <code>object</code> type values only." },
+                { "name": "value", "type": "string", "optional": true, "description": "User-friendly property value string." },
+                { "name": "valuePreview", "$ref": "ObjectPreview", "optional": true, "description": "Nested value preview." },
+                { "name": "internal", "type": "boolean", "optional": true, "description": "True if this is an internal property." }
+            ]
+        },
+        {
+            "id": "EntryPreview",
+            "type": "object",
+            "properties": [
+                { "name": "key", "$ref": "ObjectPreview", "optional": true, "description": "Entry key. Specified for map-like collection entries." },
+                { "name": "value", "$ref": "ObjectPreview", "description": "Entry value." }
+            ]
+        },
+        {
+            "id": "CollectionEntry",
+            "type": "object",
+            "properties": [
+                { "name": "key", "$ref": "Runtime.RemoteObject", "optional": true, "description": "Entry key of a map-like collection, otherwise not provided." },
+                { "name": "value", "$ref": "Runtime.RemoteObject", "description": "Entry value." }
+            ]
+        },
+        {
+            "id": "PropertyDescriptor",
+            "type": "object",
+            "description": "Object property descriptor.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name or symbol description." },
+                { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." },
+                { "name": "writable", "type": "boolean", "optional": true, "description": "True if the value associated with the property may be changed (data descriptors only)." },
+                { "name": "get", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a getter for the property, or <code>undefined</code> if there is no getter (accessor descriptors only)." },
+                { "name": "set", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a setter for the property, or <code>undefined</code> if there is no setter (accessor descriptors only)." },
+                { "name": "configurable", "type": "boolean", "description": "True if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object." },
+                { "name": "enumerable", "type": "boolean", "description": "True if this property shows up during enumeration of the properties on the corresponding object." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "isOwn", "optional": true, "type": "boolean", "description": "True if the property is owned for the object." },
+                { "name": "symbol", "optional": true, "$ref": "Runtime.RemoteObject", "description": "Property symbol object, if the property is a symbol." },
+                { "name": "nativeGetter", "optional": true, "type": "boolean", "description": "True if the property value came from a native getter." }
+            ]
+        },
+        {
+            "id": "InternalPropertyDescriptor",
+            "type": "object",
+            "description": "Object internal property descriptor. This property isn't normally visible in JavaScript code.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Conventional property name." },
+                { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." }
+            ]
+        },
+        {
+            "id": "CallArgument",
+            "type": "object",
+            "description": "Represents function call argument. Either remote object id <code>objectId</code> or primitive <code>value</code> or neither of (for undefined) them should be specified.",
+            "properties": [
+                { "name": "value", "type": "any", "optional": true, "description": "Primitive value." },
+                { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Remote object handle." }
+            ]
+        },
+        {
+            "id": "ExecutionContextId",
+            "type": "integer",
+            "description": "Id of an execution context."
+        },
+        {
+            "id": "ExecutionContextDescription",
+            "type": "object",
+            "description": "Description of an isolated world.",
+            "properties": [
+                { "name": "id", "$ref": "ExecutionContextId", "description": "Unique id of the execution context. It can be used to specify in which execution context script evaluation should be performed." },
+                { "name": "isPageContext", "type": "boolean", "description": "True if this is a context where inpspected web page scripts run. False if it is a content script isolated context." },
+                { "name": "name", "type": "string", "description": "Human readable name describing given context."},
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the owning frame." }
+            ]
+        },
+        {
+            "id": "SyntaxErrorType",
+            "type": "string",
+            "enum": ["none", "irrecoverable", "unterminated-literal", "recoverable"],
+            "description": "Syntax error type: \"none\" for no error, \"irrecoverable\" for unrecoverable errors, \"unterminated-literal\" for when there is an unterminated literal, \"recoverable\" for when the expression is unfinished but valid so far."
+        },
+        {
+            "id": "ErrorRange",
+            "type": "object",
+            "description": "Range of an error in source code.",
+            "properties": [
+                { "name": "startOffset", "type": "integer", "description": "Start offset of range (inclusive)." },
+                { "name": "endOffset", "type": "integer", "description": "End offset of range (exclusive)." }
+            ]
+        },
+        {
+            "id": "StructureDescription",
+            "type": "object",
+            "properties": [
+                { "name": "fields", "type": "array",  "items": { "type": "string" }, "optional": true, "description": "Array of strings, where the strings represent object properties." },
+                { "name": "optionalFields", "type": "array",  "items": { "type": "string" }, "optional": true, "description": "Array of strings, where the strings represent optional object properties." },
+                { "name": "constructorName", "type": "string", "optional": true, "description": "Name of the constructor." },
+                { "name": "prototypeStructure", "$ref": "StructureDescription", "optional": true, "description": "Pointer to the StructureRepresentation of the protoype if one exists." },
+                { "name": "isImprecise", "type": "boolean", "optional": true, "description": "If true, it indicates that the fields in this StructureDescription may be inaccurate. I.e, there might have been fields that have been deleted before it was profiled or it has fields we haven't profiled." }
+            ]
+        },
+        {
+            "id": "TypeSet",
+            "type": "object",
+            "properties": [
+                { "name": "isFunction", "type": "boolean", "description": "Indicates if this type description has been type Function." },
+                { "name": "isUndefined", "type": "boolean", "description": "Indicates if this type description has been type Undefined." },
+                { "name": "isNull", "type": "boolean", "description": "Indicates if this type description has been type Null." },
+                { "name": "isBoolean", "type": "boolean", "description": "Indicates if this type description has been type Boolean." },
+                { "name": "isInteger", "type": "boolean", "description": "Indicates if this type description has been type Integer." },
+                { "name": "isNumber", "type": "boolean", "description": "Indicates if this type description has been type Number." },
+                { "name": "isString", "type": "boolean", "description": "Indicates if this type description has been type String." },
+                { "name": "isObject", "type": "boolean", "description": "Indicates if this type description has been type Object." },
+                { "name": "isSymbol", "type": "boolean", "description": "Indicates if this type description has been type Symbol." }
+            ]
+        },
+        {
+            "id": "TypeDescription",
+            "type": "object",
+            "description": "Container for type information that has been gathered.",
+            "properties": [
+                { "name": "isValid", "type": "boolean", "description": "If true, we were able to correlate the offset successfuly with a program location. If false, the offset may be bogus or the offset may be from a CodeBlock that hasn't executed." },
+                { "name": "leastCommonAncestor", "type": "string", "optional": true, "description": "Least common ancestor of all Constructors if the TypeDescription has seen any structures. This string is the display name of the shared constructor function." },
+                { "name": "typeSet", "$ref": "TypeSet", "optional": true, "description": "Set of booleans for determining the aggregate type of this type description." },
+                { "name": "structures", "type": "array", "items": { "$ref": "StructureDescription" }, "optional": true, "description": "Array of descriptions for all structures seen for this variable." },
+                { "name": "isTruncated", "type": "boolean", "optional": true, "description": "If true, this indicates that no more structures are being profiled because some maximum threshold has been reached and profiling has stopped because of memory pressure." }
+            ]
+        },
+        {
+            "id": "TypeLocation",
+            "type": "object",
+            "description": "Describes the location of an expression we want type information for.",
+            "properties": [
+                { "name": "typeInformationDescriptor", "type": "integer", "description": "What kind of type information do we want (normal, function return values, 'this' statement)." },
+                { "name": "sourceID", "type": "string", "description": "sourceID uniquely identifying a script" },
+                { "name": "divot", "type": "integer", "description": "character offset for assignment range" }
+            ]
+        },
+        {
+            "id": "BasicBlock",
+            "type": "object",
+            "description": "From Wikipedia: a basic block is a portion of the code within a program with only one entry point and only one exit point. This type gives the location of a basic block and if that basic block has executed.",
+            "properties": [
+                { "name": "startOffset", "type": "integer", "description": "Start offset of the basic block." },
+                { "name": "endOffset", "type": "integer", "description": "End offset of the basic block." },
+                { "name": "hasExecuted", "type": "boolean", "description": "Indicates if the basic block has executed before." },
+                { "name": "executionCount", "type": "integer", "description": "Indicates how many times the basic block has executed." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "parse",
+            "parameters": [
+                { "name": "source", "type": "string", "description": "Source code to parse." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "SyntaxErrorType", "description": "Parse result." },
+                { "name": "message", "type": "string", "optional": true, "description": "Parse error message." },
+                { "name": "range", "$ref": "ErrorRange", "optional": true, "description": "Range in the source where the error occurred." }
+            ],
+            "description": "Parses JavaScript source code for errors."
+        },
+        {
+            "name": "evaluate",
+            "parameters": [
+                { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." },
+                { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Determines whether Command Line API should be available during the evaluation." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "contextId", "$ref": "Runtime.ExecutionContextId", "optional": true, "description": "Specifies in which isolated context to perform evaluation. Each content script lives in an isolated context and this parameter may be used to specify one of those contexts. If the parameter is omitted or 0 the evaluation will be performed in the context of the inspected page." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." },
+                { "name": "saveResult", "type": "boolean", "optional": true, "description": "Whether the resulting value should be considered for saving in the $n history." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "RemoteObject", "description": "Evaluation result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Evaluates expression on global object."
+        },
+        {
+            "name": "callFunctionOn",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to call function on." },
+                { "name": "functionDeclaration", "type": "string", "description": "Declaration of the function to call." },
+                { "name": "arguments", "type": "array", "items": { "$ref": "CallArgument", "description": "Call argument." }, "optional": true, "description": "Call arguments. All call arguments must belong to the same JavaScript world as the target object." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether function call should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object which should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "RemoteObject", "description": "Call result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
+            ],
+            "description": "Calls function with given declaration on the given object. Object group of the result is inherited from the target object."
+        },
+        {
+            "name": "getProperties",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to return properties for." },
+                { "name": "ownProperties", "optional": true, "type": "boolean", "description": "If true, returns properties belonging only to the object itself, not to its prototype chain." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for property values." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "PropertyDescriptor"}, "description": "Object properties." },
+                { "name": "internalProperties", "optional": true, "type": "array", "items": { "$ref": "InternalPropertyDescriptor"}, "description": "Internal object properties." }
+            ],
+            "description": "Returns properties of a given object. Object group of the result is inherited from the target object."
+        },
+        {
+            "name": "getDisplayableProperties",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to return properties for." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for property values." }
+            ],
+            "returns": [
+                { "name": "properties", "type": "array", "items": { "$ref": "PropertyDescriptor"}, "description": "Object properties." },
+                { "name": "internalProperties", "optional": true, "type": "array", "items": { "$ref": "InternalPropertyDescriptor"}, "description": "Internal object properties." }
+            ],
+            "description": "Returns displayable properties of a given object. Object group of the result is inherited from the target object. Displayable properties are own properties, internal properties, and native getters in the prototype chain (assumed to be bindings and treated like own properties for the frontend)."
+        },
+        {
+            "name": "getCollectionEntries",
+            "description": "Returns entries of given Map / Set collection.",
+            "parameters": [
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "description": "Id of the collection to get entries for." },
+                { "name": "objectGroup", "optional": true, "type": "string", "description": "Symbolic group name that can be used to release multiple. If not provided, it will be the same objectGroup as the RemoteObject determined from <code>objectId</code>. This is useful for WeakMap to release the collection entries." },
+                { "name": "startIndex", "optional": true, "type": "integer", "description": "If provided skip to this index before collecting values. Otherwise, 0." },
+                { "name": "numberToFetch", "optional": true, "type": "integer", "description": "If provided only return <code>numberToFetch</code> values. Otherwise, return values all the way to the end." }
+            ],
+            "returns": [
+                { "name": "entries", "type": "array", "items": { "$ref": "CollectionEntry" }, "description": "Array of collection entries." }
+            ]
+        },
+        {
+            "name": "saveResult",
+            "parameters": [
+                { "name": "value", "$ref": "CallArgument", "description": "Id or value of the object to save." },
+                { "name": "contextId", "optional": true, "$ref": "ExecutionContextId", "description": "Unique id of the execution context. To specify in which execution context script evaluation should be performed. If not provided, determine from the CallArgument's objectId." }
+            ],
+            "returns": [
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the value was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Assign a saved result index to this value."
+        },
+        {
+            "name": "releaseObject",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to release." }
+            ],
+            "description": "Releases remote object with given id."
+        },
+        {
+            "name": "releaseObjectGroup",
+            "parameters": [
+                { "name": "objectGroup", "type": "string", "description": "Symbolic object group name." }
+            ],
+            "description": "Releases all remote objects that belong to a given group."
+        },
+        {
+            "name": "enable",
+            "description": "Enables reporting of execution contexts creation by means of <code>executionContextCreated</code> event. When the reporting gets enabled the event will be sent immediately for each existing execution context."
+        },
+        {
+            "name": "disable",
+            "description": "Disables reporting of execution contexts creation."
+        },
+        {
+            "name": "getRuntimeTypesForVariablesAtOffsets",
+            "parameters": [
+                { "name": "locations", "type": "array", "items": { "$ref": "TypeLocation" }, "description": "An array of type locations we're requesting information for. Results are expected in the same order they're sent in."}
+            ],
+            "returns": [
+                { "name": "types", "type": "array", "items": { "$ref": "TypeDescription", "description": "Types for requested variable." } }
+            ],
+            "description": "Returns detailed informtation on given function."
+        },
+        {
+            "name": "enableTypeProfiler",
+            "description": "Enables type profiling on the VM."
+        },
+        {
+            "name": "disableTypeProfiler",
+            "description": "Disables type profiling on the VM."
+        },
+        {
+            "name": "getBasicBlocks",
+            "parameters": [
+                { "name": "sourceID", "type": "string", "description": "Indicates which sourceID information is requested for." }
+            ],
+            "returns": [
+                { "name": "basicBlocks", "type": "array", "items": { "$ref": "BasicBlock", "description": "Array of basic blocks." } }
+            ],
+            "description": "Returns a list of basic blocks for the given sourceID with information about their text ranges and whether or not they have executed."
+        }
+    ],
+    "events": [
+        {
+            "name": "executionContextCreated",
+            "parameters": [
+                { "name": "context", "$ref": "ExecutionContextDescription", "description": "A newly created execution contex." }
+            ],
+            "description": "Issued when new execution context is created."
+        }
+    ]
+}
+,
+{
+    "domain": "ScriptProfiler",
+    "description": "Profiler domain exposes JavaScript evaluation timing and profiling.",
+    "types": [
+        {
+            "id": "EventType",
+            "type": "string",
+            "enum": ["API", "Microtask", "Other"]
+        },
+        {
+            "id": "Event",
+            "type": "object",
+            "properties": [
+                { "name": "startTime", "type": "number" },
+                { "name": "endTime", "type": "number" },
+                { "name": "type", "$ref": "EventType" }
+            ]
+        },
+        {
+            "id": "ExpressionLocation",
+            "type": "object",
+            "properties": [
+                { "name": "line", "type": "integer", "description": "1-based." },
+                { "name": "column", "type": "integer", "description": "1-based." }
+            ]
+        },
+        {
+            "id": "StackFrame",
+            "type": "object",
+            "properties": [
+                { "name": "sourceID", "$ref": "Debugger.ScriptId", "description": "Unique script identifier." },
+                { "name": "name", "type": "string", "description": "A displayable name for the stack frame. i.e function name, (program), etc." },
+                { "name": "line", "type": "integer", "description": "-1 if unavailable. 1-based if available." },
+                { "name": "column", "type": "integer", "description": "-1 if unavailable. 1-based if available." },
+                { "name": "url", "type": "string" },
+                { "name": "expressionLocation", "$ref": "ExpressionLocation", "optional": true }
+            ]
+        },
+        {
+            "id": "StackTrace",
+            "type": "object",
+            "properties": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "stackFrames", "type": "array", "items": { "$ref": "StackFrame" }, "description": "First array item is the bottom of the call stack and last array item is the top of the call stack." }
+            ]
+        },
+        {
+            "id": "Samples",
+            "type": "object",
+            "properties": [
+                { "name": "stackTraces", "type": "array", "items": { "$ref": "StackTrace" } }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "startTracking",
+            "description": "Start tracking script evaluations.",
+            "parameters": [
+                { "name": "includeSamples", "type": "boolean", "optional": true, "description": "Start the sampling profiler, defaults to false." }
+            ]
+        },
+        {
+            "name": "stopTracking",
+            "description": "Stop tracking script evaluations. This will produce a `trackingComplete` event."
+        }
+    ],
+    "events": [
+        {
+            "name": "trackingStart",
+            "description": "Tracking started.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "trackingUpdate",
+            "description": "Periodic tracking updates with event data.",
+            "parameters": [
+                { "name": "event", "$ref": "Event" }
+            ]
+        },
+        {
+            "name": "trackingComplete",
+            "description": "Tracking stopped. Includes any buffered data during tracking, such as profiling information.",
+            "parameters": [
+                { "name": "samples", "$ref": "Samples", "optional": true, "description": "Stack traces." }
+            ]
+        },
+        {
+            "name": "programmaticCaptureStarted",
+            "description": "Fired when programmatic capture starts (console.profile). JSContext inspection only."
+        },
+        {
+            "name": "programmaticCaptureStopped",
+            "description": "Fired when programmatic capture stops (console.profileEnd). JSContext inspection only."
+        }
+    ]
+}
+,
+{
+    "domain": "Timeline",
+    "description": "Timeline provides its clients with instrumentation records that are generated during the page runtime. Timeline instrumentation can be started and stopped using corresponding commands. While timeline is started, it is generating timeline event records.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "EventType",
+            "type": "string",
+            "description": "Timeline record type.",
+            "enum": [
+                "EventDispatch",
+                "ScheduleStyleRecalculation",
+                "RecalculateStyles",
+                "InvalidateLayout",
+                "Layout",
+                "Paint",
+                "Composite",
+                "RenderingFrame",
+                "TimerInstall",
+                "TimerRemove",
+                "TimerFire",
+                "EvaluateScript",
+                "TimeStamp",
+                "Time",
+                "TimeEnd",
+                "FunctionCall",
+                "ProbeSample",
+                "ConsoleProfile",
+                "RequestAnimationFrame",
+                "CancelAnimationFrame",
+                "FireAnimationFrame"
+            ]
+        },
+        {
+            "id": "Instrument",
+            "type": "string",
+            "description": "Instrument types.",
+            "enum": [
+                "ScriptProfiler",
+                "Timeline",
+                "Memory",
+                "Heap"
+            ]
+        },
+        {
+            "id": "TimelineEvent",
+            "type": "object",
+            "description": "Timeline record contains information about the recorded activity.",
+            "properties": [
+                { "name": "type", "$ref": "EventType", "description": "Event type." },
+                { "name": "data", "type": "object", "description": "Event data." },
+                { "name": "children", "type": "array", "optional": true, "items": { "$ref": "TimelineEvent" }, "description": "Nested records." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "start",
+            "description": "Starts capturing instrumentation events.",
+            "parameters": [
+                { "name": "maxCallStackDepth", "optional": true, "type": "integer", "description": "Samples JavaScript stack traces up to <code>maxCallStackDepth</code>, defaults to 5." }
+            ]
+        },
+        {
+            "name": "stop",
+            "description": "Stops capturing instrumentation events."
+        },
+        {
+            "name": "setAutoCaptureEnabled",
+            "description": "Toggle auto capture state. If <code>true</code> the backend will disable breakpoints and start capturing on navigation. The backend will fire the <code>autoCaptureStarted</code> event when an auto capture starts. The frontend should stop the auto capture when appropriate and re-enable breakpoints.",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "New auto capture state." }
+            ]
+        },
+        {
+            "name": "setInstruments",
+            "description": "Instruments to enable when capture starts on the backend (e.g. auto capture or programmatic capture).",
+            "parameters": [
+                { "name": "instruments", "type": "array", "items": { "$ref": "Instrument" }, "description": "Instruments to enable." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "eventRecorded",
+            "description": "Fired for every instrumentation event while timeline is started.",
+            "parameters": [
+                { "name": "record", "$ref": "TimelineEvent", "description": "Timeline event record data." }
+            ]
+        },
+        {
+            "name": "recordingStarted",
+            "description": "Fired when recording has started.",
+            "parameters": [
+                { "name": "startTime", "type": "number", "description": "Start time of this new recording." }
+            ]
+        },
+        {
+            "name": "recordingStopped",
+            "description": "Fired when recording has stopped.",
+            "parameters": [
+                { "name": "endTime", "type": "number", "description": "End time of this recording." }
+            ]
+        },
+        {
+            "name": "autoCaptureStarted",
+            "description": "Fired when auto capture started."
+        },
+        {
+            "name": "programmaticCaptureStarted",
+            "description": "Fired when programmatic capture starts (console.profile)."
+        },
+        {
+            "name": "programmaticCaptureStopped",
+            "description": "Fired when programmatic capture stops (console.profileEnd)."
+        }
+    ]
+}
+]}
diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json b/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json
new file mode 100644
index 000000000..7545fdc99
--- /dev/null
+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-10.3.json
@@ -0,0 +1,3718 @@
+{"domains":[
+{
+    "domain": "ApplicationCache",
+    "availability": "web",
+    "types": [
+        {
+            "id": "ApplicationCacheResource",
+            "type": "object",
+            "description": "Detailed application cache resource information.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource url." },
+                { "name": "size", "type": "integer", "description": "Resource size." },
+                { "name": "type", "type": "string", "description": "Resource type." }
+            ]
+        },
+        {
+            "id": "ApplicationCache",
+            "type": "object",
+            "description": "Detailed application cache information.",
+            "properties": [
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "size", "type": "number", "description": "Application cache size." },
+                { "name": "creationTime", "type": "number", "description": "Application cache creation time." },
+                { "name": "updateTime", "type": "number", "description": "Application cache update time." },
+                { "name": "resources", "type": "array", "items": { "$ref": "ApplicationCacheResource" }, "description": "Application cache resources." }
+            ]
+        },
+        {
+            "id": "FrameWithManifest",
+            "type": "object",
+            "description": "Frame identifier - manifest URL pair.",
+            "properties": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame identifier." },
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "status", "type": "integer", "description": "Application cache status." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "getFramesWithManifests",
+            "returns": [
+                { "name": "frameIds", "type": "array", "items": { "$ref": "FrameWithManifest" }, "description": "Array of frame identifiers with manifest urls for each frame containing a document associated with some application cache." }
+            ],
+            "description": "Returns array of frame identifiers with manifest urls for each frame containing a document associated with some application cache."
+        },
+        {
+            "name": "enable",
+            "description": "Enables application cache domain notifications."
+        },
+        {
+            "name": "getManifestForFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose manifest is retrieved." }
+            ],
+            "returns": [
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL for document in the given frame." }
+            ],
+            "description": "Returns manifest URL for document in the given frame."
+        },
+        {
+            "name": "getApplicationCacheForFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache is retrieved." }
+            ],
+            "returns": [
+                { "name": "applicationCache", "$ref": "ApplicationCache", "description": "Relevant application cache data for the document in given frame." }
+            ],
+            "description": "Returns relevant application cache data for the document in given frame."
+        }
+    ],
+    "events": [
+        {
+            "name": "applicationCacheStatusUpdated",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache updated status." },
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "status", "type": "integer", "description": "Updated application cache status." }
+            ]
+        },
+        {
+            "name": "networkStateUpdated",
+            "parameters": [
+                { "name": "isNowOnline", "type": "boolean" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "CSS",
+    "description": "This domain exposes CSS read/write operations. All CSS objects, like stylesheets, rules, and styles, have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). Alternatively, a client can discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "StyleSheetId",
+            "type": "string"
+        },
+        {
+            "id": "CSSStyleId",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                { "name": "ordinal", "type": "integer", "description": "The style ordinal within the stylesheet." }
+            ],
+            "description": "This object identifies a CSS style in a unique way."
+        },
+        {
+            "id": "StyleSheetOrigin",
+            "type": "string",
+            "enum": ["user", "user-agent", "inspector", "regular"],
+            "description": "Stylesheet type: \"user\" for user stylesheets, \"user-agent\" for user-agent stylesheets, \"inspector\" for stylesheets created by the inspector (i.e. those holding the \"via inspector\" rules), \"regular\" for regular stylesheets."
+        },
+        {
+            "id": "CSSRuleId",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                { "name": "ordinal", "type": "integer", "description": "The rule ordinal within the stylesheet." }
+            ],
+            "description": "This object identifies a CSS rule in a unique way."
+        },
+        {
+            "id": "PseudoIdMatches",
+            "type": "object",
+            "properties": [
+                { "name": "pseudoId", "type": "integer", "description": "Pseudo style identifier (see <code>enum PseudoId</code> in <code>RenderStyleConstants.h</code>)."},
+                { "name": "matches", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules applicable to the pseudo style."}
+            ],
+            "description": "CSS rule collection for a single pseudo style."
+        },
+        {
+            "id": "InheritedStyleEntry",
+            "type": "object",
+            "properties": [
+                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "The ancestor node's inline style, if any, in the style inheritance chain." },
+                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules matching the ancestor node in the style inheritance chain." }
+            ],
+            "description": "CSS rule collection for a single pseudo style."
+        },
+        {
+            "id": "RuleMatch",
+            "type": "object",
+            "properties": [
+                { "name": "rule", "$ref": "CSSRule", "description": "CSS rule in the match." },
+                { "name": "matchingSelectors", "type": "array", "items": { "type": "integer" }, "description": "Matching selector indices in the rule's selectorList selectors (0-based)." }
+            ],
+            "description": "Match data for a CSS rule."
+        },
+        {
+            "id": "CSSSelector",
+            "type": "object",
+            "properties": [
+                { "name": "text", "type": "string", "description": "Canonicalized selector text." },
+                { "name": "specificity", "optional": true, "type": "array", "items": { "type": "integer" }, "description": "Specificity (a, b, c) tuple. Included if the selector is sent in response to CSS.getMatchedStylesForNode which provides a context element." },
+                { "name": "dynamic", "optional": true, "type": "boolean", "description": "Whether or not the specificity can be dynamic. Included if the selector is sent in response to CSS.getMatchedStylesForNode which provides a context element." }
+            ],
+            "description": "CSS selector."
+        },
+        {
+            "id": "SelectorList",
+            "type": "object",
+            "properties": [
+                { "name": "selectors", "type": "array", "items": { "$ref": "CSSSelector" }, "description": "Selectors in the list." },
+                { "name": "text", "type": "string", "description": "Rule selector text." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Rule selector range in the underlying resource (if available)." }
+            ],
+            "description": "Selector list data."
+        },
+        {
+            "id": "CSSStyleAttribute",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "DOM attribute name (e.g. \"width\")."},
+                { "name": "style", "$ref": "CSSStyle", "description": "CSS style generated by the respective DOM attribute."}
+            ],
+            "description": "CSS style information for a DOM style attribute."
+        },
+        {
+            "id": "CSSStyleSheetHeader",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Owner frame identifier."},
+                { "name": "sourceURL", "type": "string", "description": "Stylesheet resource URL."},
+                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Stylesheet origin."},
+                { "name": "title", "type": "string", "description": "Stylesheet title."},
+                { "name": "disabled", "type": "boolean", "description": "Denotes whether the stylesheet is disabled."},
+                { "name": "isInline", "type": "boolean", "description": "Whether this stylesheet is a <style> tag created by the parser. This is not set for document.written <style> tags." },
+                { "name": "startLine", "type": "number", "description": "Line offset of the stylesheet within the resource (zero based)." },
+                { "name": "startColumn", "type": "number", "description": "Column offset of the stylesheet within the resource (zero based)." }
+            ],
+            "description": "CSS stylesheet metainformation."
+        },
+        {
+            "id": "CSSStyleSheetBody",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                { "name": "rules", "type": "array", "items": { "$ref": "CSSRule" }, "description": "Stylesheet resource URL."},
+                { "name": "text", "type": "string", "optional": true, "description": "Stylesheet resource contents (if available)."}
+            ],
+            "description": "CSS stylesheet contents."
+        },
+        {
+            "id": "CSSRule",
+            "type": "object",
+            "properties": [
+                { "name": "ruleId", "$ref": "CSSRuleId", "optional": true, "description": "The CSS rule identifier (absent for user agent stylesheet and user-specified stylesheet rules)."},
+                { "name": "selectorList", "$ref": "SelectorList", "description": "Rule selector data." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "Parent stylesheet resource URL (for regular rules)."},
+                { "name": "sourceLine", "type": "integer", "description": "Line ordinal of the rule selector start character in the resource."},
+                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."},
+                { "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." },
+                { "name": "media", "type": "array", "items": { "$ref": "CSSMedia" }, "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards." }
+            ],
+            "description": "CSS rule representation."
+        },
+        {
+            "id": "SourceRange",
+            "type": "object",
+            "properties": [
+                { "name": "startLine", "type": "integer", "description": "Start line of range." },
+                { "name": "startColumn", "type": "integer", "description": "Start column of range (inclusive)." },
+                { "name": "endLine", "type": "integer", "description": "End line of range" },
+                { "name": "endColumn", "type": "integer", "description": "End column of range (exclusive)." }
+            ],
+            "description": "Text range within a resource."
+        },
+        {
+            "id": "ShorthandEntry",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Shorthand name." },
+                { "name": "value", "type": "string", "description": "Shorthand value." }
+            ]
+        },
+        {
+            "id": "CSSPropertyInfo",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "longhands", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Longhand property names." },
+                { "name": "values", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Supported values for this property." }
+            ]
+        },
+        {
+            "id": "CSSComputedStyleProperty",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Computed style property name." },
+                { "name": "value", "type": "string", "description": "Computed style property value." }
+            ]
+        },
+        {
+            "id": "CSSStyle",
+            "type": "object",
+            "properties": [
+                { "name": "styleId", "$ref": "CSSStyleId", "optional": true, "description": "The CSS style identifier (absent for attribute styles)." },
+                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSProperty" }, "description": "CSS properties in the style." },
+                { "name": "shorthandEntries", "type": "array", "items": { "$ref": "ShorthandEntry" }, "description": "Computed values for all shorthands found in the style." },
+                { "name": "cssText", "type": "string", "optional": true, "description": "Style declaration text (if available)." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Style declaration range in the enclosing stylesheet (if available)." },
+                { "name": "width", "type": "string", "optional": true, "description": "The effective \"width\" property value from this style." },
+                { "name": "height", "type": "string", "optional": true, "description": "The effective \"height\" property value from this style." }
+            ],
+            "description": "CSS style representation."
+        },
+        {
+            "id": "CSSPropertyStatus",
+	    "type": "string",
+            "enum": ["active", "inactive", "disabled", "style"],
+            "description": "The property status: \"active\" if the property is effective in the style, \"inactive\" if the property is overridden by a same-named property in this style later on, \"disabled\" if the property is disabled by the user, \"style\" (implied if absent) if the property is reported by the browser rather than by the CSS source parser."
+        },
+        {
+            "id": "CSSProperty",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "The property name." },
+                { "name": "value", "type": "string", "description": "The property value." },
+                { "name": "priority", "type": "string", "optional": true, "description": "The property priority (implies \"\" if absent)." },
+                { "name": "implicit", "type": "boolean", "optional": true, "description": "Whether the property is implicit (implies <code>false</code> if absent)." },
+                { "name": "text", "type": "string", "optional": true, "description": "The full property text as specified in the style." },
+                { "name": "parsedOk", "type": "boolean", "optional": true, "description": "Whether the property is understood by the browser (implies <code>true</code> if absent)." },
+                { "name": "status", "$ref": "CSSPropertyStatus", "optional": true, "description": "Whether the property is active or disabled." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "The entire property range in the enclosing style declaration (if available)." }
+            ],
+            "description": "CSS style effective visual dimensions and source offsets."
+        },
+        {
+            "id": "CSSMedia",
+            "type": "object",
+            "properties": [
+                { "name": "text", "type": "string", "description": "Media query text." },
+                { "name": "source", "type": "string", "enum": ["mediaRule", "importRule", "linkedSheet", "inlineSheet"], "description": "Source of the media query: \"mediaRule\" if specified by a @media rule, \"importRule\" if specified by an @import rule, \"linkedSheet\" if specified by a \"media\" attribute in a linked stylesheet's LINK tag, \"inlineSheet\" if specified by a \"media\" attribute in an inline stylesheet's STYLE tag." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the media query description." },
+                { "name": "sourceLine", "type": "integer", "optional": true, "description": "Line in the document containing the media query (not defined for the \"stylesheet\" source)." }
+            ],
+            "description": "CSS media query descriptor."
+        },
+        {
+            "id": "Region",
+            "type": "object",
+            "properties": [
+                { "name": "regionOverset", "type": "string", "enum": ["overset", "fit", "empty"], "description": "The \"overset\" attribute of a Named Flow." },
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The corresponding DOM node id." }
+            ],
+            "description": "This object represents a region that flows from a Named Flow."
+        },
+        {
+            "id": "NamedFlow",
+            "type": "object",
+            "properties": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "name", "type": "string", "description": "Named Flow identifier." },
+                { "name": "overset", "type": "boolean", "description": "The \"overset\" attribute of a Named Flow." },
+                { "name": "content", "type": "array", "items": { "$ref": "DOM.NodeId" }, "description": "An array of nodes that flow into the Named Flow." },
+                { "name": "regions", "type": "array", "items": { "$ref": "Region" }, "description": "An array of regions associated with the Named Flow." }
+            ],
+            "description": "This object represents a Named Flow."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables the CSS agent for the given page. Clients should not assume that the CSS agent has been enabled until the result of this command is received."
+        },
+        {
+            "name": "disable",
+            "description": "Disables the CSS agent for the given page."
+        },
+        {
+            "name": "getMatchedStylesForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" },
+                { "name": "includePseudo", "type": "boolean", "optional": true, "description": "Whether to include pseudo styles (default: true)." },
+                { "name": "includeInherited", "type": "boolean", "optional": true, "description": "Whether to include inherited styles (default: true)." }
+            ],
+            "returns": [
+                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "optional": true, "description": "CSS rules matching this node, from all applicable stylesheets." },
+                { "name": "pseudoElements", "type": "array", "items": { "$ref": "PseudoIdMatches" }, "optional": true, "description": "Pseudo style matches for this node." },
+                { "name": "inherited", "type": "array", "items": { "$ref": "InheritedStyleEntry" }, "optional": true, "description": "A chain of inherited styles (from the immediate node parent up to the DOM tree root)." }
+            ],
+            "description": "Returns requested styles for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getInlineStylesForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" }
+            ],
+            "returns": [
+                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "Inline style for the specified DOM node." },
+                { "name": "attributesStyle", "$ref": "CSSStyle", "optional": true, "description": "Attribute-defined element style (e.g. resulting from \"width=20 height=100%\")."}
+            ],
+            "description": "Returns the styles defined inline (explicitly in the \"style\" attribute and implicitly, using DOM attributes) for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getComputedStyleForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" }
+            ],
+            "returns": [
+                { "name": "computedStyle", "type": "array", "items": { "$ref": "CSSComputedStyleProperty" }, "description": "Computed style for the specified DOM node." }
+            ],
+            "description": "Returns the computed style for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getAllStyleSheets",
+            "returns": [
+                { "name": "headers", "type": "array", "items": { "$ref": "CSSStyleSheetHeader" }, "description": "Descriptor entries for all available stylesheets." }
+            ],
+            "description": "Returns metainfo entries for all known stylesheets."
+        },
+        {
+            "name": "getStyleSheet",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "returns": [
+                { "name": "styleSheet", "$ref": "CSSStyleSheetBody", "description": "Stylesheet contents for the specified <code>styleSheetId</code>." }
+            ],
+            "description": "Returns stylesheet data for the specified <code>styleSheetId</code>."
+        },
+        {
+            "name": "getStyleSheetText",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "returns": [
+                { "name": "text", "type": "string", "description": "The stylesheet text." }
+            ],
+            "description": "Returns the current textual content and the URL for a stylesheet."
+        },
+        {
+            "name": "setStyleSheetText",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" },
+                { "name": "text", "type": "string" }
+            ],
+            "description": "Sets the new stylesheet text, thereby invalidating all existing <code>CSSStyleId</code>'s and <code>CSSRuleId</code>'s contained by this stylesheet."
+        },
+        {
+            "name": "setStyleText",
+            "parameters": [
+                { "name": "styleId", "$ref": "CSSStyleId" },
+                { "name": "text", "type": "string" }
+            ],
+            "returns": [
+                { "name": "style", "$ref": "CSSStyle", "description": "The resulting style after the text modification." }
+            ],
+            "description": "Sets the new <code>text</code> for the respective style."
+        },
+        {
+            "name": "setRuleSelector",
+            "parameters": [
+                { "name": "ruleId", "$ref": "CSSRuleId" },
+                { "name": "selector", "type": "string" }
+            ],
+            "returns": [
+                { "name": "rule", "$ref": "CSSRule", "description": "The resulting rule after the selector modification." }
+            ],
+            "description": "Modifies the rule selector."
+        },
+        {
+            "name": "createStyleSheet",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame where the new \"inspector\" stylesheet should be created." }
+            ],
+            "returns": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the created \"inspector\" stylesheet." }
+            ],
+            "description": "Creates a new special \"inspector\" stylesheet in the frame with given <code>frameId</code>."
+        },
+        {
+            "name": "addRule",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" },
+                { "name": "selector", "type": "string" }
+            ],
+            "returns": [
+                { "name": "rule", "$ref": "CSSRule", "description": "The newly created rule." }
+            ],
+            "description": "Creates a new empty rule with the given <code>selector</code> in a stylesheet with given <code>styleSheetId</code>."
+        },
+        {
+            "name": "getSupportedCSSProperties",
+            "returns": [
+                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSPropertyInfo" }, "description": "Supported property metainfo." }
+            ],
+            "description": "Returns all supported CSS property names."
+        },
+        {
+            "name": "getSupportedSystemFontFamilyNames",
+            "returns": [
+                { "name": "fontFamilyNames", "type": "array", "items": { "type": "string" }, "description": "Supported system font families." }
+            ],
+            "description": "Returns all supported system font family names."
+        },
+        {
+            "name": "forcePseudoState",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The element id for which to force the pseudo state." },
+                { "name": "forcedPseudoClasses", "type": "array", "items": { "type": "string", "enum": ["active", "focus", "hover", "visited"] }, "description": "Element pseudo classes to force when computing the element's style." }
+            ],
+            "description": "Ensures that the given node will have specified pseudo-classes whenever its style is computed by the browser."
+        },
+        {
+            "name": "getNamedFlowCollection",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id for which to get the Named Flow Collection." }
+            ],
+            "returns": [
+                { "name": "namedFlows", "type": "array", "items": { "$ref": "NamedFlow" }, "description": "An array containing the Named Flows in the document." }
+            ],
+            "description": "Returns the Named Flows from the document."
+        }
+    ],
+    "events": [
+        {
+            "name": "mediaQueryResultChanged",
+            "description": "Fires whenever a MediaQuery result changes (for example, after a browser window has been resized.) The current implementation considers only viewport-dependent media features."
+        },
+        {
+            "name": "styleSheetChanged",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "description": "Fired whenever a stylesheet is changed as a result of the client operation."
+        },
+        {
+            "name": "styleSheetAdded",
+            "parameters": [
+                { "name": "header", "$ref": "CSSStyleSheetHeader", "description": "Added stylesheet metainfo." }
+            ],
+            "description": "Fired whenever an active document stylesheet is added."
+        },
+        {
+            "name": "styleSheetRemoved",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the removed stylesheet." }
+            ],
+            "description": "Fired whenever an active document stylesheet is removed."
+        },
+        {
+            "name": "namedFlowCreated",
+            "parameters": [
+                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The new Named Flow." }
+            ],
+            "description": "Fires when a Named Flow is created."
+        },
+        {
+            "name": "namedFlowRemoved",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Identifier of the removed Named Flow." }
+            ],
+            "description": "Fires when a Named Flow is removed: has no associated content nodes and regions."
+        },
+        {
+            "name": "regionOversetChanged",
+            "parameters": [
+                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The Named Flow containing the regions whose regionOverset values changed." }
+            ],
+            "description": "Fires if any of the regionOverset values changed in a Named Flow's region chain."
+        },
+        {
+            "name": "registeredNamedFlowContentElement",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was registered." },
+                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the registered content node." },
+                { "name": "nextContentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the element following the registered content node." }
+            ],
+            "description": "Fires when a Named Flow's has been registered with a new content node."
+        },
+        {
+            "name": "unregisteredNamedFlowContentElement",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was unregistered." },
+                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the unregistered content node." }
+            ],
+            "description": "Fires when a Named Flow's has been registered with a new content node."
+        }
+    ]
+}
+,
+{
+    "domain": "Console",
+    "description": "Console domain defines methods and events for interaction with the JavaScript console. Console collects messages created by means of the <a href='http://getfirebug.com/wiki/index.php/Console_API'>JavaScript Console API</a>. One needs to enable this domain using <code>enable</code> command in order to start receiving the console messages. Browser collects messages issued while console domain is not enabled as well and reports them using <code>messageAdded</code> notification upon enabling.",
+    "workerSupported": true,
+    "types": [
+        {
+            "id": "ConsoleMessage",
+            "type": "object",
+            "description": "Console message.",
+            "properties": [
+                { "name": "source", "type": "string", "enum": ["xml", "javascript", "network", "console-api", "storage", "appcache", "rendering", "css", "security", "content-blocker", "other"], "description": "Message source." },
+                { "name": "level", "type": "string", "enum": ["log", "info", "warning", "error", "debug"], "description": "Message severity." },
+                { "name": "text", "type": "string", "description": "Message text." },
+                { "name": "type", "type": "string", "optional": true, "enum": ["log", "dir", "dirxml", "table", "trace", "clear", "startGroup", "startGroupCollapsed", "endGroup", "assert", "timing", "profile", "profileEnd"], "description": "Console message type." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL of the message origin." },
+                { "name": "line", "type": "integer", "optional": true, "description": "Line number in the resource that generated this message." },
+                { "name": "column", "type": "integer", "optional": true, "description": "Column number on the line in the resource that generated this message." },
+                { "name": "repeatCount", "type": "integer", "optional": true, "description": "Repeat count for repeated messages." },
+                { "name": "parameters", "type": "array", "items": { "$ref": "Runtime.RemoteObject" }, "optional": true, "description": "Message parameters in case of the formatted message." },
+                { "name": "stackTrace", "type": "array", "items": { "$ref": "CallFrame" }, "optional": true, "description": "JavaScript stack trace for assertions and error messages." },
+                { "name": "networkRequestId", "$ref": "Network.RequestId", "optional": true, "description": "Identifier of the network request associated with this message." }
+            ]
+        },
+        {
+            "id": "CallFrame",
+            "type": "object",
+            "description": "Stack entry for console errors and assertions.",
+            "properties": [
+                { "name": "functionName", "type": "string", "description": "JavaScript function name." },
+                { "name": "url", "type": "string", "description": "JavaScript script name or url." },
+                { "name": "scriptId", "$ref": "Debugger.ScriptId", "description": "Script identifier." },
+                { "name": "lineNumber", "type": "integer", "description": "JavaScript script line number." },
+                { "name": "columnNumber", "type": "integer", "description": "JavaScript script column number." }
+            ]
+        },
+        {
+            "id": "StackTrace",
+            "description": "Call frames for async function calls, console assertions, and error messages.",
+            "type": "object",
+            "properties": [
+                { "name": "callFrames", "type": "array", "items": { "$ref": "CallFrame" } },
+                { "name": "topCallFrameIsBoundary", "type": "boolean", "optional": true, "description": "Whether the first item in <code>callFrames</code> is the native function that scheduled the asynchronous operation (e.g. setTimeout)." },
+                { "name": "truncated", "type": "boolean", "optional": true, "description": "Whether one or more frames have been truncated from the bottom of the stack." },
+                { "name": "parentStackTrace", "$ref": "StackTrace", "optional": true, "description": "Parent StackTrace." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables console domain, sends the messages collected so far to the client by means of the <code>messageAdded</code> notification."
+        },
+        {
+            "name": "disable",
+            "description": "Disables console domain, prevents further console messages from being reported to the client."
+        },
+        {
+            "name": "clearMessages",
+            "description": "Clears console messages collected in the browser."
+        },
+        {
+            "name": "setMonitoringXHREnabled",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "Monitoring enabled state." }
+            ],
+            "description": "Toggles monitoring of XMLHttpRequest. If <code>true</code>, console will receive messages upon each XHR issued."
+        },
+        {
+            "name": "addInspectedNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "DOM node id to be accessible by means of $0 command line API." }
+            ],
+            "description": "Enables console to refer to the node with given id via $0 (see Command Line API for more details)."
+        }
+    ],
+    "events": [
+        {
+            "name": "messageAdded",
+            "parameters": [
+                { "name": "message", "$ref": "ConsoleMessage", "description": "Console message that has been added." }
+            ],
+            "description": "Issued when new console message is added."
+        },
+        {
+            "name": "messageRepeatCountUpdated",
+            "parameters": [
+                { "name": "count", "type": "integer", "description": "New repeat count value." }
+            ],
+            "description": "Issued when subsequent message(s) are equal to the previous one(s)."
+        },
+        {
+            "name": "messagesCleared",
+            "description": "Issued when console is cleared. This happens either upon <code>clearMessages</code> command or after page navigation."
+        },
+        {
+            "name": "heapSnapshot",
+            "description": "Issued from console.takeHeapSnapshot.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "snapshotData", "$ref": "Heap.HeapSnapshotData", "description": "Snapshot at the end of tracking." },
+                { "name": "title", "type": "string", "optional": true, "description": "Optional title provided to console.takeHeapSnapshot." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "DOM",
+    "description": "This domain exposes DOM read/write operations. Each DOM Node is represented with its mirror object that has an <code>id</code>. This <code>id</code> can be used to get additional information on the Node, resolve it into the JavaScript object wrapper, etc. It is important that client receives DOM events only for the nodes that are known to the client. Backend keeps track of the nodes that were sent to the client and never sends the same node twice. It is client's responsibility to collect information about the nodes that were sent to the client.<p>Note that <code>iframe</code> owner elements will return corresponding document elements as their child nodes.</p>",
+    "availability": "web",
+    "types": [
+        {
+            "id": "NodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier."
+        },
+        {
+            "id": "BackendNodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier used to reference a node that may not have been pushed to the front-end."
+        },
+        {
+            "id": "PseudoType",
+            "type": "string",
+            "enum": ["before", "after"],
+            "description": "Pseudo element type."
+        },
+        {
+            "id": "ShadowRootType",
+            "type": "string",
+            "enum": ["user-agent", "open", "closed"],
+            "description": "Shadow root type."
+        },
+        {
+            "id": "CustomElementState",
+            "type": "string",
+            "enum": ["builtin", "custom", "waiting", "failed"],
+            "description": "Custom element state."
+        },
+        {
+            "id": "LiveRegionRelevant",
+            "type": "string",
+            "enum": ["additions", "removals", "text"],
+            "description": "Token values of @aria-relevant attribute."
+        },
+        {
+            "id": "Node",
+            "type": "object",
+            "properties": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Node identifier that is passed into the rest of the DOM messages as the <code>nodeId</code>. Backend will only push node with given <code>id</code> once. It is aware of all requested nodes and will only fire DOM events for nodes known to the client." },
+                { "name": "nodeType", "type": "integer", "description": "<code>Node</code>'s nodeType." },
+                { "name": "nodeName", "type": "string", "description": "<code>Node</code>'s nodeName." },
+                { "name": "localName", "type": "string", "description": "<code>Node</code>'s localName." },
+                { "name": "nodeValue", "type": "string", "description": "<code>Node</code>'s nodeValue." },
+                { "name": "childNodeCount", "type": "integer", "optional": true, "description": "Child count for <code>Container</code> nodes." },
+                { "name": "children", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Child nodes of this node when requested with children." },
+                { "name": "attributes", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Attributes of the <code>Element</code> node in the form of flat array <code>[name1, value1, name2, value2]</code>." },
+                { "name": "documentURL", "type": "string", "optional": true, "description": "Document URL that <code>Document</code> or <code>FrameOwner</code> node points to." },
+                { "name": "baseURL", "type": "string", "optional": true, "description": "Base URL that <code>Document</code> or <code>FrameOwner</code> node uses for URL completion." },
+                { "name": "publicId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s publicId." },
+                { "name": "systemId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s systemId." },
+                { "name": "xmlVersion", "type": "string", "optional": true, "description": "<code>Document</code>'s XML version in case of XML documents." },
+                { "name": "name", "type": "string", "optional": true, "description": "<code>Attr</code>'s name." },
+                { "name": "value", "type": "string", "optional": true, "description": "<code>Attr</code>'s value." },
+                { "name": "pseudoType", "$ref": "PseudoType", "optional": true, "description": "Pseudo element type for this node." },
+                { "name": "shadowRootType", "$ref": "ShadowRootType", "optional": true, "description": "Shadow root type." },
+                { "name": "customElementState", "$ref": "CustomElementState", "optional": true, "description": "Custom element state." },
+                { "name": "frameId", "$ref": "Network.FrameId", "optional": true, "description": "Frame ID for frame owner elements." },
+                { "name": "contentDocument", "$ref": "Node", "optional": true, "description": "Content document for frame owner elements." },
+                { "name": "shadowRoots", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Shadow root list for given element host." },
+                { "name": "templateContent", "$ref": "Node", "optional": true, "description": "Content document fragment for template elements" },
+                { "name": "pseudoElements", "type": "array", "items": { "$ref": "Node" }, "optional": true, "description": "Pseudo elements associated with this node." },
+                { "name": "role", "type": "string", "optional": true, "description": "Computed value for first recognized role token, default role per element, or overridden role." },
+                { "name": "contentSecurityPolicyHash", "type": "string", "optional": true, "description": "Computed SHA-256 Content Security Policy hash source for given element." }
+            ],
+            "description": "DOM interaction is implemented in terms of mirror objects that represent the actual DOM nodes. DOMNode is a base node mirror type."
+        },
+        {
+            "id": "EventListener",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "description": "<code>EventListener</code>'s type." },
+                { "name": "useCapture", "type": "boolean", "description": "<code>EventListener</code>'s useCapture." },
+                { "name": "isAttribute", "type": "boolean", "description": "<code>EventListener</code>'s isAttribute." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                { "name": "handlerBody", "type": "string", "description": "Event handler function body." },
+                { "name": "location", "$ref": "Debugger.Location", "optional": true, "description": "Handler code location." },
+                { "name": "sourceName", "type": "string", "optional": true, "description": "Source script URL." },
+                { "name": "handler", "$ref": "Runtime.RemoteObject", "optional": true, "description": "Event handler function value." }
+            ],
+            "description": "A structure holding event listener properties."
+        },
+        {
+            "id": "AccessibilityProperties",
+            "description": "A structure holding accessibility properties.",
+            "type": "object",
+            "properties": [
+                { "name": "activeDescendantNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of the accessibility object referenced by aria-activedescendant." },
+                { "name": "busy", "type": "boolean", "optional": true, "description": "Value of @aria-busy on current or ancestor node." },
+                { "name": "checked", "type": "string", "optional": true, "enum": ["true", "false", "mixed"], "description": "Checked state of certain form controls." },
+                { "name": "childNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of the accessibility tree children if available." },
+                { "name": "controlledNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-controls." },
+                { "name": "current", "type": "string", "optional": true, "enum": ["true", "false", "page", "step", "location", "date", "time"], "description": "Current item within a container or set of related elements." },
+                { "name": "disabled", "type": "boolean", "optional": true, "description": "Disabled state of form controls." },
+                { "name": "headingLevel", "type": "number", "optional": true, "description": "Heading level of a heading element." },
+                { "name": "hierarchyLevel", "type": "number", "optional": true, "description": "The hierarchical level of an element." },
+                { "name": "isPopUpButton", "type": "boolean", "optional": true, "description": "Whether an element is a popup button." },
+                { "name": "exists", "type": "boolean", "description": "Indicates whether there is an existing AX object for the DOM node. If this is false, all the other properties will be default values." },
+                { "name": "expanded", "type": "boolean", "optional": true, "description": "Expanded state." },
+                { "name": "flowedNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-flowto." },
+                { "name": "focused", "type": "boolean", "optional": true, "description": "Focused state. Only defined on focusable elements." },
+                { "name": "ignored", "type": "boolean", "optional": true, "description": "Indicates whether the accessibility of the associated AX object node is ignored, whether heuristically or explicitly." },
+                { "name": "ignoredByDefault", "type": "boolean", "optional": true, "description": "State indicating whether the accessibility of the associated AX object node is ignored by default for node type." },
+                { "name": "invalid", "type": "string", "optional": true, "enum": ["true", "false", "grammar", "spelling"], "description": "Invalid status of form controls." },
+                { "name": "hidden", "type": "boolean", "optional": true, "description": "Hidden state. True if node or an ancestor is hidden via CSS or explicit @aria-hidden, to clarify why the element is ignored." },
+                { "name": "label", "type": "string", "description": "Computed label value for the node, sometimes calculated by referencing other nodes." },
+                { "name": "liveRegionAtomic", "type": "boolean", "optional": true, "description": "Value of @aria-atomic." },
+                { "name": "liveRegionRelevant", "type": "array", "items": { "type": "string" }, "optional": true, "description": "Token value(s) of element's @aria-relevant attribute. Array of string values matching $ref LiveRegionRelevant. FIXME: Enum values blocked by http://webkit.org/b/133711" },
+                { "name": "liveRegionStatus", "type": "string", "optional": true, "enum": ["assertive", "polite", "off"], "description": "Value of element's @aria-live attribute." },
+                { "name": "mouseEventNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of node or closest ancestor node that has a mousedown, mouseup, or click event handler." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                { "name": "ownedNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-owns." },
+                { "name": "parentNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of the accessibility tree parent object if available." },
+                { "name": "pressed", "type": "boolean", "optional": true, "description": "Pressed state for toggle buttons." },
+                { "name": "readonly", "type": "boolean", "optional": true, "description": "Readonly state of text controls." },
+                { "name": "required", "type": "boolean", "optional": true, "description": "Required state of form controls." },
+                { "name": "role", "type": "string", "description": "Computed value for first recognized role token, default role per element, or overridden role." },
+                { "name": "selected", "type": "boolean", "optional": true, "description": "Selected state of certain form controls." },
+                { "name": "selectedChildNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any children marked as selected." }
+            ]
+        },
+        {
+            "id": "RGBAColor",
+            "type": "object",
+            "properties": [
+                { "name": "r", "type": "integer", "description": "The red component, in the [0-255] range." },
+                { "name": "g", "type": "integer", "description": "The green component, in the [0-255] range." },
+                { "name": "b", "type": "integer", "description": "The blue component, in the [0-255] range." },
+                { "name": "a", "type": "number", "optional": true, "description": "The alpha component, in the [0-1] range (default: 1)." }
+            ],
+            "description": "A structure holding an RGBA color."
+        },
+        {
+            "id": "Quad",
+            "type": "array",
+            "items": { "type": "number" },
+            "minItems": 8,
+            "maxItems": 8,
+            "description": "An array of quad vertices, x immediately followed by y for each point, points clock-wise."
+        },
+        {
+            "id": "HighlightConfig",
+            "type": "object",
+            "properties": [
+                { "name": "showInfo", "type": "boolean", "optional": true, "description": "Whether the node info tooltip should be shown (default: false)." },
+                { "name": "contentColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                { "name": "paddingColor", "$ref": "RGBAColor", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
+                { "name": "borderColor", "$ref": "RGBAColor", "optional": true, "description": "The border highlight fill color (default: transparent)." },
+                { "name": "marginColor", "$ref": "RGBAColor", "optional": true, "description": "The margin highlight fill color (default: transparent)." }
+            ],
+            "description": "Configuration data for the highlighting of page elements."
+        }
+    ],
+    "commands": [
+        {
+            "name": "getDocument",
+            "returns": [
+                { "name": "root", "$ref": "Node", "description": "Resulting node." }
+            ],
+            "description": "Returns the root DOM node to the caller."
+        },
+        {
+            "name": "requestChildNodes",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get children for." },
+                { "name": "depth", "type": "integer", "optional": true, "description": "The maximum depth at which children should be retrieved, defaults to 1. Use -1 for the entire subtree or provide an integer larger than 0." }
+            ],
+            "description": "Requests that children of the node with given id are returned to the caller in form of <code>setChildNodes</code> events where not only immediate children are retrieved, but all children down to the specified depth."
+        },
+        {
+            "name": "querySelector",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                { "name": "selector", "type": "string", "description": "Selector string." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Query selector result." }
+            ],
+            "description": "Executes <code>querySelector</code> on a given node."
+        },
+        {
+            "name": "querySelectorAll",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                { "name": "selector", "type": "string", "description": "Selector string." }
+            ],
+            "returns": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Query selector result." }
+            ],
+            "description": "Executes <code>querySelectorAll</code> on a given node."
+        },
+        {
+            "name": "setNodeName",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set name for." },
+                { "name": "name", "type": "string", "description": "New node's name." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "New node's id." }
+            ],
+            "description": "Sets node name for a node with given id."
+        },
+        {
+            "name": "setNodeValue",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set value for." },
+                { "name": "value", "type": "string", "description": "New node's value." }
+            ],
+            "description": "Sets node value for a node with given id."
+        },
+        {
+            "name": "removeNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to remove." }
+            ],
+            "description": "Removes node with given id."
+        },
+        {
+            "name": "setAttributeValue",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attribute for." },
+                { "name": "name", "type": "string", "description": "Attribute name." },
+                { "name": "value", "type": "string", "description": "Attribute value." }
+            ],
+            "description": "Sets attribute for an element with given id."
+        },
+        {
+            "name": "setAttributesAsText",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attributes for." },
+                { "name": "text", "type": "string", "description": "Text with a number of attributes. Will parse this text using HTML parser." },
+                { "name": "name", "type": "string", "optional": true, "description": "Attribute name to replace with new attributes derived from text in case text parsed successfully." }
+            ],
+            "description": "Sets attributes on element with given id. This method is useful when user edits some existing attribute value and types in several attribute name/value pairs."
+        },
+        {
+            "name": "removeAttribute",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to remove attribute from." },
+                { "name": "name", "type": "string", "description": "Name of the attribute to remove." }
+            ],
+            "description": "Removes attribute with given name from an element with given id."
+        },
+        {
+            "name": "getEventListenersForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get listeners for." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name for handler value. Handler value is not returned without this parameter specified." }
+            ],
+            "returns": [
+                { "name": "listeners", "type": "array", "items": { "$ref": "EventListener"}, "description": "Array of relevant listeners." }
+            ],
+            "description": "Returns event listeners relevant to the node."
+        },
+        {
+            "name": "getAccessibilityPropertiesForNode",
+            "description": "Returns a dictionary of accessibility properties for the node.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for which to get accessibility properties." }
+            ],
+            "returns": [
+                { "name": "properties", "$ref": "AccessibilityProperties", "description": "Dictionary of relevant accessibility properties." }
+            ]
+        },
+        {
+            "name": "getOuterHTML",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get markup for." }
+            ],
+            "returns": [
+                { "name": "outerHTML", "type": "string", "description": "Outer HTML markup." }
+            ],
+            "description": "Returns node's HTML markup."
+        },
+        {
+            "name": "setOuterHTML",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set markup for." },
+                { "name": "outerHTML", "type": "string", "description": "Outer HTML markup to set." }
+            ],
+            "description": "Sets node HTML markup, returns new node id."
+        },
+        {
+            "name": "performSearch",
+            "parameters": [
+                { "name": "query", "type": "string", "description": "Plain text or query selector or XPath search query." },
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Ids of nodes to use as starting points for the search." }
+            ],
+            "returns": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                { "name": "resultCount", "type": "integer", "description": "Number of search results." }
+            ],
+            "description": "Searches for a given string in the DOM tree. Use <code>getSearchResults</code> to access search results or <code>cancelSearch</code> to end this search session."
+        },
+        {
+            "name": "getSearchResults",
+            "parameters": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                { "name": "fromIndex", "type": "integer", "description": "Start index of the search result to be returned." },
+                { "name": "toIndex", "type": "integer", "description": "End index of the search result to be returned." }
+            ],
+            "returns": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the search result nodes." }
+            ],
+            "description": "Returns search results from given <code>fromIndex</code> to given <code>toIndex</code> from the sarch with the given identifier."
+        },
+        {
+            "name": "discardSearchResults",
+            "parameters": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." }
+            ],
+            "description": "Discards search results from the session with the given id. <code>getSearchResults</code> should no longer be called for that search."
+        },
+        {
+            "name": "requestNode",
+            "parameters": [
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "description": "JavaScript object id to convert into node." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Node id for given object." }
+            ],
+            "description": "Requests that the node is sent to the caller given the JavaScript node object reference. All nodes that form the path from the node to the root are also sent to the client as a series of <code>setChildNodes</code> notifications."
+        },
+        {
+            "name": "setInspectModeEnabled",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "True to enable inspection mode, false to disable it." },
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "optional": true, "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>." }
+            ],
+            "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspect' command upon element selection."
+        },
+        {
+            "name": "highlightRect",
+            "parameters": [
+                { "name": "x", "type": "integer", "description": "X coordinate" },
+                { "name": "y", "type": "integer", "description": "Y coordinate" },
+                { "name": "width", "type": "integer", "description": "Rectangle width" },
+                { "name": "height", "type": "integer", "description": "Rectangle height" },
+                { "name": "color", "$ref": "RGBAColor", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                { "name": "outlineColor", "$ref": "RGBAColor", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+            ],
+            "description": "Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport."
+        },
+        {
+            "name": "highlightQuad",
+            "parameters": [
+                { "name": "quad", "$ref": "Quad", "description": "Quad to highlight" },
+                { "name": "color", "$ref": "RGBAColor", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                { "name": "outlineColor", "$ref": "RGBAColor", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+            ],
+            "description": "Highlights given quad. Coordinates are absolute with respect to the main frame viewport."
+        },
+        {
+            "name": "highlightSelector",
+            "parameters": [
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
+                { "name": "selectorString", "type": "string", "description": "A CSS selector for finding matching nodes to highlight." },
+                { "name": "frameId", "type": "string", "optional": true, "description": "Identifier of the frame which will be searched using the selector.  If not provided, the main frame will be used." }
+            ],
+            "description": "Highlights all DOM nodes that match a given selector. A string containing a CSS selector must be specified."
+        },
+        {
+            "name": "highlightNode",
+            "parameters": [
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
+                { "name": "nodeId", "$ref": "NodeId", "optional": true, "description": "Identifier of the node to highlight." },
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "optional": true, "description": "JavaScript object id of the node to be highlighted." }
+            ],
+            "description": "Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified."
+        },
+        {
+            "name": "hideHighlight",
+            "description": "Hides DOM node highlight."
+        },
+        {
+            "name": "highlightFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame to highlight." },
+                { "name": "contentColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                { "name": "contentOutlineColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight outline color (default: transparent)." }
+            ],
+            "description": "Highlights owner element of the frame with given id."
+        },
+        {
+            "name": "pushNodeByPathToFrontend",
+            "parameters": [
+                { "name": "path", "type": "string", "description": "Path to node in the proprietary format." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for given path." }
+            ],
+            "description": "Requests that the node is sent to the caller given its path. // FIXME, use XPath"
+        },
+        {
+            "name": "pushNodeByBackendIdToFrontend",
+            "parameters": [
+                { "name": "backendNodeId", "$ref": "BackendNodeId", "description": "The backend node id of the node." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "The pushed node's id." }
+            ],
+            "description": "Requests that the node is sent to the caller given its backend node id."
+        },
+        {
+            "name": "releaseBackendNodeIds",
+            "parameters": [
+                { "name": "nodeGroup", "type": "string", "description": "The backend node ids group name." }
+            ],
+            "description": "Requests that group of <code>BackendNodeIds</code> is released."
+        },
+        {
+            "name": "resolveNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to resolve." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." }
+            ],
+            "returns": [
+                { "name": "object", "$ref": "Runtime.RemoteObject", "description": "JavaScript object wrapper for given node." }
+            ],
+            "description": "Resolves JavaScript node object for given node id."
+        },
+        {
+            "name": "getAttributes",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to retrieve attibutes for." }
+            ],
+            "returns": [
+                { "name": "attributes", "type": "array", "items": { "type": "string" }, "description": "An interleaved array of node attribute names and values." }
+            ],
+            "description": "Returns attributes for the specified node."
+        },
+        {
+            "name": "moveTo",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to drop." },
+                { "name": "targetNodeId", "$ref": "NodeId", "description": "Id of the element to drop into." },
+                { "name": "insertBeforeNodeId", "$ref": "NodeId", "optional": true, "description": "Drop node before given one." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "New id of the moved node." }
+            ],
+            "description": "Moves node into the new container, places it before the given anchor."
+        },
+        {
+            "name": "undo",
+            "description": "Undoes the last performed action."
+        },
+        {
+            "name": "redo",
+            "description": "Re-does the last undone action."
+        },
+        {
+            "name": "markUndoableState",
+            "description": "Marks last undoable state."
+        },
+        {
+            "name": "focus",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to focus." }
+            ],
+            "description": "Focuses the given element."
+        }
+    ],
+    "events": [
+        {
+            "name": "documentUpdated",
+            "description": "Fired when <code>Document</code> has been totally updated. Node ids are no longer valid."
+        },
+        {
+            "name": "setChildNodes",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Parent node id to populate with children." },
+                { "name": "nodes", "type": "array", "items": { "$ref": "Node"}, "description": "Child nodes array." }
+            ],
+            "description": "Fired when backend wants to provide client with the missing DOM structure. This happens upon most of the calls requesting node ids."
+        },
+        {
+            "name": "attributeModified",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "name", "type": "string", "description": "Attribute name." },
+                { "name": "value", "type": "string", "description": "Attribute value." }
+            ],
+            "description": "Fired when <code>Element</code>'s attribute is modified."
+        },
+        {
+            "name": "attributeRemoved",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "name", "type": "string", "description": "A ttribute name." }
+            ],
+            "description": "Fired when <code>Element</code>'s attribute is removed."
+        },
+        {
+            "name": "inlineStyleInvalidated",
+            "parameters": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the nodes for which the inline styles have been invalidated." }
+            ],
+            "description": "Fired when <code>Element</code>'s inline style is modified via a CSS property modification."
+        },
+        {
+            "name": "characterDataModified",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "characterData", "type": "string", "description": "New text value." }
+            ],
+            "description": "Mirrors <code>DOMCharacterDataModified</code> event."
+        },
+        {
+            "name": "childNodeCountUpdated",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "childNodeCount", "type": "integer", "description": "New node count." }
+            ],
+            "description": "Fired when <code>Container</code>'s child node count has changed."
+        },
+        {
+            "name": "childNodeInserted",
+            "parameters": [
+                { "name": "parentNodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "previousNodeId", "$ref": "NodeId", "description": "If of the previous siblint." },
+                { "name": "node", "$ref": "Node", "description": "Inserted node data." }
+            ],
+            "description": "Mirrors <code>DOMNodeInserted</code> event."
+        },
+        {
+            "name": "childNodeRemoved",
+            "parameters": [
+                { "name": "parentNodeId", "$ref": "NodeId", "description": "Parent id." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has been removed." }
+            ],
+            "description": "Mirrors <code>DOMNodeRemoved</code> event."
+        },
+        {
+            "name": "shadowRootPushed",
+            "parameters": [
+                { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                { "name": "root", "$ref": "Node", "description": "Shadow root." }
+            ],
+            "description": "Called when shadow root is pushed into the element."
+        },
+        {
+            "name": "shadowRootPopped",
+            "parameters": [
+                { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                { "name": "rootId", "$ref": "NodeId", "description": "Shadow root id." }
+            ],
+            "description": "Called when shadow root is popped from the element."
+        },
+        {
+            "name": "customElementStateChanged",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Element id." },
+                { "name": "customElementState", "$ref": "CustomElementState", "description": "Custom element state." }
+            ],
+            "description": "Called when the custom element state is changed."
+        },
+        {
+            "name": "pseudoElementAdded",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Pseudo element's parent element id." },
+                { "name": "pseudoElement", "$ref": "Node", "description": "The added pseudo element." }
+            ],
+            "description": "Called when a pseudo element is added to an element."
+        },
+        {
+            "name": "pseudoElementRemoved",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Pseudo element's parent element id." },
+                { "name": "pseudoElementId", "$ref": "NodeId", "description": "The removed pseudo element id." }
+            ],
+            "description": "Called when a pseudo element is removed from an element."
+        }
+    ]
+}
+,
+{
+    "domain": "DOMDebugger",
+    "description": "DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DOMBreakpointType",
+            "type": "string",
+            "enum": ["subtree-modified", "attribute-modified", "node-removed"],
+            "description": "DOM breakpoint type."
+        }
+    ],
+    "commands": [
+        {
+            "name": "setDOMBreakpoint",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to set breakpoint on." },
+                { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the operation to stop upon." }
+            ],
+            "description": "Sets breakpoint on particular operation with DOM."
+        },
+        {
+            "name": "removeDOMBreakpoint",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to remove breakpoint from." },
+                { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the breakpoint to remove." }
+            ],
+            "description": "Removes DOM breakpoint that was set using <code>setDOMBreakpoint</code>."
+        },
+        {
+            "name": "setEventListenerBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "DOM Event name to stop on (any DOM event will do)." }
+            ],
+            "description": "Sets breakpoint on particular DOM event."
+        },
+        {
+            "name": "removeEventListenerBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Event name." }
+            ],
+            "description": "Removes breakpoint on particular DOM event."
+        },
+        {
+            "name": "setInstrumentationBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+            ],
+            "description": "Sets breakpoint on particular native event."
+        },
+        {
+            "name": "removeInstrumentationBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+            ],
+            "description": "Sets breakpoint on particular native event."
+        },
+        {
+            "name": "setXHRBreakpoint",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "Resource URL substring. All XHRs having this substring in the URL will get stopped upon." }
+            ],
+            "description": "Sets breakpoint on XMLHttpRequest."
+        },
+        {
+            "name": "removeXHRBreakpoint",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "Resource URL substring." }
+            ],
+            "description": "Removes breakpoint from XMLHttpRequest."
+        }
+    ]
+}
+,
+{
+    "domain": "DOMStorage",
+    "description": "Query and modify DOM storage.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "StorageId",
+            "type": "object",
+            "description": "DOM Storage identifier.",
+            "properties": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin for the storage." },
+                { "name": "isLocalStorage", "type": "boolean", "description": "Whether the storage is local storage (not session storage)." }
+            ]
+        },
+        {
+            "id": "Item",
+            "type": "array",
+            "description": "DOM Storage item.",
+            "items": { "type": "string" }
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables storage tracking, storage events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables storage tracking, prevents storage events from being sent to the client."
+        },
+        {
+            "name": "getDOMStorageItems",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" }
+            ],
+            "returns": [
+                { "name": "entries", "type": "array", "items": { "$ref": "Item" } }
+            ]
+        },
+        {
+            "name": "setDOMStorageItem",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "value", "type": "string" }
+            ]
+        },
+        {
+            "name": "removeDOMStorageItem",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "domStorageItemsCleared",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" }
+            ]
+        },
+        {
+            "name": "domStorageItemRemoved",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" }
+            ]
+        },
+        {
+            "name": "domStorageItemAdded",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "newValue", "type": "string" }
+            ]
+        },
+        {
+            "name": "domStorageItemUpdated",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "oldValue", "type": "string" },
+                { "name": "newValue", "type": "string" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Database",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DatabaseId",
+            "type": "string",
+            "description": "Unique identifier of Database object."
+        },
+        {
+            "id": "Database",
+            "type": "object",
+            "description": "Database object.",
+            "properties": [
+                { "name": "id", "$ref": "DatabaseId", "description": "Database ID." },
+                { "name": "domain", "type": "string", "description": "Database domain." },
+                { "name": "name", "type": "string", "description": "Database name." },
+                { "name": "version", "type": "string", "description": "Database version." }
+            ]
+        },
+        {
+            "id": "Error",
+            "type": "object",
+            "description": "Database error.",
+            "properties": [
+                { "name": "message", "type": "string", "description": "Error message." },
+                { "name": "code", "type": "integer", "description": "Error code." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables database tracking, database events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables database tracking, prevents database events from being sent to the client."
+        },
+        {
+            "name": "getDatabaseTableNames",
+            "parameters": [
+                { "name": "databaseId", "$ref": "DatabaseId" }
+            ],
+            "returns": [
+                { "name": "tableNames", "type": "array", "items": { "type": "string" } }
+            ]
+        },
+        {
+            "name": "executeSQL",
+            "async": true,
+            "parameters": [
+                { "name": "databaseId", "$ref": "DatabaseId" },
+                { "name": "query", "type": "string" }
+            ],
+            "returns": [
+                { "name": "columnNames", "type": "array", "optional": true, "items": { "type": "string" } },
+                { "name": "values", "type": "array", "optional": true, "items": { "type": "any" }},
+                { "name": "sqlError", "$ref": "Error", "optional": true }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "addDatabase",
+            "parameters": [
+                { "name": "database", "$ref": "Database" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Debugger",
+    "description": "Debugger domain exposes JavaScript debugging capabilities. It allows setting and removing breakpoints, stepping through execution, exploring stack traces, etc.",
+    "workerSupported": true,
+    "types": [
+        {
+            "id": "BreakpointId",
+            "type": "string",
+            "description": "Breakpoint identifier."
+        },
+        {
+            "id": "BreakpointActionIdentifier",
+            "type": "integer",
+            "description": "Breakpoint action identifier."
+        },
+        {
+            "id": "ScriptId",
+            "type": "string",
+            "description": "Unique script identifier."
+        },
+        {
+            "id": "CallFrameId",
+            "type": "string",
+            "description": "Call frame identifier."
+        },
+        {
+            "id": "Location",
+            "type": "object",
+            "properties": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Script identifier as reported in the <code>Debugger.scriptParsed</code>." },
+                { "name": "lineNumber", "type": "integer", "description": "Line number in the script." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Column number in the script." }
+            ],
+            "description": "Location in the source code."
+        },
+        {
+            "id": "BreakpointAction",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["log", "evaluate", "sound", "probe"], "description": "Different kinds of breakpoint actions." },
+                { "name": "data", "type": "string", "optional": true, "description": "Data associated with this breakpoint type (e.g. for type \"eval\" this is the JavaScript string to evalulate)." },
+                { "name": "id", "$ref": "BreakpointActionIdentifier", "optional": true, "description": "A frontend-assigned identifier for this breakpoint action." }
+            ],
+            "description": "Action to perform when a breakpoint is triggered."
+        },
+        {
+            "id": "BreakpointOptions",
+            "type": "object",
+            "properties": [
+                { "name": "condition", "type": "string", "optional": true, "description": "Expression to use as a breakpoint condition. When specified, debugger will only stop on the breakpoint if this expression evaluates to true." },
+                { "name": "actions", "type": "array", "optional": true, "items": { "$ref": "BreakpointAction" }, "description": "Actions to perform automatically when the breakpoint is triggered." },
+                { "name": "autoContinue", "type": "boolean", "optional": true, "description": "Automatically continue after hitting this breakpoint and running actions." },
+                { "name": "ignoreCount", "type": "integer", "optional": true, "description": "Number of times to ignore this breakpoint, before stopping on the breakpoint and running actions." }
+            ],
+            "description": "Extra options that modify breakpoint behavior."
+        },
+        {
+            "id": "FunctionDetails",
+            "type": "object",
+            "properties": [
+                { "name": "location", "$ref": "Location", "description": "Location of the function." },
+                { "name": "name", "type": "string", "optional": true, "description": "Name of the function. Not present for anonymous functions." },
+                { "name": "displayName", "type": "string", "optional": true, "description": "Display name of the function(specified in 'displayName' property on the function object)." },
+                { "name": "scopeChain", "type": "array", "optional": true, "items": { "$ref": "Scope" }, "description": "Scope chain for this closure." }
+            ],
+            "description": "Information about the function."
+        },
+        {
+            "id": "CallFrame",
+            "type": "object",
+            "properties": [
+                { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier. This identifier is only valid while the virtual machine is paused." },
+                { "name": "functionName", "type": "string", "description": "Name of the JavaScript function called on this call frame." },
+                { "name": "location", "$ref": "Location", "description": "Location in the source code." },
+                { "name": "scopeChain", "type": "array", "items": { "$ref": "Scope" }, "description": "Scope chain for this call frame." },
+                { "name": "this", "$ref": "Runtime.RemoteObject", "description": "<code>this</code> object for this call frame." },
+                { "name": "isTailDeleted", "type": "boolean", "description": "Is the current frame tail deleted from a tail call." }
+            ],
+            "description": "JavaScript call frame. Array of call frames form the call stack."
+        },
+        {
+            "id": "Scope",
+            "type": "object",
+            "properties": [
+                { "name": "object", "$ref": "Runtime.RemoteObject", "description": "Object representing the scope. For <code>global</code> and <code>with</code> scopes it represents the actual object; for the rest of the scopes, it is artificial transient object enumerating scope variables as its properties." },
+                { "name": "type", "type": "string", "enum": ["global", "with", "closure", "catch", "functionName", "globalLexicalEnvironment", "nestedLexical"], "description": "Scope type." },
+                { "name": "name", "type": "string", "optional": true, "description": "Name associated with the scope." },
+                { "name": "location", "$ref": "Location", "optional": true, "description": "Location if available of the scope definition." },
+                { "name": "empty", "type": "boolean", "optional": true, "description": "Whether the scope has any variables." }
+            ],
+            "description": "Scope description."
+        },
+        {
+            "id": "ProbeSample",
+            "description": "A sample collected by evaluating a probe breakpoint action.",
+            "type": "object",
+            "properties": [
+                { "name": "probeId", "$ref": "BreakpointActionIdentifier", "description": "Identifier of the probe breakpoint action that created the sample." },
+                { "name": "sampleId", "type": "integer", "description": "Unique identifier for this sample." },
+                { "name": "batchId", "type": "integer", "description": "A batch identifier which is the same for all samples taken at the same breakpoint hit." },
+                { "name": "timestamp", "type": "number", "description": "Timestamp of when the sample was taken." },
+                { "name": "payload", "$ref": "Runtime.RemoteObject", "description": "Contents of the sample." }
+            ]
+        },
+        {
+            "id": "AssertPauseReason",
+            "description": "The pause reason auxiliary data when paused because of an assertion.",
+            "type": "object",
+            "properties": [
+                { "name": "message", "type": "string", "optional": true, "description": "The console.assert message string if provided." }
+            ]
+        },
+        {
+            "id": "BreakpointPauseReason",
+            "description": "The pause reason auxiliary data when paused because of hitting a breakpoint.",
+            "type": "object",
+            "properties": [
+                { "name": "breakpointId", "type": "string", "description": "The identifier of the breakpoint causing the pause." }
+            ]
+        },
+        {
+            "id": "CSPViolationPauseReason",
+            "description": "The pause reason auxiliary data when paused because of a Content Security Policy directive.",
+            "type": "object",
+            "properties": [
+                { "name": "directive", "type": "string", "description": "The CSP directive that blocked script execution." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables debugger for the given page. Clients should not assume that the debugging has been enabled until the result for this command is received."
+        },
+        {
+            "name": "disable",
+            "description": "Disables debugger for given page."
+        },
+        {
+            "name": "setAsyncStackTraceDepth",
+            "description": "Set the async stack trace depth for the page. A value of zero disables recording of async stack traces.",
+            "parameters": [
+                { "name": "depth", "type": "integer", "description": "Async stack trace depth." }
+            ]
+        },
+        {
+            "name": "setBreakpointsActive",
+            "parameters": [
+                { "name": "active", "type": "boolean", "description": "New value for breakpoints active state." }
+            ],
+            "description": "Activates / deactivates all breakpoints on the page."
+        },
+        {
+            "name": "setBreakpointByUrl",
+            "parameters": [
+                { "name": "lineNumber", "type": "integer", "description": "Line number to set breakpoint at." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL of the resources to set breakpoint on." },
+                { "name": "urlRegex", "type": "string", "optional": true, "description": "Regex pattern for the URLs of the resources to set breakpoints on. Either <code>url</code> or <code>urlRegex</code> must be specified." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Offset in the line to set breakpoint at." },
+                { "name": "options", "$ref": "BreakpointOptions", "optional": true, "description": "Options to apply to this breakpoint to modify its behavior." }
+            ],
+            "returns": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                { "name": "locations", "type": "array", "items": { "$ref": "Location"}, "description": "List of the locations this breakpoint resolved into upon addition." }
+            ],
+            "description": "Sets JavaScript breakpoint at given location specified either by URL or URL regex. Once this command is issued, all existing parsed scripts will have breakpoints resolved and returned in <code>locations</code> property. Further matching script parsing will result in subsequent <code>breakpointResolved</code> events issued. This logical breakpoint will survive page reloads."
+        },
+        {
+            "name": "setBreakpoint",
+            "parameters": [
+                { "name": "location", "$ref": "Location", "description": "Location to set breakpoint in." },
+                { "name": "options", "$ref": "BreakpointOptions", "optional": true, "description": "Options to apply to this breakpoint to modify its behavior." }
+            ],
+            "returns": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                { "name": "actualLocation", "$ref": "Location", "description": "Location this breakpoint resolved into." }
+            ],
+            "description": "Sets JavaScript breakpoint at a given location."
+        },
+        {
+            "name": "removeBreakpoint",
+            "parameters": [
+                { "name": "breakpointId", "$ref": "BreakpointId" }
+            ],
+            "description": "Removes JavaScript breakpoint."
+        },
+        {
+            "name": "continueUntilNextRunLoop",
+            "description": "Continues execution until the current evaluation completes. This will trigger either a Debugger.paused or Debugger.resumed event."
+        },
+        {
+            "name": "continueToLocation",
+            "description": "Continues execution until specific location is reached. This will trigger either a Debugger.paused or Debugger.resumed event.",
+            "parameters": [
+                { "name": "location", "$ref": "Location", "description": "Location to continue to." }
+            ]
+        },
+        {
+            "name": "stepOver",
+            "description": "Steps over the statement. This will trigger either a Debugger.paused or Debugger.resumed event."
+        },
+        {
+            "name": "stepInto",
+            "description": "Steps into the function call. This will trigger either a Debugger.paused or Debugger.resumed event."
+        },
+        {
+            "name": "stepOut",
+            "description": "Steps out of the function call. This will trigger either a Debugger.paused or Debugger.resumed event."
+        },
+        {
+            "name": "pause",
+            "description": "Stops on the next JavaScript statement."
+        },
+        {
+            "name": "resume",
+            "description": "Resumes JavaScript execution. This will trigger a Debugger.resumed event."
+        },
+        {
+            "name": "searchInContent",
+            "description": "Searches for given string in script content.",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to search in." },
+                { "name": "query", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "GenericTypes.SearchMatch" }, "description": "List of search matches." }
+            ]
+        },
+        {
+            "name": "getScriptSource",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to get source for." }
+            ],
+            "returns": [
+                { "name": "scriptSource", "type": "string", "description": "Script source." }
+            ],
+            "description": "Returns source for the script with given id."
+        },
+        {
+            "name": "getFunctionDetails",
+            "parameters": [
+                { "name": "functionId", "$ref": "Runtime.RemoteObjectId", "description": "Id of the function to get location for." }
+            ],
+            "returns": [
+                { "name": "details", "$ref": "FunctionDetails", "description": "Information about the function." }
+            ],
+            "description": "Returns detailed information on given function."
+        },
+        {
+            "name": "setPauseOnExceptions",
+            "description": "Defines pause on exceptions state. Can be set to stop on all exceptions, uncaught exceptions or no exceptions. Initial pause on exceptions state is <code>none</code>.",
+            "parameters": [
+                { "name": "state", "type": "string", "enum": ["none", "uncaught", "all"], "description": "Pause on exceptions mode." }
+            ]
+        },
+        {
+            "name": "setPauseOnAssertions",
+            "description": "Set pause on assertions state. Assertions are console.assert assertions.",
+            "parameters": [
+                { "name": "enabled", "type": "boolean" }
+            ]
+        },
+        {
+            "name": "evaluateOnCallFrame",
+            "parameters": [
+                { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier to evaluate on." },
+                { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "String object group name to put result into (allows rapid releasing resulting object handles using <code>releaseObjectGroup</code>)." },
+                { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Specifies whether command line API should be available to the evaluated expression, defaults to false." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." },
+                { "name": "saveResult", "type": "boolean", "optional": true, "description": "Whether the resulting value should be considered for saving in the $n history." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "Runtime.RemoteObject", "description": "Object wrapper for the evaluation result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Evaluates expression on a given call frame."
+        },
+        {
+            "name": "setOverlayMessage",
+            "parameters": [
+                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
+            ],
+            "description": "Sets overlay message."
+        }
+    ],
+    "events": [
+        {
+            "name": "globalObjectCleared",
+            "description": "Called when global has been cleared and debugger client should reset its state. Happens upon navigation or reload."
+        },
+        {
+            "name": "scriptParsed",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Identifier of the script parsed." },
+                { "name": "url", "type": "string", "description": "URL of the script parsed (if any)." },
+                { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource with given URL (for script tags)." },
+                { "name": "startColumn", "type": "integer", "description": "Column offset of the script within the resource with given URL." },
+                { "name": "endLine", "type": "integer", "description": "Last line of the script." },
+                { "name": "endColumn", "type": "integer", "description": "Length of the last line of the script." },
+                { "name": "isContentScript", "type": "boolean", "optional": true, "description": "Determines whether this script is a user extension script." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "sourceURL name of the script (if any)." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with script (if any)." },
+                { "name": "module", "type": "boolean", "optional": true, "description": "True if this script was parsed as a module." }
+            ],
+            "description": "Fired when virtual machine parses script. This event is also fired for all known and uncollected scripts upon enabling debugger."
+        },
+        {
+            "name": "scriptFailedToParse",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "URL of the script that failed to parse." },
+                { "name": "scriptSource", "type": "string", "description": "Source text of the script that failed to parse." },
+                { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource." },
+                { "name": "errorLine", "type": "integer", "description": "Line with error." },
+                { "name": "errorMessage", "type": "string", "description": "Parse error message." }
+            ],
+            "description": "Fired when virtual machine fails to parse the script."
+        },
+        {
+            "name": "breakpointResolved",
+            "parameters": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Breakpoint unique identifier." },
+                { "name": "location", "$ref": "Location", "description": "Actual breakpoint location." }
+            ],
+            "description": "Fired when breakpoint is resolved to an actual script and location."
+        },
+        {
+            "name": "paused",
+            "parameters": [
+                { "name": "callFrames", "type": "array", "items": { "$ref": "CallFrame" }, "description": "Call stack the virtual machine stopped on." },
+                { "name": "reason", "type": "string", "enum": ["XHR", "DOM", "EventListener", "exception", "assert", "CSPViolation", "DebuggerStatement", "Breakpoint", "PauseOnNextStatement", "other"], "description": "Pause reason." },
+                { "name": "data", "type": "object", "optional": true, "description": "Object containing break-specific auxiliary properties." },
+                { "name": "asyncStackTrace", "$ref": "Console.StackTrace", "optional": true, "description": "Linked list of asynchronous StackTraces." }
+            ],
+            "description": "Fired when the virtual machine stopped on breakpoint or exception or any other stop criteria."
+        },
+        {
+            "name": "resumed",
+            "description": "Fired when the virtual machine resumed execution."
+        },
+        {
+            "name": "didSampleProbe",
+            "description": "Fires when a new probe sample is collected.",
+            "parameters": [
+                { "name": "sample", "$ref": "ProbeSample", "description": "A collected probe sample." }
+            ]
+        },
+        {
+            "name": "playBreakpointActionSound",
+            "description": "Fired when a \"sound\" breakpoint action is triggered on a breakpoint.",
+            "parameters": [
+                { "name": "breakpointActionId", "$ref": "BreakpointActionIdentifier", "description": "Breakpoint action identifier." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "GenericTypes",
+    "description": "Exposes generic types to be used by any domain.",
+    "types": [
+        {
+            "id": "SearchMatch",
+            "type": "object",
+            "description": "Search match in a resource.",
+            "properties": [
+                { "name": "lineNumber", "type": "number", "description": "Line number in resource content." },
+                { "name": "lineContent", "type": "string", "description": "Line with match content." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Heap",
+    "description": "Heap domain exposes JavaScript heap attributes and capabilities.",
+    "types": [
+        {
+            "id": "GarbageCollection",
+            "description": "Information about a garbage collection.",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["full", "partial"], "description": "The type of garbage collection." },
+                { "name": "startTime", "type": "number" },
+                { "name": "endTime", "type": "number" }
+            ]
+        },
+        {
+            "id": "HeapSnapshotData",
+            "description": "JavaScriptCore HeapSnapshot JSON data.",
+            "type": "string"
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables Heap domain events."
+        },
+        {
+            "name": "disable",
+            "description": "Disables Heap domain events."
+        },
+        {
+            "name": "gc",
+            "description": "Trigger a full garbage collection."
+        },
+        {
+            "name": "snapshot",
+            "description": "Take a heap snapshot.",
+            "returns": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "snapshotData", "$ref": "HeapSnapshotData" }
+            ]
+        },
+        {
+            "name": "startTracking",
+            "description": "Start tracking heap changes. This will produce a `trackingStart` event."
+        },
+        {
+            "name": "stopTracking",
+            "description": "Stop tracking heap changes. This will produce a `trackingComplete` event."
+        },
+        {
+            "name": "getPreview",
+            "description": "Returns a preview (string, Debugger.FunctionDetails, or Runtime.ObjectPreview) for a Heap.HeapObjectId.",
+            "parameters": [
+                { "name": "heapObjectId", "type": "integer", "description": "Identifier of the heap object within the snapshot." }
+            ],
+            "returns": [
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "functionDetails", "$ref": "Debugger.FunctionDetails", "optional": true, "description": "Function details." },
+                { "name": "preview", "$ref": "Runtime.ObjectPreview", "optional": true, "description": "Object preview." }
+            ]
+        },
+        {
+            "name": "getRemoteObject",
+            "description": "Returns the strongly referenced Runtime.RemoteObject for a Heap.HeapObjectId.",
+            "parameters": [
+                { "name": "heapObjectId", "type": "integer", "description": "Identifier of the heap object within the snapshot." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "Runtime.RemoteObject", "description": "Resulting object." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "garbageCollected",
+            "description": "Information about the garbage collection.",
+            "parameters": [
+                { "name": "collection", "$ref": "GarbageCollection" }
+            ]
+        },
+        {
+            "name": "trackingStart",
+            "description": "Tracking started.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "snapshotData", "$ref": "HeapSnapshotData", "description": "Snapshot at the start of tracking." }
+            ]
+        },
+        {
+            "name": "trackingComplete",
+            "description": "Tracking stopped.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "snapshotData", "$ref": "HeapSnapshotData", "description": "Snapshot at the end of tracking." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "IndexedDB",
+    "featureGuard": "ENABLE(INDEXED_DATABASE)",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DatabaseWithObjectStores",
+            "type": "object",
+            "description": "Database with an array of object stores.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Database name." },
+                { "name": "version", "type": "number", "description": "Database version." },
+                { "name": "objectStores", "type": "array", "items": { "$ref": "ObjectStore" }, "description": "Object stores in this database." }
+            ]
+        },
+        {
+            "id": "ObjectStore",
+            "type": "object",
+            "description": "Object store.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Object store name." },
+                { "name": "keyPath", "$ref": "KeyPath", "description": "Object store key path." },
+                { "name": "autoIncrement", "type": "boolean", "description": "If true, object store has auto increment flag set." },
+                { "name": "indexes", "type": "array", "items": { "$ref": "ObjectStoreIndex" }, "description": "Indexes in this object store." }
+            ]
+        },
+        {
+            "id": "ObjectStoreIndex",
+            "type": "object",
+            "description": "Object store index.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Index name." },
+                { "name": "keyPath", "$ref": "KeyPath", "description": "Index key path." },
+                { "name": "unique", "type": "boolean", "description": "If true, index is unique." },
+                { "name": "multiEntry", "type": "boolean", "description": "If true, index allows multiple entries for a key." }
+            ]
+        },
+        {
+            "id": "Key",
+            "type": "object",
+            "description": "Key.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["number", "string", "date", "array"], "description": "Key type." },
+                { "name": "number", "type": "number", "optional": true, "description": "Number value." },
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "date", "type": "number", "optional": true, "description": "Date value." },
+                { "name": "array", "type": "array", "optional": true, "items": { "$ref": "Key" }, "description": "Array value." }
+            ]
+        },
+        {
+            "id": "KeyRange",
+            "type": "object",
+            "description": "Key range.",
+            "properties": [
+                { "name": "lower", "$ref": "Key", "optional": true, "description": "Lower bound." },
+                { "name": "upper", "$ref": "Key", "optional": true, "description": "Upper bound." },
+                { "name": "lowerOpen", "type": "boolean", "description": "If true lower bound is open." },
+                { "name": "upperOpen", "type": "boolean", "description": "If true upper bound is open." }
+            ]
+        },
+        {
+            "id": "DataEntry",
+            "type": "object",
+            "description": "Data entry.",
+            "properties": [
+                { "name": "key", "$ref": "Runtime.RemoteObject", "description": "Key." },
+                { "name": "primaryKey", "$ref": "Runtime.RemoteObject", "description": "Primary key." },
+                { "name": "value", "$ref": "Runtime.RemoteObject", "description": "Value." }
+            ]
+        },
+        {
+            "id": "KeyPath",
+            "type": "object",
+            "description": "Key path.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["null", "string", "array"], "description": "Key path type." },
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "array", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Array value." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables events from backend."
+        },
+        {
+            "name": "disable",
+            "description": "Disables events from backend."
+        },
+        {
+            "name": "requestDatabaseNames",
+            "description": "Requests database names for given security origin.",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." }
+            ],
+            "returns": [
+                { "name": "databaseNames", "type": "array", "items": { "type": "string" }, "description": "Database names for origin." }
+            ]
+        },
+        {
+            "name": "requestDatabase",
+            "description": "Requests database with given name in given frame.",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." }
+            ],
+            "returns": [
+                { "name": "databaseWithObjectStores", "$ref": "DatabaseWithObjectStores", "description": "Database with an array of object stores." }
+            ]
+        },
+        {
+            "name": "requestData",
+            "description": "Requests data from object store or index.",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." },
+                { "name": "objectStoreName", "type": "string", "description": "Object store name." },
+                { "name": "indexName", "type": "string", "description": "Index name, empty string for object store data requests." },
+                { "name": "skipCount", "type": "integer", "description": "Number of records to skip." },
+                { "name": "pageSize", "type": "integer", "description": "Number of records to fetch." },
+                { "name": "keyRange", "$ref": "KeyRange", "optional": true, "description": "Key range." }
+            ],
+            "returns": [
+                { "name": "objectStoreDataEntries", "type": "array", "items": { "$ref": "DataEntry" }, "description": "Array of object store data entries." },
+                { "name": "hasMore", "type": "boolean", "description": "If true, there are more entries to fetch in the given range." }
+            ]
+        },
+        {
+            "name": "clearObjectStore",
+            "description": "Clears all entries from an object store.",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." },
+                { "name": "objectStoreName", "type": "string", "description": "Object store name." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Inspector",
+    "types": [],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables inspector domain notifications."
+        },
+        {
+            "name": "disable",
+            "description": "Disables inspector domain notifications."
+        },
+        {
+            "name": "initialized",
+            "description": "Sent by the frontend after all initialization messages have been sent."
+        }
+    ],
+    "events": [
+        {
+            "name": "evaluateForTestInFrontend",
+            "parameters": [
+                { "name": "script", "type": "string" }
+            ]
+        },
+        {
+            "name": "inspect",
+            "parameters": [
+                { "name": "object", "$ref": "Runtime.RemoteObject" },
+                { "name": "hints", "type": "object" }
+            ]
+        },
+        {
+            "name": "detached",
+            "description": "Fired when remote debugging connection is about to be terminated. Contains detach reason.",
+            "parameters": [
+                { "name": "reason", "type": "string", "description": "The reason why connection has been terminated." }
+            ]
+        },
+        {
+            "name": "activateExtraDomains",
+            "description": "Fired when the backend has alternate domains that need to be activated.",
+            "parameters": [
+                { "name": "domains", "type": "array", "items": { "type": "string" }, "description": "Domain names that need activation" }
+            ]
+        },
+        {
+            "name": "targetCrashed",
+            "description": "Fired when debugging target has crashed"
+        }
+    ]
+}
+,
+{
+    "domain": "LayerTree",
+    "availability": "web",
+    "types": [
+        {
+            "id": "LayerId",
+            "type": "string",
+            "description": "Unique RenderLayer identifier."
+        },
+        {
+            "id": "PseudoElementId",
+            "type": "string",
+            "description": "Unique PseudoElement identifier."
+        },
+        {
+            "id": "IntRect",
+            "type": "object",
+            "description": "A rectangle.",
+            "properties": [
+                { "name": "x", "type": "integer", "description": "The x position." },
+                { "name": "y", "type": "integer", "description": "The y position." },
+                { "name": "width", "type": "integer", "description": "The width metric." },
+                { "name": "height", "type": "integer", "description": "The height metric." }
+            ]
+        },
+        {
+            "id": "Layer",
+            "type": "object",
+            "description": "Information about a compositing layer.",
+            "properties": [
+                { "name": "layerId", "$ref": "LayerId", "description": "The unique id for this layer." },
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The id for the node associated with this layer." },
+                { "name": "bounds", "$ref": "IntRect", "description": "Bounds of the layer in absolute page coordinates." },
+                { "name": "paintCount", "type": "integer", "description": "Indicates how many time this layer has painted." },
+                { "name": "memory", "type": "integer", "description": "Estimated memory used by this layer." },
+                { "name": "compositedBounds", "$ref": "IntRect", "description": "The bounds of the composited layer." },
+                { "name": "isInShadowTree", "type": "boolean", "optional": true, "description": "Indicates whether this layer is associated with an element hosted in a shadow tree." },
+                { "name": "isReflection", "type": "boolean", "optional": true, "description": "Indicates whether this layer was used to provide a reflection for the element." },
+                { "name": "isGeneratedContent", "type": "boolean", "optional": true, "description": "Indicates whether the layer is attached to a pseudo element that is CSS generated content." },
+                { "name": "isAnonymous", "type": "boolean", "optional": true, "description": "Indicates whether the layer was created for a CSS anonymous block or box." },
+                { "name": "pseudoElementId", "$ref": "PseudoElementId", "optional": true, "description": "The id for the pseudo element associated with this layer." },
+                { "name": "pseudoElement", "type": "string", "optional": true, "description": "The name of the CSS pseudo-element that prompted the layer to be generated." }
+            ]
+        },
+        {
+            "id": "CompositingReasons",
+            "type": "object",
+            "description": "An object containing the reasons why the layer was composited as properties.",
+            "properties": [
+                { "name": "transform3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a CSS 3D transform." },
+                { "name": "video", "type": "boolean", "optional": true, "description": "Composition due to association with a <video> element." },
+                { "name": "canvas", "type": "boolean", "optional": true, "description": "Composition due to the element being a <canvas> element." },
+                { "name": "plugin", "type": "boolean", "optional": true, "description": "Composition due to association with a plugin." },
+                { "name": "iFrame", "type": "boolean", "optional": true, "description": "Composition due to association with an <iframe> element." },
+                { "name": "backfaceVisibilityHidden", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"backface-visibility: hidden\" style." },
+                { "name": "clipsCompositingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element clipping compositing descendants." },
+                { "name": "animation", "type": "boolean", "optional": true, "description": "Composition due to association with an animated element." },
+                { "name": "filters", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied." },
+                { "name": "positionFixed", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: fixed\" style." },
+                { "name": "positionSticky", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: sticky\" style." },
+                { "name": "overflowScrollingTouch", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"overflow-scrolling: touch\" style." },
+                { "name": "stacking", "type": "boolean", "optional": true, "description": "Composition due to association with an element establishing a stacking context." },
+                { "name": "overlap", "type": "boolean", "optional": true, "description": "Composition due to association with an element overlapping other composited elements." },
+                { "name": "negativeZIndexChildren", "type": "boolean", "optional": true, "description": "Composition due to association with an element with descendants that have a negative z-index." },
+                { "name": "transformWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with composited descendants." },
+                { "name": "opacityWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with opacity applied and composited descendants." },
+                { "name": "maskWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with a masked element and composited descendants." },
+                { "name": "reflectionWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a reflection and composited descendants." },
+                { "name": "filterWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied and composited descendants." },
+                { "name": "blendingWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS blending applied and composited descendants." },
+                { "name": "isolatesCompositedBlendingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element isolating compositing descendants having CSS blending applied." },
+                { "name": "perspective", "type": "boolean", "optional": true, "description": "Composition due to association with an element with perspective applied." },
+                { "name": "preserve3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"transform-style: preserve-3d\" style." },
+                { "name": "willChange", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"will-change\" style." },
+                { "name": "root", "type": "boolean", "optional": true, "description": "Composition due to association with the root element." },
+                { "name": "blending", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"blend-mode\" style." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables compositing tree inspection."
+        },
+        {
+            "name": "disable",
+            "description": "Disables compositing tree inspection."
+        },
+        {
+            "name": "layersForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Root of the subtree for which we want to gather layers." }                ],
+            "description": "Returns the layer tree structure of the current page.",
+            "returns": [
+                { "name": "layers", "type": "array", "items": { "$ref": "Layer" }, "description": "Child layers." }
+            ]
+        },
+        {
+            "name": "reasonsForCompositingLayer",
+            "parameters": [
+                { "name": "layerId", "$ref": "LayerId", "description": "The id of the layer for which we want to get the reasons it was composited." }
+            ],
+            "description": "Provides the reasons why the given layer was composited.",
+            "returns": [
+                { "name": "compositingReasons", "$ref": "CompositingReasons", "description": "An object containing the reasons why the layer was composited as properties." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "layerTreeDidChange"
+        }
+    ]
+}
+,
+{
+    "domain": "Memory",
+    "description": "Memory domain exposes page memory tracking.",
+    "featureGuard": "ENABLE(RESOURCE_USAGE)",
+    "availability": "web",
+    "types": [
+        {
+            "id": "Event",
+            "type": "object",
+            "properties": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "categories", "type": "array", "items": { "$ref": "CategoryData" }, "description": "Breakdown of memory in categories." }
+            ]
+        },
+        {
+            "id": "CategoryData",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["javascript", "jit", "images", "layers", "page", "other"], "description": "Category type." },
+                { "name": "size", "type": "number", "description": "Category size in bytes." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables Memory domain events."
+        },
+        {
+            "name": "disable",
+            "description": "Disables Memory domain events."
+        },
+        {
+            "name": "startTracking",
+            "description": "Start tracking memory. This will produce a `trackingStart` event."
+        },
+        {
+            "name": "stopTracking",
+            "description": "Stop tracking memory. This will produce a `trackingComplete` event."
+        }
+    ],
+    "events": [
+        {
+            "name": "memoryPressure",
+            "description": "Memory pressure was encountered.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "severity", "type": "string", "enum": ["critical", "non-critical"], "description": "The severity of the memory pressure event." }
+            ]
+        },
+        {
+            "name": "trackingStart",
+            "description": "Tracking started.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "trackingUpdate",
+            "description": "Periodic tracking updates with event data.",
+            "parameters": [
+                { "name": "event", "$ref": "Event" }
+            ]
+        },
+        {
+            "name": "trackingComplete",
+            "description": "Tracking stopped."
+        }
+    ]
+}
+,
+{
+    "domain": "Network",
+    "description": "Network domain allows tracking network activities of the page. It exposes information about http, file, data and other requests and responses, their headers, bodies, timing, etc.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "LoaderId",
+            "type": "string",
+            "description": "Unique loader identifier."
+        },
+        {
+            "id": "FrameId",
+            "type": "string",
+            "description": "Unique frame identifier."
+        },
+        {
+            "id": "RequestId",
+            "type": "string",
+            "description": "Unique request identifier."
+        },
+        {
+            "id": "Timestamp",
+            "type": "number",
+            "description": "Number of seconds since epoch."
+        },
+        {
+            "id": "Headers",
+            "type": "object",
+            "description": "Request / response headers as keys / values of JSON object."
+        },
+        {
+            "id": "ResourceTiming",
+            "type": "object",
+            "description": "Timing information for the request.",
+            "properties": [
+                { "name": "startTime", "type": "number", "description": "Timing's startTime is a baseline in seconds, while the other numbers are ticks in milliseconds relatively to this." },
+                { "name": "domainLookupStart", "type": "number", "description": "Started DNS address resolve." },
+                { "name": "domainLookupEnd", "type": "number", "description": "Finished DNS address resolve." },
+                { "name": "connectStart", "type": "number", "description": "Started connecting to the remote host." },
+                { "name": "connectEnd", "type": "number", "description": "Connected to the remote host." },
+                { "name": "secureConnectionStart", "type": "number", "description": "Started SSL handshake." },
+                { "name": "requestStart", "type": "number", "description": "Started sending request." },
+                { "name": "responseStart", "type": "number", "description": "Started receiving response headers." }
+            ]
+        },
+        {
+            "id": "Request",
+            "type": "object",
+            "description": "HTTP request data.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Request URL." },
+                { "name": "method", "type": "string", "description": "HTTP request method." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP request headers." },
+                { "name": "postData", "type": "string", "optional": true, "description": "HTTP POST request data." }
+            ]
+        },
+        {
+            "id": "Response",
+            "type": "object",
+            "description": "HTTP response data.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Response URL. This URL can be different from CachedResource.url in case of redirect." },
+                { "name": "status", "type": "number", "description": "HTTP response status code." },
+                { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." },
+                { "name": "headersText", "type": "string", "optional": true, "description": "HTTP response headers text." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                { "name": "requestHeaders", "$ref": "Headers", "optional": true, "description": "Refined HTTP request headers that were actually transmitted over the network." },
+                { "name": "requestHeadersText", "type": "string", "optional": true, "description": "HTTP request headers text." },
+                { "name": "fromDiskCache", "type": "boolean", "optional": true, "description": "Specifies that the request was served from the disk cache." },
+                { "name": "timing", "$ref": "ResourceTiming", "optional": true, "description": "Timing information for the given request." }
+            ]
+        },
+        {
+            "id": "WebSocketRequest",
+            "type": "object",
+            "description": "WebSocket request data.",
+            "properties": [
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+            ]
+        },
+        {
+            "id": "WebSocketResponse",
+            "type": "object",
+            "description": "WebSocket response data.",
+            "properties": [
+                { "name": "status", "type": "number", "description": "HTTP response status code." },
+                { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+            ]
+        },
+        {
+            "id": "WebSocketFrame",
+            "type": "object",
+            "description": "WebSocket frame data.",
+            "properties": [
+                { "name": "opcode", "type": "number", "description": "WebSocket frame opcode." },
+                { "name": "mask", "type": "boolean", "description": "WebSocket frame mask." },
+                { "name": "payloadData", "type": "string", "description": "WebSocket frame payload data." }
+            ]
+        },
+        {
+            "id": "CachedResource",
+            "type": "object",
+            "description": "Information about the cached resource.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL. This is the url of the original network request." },
+                { "name": "type", "$ref": "Page.ResourceType", "description": "Type of this resource." },
+                { "name": "response", "$ref": "Response", "optional": true, "description": "Cached response data." },
+                { "name": "bodySize", "type": "number", "description": "Cached response body size." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "id": "Initiator",
+            "type": "object",
+            "description": "Information about the request initiator.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["parser", "script", "other"], "description": "Type of this initiator." },
+                { "name": "stackTrace", "type": "array", "items": { "$ref": "Console.CallFrame" }, "optional": true, "description": "Initiator JavaScript stack trace, set for Script only." },
+                { "name": "url", "type": "string", "optional": true, "description": "Initiator URL, set for Parser type only." },
+                { "name": "lineNumber", "type": "number", "optional": true, "description": "Initiator line number, set for Parser type only." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables network tracking, network events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables network tracking, prevents network events from being sent to the client."
+        },
+        {
+            "name": "setExtraHTTPHeaders",
+            "description": "Specifies whether to always send extra HTTP headers with the requests from this page.",
+            "parameters": [
+                { "name": "headers", "$ref": "Headers", "description": "Map with extra HTTP headers." }
+            ]
+        },
+        {
+            "name": "getResponseBody",
+            "description": "Returns content served for the given request.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Identifier of the network request to get content for." }
+            ],
+            "returns": [
+                { "name": "body", "type": "string", "description": "Response body." },
+                { "name": "base64Encoded", "type": "boolean", "description": "True, if content was sent as base64." }
+            ]
+        },
+        {
+            "name": "setCacheDisabled",
+            "parameters": [
+                { "name": "cacheDisabled", "type": "boolean", "description": "Cache disabled state." }
+            ],
+            "description": "Toggles ignoring cache for each request. If <code>true</code>, cache will not be used."
+        },
+        {
+            "name": "loadResource",
+            "async": true,
+            "parameters": [
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame to load the resource from." },
+                { "name": "url", "type": "string", "description": "URL of the resource to load." }
+            ],
+            "returns": [
+                { "name": "content", "type": "string", "description": "Resource content." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType." },
+                { "name": "status", "type": "number", "description": "HTTP response status code." }
+            ],
+            "description": "Loads a resource in the context of a frame on the inspected page without cross origin checks."
+        }
+    ],
+    "events": [
+        {
+            "name": "requestWillBeSent",
+            "description": "Fired when page is about to send HTTP request.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                { "name": "request", "$ref": "Request", "description": "Request data." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                { "name": "redirectResponse", "optional": true, "$ref": "Response", "description": "Redirect response data." },
+                { "name": "type", "$ref": "Page.ResourceType", "optional": true, "description": "Resource type." },
+                { "name": "targetId", "type": "string", "optional": true, "description": "Identifier for the context of where the load originated. In general this is the target identifier. For Workers this will be the workerId." }
+            ]
+        },
+        {
+            "name": "requestServedFromCache",
+            "description": "Fired if request ended up loading from cache.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." }
+            ]
+        },
+        {
+            "name": "responseReceived",
+            "description": "Fired when HTTP response is available.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "type", "$ref": "Page.ResourceType", "description": "Resource type." },
+                { "name": "response", "$ref": "Response", "description": "Response data." }
+            ]
+        },
+        {
+            "name": "dataReceived",
+            "description": "Fired when data chunk was received over the network.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "dataLength", "type": "integer", "description": "Data chunk length." },
+                { "name": "encodedDataLength", "type": "integer", "description": "Actual bytes received (might be less than dataLength for compressed encodings)." }
+            ]
+        },
+        {
+            "name": "loadingFinished",
+            "description": "Fired when HTTP request has finished loading.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "name": "loadingFailed",
+            "description": "Fired when HTTP request has failed to load.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "errorText", "type": "string", "description": "User friendly error message." },
+                { "name": "canceled", "type": "boolean", "optional": true, "description": "True if loading was canceled." }
+            ]
+        },
+        {
+            "name": "requestServedFromMemoryCache",
+            "description": "Fired when HTTP request has been served from memory cache.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                { "name": "resource", "$ref": "CachedResource", "description": "Cached resource data." }
+            ]
+        },
+        {
+            "name": "webSocketWillSendHandshakeRequest",
+            "description": "Fired when WebSocket is about to initiate handshake.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "request", "$ref": "WebSocketRequest", "description": "WebSocket request data." }
+            ]
+        },
+        {
+            "name": "webSocketHandshakeResponseReceived",
+            "description": "Fired when WebSocket handshake response becomes available.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketResponse", "description": "WebSocket response data." }
+            ]
+        },
+        {
+            "name": "webSocketCreated",
+            "description": "Fired upon WebSocket creation.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "url", "type": "string", "description": "WebSocket request URL." }
+            ]
+        },
+        {
+            "name": "webSocketClosed",
+            "description": "Fired when WebSocket is closed.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." }
+            ]
+        },
+        {
+            "name": "webSocketFrameReceived",
+            "description": "Fired when WebSocket frame is received.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+            ]
+        },
+        {
+            "name": "webSocketFrameError",
+            "description": "Fired when WebSocket frame error occurs.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "errorMessage", "type": "string", "description": "WebSocket frame error message." }
+            ]
+        },
+        {
+            "name": "webSocketFrameSent",
+            "description": "Fired when WebSocket frame is sent.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "OverlayTypes",
+    "description": "Exposes types to be used by the inspector overlay.",
+    "types": [
+        {
+            "id": "Point",
+            "type": "object",
+            "properties": [
+                { "name": "x", "type": "number" },
+                { "name": "y", "type": "number" }
+            ]
+        },
+        {
+            "id": "Size",
+            "type": "object",
+            "properties": [
+                { "name": "width", "type": "integer" },
+                { "name": "height", "type": "integer" }
+            ]
+        },
+        {
+            "id": "Quad",
+            "description": "A quad is a collection of 4 points. When initialized from a rect, the points are in clockwise order from top left.",
+            "type": "array",
+            "items": { "$ref": "Point" }
+        },
+        {
+            "id": "Rect",
+            "description": "A rectangle specified by a reference coordinate and width/height offsets.",
+            "type": "object",
+            "properties": [
+                { "name": "x", "type": "number" },
+                { "name": "y", "type": "number" },
+                { "name": "width", "type": "number" },
+                { "name": "height", "type": "number" }
+            ]
+        },
+        {
+            "id": "Region",
+            "description": "A single region in a flow thread.",
+            "type": "object",
+            "properties": [
+                { "name": "borderQuad", "$ref": "Quad" },
+                { "name": "incomingQuad", "$ref": "Quad" },
+                { "name": "outgoingQuad", "$ref": "Quad" },
+                { "name": "isHighlighted", "type": "boolean", "optional": true }
+            ]
+        },
+        {
+            "id": "DisplayPath",
+            "description": "A vector path described using SVG path syntax.",
+            "type": "array",
+            "items": { "type": "any" }
+        },
+        {
+            "id": "RegionFlowData",
+            "type": "object",
+            "properties": [
+                { "name": "regions", "type": "array", "items": { "$ref": "Region"} },
+                { "name": "name", "type": "string" }
+            ]
+        },
+        {
+            "id": "ContentFlowData",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string" }
+            ]
+        },
+        {
+            "id": "ShapeOutsideData",
+            "type": "object",
+            "properties": [
+                { "name": "bounds", "$ref": "Quad", "description": "Bounds for the shape-outside paths." },
+                { "name": "shape", "$ref": "DisplayPath", "description": "Path for the element's shape.", "optional": true },
+                { "name": "marginShape", "$ref": "DisplayPath", "description": "Path for the element's margin shape.", "optional": true }
+            ]
+        },
+        {
+            "id": "ElementData",
+            "description": "Data that describes an element to be highlighted.",
+            "type": "object",
+            "properties": [
+                { "name": "tagName", "type": "string" },
+                { "name": "idValue", "type": "string", "description": "The value of the element's 'id' attribute." },
+                { "name": "classes", "type": "array", "items": { "type": "string" }, "optional": true },
+                { "name": "size", "$ref": "Size", "optional": true },
+                { "name": "role", "type": "string", "description": "Computed accessibility role for the element.", "optional": true },
+                { "name": "pseudoElement", "type": "string", "optional": true },
+                { "name": "regionFlowData", "$ref": "RegionFlowData", "optional": true },
+                { "name": "contentFlowData", "$ref": "ContentFlowData", "optional": true },
+                { "name": "shapeOutsideData", "$ref": "ShapeOutsideData", "optional": true }
+            ]
+        },
+        {
+            "id": "FragmentHighlightData",
+            "description": "Data required to highlight multiple quads.",
+            "type": "object",
+            "properties": [
+                { "name": "quads", "type": "array", "items": { "$ref": "Quad" }, "description": "Quads for which the highlight should be applied."},
+                { "name": "contentColor", "type": "string" },
+                { "name": "contentOutlineColor", "type": "string" },
+                { "name": "paddingColor", "type": "string" },
+                { "name": "borderColor", "type": "string" },
+                { "name": "marginColor", "type": "string" },
+                { "name": "regionClippingArea", "$ref": "Quad", "optional": true }
+            ]
+        },
+        {
+            "id": "NodeHighlightData",
+            "description": "Data required to highlight a DOM node.",
+            "type": "object",
+            "properties": [
+                { "name": "scrollOffset", "$ref": "Point", "description": "Scroll offset for the MainFrame's FrameView that is shared across all quads." },
+                { "name": "fragments", "type": "array", "items": { "$ref": "FragmentHighlightData" } },
+                { "name": "elementData", "$ref": "ElementData", "optional": true }
+            ]
+        },
+        {
+            "id": "OverlayConfiguration",
+            "description": "Data required to configure the overlay's size and scaling behavior.",
+            "type": "object",
+            "properties": [
+                { "name": "deviceScaleFactor", "type": "number" },
+                { "name": "viewportSize", "$ref": "Size" },
+                { "name": "frameViewFullSize", "$ref": "Size" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Page",
+    "description": "Actions and events related to the inspected page belong to the page domain.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "ResourceType",
+            "type": "string",
+            "enum": ["Document", "Stylesheet", "Image", "Font", "Script", "XHR", "Fetch", "WebSocket", "Other"],
+            "description": "Resource type as it was perceived by the rendering engine."
+        },
+        {
+            "id": "CoordinateSystem",
+            "type": "string",
+            "enum": ["Viewport", "Page"],
+            "description": "Coordinate system used by supplied coordinates."
+        },
+        {
+            "id": "Frame",
+            "type": "object",
+            "description": "Information about the Frame on the page.",
+            "properties": [
+                { "name": "id", "type": "string", "description": "Frame unique identifier." },
+                { "name": "parentId", "type": "string", "optional": true, "description": "Parent frame identifier." },
+                { "name": "loaderId", "$ref": "Network.LoaderId", "description": "Identifier of the loader associated with this frame." },
+                { "name": "name", "type": "string", "optional": true, "description": "Frame's name as specified in the tag." },
+                { "name": "url", "type": "string", "description": "Frame document's URL." },
+                { "name": "securityOrigin", "type": "string", "description": "Frame document's security origin." },
+                { "name": "mimeType", "type": "string", "description": "Frame document's mimeType as determined by the browser." }
+            ]
+        },
+        {
+            "id": "FrameResource",
+            "type": "object",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL." },
+                { "name": "type", "$ref": "ResourceType", "description": "Type of this resource." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                { "name": "failed", "type": "boolean", "optional": true, "description": "True if the resource failed to load." },
+                { "name": "canceled", "type": "boolean", "optional": true, "description": "True if the resource was canceled during loading." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." },
+                { "name": "targetId", "type": "string", "optional": true, "description": "Identifier for the context of where the load originated. In general this is the target identifier. For Workers this will be the workerId." }
+            ]
+        },
+        {
+            "id": "FrameResourceTree",
+            "type": "object",
+            "description": "Information about the Frame hierarchy along with their cached resources.",
+            "properties": [
+                { "name": "frame", "$ref": "Frame", "description": "Frame information for this tree item." },
+                { "name": "childFrames", "type": "array", "optional": true, "items": { "$ref": "FrameResourceTree" }, "description": "Child frames." },
+                { "name": "resources", "type": "array", "items": { "$ref": "FrameResource" }, "description": "Information about frame resources." }
+            ]
+        },
+        {
+            "id": "SearchResult",
+            "type": "object",
+            "description": "Search result for resource.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL." },
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Resource frame id." },
+                { "name": "matchesCount", "type": "number", "description": "Number of matches in the resource content." },
+                { "name": "requestId", "$ref": "Network.RequestId", "optional": true, "description": "Network request id." }
+            ]
+        },
+        {
+            "id": "Cookie",
+            "type": "object",
+            "description": "Cookie object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Cookie name." },
+                { "name": "value", "type": "string", "description": "Cookie value." },
+                { "name": "domain", "type": "string", "description": "Cookie domain." },
+                { "name": "path", "type": "string", "description": "Cookie path." },
+                { "name": "expires", "type": "number", "description": "Cookie expires." },
+                { "name": "size", "type": "integer", "description": "Cookie size." },
+                { "name": "httpOnly", "type": "boolean", "description": "True if cookie is http-only." },
+                { "name": "secure", "type": "boolean", "description": "True if cookie is secure." },
+                { "name": "session", "type": "boolean", "description": "True in case of session cookie." }
+            ]
+        },
+        {
+            "id": "ScriptIdentifier",
+            "type": "string",
+            "description": "Unique script identifier."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables page domain notifications."
+        },
+        {
+            "name": "disable",
+            "description": "Disables page domain notifications."
+        },
+        {
+            "name": "addScriptToEvaluateOnLoad",
+            "parameters": [
+                { "name": "scriptSource", "type": "string" }
+            ],
+            "returns": [
+                { "name": "identifier", "$ref": "ScriptIdentifier", "description": "Identifier of the added script." }
+            ]
+        },
+        {
+            "name": "removeScriptToEvaluateOnLoad",
+            "parameters": [
+                { "name": "identifier", "$ref": "ScriptIdentifier" }
+            ]
+        },
+        {
+            "name": "reload",
+            "parameters": [
+                { "name": "ignoreCache", "type": "boolean", "optional": true, "description": "If true, browser cache is ignored (as if the user pressed Shift+refresh)." },
+                { "name": "scriptToEvaluateOnLoad", "type": "string", "optional": true, "description": "If set, the script will be injected into all frames of the inspected page after reload." }
+            ],
+            "description": "Reloads given page optionally ignoring the cache."
+        },
+        {
+            "name": "navigate",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "URL to navigate the page to." }
+            ],
+            "description": "Navigates current page to the given URL."
+        },
+        {
+            "name": "getCookies",
+            "returns": [
+                { "name": "cookies", "type": "array", "items": { "$ref": "Cookie"}, "description": "Array of cookie objects." }
+            ],
+            "description": "Returns all browser cookies. Depending on the backend support, will return detailed cookie information in the <code>cookies</code> field."
+        },
+        {
+            "name": "deleteCookie",
+            "parameters": [
+                { "name": "cookieName", "type": "string", "description": "Name of the cookie to remove." },
+                { "name": "url", "type": "string", "description": "URL to match cooke domain and path." }
+            ],
+            "description": "Deletes browser cookie with given name, domain and path."
+        },
+        {
+            "name": "getResourceTree",
+            "description": "Returns present frame / resource tree structure.",
+            "returns": [
+                { "name": "frameTree", "$ref": "FrameResourceTree", "description": "Present frame / resource tree structure." }
+            ]
+        },
+        {
+            "name": "getResourceContent",
+            "description": "Returns content of the given resource.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to get resource for." },
+                { "name": "url", "type": "string", "description": "URL of the resource to get content for." }
+            ],
+            "returns": [
+                { "name": "content", "type": "string", "description": "Resource content." },
+                { "name": "base64Encoded", "type": "boolean", "description": "True, if content was served as base64." }
+            ]
+        },
+        {
+            "name": "searchInResource",
+            "description": "Searches for given string in resource content.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id for resource to search in." },
+                { "name": "url", "type": "string", "description": "URL of the resource to search in." },
+                { "name": "query", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." },
+                { "name": "requestId", "$ref": "Network.RequestId", "optional": true, "description": "Request id for resource to search in." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "GenericTypes.SearchMatch" }, "description": "List of search matches." }
+            ]
+        },
+        {
+            "name": "searchInResources",
+            "description": "Searches for given string in frame / resource tree structure.",
+            "parameters": [
+                { "name": "text", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "SearchResult" }, "description": "List of search results." }
+            ]
+        },
+        {
+            "name": "setShowPaintRects",
+            "description": "Requests that backend shows paint rectangles",
+            "parameters": [
+                { "name": "result", "type": "boolean", "description": "True for showing paint rectangles" }
+            ]
+        },
+        {
+            "name": "setEmulatedMedia",
+            "description": "Emulates the given media for CSS media queries.",
+            "parameters": [
+                { "name": "media", "type": "string", "description": "Media type to emulate. Empty string disables the override." }
+            ]
+        },
+        {
+            "name": "getCompositingBordersVisible",
+            "description": "Indicates the visibility of compositing borders.",
+            "returns": [
+                { "name": "result", "type": "boolean", "description": "If true, compositing borders are visible." }
+            ]
+        },
+        {
+            "name": "setCompositingBordersVisible",
+            "description": "Controls the visibility of compositing borders.",
+            "parameters": [
+                { "name": "visible", "type": "boolean", "description": "True for showing compositing borders." }
+            ]
+        },
+        {
+            "name": "snapshotNode",
+            "description": "Capture a snapshot of the specified node that does not include unrelated layers.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Id of the node to snapshot." }
+            ],
+            "returns": [
+                { "name": "dataURL", "type": "string", "description": "Base64-encoded image data (PNG)." }
+            ]
+        },
+        {
+            "name": "snapshotRect",
+            "description": "Capture a snapshot of the page within the specified rectangle and coordinate system.",
+            "parameters": [
+                { "name": "x", "type": "integer", "description": "X coordinate" },
+                { "name": "y", "type": "integer", "description": "Y coordinate" },
+                { "name": "width", "type": "integer", "description": "Rectangle width" },
+                { "name": "height", "type": "integer", "description": "Rectangle height" },
+                { "name": "coordinateSystem", "$ref": "CoordinateSystem", "description": "Indicates the coordinate system of the supplied rectangle." }
+            ],
+            "returns": [
+                { "name": "dataURL", "type": "string", "description": "Base64-encoded image data (PNG)." }
+            ]
+        },
+        {
+            "name": "archive",
+            "description": "Grab an archive of the page.",
+            "returns": [
+                { "name": "data", "type": "string", "description": "Base64-encoded web archive." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "domContentEventFired",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "loadEventFired",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "frameNavigated",
+            "description": "Fired once navigation of the frame has completed. Frame is now associated with the new loader.",
+            "parameters": [
+                { "name": "frame", "$ref": "Frame", "description": "Frame object." }
+            ]
+        },
+        {
+            "name": "frameDetached",
+            "description": "Fired when frame has been detached from its parent.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has been detached." }
+            ]
+        },
+        {
+            "name": "frameStartedLoading",
+            "description": "Fired when frame has started loading.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has started loading." }
+            ]
+        },
+        {
+            "name": "frameStoppedLoading",
+            "description": "Fired when frame has stopped loading.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has stopped loading." }
+            ]
+        },
+        {
+            "name": "frameScheduledNavigation",
+            "description": "Fired when frame schedules a potential navigation.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has scheduled a navigation." },
+                { "name": "delay", "type": "number", "description": "Delay (in seconds) until the navigation is scheduled to begin. The navigation is not guaranteed to start." }
+            ]
+        },
+        {
+            "name": "frameClearedScheduledNavigation",
+            "description": "Fired when frame no longer has a scheduled navigation.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has cleared its scheduled navigation." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Runtime",
+    "description": "Runtime domain exposes JavaScript runtime by means of remote evaluation and mirror objects. Evaluation results are returned as mirror object that expose object type, string representation and unique identifier that can be used for further object reference. Original objects are maintained in memory unless they are either explicitly released or are released along with the other objects in their object group.",
+    "workerSupported": true,
+    "types": [
+        {
+            "id": "RemoteObjectId",
+            "type": "string",
+            "description": "Unique object identifier."
+        },
+        {
+            "id": "RemoteObject",
+            "type": "object",
+            "description": "Mirror object referencing original JavaScript object.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class", "proxy"], "description": "Object subtype hint. Specified for <code>object</code> <code>function</code> (for class) type values only." },
+                { "name": "className", "type": "string", "optional": true, "description": "Object class (constructor) name. Specified for <code>object</code> type values only." },
+                { "name": "value", "type": "any", "optional": true, "description": "Remote object value (in case of primitive values or JSON values if it was requested)." },
+                { "name": "description", "type": "string", "optional": true, "description": "String representation of the object." },
+                { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Unique object identifier (for non-primitive values)." },
+                { "name": "size", "type": "integer", "optional": true, "description": "Size of the array/collection. Specified for array/map/set/weakmap/weakset object type values only." },
+                { "name": "classPrototype", "$ref": "RemoteObject", "optional": true, "description": "Remote object for the class prototype. Specified for class object type values only." },
+                { "name": "preview", "$ref": "ObjectPreview", "optional": true, "description": "Preview containing abbreviated property values. Specified for <code>object</code> type values only." }
+            ]
+        },
+        {
+            "id": "ObjectPreview",
+            "type": "object",
+            "description": "Object containing abbreviated remote object value.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class", "proxy"], "description": "Object subtype hint. Specified for <code>object</code> type values only." },
+                { "name": "description", "type": "string", "optional": true, "description": "String representation of the object." },
+                { "name": "lossless", "type": "boolean", "description": "Determines whether preview is lossless (contains all information of the original object)." },
+                { "name": "overflow", "type": "boolean", "optional": true, "description": "True iff some of the properties of the original did not fit." },
+                { "name": "properties", "type": "array", "items": { "$ref": "PropertyPreview" }, "optional": true, "description": "List of the properties." },
+                { "name": "entries", "type": "array", "items": { "$ref": "EntryPreview" }, "optional": true, "description": "List of the entries. Specified for <code>map</code> and <code>set</code> subtype values only." },
+                { "name": "size", "type": "integer", "optional": true, "description": "Size of the array/collection. Specified for array/map/set/weakmap/weakset object type values only." }
+            ]
+        },
+        {
+            "id": "PropertyPreview",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol", "accessor"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class", "proxy"], "description": "Object subtype hint. Specified for <code>object</code> type values only." },
+                { "name": "value", "type": "string", "optional": true, "description": "User-friendly property value string." },
+                { "name": "valuePreview", "$ref": "ObjectPreview", "optional": true, "description": "Nested value preview." },
+                { "name": "internal", "type": "boolean", "optional": true, "description": "True if this is an internal property." }
+            ]
+        },
+        {
+            "id": "EntryPreview",
+            "type": "object",
+            "properties": [
+                { "name": "key", "$ref": "ObjectPreview", "optional": true, "description": "Entry key. Specified for map-like collection entries." },
+                { "name": "value", "$ref": "ObjectPreview", "description": "Entry value." }
+            ]
+        },
+        {
+            "id": "CollectionEntry",
+            "type": "object",
+            "properties": [
+                { "name": "key", "$ref": "Runtime.RemoteObject", "optional": true, "description": "Entry key of a map-like collection, otherwise not provided." },
+                { "name": "value", "$ref": "Runtime.RemoteObject", "description": "Entry value." }
+            ]
+        },
+        {
+            "id": "PropertyDescriptor",
+            "type": "object",
+            "description": "Object property descriptor.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name or symbol description." },
+                { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." },
+                { "name": "writable", "type": "boolean", "optional": true, "description": "True if the value associated with the property may be changed (data descriptors only)." },
+                { "name": "get", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a getter for the property, or <code>undefined</code> if there is no getter (accessor descriptors only)." },
+                { "name": "set", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a setter for the property, or <code>undefined</code> if there is no setter (accessor descriptors only)." },
+                { "name": "configurable", "type": "boolean", "description": "True if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object." },
+                { "name": "enumerable", "type": "boolean", "description": "True if this property shows up during enumeration of the properties on the corresponding object." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "isOwn", "optional": true, "type": "boolean", "description": "True if the property is owned for the object." },
+                { "name": "symbol", "optional": true, "$ref": "Runtime.RemoteObject", "description": "Property symbol object, if the property is a symbol." },
+                { "name": "nativeGetter", "optional": true, "type": "boolean", "description": "True if the property value came from a native getter." }
+            ]
+        },
+        {
+            "id": "InternalPropertyDescriptor",
+            "type": "object",
+            "description": "Object internal property descriptor. This property isn't normally visible in JavaScript code.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Conventional property name." },
+                { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." }
+            ]
+        },
+        {
+            "id": "CallArgument",
+            "type": "object",
+            "description": "Represents function call argument. Either remote object id <code>objectId</code> or primitive <code>value</code> or neither of (for undefined) them should be specified.",
+            "properties": [
+                { "name": "value", "type": "any", "optional": true, "description": "Primitive value." },
+                { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Remote object handle." }
+            ]
+        },
+        {
+            "id": "ExecutionContextId",
+            "type": "integer",
+            "description": "Id of an execution context."
+        },
+        {
+            "id": "ExecutionContextDescription",
+            "type": "object",
+            "description": "Description of an isolated world.",
+            "properties": [
+                { "name": "id", "$ref": "ExecutionContextId", "description": "Unique id of the execution context. It can be used to specify in which execution context script evaluation should be performed." },
+                { "name": "isPageContext", "type": "boolean", "description": "True if this is a context where inpspected web page scripts run. False if it is a content script isolated context." },
+                { "name": "name", "type": "string", "description": "Human readable name describing given context."},
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the owning frame." }
+            ]
+        },
+        {
+            "id": "SyntaxErrorType",
+            "type": "string",
+            "enum": ["none", "irrecoverable", "unterminated-literal", "recoverable"],
+            "description": "Syntax error type: \"none\" for no error, \"irrecoverable\" for unrecoverable errors, \"unterminated-literal\" for when there is an unterminated literal, \"recoverable\" for when the expression is unfinished but valid so far."
+        },
+        {
+            "id": "ErrorRange",
+            "type": "object",
+            "description": "Range of an error in source code.",
+            "properties": [
+                { "name": "startOffset", "type": "integer", "description": "Start offset of range (inclusive)." },
+                { "name": "endOffset", "type": "integer", "description": "End offset of range (exclusive)." }
+            ]
+        },
+        {
+            "id": "StructureDescription",
+            "type": "object",
+            "properties": [
+                { "name": "fields", "type": "array",  "items": { "type": "string" }, "optional": true, "description": "Array of strings, where the strings represent object properties." },
+                { "name": "optionalFields", "type": "array",  "items": { "type": "string" }, "optional": true, "description": "Array of strings, where the strings represent optional object properties." },
+                { "name": "constructorName", "type": "string", "optional": true, "description": "Name of the constructor." },
+                { "name": "prototypeStructure", "$ref": "StructureDescription", "optional": true, "description": "Pointer to the StructureRepresentation of the protoype if one exists." },
+                { "name": "isImprecise", "type": "boolean", "optional": true, "description": "If true, it indicates that the fields in this StructureDescription may be inaccurate. I.e, there might have been fields that have been deleted before it was profiled or it has fields we haven't profiled." }
+            ]
+        },
+        {
+            "id": "TypeSet",
+            "type": "object",
+            "properties": [
+                { "name": "isFunction", "type": "boolean", "description": "Indicates if this type description has been type Function." },
+                { "name": "isUndefined", "type": "boolean", "description": "Indicates if this type description has been type Undefined." },
+                { "name": "isNull", "type": "boolean", "description": "Indicates if this type description has been type Null." },
+                { "name": "isBoolean", "type": "boolean", "description": "Indicates if this type description has been type Boolean." },
+                { "name": "isInteger", "type": "boolean", "description": "Indicates if this type description has been type Integer." },
+                { "name": "isNumber", "type": "boolean", "description": "Indicates if this type description has been type Number." },
+                { "name": "isString", "type": "boolean", "description": "Indicates if this type description has been type String." },
+                { "name": "isObject", "type": "boolean", "description": "Indicates if this type description has been type Object." },
+                { "name": "isSymbol", "type": "boolean", "description": "Indicates if this type description has been type Symbol." }
+            ]
+        },
+        {
+            "id": "TypeDescription",
+            "type": "object",
+            "description": "Container for type information that has been gathered.",
+            "properties": [
+                { "name": "isValid", "type": "boolean", "description": "If true, we were able to correlate the offset successfuly with a program location. If false, the offset may be bogus or the offset may be from a CodeBlock that hasn't executed." },
+                { "name": "leastCommonAncestor", "type": "string", "optional": true, "description": "Least common ancestor of all Constructors if the TypeDescription has seen any structures. This string is the display name of the shared constructor function." },
+                { "name": "typeSet", "$ref": "TypeSet", "optional": true, "description": "Set of booleans for determining the aggregate type of this type description." },
+                { "name": "structures", "type": "array", "items": { "$ref": "StructureDescription" }, "optional": true, "description": "Array of descriptions for all structures seen for this variable." },
+                { "name": "isTruncated", "type": "boolean", "optional": true, "description": "If true, this indicates that no more structures are being profiled because some maximum threshold has been reached and profiling has stopped because of memory pressure." }
+            ]
+        },
+        {
+            "id": "TypeLocation",
+            "type": "object",
+            "description": "Describes the location of an expression we want type information for.",
+            "properties": [
+                { "name": "typeInformationDescriptor", "type": "integer", "description": "What kind of type information do we want (normal, function return values, 'this' statement)." },
+                { "name": "sourceID", "type": "string", "description": "sourceID uniquely identifying a script" },
+                { "name": "divot", "type": "integer", "description": "character offset for assignment range" }
+            ]
+        },
+        {
+            "id": "BasicBlock",
+            "type": "object",
+            "description": "From Wikipedia: a basic block is a portion of the code within a program with only one entry point and only one exit point. This type gives the location of a basic block and if that basic block has executed.",
+            "properties": [
+                { "name": "startOffset", "type": "integer", "description": "Start offset of the basic block." },
+                { "name": "endOffset", "type": "integer", "description": "End offset of the basic block." },
+                { "name": "hasExecuted", "type": "boolean", "description": "Indicates if the basic block has executed before." },
+                { "name": "executionCount", "type": "integer", "description": "Indicates how many times the basic block has executed." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "parse",
+            "parameters": [
+                { "name": "source", "type": "string", "description": "Source code to parse." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "SyntaxErrorType", "description": "Parse result." },
+                { "name": "message", "type": "string", "optional": true, "description": "Parse error message." },
+                { "name": "range", "$ref": "ErrorRange", "optional": true, "description": "Range in the source where the error occurred." }
+            ],
+            "description": "Parses JavaScript source code for errors."
+        },
+        {
+            "name": "evaluate",
+            "parameters": [
+                { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." },
+                { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Determines whether Command Line API should be available during the evaluation." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "contextId", "$ref": "Runtime.ExecutionContextId", "optional": true, "description": "Specifies in which isolated context to perform evaluation. Each content script lives in an isolated context and this parameter may be used to specify one of those contexts. If the parameter is omitted or 0 the evaluation will be performed in the context of the inspected page." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." },
+                { "name": "saveResult", "type": "boolean", "optional": true, "description": "Whether the resulting value should be considered for saving in the $n history." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "RemoteObject", "description": "Evaluation result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Evaluates expression on global object."
+        },
+        {
+            "name": "callFunctionOn",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to call function on." },
+                { "name": "functionDeclaration", "type": "string", "description": "Declaration of the function to call." },
+                { "name": "arguments", "type": "array", "items": { "$ref": "CallArgument", "description": "Call argument." }, "optional": true, "description": "Call arguments. All call arguments must belong to the same JavaScript world as the target object." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether function call should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object which should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "RemoteObject", "description": "Call result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
+            ],
+            "description": "Calls function with given declaration on the given object. Object group of the result is inherited from the target object."
+        },
+        {
+            "name": "getProperties",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to return properties for." },
+                { "name": "ownProperties", "optional": true, "type": "boolean", "description": "If true, returns properties belonging only to the object itself, not to its prototype chain." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for property values." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "PropertyDescriptor"}, "description": "Object properties." },
+                { "name": "internalProperties", "optional": true, "type": "array", "items": { "$ref": "InternalPropertyDescriptor"}, "description": "Internal object properties." }
+            ],
+            "description": "Returns properties of a given object. Object group of the result is inherited from the target object."
+        },
+        {
+            "name": "getDisplayableProperties",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to return properties for." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for property values." }
+            ],
+            "returns": [
+                { "name": "properties", "type": "array", "items": { "$ref": "PropertyDescriptor"}, "description": "Object properties." },
+                { "name": "internalProperties", "optional": true, "type": "array", "items": { "$ref": "InternalPropertyDescriptor"}, "description": "Internal object properties." }
+            ],
+            "description": "Returns displayable properties of a given object. Object group of the result is inherited from the target object. Displayable properties are own properties, internal properties, and native getters in the prototype chain (assumed to be bindings and treated like own properties for the frontend)."
+        },
+        {
+            "name": "getCollectionEntries",
+            "description": "Returns entries of given Map / Set collection.",
+            "parameters": [
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "description": "Id of the collection to get entries for." },
+                { "name": "objectGroup", "optional": true, "type": "string", "description": "Symbolic group name that can be used to release multiple. If not provided, it will be the same objectGroup as the RemoteObject determined from <code>objectId</code>. This is useful for WeakMap to release the collection entries." },
+                { "name": "startIndex", "optional": true, "type": "integer", "description": "If provided skip to this index before collecting values. Otherwise, 0." },
+                { "name": "numberToFetch", "optional": true, "type": "integer", "description": "If provided only return <code>numberToFetch</code> values. Otherwise, return values all the way to the end." }
+            ],
+            "returns": [
+                { "name": "entries", "type": "array", "items": { "$ref": "CollectionEntry" }, "description": "Array of collection entries." }
+            ]
+        },
+        {
+            "name": "saveResult",
+            "parameters": [
+                { "name": "value", "$ref": "CallArgument", "description": "Id or value of the object to save." },
+                { "name": "contextId", "optional": true, "$ref": "ExecutionContextId", "description": "Unique id of the execution context. To specify in which execution context script evaluation should be performed. If not provided, determine from the CallArgument's objectId." }
+            ],
+            "returns": [
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the value was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Assign a saved result index to this value."
+        },
+        {
+            "name": "releaseObject",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to release." }
+            ],
+            "description": "Releases remote object with given id."
+        },
+        {
+            "name": "releaseObjectGroup",
+            "parameters": [
+                { "name": "objectGroup", "type": "string", "description": "Symbolic object group name." }
+            ],
+            "description": "Releases all remote objects that belong to a given group."
+        },
+        {
+            "name": "enable",
+            "description": "Enables reporting of execution contexts creation by means of <code>executionContextCreated</code> event. When the reporting gets enabled the event will be sent immediately for each existing execution context."
+        },
+        {
+            "name": "disable",
+            "description": "Disables reporting of execution contexts creation."
+        },
+        {
+            "name": "getRuntimeTypesForVariablesAtOffsets",
+            "parameters": [
+                { "name": "locations", "type": "array", "items": { "$ref": "TypeLocation" }, "description": "An array of type locations we're requesting information for. Results are expected in the same order they're sent in."}
+            ],
+            "returns": [
+                { "name": "types", "type": "array", "items": { "$ref": "TypeDescription", "description": "Types for requested variable." } }
+            ],
+            "description": "Returns detailed informtation on given function."
+        },
+        {
+            "name": "enableTypeProfiler",
+            "description": "Enables type profiling on the VM."
+        },
+        {
+            "name": "disableTypeProfiler",
+            "description": "Disables type profiling on the VM."
+        },
+        {
+            "name": "enableControlFlowProfiler",
+            "description": "Enables control flow profiling on the VM."
+        },
+        {
+            "name": "disableControlFlowProfiler",
+            "description": "Disables control flow profiling on the VM."
+        },
+        {
+            "name": "getBasicBlocks",
+            "parameters": [
+                { "name": "sourceID", "type": "string", "description": "Indicates which sourceID information is requested for." }
+            ],
+            "returns": [
+                { "name": "basicBlocks", "type": "array", "items": { "$ref": "BasicBlock", "description": "Array of basic blocks." } }
+            ],
+            "description": "Returns a list of basic blocks for the given sourceID with information about their text ranges and whether or not they have executed."
+        }
+    ],
+    "events": [
+        {
+            "name": "executionContextCreated",
+            "parameters": [
+                { "name": "context", "$ref": "ExecutionContextDescription", "description": "A newly created execution contex." }
+            ],
+            "description": "Issued when new execution context is created."
+        }
+    ]
+}
+,
+{
+    "domain": "ScriptProfiler",
+    "description": "Profiler domain exposes JavaScript evaluation timing and profiling.",
+    "types": [
+        {
+            "id": "EventType",
+            "type": "string",
+            "enum": ["API", "Microtask", "Other"]
+        },
+        {
+            "id": "Event",
+            "type": "object",
+            "properties": [
+                { "name": "startTime", "type": "number" },
+                { "name": "endTime", "type": "number" },
+                { "name": "type", "$ref": "EventType" }
+            ]
+        },
+        {
+            "id": "ExpressionLocation",
+            "type": "object",
+            "properties": [
+                { "name": "line", "type": "integer", "description": "1-based." },
+                { "name": "column", "type": "integer", "description": "1-based." }
+            ]
+        },
+        {
+            "id": "StackFrame",
+            "type": "object",
+            "properties": [
+                { "name": "sourceID", "$ref": "Debugger.ScriptId", "description": "Unique script identifier." },
+                { "name": "name", "type": "string", "description": "A displayable name for the stack frame. i.e function name, (program), etc." },
+                { "name": "line", "type": "integer", "description": "-1 if unavailable. 1-based if available." },
+                { "name": "column", "type": "integer", "description": "-1 if unavailable. 1-based if available." },
+                { "name": "url", "type": "string" },
+                { "name": "expressionLocation", "$ref": "ExpressionLocation", "optional": true }
+            ]
+        },
+        {
+            "id": "StackTrace",
+            "type": "object",
+            "properties": [
+                { "name": "timestamp", "type": "number" },
+                { "name": "stackFrames", "type": "array", "items": { "$ref": "StackFrame" }, "description": "First array item is the bottom of the call stack and last array item is the top of the call stack." }
+            ]
+        },
+        {
+            "id": "Samples",
+            "type": "object",
+            "properties": [
+                { "name": "stackTraces", "type": "array", "items": { "$ref": "StackTrace" } }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "startTracking",
+            "description": "Start tracking script evaluations.",
+            "parameters": [
+                { "name": "includeSamples", "type": "boolean", "optional": true, "description": "Start the sampling profiler, defaults to false." }
+            ]
+        },
+        {
+            "name": "stopTracking",
+            "description": "Stop tracking script evaluations. This will produce a `trackingComplete` event."
+        }
+    ],
+    "events": [
+        {
+            "name": "trackingStart",
+            "description": "Tracking started.",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "trackingUpdate",
+            "description": "Periodic tracking updates with event data.",
+            "parameters": [
+                { "name": "event", "$ref": "Event" }
+            ]
+        },
+        {
+            "name": "trackingComplete",
+            "description": "Tracking stopped. Includes any buffered data during tracking, such as profiling information.",
+            "parameters": [
+                { "name": "samples", "$ref": "Samples", "optional": true, "description": "Stack traces." }
+            ]
+        },
+        {
+            "name": "programmaticCaptureStarted",
+            "description": "Fired when programmatic capture starts (console.profile). JSContext inspection only."
+        },
+        {
+            "name": "programmaticCaptureStopped",
+            "description": "Fired when programmatic capture stops (console.profileEnd). JSContext inspection only."
+        }
+    ]
+}
+,
+{
+    "domain": "Timeline",
+    "description": "Timeline provides its clients with instrumentation records that are generated during the page runtime. Timeline instrumentation can be started and stopped using corresponding commands. While timeline is started, it is generating timeline event records.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "EventType",
+            "type": "string",
+            "description": "Timeline record type.",
+            "enum": [
+                "EventDispatch",
+                "ScheduleStyleRecalculation",
+                "RecalculateStyles",
+                "InvalidateLayout",
+                "Layout",
+                "Paint",
+                "Composite",
+                "RenderingFrame",
+                "TimerInstall",
+                "TimerRemove",
+                "TimerFire",
+                "EvaluateScript",
+                "TimeStamp",
+                "Time",
+                "TimeEnd",
+                "FunctionCall",
+                "ProbeSample",
+                "ConsoleProfile",
+                "RequestAnimationFrame",
+                "CancelAnimationFrame",
+                "FireAnimationFrame"
+            ]
+        },
+        {
+            "id": "Instrument",
+            "type": "string",
+            "description": "Instrument types.",
+            "enum": [
+                "ScriptProfiler",
+                "Timeline",
+                "Memory",
+                "Heap"
+            ]
+        },
+        {
+            "id": "TimelineEvent",
+            "type": "object",
+            "description": "Timeline record contains information about the recorded activity.",
+            "properties": [
+                { "name": "type", "$ref": "EventType", "description": "Event type." },
+                { "name": "data", "type": "object", "description": "Event data." },
+                { "name": "children", "type": "array", "optional": true, "items": { "$ref": "TimelineEvent" }, "description": "Nested records." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "start",
+            "description": "Starts capturing instrumentation events.",
+            "parameters": [
+                { "name": "maxCallStackDepth", "optional": true, "type": "integer", "description": "Samples JavaScript stack traces up to <code>maxCallStackDepth</code>, defaults to 5." }
+            ]
+        },
+        {
+            "name": "stop",
+            "description": "Stops capturing instrumentation events."
+        },
+        {
+            "name": "setAutoCaptureEnabled",
+            "description": "Toggle auto capture state. If <code>true</code> the backend will disable breakpoints and start capturing on navigation. The backend will fire the <code>autoCaptureStarted</code> event when an auto capture starts. The frontend should stop the auto capture when appropriate and re-enable breakpoints.",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "New auto capture state." }
+            ]
+        },
+        {
+            "name": "setInstruments",
+            "description": "Instruments to enable when capture starts on the backend (e.g. auto capture or programmatic capture).",
+            "parameters": [
+                { "name": "instruments", "type": "array", "items": { "$ref": "Instrument" }, "description": "Instruments to enable." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "eventRecorded",
+            "description": "Fired for every instrumentation event while timeline is started.",
+            "parameters": [
+                { "name": "record", "$ref": "TimelineEvent", "description": "Timeline event record data." }
+            ]
+        },
+        {
+            "name": "recordingStarted",
+            "description": "Fired when recording has started.",
+            "parameters": [
+                { "name": "startTime", "type": "number", "description": "Start time of this new recording." }
+            ]
+        },
+        {
+            "name": "recordingStopped",
+            "description": "Fired when recording has stopped.",
+            "parameters": [
+                { "name": "endTime", "type": "number", "description": "End time of this recording." }
+            ]
+        },
+        {
+            "name": "autoCaptureStarted",
+            "description": "Fired when auto capture started."
+        },
+        {
+            "name": "programmaticCaptureStarted",
+            "description": "Fired when programmatic capture starts (console.profile)."
+        },
+        {
+            "name": "programmaticCaptureStopped",
+            "description": "Fired when programmatic capture stops (console.profileEnd)."
+        }
+    ]
+}
+,
+{
+    "domain": "Worker",
+    "availability": "web",
+    "types": [],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enable Worker domain events."
+        },
+        {
+            "name": "disable",
+            "description": "Disable Worker domain events."
+        },
+        {
+            "name": "initialized",
+            "description": "Sent after the frontend has sent all initialization messages and can resume this worker. This command is required to allow execution in the worker.",
+            "parameters": [
+                { "name": "workerId", "type": "string" }
+            ]            
+        },
+        {
+            "name": "sendMessageToWorker",
+            "description": "Send an Inspector Protocol message to be dispatched to a Worker's agents.",
+            "parameters": [
+                { "name": "workerId", "type": "string" },
+                { "name": "message", "type": "string", "description": "JSON Inspector Protocol message (command) to be dispatched on the backend." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "workerCreated",
+            "parameters": [
+                { "name": "workerId", "type": "string" },
+                { "name": "url", "type": "string" }
+            ]
+        },
+        {
+            "name": "workerTerminated",
+            "parameters": [
+                { "name": "workerId", "type": "string" }
+            ]
+        },
+        {
+            "name": "dispatchMessageFromWorker",
+            "parameters": [
+                { "name": "workerId", "type": "string" },
+                { "name": "message", "type": "string", "description": "JSON Inspector Protocol message (response or event) to be dispatched on the frontend." }
+            ]
+        }
+    ]
+}
+]}
diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-7.0.json b/Source/WebInspectorUI/Versions/Inspector-iOS-7.0.json
new file mode 100644
index 000000000..dbf6e5abc
--- /dev/null
+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-7.0.json
@@ -0,0 +1,2682 @@
+{
+    "domains": [{
+        "domain": "Inspector",
+        "types": [],
+        "commands": [
+            {
+                "name": "enable",
+                "description": "Enables inspector domain notifications."
+            },
+            {
+                "name": "disable",
+                "description": "Disables inspector domain notifications."
+            }
+        ],
+        "events": [
+            {
+                "name": "evaluateForTestInFrontend",
+                "parameters": [
+                    { "name": "testCallId", "type": "integer" },
+                    { "name": "script", "type": "string" }
+                ]
+            },
+            {
+                "name": "inspect",
+                "parameters": [
+                    { "name": "object", "$ref": "Runtime.RemoteObject" },
+                    { "name": "hints", "type": "object" }
+                ]
+            },
+            {
+                "name": "detached",
+                "description": "Fired when remote debugging connection is about to be terminated. Contains detach reason.",
+                "parameters": [
+                    { "name": "reason", "type": "string", "description": "The reason why connection has been terminated." }
+                ]
+            },
+            {
+                "name": "targetCrashed",
+                "description": "Fired when debugging target has crashed"
+            }
+        ]
+    },
+    {
+        "domain": "Page",
+        "description": "Actions and events related to the inspected page belong to the page domain.",
+        "types": [
+            {
+                "id": "ResourceType",
+                "type": "string",
+                "enum": ["Document", "Stylesheet", "Image", "Font", "Script", "XHR", "WebSocket", "Other"],
+                "description": "Resource type as it was perceived by the rendering engine."
+            },
+            {
+                "id": "Frame",
+                "type": "object",
+                "description": "Information about the Frame on the page.",
+                "properties": [
+                    { "name": "id", "type": "string", "description": "Frame unique identifier." },
+                    { "name": "parentId", "type": "string", "optional": true, "description": "Parent frame identifier." },
+                    { "name": "loaderId", "$ref": "Network.LoaderId", "description": "Identifier of the loader associated with this frame." },
+                    { "name": "name", "type": "string", "optional": true, "description": "Frame's name as specified in the tag." },
+                    { "name": "url", "type": "string", "description": "Frame document's URL." },
+                    { "name": "securityOrigin", "type": "string", "description": "Frame document's security origin." },
+                    { "name": "mimeType", "type": "string", "description": "Frame document's mimeType as determined by the browser." }
+                ]
+            },
+            {
+                "id": "FrameResource",
+                "type": "object",
+                "properties": [
+                    { "name": "url", "type": "string", "description": "Resource URL." },
+                    { "name": "type", "$ref": "ResourceType", "description": "Type of this resource." },
+                    { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                    { "name": "failed", "type": "boolean", "optional": true, "description": "True if the resource failed to load." },
+                    { "name": "canceled", "type": "boolean", "optional": true, "description": "True if the resource was canceled during loading." },
+                    { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+                ]
+            },
+            {
+                "id": "FrameResourceTree",
+                "type": "object",
+                "description": "Information about the Frame hierarchy along with their cached resources.",
+                "properties": [
+                    { "name": "frame", "$ref": "Frame", "description": "Frame information for this tree item." },
+                    { "name": "childFrames", "type": "array", "optional": true, "items": { "$ref": "FrameResourceTree" }, "description": "Child frames." },
+                    { "name": "resources", "type": "array", "items": { "$ref": "FrameResource" }, "description": "Information about frame resources." }
+                ]
+            },
+            {
+                "id": "SearchMatch",
+                "type": "object",
+                "description": "Search match for resource.",
+                "properties": [
+                    { "name": "lineNumber", "type": "number", "description": "Line number in resource content." },
+                    { "name": "lineContent", "type": "string", "description": "Line with match content." }
+                ]
+            },
+            {
+                "id": "SearchResult",
+                "type": "object",
+                "description": "Search result for resource.",
+                "properties": [
+                    { "name": "url", "type": "string", "description": "Resource URL." },
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Resource frame id." },
+                    { "name": "matchesCount", "type": "number", "description": "Number of matches in the resource content." }
+                ]
+            },
+            {
+                "id": "Cookie",
+                "type": "object",
+                "description": "Cookie object",
+                "properties": [
+                    { "name": "name", "type": "string", "description": "Cookie name." },
+                    { "name": "value", "type": "string", "description": "Cookie value." },
+                    { "name": "domain", "type": "string", "description": "Cookie domain." },
+                    { "name": "path", "type": "string", "description": "Cookie path." },
+                    { "name": "expires", "type": "number", "description": "Cookie expires." },
+                    { "name": "size", "type": "integer", "description": "Cookie size." },
+                    { "name": "httpOnly", "type": "boolean", "description": "True if cookie is http-only." },
+                    { "name": "secure", "type": "boolean", "description": "True if cookie is secure." },
+                    { "name": "session", "type": "boolean", "description": "True in case of session cookie." }
+                ]
+            },
+            {
+                "id": "ScriptIdentifier",
+                "type": "string",
+                "description": "Unique script identifier."
+            }
+        ],
+        "commands": [
+            {
+                "name": "enable",
+                "description": "Enables page domain notifications."
+            },
+            {
+                "name": "disable",
+                "description": "Disables page domain notifications."
+            },
+            {
+                "name": "addScriptToEvaluateOnLoad",
+                "parameters": [
+                    { "name": "scriptSource", "type": "string" }
+                ],
+                "returns": [
+                    { "name": "identifier", "$ref": "ScriptIdentifier", "description": "Identifier of the added script." }
+                ]
+            },
+            {
+                "name": "removeScriptToEvaluateOnLoad",
+                "parameters": [
+                    { "name": "identifier", "$ref": "ScriptIdentifier" }
+                ]
+            },
+            {
+                "name": "reload",
+                "parameters": [
+                    { "name": "ignoreCache", "type": "boolean", "optional": true, "description": "If true, browser cache is ignored (as if the user pressed Shift+refresh)." },
+                    { "name": "scriptToEvaluateOnLoad", "type": "string", "optional": true, "description": "If set, the script will be injected into all frames of the inspected page after reload." },
+                    { "name": "scriptPreprocessor", "type": "string", "optional": true, "description": "Script body that should evaluate to function that will preprocess all the scripts before their compilation." }
+                ],
+                "description": "Reloads given page optionally ignoring the cache."
+            },
+            {
+                "name": "navigate",
+                "parameters": [
+                    { "name": "url", "type": "string", "description": "URL to navigate the page to." }
+                ],
+                "description": "Navigates current page to the given URL."
+            },
+            {
+                "name": "getCookies",
+                "returns": [
+                    { "name": "cookies", "type": "array", "items": { "$ref": "Cookie"}, "description": "Array of cookie objects." },
+                    { "name": "cookiesString", "type": "string", "description": "document.cookie string representation of the cookies." }
+                ],
+                "description": "Returns all browser cookies. Depending on the backend support, will either return detailed cookie information in the <code>cookie</code> field or string cookie representation using <code>cookieString</code>."
+            },
+            {
+                "name": "deleteCookie",
+                "parameters": [
+                    { "name": "cookieName", "type": "string", "description": "Name of the cookie to remove." },
+                    { "name": "url", "type": "string", "description": "URL to match cooke domain and path." }
+                ],
+                "description": "Deletes browser cookie with given name, domain and path."
+            },
+            {
+                "name": "getResourceTree",
+                "description": "Returns present frame / resource tree structure.",
+                "returns": [
+                    { "name": "frameTree", "$ref": "FrameResourceTree", "description": "Present frame / resource tree structure." }
+                ]
+            },
+            {
+                "name": "getResourceContent",
+                "description": "Returns content of the given resource.",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to get resource for." },
+                    { "name": "url", "type": "string", "description": "URL of the resource to get content for." }
+                ],
+                "returns": [
+                    { "name": "content", "type": "string", "description": "Resource content." },
+                    { "name": "base64Encoded", "type": "boolean", "description": "True, if content was served as base64." }
+                ]
+            },
+            {
+                "name": "searchInResource",
+                "description": "Searches for given string in resource content.",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id for resource to search in." },
+                    { "name": "url", "type": "string", "description": "URL of the resource to search in." },
+                    { "name": "query", "type": "string", "description": "String to search for."  },
+                    { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                    { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+                ],
+                "returns": [
+                    { "name": "result", "type": "array", "items": { "$ref": "SearchMatch" }, "description": "List of search matches." }
+                ]
+            },
+            {
+                "name": "searchInResources",
+                "description": "Searches for given string in frame / resource tree structure.",
+                "parameters": [
+                    { "name": "text", "type": "string", "description": "String to search for."  },
+                    { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                    { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+                ],
+                "returns": [
+                    { "name": "result", "type": "array", "items": { "$ref": "SearchResult" }, "description": "List of search results." }
+                ]
+            },
+            {
+                "name": "setDocumentContent",
+                "description": "Sets given markup as the document's HTML.",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to set HTML for." },
+                    { "name": "html", "type": "string", "description": "HTML content to set."  }
+                ]
+            },
+            {
+                "name": "getScriptExecutionStatus",
+                "description": "Determines if scripts can be executed in the page.",
+                "returns": [
+                    { "name": "result", "type": "string", "enum": ["allowed", "disabled", "forbidden"], "description": "Script execution status: \"allowed\" if scripts can be executed, \"disabled\" if script execution has been disabled through page settings, \"forbidden\" if script execution for the given page is not possible for other reasons." }
+                ]
+            },
+            {
+                "name": "setScriptExecutionDisabled",
+                "description": "Switches script execution in the page.",
+                "parameters": [
+                    { "name": "value", "type": "boolean", "description": "Whether script execution should be disabled in the page." }
+                ]
+            },
+            {
+                "name": "setEmulatedMedia",
+                "parameters": [
+                    { "name": "media", "type": "string", "description": "Media type to emulate. Empty string disables the override." }
+                ],
+                "description": "Emulates the given media for CSS media queries."
+            },
+            {
+                "name": "getCompositingBordersVisible",
+                "description": "Indicates the visibility of compositing borders.",
+                "returns": [
+                    { "name": "result", "type": "boolean", "description": "If true, compositing borders are visible." }
+                ]
+            },
+            {
+                "name": "setCompositingBordersVisible",
+                "description": "Controls the visibility of compositing borders.",
+                "parameters": [
+                    { "name": "visible", "type": "boolean", "description": "True for showing compositing borders." }
+                ]
+            }
+        ],
+        "events": [
+            {
+                "name": "domContentEventFired",
+                "parameters": [
+                    { "name": "timestamp", "type": "number" }
+                ]
+            },
+            {
+                "name": "loadEventFired",
+                "parameters": [
+                    { "name": "timestamp", "type": "number" }
+                ]
+            },
+            {
+                "name": "frameNavigated",
+                "description": "Fired once navigation of the frame has completed. Frame is now associated with the new loader.",
+                "parameters": [
+                    { "name": "frame", "$ref": "Frame", "description": "Frame object." }
+                ]
+            },
+            {
+                "name": "frameDetached",
+                "description": "Fired when frame has been detached from its parent.",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has been detached." }
+                ]
+            },
+            {
+                "name": "frameStartedLoading",
+                "description": "Fired when frame has started loading.",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has started loading." }
+                ]
+            },
+            {
+                "name": "frameStoppedLoading",
+                "description": "Fired when frame has stopped loading.",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has stopped loading." }
+                ]
+            },
+            {
+                "name": "frameScheduledNavigation",
+                "description": "Fired when frame schedules a potential navigation.",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has scheduled a navigation." },
+                    { "name": "delay", "type": "number", "description": "Delay (in seconds) until the navigation is scheduled to begin. The navigation is not guaranteed to start." }
+                ]
+            },
+            {
+                "name": "frameClearedScheduledNavigation",
+                "description": "Fired when frame no longer has a scheduled navigation.",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has cleared its scheduled navigation." }
+                ]
+            },
+            {
+                "name": "javascriptDialogOpening",
+                "description": "Fired when a JavaScript initiated dialog (alert, confirm, prompt, or onbeforeunload) is about to open.",
+                "parameters": [
+                    { "name": "message", "type": "string", "description": "Message that will be displayed by the dialog." }
+                ]
+            },
+            {
+                "name": "javascriptDialogClosed",
+                "description": "Fired when a JavaScript initiated dialog (alert, confirm, prompt, or onbeforeunload) has been closed."
+            },
+            {
+                "name": "scriptsEnabled",
+                "description": "Fired when the JavaScript is enabled/disabled on the page",
+                "parameters": [
+                    { "name": "isEnabled", "type": "boolean", "description": "Whether script execution is enabled or disabled on the page." }
+                ]
+            }
+        ]
+    },
+    {
+        "domain": "Runtime",
+        "description": "Runtime domain exposes JavaScript runtime by means of remote evaluation and mirror objects. Evaluation results are returned as mirror object that expose object type, string representation and unique identifier that can be used for further object reference. Original objects are maintained in memory unless they are either explicitly released or are released along with the other objects in their object group.",
+        "types": [
+            {
+                "id": "RemoteObjectId",
+                "type": "string",
+                "description": "Unique object identifier."
+            },
+            {
+                "id": "RemoteObject",
+                "type": "object",
+                "description": "Mirror object referencing original JavaScript object.",
+                "properties": [
+                    { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean"], "description": "Object type." },
+                    { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date"], "description": "Object subtype hint. Specified for <code>object</code> type values only." },
+                    { "name": "className", "type": "string", "optional": true, "description": "Object class (constructor) name. Specified for <code>object</code> type values only." },
+                    { "name": "value", "type": "any", "optional": true, "description": "Remote object value (in case of primitive values or JSON values if it was requested)." },
+                    { "name": "description", "type": "string", "optional": true, "description": "String representation of the object." },
+                    { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Unique object identifier (for non-primitive values)." },
+                    { "name": "preview", "$ref": "ObjectPreview", "optional": true, "description": "Preview containsing abbreviated property values." }
+                ]
+            },
+            {
+                "id": "ObjectPreview",
+                "type": "object",
+                "description": "Object containing abbreviated remote object value.",
+                "properties": [
+                    { "name": "lossless", "type": "boolean", "description": "Determines whether preview is lossless (contains all information of the original object)." },
+                    { "name": "overflow", "type": "boolean", "description": "True iff some of the properties of the original did not fit." },
+                    { "name": "properties", "type": "array", "items": { "$ref": "PropertyPreview" }, "description": "List of the properties." }
+                ]
+            },
+            {
+                "id": "PropertyPreview",
+                "type": "object",
+                "properties": [
+                    { "name": "name", "type": "string", "description": "Property name." },
+	                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean"], "description": "Object type." },
+	                { "name": "value", "type": "string", "optional": true, "description": "User-friendly property value string." },
+	                { "name": "valuePreview", "$ref": "ObjectPreview", "optional": true, "description": "Nested value preview." },
+	                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date"], "description": "Object subtype hint. Specified for <code>object</code> type values only." }
+                ]
+            },
+            {
+                "id": "PropertyDescriptor",
+                "type": "object",
+                "description": "Object property descriptor.",
+                "properties": [
+                    { "name": "name", "type": "string", "description": "Property name." },
+                    { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." },
+                    { "name": "writable", "type": "boolean", "optional": true, "description": "True if the value associated with the property may be changed (data descriptors only)." },
+                    { "name": "get", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a getter for the property, or <code>undefined</code> if there is no getter (accessor descriptors only)." },
+                    { "name": "set", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a setter for the property, or <code>undefined</code> if there is no setter (accessor descriptors only)." },
+                    { "name": "configurable", "type": "boolean", "description": "True if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object." },
+                    { "name": "enumerable", "type": "boolean", "description": "True if this property shows up during enumeration of the properties on the corresponding object." },
+                    { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                    { "name": "isOwn", "optional": true, "type": "boolean", "description": "True if the property is owned for the object." }
+                ]
+            },
+            {
+                "id": "InternalPropertyDescriptor",
+                "type": "object",
+                "description": "Object internal property descriptor. This property isn't normally visible in JavaScript code.",
+                "properties": [
+                    { "name": "name", "type": "string", "description": "Conventional property name." },
+                    { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." }
+                ]
+            },
+            {
+                "id": "CallArgument",
+                "type": "object",
+                "description": "Represents function call argument. Either remote object id <code>objectId</code> or primitive <code>value</code> or neither of (for undefined) them should be specified.",
+                "properties": [
+                    { "name": "value", "type": "any", "optional": true, "description": "Primitive value." },
+                    { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Remote object handle." }
+                ]
+            },
+            {
+                "id": "ExecutionContextId",
+                "type": "integer",
+                "description": "Id of an execution context."
+            },
+            {
+                "id": "ExecutionContextDescription",
+                "type": "object",
+                "description": "Description of an isolated world.",
+                "properties": [
+                    { "name": "id", "$ref": "ExecutionContextId", "description": "Unique id of the execution context. It can be used to specify in which execution context script evaluation should be performed." },
+                    { "name": "isPageContext", "type": "boolean", "description": "True if this is a context where inpspected web page scripts run. False if it is a content script isolated context." },
+                    { "name": "name", "type": "string", "description": "Human readable name describing given context."},
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the owning frame." }
+                ]
+            },
+            {
+                "id": "SyntaxErrorType",
+                "type": "string",
+                "enum": ["none", "irrecoverable", "unterminated-literal", "recoverable"],
+                "description": "Syntax error type: \"none\" for no error, \"irrecoverable\" for unrecoverable errors, \"unterminated-literal\" for when there is an unterminated literal, \"recoverable\" for when the expression is unfinished but valid so far."
+            },
+            {
+                "id": "ErrorRange",
+                "type": "object",
+                "description": "Range of an error in source code.",
+                "properties": [
+                    { "name": "startOffset", "type": "integer", "description": "Start offset of range (inclusive)." },
+                    { "name": "endOffset", "type": "integer", "description": "End offset of range (exclusive)." }
+                ]
+            }
+        ],
+        "commands": [
+            {
+                "name": "parse",
+                "parameters": [
+                    { "name": "source", "type": "string", "description": "Source code to parse." }
+                ],
+                "returns": [
+                    { "name": "result", "$ref": "SyntaxErrorType", "description": "Parse result." },
+                    { "name": "message", "type": "string", "optional": true, "description": "Parse error message." },
+                    { "name": "range", "$ref": "ErrorRange", "optional": true, "description": "Range in the source where the error occurred." }
+                ],
+                "description": "Parses JavaScript source code for errors."
+            },
+            {
+                "name": "evaluate",
+                "parameters": [
+                    { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                    { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." },
+                    { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Determines whether Command Line API should be available during the evaluation." },
+                    { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                    { "name": "contextId", "$ref": "Runtime.ExecutionContextId", "optional": true, "description": "Specifies in which isolated context to perform evaluation. Each content script lives in an isolated context and this parameter may be used to specify one of those contexts. If the parameter is omitted or 0 the evaluation will be performed in the context of the inspected page." },
+                    { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                    { "name": "generatePreview", "type": "boolean", "optional": true,  "description": "Whether preview should be generated for the result." }
+                ],
+                "returns": [
+                    { "name": "result", "$ref": "RemoteObject", "description": "Evaluation result." },
+                    { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
+                ],
+                "description": "Evaluates expression on global object."
+            },
+            {
+                "name": "callFunctionOn",
+                "parameters": [
+                    { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to call function on." },
+                    { "name": "functionDeclaration", "type": "string", "description": "Declaration of the function to call." },
+                    { "name": "arguments", "type": "array", "items": { "$ref": "CallArgument", "description": "Call argument." }, "optional": true, "description": "Call arguments. All call arguments must belong to the same JavaScript world as the target object." },
+                    { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether function call should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                    { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object which should be sent by value." },
+                    { "name": "generatePreview", "type": "boolean", "optional": true,  "description": "Whether preview should be generated for the result." }
+                ],
+                "returns": [
+                    { "name": "result", "$ref": "RemoteObject", "description": "Call result." },
+                    { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
+                ],
+                "description": "Calls function with given declaration on the given object. Object group of the result is inherited from the target object."
+            },
+            {
+                "name": "getProperties",
+                "parameters": [
+                    { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to return properties for." },
+                    { "name": "ownProperties", "optional": true, "type": "boolean", "description": "If true, returns properties belonging only to the element itself, not to its prototype chain." }
+                ],
+                "returns": [
+                    { "name": "result", "type": "array", "items": { "$ref": "PropertyDescriptor"}, "description": "Object properties." },
+                    { "name": "internalProperties", "optional": true, "type": "array", "items": { "$ref": "InternalPropertyDescriptor"}, "description": "Internal object properties." }
+                ],
+                "description": "Returns properties of a given object. Object group of the result is inherited from the target object."
+            },
+            {
+                "name": "releaseObject",
+                "parameters": [
+                    { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to release." }
+                ],
+                "description": "Releases remote object with given id."
+            },
+            {
+                "name": "releaseObjectGroup",
+                "parameters": [
+                    { "name": "objectGroup", "type": "string", "description": "Symbolic object group name." }
+                ],
+                "description": "Releases all remote objects that belong to a given group."
+            },
+            {
+                "name": "enable",
+                "description": "Enables reporting of execution contexts creation by means of <code>executionContextCreated</code> event. When the reporting gets enabled the event will be sent immediately for each existing execution context."
+            },
+            {
+                "name": "disable",
+                "description": "Disables reporting of execution contexts creation."
+            }
+        ],
+        "events": [
+            {
+                "name": "executionContextCreated",
+                "parameters": [
+                    { "name": "context", "$ref": "ExecutionContextDescription", "description": "A newly created execution contex." }
+                ],
+                "description": "Issued when new execution context is created."
+            }
+        ]
+    },
+    {
+        "domain": "Console",
+        "description": "Console domain defines methods and events for interaction with the JavaScript console. Console collects messages created by means of the <a href='http://getfirebug.com/wiki/index.php/Console_API'>JavaScript Console API</a>. One needs to enable this domain using <code>enable</code> command in order to start receiving the console messages. Browser collects messages issued while console domain is not enabled as well and reports them using <code>messageAdded</code> notification upon enabling.",
+        "types": [
+            {
+                "id": "ConsoleMessage",
+                "type": "object",
+                "description": "Console message.",
+                "properties": [
+                    { "name": "source", "type": "string", "enum": ["xml", "javascript", "network", "console-api", "storage", "appcache", "rendering", "css", "security", "other"], "description": "Message source." },
+                    { "name": "level", "type": "string", "enum": ["log", "warning", "error", "debug"], "description": "Message severity." },
+                    { "name": "text", "type": "string", "description": "Message text." },
+                    { "name": "type", "type": "string", "optional": true, "enum": ["log", "dir", "dirxml", "table", "trace", "clear", "startGroup", "startGroupCollapsed", "endGroup", "assert", "timing", "profile", "profileEnd"], "description": "Console message type." },
+                    { "name": "url", "type": "string", "optional": true, "description": "URL of the message origin." },
+                    { "name": "line", "type": "integer", "optional": true, "description": "Line number in the resource that generated this message." },
+                    { "name": "column", "type": "integer", "optional": true, "description": "Column number on the line in the resource that generated this message." },
+                    { "name": "repeatCount", "type": "integer", "optional": true, "description": "Repeat count for repeated messages." },
+                    { "name": "parameters", "type": "array", "items": { "$ref": "Runtime.RemoteObject" }, "optional": true, "description": "Message parameters in case of the formatted message." },
+                    { "name": "stackTrace", "$ref": "StackTrace", "optional": true, "description": "JavaScript stack trace for assertions and error messages." },
+                    { "name": "networkRequestId", "$ref": "Network.RequestId", "optional": true, "description": "Identifier of the network request associated with this message." }
+                ]
+            },
+            {
+                "id": "CallFrame",
+                "type": "object",
+                "description": "Stack entry for console errors and assertions.",
+                "properties": [
+                    { "name": "functionName", "type": "string", "description": "JavaScript function name." },
+                    { "name": "url", "type": "string", "description": "JavaScript script name or url." },
+                    { "name": "lineNumber", "type": "integer", "description": "JavaScript script line number." },
+                    { "name": "columnNumber", "type": "integer", "description": "JavaScript script column number." }
+                ]
+            },
+            {
+                "id": "StackTrace",
+                "type": "array",
+                "items": { "$ref": "CallFrame" },
+                "description": "Call frames for assertions or error messages."
+            }
+        ],
+        "commands": [
+            {
+                "name": "enable",
+                "description": "Enables console domain, sends the messages collected so far to the client by means of the <code>messageAdded</code> notification."
+            },
+            {
+                "name": "disable",
+                "description": "Disables console domain, prevents further console messages from being reported to the client."
+            },
+            {
+                "name": "clearMessages",
+                "description": "Clears console messages collected in the browser."
+            },
+            {
+                "name": "setMonitoringXHREnabled",
+                "parameters": [
+                    { "name": "enabled", "type": "boolean", "description": "Monitoring enabled state." }
+                ],
+                "description": "Toggles monitoring of XMLHttpRequest. If <code>true</code>, console will receive messages upon each XHR issued."
+            },
+            {
+                "name": "addInspectedNode",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "DOM.NodeId", "description": "DOM node id to be accessible by means of $x command line API." }
+                ],
+                "description": "Enables console to refer to the node with given id via $x (see Command Line API for more details $x functions)."
+            }
+        ],
+        "events": [
+            {
+                "name": "messageAdded",
+                "parameters": [
+                    { "name": "message", "$ref": "ConsoleMessage", "description": "Console message that has been added." }
+                ],
+                "description": "Issued when new console message is added."
+            },
+            {
+                "name": "messageRepeatCountUpdated",
+                "parameters": [
+                    { "name": "count", "type": "integer", "description": "New repeat count value." }
+                ],
+                "description": "Issued when subsequent message(s) are equal to the previous one(s)."
+            },
+            {
+                "name": "messagesCleared",
+                "description": "Issued when console is cleared. This happens either upon <code>clearMessages</code> command or after page navigation."
+            }
+        ]
+    },
+    {
+        "domain": "Network",
+        "description": "Network domain allows tracking network activities of the page. It exposes information about http, file, data and other requests and responses, their headers, bodies, timing, etc.",
+        "types": [
+            {
+                "id": "LoaderId",
+                "type": "string",
+                "description": "Unique loader identifier."
+            },
+            {
+                "id": "FrameId",
+                "type": "string",
+                "description": "Unique frame identifier."
+            },
+            {
+                "id": "RequestId",
+                "type": "string",
+                "description": "Unique request identifier."
+            },
+            {
+                "id": "Timestamp",
+                "type": "number",
+                "description": "Number of seconds since epoch."
+            },
+            {
+                "id": "Headers",
+                "type": "object",
+                "description": "Request / response headers as keys / values of JSON object."
+            },
+            {
+                "id": "ResourceTiming",
+                "type": "object",
+                "description": "Timing information for the request.",
+                "properties": [
+                    { "name": "requestTime", "type": "number", "description": "Timing's requestTime is a baseline in seconds, while the other numbers are ticks in milliseconds relatively to this requestTime." },
+                    { "name": "proxyStart", "type": "number", "description": "Started resolving proxy." },
+                    { "name": "proxyEnd", "type": "number", "description": "Finished resolving proxy." },
+                    { "name": "dnsStart", "type": "number", "description": "Started DNS address resolve." },
+                    { "name": "dnsEnd", "type": "number", "description": "Finished DNS address resolve." },
+                    { "name": "connectStart", "type": "number", "description": "Started connecting to the remote host." },
+                    { "name": "connectEnd", "type": "number", "description": "Connected to the remote host." },
+                    { "name": "sslStart", "type": "number", "description": "Started SSL handshake." },
+                    { "name": "sslEnd", "type": "number", "description": "Finished SSL handshake." },
+                    { "name": "sendStart", "type": "number", "description": "Started sending request." },
+                    { "name": "sendEnd", "type": "number", "description": "Finished sending request." },
+                    { "name": "receiveHeadersEnd", "type": "number", "description": "Finished receiving response headers." }
+                ]
+            },
+            {
+                "id": "Request",
+                "type": "object",
+                "description": "HTTP request data.",
+                "properties": [
+                    { "name": "url", "type": "string", "description": "Request URL." },
+                    { "name": "method", "type": "string", "description": "HTTP request method." },
+                    { "name": "headers", "$ref": "Headers", "description": "HTTP request headers." },
+                    { "name": "postData", "type": "string", "optional": true, "description": "HTTP POST request data." }
+                ]
+            },
+            {
+                "id": "Response",
+                "type": "object",
+                "description": "HTTP response data.",
+                "properties": [
+                    { "name": "url", "type": "string", "description": "Response URL. This URL can be different from CachedResource.url in case of redirect." },
+                    { "name": "status", "type": "number", "description": "HTTP response status code." },
+                    { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                    { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." },
+                    { "name": "headersText", "type": "string", "optional": true, "description": "HTTP response headers text." },
+                    { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                    { "name": "requestHeaders", "$ref": "Headers", "optional": true, "description": "Refined HTTP request headers that were actually transmitted over the network." },
+                    { "name": "requestHeadersText", "type": "string", "optional": true, "description": "HTTP request headers text." },
+                    { "name": "connectionReused", "type": "boolean", "description": "Specifies whether physical connection was actually reused for this request." },
+                    { "name": "connectionId", "type": "number", "description": "Physical connection id that was actually used for this request." },
+                    { "name": "fromDiskCache", "type": "boolean", "optional": true, "description": "Specifies that the request was served from the disk cache." },
+                    { "name": "timing", "$ref": "ResourceTiming", "optional": true, "description": "Timing information for the given request." }
+                ]
+            },
+            {
+                "id": "WebSocketRequest",
+                "type": "object",
+                "description": "WebSocket request data.",
+                "properties": [
+                    { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+                ]
+            },
+            {
+                "id": "WebSocketResponse",
+                "type": "object",
+                "description": "WebSocket response data.",
+                "properties": [
+                    { "name": "status", "type": "number", "description": "HTTP response status code." },
+                    { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                    { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+                ]
+            },
+            {
+                "id": "WebSocketFrame",
+                "type": "object",
+                "description": "WebSocket frame data.",
+                "properties": [
+                    { "name": "opcode", "type": "number", "description": "WebSocket frame opcode." },
+                    { "name": "mask", "type": "boolean", "description": "WebSocket frame mask." },
+                    { "name": "payloadData", "type": "string", "description": "WebSocket frame payload data." }
+                ]
+            },
+            {
+                "id": "CachedResource",
+                "type": "object",
+                "description": "Information about the cached resource.",
+                "properties": [
+                    { "name": "url", "type": "string", "description": "Resource URL. This is the url of the original network request." },
+                    { "name": "type", "$ref": "Page.ResourceType", "description": "Type of this resource." },
+                    { "name": "response", "$ref": "Response", "optional": true, "description": "Cached response data." },
+                    { "name": "bodySize", "type": "number", "description": "Cached response body size." },
+                    { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+                ]
+            },
+            {
+                "id": "Initiator",
+                "type": "object",
+                "description": "Information about the request initiator.",
+                "properties": [
+                    { "name": "type", "type": "string", "enum": ["parser", "script", "other"], "description": "Type of this initiator." },
+                    { "name": "stackTrace", "$ref": "Console.StackTrace", "optional": true, "description": "Initiator JavaScript stack trace, set for Script only." },
+                    { "name": "url", "type": "string", "optional": true, "description": "Initiator URL, set for Parser type only." },
+                    { "name": "lineNumber", "type": "number", "optional": true, "description": "Initiator line number, set for Parser type only." }
+                ]
+            }
+        ],
+        "commands": [
+            {
+                "name": "enable",
+                "description": "Enables network tracking, network events will now be delivered to the client."
+            },
+            {
+                "name": "disable",
+                "description": "Disables network tracking, prevents network events from being sent to the client."
+            },
+            {
+                "name": "setExtraHTTPHeaders",
+                "description": "Specifies whether to always send extra HTTP headers with the requests from this page.",
+                "parameters": [
+                    { "name": "headers", "$ref": "Headers", "description": "Map with extra HTTP headers." }
+                ]
+            },
+            {
+                "name": "getResponseBody",
+                "description": "Returns content served for the given request.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Identifier of the network request to get content for." }
+                ],
+                "returns": [
+                    { "name": "body", "type": "string", "description": "Response body." },
+                    { "name": "base64Encoded", "type": "boolean", "description": "True, if content was sent as base64." }
+                ]
+            },
+            {
+                "name": "setCacheDisabled",
+                "parameters": [
+                    { "name": "cacheDisabled", "type": "boolean", "description": "Cache disabled state." }
+                ],
+                "description": "Toggles ignoring cache for each request. If <code>true</code>, cache will not be used."
+            }
+        ],
+        "events": [
+            {
+                "name": "requestWillBeSent",
+                "description": "Fired when page is about to send HTTP request.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                    { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                    { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                    { "name": "request", "$ref": "Request", "description": "Request data." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                    { "name": "redirectResponse", "optional": true, "$ref": "Response", "description": "Redirect response data." },
+                    { "name": "type", "$ref": "Page.ResourceType", "optional": true, "description": "Resource type." }
+                ]
+            },
+            {
+                "name": "requestServedFromCache",
+                "description": "Fired if request ended up loading from cache.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." }
+                ]
+            },
+            {
+                "name": "responseReceived",
+                "description": "Fired when HTTP response is available.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                    { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "type", "$ref": "Page.ResourceType", "description": "Resource type." },
+                    { "name": "response", "$ref": "Response", "description": "Response data." }
+                ]
+            },
+            {
+                "name": "dataReceived",
+                "description": "Fired when data chunk was received over the network.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "dataLength", "type": "integer", "description": "Data chunk length." },
+                    { "name": "encodedDataLength", "type": "integer", "description": "Actual bytes received (might be less than dataLength for compressed encodings)." }
+                ]
+            },
+            {
+                "name": "loadingFinished",
+                "description": "Fired when HTTP request has finished loading.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+                ]
+            },
+            {
+                "name": "loadingFailed",
+                "description": "Fired when HTTP request has failed to load.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "errorText", "type": "string", "description": "User friendly error message." },
+                    { "name": "canceled", "type": "boolean", "optional": true, "description": "True if loading was canceled." }
+                ]
+            },
+            {
+                "name": "requestServedFromMemoryCache",
+                "description": "Fired when HTTP request has been served from memory cache.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                    { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                    { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                    { "name": "resource", "$ref": "CachedResource", "description": "Cached resource data." }
+                ]
+            },
+            {
+                "name": "webSocketWillSendHandshakeRequest",
+                "description": "Fired when WebSocket is about to initiate handshake.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "request", "$ref": "WebSocketRequest", "description": "WebSocket request data." }
+                ]
+            },
+            {
+                "name": "webSocketHandshakeResponseReceived",
+                "description": "Fired when WebSocket handshake response becomes available.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "response", "$ref": "WebSocketResponse", "description": "WebSocket response data." }
+                ]
+            },
+            {
+                "name": "webSocketCreated",
+                "description": "Fired upon WebSocket creation.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "url", "type": "string", "description": "WebSocket request URL." }
+                ]
+            },
+            {
+                "name": "webSocketClosed",
+                "description": "Fired when WebSocket is closed.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." }
+                ]
+            },
+            {
+                "name": "webSocketFrameReceived",
+                "description": "Fired when WebSocket frame is received.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+                ]
+            },
+            {
+                "name": "webSocketFrameError",
+                "description": "Fired when WebSocket frame error occurs.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "errorMessage", "type": "string", "description": "WebSocket frame error message." }
+                ]
+            },
+            {
+                "name": "webSocketFrameSent",
+                "description": "Fired when WebSocket frame is sent.",
+                "parameters": [
+                    { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                    { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                    { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+                ]
+            }
+        ]
+    },
+    {
+        "domain": "Database",
+        "types": [
+            {
+                "id": "DatabaseId",
+                "type": "string",
+                "description": "Unique identifier of Database object."
+            },
+            {
+                "id": "Database",
+                "type": "object",
+                "description": "Database object.",
+                "properties": [
+                    { "name": "id", "$ref": "DatabaseId", "description": "Database ID." },
+                    { "name": "domain", "type": "string", "description": "Database domain." },
+                    { "name": "name", "type": "string", "description": "Database name." },
+                    { "name": "version", "type": "string", "description": "Database version." }
+                ]
+            },
+            {
+                "id": "Error",
+                "type": "object",
+                "description": "Database error.",
+                "properties": [
+                    { "name": "message", "type": "string", "description": "Error message." },
+                    { "name": "code", "type": "integer", "description": "Error code." }
+                ]
+            }
+        ],
+        "commands": [
+            {
+                "name": "enable",
+                "description": "Enables database tracking, database events will now be delivered to the client."
+            },
+            {
+                "name": "disable",
+                "description": "Disables database tracking, prevents database events from being sent to the client."
+            },
+            {
+                "name": "getDatabaseTableNames",
+                "parameters": [
+                    { "name": "databaseId", "$ref": "DatabaseId" }
+                ],
+                "returns": [
+                    { "name": "tableNames", "type": "array", "items": { "type": "string" } }
+                ]
+            },
+            {
+                "name": "executeSQL",
+                "async": true,
+                "parameters": [
+                    { "name": "databaseId", "$ref": "DatabaseId" },
+                    { "name": "query", "type": "string" }
+                ],
+                "returns": [
+                    { "name": "columnNames", "type": "array", "optional": true, "items": { "type": "string" } },
+                    { "name": "values", "type": "array", "optional": true, "items": { "type": "any" }},
+                    { "name": "sqlError", "$ref": "Error", "optional": true }
+                ]
+            }
+        ],
+        "events": [
+            {
+                "name": "addDatabase",
+                "parameters": [
+                    { "name": "database", "$ref": "Database" }
+                ]
+            }
+        ]
+    },
+    {
+        "domain": "DOMStorage",
+        "description": "Query and modify DOM storage.",
+        "types": [
+            {
+                "id": "StorageId",
+                "type": "object",
+                "description": "DOM Storage identifier.",
+                "properties": [
+                    { "name": "securityOrigin", "type": "string", "description": "Security origin for the storage." },
+                    { "name": "isLocalStorage", "type": "boolean", "description": "Whether the storage is local storage (not session storage)." }
+                ]
+            },
+            {
+                "id": "Item",
+                "type": "array",
+                "description": "DOM Storage item.",
+                "items": { "type": "string" }
+            }
+        ],
+        "commands": [
+            {
+                "name": "enable",
+                "description": "Enables storage tracking, storage events will now be delivered to the client."
+            },
+            {
+                "name": "disable",
+                "description": "Disables storage tracking, prevents storage events from being sent to the client."
+            },
+            {
+                "name": "getDOMStorageItems",
+                "parameters": [
+                    { "name": "storageId", "$ref": "StorageId" }
+                ],
+                "returns": [
+                    { "name": "entries", "type": "array", "items": { "$ref": "Item" } }
+                ]
+            },
+            {
+                "name": "setDOMStorageItem",
+                "parameters": [
+                    { "name": "storageId", "$ref": "StorageId" },
+                    { "name": "key", "type": "string" },
+                    { "name": "value", "type": "string" }
+                ]
+            },
+            {
+                "name": "removeDOMStorageItem",
+                "parameters": [
+                    { "name": "storageId", "$ref": "StorageId" },
+                    { "name": "key", "type": "string" }
+                ]
+            }
+        ],
+        "events": [
+            {
+                "name": "domStorageItemsCleared",
+                "parameters": [
+                    { "name": "storageId",  "$ref": "StorageId" }
+                ]
+            },
+            {
+                "name": "domStorageItemRemoved",
+                "parameters": [
+                    { "name": "storageId",  "$ref": "StorageId" },
+                    { "name": "key", "type": "string" }
+                ]
+            },
+            {
+                "name": "domStorageItemAdded",
+                "parameters": [
+                    { "name": "storageId",  "$ref": "StorageId" },
+                    { "name": "key", "type": "string" },
+                    { "name": "newValue", "type": "string" }
+                ]
+            },
+            {
+                "name": "domStorageItemUpdated",
+                "parameters": [
+                    { "name": "storageId",  "$ref": "StorageId" },
+                    { "name": "key", "type": "string" },
+                    { "name": "oldValue", "type": "string" },
+                    { "name": "newValue", "type": "string" }
+                ]
+            }
+        ]
+    },
+    {
+        "domain": "ApplicationCache",
+        "types": [
+            {
+                "id": "ApplicationCacheResource",
+                "type": "object",
+                "description": "Detailed application cache resource information.",
+                "properties": [
+                    { "name": "url", "type": "string", "description": "Resource url." },
+                    { "name": "size", "type": "integer", "description": "Resource size." },
+                    { "name": "type", "type": "string", "description": "Resource type." }
+                ]
+            },
+            {
+                "id": "ApplicationCache",
+                "type": "object",
+                "description": "Detailed application cache information.",
+                "properties": [
+                    { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                    { "name": "size", "type": "number", "description": "Application cache size." },
+                    { "name": "creationTime", "type": "number", "description": "Application cache creation time." },
+                    { "name": "updateTime", "type": "number", "description": "Application cache update time." },
+                    { "name": "resources", "type": "array", "items": { "$ref": "ApplicationCacheResource" }, "description": "Application cache resources." }
+                ]
+            },
+            {
+                "id": "FrameWithManifest",
+                "type": "object",
+                "description": "Frame identifier - manifest URL pair.",
+                "properties": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame identifier." },
+                    { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                    { "name": "status", "type": "integer", "description": "Application cache status." }
+                ]
+            }
+        ],
+        "commands": [
+            {
+                "name": "getFramesWithManifests",
+                "returns": [
+                    { "name": "frameIds", "type": "array", "items": { "$ref": "FrameWithManifest" }, "description": "Array of frame identifiers with manifest urls for each frame containing a document associated with some application cache." }
+                ],
+                "description": "Returns array of frame identifiers with manifest urls for each frame containing a document associated with some application cache."
+            },
+            {
+                "name": "enable",
+                "description": "Enables application cache domain notifications."
+            },
+            {
+                "name": "getManifestForFrame",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose manifest is retrieved." }
+                ],
+                "returns": [
+                    { "name": "manifestURL", "type": "string", "description": "Manifest URL for document in the given frame." }
+                ],
+                "description": "Returns manifest URL for document in the given frame."
+            },
+            {
+                "name": "getApplicationCacheForFrame",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache is retrieved." }
+                ],
+                "returns": [
+                    { "name": "applicationCache", "$ref": "ApplicationCache", "description": "Relevant application cache data for the document in given frame." }
+                ],
+                "description": "Returns relevant application cache data for the document in given frame."
+            }
+        ],
+        "events": [
+            {
+                "name": "applicationCacheStatusUpdated",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache updated status." },
+                    { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                    { "name": "status", "type": "integer", "description": "Updated application cache status." }
+                ]
+            },
+            {
+                "name": "networkStateUpdated",
+                "parameters": [
+                    { "name": "isNowOnline", "type": "boolean" }
+                ]
+            }
+        ]
+    },
+    {
+        "domain": "DOM",
+        "description": "This domain exposes DOM read/write operations. Each DOM Node is represented with its mirror object that has an <code>id</code>. This <code>id</code> can be used to get additional information on the Node, resolve it into the JavaScript object wrapper, etc. It is important that client receives DOM events only for the nodes that are known to the client. Backend keeps track of the nodes that were sent to the client and never sends the same node twice. It is client's responsibility to collect information about the nodes that were sent to the client.<p>Note that <code>iframe</code> owner elements will return corresponding document elements as their child nodes.</p>",
+        "types": [
+            {
+                "id": "NodeId",
+                "type": "integer",
+                "description": "Unique DOM node identifier."
+            },
+            {
+                "id": "BackendNodeId",
+                "type": "integer",
+                "description": "Unique DOM node identifier used to reference a node that may not have been pushed to the front-end."
+            },
+            {
+                "id": "Node",
+                "type": "object",
+                "properties": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Node identifier that is passed into the rest of the DOM messages as the <code>nodeId</code>. Backend will only push node with given <code>id</code> once. It is aware of all requested nodes and will only fire DOM events for nodes known to the client." },
+                    { "name": "nodeType", "type": "integer", "description": "<code>Node</code>'s nodeType." },
+                    { "name": "nodeName", "type": "string", "description": "<code>Node</code>'s nodeName." },
+                    { "name": "localName", "type": "string", "description": "<code>Node</code>'s localName." },
+                    { "name": "nodeValue", "type": "string", "description": "<code>Node</code>'s nodeValue." },
+                    { "name": "childNodeCount", "type": "integer", "optional": true, "description": "Child count for <code>Container</code> nodes." },
+                    { "name": "children", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Child nodes of this node when requested with children." },
+                    { "name": "attributes", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Attributes of the <code>Element</code> node in the form of flat array <code>[name1, value1, name2, value2]</code>." },
+                    { "name": "documentURL", "type": "string", "optional": true, "description": "Document URL that <code>Document</code> or <code>FrameOwner</code> node points to." },
+                    { "name": "baseURL", "type": "string", "optional": true, "description": "Base URL that <code>Document</code> or <code>FrameOwner</code> node uses for URL completion." },
+                    { "name": "publicId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s publicId." },
+                    { "name": "systemId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s systemId." },
+                    { "name": "internalSubset", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s internalSubset." },
+                    { "name": "xmlVersion", "type": "string", "optional": true, "description": "<code>Document</code>'s XML version in case of XML documents." },
+                    { "name": "name", "type": "string", "optional": true, "description": "<code>Attr</code>'s name." },
+                    { "name": "value", "type": "string", "optional": true, "description": "<code>Attr</code>'s value." },
+                    { "name": "frameId", "$ref": "Network.FrameId", "optional": true, "description": "Frame ID for frame owner elements." },
+                    { "name": "contentDocument", "$ref": "Node", "optional": true, "description": "Content document for frame owner elements." },
+                    { "name": "shadowRoots", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Shadow root list for given element host." },
+                    { "name": "templateContent", "$ref": "Node", "optional": true, "description": "Content document fragment for template elements" }
+                ],
+                "description": "DOM interaction is implemented in terms of mirror objects that represent the actual DOM nodes. DOMNode is a base node mirror type."
+            },
+            {
+                "id": "EventListener",
+                "type": "object",
+                "properties": [
+                    { "name": "type", "type": "string", "description": "<code>EventListener</code>'s type." },
+                    { "name": "useCapture", "type": "boolean", "description": "<code>EventListener</code>'s useCapture." },
+                    { "name": "isAttribute", "type": "boolean", "description": "<code>EventListener</code>'s isAttribute." },
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                    { "name": "handlerBody", "type": "string", "description": "Event handler function body." },
+                    { "name": "location", "$ref": "Debugger.Location", "optional": true, "description": "Handler code location." },
+                    { "name": "sourceName", "type": "string", "optional": true, "description": "Source script URL." },
+                    { "name": "handler", "$ref": "Runtime.RemoteObject", "optional": true, "description": "Event handler function value." }
+                ],
+                "description": "DOM interaction is implemented in terms of mirror objects that represent the actual DOM nodes. DOMNode is a base node mirror type."
+            },
+            {
+                "id": "RGBAColor",
+                "type": "object",
+                "properties": [
+                    { "name": "r", "type": "integer", "description": "The red component, in the [0-255] range." },
+                    { "name": "g", "type": "integer", "description": "The green component, in the [0-255] range." },
+                    { "name": "b", "type": "integer", "description": "The blue component, in the [0-255] range." },
+                    { "name": "a", "type": "number", "optional": true, "description": "The alpha component, in the [0-1] range (default: 1)." }
+                ],
+                "description": "A structure holding an RGBA color."
+            },
+            {
+                "id": "Quad",
+                "type": "array",
+                "items": { "type": "number" },
+                "minItems": 8,
+                "maxItems": 8,
+                "description": "An array of quad vertices, x immediately followed by y for each point, points clock-wise."
+            },
+            {
+                "id": "HighlightConfig",
+                "type": "object",
+                "properties": [
+                    { "name": "showInfo", "type": "boolean", "optional": true, "description": "Whether the node info tooltip should be shown (default: false)." },
+                    { "name": "contentColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                    { "name": "paddingColor", "$ref": "RGBAColor", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
+                    { "name": "borderColor", "$ref": "RGBAColor", "optional": true, "description": "The border highlight fill color (default: transparent)." },
+                    { "name": "marginColor", "$ref": "RGBAColor", "optional": true, "description": "The margin highlight fill color (default: transparent)." }
+                ],
+                "description": "Configuration data for the highlighting of page elements."
+            }
+        ],
+        "commands": [
+            {
+                "name": "getDocument",
+                "returns": [
+                    { "name": "root", "$ref": "Node", "description": "Resulting node." }
+                ],
+                "description": "Returns the root DOM node to the caller."
+            },
+            {
+                "name": "requestChildNodes",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get children for." },
+                    { "name": "depth", "type": "integer", "optional": true, "description": "The maximum depth at which children should be retrieved, defaults to 1. Use -1 for the entire subtree or provide an integer larger than 0." }
+                ],
+                "description": "Requests that children of the node with given id are returned to the caller in form of <code>setChildNodes</code> events where not only immediate children are retrieved, but all children down to the specified depth."
+            },
+            {
+                "name": "querySelector",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                    { "name": "selector", "type": "string", "description": "Selector string." }
+                ],
+                "returns": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Query selector result." }
+                ],
+                "description": "Executes <code>querySelector</code> on a given node."
+            },
+            {
+                "name": "querySelectorAll",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                    { "name": "selector", "type": "string", "description": "Selector string." }
+                ],
+                "returns": [
+                    { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Query selector result." }
+                ],
+                "description": "Executes <code>querySelectorAll</code> on a given node."
+            },
+            {
+                "name": "setNodeName",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set name for." },
+                    { "name": "name", "type": "string", "description": "New node's name." }
+                ],
+                "returns": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "New node's id." }
+                ],
+                "description": "Sets node name for a node with given id."
+            },
+            {
+                "name": "setNodeValue",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set value for." },
+                    { "name": "value", "type": "string", "description": "New node's value." }
+                ],
+                "description": "Sets node value for a node with given id."
+            },
+            {
+                "name": "removeNode",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to remove." }
+                ],
+                "description": "Removes node with given id."
+            },
+            {
+                "name": "setAttributeValue",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attribute for." },
+                    { "name": "name", "type": "string", "description": "Attribute name." },
+                    { "name": "value", "type": "string", "description": "Attribute value." }
+                ],
+                "description": "Sets attribute for an element with given id."
+            },
+            {
+                "name": "setAttributesAsText",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attributes for." },
+                    { "name": "text", "type": "string", "description": "Text with a number of attributes. Will parse this text using HTML parser." },
+                    { "name": "name", "type": "string", "optional": true, "description": "Attribute name to replace with new attributes derived from text in case text parsed successfully." }
+                ],
+                "description": "Sets attributes on element with given id. This method is useful when user edits some existing attribute value and types in several attribute name/value pairs."
+            },
+            {
+                "name": "removeAttribute",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to remove attribute from." },
+                    { "name": "name", "type": "string", "description": "Name of the attribute to remove." }
+                ],
+                "description": "Removes attribute with given name from an element with given id."
+            },
+            {
+                "name": "getEventListenersForNode",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get listeners for." },
+                    { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name for handler value. Handler value is not returned without this parameter specified." }
+                ],
+                "returns": [
+                    { "name": "listeners", "type": "array", "items": { "$ref": "EventListener"}, "description": "Array of relevant listeners." }
+                ],
+                "description": "Returns event listeners relevant to the node."
+            },
+            {
+                "name": "getOuterHTML",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get markup for." }
+                ],
+                "returns": [
+                    { "name": "outerHTML", "type": "string", "description": "Outer HTML markup." }
+                ],
+                "description": "Returns node's HTML markup."
+            },
+            {
+                "name": "setOuterHTML",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set markup for." },
+                    { "name": "outerHTML", "type": "string", "description": "Outer HTML markup to set." }
+                ],
+                "description": "Sets node HTML markup, returns new node id."
+            },
+            {
+                "name": "performSearch",
+                "parameters": [
+                    { "name": "query", "type": "string", "description": "Plain text or query selector or XPath search query." }
+                ],
+                "returns": [
+                    { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                    { "name": "resultCount", "type": "integer", "description": "Number of search results." }
+                ],
+                "description": "Searches for a given string in the DOM tree. Use <code>getSearchResults</code> to access search results or <code>cancelSearch</code> to end this search session."
+            },
+            {
+                "name": "getSearchResults",
+                "parameters": [
+                    { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                    { "name": "fromIndex", "type": "integer", "description": "Start index of the search result to be returned." },
+                    { "name": "toIndex", "type": "integer", "description": "End index of the search result to be returned." }
+                ],
+                "returns": [
+                    { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the search result nodes." }
+                ],
+                "description": "Returns search results from given <code>fromIndex</code> to given <code>toIndex</code> from the sarch with the given identifier."
+            },
+            {
+                "name": "discardSearchResults",
+                "parameters": [
+                    { "name": "searchId", "type": "string", "description": "Unique search session identifier." }
+                ],
+                "description": "Discards search results from the session with the given id. <code>getSearchResults</code> should no longer be called for that search."
+            },
+            {
+                "name": "requestNode",
+                "parameters": [
+                    { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "description": "JavaScript object id to convert into node." }
+                ],
+                "returns": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Node id for given object." }
+                ],
+                "description": "Requests that the node is sent to the caller given the JavaScript node object reference. All nodes that form the path from the node to the root are also sent to the client as a series of <code>setChildNodes</code> notifications."
+            },
+            {
+                "name": "setInspectModeEnabled",
+                "parameters": [
+                    { "name": "enabled", "type": "boolean", "description": "True to enable inspection mode, false to disable it." },
+                    { "name": "highlightConfig", "$ref": "HighlightConfig", "optional": true, "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>." }
+                ],
+                "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspect' command upon element selection."
+            },
+            {
+                "name": "highlightRect",
+                "parameters": [
+                    { "name": "x", "type": "integer", "description": "X coordinate" },
+                    { "name": "y", "type": "integer", "description": "Y coordinate" },
+                    { "name": "width", "type": "integer", "description": "Rectangle width" },
+                    { "name": "height", "type": "integer", "description": "Rectangle height" },
+                    { "name": "color", "$ref": "RGBAColor", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                    { "name": "outlineColor", "$ref": "RGBAColor", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                    { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+                ],
+                "description": "Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport."
+            },
+            {
+                "name": "highlightQuad",
+                "parameters": [
+                    { "name": "quad", "$ref": "Quad", "description": "Quad to highlight" },
+                    { "name": "color", "$ref": "RGBAColor", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                    { "name": "outlineColor", "$ref": "RGBAColor", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                    { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+                ],
+                "description": "Highlights given quad. Coordinates are absolute with respect to the main frame viewport."
+            },
+            {
+                "name": "highlightNode",
+                "parameters": [
+                    { "name": "highlightConfig", "$ref": "HighlightConfig",  "description": "A descriptor for the highlight appearance." },
+                    { "name": "nodeId", "$ref": "NodeId", "optional": true, "description": "Identifier of the node to highlight." },
+                    { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "optional": true, "description": "JavaScript object id of the node to be highlighted." }
+                ],
+                "description": "Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified."
+            },
+            {
+                "name": "hideHighlight",
+                "description": "Hides DOM node highlight."
+            },
+            {
+                "name": "highlightFrame",
+                "parameters": [
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame to highlight." },
+                    { "name": "contentColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                    { "name": "contentOutlineColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight outline color (default: transparent)." }
+                ],
+                "description": "Highlights owner element of the frame with given id."
+            },
+            {
+                "name": "pushNodeByPathToFrontend",
+                "parameters": [
+                    { "name": "path", "type": "string", "description": "Path to node in the proprietary format." }
+                ],
+                "returns": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for given path." }
+                ],
+                "description": "Requests that the node is sent to the caller given its path. // FIXME, use XPath"
+            },
+            {
+                "name": "pushNodeByBackendIdToFrontend",
+                "parameters": [
+                    { "name": "backendNodeId", "$ref": "BackendNodeId", "description": "The backend node id of the node." }
+                ],
+                "returns": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "The pushed node's id." }
+                ],
+                "description": "Requests that the node is sent to the caller given its backend node id."
+            },
+            {
+                "name": "releaseBackendNodeIds",
+                "parameters": [
+                    { "name": "nodeGroup", "type": "string", "description": "The backend node ids group name." }
+                ],
+                "description": "Requests that group of <code>BackendNodeIds</code> is released."
+            },
+            {
+                "name": "resolveNode",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to resolve." },
+                    { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." }
+                ],
+                "returns": [
+                    { "name": "object", "$ref": "Runtime.RemoteObject", "description": "JavaScript object wrapper for given node." }
+                ],
+                "description": "Resolves JavaScript node object for given node id."
+            },
+            {
+                "name": "getAttributes",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to retrieve attibutes for." }
+                ],
+                "returns": [
+                    { "name": "attributes", "type": "array", "items": { "type": "string" }, "description": "An interleaved array of node attribute names and values." }
+                ],
+                "description": "Returns attributes for the specified node."
+            },
+            {
+                "name": "moveTo",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to drop." },
+                    { "name": "targetNodeId", "$ref": "NodeId", "description": "Id of the element to drop into." },
+                    { "name": "insertBeforeNodeId", "$ref": "NodeId", "optional": true, "description": "Drop node before given one." }
+                ],
+                "returns": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "New id of the moved node." }
+                ],
+                "description": "Moves node into the new container, places it before the given anchor."
+            },
+            {
+                "name": "undo",
+                "description": "Undoes the last performed action."
+            },
+            {
+                "name": "redo",
+                "description": "Re-does the last undone action."
+            },
+            {
+                "name": "markUndoableState",
+                "description": "Marks last undoable state."
+            },
+            {
+                "name": "focus",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to focus." }
+                ],
+                "description": "Focuses the given element."
+            }
+        ],
+        "events": [
+            {
+                "name": "documentUpdated",
+                "description": "Fired when <code>Document</code> has been totally updated. Node ids are no longer valid."
+            },
+            {
+                "name": "setChildNodes",
+                "parameters": [
+                    { "name": "parentId", "$ref": "NodeId", "description": "Parent node id to populate with children." },
+                    { "name": "nodes", "type": "array", "items": { "$ref": "Node"}, "description": "Child nodes array." }
+                ],
+                "description": "Fired when backend wants to provide client with the missing DOM structure. This happens upon most of the calls requesting node ids."
+            },
+            {
+                "name": "attributeModified",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                    { "name": "name", "type": "string", "description": "Attribute name." },
+                    { "name": "value", "type": "string", "description": "Attribute value." }
+                ],
+                "description": "Fired when <code>Element</code>'s attribute is modified."
+            },
+            {
+                "name": "attributeRemoved",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                    { "name": "name", "type": "string", "description": "A ttribute name." }
+                ],
+                "description": "Fired when <code>Element</code>'s attribute is removed."
+            },
+            {
+                "name": "inlineStyleInvalidated",
+                "parameters": [
+                    { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the nodes for which the inline styles have been invalidated." }
+                ],
+                "description": "Fired when <code>Element</code>'s inline style is modified via a CSS property modification."
+            },
+            {
+                "name": "characterDataModified",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                    { "name": "characterData", "type": "string", "description": "New text value." }
+                ],
+                "description": "Mirrors <code>DOMCharacterDataModified</code> event."
+            },
+            {
+                "name": "childNodeCountUpdated",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                    { "name": "childNodeCount", "type": "integer", "description": "New node count." }
+                ],
+                "description": "Fired when <code>Container</code>'s child node count has changed."
+            },
+            {
+                "name": "childNodeInserted",
+                "parameters": [
+                    { "name": "parentNodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                    { "name": "previousNodeId", "$ref": "NodeId", "description": "If of the previous siblint." },
+                    { "name": "node", "$ref": "Node", "description": "Inserted node data." }
+                ],
+                "description": "Mirrors <code>DOMNodeInserted</code> event."
+            },
+            {
+                "name": "childNodeRemoved",
+                "parameters": [
+                    { "name": "parentNodeId", "$ref": "NodeId", "description": "Parent id." },
+                    { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has been removed." }
+                ],
+                "description": "Mirrors <code>DOMNodeRemoved</code> event."
+            },
+            {
+                "name": "shadowRootPushed",
+                "parameters": [
+                    { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                    { "name": "root", "$ref": "Node", "description": "Shadow root." }
+                ],
+                "description": "Called when shadow root is pushed into the element."
+            },
+            {
+                "name": "shadowRootPopped",
+                "parameters": [
+                    { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                    { "name": "rootId", "$ref": "NodeId", "description": "Shadow root id." }
+                ],
+                "description": "Called when shadow root is popped from the element."
+            }
+        ]
+    },
+    {
+        "domain": "CSS",
+        "description": "This domain exposes CSS read/write operations. All CSS objects, like stylesheets, rules, and styles, have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). Alternatively, a client can discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
+        "types": [
+            {
+                "id": "StyleSheetId",
+                "type": "string"
+            },
+            {
+                "id": "CSSStyleId",
+                "type": "object",
+                "properties": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                    { "name": "ordinal", "type": "integer", "description": "The style ordinal within the stylesheet." }
+                ],
+                "description": "This object identifies a CSS style in a unique way."
+            },
+            {
+                "id": "StyleSheetOrigin",
+                "type": "string",
+                "enum": ["user", "user-agent", "inspector", "regular"],
+                "description": "Stylesheet type: \"user\" for user stylesheets, \"user-agent\" for user-agent stylesheets, \"inspector\" for stylesheets created by the inspector (i.e. those holding the \"via inspector\" rules), \"regular\" for regular stylesheets."
+            },
+            {
+                "id": "CSSRuleId",
+                "type": "object",
+                "properties": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                    { "name": "ordinal", "type": "integer", "description": "The rule ordinal within the stylesheet." }
+                ],
+                "description": "This object identifies a CSS rule in a unique way."
+            },
+            {
+                "id": "PseudoIdMatches",
+                "type": "object",
+                "properties": [
+                    { "name": "pseudoId", "type": "integer", "description": "Pseudo style identifier (see <code>enum PseudoId</code> in <code>RenderStyleConstants.h</code>)."},
+                    { "name": "matches", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules applicable to the pseudo style."}
+                ],
+                "description": "CSS rule collection for a single pseudo style."
+            },
+            {
+                "id": "InheritedStyleEntry",
+                "type": "object",
+                "properties": [
+                    { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "The ancestor node's inline style, if any, in the style inheritance chain." },
+                    { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules matching the ancestor node in the style inheritance chain." }
+                ],
+                "description": "CSS rule collection for a single pseudo style."
+            },
+            {
+                "id": "RuleMatch",
+                "type": "object",
+                "properties": [
+                    { "name": "rule", "$ref": "CSSRule", "description": "CSS rule in the match." },
+                    { "name": "matchingSelectors", "type": "array", "items": { "type": "integer" }, "description": "Matching selector indices in the rule's selectorList selectors (0-based)." }
+                ],
+                "description": "Match data for a CSS rule."
+            },
+            {
+                "id": "SelectorList",
+                "type": "object",
+                "properties": [
+                    { "name": "selectors", "type": "array", "items": { "type": "string" }, "description": "Selectors in the list." },
+                    { "name": "text", "type": "string", "description": "Rule selector text." },
+                    { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Rule selector range in the underlying resource (if available)." }
+                ],
+                "description": "Selector list data."
+            },
+            {
+                "id": "CSSStyleAttribute",
+                "type": "object",
+                "properties": [
+                    { "name": "name", "type": "string", "description": "DOM attribute name (e.g. \"width\")."},
+                    { "name": "style", "$ref": "CSSStyle", "description": "CSS style generated by the respective DOM attribute."}
+                ],
+                "description": "CSS style information for a DOM style attribute."
+            },
+            {
+                "id": "CSSStyleSheetHeader",
+                "type": "object",
+                "properties": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                    { "name": "frameId", "$ref": "Network.FrameId", "description": "Owner frame identifier."},
+                    { "name": "sourceURL", "type": "string", "description": "Stylesheet resource URL."},
+                    { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Stylesheet origin."},
+                    { "name": "title", "type": "string", "description": "Stylesheet title."},
+                    { "name": "disabled", "type": "boolean", "description": "Denotes whether the stylesheet is disabled."}
+                ],
+                "description": "CSS stylesheet metainformation."
+            },
+            {
+                "id": "CSSStyleSheetBody",
+                "type": "object",
+                "properties": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                    { "name": "rules", "type": "array", "items": { "$ref": "CSSRule" }, "description": "Stylesheet resource URL."},
+                    { "name": "text", "type": "string", "optional": true, "description": "Stylesheet resource contents (if available)."}
+                ],
+                "description": "CSS stylesheet contents."
+            },
+            {
+                "id": "CSSRule",
+                "type": "object",
+                "properties": [
+                    { "name": "ruleId", "$ref": "CSSRuleId", "optional": true, "description": "The CSS rule identifier (absent for user agent stylesheet and user-specified stylesheet rules)."},
+                    { "name": "selectorList", "$ref": "SelectorList", "description": "Rule selector data." },
+                    { "name": "sourceURL", "type": "string", "optional": true, "description": "Parent stylesheet resource URL (for regular rules)."},
+                    { "name": "sourceLine", "type": "integer", "description": "Line ordinal of the rule selector start character in the resource."},
+                    { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."},
+                    { "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." },
+                    { "name": "media", "type": "array", "items": { "$ref": "CSSMedia" }, "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards." }
+                ],
+                "description": "CSS rule representation."
+            },
+            {
+                "id": "SourceRange",
+                "type": "object",
+                "properties": [
+                    { "name": "startLine", "type": "integer", "description": "Start line of range." },
+                    { "name": "startColumn", "type": "integer", "description": "Start column of range (inclusive)." },
+                    { "name": "endLine", "type": "integer", "description": "End line of range" },
+                    { "name": "endColumn", "type": "integer", "description": "End column of range (exclusive)." }
+                ],
+                "description": "Text range within a resource."
+            },
+            {
+                "id": "ShorthandEntry",
+                "type": "object",
+                "properties": [
+                    { "name": "name", "type": "string", "description": "Shorthand name." },
+                    { "name": "value", "type": "string", "description": "Shorthand value." }
+                ]
+            },
+            {
+                "id": "CSSPropertyInfo",
+                "type": "object",
+                "properties": [
+                    { "name": "name", "type": "string", "description": "Property name." },
+                    { "name": "longhands", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Longhand property names." }
+                ]
+            },
+            {
+                "id": "CSSComputedStyleProperty",
+                "type": "object",
+                "properties": [
+                    { "name": "name", "type": "string", "description": "Computed style property name." },
+                    { "name": "value", "type": "string", "description": "Computed style property value." }
+                ]
+            },
+            {
+                "id": "CSSStyle",
+                "type": "object",
+                "properties": [
+                    { "name": "styleId", "$ref": "CSSStyleId", "optional": true, "description": "The CSS style identifier (absent for attribute styles)." },
+                    { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSProperty" }, "description": "CSS properties in the style." },
+                    { "name": "shorthandEntries", "type": "array", "items": { "$ref": "ShorthandEntry" }, "description": "Computed values for all shorthands found in the style." },
+                    { "name": "cssText", "type": "string", "optional": true, "description": "Style declaration text (if available)." },
+                    { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Style declaration range in the enclosing stylesheet (if available)." },
+                    { "name": "width", "type": "string", "optional": true, "description": "The effective \"width\" property value from this style." },
+                    { "name": "height", "type": "string", "optional": true, "description": "The effective \"height\" property value from this style." }
+                ],
+                "description": "CSS style representation."
+            },
+            {
+                "id": "CSSPropertyStatus",
+                "type": "string",
+                "enum": ["active", "inactive", "disabled", "style"],
+                "description": "The property status: \"active\" (implied if absent) if the property is effective in the style, \"inactive\" if the property is overridden by a same-named property in this style later on, \"disabled\" if the property is disabled by the user, \"style\" if the property is reported by the browser rather than by the CSS source parser."
+            },
+            {
+                "id": "CSSProperty",
+                "type": "object",
+                "properties": [
+                    { "name": "name", "type": "string", "description": "The property name." },
+                    { "name": "value", "type": "string", "description": "The property value." },
+                    { "name": "priority", "type": "string", "optional": true, "description": "The property priority (implies \"\" if absent)." },
+                    { "name": "implicit", "type": "boolean", "optional": true, "description": "Whether the property is implicit (implies <code>false</code> if absent)." },
+                    { "name": "text", "type": "string", "optional": true, "description": "The full property text as specified in the style." },
+                    { "name": "parsedOk", "type": "boolean", "optional": true, "description": "Whether the property is understood by the browser (implies <code>true</code> if absent)." },
+                    { "name": "status", "$ref": "CSSPropertyStatus", "optional": true, "description": "Whether the property is active or disabled." },
+                    { "name": "range", "$ref": "SourceRange", "optional": true, "description": "The entire property range in the enclosing style declaration (if available)." }
+                ],
+                "description": "CSS style effective visual dimensions and source offsets."
+            },
+            {
+                "id": "CSSMedia",
+                "type": "object",
+                "properties": [
+                    { "name": "text", "type": "string", "description": "Media query text." },
+                    { "name": "source", "type": "string", "enum": ["mediaRule", "importRule", "linkedSheet", "inlineSheet"], "description": "Source of the media query: \"mediaRule\" if specified by a @media rule, \"importRule\" if specified by an @import rule, \"linkedSheet\" if specified by a \"media\" attribute in a linked stylesheet's LINK tag, \"inlineSheet\" if specified by a \"media\" attribute in an inline stylesheet's STYLE tag." },
+                    { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the media query description." },
+                    { "name": "sourceLine", "type": "integer", "optional": true, "description": "Line in the document containing the media query (not defined for the \"stylesheet\" source)." }
+                ],
+                "description": "CSS media query descriptor."
+            },
+            {
+                "id": "SelectorProfileEntry",
+                "type": "object",
+                "properties": [
+                    { "name": "selector", "type": "string", "description": "CSS selector of the corresponding rule." },
+                    { "name": "url", "type": "string", "description": "URL of the resource containing the corresponding rule." },
+                    { "name": "lineNumber", "type": "integer", "description": "Selector line number in the resource for the corresponding rule." },
+                    { "name": "time", "type": "number", "description": "Total time this rule handling contributed to the browser running time during profiling (in milliseconds.)" },
+                    { "name": "hitCount", "type": "integer", "description": "Number of times this rule was considered a candidate for matching against DOM elements." },
+                    { "name": "matchCount", "type": "integer", "description": "Number of times this rule actually matched a DOM element." }
+                ],
+                "description": "CSS selector profile entry."
+            },
+            {
+                "id": "SelectorProfile",
+                "type": "object",
+                "properties": [
+                    { "name": "totalTime", "type": "number", "description": "Total processing time for all selectors in the profile (in milliseconds.)" },
+                    { "name": "data", "type": "array", "items": { "$ref": "SelectorProfileEntry" }, "description": "CSS selector profile entries." }
+                ]
+            },
+            {
+                "id": "Region",
+                "type": "object",
+                "properties": [
+                    { "name": "regionOverset", "type": "string", "enum": ["overset", "fit", "empty"], "description": "The \"overset\" attribute of a Named Flow." },
+                    { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The corresponding DOM node id." }
+                ],
+                "description": "This object represents a region that flows from a Named Flow."
+            },
+            {
+                "id": "NamedFlow",
+                "type": "object",
+                "properties": [
+                    { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                    { "name": "name", "type": "string", "description": "Named Flow identifier." },
+                    { "name": "overset", "type": "boolean", "description": "The \"overset\" attribute of a Named Flow." },
+                    { "name": "content", "type": "array", "items": { "$ref": "DOM.NodeId" }, "description": "An array of nodes that flow into the Named Flow." },
+                    { "name": "regions", "type": "array", "items": { "$ref": "Region" }, "description": "An array of regions associated with the Named Flow." }
+                ],
+                "description": "This object represents a Named Flow."
+            }
+        ],
+        "commands": [
+            {
+                "name": "enable",
+                "description": "Enables the CSS agent for the given page. Clients should not assume that the CSS agent has been enabled until the result of this command is received."
+            },
+            {
+                "name": "disable",
+                "description": "Disables the CSS agent for the given page."
+            },
+            {
+                "name": "getMatchedStylesForNode",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "DOM.NodeId" },
+                    { "name": "includePseudo", "type": "boolean", "optional": true, "description": "Whether to include pseudo styles (default: true)." },
+                    { "name": "includeInherited", "type": "boolean", "optional": true, "description": "Whether to include inherited styles (default: true)." }
+                ],
+                "returns": [
+                    { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "optional": true, "description": "CSS rules matching this node, from all applicable stylesheets." },
+                    { "name": "pseudoElements", "type": "array", "items": { "$ref": "PseudoIdMatches" }, "optional": true, "description": "Pseudo style matches for this node." },
+                    { "name": "inherited", "type": "array", "items": { "$ref": "InheritedStyleEntry" }, "optional": true, "description": "A chain of inherited styles (from the immediate node parent up to the DOM tree root)." }
+                ],
+                "description": "Returns requested styles for a DOM node identified by <code>nodeId</code>."
+            },
+            {
+                "name": "getInlineStylesForNode",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "DOM.NodeId" }
+                ],
+                "returns": [
+                    { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "Inline style for the specified DOM node." },
+                    { "name": "attributesStyle", "$ref": "CSSStyle", "optional": true, "description": "Attribute-defined element style (e.g. resulting from \"width=20 height=100%\")."}
+                ],
+                "description": "Returns the styles defined inline (explicitly in the \"style\" attribute and implicitly, using DOM attributes) for a DOM node identified by <code>nodeId</code>."
+            },
+            {
+                "name": "getComputedStyleForNode",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "DOM.NodeId" }
+                ],
+                "returns": [
+                    { "name": "computedStyle", "type": "array", "items": { "$ref": "CSSComputedStyleProperty" }, "description": "Computed style for the specified DOM node." }
+                ],
+                "description": "Returns the computed style for a DOM node identified by <code>nodeId</code>."
+            },
+            {
+                "name": "getAllStyleSheets",
+                "returns": [
+                    { "name": "headers", "type": "array", "items": { "$ref": "CSSStyleSheetHeader" }, "description": "Descriptor entries for all available stylesheets." }
+                ],
+                "description": "Returns metainfo entries for all known stylesheets."
+            },
+            {
+                "name": "getStyleSheet",
+                "parameters": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId" }
+                ],
+                "returns": [
+                    { "name": "styleSheet", "$ref": "CSSStyleSheetBody", "description": "Stylesheet contents for the specified <code>styleSheetId</code>." }
+                ],
+                "description": "Returns stylesheet data for the specified <code>styleSheetId</code>."
+            },
+            {
+                "name": "getStyleSheetText",
+                "parameters": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId" }
+                ],
+                "returns": [
+                    { "name": "text", "type": "string", "description": "The stylesheet text." }
+                ],
+                "description": "Returns the current textual content and the URL for a stylesheet."
+            },
+            {
+                "name": "setStyleSheetText",
+                "parameters": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId" },
+                    { "name": "text", "type": "string" }
+                ],
+                "description": "Sets the new stylesheet text, thereby invalidating all existing <code>CSSStyleId</code>'s and <code>CSSRuleId</code>'s contained by this stylesheet."
+            },
+            {
+                "name": "setStyleText",
+                "parameters": [
+                    { "name": "styleId", "$ref": "CSSStyleId" },
+                    { "name": "text", "type": "string" }
+                ],
+                "returns": [
+                    { "name": "style", "$ref": "CSSStyle", "description": "The resulting style after the text modification." }
+                ],
+                "description": "Sets the new <code>text</code> for the respective style."
+            },
+            {
+                "name": "setRuleSelector",
+                "parameters": [
+                    { "name": "ruleId", "$ref": "CSSRuleId" },
+                    { "name": "selector", "type": "string" }
+                ],
+                "returns": [
+                    { "name": "rule", "$ref": "CSSRule", "description": "The resulting rule after the selector modification." }
+                ],
+                "description": "Modifies the rule selector."
+            },
+            {
+                "name": "addRule",
+                "parameters": [
+                    { "name": "contextNodeId", "$ref": "DOM.NodeId" },
+                    { "name": "selector", "type": "string" }
+                ],
+                "returns": [
+                    { "name": "rule", "$ref": "CSSRule", "description": "The newly created rule." }
+                ],
+                "description": "Creates a new empty rule with the given <code>selector</code> in a special \"inspector\" stylesheet in the owner document of the context node."
+            },
+            {
+                "name": "getSupportedCSSProperties",
+                "returns": [
+                    { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSPropertyInfo" }, "description": "Supported property metainfo." }
+                ],
+                "description": "Returns all supported CSS property names."
+            },
+            {
+                "name": "forcePseudoState",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The element id for which to force the pseudo state." },
+                    { "name": "forcedPseudoClasses", "type": "array", "items": { "type": "string", "enum": ["active", "focus", "hover", "visited"] }, "description": "Element pseudo classes to force when computing the element's style." }
+                ],
+                "description": "Ensures that the given node will have specified pseudo-classes whenever its style is computed by the browser."
+            },
+            {
+                "name": "startSelectorProfiler"
+            },
+            {
+                "name": "stopSelectorProfiler",
+                "returns": [
+                    { "name": "profile", "$ref": "SelectorProfile" }
+                ]
+            },
+            {
+                "name": "getNamedFlowCollection",
+                "parameters": [
+                    { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id for which to get the Named Flow Collection." }
+                ],
+                "returns": [
+                    { "name": "namedFlows", "type": "array", "items": { "$ref": "NamedFlow" }, "description": "An array containing the Named Flows in the document." }
+                ],
+                "description": "Returns the Named Flows from the document."
+            }
+        ],
+        "events": [
+            {
+                "name": "mediaQueryResultChanged",
+                "description": "Fires whenever a MediaQuery result changes (for example, after a browser window has been resized.) The current implementation considers only viewport-dependent media features."
+            },
+            {
+                "name": "styleSheetChanged",
+                "parameters": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId" }
+                ],
+                "description": "Fired whenever a stylesheet is changed as a result of the client operation."
+            },
+            {
+                "name": "namedFlowCreated",
+                "parameters": [
+                    { "name": "namedFlow", "$ref": "NamedFlow", "description": "The new Named Flow." }
+                ],
+                "description": "Fires when a Named Flow is created."
+            },
+            {
+                "name": "namedFlowRemoved",
+                "parameters": [
+                    { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                    { "name": "flowName", "type": "string", "description": "Identifier of the removed Named Flow." }
+                ],
+                "description": "Fires when a Named Flow is removed: has no associated content nodes and regions."
+            },
+            {
+                "name": "regionLayoutUpdated",
+                "parameters": [
+                    { "name": "namedFlow", "$ref": "NamedFlow", "description": "The Named Flow whose layout may have changed." }
+                ],
+                "description": "Fires when a Named Flow's layout may have changed."
+            }
+        ]
+    },
+    {
+        "domain": "Timeline",
+        "description": "Timeline provides its clients with instrumentation records that are generated during the page runtime. Timeline instrumentation can be started and stopped using corresponding commands. While timeline is started, it is generating timeline event records.",
+        "types": [
+            {
+                "id": "EventType",
+                "type": "string",
+                "enum": ["EventDispatch", "ScheduleStyleRecalculation", "RecalculateStyles", "InvalidateLayout", "Layout", "Paint", "ResizeImage", "ParseHTML", "TimerInstall", "TimerRemove", "TimerFire", "EvaluateScript", "MarkLoad", "MarkDOMContent", "TimeStamp", "Time", "TimeEnd", "ScheduleResourceRequest", "ResourceSendRequest", "ResourceReceiveResponse", "ResourceReceivedData", "ResourceFinish", "XHRReadyStateChange", "XHRLoad", "FunctionCall", "RequestAnimationFrame", "CancelAnimationFrame", "FireAnimationFrame", "WebSocketCreate", "WebSocketSendHandshakeRequest", "WebSocketReceiveHandshakeResponse", "WebSocketDestroy"],
+                "description": "Timeline record type."
+            },
+            {
+                "id": "TimelineEvent",
+                "type": "object",
+                "properties": [
+                    { "name": "type", "type": "string", "description": "Event type." },
+                    { "name": "data", "type": "object", "description": "Event data." },
+                    { "name": "children", "type": "array", "optional": true, "items": { "$ref": "TimelineEvent" }, "description": "Nested records." }
+                ],
+                "description": "Timeline record contains information about the recorded activity."
+            }
+        ],
+        "commands": [
+            {
+                "name": "start",
+                "parameters": [
+                    { "name": "maxCallStackDepth", "optional": true, "type": "integer", "description": "Samples JavaScript stack traces up to <code>maxCallStackDepth</code>, defaults to 5." }
+                ],
+                "description": "Starts capturing instrumentation events."
+            },
+            {
+                "name": "stop",
+                "description": "Stops capturing instrumentation events."
+            }
+        ],
+        "events": [
+            {
+                "name": "eventRecorded",
+                "parameters": [
+                    { "name": "record", "$ref": "TimelineEvent", "description": "Timeline event record data." }
+                ],
+                "description": "Fired for every instrumentation event while timeline is started."
+            }
+        ]
+    },
+    {
+        "domain": "Debugger",
+        "description": "Debugger domain exposes JavaScript debugging capabilities. It allows setting and removing breakpoints, stepping through execution, exploring stack traces, etc.",
+        "types": [
+            {
+                "id": "BreakpointId",
+                "type": "string",
+                "description": "Breakpoint identifier."
+            },
+            {
+                "id": "ScriptId",
+                "type": "string",
+                "description": "Unique script identifier."
+            },
+            {
+                "id": "CallFrameId",
+                "type": "string",
+                "description": "Call frame identifier."
+            },
+            {
+                "id": "Location",
+                "type": "object",
+                "properties": [
+                    { "name": "scriptId", "$ref": "ScriptId", "description": "Script identifier as reported in the <code>Debugger.scriptParsed</code>." },
+                    { "name": "lineNumber", "type": "integer", "description": "Line number in the script." },
+                    { "name": "columnNumber", "type": "integer", "optional": true, "description": "Column number in the script." }
+                ],
+                "description": "Location in the source code."
+            },
+            {
+                "id": "FunctionDetails",
+                "type": "object",
+                "properties": [
+                    { "name": "location", "$ref": "Location", "description": "Location of the function." },
+                    { "name": "name", "type": "string", "optional": true, "description": "Name of the function. Not present for anonymous functions." },
+                    { "name": "displayName", "type": "string", "optional": true, "description": "Display name of the function(specified in 'displayName' property on the function object)." },
+                    { "name": "inferredName", "type": "string", "optional": true, "description": "Name of the function inferred from its initial assignment." },
+                    { "name": "scopeChain", "type": "array", "optional": true, "items": { "$ref": "Scope" }, "description": "Scope chain for this closure." }
+                ],
+                "description": "Information about the function."
+            },
+            {
+                "id": "CallFrame",
+                "type": "object",
+                "properties": [
+                    { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier. This identifier is only valid while the virtual machine is paused." },
+                    { "name": "functionName", "type": "string", "description": "Name of the JavaScript function called on this call frame." },
+                    { "name": "location", "$ref": "Location", "description": "Location in the source code." },
+                    { "name": "scopeChain", "type": "array", "items": { "$ref": "Scope" }, "description": "Scope chain for this call frame." },
+                    { "name": "this", "$ref": "Runtime.RemoteObject", "description": "<code>this</code> object for this call frame." }
+                ],
+                "description": "JavaScript call frame. Array of call frames form the call stack."
+            },
+            {
+                "id": "Scope",
+                "type": "object",
+                "properties": [
+                    { "name": "type", "type": "string", "enum": ["global", "local", "with", "closure", "catch"], "description": "Scope type." },
+                    { "name": "object", "$ref": "Runtime.RemoteObject", "description": "Object representing the scope. For <code>global</code> and <code>with</code> scopes it represents the actual object; for the rest of the scopes, it is artificial transient object enumerating scope variables as its properties." }
+                ],
+                "description": "Scope description."
+            }
+        ],
+        "commands": [
+            {
+                "name": "enable",
+                "description": "Enables debugger for the given page. Clients should not assume that the debugging has been enabled until the result for this command is received."
+            },
+            {
+                "name": "disable",
+                "description": "Disables debugger for given page."
+            },
+            {
+                "name": "setBreakpointsActive",
+                "parameters": [
+                    { "name": "active", "type": "boolean", "description": "New value for breakpoints active state." }
+                ],
+                "description": "Activates / deactivates all breakpoints on the page."
+            },
+            {
+                "name": "setBreakpointByUrl",
+                "parameters": [
+                    { "name": "lineNumber", "type": "integer", "description": "Line number to set breakpoint at." },
+                    { "name": "url", "type": "string", "optional": true, "description": "URL of the resources to set breakpoint on." },
+                    { "name": "urlRegex", "type": "string", "optional": true, "description": "Regex pattern for the URLs of the resources to set breakpoints on. Either <code>url</code> or <code>urlRegex</code> must be specified." },
+                    { "name": "columnNumber", "type": "integer", "optional": true, "description": "Offset in the line to set breakpoint at." },
+                    { "name": "condition", "type": "string", "optional": true, "description": "Expression to use as a breakpoint condition. When specified, debugger will only stop on the breakpoint if this expression evaluates to true." }
+                ],
+                "returns": [
+                    { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                    { "name": "locations", "type": "array", "items": { "$ref": "Location"}, "description": "List of the locations this breakpoint resolved into upon addition." }
+                ],
+                "description": "Sets JavaScript breakpoint at given location specified either by URL or URL regex. Once this command is issued, all existing parsed scripts will have breakpoints resolved and returned in <code>locations</code> property. Further matching script parsing will result in subsequent <code>breakpointResolved</code> events issued. This logical breakpoint will survive page reloads."
+            },
+            {
+                "name": "setBreakpoint",
+                "parameters": [
+                    { "name": "location", "$ref": "Location", "description": "Location to set breakpoint in." },
+                    { "name": "condition", "type": "string", "optional": true, "description": "Expression to use as a breakpoint condition. When specified, debugger will only stop on the breakpoint if this expression evaluates to true." }
+                ],
+                "returns": [
+                    { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                    { "name": "actualLocation", "$ref": "Location", "description": "Location this breakpoint resolved into." }
+                ],
+                "description": "Sets JavaScript breakpoint at a given location."
+            },
+            {
+                "name": "removeBreakpoint",
+                "parameters": [
+                    { "name": "breakpointId", "$ref": "BreakpointId" }
+                ],
+                "description": "Removes JavaScript breakpoint."
+            },
+            {
+                "name": "continueToLocation",
+                "parameters": [
+                    { "name": "location", "$ref": "Location", "description": "Location to continue to." }
+                ],
+                "description": "Continues execution until specific location is reached."
+            },
+            {
+                "name": "stepOver",
+                "description": "Steps over the statement."
+            },
+            {
+                "name": "stepInto",
+                "description": "Steps into the function call."
+            },
+            {
+                "name": "stepOut",
+                "description": "Steps out of the function call."
+            },
+            {
+                "name": "pause",
+                "description": "Stops on the next JavaScript statement."
+            },
+            {
+                "name": "resume",
+                "description": "Resumes JavaScript execution."
+            },
+            {
+                "name": "searchInContent",
+                "parameters": [
+                    { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to search in." },
+                    { "name": "query", "type": "string", "description": "String to search for."  },
+                    { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                    { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+                ],
+                "returns": [
+                    { "name": "result", "type": "array", "items": { "$ref": "Page.SearchMatch" }, "description": "List of search matches." }
+                ],
+                "description": "Searches for given string in script content."
+            },
+            {
+                "name": "restartFrame",
+                "parameters": [
+                    { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier to evaluate on." }
+                ],
+                "returns": [
+                    { "name": "callFrames", "type": "array", "items": { "$ref": "CallFrame"}, "description": "New stack trace." },
+                    { "name": "result", "type": "object", "description": "VM-specific description." }
+                ],
+                "description": "Restarts particular call frame from the beginning."
+            },
+            {
+                "name": "getScriptSource",
+                "parameters": [
+                    { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to get source for." }
+                ],
+                "returns": [
+                    { "name": "scriptSource", "type": "string", "description": "Script source." }
+                ],
+                "description": "Returns source for the script with given id."
+            },
+            {
+                "name": "getFunctionDetails",
+                "parameters": [
+                    { "name": "functionId", "$ref": "Runtime.RemoteObjectId", "description": "Id of the function to get location for." }
+                ],
+                "returns": [
+                    { "name": "details", "$ref": "FunctionDetails", "description": "Information about the function." }
+                ],
+                "description": "Returns detailed informtation on given function."
+            },
+            {
+                "name": "setPauseOnExceptions",
+                "parameters": [
+                    { "name": "state", "type": "string", "enum": ["none", "uncaught", "all"], "description": "Pause on exceptions mode." }
+                ],
+                "description": "Defines pause on exceptions state. Can be set to stop on all exceptions, uncaught exceptions or no exceptions. Initial pause on exceptions state is <code>none</code>."
+            },
+            {
+                "name": "evaluateOnCallFrame",
+                "parameters": [
+                    { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier to evaluate on." },
+                    { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                    { "name": "objectGroup", "type": "string", "optional": true, "description": "String object group name to put result into (allows rapid releasing resulting object handles using <code>releaseObjectGroup</code>)." },
+                    { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Specifies whether command line API should be available to the evaluated expression, defaults to false." },
+                    { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                    { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                    { "name": "generatePreview", "type": "boolean", "optional": true,  "description": "Whether preview should be generated for the result." }
+                ],
+                "returns": [
+                    { "name": "result", "$ref": "Runtime.RemoteObject", "description": "Object wrapper for the evaluation result." },
+                    { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
+                ],
+                "description": "Evaluates expression on a given call frame."
+            },
+            {
+                "name": "setOverlayMessage",
+                "parameters": [
+                    { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
+                ],
+                "description": "Sets overlay message."
+            },
+            {
+                "name": "setVariableValue",
+                "parameters": [
+                    { "name": "scopeNumber", "type": "integer", "description": "0-based number of scope as was listed in scope chain. Only 'local', 'closure' and 'catch' scope types are allowed. Other scopes could be manipulated manually." },
+                    { "name": "variableName", "type": "string", "description": "Variable name." },
+                    { "name": "newValue", "$ref": "Runtime.CallArgument", "description": "New variable value." },
+                    { "name": "callFrameId", "$ref": "CallFrameId", "optional": true, "description": "Id of callframe that holds variable." },
+                    { "name": "functionObjectId", "$ref": "Runtime.RemoteObjectId", "optional": true, "description": "Object id of closure (function) that holds variable." }
+                ],
+                "description": "Changes value of variable in a callframe or a closure. Either callframe or function must be specified. Object-based scopes are not supported and must be mutated manually."
+            }
+        ],
+        "events": [
+            {
+                "name": "globalObjectCleared",
+                "description": "Called when global has been cleared and debugger client should reset its state. Happens upon navigation or reload."
+            },
+            {
+                "name": "scriptParsed",
+                "parameters": [
+                    { "name": "scriptId", "$ref": "ScriptId", "description": "Identifier of the script parsed." },
+                    { "name": "url", "type": "string", "description": "URL or name of the script parsed (if any)." },
+                    { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource with given URL (for script tags)." },
+                    { "name": "startColumn", "type": "integer", "description": "Column offset of the script within the resource with given URL." },
+                    { "name": "endLine", "type": "integer", "description": "Last line of the script." },
+                    { "name": "endColumn", "type": "integer", "description": "Length of the last line of the script." },
+                    { "name": "isContentScript", "type": "boolean", "optional": true, "description": "Determines whether this script is a user extension script." },
+                    { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with script (if any)." },
+                    { "name": "hasSourceURL", "type": "boolean", "optional": true, "description": "True, if this script has sourceURL." }
+                ],
+                "description": "Fired when virtual machine parses script. This event is also fired for all known and uncollected scripts upon enabling debugger."
+            },
+            {
+                "name": "scriptFailedToParse",
+                "parameters": [
+                    { "name": "url", "type": "string", "description": "URL of the script that failed to parse." },
+                    { "name": "scriptSource", "type": "string", "description": "Source text of the script that failed to parse." },
+                    { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource." },
+                    { "name": "errorLine", "type": "integer", "description": "Line with error." },
+                    { "name": "errorMessage", "type": "string", "description": "Parse error message." }
+                ],
+                "description": "Fired when virtual machine fails to parse the script."
+            },
+            {
+                "name": "breakpointResolved",
+                "parameters": [
+                    { "name": "breakpointId", "$ref": "BreakpointId", "description": "Breakpoint unique identifier." },
+                    { "name": "location", "$ref": "Location", "description": "Actual breakpoint location." }
+                ],
+                "description": "Fired when breakpoint is resolved to an actual script and location."
+            },
+            {
+                "name": "paused",
+                "parameters": [
+                    { "name": "callFrames", "type": "array", "items": { "$ref": "CallFrame" }, "description": "Call stack the virtual machine stopped on." },
+                    { "name": "reason", "type": "string", "enum": [ "XHR", "DOM", "EventListener", "exception", "assert", "CSPViolation", "other" ], "description": "Pause reason." },
+                    { "name": "data", "type": "object", "optional": true, "description": "Object containing break-specific auxiliary properties." }
+                ],
+                "description": "Fired when the virtual machine stopped on breakpoint or exception or any other stop criteria."
+            },
+            {
+                "name": "resumed",
+                "description": "Fired when the virtual machine resumed execution."
+            }
+        ]
+    },
+    {
+        "domain": "DOMDebugger",
+        "description": "DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.",
+        "types": [
+            {
+                "id": "DOMBreakpointType",
+                "type": "string",
+                "enum": ["subtree-modified", "attribute-modified", "node-removed"],
+                "description": "DOM breakpoint type."
+            }
+        ],
+        "commands": [
+            {
+                "name": "setDOMBreakpoint",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to set breakpoint on." },
+                    { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the operation to stop upon." }
+                ],
+                "description": "Sets breakpoint on particular operation with DOM."
+            },
+            {
+                "name": "removeDOMBreakpoint",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to remove breakpoint from." },
+                    { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the breakpoint to remove." }
+                ],
+                "description": "Removes DOM breakpoint that was set using <code>setDOMBreakpoint</code>."
+            },
+            {
+                "name": "setEventListenerBreakpoint",
+                "parameters": [
+                    { "name": "eventName", "type": "string", "description": "DOM Event name to stop on (any DOM event will do)." }
+                ],
+                "description": "Sets breakpoint on particular DOM event."
+            },
+            {
+                "name": "removeEventListenerBreakpoint",
+                "parameters": [
+                    { "name": "eventName", "type": "string", "description": "Event name." }
+                ],
+                "description": "Removes breakpoint on particular DOM event."
+            },
+            {
+                "name": "setInstrumentationBreakpoint",
+                "parameters": [
+                    { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+                ],
+                "description": "Sets breakpoint on particular native event."
+            },
+            {
+                "name": "removeInstrumentationBreakpoint",
+                "parameters": [
+                    { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+                ],
+                "description": "Sets breakpoint on particular native event."
+            },
+            {
+                "name": "setXHRBreakpoint",
+                "parameters": [
+                    { "name": "url", "type": "string", "description": "Resource URL substring. All XHRs having this substring in the URL will get stopped upon." }
+                ],
+                "description": "Sets breakpoint on XMLHttpRequest."
+            },
+            {
+                "name": "removeXHRBreakpoint",
+                "parameters": [
+                    { "name": "url", "type": "string", "description": "Resource URL substring." }
+                ],
+                "description": "Removes breakpoint from XMLHttpRequest."
+            }
+        ]
+    },
+    {
+        "domain": "Profiler",
+        "types": [
+            {
+                "id": "ProfileHeader",
+                "type": "object",
+                "description": "Profile header.",
+                "properties": [
+                    { "name": "typeId", "type": "string", "enum": ["CPU", "CSS"], "description": "Profile type name." },
+                    { "name": "title", "type": "string", "description": "Profile title." },
+                    { "name": "uid", "type": "integer", "description": "Unique identifier of the profile." }
+                ]
+            },
+            {
+                "id": "CPUProfileNode",
+                "type": "object",
+                "description": "CPU Profile node. Holds callsite information, execution statistics and child nodes.",
+                "properties": [
+                    { "name": "functionName", "type": "string", "description": "Function name." },
+                    { "name": "url", "type": "string", "description": "URL." },
+                    { "name": "lineNumber", "type": "integer", "description": "Line number." },
+                    { "name": "totalTime", "type": "number", "description": "Total execution time." },
+                    { "name": "selfTime", "type": "number", "description": "Self time." },
+                    { "name": "numberOfCalls", "type": "integer", "description": "Number of calls." },
+                    { "name": "callUID", "type": "number", "description": "Call UID." },
+                    { "name": "children", "type": "array", "items": { "$ref": "CPUProfileNode" }, "description": "Child nodes." },
+                    { "name": "id", "optional": true, "type": "integer", "description": "Unique id of the node." }
+                ]
+            },
+            {
+                "id": "CPUProfile",
+                "type": "object",
+                "description": "Profile.",
+                "properties": [
+                    { "name": "head", "$ref": "CPUProfileNode", "optional": true },
+                    { "name": "idleTime", "type": "number", "optional": true }
+                ]
+            }
+        ],
+        "commands": [
+            {
+                "name": "enable"
+            },
+            {
+                "name": "disable"
+            },
+            {
+                "name": "start"
+            },
+            {
+                "name": "stop"
+            },
+            {
+                "name": "getProfileHeaders",
+                "returns": [
+                    { "name": "headers", "type": "array", "items": { "$ref": "ProfileHeader"} }
+                ]
+            },
+            {
+                "name": "getCPUProfile",
+                "parameters": [
+                    { "name": "uid", "type": "integer" }
+                ],
+                "returns": [
+                    { "name": "profile", "$ref": "CPUProfile" }
+                ]
+            },
+            {
+                "name": "removeProfile",
+                "parameters": [
+                    { "name": "type", "type": "string" },
+                    { "name": "uid", "type": "integer" }
+                ]
+            },
+            {
+                "name": "clearProfiles"
+            }
+        ],
+        "events": [
+            {
+                "name": "addProfileHeader",
+                "parameters": [
+                    { "name": "header", "$ref": "ProfileHeader" }
+                ]
+            },
+            {
+                "name": "setRecordingProfile",
+                "parameters": [
+                    { "name": "isProfiling", "type": "boolean" }
+                ]
+            },
+            {
+                "name": "resetProfiles"
+            }
+        ]
+    },
+    {
+        "domain": "LayerTree",
+        "types": [
+            {
+                "id": "LayerId",
+                "type": "string",
+                "description": "Unique RenderLayer identifier."
+            },
+            {
+                "id": "PseudoElementId",
+                "type": "string",
+                "description": "Unique PseudoElement identifier."
+            },
+            {
+                "id": "IntRect",
+                "type": "object",
+                "description": "A rectangle.",
+                "properties": [
+                    { "name": "x", "type": "integer", "description": "The x position." },
+                    { "name": "y", "type": "integer", "description": "The y position." },
+                    { "name": "width", "type": "integer", "description": "The width metric." },
+                    { "name": "height", "type": "integer", "description": "The height metric." }
+                ]
+            },
+            {
+                "id": "Layer",
+                "type": "object",
+                "description": "Information about a compositing layer.",
+                "properties": [
+                    { "name": "layerId", "$ref": "LayerId", "description": "The unique id for this layer." },
+                    { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The id for the node associated with this layer." },
+                    { "name": "bounds", "$ref": "IntRect", "description": "Bounds of the layer in absolute page coordinates." },
+                    { "name": "paintCount", "type": "integer", "description": "Indicates how many time this layer has painted." },
+                    { "name": "memory", "type": "integer", "description": "Estimated memory used by this layer." },
+                    { "name": "compositedBounds", "$ref": "IntRect", "description": "The bounds of the composited layer." },
+                    { "name": "isInShadowTree", "type": "boolean", "optional": true, "description": "Indicates whether this layer is associated with an element hosted in a shadow tree." },
+                    { "name": "isReflection", "type": "boolean", "optional": true, "description": "Indicates whether this layer was used to provide a reflection for the element." },
+                    { "name": "isGeneratedContent", "type": "boolean", "optional": true, "description": "Indicates whether the layer is attached to a pseudo element that is CSS generated content." },
+                    { "name": "isAnonymous", "type": "boolean", "optional": true, "description": "Indicates whether the layer was created for a CSS anonymous block or box." },
+                    { "name": "pseudoElementId", "$ref": "PseudoElementId", "optional": true, "description": "The id for the pseudo element associated with this layer." },
+                    { "name": "pseudoElement", "type": "string", "optional": true, "description": "The name of the CSS pseudo-element that prompted the layer to be generated." }
+                ]
+            },
+            {
+                "id": "CompositingReasons",
+                "type": "object",
+                "description": "An object containing the reasons why the layer was composited as properties.",
+                "properties": [
+                    { "name": "transform3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a CSS 3D transform." },
+                    { "name": "video", "type": "boolean", "optional": true, "description": "Composition due to association with a <video> element." },
+                    { "name": "canvas", "type": "boolean", "optional": true, "description": "Composition due to the element being a <canvas> element." },
+                    { "name": "plugin", "type": "boolean", "optional": true, "description": "Composition due to association with a plugin." },
+                    { "name": "iFrame", "type": "boolean", "optional": true, "description": "Composition due to association with an <iframe> element." },
+                    { "name": "backfaceVisibilityHidden", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"backface-visibility: hidden\" style." },
+                    { "name": "clipsCompositingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element clipping compositing descendants." },
+                    { "name": "animation", "type": "boolean", "optional": true, "description": "Composition due to association with an animated element." },
+                    { "name": "filters", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied." },
+                    { "name": "positionFixed", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: fixed\" style." },
+                    { "name": "positionSticky", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: sticky\" style." },
+                    { "name": "overflowScrollingTouch", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"overflow-scrolling: touch\" style." },
+                    { "name": "stacking", "type": "boolean", "optional": true, "description": "Composition due to association with an element establishing a stacking context." },
+                    { "name": "overlap", "type": "boolean", "optional": true, "description": "Composition due to association with an element overlapping other composited elements." },
+                    { "name": "negativeZIndexChildren", "type": "boolean", "optional": true, "description": "Composition due to association with an element with descendants that have a negative z-index." },
+                    { "name": "transformWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with composited descendants." },
+                    { "name": "opacityWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with opacity applied and composited descendants." },
+                    { "name": "maskWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with a masked element and composited descendants." },
+                    { "name": "reflectionWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a reflection and composited descendants." },
+                    { "name": "filterWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied and composited descendants." },
+                    { "name": "blendingWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS blending applied and composited descendants." },
+                    { "name": "perspective", "type": "boolean", "optional": true, "description": "Composition due to association with an element with perspective applied." },
+                    { "name": "preserve3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"transform-style: preserve-3d\" style." },
+                    { "name": "root", "type": "boolean", "optional": true, "description": "Composition due to association with the root element." }
+                ]
+            }
+        ],
+        "commands": [
+            {
+                "name": "enable",
+                "description": "Enables compositing tree inspection."
+            },
+            {
+                "name": "disable",
+                "description": "Disables compositing tree inspection."
+            },
+            {
+                "name": "layersForNode",
+                "parameters": [
+                    { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Root of the subtree for which we want to gather layers." }                ],
+                "description": "Returns the layer tree structure of the current page.",
+                "returns": [
+                    { "name": "layers", "type": "array", "items": { "$ref": "Layer" }, "description": "Child layers." }
+                ]
+            },
+            {
+                "name": "reasonsForCompositingLayer",
+                "parameters": [
+                    { "name": "layerId", "$ref": "LayerId", "description": "The id of the layer for which we want to get the reasons it was composited." }
+                ],
+                "description": "Provides the reasons why the given layer was composited.",
+                "returns": [
+                    { "name": "compositingReasons", "$ref": "CompositingReasons", "description": "An object containing the reasons why the layer was composited as properties." }
+                ]
+            }
+        ],
+        "events": [
+            {
+                "name": "layerTreeDidChange"
+            }
+        ]
+    }]
+}
diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json b/Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json
new file mode 100644
index 000000000..f78755967
--- /dev/null
+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-8.0.json
@@ -0,0 +1,2999 @@
+{"domains":[
+{
+    "domain": "Console",
+    "description": "Console domain defines methods and events for interaction with the JavaScript console. Console collects messages created by means of the <a href='http://getfirebug.com/wiki/index.php/Console_API'>JavaScript Console API</a>. One needs to enable this domain using <code>enable</code> command in order to start receiving the console messages. Browser collects messages issued while console domain is not enabled as well and reports them using <code>messageAdded</code> notification upon enabling.",
+    "types": [
+        {
+            "id": "ConsoleNetworkRequestId",
+            "type": "string",
+            "description": "Unique request identifier. FIXME: Duplicate of Network.RequestId <https://webkit.org/b/125664> Web Inspector: FIX Type Dependency Issues"
+        },
+        {
+            "id": "ConsoleDOMNodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier. FIXME: Duplicate of DOM.NodeId <https://webkit.org/b/125664> Web Inspector: FIX Type Dependency Issues"
+        },
+        {
+            "id": "ConsoleMessage",
+            "type": "object",
+            "description": "Console message.",
+            "properties": [
+                { "name": "source", "type": "string", "enum": ["xml", "javascript", "network", "console-api", "storage", "appcache", "rendering", "css", "security", "other"], "description": "Message source." },
+                { "name": "level", "type": "string", "enum": ["log", "warning", "error", "debug"], "description": "Message severity." },
+                { "name": "text", "type": "string", "description": "Message text." },
+                { "name": "type", "type": "string", "optional": true, "enum": ["log", "dir", "dirxml", "table", "trace", "clear", "startGroup", "startGroupCollapsed", "endGroup", "assert", "timing", "profile", "profileEnd"], "description": "Console message type." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL of the message origin." },
+                { "name": "line", "type": "integer", "optional": true, "description": "Line number in the resource that generated this message." },
+                { "name": "column", "type": "integer", "optional": true, "description": "Column number on the line in the resource that generated this message." },
+                { "name": "repeatCount", "type": "integer", "optional": true, "description": "Repeat count for repeated messages." },
+                { "name": "parameters", "type": "array", "items": { "$ref": "Runtime.RemoteObject" }, "optional": true, "description": "Message parameters in case of the formatted message." },
+                { "name": "stackTrace", "$ref": "StackTrace", "optional": true, "description": "JavaScript stack trace for assertions and error messages." },
+                { "name": "networkRequestId", "$ref": "ConsoleNetworkRequestId", "optional": true, "description": "Identifier of the network request associated with this message." }
+            ]
+        },
+        {
+            "id": "CallFrame",
+            "type": "object",
+            "description": "Stack entry for console errors and assertions.",
+            "properties": [
+                { "name": "functionName", "type": "string", "description": "JavaScript function name." },
+                { "name": "url", "type": "string", "description": "JavaScript script name or url." },
+                { "name": "lineNumber", "type": "integer", "description": "JavaScript script line number." },
+                { "name": "columnNumber", "type": "integer", "description": "JavaScript script column number." }
+            ]
+        },
+        {
+            "id": "StackTrace",
+            "type": "array",
+            "items": { "$ref": "CallFrame" },
+            "description": "Call frames for assertions or error messages."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables console domain, sends the messages collected so far to the client by means of the <code>messageAdded</code> notification."
+        },
+        {
+            "name": "disable",
+            "description": "Disables console domain, prevents further console messages from being reported to the client."
+        },
+        {
+            "name": "clearMessages",
+            "description": "Clears console messages collected in the browser."
+        },
+        {
+            "name": "setMonitoringXHREnabled",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "Monitoring enabled state." }
+            ],
+            "description": "Toggles monitoring of XMLHttpRequest. If <code>true</code>, console will receive messages upon each XHR issued."
+        },
+        {
+            "name": "addInspectedNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "ConsoleDOMNodeId", "description": "DOM node id to be accessible by means of $x command line API." }
+            ],
+            "description": "Enables console to refer to the node with given id via $x (see Command Line API for more details $x functions)."
+        }
+    ],
+    "events": [
+        {
+            "name": "messageAdded",
+            "parameters": [
+                { "name": "message", "$ref": "ConsoleMessage", "description": "Console message that has been added." }
+            ],
+            "description": "Issued when new console message is added."
+        },
+        {
+            "name": "messageRepeatCountUpdated",
+            "parameters": [
+                { "name": "count", "type": "integer", "description": "New repeat count value." }
+            ],
+            "description": "Issued when subsequent message(s) are equal to the previous one(s)."
+        },
+        {
+            "name": "messagesCleared",
+            "description": "Issued when console is cleared. This happens either upon <code>clearMessages</code> command or after page navigation."
+        }
+    ]
+}
+,
+{
+    "domain": "Debugger",
+    "description": "Debugger domain exposes JavaScript debugging capabilities. It allows setting and removing breakpoints, stepping through execution, exploring stack traces, etc.",
+    "types": [
+        {
+            "id": "BreakpointId",
+            "type": "string",
+            "description": "Breakpoint identifier."
+        },
+        {
+            "id": "BreakpointActionIdentifier",
+            "type": "integer",
+            "description": "Breakpoint action identifier."
+        },
+        {
+            "id": "ScriptId",
+            "type": "string",
+            "description": "Unique script identifier."
+        },
+        {
+            "id": "CallFrameId",
+            "type": "string",
+            "description": "Call frame identifier."
+        },
+        {
+            "id": "Location",
+            "type": "object",
+            "properties": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Script identifier as reported in the <code>Debugger.scriptParsed</code>." },
+                { "name": "lineNumber", "type": "integer", "description": "Line number in the script." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Column number in the script." }
+            ],
+            "description": "Location in the source code."
+        },
+        {
+            "id": "BreakpointAction",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["log", "evaluate", "sound", "probe"], "description": "Different kinds of breakpoint actions." },
+                { "name": "data", "type": "string", "optional": true, "description": "Data associated with this breakpoint type (e.g. for type \"eval\" this is the JavaScript string to evalulate)." },
+                { "name": "id", "$ref": "BreakpointActionIdentifier", "optional": true, "description": "A frontend-assigned identifier for this breakpoint action." }
+            ],
+            "description": "Action to perform when a breakpoint is triggered."
+        },
+        {
+            "id": "BreakpointOptions",
+            "type": "object",
+            "properties": [
+                { "name": "condition", "type": "string", "optional": true, "description": "Expression to use as a breakpoint condition. When specified, debugger will only stop on the breakpoint if this expression evaluates to true." },
+                { "name": "actions", "type": "array", "optional": true, "items": { "$ref": "BreakpointAction" }, "description": "Actions to perform automatically when the breakpoint is triggered." },
+                { "name": "autoContinue", "type": "boolean", "optional": true, "description": "Automatically continue after hitting this breakpoint and running actions." }
+            ],
+            "description": "Extra options that modify breakpoint behavior."
+        },
+        {
+            "id": "FunctionDetails",
+            "type": "object",
+            "properties": [
+                { "name": "location", "$ref": "Location", "description": "Location of the function." },
+                { "name": "name", "type": "string", "optional": true, "description": "Name of the function. Not present for anonymous functions." },
+                { "name": "displayName", "type": "string", "optional": true, "description": "Display name of the function(specified in 'displayName' property on the function object)." },
+                { "name": "inferredName", "type": "string", "optional": true, "description": "Name of the function inferred from its initial assignment." },
+                { "name": "scopeChain", "type": "array", "optional": true, "items": { "$ref": "Scope" }, "description": "Scope chain for this closure." }
+            ],
+            "description": "Information about the function."
+        },
+        {
+            "id": "CallFrame",
+            "type": "object",
+            "properties": [
+                { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier. This identifier is only valid while the virtual machine is paused." },
+                { "name": "functionName", "type": "string", "description": "Name of the JavaScript function called on this call frame." },
+                { "name": "location", "$ref": "Location", "description": "Location in the source code." },
+                { "name": "scopeChain", "type": "array", "items": { "$ref": "Scope" }, "description": "Scope chain for this call frame." },
+                { "name": "this", "$ref": "Runtime.RemoteObject", "description": "<code>this</code> object for this call frame." }
+            ],
+            "description": "JavaScript call frame. Array of call frames form the call stack."
+        },
+        {
+            "id": "Scope",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["global", "local", "with", "closure", "catch"], "description": "Scope type." },
+                { "name": "object", "$ref": "Runtime.RemoteObject", "description": "Object representing the scope. For <code>global</code> and <code>with</code> scopes it represents the actual object; for the rest of the scopes, it is artificial transient object enumerating scope variables as its properties." }
+            ],
+            "description": "Scope description."
+        },
+        {
+            "id": "ProbeSample",
+            "description": "A sample collected by evaluating a probe breakpoint action.",
+            "type": "object",
+            "properties": [
+                { "name": "probeId", "$ref": "BreakpointActionIdentifier", "description": "Identifier of the probe breakpoint action that created the sample." },
+                { "name": "sampleId", "type": "integer", "description": "Unique identifier for this sample." },
+                { "name": "batchId", "type": "integer", "description": "A batch identifier which is the same for all samples taken at the same breakpoint hit." },
+                { "name": "timestamp", "type": "number", "description": "Timestamp of when the sample was taken." },
+                { "name": "payload", "$ref": "Runtime.RemoteObject", "description": "Contents of the sample." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables debugger for the given page. Clients should not assume that the debugging has been enabled until the result for this command is received."
+        },
+        {
+            "name": "disable",
+            "description": "Disables debugger for given page."
+        },
+        {
+            "name": "setBreakpointsActive",
+            "parameters": [
+                { "name": "active", "type": "boolean", "description": "New value for breakpoints active state." }
+            ],
+            "description": "Activates / deactivates all breakpoints on the page."
+        },
+        {
+            "name": "setBreakpointByUrl",
+            "parameters": [
+                { "name": "lineNumber", "type": "integer", "description": "Line number to set breakpoint at." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL of the resources to set breakpoint on." },
+                { "name": "urlRegex", "type": "string", "optional": true, "description": "Regex pattern for the URLs of the resources to set breakpoints on. Either <code>url</code> or <code>urlRegex</code> must be specified." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Offset in the line to set breakpoint at." },
+                { "name": "options", "$ref": "BreakpointOptions", "optional": true, "description": "Options to apply to this breakpoint to modify its behavior." }
+            ],
+            "returns": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                { "name": "locations", "type": "array", "items": { "$ref": "Location"}, "description": "List of the locations this breakpoint resolved into upon addition." }
+            ],
+            "description": "Sets JavaScript breakpoint at given location specified either by URL or URL regex. Once this command is issued, all existing parsed scripts will have breakpoints resolved and returned in <code>locations</code> property. Further matching script parsing will result in subsequent <code>breakpointResolved</code> events issued. This logical breakpoint will survive page reloads."
+        },
+        {
+            "name": "setBreakpoint",
+            "parameters": [
+                { "name": "location", "$ref": "Location", "description": "Location to set breakpoint in." },
+                { "name": "options", "$ref": "BreakpointOptions", "optional": true, "description": "Options to apply to this breakpoint to modify its behavior." }
+            ],
+            "returns": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                { "name": "actualLocation", "$ref": "Location", "description": "Location this breakpoint resolved into." }
+            ],
+            "description": "Sets JavaScript breakpoint at a given location."
+        },
+        {
+            "name": "removeBreakpoint",
+            "parameters": [
+                { "name": "breakpointId", "$ref": "BreakpointId" }
+            ],
+            "description": "Removes JavaScript breakpoint."
+        },
+        {
+            "name": "continueToLocation",
+            "parameters": [
+                { "name": "location", "$ref": "Location", "description": "Location to continue to." }
+            ],
+            "description": "Continues execution until specific location is reached."
+        },
+        {
+            "name": "stepOver",
+            "description": "Steps over the statement."
+        },
+        {
+            "name": "stepInto",
+            "description": "Steps into the function call."
+        },
+        {
+            "name": "stepOut",
+            "description": "Steps out of the function call."
+        },
+        {
+            "name": "pause",
+            "description": "Stops on the next JavaScript statement."
+        },
+        {
+            "name": "resume",
+            "description": "Resumes JavaScript execution."
+        },
+        {
+            "name": "searchInContent",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to search in." },
+                { "name": "query", "type": "string", "description": "String to search for."  },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "GenericTypes.SearchMatch" }, "description": "List of search matches." }
+            ],
+            "description": "Searches for given string in script content."
+        },
+        {
+            "name": "getScriptSource",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to get source for." }
+            ],
+            "returns": [
+                { "name": "scriptSource", "type": "string", "description": "Script source." }
+            ],
+            "description": "Returns source for the script with given id."
+        },
+        {
+            "name": "getFunctionDetails",
+            "parameters": [
+                { "name": "functionId", "$ref": "Runtime.RemoteObjectId", "description": "Id of the function to get location for." }
+            ],
+            "returns": [
+                { "name": "details", "$ref": "FunctionDetails", "description": "Information about the function." }
+            ],
+            "description": "Returns detailed informtation on given function."
+        },
+        {
+            "name": "setPauseOnExceptions",
+            "parameters": [
+                { "name": "state", "type": "string", "enum": ["none", "uncaught", "all"], "description": "Pause on exceptions mode." }
+            ],
+            "description": "Defines pause on exceptions state. Can be set to stop on all exceptions, uncaught exceptions or no exceptions. Initial pause on exceptions state is <code>none</code>."
+        },
+        {
+            "name": "evaluateOnCallFrame",
+            "parameters": [
+                { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier to evaluate on." },
+                { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "String object group name to put result into (allows rapid releasing resulting object handles using <code>releaseObjectGroup</code>)." },
+                { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Specifies whether command line API should be available to the evaluated expression, defaults to false." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "Runtime.RemoteObject", "description": "Object wrapper for the evaluation result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
+            ],
+            "description": "Evaluates expression on a given call frame."
+        },
+        {
+            "name": "setOverlayMessage",
+            "parameters": [
+                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
+            ],
+            "description": "Sets overlay message."
+        }
+    ],
+    "events": [
+        {
+            "name": "globalObjectCleared",
+            "description": "Called when global has been cleared and debugger client should reset its state. Happens upon navigation or reload."
+        },
+        {
+            "name": "scriptParsed",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Identifier of the script parsed." },
+                { "name": "url", "type": "string", "description": "URL or name of the script parsed (if any)." },
+                { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource with given URL (for script tags)." },
+                { "name": "startColumn", "type": "integer", "description": "Column offset of the script within the resource with given URL." },
+                { "name": "endLine", "type": "integer", "description": "Last line of the script." },
+                { "name": "endColumn", "type": "integer", "description": "Length of the last line of the script." },
+                { "name": "isContentScript", "type": "boolean", "optional": true, "description": "Determines whether this script is a user extension script." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with script (if any)." },
+                { "name": "hasSourceURL", "type": "boolean", "optional": true, "description": "True, if this script has sourceURL." }
+            ],
+            "description": "Fired when virtual machine parses script. This event is also fired for all known and uncollected scripts upon enabling debugger."
+        },
+        {
+            "name": "scriptFailedToParse",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "URL of the script that failed to parse." },
+                { "name": "scriptSource", "type": "string", "description": "Source text of the script that failed to parse." },
+                { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource." },
+                { "name": "errorLine", "type": "integer", "description": "Line with error." },
+                { "name": "errorMessage", "type": "string", "description": "Parse error message." }
+            ],
+            "description": "Fired when virtual machine fails to parse the script."
+        },
+        {
+            "name": "breakpointResolved",
+            "parameters": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Breakpoint unique identifier." },
+                { "name": "location", "$ref": "Location", "description": "Actual breakpoint location." }
+            ],
+            "description": "Fired when breakpoint is resolved to an actual script and location."
+        },
+        {
+            "name": "paused",
+            "parameters": [
+                { "name": "callFrames", "type": "array", "items": { "$ref": "CallFrame" }, "description": "Call stack the virtual machine stopped on." },
+                { "name": "reason", "type": "string", "enum": [ "XHR", "DOM", "EventListener", "exception", "assert", "CSPViolation", "other" ], "description": "Pause reason." },
+                { "name": "data", "type": "object", "optional": true, "description": "Object containing break-specific auxiliary properties." }
+            ],
+            "description": "Fired when the virtual machine stopped on breakpoint or exception or any other stop criteria."
+        },
+        {
+            "name": "resumed",
+            "description": "Fired when the virtual machine resumed execution."
+        },
+        {
+            "name": "didSampleProbe",
+            "description": "Fires when a new probe sample is collected.",
+            "parameters": [
+                { "name": "sample", "$ref": "ProbeSample", "description": "A collected probe sample." }
+            ]
+        },
+        {
+            "name": "playBreakpointActionSound",
+            "description": "Fired when a \"sound\" breakpoint action is triggered on a breakpoint.",
+            "parameters": [
+                { "name": "breakpointActionId", "$ref": "BreakpointActionIdentifier", "description": "Breakpoint action identifier." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "GenericTypes",
+    "description": "Exposes generic types to be used by any domain.",
+    "types": [
+        {
+            "id": "SearchMatch",
+            "type": "object",
+            "description": "Search match in a resource.",
+            "properties": [
+                { "name": "lineNumber", "type": "number", "description": "Line number in resource content." },
+                { "name": "lineContent", "type": "string", "description": "Line with match content." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Inspector",
+    "types": [],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables inspector domain notifications."
+        },
+        {
+            "name": "disable",
+            "description": "Disables inspector domain notifications."
+        }
+    ],
+    "events": [
+        {
+            "name": "evaluateForTestInFrontend",
+            "parameters": [
+                { "name": "script", "type": "string" }
+            ]
+        },
+        {
+            "name": "inspect",
+            "parameters": [
+                { "name": "object", "$ref": "Runtime.RemoteObject" },
+                { "name": "hints", "type": "object" }
+            ]
+        },
+        {
+            "name": "detached",
+            "description": "Fired when remote debugging connection is about to be terminated. Contains detach reason.",
+            "parameters": [
+                { "name": "reason", "type": "string", "description": "The reason why connection has been terminated." }
+            ]
+        },
+        {
+            "name": "targetCrashed",
+            "description": "Fired when debugging target has crashed"
+        }
+    ]
+}
+,
+{
+    "domain": "Profiler",
+    "types": [
+        {
+            "id": "ProfileHeader",
+            "type": "object",
+            "description": "Profile header.",
+            "properties": [
+                { "name": "typeId", "type": "string", "enum": ["CPU"], "description": "Profile type name." },
+                { "name": "title", "type": "string", "description": "Profile title." },
+                { "name": "uid", "type": "integer", "description": "Unique identifier of the profile." }
+            ]
+        },
+        {
+            "id": "CPUProfileNodeCall",
+            "type": "object",
+            "description": "CPU Profile call info. Holds time information for a specific call that happened on a node.",
+            "properties": [
+                { "name": "startTime", "type": "number", "description": "Start time for the call." },
+                { "name": "totalTime", "type": "number", "description": "Total execution time for the call." }
+            ]
+        },
+        {
+            "id": "CPUProfileNode",
+            "type": "object",
+            "description": "CPU Profile node. Holds callsite information, execution statistics and child nodes.",
+            "properties": [
+                { "name": "id", "type": "integer", "description": "Unique identifier for this call site." },
+                { "name": "calls", "type": "array", "items": { "$ref": "CPUProfileNodeCall" }, "description": "Calls making up this node." },
+                { "name": "functionName", "type": "string", "optional": true, "description": "Function name." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL." },
+                { "name": "lineNumber", "type": "integer", "optional": true, "description": "Line number." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Column number." },
+                { "name": "children", "type": "array", "items": { "$ref": "CPUProfileNode" }, "optional": true, "description": "Child nodes." }
+            ]
+        },
+        {
+            "id": "CPUProfile",
+            "type": "object",
+            "description": "Profile.",
+            "properties": [
+                { "name": "rootNodes", "type": "array", "items": { "$ref": "CPUProfileNode" }, "description": "Top level nodes in the stack." },
+                { "name": "idleTime", "type": "number", "optional": true }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable"
+        },
+        {
+            "name": "disable"
+        },
+        {
+            "name": "start"
+        },
+        {
+            "name": "stop"
+        },
+        {
+            "name": "getProfileHeaders",
+            "returns": [
+                { "name": "headers", "type": "array", "items": { "$ref": "ProfileHeader"} }
+            ]
+        },
+        {
+            "name": "getCPUProfile",
+            "parameters": [
+                { "name": "uid", "type": "integer" }
+            ],
+            "returns": [
+                { "name": "profile", "$ref": "CPUProfile" }
+            ]
+        },
+        {
+            "name": "removeProfile",
+            "parameters": [
+                { "name": "type", "type": "string" },
+                { "name": "uid", "type": "integer" }
+            ]
+        },
+        {
+            "name": "clearProfiles"
+        }
+    ],
+    "events": [
+        {
+            "name": "addProfileHeader",
+            "parameters": [
+                { "name": "header", "$ref": "ProfileHeader" }
+            ]
+        },
+        {
+            "name": "setRecordingProfile",
+            "parameters": [
+                { "name": "isProfiling", "type": "boolean" }
+            ]
+        },
+        {
+            "name": "resetProfiles"
+        }
+    ]
+}
+,
+{
+    "domain": "Runtime",
+    "description": "Runtime domain exposes JavaScript runtime by means of remote evaluation and mirror objects. Evaluation results are returned as mirror object that expose object type, string representation and unique identifier that can be used for further object reference. Original objects are maintained in memory unless they are either explicitly released or are released along with the other objects in their object group.",
+    "types": [
+        {
+            "id": "RemoteObjectId",
+            "type": "string",
+            "description": "Unique object identifier."
+        },
+        {
+            "id": "RemoteObject",
+            "type": "object",
+            "description": "Mirror object referencing original JavaScript object.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date"], "description": "Object subtype hint. Specified for <code>object</code> type values only." },
+                { "name": "className", "type": "string", "optional": true, "description": "Object class (constructor) name. Specified for <code>object</code> type values only." },
+                { "name": "value", "type": "any", "optional": true, "description": "Remote object value (in case of primitive values or JSON values if it was requested)." },
+                { "name": "description", "type": "string", "optional": true, "description": "String representation of the object." },
+                { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Unique object identifier (for non-primitive values)." },
+                { "name": "preview", "$ref": "ObjectPreview", "optional": true, "description": "Preview containsing abbreviated property values." }
+            ]
+        },
+        {
+            "id": "ObjectPreview",
+            "type": "object",
+            "description": "Object containing abbreviated remote object value.",
+            "properties": [
+                { "name": "lossless", "type": "boolean", "description": "Determines whether preview is lossless (contains all information of the original object)." },
+                { "name": "overflow", "type": "boolean", "description": "True iff some of the properties of the original did not fit." },
+                { "name": "properties", "type": "array", "items": { "$ref": "PropertyPreview" }, "description": "List of the properties." }
+            ]
+        },
+        {
+            "id": "PropertyPreview",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean"], "description": "Object type." },
+                { "name": "value", "type": "string", "optional": true, "description": "User-friendly property value string." },
+                { "name": "valuePreview", "$ref": "ObjectPreview", "optional": true, "description": "Nested value preview." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date"], "description": "Object subtype hint. Specified for <code>object</code> type values only." }
+            ]
+        },
+        {
+            "id": "PropertyDescriptor",
+            "type": "object",
+            "description": "Object property descriptor.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." },
+                { "name": "writable", "type": "boolean", "optional": true, "description": "True if the value associated with the property may be changed (data descriptors only)." },
+                { "name": "get", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a getter for the property, or <code>undefined</code> if there is no getter (accessor descriptors only)." },
+                { "name": "set", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a setter for the property, or <code>undefined</code> if there is no setter (accessor descriptors only)." },
+                { "name": "configurable", "type": "boolean", "description": "True if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object." },
+                { "name": "enumerable", "type": "boolean", "description": "True if this property shows up during enumeration of the properties on the corresponding object." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "isOwn", "optional": true, "type": "boolean", "description": "True if the property is owned for the object." }
+            ]
+        },
+        {
+            "id": "InternalPropertyDescriptor",
+            "type": "object",
+            "description": "Object internal property descriptor. This property isn't normally visible in JavaScript code.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Conventional property name." },
+                { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." }
+            ]
+        },
+        {
+            "id": "CallArgument",
+            "type": "object",
+            "description": "Represents function call argument. Either remote object id <code>objectId</code> or primitive <code>value</code> or neither of (for undefined) them should be specified.",
+            "properties": [
+                { "name": "value", "type": "any", "optional": true, "description": "Primitive value." },
+                { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Remote object handle." }
+            ]
+        },
+        {
+            "id": "ExecutionContextId",
+            "type": "integer",
+            "description": "Id of an execution context."
+        },
+        {
+            "id": "RuntimeFrameId",
+            "type": "string",
+            "description": "Unique frame identifier. FIXME: Duplicate of Network.FrameId <https://webkit.org/b/125664> Web Inspector: FIX Type Dependency Issues"
+        },
+        {
+            "id": "ExecutionContextDescription",
+            "type": "object",
+            "description": "Description of an isolated world.",
+            "properties": [
+                { "name": "id", "$ref": "ExecutionContextId", "description": "Unique id of the execution context. It can be used to specify in which execution context script evaluation should be performed." },
+                { "name": "isPageContext", "type": "boolean", "description": "True if this is a context where inpspected web page scripts run. False if it is a content script isolated context." },
+                { "name": "name", "type": "string", "description": "Human readable name describing given context."},
+                { "name": "frameId", "$ref": "RuntimeFrameId", "description": "Id of the owning frame." }
+            ]
+        },
+        {
+            "id": "SyntaxErrorType",
+            "type": "string",
+            "enum": ["none", "irrecoverable", "unterminated-literal", "recoverable"],
+            "description": "Syntax error type: \"none\" for no error, \"irrecoverable\" for unrecoverable errors, \"unterminated-literal\" for when there is an unterminated literal, \"recoverable\" for when the expression is unfinished but valid so far."
+        },
+        {
+            "id": "ErrorRange",
+            "type": "object",
+            "description": "Range of an error in source code.",
+            "properties": [
+                { "name": "startOffset", "type": "integer", "description": "Start offset of range (inclusive)." },
+                { "name": "endOffset", "type": "integer", "description": "End offset of range (exclusive)." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "parse",
+            "parameters": [
+                { "name": "source", "type": "string", "description": "Source code to parse." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "SyntaxErrorType", "description": "Parse result." },
+                { "name": "message", "type": "string", "optional": true, "description": "Parse error message." },
+                { "name": "range", "$ref": "ErrorRange", "optional": true, "description": "Range in the source where the error occurred." }
+            ],
+            "description": "Parses JavaScript source code for errors."
+        },
+        {
+            "name": "evaluate",
+            "parameters": [
+                { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." },
+                { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Determines whether Command Line API should be available during the evaluation." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "contextId", "$ref": "Runtime.ExecutionContextId", "optional": true, "description": "Specifies in which isolated context to perform evaluation. Each content script lives in an isolated context and this parameter may be used to specify one of those contexts. If the parameter is omitted or 0 the evaluation will be performed in the context of the inspected page." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "RemoteObject", "description": "Evaluation result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
+            ],
+            "description": "Evaluates expression on global object."
+        },
+        {
+            "name": "callFunctionOn",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to call function on." },
+                { "name": "functionDeclaration", "type": "string", "description": "Declaration of the function to call." },
+                { "name": "arguments", "type": "array", "items": { "$ref": "CallArgument", "description": "Call argument." }, "optional": true, "description": "Call arguments. All call arguments must belong to the same JavaScript world as the target object." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether function call should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object which should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "RemoteObject", "description": "Call result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
+            ],
+            "description": "Calls function with given declaration on the given object. Object group of the result is inherited from the target object."
+        },
+        {
+            "name": "getProperties",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to return properties for." },
+                { "name": "ownProperties", "optional": true, "type": "boolean", "description": "If true, returns properties belonging only to the element itself, not to its prototype chain." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "PropertyDescriptor"}, "description": "Object properties." },
+                { "name": "internalProperties", "optional": true, "type": "array", "items": { "$ref": "InternalPropertyDescriptor"}, "description": "Internal object properties." }
+            ],
+            "description": "Returns properties of a given object. Object group of the result is inherited from the target object."
+        },
+        {
+            "name": "releaseObject",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to release." }
+            ],
+            "description": "Releases remote object with given id."
+        },
+        {
+            "name": "releaseObjectGroup",
+            "parameters": [
+                { "name": "objectGroup", "type": "string", "description": "Symbolic object group name." }
+            ],
+            "description": "Releases all remote objects that belong to a given group."
+        },
+        {
+            "name": "enable",
+            "description": "Enables reporting of execution contexts creation by means of <code>executionContextCreated</code> event. When the reporting gets enabled the event will be sent immediately for each existing execution context."
+        },
+        {
+            "name": "disable",
+            "description": "Disables reporting of execution contexts creation."
+        }
+    ],
+    "events": [
+        {
+            "name": "executionContextCreated",
+            "parameters": [
+                { "name": "context", "$ref": "ExecutionContextDescription", "description": "A newly created execution contex." }
+            ],
+            "description": "Issued when new execution context is created."
+        }
+    ]
+},
+{
+    "domain": "ApplicationCache",
+    "availability": "web",
+    "types": [
+        {
+            "id": "ApplicationCacheResource",
+            "type": "object",
+            "description": "Detailed application cache resource information.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource url." },
+                { "name": "size", "type": "integer", "description": "Resource size." },
+                { "name": "type", "type": "string", "description": "Resource type." }
+            ]
+        },
+        {
+            "id": "ApplicationCache",
+            "type": "object",
+            "description": "Detailed application cache information.",
+            "properties": [
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "size", "type": "number", "description": "Application cache size." },
+                { "name": "creationTime", "type": "number", "description": "Application cache creation time." },
+                { "name": "updateTime", "type": "number", "description": "Application cache update time." },
+                { "name": "resources", "type": "array", "items": { "$ref": "ApplicationCacheResource" }, "description": "Application cache resources." }
+            ]
+        },
+        {
+            "id": "FrameWithManifest",
+            "type": "object",
+            "description": "Frame identifier - manifest URL pair.",
+            "properties": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame identifier." },
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "status", "type": "integer", "description": "Application cache status." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "getFramesWithManifests",
+            "returns": [
+                { "name": "frameIds", "type": "array", "items": { "$ref": "FrameWithManifest" }, "description": "Array of frame identifiers with manifest urls for each frame containing a document associated with some application cache." }
+            ],
+            "description": "Returns array of frame identifiers with manifest urls for each frame containing a document associated with some application cache."
+        },
+        {
+            "name": "enable",
+            "description": "Enables application cache domain notifications."
+        },
+        {
+            "name": "getManifestForFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose manifest is retrieved." }
+            ],
+            "returns": [
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL for document in the given frame." }
+            ],
+            "description": "Returns manifest URL for document in the given frame."
+        },
+        {
+            "name": "getApplicationCacheForFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache is retrieved." }
+            ],
+            "returns": [
+                { "name": "applicationCache", "$ref": "ApplicationCache", "description": "Relevant application cache data for the document in given frame." }
+            ],
+            "description": "Returns relevant application cache data for the document in given frame."
+        }
+    ],
+    "events": [
+        {
+            "name": "applicationCacheStatusUpdated",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache updated status." },
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "status", "type": "integer", "description": "Updated application cache status." }
+            ]
+        },
+        {
+            "name": "networkStateUpdated",
+            "parameters": [
+                { "name": "isNowOnline", "type": "boolean" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "CSS",
+    "description": "This domain exposes CSS read/write operations. All CSS objects, like stylesheets, rules, and styles, have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). Alternatively, a client can discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "StyleSheetId",
+            "type": "string"
+        },
+        {
+            "id": "CSSStyleId",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                { "name": "ordinal", "type": "integer", "description": "The style ordinal within the stylesheet." }
+            ],
+            "description": "This object identifies a CSS style in a unique way."
+        },
+        {
+            "id": "StyleSheetOrigin",
+            "type": "string",
+            "enum": ["user", "user-agent", "inspector", "regular"],
+            "description": "Stylesheet type: \"user\" for user stylesheets, \"user-agent\" for user-agent stylesheets, \"inspector\" for stylesheets created by the inspector (i.e. those holding the \"via inspector\" rules), \"regular\" for regular stylesheets."
+        },
+        {
+            "id": "CSSRuleId",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                { "name": "ordinal", "type": "integer", "description": "The rule ordinal within the stylesheet." }
+            ],
+            "description": "This object identifies a CSS rule in a unique way."
+        },
+        {
+            "id": "PseudoIdMatches",
+            "type": "object",
+            "properties": [
+                { "name": "pseudoId", "type": "integer", "description": "Pseudo style identifier (see <code>enum PseudoId</code> in <code>RenderStyleConstants.h</code>)."},
+                { "name": "matches", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules applicable to the pseudo style."}
+            ],
+            "description": "CSS rule collection for a single pseudo style."
+        },
+        {
+            "id": "InheritedStyleEntry",
+            "type": "object",
+            "properties": [
+                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "The ancestor node's inline style, if any, in the style inheritance chain." },
+                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules matching the ancestor node in the style inheritance chain." }
+            ],
+            "description": "CSS rule collection for a single pseudo style."
+        },
+        {
+            "id": "RuleMatch",
+            "type": "object",
+            "properties": [
+                { "name": "rule", "$ref": "CSSRule", "description": "CSS rule in the match." },
+                { "name": "matchingSelectors", "type": "array", "items": { "type": "integer" }, "description": "Matching selector indices in the rule's selectorList selectors (0-based)." }
+            ],
+            "description": "Match data for a CSS rule."
+        },
+        {
+            "id": "SelectorList",
+            "type": "object",
+            "properties": [
+                { "name": "selectors", "type": "array", "items": { "type": "string" }, "description": "Selectors in the list." },
+                { "name": "text", "type": "string", "description": "Rule selector text." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Rule selector range in the underlying resource (if available)." }
+            ],
+            "description": "Selector list data."
+        },
+        {
+            "id": "CSSStyleAttribute",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "DOM attribute name (e.g. \"width\")."},
+                { "name": "style", "$ref": "CSSStyle", "description": "CSS style generated by the respective DOM attribute."}
+            ],
+            "description": "CSS style information for a DOM style attribute."
+        },
+        {
+            "id": "CSSStyleSheetHeader",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Owner frame identifier."},
+                { "name": "sourceURL", "type": "string", "description": "Stylesheet resource URL."},
+                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Stylesheet origin."},
+                { "name": "title", "type": "string", "description": "Stylesheet title."},
+                { "name": "disabled", "type": "boolean", "description": "Denotes whether the stylesheet is disabled."}
+            ],
+            "description": "CSS stylesheet metainformation."
+        },
+        {
+            "id": "CSSStyleSheetBody",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                { "name": "rules", "type": "array", "items": { "$ref": "CSSRule" }, "description": "Stylesheet resource URL."},
+                { "name": "text", "type": "string", "optional": true, "description": "Stylesheet resource contents (if available)."}
+            ],
+            "description": "CSS stylesheet contents."
+        },
+        {
+            "id": "CSSRule",
+            "type": "object",
+            "properties": [
+                { "name": "ruleId", "$ref": "CSSRuleId", "optional": true, "description": "The CSS rule identifier (absent for user agent stylesheet and user-specified stylesheet rules)."},
+                { "name": "selectorList", "$ref": "SelectorList", "description": "Rule selector data." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "Parent stylesheet resource URL (for regular rules)."},
+                { "name": "sourceLine", "type": "integer", "description": "Line ordinal of the rule selector start character in the resource."},
+                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."},
+                { "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." },
+                { "name": "media", "type": "array", "items": { "$ref": "CSSMedia" }, "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards." }
+            ],
+            "description": "CSS rule representation."
+        },
+        {
+            "id": "SourceRange",
+            "type": "object",
+            "properties": [
+                { "name": "startLine", "type": "integer", "description": "Start line of range." },
+                { "name": "startColumn", "type": "integer", "description": "Start column of range (inclusive)." },
+                { "name": "endLine", "type": "integer", "description": "End line of range" },
+                { "name": "endColumn", "type": "integer", "description": "End column of range (exclusive)." }
+            ],
+            "description": "Text range within a resource."
+        },
+        {
+            "id": "ShorthandEntry",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Shorthand name." },
+                { "name": "value", "type": "string", "description": "Shorthand value." }
+            ]
+        },
+        {
+            "id": "CSSPropertyInfo",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "longhands", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Longhand property names." }
+            ]
+        },
+        {
+            "id": "CSSComputedStyleProperty",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Computed style property name." },
+                { "name": "value", "type": "string", "description": "Computed style property value." }
+            ]
+        },
+        {
+            "id": "CSSStyle",
+            "type": "object",
+            "properties": [
+                { "name": "styleId", "$ref": "CSSStyleId", "optional": true, "description": "The CSS style identifier (absent for attribute styles)." },
+                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSProperty" }, "description": "CSS properties in the style." },
+                { "name": "shorthandEntries", "type": "array", "items": { "$ref": "ShorthandEntry" }, "description": "Computed values for all shorthands found in the style." },
+                { "name": "cssText", "type": "string", "optional": true, "description": "Style declaration text (if available)." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Style declaration range in the enclosing stylesheet (if available)." },
+                { "name": "width", "type": "string", "optional": true, "description": "The effective \"width\" property value from this style." },
+                { "name": "height", "type": "string", "optional": true, "description": "The effective \"height\" property value from this style." }
+            ],
+            "description": "CSS style representation."
+        },
+        {
+            "id": "CSSProperty",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "The property name." },
+                { "name": "value", "type": "string", "description": "The property value." },
+                { "name": "priority", "type": "string", "optional": true, "description": "The property priority (implies \"\" if absent)." },
+                { "name": "implicit", "type": "boolean", "optional": true, "description": "Whether the property is implicit (implies <code>false</code> if absent)." },
+                { "name": "text", "type": "string", "optional": true, "description": "The full property text as specified in the style." },
+                { "name": "parsedOk", "type": "boolean", "optional": true, "description": "Whether the property is understood by the browser (implies <code>true</code> if absent)." },
+                { "name": "status", "type": "string", "enum": ["active", "inactive", "disabled", "style"], "optional": true, "description": "The property status: \"active\" if the property is effective in the style, \"inactive\" if the property is overridden by a same-named property in this style later on, \"disabled\" if the property is disabled by the user, \"style\" (implied if absent) if the property is reported by the browser rather than by the CSS source parser." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "The entire property range in the enclosing style declaration (if available)." }
+            ],
+            "description": "CSS style effective visual dimensions and source offsets."
+        },
+        {
+            "id": "CSSMedia",
+            "type": "object",
+            "properties": [
+                { "name": "text", "type": "string", "description": "Media query text." },
+                { "name": "source", "type": "string", "enum": ["mediaRule", "importRule", "linkedSheet", "inlineSheet"], "description": "Source of the media query: \"mediaRule\" if specified by a @media rule, \"importRule\" if specified by an @import rule, \"linkedSheet\" if specified by a \"media\" attribute in a linked stylesheet's LINK tag, \"inlineSheet\" if specified by a \"media\" attribute in an inline stylesheet's STYLE tag." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the media query description." },
+                { "name": "sourceLine", "type": "integer", "optional": true, "description": "Line in the document containing the media query (not defined for the \"stylesheet\" source)." }
+            ],
+            "description": "CSS media query descriptor."
+        },
+        {
+            "id": "Region",
+            "type": "object",
+            "properties": [
+                { "name": "regionOverset", "type": "string", "enum": ["overset", "fit", "empty"], "description": "The \"overset\" attribute of a Named Flow." },
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The corresponding DOM node id." }
+            ],
+            "description": "This object represents a region that flows from a Named Flow."
+        },
+        {
+            "id": "NamedFlow",
+            "type": "object",
+            "properties": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "name", "type": "string", "description": "Named Flow identifier." },
+                { "name": "overset", "type": "boolean", "description": "The \"overset\" attribute of a Named Flow." },
+                { "name": "content", "type": "array", "items": { "$ref": "DOM.NodeId" }, "description": "An array of nodes that flow into the Named Flow." },
+                { "name": "regions", "type": "array", "items": { "$ref": "Region" }, "description": "An array of regions associated with the Named Flow." }
+            ],
+            "description": "This object represents a Named Flow."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables the CSS agent for the given page. Clients should not assume that the CSS agent has been enabled until the result of this command is received."
+        },
+        {
+            "name": "disable",
+            "description": "Disables the CSS agent for the given page."
+        },
+        {
+            "name": "getMatchedStylesForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" },
+                { "name": "includePseudo", "type": "boolean", "optional": true, "description": "Whether to include pseudo styles (default: true)." },
+                { "name": "includeInherited", "type": "boolean", "optional": true, "description": "Whether to include inherited styles (default: true)." }
+            ],
+            "returns": [
+                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "optional": true, "description": "CSS rules matching this node, from all applicable stylesheets." },
+                { "name": "pseudoElements", "type": "array", "items": { "$ref": "PseudoIdMatches" }, "optional": true, "description": "Pseudo style matches for this node." },
+                { "name": "inherited", "type": "array", "items": { "$ref": "InheritedStyleEntry" }, "optional": true, "description": "A chain of inherited styles (from the immediate node parent up to the DOM tree root)." }
+            ],
+            "description": "Returns requested styles for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getInlineStylesForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" }
+            ],
+            "returns": [
+                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "Inline style for the specified DOM node." },
+                { "name": "attributesStyle", "$ref": "CSSStyle", "optional": true, "description": "Attribute-defined element style (e.g. resulting from \"width=20 height=100%\")."}
+            ],
+            "description": "Returns the styles defined inline (explicitly in the \"style\" attribute and implicitly, using DOM attributes) for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getComputedStyleForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" }
+            ],
+            "returns": [
+                { "name": "computedStyle", "type": "array", "items": { "$ref": "CSSComputedStyleProperty" }, "description": "Computed style for the specified DOM node." }
+            ],
+            "description": "Returns the computed style for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getAllStyleSheets",
+            "returns": [
+                { "name": "headers", "type": "array", "items": { "$ref": "CSSStyleSheetHeader" }, "description": "Descriptor entries for all available stylesheets." }
+            ],
+            "description": "Returns metainfo entries for all known stylesheets."
+        },
+        {
+            "name": "getStyleSheet",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "returns": [
+                { "name": "styleSheet", "$ref": "CSSStyleSheetBody", "description": "Stylesheet contents for the specified <code>styleSheetId</code>." }
+            ],
+            "description": "Returns stylesheet data for the specified <code>styleSheetId</code>."
+        },
+        {
+            "name": "getStyleSheetText",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "returns": [
+                { "name": "text", "type": "string", "description": "The stylesheet text." }
+            ],
+            "description": "Returns the current textual content and the URL for a stylesheet."
+        },
+        {
+            "name": "setStyleSheetText",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" },
+                { "name": "text", "type": "string" }
+            ],
+            "description": "Sets the new stylesheet text, thereby invalidating all existing <code>CSSStyleId</code>'s and <code>CSSRuleId</code>'s contained by this stylesheet."
+        },
+        {
+            "name": "setStyleText",
+            "parameters": [
+                { "name": "styleId", "$ref": "CSSStyleId" },
+                { "name": "text", "type": "string" }
+            ],
+            "returns": [
+                { "name": "style", "$ref": "CSSStyle", "description": "The resulting style after the text modification." }
+            ],
+            "description": "Sets the new <code>text</code> for the respective style."
+        },
+        {
+            "name": "setRuleSelector",
+            "parameters": [
+                { "name": "ruleId", "$ref": "CSSRuleId" },
+                { "name": "selector", "type": "string" }
+            ],
+            "returns": [
+                { "name": "rule", "$ref": "CSSRule", "description": "The resulting rule after the selector modification." }
+            ],
+            "description": "Modifies the rule selector."
+        },
+        {
+            "name": "addRule",
+            "parameters": [
+                { "name": "contextNodeId", "$ref": "DOM.NodeId" },
+                { "name": "selector", "type": "string" }
+            ],
+            "returns": [
+                { "name": "rule", "$ref": "CSSRule", "description": "The newly created rule." }
+            ],
+            "description": "Creates a new empty rule with the given <code>selector</code> in a special \"inspector\" stylesheet in the owner document of the context node."
+        },
+        {
+            "name": "getSupportedCSSProperties",
+            "returns": [
+                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSPropertyInfo" }, "description": "Supported property metainfo." }
+            ],
+            "description": "Returns all supported CSS property names."
+        },
+        {
+            "name": "forcePseudoState",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The element id for which to force the pseudo state." },
+                { "name": "forcedPseudoClasses", "type": "array", "items": { "type": "string", "enum": ["active", "focus", "hover", "visited"] }, "description": "Element pseudo classes to force when computing the element's style." }
+            ],
+            "description": "Ensures that the given node will have specified pseudo-classes whenever its style is computed by the browser."
+        },
+        {
+            "name": "getNamedFlowCollection",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id for which to get the Named Flow Collection." }
+            ],
+            "returns": [
+                { "name": "namedFlows", "type": "array", "items": { "$ref": "NamedFlow" }, "description": "An array containing the Named Flows in the document." }
+            ],
+            "description": "Returns the Named Flows from the document."
+        }
+    ],
+    "events": [
+        {
+            "name": "mediaQueryResultChanged",
+            "description": "Fires whenever a MediaQuery result changes (for example, after a browser window has been resized.) The current implementation considers only viewport-dependent media features."
+        },
+        {
+            "name": "styleSheetChanged",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "description": "Fired whenever a stylesheet is changed as a result of the client operation."
+        },
+        {
+            "name": "namedFlowCreated",
+            "parameters": [
+                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The new Named Flow." }
+            ],
+            "description": "Fires when a Named Flow is created."
+        },
+        {
+            "name": "namedFlowRemoved",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Identifier of the removed Named Flow." }
+            ],
+            "description": "Fires when a Named Flow is removed: has no associated content nodes and regions."
+        },
+        {
+            "name": "regionOversetChanged",
+            "parameters": [
+                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The Named Flow containing the regions whose regionOverset values changed." }
+            ],
+            "description": "Fires if any of the regionOverset values changed in a Named Flow's region chain."
+        },
+        {
+            "name": "registeredNamedFlowContentElement",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was registered." },
+                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the registered content node." },
+                { "name": "nextContentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the element following the registered content node." }
+            ],
+            "description": "Fires when a Named Flow's has been registered with a new content node."
+        },
+        {
+            "name": "unregisteredNamedFlowContentElement",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was unregistered." },
+                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the unregistered content node." }
+            ],
+            "description": "Fires when a Named Flow's has been registered with a new content node."
+        }
+    ]
+}
+,
+{
+    "domain": "DOM",
+    "description": "This domain exposes DOM read/write operations. Each DOM Node is represented with its mirror object that has an <code>id</code>. This <code>id</code> can be used to get additional information on the Node, resolve it into the JavaScript object wrapper, etc. It is important that client receives DOM events only for the nodes that are known to the client. Backend keeps track of the nodes that were sent to the client and never sends the same node twice. It is client's responsibility to collect information about the nodes that were sent to the client.<p>Note that <code>iframe</code> owner elements will return corresponding document elements as their child nodes.</p>",
+    "availability": "web",
+    "types": [
+        {
+            "id": "NodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier."
+        },
+        {
+            "id": "BackendNodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier used to reference a node that may not have been pushed to the front-end."
+        },
+        {
+            "id": "LiveRegionRelevant",
+            "type": "string",
+            "enum": ["additions", "removals", "text"],
+            "description": "Token values of @aria-relevant attribute."
+        },
+        {
+            "id": "Node",
+            "type": "object",
+            "properties": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Node identifier that is passed into the rest of the DOM messages as the <code>nodeId</code>. Backend will only push node with given <code>id</code> once. It is aware of all requested nodes and will only fire DOM events for nodes known to the client." },
+                { "name": "nodeType", "type": "integer", "description": "<code>Node</code>'s nodeType." },
+                { "name": "nodeName", "type": "string", "description": "<code>Node</code>'s nodeName." },
+                { "name": "localName", "type": "string", "description": "<code>Node</code>'s localName." },
+                { "name": "nodeValue", "type": "string", "description": "<code>Node</code>'s nodeValue." },
+                { "name": "childNodeCount", "type": "integer", "optional": true, "description": "Child count for <code>Container</code> nodes." },
+                { "name": "children", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Child nodes of this node when requested with children." },
+                { "name": "attributes", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Attributes of the <code>Element</code> node in the form of flat array <code>[name1, value1, name2, value2]</code>." },
+                { "name": "documentURL", "type": "string", "optional": true, "description": "Document URL that <code>Document</code> or <code>FrameOwner</code> node points to." },
+                { "name": "baseURL", "type": "string", "optional": true, "description": "Base URL that <code>Document</code> or <code>FrameOwner</code> node uses for URL completion." },
+                { "name": "publicId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s publicId." },
+                { "name": "systemId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s systemId." },
+                { "name": "internalSubset", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s internalSubset." },
+                { "name": "xmlVersion", "type": "string", "optional": true, "description": "<code>Document</code>'s XML version in case of XML documents." },
+                { "name": "name", "type": "string", "optional": true, "description": "<code>Attr</code>'s name." },
+                { "name": "value", "type": "string", "optional": true, "description": "<code>Attr</code>'s value." },
+                { "name": "frameId", "$ref": "Network.FrameId", "optional": true, "description": "Frame ID for frame owner elements." },
+                { "name": "contentDocument", "$ref": "Node", "optional": true, "description": "Content document for frame owner elements." },
+                { "name": "shadowRoots", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Shadow root list for given element host." },
+                { "name": "templateContent", "$ref": "Node", "optional": true, "description": "Content document fragment for template elements" },
+                { "name": "role", "type": "string", "optional": true, "description": "Computed value for first recognized role token, default role per element, or overridden role." }
+            ],
+            "description": "DOM interaction is implemented in terms of mirror objects that represent the actual DOM nodes. DOMNode is a base node mirror type."
+        },
+        {
+            "id": "EventListener",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "description": "<code>EventListener</code>'s type." },
+                { "name": "useCapture", "type": "boolean", "description": "<code>EventListener</code>'s useCapture." },
+                { "name": "isAttribute", "type": "boolean", "description": "<code>EventListener</code>'s isAttribute." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                { "name": "handlerBody", "type": "string", "description": "Event handler function body." },
+                { "name": "location", "$ref": "Debugger.Location", "optional": true, "description": "Handler code location." },
+                { "name": "sourceName", "type": "string", "optional": true, "description": "Source script URL." },
+                { "name": "handler", "$ref": "Runtime.RemoteObject", "optional": true, "description": "Event handler function value." }
+            ],
+            "description": "A structure holding event listener properties."
+        },
+        {
+            "id": "AccessibilityProperties",
+            "description": "A structure holding accessibility properties.",
+            "type": "object",
+            "properties": [
+                { "name": "activeDescendantNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of the accessibility object referenced by aria-activedescendant." },
+                { "name": "busy", "type": "boolean", "optional": true, "description": "Value of @aria-busy on current or ancestor node." },
+                { "name": "checked", "type": "string", "optional": true, "enum": ["true", "false", "mixed"], "description": "Checked state of certain form controls." },
+                { "name": "childNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of the accessibility tree children if available." },
+                { "name": "controlledNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-controls." },
+                { "name": "disabled", "type": "boolean", "optional": true, "description": "Disabled state of form controls." },
+                { "name": "exists", "type": "boolean", "description": "Indicates whether there is an existing AX object for the DOM node. If this is false, all the other properties will be default values." },
+                { "name": "expanded", "type": "boolean", "optional": true, "description": "Expanded state." },
+                { "name": "flowedNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-flowto." },
+                { "name": "focused", "type": "boolean", "optional": true, "description": "Focused state. Only defined on focusable elements." },
+                { "name": "ignored", "type": "boolean", "optional": true, "description": "Indicates whether the accessibility of the associated AX object node is ignored, whether heuristically or explicitly." },
+                { "name": "ignoredByDefault", "type": "boolean", "optional": true, "description": "State indicating whether the accessibility of the associated AX object node is ignored by default for node type." },
+                { "name": "invalid", "type": "string", "optional": true, "enum": ["true", "false", "grammar", "spelling"], "description": "Invalid status of form controls." },
+                { "name": "hidden", "type": "boolean", "optional": true, "description": "Hidden state. True if node or an ancestor is hidden via CSS or explicit @aria-hidden, to clarify why the element is ignored." },
+                { "name": "label", "type": "string", "description": "Computed label value for the node, sometimes calculated by referencing other nodes." },
+                { "name": "liveRegionAtomic", "type": "boolean", "optional": true, "description": "Value of @aria-atomic." },
+                { "name": "liveRegionRelevant", "type": "array", "items": { "type": "string" }, "optional": true, "description": "Token value(s) of element's @aria-relevant attribute. Array of string values matching $ref LiveRegionRelevant. FIXME: Enum values blocked by http://webkit.org/b/133711" },
+                { "name": "liveRegionStatus", "type": "string", "optional": true, "enum": ["assertive", "polite", "off"], "description": "Value of element's @aria-live attribute." },
+                { "name": "mouseEventNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of node or closest ancestor node that has a mousedown, mouseup, or click event handler." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                { "name": "ownedNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-owns." },
+                { "name": "parentNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of the accessibility tree parent object if available." },
+                { "name": "pressed", "type": "boolean", "optional": true, "description": "Pressed state for toggle buttons." },
+                { "name": "readonly", "type": "boolean", "optional": true, "description": "Readonly state of text controls." },
+                { "name": "required", "type": "boolean", "optional": true, "description": "Required state of form controls." },
+                { "name": "role", "type": "string", "description": "Computed value for first recognized role token, default role per element, or overridden role." },
+                { "name": "selected", "type": "boolean", "optional": true, "description": "Selected state of certain form controls." },
+                { "name": "selectedChildNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any children marked as selected." }
+            ]
+        },
+        {
+            "id": "RGBA",
+            "type": "object",
+            "properties": [
+                { "name": "r", "type": "integer", "description": "The red component, in the [0-255] range." },
+                { "name": "g", "type": "integer", "description": "The green component, in the [0-255] range." },
+                { "name": "b", "type": "integer", "description": "The blue component, in the [0-255] range." },
+                { "name": "a", "type": "number", "optional": true, "description": "The alpha component, in the [0-1] range (default: 1)." }
+            ],
+            "description": "A structure holding an RGBA color."
+        },
+        {
+            "id": "Quad",
+            "type": "array",
+            "items": { "type": "number" },
+            "minItems": 8,
+            "maxItems": 8,
+            "description": "An array of quad vertices, x immediately followed by y for each point, points clock-wise."
+        },
+        {
+            "id": "HighlightConfig",
+            "type": "object",
+            "properties": [
+                { "name": "showInfo", "type": "boolean", "optional": true, "description": "Whether the node info tooltip should be shown (default: false)." },
+                { "name": "contentColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                { "name": "paddingColor", "$ref": "RGBA", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
+                { "name": "borderColor", "$ref": "RGBA", "optional": true, "description": "The border highlight fill color (default: transparent)." },
+                { "name": "marginColor", "$ref": "RGBA", "optional": true, "description": "The margin highlight fill color (default: transparent)." }
+            ],
+            "description": "Configuration data for the highlighting of page elements."
+        }
+    ],
+    "commands": [
+        {
+            "name": "getDocument",
+            "returns": [
+                { "name": "root", "$ref": "Node", "description": "Resulting node." }
+            ],
+            "description": "Returns the root DOM node to the caller."
+        },
+        {
+            "name": "requestChildNodes",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get children for." },
+                { "name": "depth", "type": "integer", "optional": true, "description": "The maximum depth at which children should be retrieved, defaults to 1. Use -1 for the entire subtree or provide an integer larger than 0." }
+            ],
+            "description": "Requests that children of the node with given id are returned to the caller in form of <code>setChildNodes</code> events where not only immediate children are retrieved, but all children down to the specified depth."
+        },
+        {
+            "name": "querySelector",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                { "name": "selector", "type": "string", "description": "Selector string." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Query selector result." }
+            ],
+            "description": "Executes <code>querySelector</code> on a given node."
+        },
+        {
+            "name": "querySelectorAll",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                { "name": "selector", "type": "string", "description": "Selector string." }
+            ],
+            "returns": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Query selector result." }
+            ],
+            "description": "Executes <code>querySelectorAll</code> on a given node."
+        },
+        {
+            "name": "setNodeName",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set name for." },
+                { "name": "name", "type": "string", "description": "New node's name." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "New node's id." }
+            ],
+            "description": "Sets node name for a node with given id."
+        },
+        {
+            "name": "setNodeValue",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set value for." },
+                { "name": "value", "type": "string", "description": "New node's value." }
+            ],
+            "description": "Sets node value for a node with given id."
+        },
+        {
+            "name": "removeNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to remove." }
+            ],
+            "description": "Removes node with given id."
+        },
+        {
+            "name": "setAttributeValue",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attribute for." },
+                { "name": "name", "type": "string", "description": "Attribute name." },
+                { "name": "value", "type": "string", "description": "Attribute value." }
+            ],
+            "description": "Sets attribute for an element with given id."
+        },
+        {
+            "name": "setAttributesAsText",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attributes for." },
+                { "name": "text", "type": "string", "description": "Text with a number of attributes. Will parse this text using HTML parser." },
+                { "name": "name", "type": "string", "optional": true, "description": "Attribute name to replace with new attributes derived from text in case text parsed successfully." }
+            ],
+            "description": "Sets attributes on element with given id. This method is useful when user edits some existing attribute value and types in several attribute name/value pairs."
+        },
+        {
+            "name": "removeAttribute",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to remove attribute from." },
+                { "name": "name", "type": "string", "description": "Name of the attribute to remove." }
+            ],
+            "description": "Removes attribute with given name from an element with given id."
+        },
+        {
+            "name": "getEventListenersForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get listeners for." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name for handler value. Handler value is not returned without this parameter specified." }
+            ],
+            "returns": [
+                { "name": "listeners", "type": "array", "items": { "$ref": "EventListener"}, "description": "Array of relevant listeners." }
+            ],
+            "description": "Returns event listeners relevant to the node."
+        },
+        {
+            "name": "getAccessibilityPropertiesForNode",
+            "description": "Returns a dictionary of accessibility properties for the node.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for which to get accessibility properties." }
+            ],
+            "returns": [
+                { "name": "properties", "$ref": "AccessibilityProperties", "description": "Dictionary of relevant accessibility properties." }
+            ]
+        },
+        {
+            "name": "getOuterHTML",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get markup for." }
+            ],
+            "returns": [
+                { "name": "outerHTML", "type": "string", "description": "Outer HTML markup." }
+            ],
+            "description": "Returns node's HTML markup."
+        },
+        {
+            "name": "setOuterHTML",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set markup for." },
+                { "name": "outerHTML", "type": "string", "description": "Outer HTML markup to set." }
+            ],
+            "description": "Sets node HTML markup, returns new node id."
+        },
+        {
+            "name": "performSearch",
+            "parameters": [
+                { "name": "query", "type": "string", "description": "Plain text or query selector or XPath search query." },
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Ids of nodes to use as starting points for the search." }
+            ],
+            "returns": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                { "name": "resultCount", "type": "integer", "description": "Number of search results." }
+            ],
+            "description": "Searches for a given string in the DOM tree. Use <code>getSearchResults</code> to access search results or <code>cancelSearch</code> to end this search session."
+        },
+        {
+            "name": "getSearchResults",
+            "parameters": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                { "name": "fromIndex", "type": "integer", "description": "Start index of the search result to be returned." },
+                { "name": "toIndex", "type": "integer", "description": "End index of the search result to be returned." }
+            ],
+            "returns": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the search result nodes." }
+            ],
+            "description": "Returns search results from given <code>fromIndex</code> to given <code>toIndex</code> from the sarch with the given identifier."
+        },
+        {
+            "name": "discardSearchResults",
+            "parameters": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." }
+            ],
+            "description": "Discards search results from the session with the given id. <code>getSearchResults</code> should no longer be called for that search."
+        },
+        {
+            "name": "requestNode",
+            "parameters": [
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "description": "JavaScript object id to convert into node." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Node id for given object." }
+            ],
+            "description": "Requests that the node is sent to the caller given the JavaScript node object reference. All nodes that form the path from the node to the root are also sent to the client as a series of <code>setChildNodes</code> notifications."
+        },
+        {
+            "name": "setInspectModeEnabled",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "True to enable inspection mode, false to disable it." },
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "optional": true, "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>." }
+            ],
+            "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspect' command upon element selection."
+        },
+        {
+            "name": "highlightRect",
+            "parameters": [
+                { "name": "x", "type": "integer", "description": "X coordinate" },
+                { "name": "y", "type": "integer", "description": "Y coordinate" },
+                { "name": "width", "type": "integer", "description": "Rectangle width" },
+                { "name": "height", "type": "integer", "description": "Rectangle height" },
+                { "name": "color", "$ref": "RGBA", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                { "name": "outlineColor", "$ref": "RGBA", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+            ],
+            "description": "Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport."
+        },
+        {
+            "name": "highlightQuad",
+            "parameters": [
+                { "name": "quad", "$ref": "Quad", "description": "Quad to highlight" },
+                { "name": "color", "$ref": "RGBA", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                { "name": "outlineColor", "$ref": "RGBA", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+            ],
+            "description": "Highlights given quad. Coordinates are absolute with respect to the main frame viewport."
+        },
+        {
+            "name": "highlightNode",
+            "parameters": [
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
+                { "name": "nodeId", "$ref": "NodeId", "optional": true, "description": "Identifier of the node to highlight." },
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "optional": true, "description": "JavaScript object id of the node to be highlighted." }
+            ],
+            "description": "Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified."
+        },
+        {
+            "name": "hideHighlight",
+            "description": "Hides DOM node highlight."
+        },
+        {
+            "name": "highlightFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame to highlight." },
+                { "name": "contentColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                { "name": "contentOutlineColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight outline color (default: transparent)." }
+            ],
+            "description": "Highlights owner element of the frame with given id."
+        },
+        {
+            "name": "pushNodeByPathToFrontend",
+            "parameters": [
+                { "name": "path", "type": "string", "description": "Path to node in the proprietary format." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for given path." }
+            ],
+            "description": "Requests that the node is sent to the caller given its path. // FIXME, use XPath"
+        },
+        {
+            "name": "pushNodeByBackendIdToFrontend",
+            "parameters": [
+                { "name": "backendNodeId", "$ref": "BackendNodeId", "description": "The backend node id of the node." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "The pushed node's id." }
+            ],
+            "description": "Requests that the node is sent to the caller given its backend node id."
+        },
+        {
+            "name": "releaseBackendNodeIds",
+            "parameters": [
+                { "name": "nodeGroup", "type": "string", "description": "The backend node ids group name." }
+            ],
+            "description": "Requests that group of <code>BackendNodeIds</code> is released."
+        },
+        {
+            "name": "resolveNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to resolve." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." }
+            ],
+            "returns": [
+                { "name": "object", "$ref": "Runtime.RemoteObject", "description": "JavaScript object wrapper for given node." }
+            ],
+            "description": "Resolves JavaScript node object for given node id."
+        },
+        {
+            "name": "getAttributes",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to retrieve attibutes for." }
+            ],
+            "returns": [
+                { "name": "attributes", "type": "array", "items": { "type": "string" }, "description": "An interleaved array of node attribute names and values." }
+            ],
+            "description": "Returns attributes for the specified node."
+        },
+        {
+            "name": "moveTo",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to drop." },
+                { "name": "targetNodeId", "$ref": "NodeId", "description": "Id of the element to drop into." },
+                { "name": "insertBeforeNodeId", "$ref": "NodeId", "optional": true, "description": "Drop node before given one." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "New id of the moved node." }
+            ],
+            "description": "Moves node into the new container, places it before the given anchor."
+        },
+        {
+            "name": "undo",
+            "description": "Undoes the last performed action."
+        },
+        {
+            "name": "redo",
+            "description": "Re-does the last undone action."
+        },
+        {
+            "name": "markUndoableState",
+            "description": "Marks last undoable state."
+        },
+        {
+            "name": "focus",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to focus." }
+            ],
+            "description": "Focuses the given element."
+        }
+    ],
+    "events": [
+        {
+            "name": "documentUpdated",
+            "description": "Fired when <code>Document</code> has been totally updated. Node ids are no longer valid."
+        },
+        {
+            "name": "setChildNodes",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Parent node id to populate with children." },
+                { "name": "nodes", "type": "array", "items": { "$ref": "Node"}, "description": "Child nodes array." }
+            ],
+            "description": "Fired when backend wants to provide client with the missing DOM structure. This happens upon most of the calls requesting node ids."
+        },
+        {
+            "name": "attributeModified",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "name", "type": "string", "description": "Attribute name." },
+                { "name": "value", "type": "string", "description": "Attribute value." }
+            ],
+            "description": "Fired when <code>Element</code>'s attribute is modified."
+        },
+        {
+            "name": "attributeRemoved",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "name", "type": "string", "description": "A ttribute name." }
+            ],
+            "description": "Fired when <code>Element</code>'s attribute is removed."
+        },
+        {
+            "name": "inlineStyleInvalidated",
+            "parameters": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the nodes for which the inline styles have been invalidated." }
+            ],
+            "description": "Fired when <code>Element</code>'s inline style is modified via a CSS property modification."
+        },
+        {
+            "name": "characterDataModified",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "characterData", "type": "string", "description": "New text value." }
+            ],
+            "description": "Mirrors <code>DOMCharacterDataModified</code> event."
+        },
+        {
+            "name": "childNodeCountUpdated",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "childNodeCount", "type": "integer", "description": "New node count." }
+            ],
+            "description": "Fired when <code>Container</code>'s child node count has changed."
+        },
+        {
+            "name": "childNodeInserted",
+            "parameters": [
+                { "name": "parentNodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "previousNodeId", "$ref": "NodeId", "description": "If of the previous siblint." },
+                { "name": "node", "$ref": "Node", "description": "Inserted node data." }
+            ],
+            "description": "Mirrors <code>DOMNodeInserted</code> event."
+        },
+        {
+            "name": "childNodeRemoved",
+            "parameters": [
+                { "name": "parentNodeId", "$ref": "NodeId", "description": "Parent id." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has been removed." }
+            ],
+            "description": "Mirrors <code>DOMNodeRemoved</code> event."
+        },
+        {
+            "name": "shadowRootPushed",
+            "parameters": [
+                { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                { "name": "root", "$ref": "Node", "description": "Shadow root." }
+            ],
+            "description": "Called when shadow root is pushed into the element."
+        },
+        {
+            "name": "shadowRootPopped",
+            "parameters": [
+                { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                { "name": "rootId", "$ref": "NodeId", "description": "Shadow root id." }
+            ],
+            "description": "Called when shadow root is popped from the element."
+        }
+    ]
+}
+,
+{
+    "domain": "DOMDebugger",
+    "description": "DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DOMBreakpointType",
+            "type": "string",
+            "enum": ["subtree-modified", "attribute-modified", "node-removed"],
+            "description": "DOM breakpoint type."
+        }
+    ],
+    "commands": [
+        {
+            "name": "setDOMBreakpoint",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to set breakpoint on." },
+                { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the operation to stop upon." }
+            ],
+            "description": "Sets breakpoint on particular operation with DOM."
+        },
+        {
+            "name": "removeDOMBreakpoint",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to remove breakpoint from." },
+                { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the breakpoint to remove." }
+            ],
+            "description": "Removes DOM breakpoint that was set using <code>setDOMBreakpoint</code>."
+        },
+        {
+            "name": "setEventListenerBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "DOM Event name to stop on (any DOM event will do)." }
+            ],
+            "description": "Sets breakpoint on particular DOM event."
+        },
+        {
+            "name": "removeEventListenerBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Event name." }
+            ],
+            "description": "Removes breakpoint on particular DOM event."
+        },
+        {
+            "name": "setInstrumentationBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+            ],
+            "description": "Sets breakpoint on particular native event."
+        },
+        {
+            "name": "removeInstrumentationBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+            ],
+            "description": "Sets breakpoint on particular native event."
+        },
+        {
+            "name": "setXHRBreakpoint",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "Resource URL substring. All XHRs having this substring in the URL will get stopped upon." }
+            ],
+            "description": "Sets breakpoint on XMLHttpRequest."
+        },
+        {
+            "name": "removeXHRBreakpoint",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "Resource URL substring." }
+            ],
+            "description": "Removes breakpoint from XMLHttpRequest."
+        }
+    ]
+}
+,
+{
+    "domain": "DOMStorage",
+    "description": "Query and modify DOM storage.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "StorageId",
+            "type": "object",
+            "description": "DOM Storage identifier.",
+            "properties": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin for the storage." },
+                { "name": "isLocalStorage", "type": "boolean", "description": "Whether the storage is local storage (not session storage)." }
+            ]
+        },
+        {
+            "id": "Item",
+            "type": "array",
+            "description": "DOM Storage item.",
+            "items": { "type": "string" }
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables storage tracking, storage events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables storage tracking, prevents storage events from being sent to the client."
+        },
+        {
+            "name": "getDOMStorageItems",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" }
+            ],
+            "returns": [
+                { "name": "entries", "type": "array", "items": { "$ref": "Item" } }
+            ]
+        },
+        {
+            "name": "setDOMStorageItem",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "value", "type": "string" }
+            ]
+        },
+        {
+            "name": "removeDOMStorageItem",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "domStorageItemsCleared",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" }
+            ]
+        },
+        {
+            "name": "domStorageItemRemoved",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" }
+            ]
+        },
+        {
+            "name": "domStorageItemAdded",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "newValue", "type": "string" }
+            ]
+        },
+        {
+            "name": "domStorageItemUpdated",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "oldValue", "type": "string" },
+                { "name": "newValue", "type": "string" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Database",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DatabaseId",
+            "type": "string",
+            "description": "Unique identifier of Database object."
+        },
+        {
+            "id": "Database",
+            "type": "object",
+            "description": "Database object.",
+            "properties": [
+                { "name": "id", "$ref": "DatabaseId", "description": "Database ID." },
+                { "name": "domain", "type": "string", "description": "Database domain." },
+                { "name": "name", "type": "string", "description": "Database name." },
+                { "name": "version", "type": "string", "description": "Database version." }
+            ]
+        },
+        {
+            "id": "Error",
+            "type": "object",
+            "description": "Database error.",
+            "properties": [
+                { "name": "message", "type": "string", "description": "Error message." },
+                { "name": "code", "type": "integer", "description": "Error code." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables database tracking, database events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables database tracking, prevents database events from being sent to the client."
+        },
+        {
+            "name": "getDatabaseTableNames",
+            "parameters": [
+                { "name": "databaseId", "$ref": "DatabaseId" }
+            ],
+            "returns": [
+                { "name": "tableNames", "type": "array", "items": { "type": "string" } }
+            ]
+        },
+        {
+            "name": "executeSQL",
+            "async": true,
+            "parameters": [
+                { "name": "databaseId", "$ref": "DatabaseId" },
+                { "name": "query", "type": "string" }
+            ],
+            "returns": [
+                { "name": "columnNames", "type": "array", "optional": true, "items": { "type": "string" } },
+                { "name": "values", "type": "array", "optional": true, "items": { "type": "any" }},
+                { "name": "sqlError", "$ref": "Error", "optional": true }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "addDatabase",
+            "parameters": [
+                { "name": "database", "$ref": "Database" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "IndexedDB",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DatabaseWithObjectStores",
+            "type": "object",
+            "description": "Database with an array of object stores.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Database name." },
+                { "name": "version", "type": "number", "description": "Database version." },
+                { "name": "objectStores", "type": "array", "items": { "$ref": "ObjectStore" }, "description": "Object stores in this database." }
+            ]
+        },
+        {
+            "id": "ObjectStore",
+            "type": "object",
+            "description": "Object store.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Object store name." },
+                { "name": "keyPath", "$ref": "KeyPath", "description": "Object store key path." },
+                { "name": "autoIncrement", "type": "boolean", "description": "If true, object store has auto increment flag set." },
+                { "name": "indexes", "type": "array", "items": { "$ref": "ObjectStoreIndex" }, "description": "Indexes in this object store." }
+            ]
+        },
+        {
+            "id": "ObjectStoreIndex",
+            "type": "object",
+            "description": "Object store index.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Index name." },
+                { "name": "keyPath", "$ref": "KeyPath", "description": "Index key path." },
+                { "name": "unique", "type": "boolean", "description": "If true, index is unique." },
+                { "name": "multiEntry", "type": "boolean", "description": "If true, index allows multiple entries for a key." }
+            ]
+        },
+        {
+            "id": "Key",
+            "type": "object",
+            "description": "Key.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["number", "string", "date", "array"], "description": "Key type." },
+                { "name": "number", "type": "number", "optional": true, "description": "Number value." },
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "date", "type": "number", "optional": true, "description": "Date value." },
+                { "name": "array", "type": "array", "optional": true, "items": { "$ref": "Key" }, "description": "Array value." }
+            ]
+        },
+        {
+            "id": "KeyRange",
+            "type": "object",
+            "description": "Key range.",
+            "properties": [
+                { "name": "lower", "$ref": "Key", "optional": true, "description": "Lower bound." },
+                { "name": "upper", "$ref": "Key", "optional": true, "description": "Upper bound." },
+                { "name": "lowerOpen", "type": "boolean", "description": "If true lower bound is open." },
+                { "name": "upperOpen", "type": "boolean", "description": "If true upper bound is open." }
+            ]
+        },
+        {
+            "id": "DataEntry",
+            "type": "object",
+            "description": "Data entry.",
+            "properties": [
+                { "name": "key", "$ref": "Runtime.RemoteObject", "description": "Key." },
+                { "name": "primaryKey", "$ref": "Runtime.RemoteObject", "description": "Primary key." },
+                { "name": "value", "$ref": "Runtime.RemoteObject", "description": "Value." }
+            ]
+        },
+        {
+            "id": "KeyPath",
+            "type": "object",
+            "description": "Key path.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["null", "string", "array"], "description": "Key path type." },
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "array", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Array value." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables events from backend."
+        },
+        {
+            "name": "disable",
+            "description": "Disables events from backend."
+        },
+        {
+            "name": "requestDatabaseNames",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." }
+            ],
+            "returns": [
+                { "name": "databaseNames", "type": "array", "items": { "type": "string" }, "description": "Database names for origin." }
+            ],
+            "description": "Requests database names for given security origin."
+        },
+        {
+            "name": "requestDatabase",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." }
+            ],
+            "returns": [
+                { "name": "databaseWithObjectStores", "$ref": "DatabaseWithObjectStores", "description": "Database with an array of object stores." }
+            ],
+            "description": "Requests database with given name in given frame."
+        },
+        {
+            "name": "requestData",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." },
+                { "name": "objectStoreName", "type": "string", "description": "Object store name." },
+                { "name": "indexName", "type": "string", "description": "Index name, empty string for object store data requests." },
+                { "name": "skipCount", "type": "integer", "description": "Number of records to skip." },
+                { "name": "pageSize", "type": "integer", "description": "Number of records to fetch." },
+                { "name": "keyRange", "$ref": "KeyRange", "optional": true, "description": "Key range." }
+            ],
+            "returns": [
+                { "name": "objectStoreDataEntries", "type": "array", "items": { "$ref": "DataEntry" }, "description": "Array of object store data entries." },
+                { "name": "hasMore", "type": "boolean", "description": "If true, there are more entries to fetch in the given range." }
+            ],
+            "description": "Requests data from object store or index."
+        },
+        {
+            "name": "clearObjectStore",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." },
+                { "name": "objectStoreName", "type": "string", "description": "Object store name." }
+            ],
+            "returns": [
+            ],
+            "description": "Clears all entries from an object store."
+        }
+    ]
+}
+,
+{
+    "domain": "LayerTree",
+    "availability": "web",
+    "types": [
+        {
+            "id": "LayerId",
+            "type": "string",
+            "description": "Unique RenderLayer identifier."
+        },
+        {
+            "id": "PseudoElementId",
+            "type": "string",
+            "description": "Unique PseudoElement identifier."
+        },
+        {
+            "id": "IntRect",
+            "type": "object",
+            "description": "A rectangle.",
+            "properties": [
+                { "name": "x", "type": "integer", "description": "The x position." },
+                { "name": "y", "type": "integer", "description": "The y position." },
+                { "name": "width", "type": "integer", "description": "The width metric." },
+                { "name": "height", "type": "integer", "description": "The height metric." }
+            ]
+        },
+        {
+            "id": "Layer",
+            "type": "object",
+            "description": "Information about a compositing layer.",
+            "properties": [
+                { "name": "layerId", "$ref": "LayerId", "description": "The unique id for this layer." },
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The id for the node associated with this layer." },
+                { "name": "bounds", "$ref": "IntRect", "description": "Bounds of the layer in absolute page coordinates." },
+                { "name": "paintCount", "type": "integer", "description": "Indicates how many time this layer has painted." },
+                { "name": "memory", "type": "integer", "description": "Estimated memory used by this layer." },
+                { "name": "compositedBounds", "$ref": "IntRect", "description": "The bounds of the composited layer." },
+                { "name": "isInShadowTree", "type": "boolean", "optional": true, "description": "Indicates whether this layer is associated with an element hosted in a shadow tree." },
+                { "name": "isReflection", "type": "boolean", "optional": true, "description": "Indicates whether this layer was used to provide a reflection for the element." },
+                { "name": "isGeneratedContent", "type": "boolean", "optional": true, "description": "Indicates whether the layer is attached to a pseudo element that is CSS generated content." },
+                { "name": "isAnonymous", "type": "boolean", "optional": true, "description": "Indicates whether the layer was created for a CSS anonymous block or box." },
+                { "name": "pseudoElementId", "$ref": "PseudoElementId", "optional": true, "description": "The id for the pseudo element associated with this layer." },
+                { "name": "pseudoElement", "type": "string", "optional": true, "description": "The name of the CSS pseudo-element that prompted the layer to be generated." }
+            ]
+        },
+        {
+            "id": "CompositingReasons",
+            "type": "object",
+            "description": "An object containing the reasons why the layer was composited as properties.",
+            "properties": [
+                { "name": "transform3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a CSS 3D transform." },
+                { "name": "video", "type": "boolean", "optional": true, "description": "Composition due to association with a <video> element." },
+                { "name": "canvas", "type": "boolean", "optional": true, "description": "Composition due to the element being a <canvas> element." },
+                { "name": "plugin", "type": "boolean", "optional": true, "description": "Composition due to association with a plugin." },
+                { "name": "iFrame", "type": "boolean", "optional": true, "description": "Composition due to association with an <iframe> element." },
+                { "name": "backfaceVisibilityHidden", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"backface-visibility: hidden\" style." },
+                { "name": "clipsCompositingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element clipping compositing descendants." },
+                { "name": "animation", "type": "boolean", "optional": true, "description": "Composition due to association with an animated element." },
+                { "name": "filters", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied." },
+                { "name": "positionFixed", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: fixed\" style." },
+                { "name": "positionSticky", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: sticky\" style." },
+                { "name": "overflowScrollingTouch", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"overflow-scrolling: touch\" style." },
+                { "name": "stacking", "type": "boolean", "optional": true, "description": "Composition due to association with an element establishing a stacking context." },
+                { "name": "overlap", "type": "boolean", "optional": true, "description": "Composition due to association with an element overlapping other composited elements." },
+                { "name": "negativeZIndexChildren", "type": "boolean", "optional": true, "description": "Composition due to association with an element with descendants that have a negative z-index." },
+                { "name": "transformWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with composited descendants." },
+                { "name": "opacityWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with opacity applied and composited descendants." },
+                { "name": "maskWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with a masked element and composited descendants." },
+                { "name": "reflectionWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a reflection and composited descendants." },
+                { "name": "filterWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied and composited descendants." },
+                { "name": "blendingWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS blending applied and composited descendants." },
+                { "name": "isolatesCompositedBlendingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element isolating compositing descendants having CSS blending applied." },
+                { "name": "perspective", "type": "boolean", "optional": true, "description": "Composition due to association with an element with perspective applied." },
+                { "name": "preserve3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"transform-style: preserve-3d\" style." },
+                { "name": "root", "type": "boolean", "optional": true, "description": "Composition due to association with the root element." },
+                { "name": "blending", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"blend-mode\" style." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables compositing tree inspection."
+        },
+        {
+            "name": "disable",
+            "description": "Disables compositing tree inspection."
+        },
+        {
+            "name": "layersForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Root of the subtree for which we want to gather layers." }                ],
+            "description": "Returns the layer tree structure of the current page.",
+            "returns": [
+                { "name": "layers", "type": "array", "items": { "$ref": "Layer" }, "description": "Child layers." }
+            ]
+        },
+        {
+            "name": "reasonsForCompositingLayer",
+            "parameters": [
+                { "name": "layerId", "$ref": "LayerId", "description": "The id of the layer for which we want to get the reasons it was composited." }
+            ],
+            "description": "Provides the reasons why the given layer was composited.",
+            "returns": [
+                { "name": "compositingReasons", "$ref": "CompositingReasons", "description": "An object containing the reasons why the layer was composited as properties." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "layerTreeDidChange"
+        }
+    ]
+}
+,
+{
+    "domain": "Network",
+    "description": "Network domain allows tracking network activities of the page. It exposes information about http, file, data and other requests and responses, their headers, bodies, timing, etc.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "LoaderId",
+            "type": "string",
+            "description": "Unique loader identifier."
+        },
+        {
+            "id": "FrameId",
+            "type": "string",
+            "description": "Unique frame identifier."
+        },
+        {
+            "id": "RequestId",
+            "type": "string",
+            "description": "Unique request identifier."
+        },
+        {
+            "id": "Timestamp",
+            "type": "number",
+            "description": "Number of seconds since epoch."
+        },
+        {
+            "id": "Headers",
+            "type": "object",
+            "description": "Request / response headers as keys / values of JSON object."
+        },
+        {
+            "id": "ResourceTiming",
+            "type": "object",
+            "description": "Timing information for the request.",
+            "properties": [
+                { "name": "navigationStart", "type": "number", "description": "Timing's navigationStart is a baseline in seconds, while the other numbers are ticks in milliseconds relatively to this navigationStart." },
+                { "name": "domainLookupStart", "type": "number", "description": "Started DNS address resolve." },
+                { "name": "domainLookupEnd", "type": "number", "description": "Finished DNS address resolve." },
+                { "name": "connectStart", "type": "number", "description": "Started connecting to the remote host." },
+                { "name": "connectEnd", "type": "number", "description": "Connected to the remote host." },
+                { "name": "secureConnectionStart", "type": "number", "description": "Started SSL handshake." },
+                { "name": "requestStart", "type": "number", "description": "Started sending request." },
+                { "name": "responseStart", "type": "number", "description": "Started receiving response headers." }
+            ]
+        },
+        {
+            "id": "Request",
+            "type": "object",
+            "description": "HTTP request data.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Request URL." },
+                { "name": "method", "type": "string", "description": "HTTP request method." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP request headers." },
+                { "name": "postData", "type": "string", "optional": true, "description": "HTTP POST request data." }
+            ]
+        },
+        {
+            "id": "Response",
+            "type": "object",
+            "description": "HTTP response data.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Response URL. This URL can be different from CachedResource.url in case of redirect." },
+                { "name": "status", "type": "number", "description": "HTTP response status code." },
+                { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." },
+                { "name": "headersText", "type": "string", "optional": true, "description": "HTTP response headers text." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                { "name": "requestHeaders", "$ref": "Headers", "optional": true, "description": "Refined HTTP request headers that were actually transmitted over the network." },
+                { "name": "requestHeadersText", "type": "string", "optional": true, "description": "HTTP request headers text." },
+                { "name": "connectionReused", "type": "boolean", "description": "Specifies whether physical connection was actually reused for this request." },
+                { "name": "connectionId", "type": "number", "description": "Physical connection id that was actually used for this request." },
+                { "name": "fromDiskCache", "type": "boolean", "optional": true, "description": "Specifies that the request was served from the disk cache." },
+                { "name": "timing", "$ref": "ResourceTiming", "optional": true, "description": "Timing information for the given request." }
+            ]
+        },
+        {
+            "id": "WebSocketRequest",
+            "type": "object",
+            "description": "WebSocket request data.",
+            "properties": [
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+            ]
+        },
+        {
+            "id": "WebSocketResponse",
+            "type": "object",
+            "description": "WebSocket response data.",
+            "properties": [
+                { "name": "status", "type": "number", "description": "HTTP response status code." },
+                { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+            ]
+        },
+        {
+            "id": "WebSocketFrame",
+            "type": "object",
+            "description": "WebSocket frame data.",
+            "properties": [
+                { "name": "opcode", "type": "number", "description": "WebSocket frame opcode." },
+                { "name": "mask", "type": "boolean", "description": "WebSocket frame mask." },
+                { "name": "payloadData", "type": "string", "description": "WebSocket frame payload data." }
+            ]
+        },
+        {
+            "id": "CachedResource",
+            "type": "object",
+            "description": "Information about the cached resource.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL. This is the url of the original network request." },
+                { "name": "type", "$ref": "Page.ResourceType", "description": "Type of this resource." },
+                { "name": "response", "$ref": "Response", "optional": true, "description": "Cached response data." },
+                { "name": "bodySize", "type": "number", "description": "Cached response body size." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "id": "Initiator",
+            "type": "object",
+            "description": "Information about the request initiator.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["parser", "script", "other"], "description": "Type of this initiator." },
+                { "name": "stackTrace", "$ref": "Console.StackTrace", "optional": true, "description": "Initiator JavaScript stack trace, set for Script only." },
+                { "name": "url", "type": "string", "optional": true, "description": "Initiator URL, set for Parser type only." },
+                { "name": "lineNumber", "type": "number", "optional": true, "description": "Initiator line number, set for Parser type only." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables network tracking, network events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables network tracking, prevents network events from being sent to the client."
+        },
+        {
+            "name": "setExtraHTTPHeaders",
+            "description": "Specifies whether to always send extra HTTP headers with the requests from this page.",
+            "parameters": [
+                { "name": "headers", "$ref": "Headers", "description": "Map with extra HTTP headers." }
+            ]
+        },
+        {
+            "name": "getResponseBody",
+            "description": "Returns content served for the given request.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Identifier of the network request to get content for." }
+            ],
+            "returns": [
+                { "name": "body", "type": "string", "description": "Response body." },
+                { "name": "base64Encoded", "type": "boolean", "description": "True, if content was sent as base64." }
+            ]
+        },
+        {
+            "name": "setCacheDisabled",
+            "parameters": [
+                { "name": "cacheDisabled", "type": "boolean", "description": "Cache disabled state." }
+            ],
+            "description": "Toggles ignoring cache for each request. If <code>true</code>, cache will not be used."
+        },
+        {
+            "name": "loadResource",
+            "async": true,
+            "parameters": [
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame to load the resource from." },
+                { "name": "url", "type": "string", "description": "URL of the resource to load." }
+            ],
+            "returns": [
+                { "name": "content", "type": "string", "description": "Resource content." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType." },
+                { "name": "status", "type": "number", "description": "HTTP response status code." }
+            ],
+            "description": "Loads a resource in the context of a frame on the inspected page without cross origin checks."
+        }
+    ],
+    "events": [
+        {
+            "name": "requestWillBeSent",
+            "description": "Fired when page is about to send HTTP request.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                { "name": "request", "$ref": "Request", "description": "Request data." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                { "name": "redirectResponse", "optional": true, "$ref": "Response", "description": "Redirect response data." },
+                { "name": "type", "$ref": "Page.ResourceType", "optional": true, "description": "Resource type." }
+            ]
+        },
+        {
+            "name": "requestServedFromCache",
+            "description": "Fired if request ended up loading from cache.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." }
+            ]
+        },
+        {
+            "name": "responseReceived",
+            "description": "Fired when HTTP response is available.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "type", "$ref": "Page.ResourceType", "description": "Resource type." },
+                { "name": "response", "$ref": "Response", "description": "Response data." }
+            ]
+        },
+        {
+            "name": "dataReceived",
+            "description": "Fired when data chunk was received over the network.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "dataLength", "type": "integer", "description": "Data chunk length." },
+                { "name": "encodedDataLength", "type": "integer", "description": "Actual bytes received (might be less than dataLength for compressed encodings)." }
+            ]
+        },
+        {
+            "name": "loadingFinished",
+            "description": "Fired when HTTP request has finished loading.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "name": "loadingFailed",
+            "description": "Fired when HTTP request has failed to load.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "errorText", "type": "string", "description": "User friendly error message." },
+                { "name": "canceled", "type": "boolean", "optional": true, "description": "True if loading was canceled." }
+            ]
+        },
+        {
+            "name": "requestServedFromMemoryCache",
+            "description": "Fired when HTTP request has been served from memory cache.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                { "name": "resource", "$ref": "CachedResource", "description": "Cached resource data." }
+            ]
+        },
+        {
+            "name": "webSocketWillSendHandshakeRequest",
+            "description": "Fired when WebSocket is about to initiate handshake.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "request", "$ref": "WebSocketRequest", "description": "WebSocket request data." }
+            ]
+        },
+        {
+            "name": "webSocketHandshakeResponseReceived",
+            "description": "Fired when WebSocket handshake response becomes available.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketResponse", "description": "WebSocket response data." }
+            ]
+        },
+        {
+            "name": "webSocketCreated",
+            "description": "Fired upon WebSocket creation.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "url", "type": "string", "description": "WebSocket request URL." }
+            ]
+        },
+        {
+            "name": "webSocketClosed",
+            "description": "Fired when WebSocket is closed.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." }
+            ]
+        },
+        {
+            "name": "webSocketFrameReceived",
+            "description": "Fired when WebSocket frame is received.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+            ]
+        },
+        {
+            "name": "webSocketFrameError",
+            "description": "Fired when WebSocket frame error occurs.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "errorMessage", "type": "string", "description": "WebSocket frame error message." }
+            ]
+        },
+        {
+            "name": "webSocketFrameSent",
+            "description": "Fired when WebSocket frame is sent.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Page",
+    "description": "Actions and events related to the inspected page belong to the page domain.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "ResourceType",
+            "type": "string",
+            "enum": ["Document", "Stylesheet", "Image", "Font", "Script", "XHR", "WebSocket", "Other"],
+            "description": "Resource type as it was perceived by the rendering engine."
+        },
+        {
+            "id": "CoordinateSystem",
+            "type": "string",
+            "enum": ["Viewport", "Page"],
+            "description": "Coordinate system used by supplied coordinates."
+        },
+        {
+            "id": "Frame",
+            "type": "object",
+            "description": "Information about the Frame on the page.",
+            "properties": [
+                { "name": "id", "type": "string", "description": "Frame unique identifier." },
+                { "name": "parentId", "type": "string", "optional": true, "description": "Parent frame identifier." },
+                { "name": "loaderId", "$ref": "Network.LoaderId", "description": "Identifier of the loader associated with this frame." },
+                { "name": "name", "type": "string", "optional": true, "description": "Frame's name as specified in the tag." },
+                { "name": "url", "type": "string", "description": "Frame document's URL." },
+                { "name": "securityOrigin", "type": "string", "description": "Frame document's security origin." },
+                { "name": "mimeType", "type": "string", "description": "Frame document's mimeType as determined by the browser." }
+            ]
+        },
+        {
+            "id": "FrameResourceTree",
+            "type": "object",
+            "description": "Information about the Frame hierarchy along with their cached resources.",
+            "properties": [
+                { "name": "frame", "$ref": "Frame", "description": "Frame information for this tree item." },
+                { "name": "childFrames", "type": "array", "optional": true, "items": { "$ref": "FrameResourceTree" }, "description": "Child frames." },
+                { "name": "resources", "type": "array",
+                    "items": {
+                        "type": "object",
+                        "properties": [
+                            { "name": "url", "type": "string", "description": "Resource URL." },
+                            { "name": "type", "$ref": "ResourceType", "description": "Type of this resource." },
+                            { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                            { "name": "failed", "type": "boolean", "optional": true, "description": "True if the resource failed to load." },
+                            { "name": "canceled", "type": "boolean", "optional": true, "description": "True if the resource was canceled during loading." },
+                            { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+                        ]
+                    },
+                    "description": "Information about frame resources."
+                }
+            ]
+        },
+        {
+            "id": "SearchResult",
+            "type": "object",
+            "description": "Search result for resource.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL." },
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Resource frame id." },
+                { "name": "matchesCount", "type": "number", "description": "Number of matches in the resource content." }
+            ]
+        },
+        {
+            "id": "Cookie",
+            "type": "object",
+            "description": "Cookie object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Cookie name." },
+                { "name": "value", "type": "string", "description": "Cookie value." },
+                { "name": "domain", "type": "string", "description": "Cookie domain." },
+                { "name": "path", "type": "string", "description": "Cookie path." },
+                { "name": "expires", "type": "number", "description": "Cookie expires." },
+                { "name": "size", "type": "integer", "description": "Cookie size." },
+                { "name": "httpOnly", "type": "boolean", "description": "True if cookie is http-only." },
+                { "name": "secure", "type": "boolean", "description": "True if cookie is secure." },
+                { "name": "session", "type": "boolean", "description": "True in case of session cookie." }
+            ]
+        },
+        {
+            "id": "ScriptIdentifier",
+            "type": "string",
+            "description": "Unique script identifier."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables page domain notifications."
+        },
+        {
+            "name": "disable",
+            "description": "Disables page domain notifications."
+        },
+        {
+            "name": "addScriptToEvaluateOnLoad",
+            "parameters": [
+                { "name": "scriptSource", "type": "string" }
+            ],
+            "returns": [
+                { "name": "identifier", "$ref": "ScriptIdentifier", "description": "Identifier of the added script." }
+            ]
+        },
+        {
+            "name": "removeScriptToEvaluateOnLoad",
+            "parameters": [
+                { "name": "identifier", "$ref": "ScriptIdentifier" }
+            ]
+        },
+        {
+            "name": "reload",
+            "parameters": [
+                { "name": "ignoreCache", "type": "boolean", "optional": true, "description": "If true, browser cache is ignored (as if the user pressed Shift+refresh)." },
+                { "name": "scriptToEvaluateOnLoad", "type": "string", "optional": true, "description": "If set, the script will be injected into all frames of the inspected page after reload." }
+            ],
+            "description": "Reloads given page optionally ignoring the cache."
+        },
+        {
+            "name": "navigate",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "URL to navigate the page to." }
+            ],
+            "description": "Navigates current page to the given URL."
+        },
+        {
+            "name": "getCookies",
+            "returns": [
+                { "name": "cookies", "type": "array", "items": { "$ref": "Cookie"}, "description": "Array of cookie objects." }
+            ],
+            "description": "Returns all browser cookies. Depending on the backend support, will return detailed cookie information in the <code>cookies</code> field."
+        },
+        {
+            "name": "deleteCookie",
+            "parameters": [
+                { "name": "cookieName", "type": "string", "description": "Name of the cookie to remove." },
+                { "name": "url", "type": "string", "description": "URL to match cooke domain and path." }
+            ],
+            "description": "Deletes browser cookie with given name, domain and path."
+        },
+        {
+            "name": "getResourceTree",
+            "description": "Returns present frame / resource tree structure.",
+            "returns": [
+                { "name": "frameTree", "$ref": "FrameResourceTree", "description": "Present frame / resource tree structure." }
+            ]
+        },
+        {
+            "name": "getResourceContent",
+            "description": "Returns content of the given resource.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to get resource for." },
+                { "name": "url", "type": "string", "description": "URL of the resource to get content for." }
+            ],
+            "returns": [
+                { "name": "content", "type": "string", "description": "Resource content." },
+                { "name": "base64Encoded", "type": "boolean", "description": "True, if content was served as base64." }
+            ]
+        },
+        {
+            "name": "searchInResource",
+            "description": "Searches for given string in resource content.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id for resource to search in." },
+                { "name": "url", "type": "string", "description": "URL of the resource to search in." },
+                { "name": "query", "type": "string", "description": "String to search for."  },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "GenericTypes.SearchMatch" }, "description": "List of search matches." }
+            ]
+        },
+        {
+            "name": "searchInResources",
+            "description": "Searches for given string in frame / resource tree structure.",
+            "parameters": [
+                { "name": "text", "type": "string", "description": "String to search for."  },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "SearchResult" }, "description": "List of search results." }
+            ]
+        },
+        {
+            "name": "setDocumentContent",
+            "description": "Sets given markup as the document's HTML.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to set HTML for." },
+                { "name": "html", "type": "string", "description": "HTML content to set."  }
+            ]
+        },
+        {
+            "name": "getScriptExecutionStatus",
+            "description": "Determines if scripts can be executed in the page.",
+            "returns": [
+                { "name": "result", "type": "string", "enum": ["allowed", "disabled", "forbidden"], "description": "Script execution status: \"allowed\" if scripts can be executed, \"disabled\" if script execution has been disabled through page settings, \"forbidden\" if script execution for the given page is not possible for other reasons." }
+            ]
+        },
+        {
+            "name": "setScriptExecutionDisabled",
+            "description": "Switches script execution in the page.",
+            "parameters": [
+                { "name": "value", "type": "boolean", "description": "Whether script execution should be disabled in the page." }
+            ]
+        },
+        {
+            "name": "setEmulatedMedia",
+            "parameters": [
+                { "name": "media", "type": "string", "description": "Media type to emulate. Empty string disables the override." }
+            ],
+            "description": "Emulates the given media for CSS media queries."
+        },
+        {
+            "name": "getCompositingBordersVisible",
+            "description": "Indicates the visibility of compositing borders.",
+            "returns": [
+                { "name": "result", "type": "boolean", "description": "If true, compositing borders are visible." }
+            ]
+        },
+        {
+            "name": "setCompositingBordersVisible",
+            "description": "Controls the visibility of compositing borders.",
+            "parameters": [
+                { "name": "visible", "type": "boolean", "description": "True for showing compositing borders." }
+            ]
+        },
+        {
+            "name": "snapshotNode",
+            "description": "Capture a snapshot of the specified node that does not include unrelated layers.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Id of the node to snapshot." }
+            ],
+            "returns": [
+                { "name": "dataURL", "type": "string", "description": "Base64-encoded image data (PNG)." }
+            ]
+        },
+        {
+            "name": "snapshotRect",
+            "description": "Capture a snapshot of the page within the specified rectangle and coordinate system.",
+            "parameters": [
+                { "name": "x", "type": "integer", "description": "X coordinate" },
+                { "name": "y", "type": "integer", "description": "Y coordinate" },
+                { "name": "width", "type": "integer", "description": "Rectangle width" },
+                { "name": "height", "type": "integer", "description": "Rectangle height" },
+                { "name": "coordinateSystem", "$ref": "CoordinateSystem", "description": "Indicates the coordinate system of the supplied rectangle." }
+            ],
+            "returns": [
+                { "name": "dataURL", "type": "string", "description": "Base64-encoded image data (PNG)." }
+            ]
+        },
+        {
+            "name": "archive",
+            "description": "Grab an archive of the page.",
+            "returns": [
+                { "name": "data", "type": "string", "description": "Base64-encoded web archive." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "domContentEventFired",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "loadEventFired",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "frameNavigated",
+            "description": "Fired once navigation of the frame has completed. Frame is now associated with the new loader.",
+            "parameters": [
+                { "name": "frame", "$ref": "Frame", "description": "Frame object." }
+            ]
+        },
+        {
+            "name": "frameDetached",
+            "description": "Fired when frame has been detached from its parent.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has been detached." }
+            ]
+        },
+        {
+            "name": "frameStartedLoading",
+            "description": "Fired when frame has started loading.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has started loading." }
+            ]
+        },
+        {
+            "name": "frameStoppedLoading",
+            "description": "Fired when frame has stopped loading.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has stopped loading." }
+            ]
+        },
+        {
+            "name": "frameScheduledNavigation",
+            "description": "Fired when frame schedules a potential navigation.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has scheduled a navigation." },
+                { "name": "delay", "type": "number", "description": "Delay (in seconds) until the navigation is scheduled to begin. The navigation is not guaranteed to start." }
+            ]
+        },
+        {
+            "name": "frameClearedScheduledNavigation",
+            "description": "Fired when frame no longer has a scheduled navigation.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has cleared its scheduled navigation." }
+            ]
+        },
+        {
+            "name": "javascriptDialogOpening",
+            "description": "Fired when a JavaScript initiated dialog (alert, confirm, prompt, or onbeforeunload) is about to open.",
+            "parameters": [
+                { "name": "message", "type": "string", "description": "Message that will be displayed by the dialog." }
+            ]
+        },
+        {
+            "name": "javascriptDialogClosed",
+            "description": "Fired when a JavaScript initiated dialog (alert, confirm, prompt, or onbeforeunload) has been closed."
+        },
+        {
+            "name": "scriptsEnabled",
+            "description": "Fired when the JavaScript is enabled/disabled on the page",
+            "parameters": [
+                { "name": "isEnabled", "type": "boolean", "description": "Whether script execution is enabled or disabled on the page." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Timeline",
+    "description": "Timeline provides its clients with instrumentation records that are generated during the page runtime. Timeline instrumentation can be started and stopped using corresponding commands. While timeline is started, it is generating timeline event records.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "EventType",
+            "type": "string",
+            "enum": ["EventDispatch", "ScheduleStyleRecalculation", "RecalculateStyles", "InvalidateLayout", "Layout", "Paint", "ResizeImage", "ParseHTML", "TimerInstall", "TimerRemove", "TimerFire", "EvaluateScript", "MarkLoad", "MarkDOMContent", "TimeStamp", "Time", "TimeEnd", "ScheduleResourceRequest", "ResourceSendRequest", "ResourceReceiveResponse", "ResourceReceivedData", "ResourceFinish", "XHRReadyStateChange", "XHRLoad", "FunctionCall", "ProbeSample", "ConsoleProfile", "RequestAnimationFrame", "CancelAnimationFrame", "FireAnimationFrame", "WebSocketCreate", "WebSocketSendHandshakeRequest", "WebSocketReceiveHandshakeResponse", "WebSocketDestroy"],
+            "description": "Timeline record type."
+        },
+        {
+            "id": "TimelineEvent",
+            "type": "object",
+            "properties": [
+                { "name": "type", "$ref": "EventType", "description": "Event type." },
+                { "name": "data", "type": "object", "description": "Event data." },
+                { "name": "children", "type": "array", "optional": true, "items": { "$ref": "TimelineEvent" }, "description": "Nested records." }
+            ],
+            "description": "Timeline record contains information about the recorded activity."
+        }
+    ],
+    "commands": [
+        {
+            "name": "start",
+            "parameters": [
+                { "name": "maxCallStackDepth", "optional": true, "type": "integer", "description": "Samples JavaScript stack traces up to <code>maxCallStackDepth</code>, defaults to 5." }
+            ],
+            "description": "Starts capturing instrumentation events."
+        },
+        {
+            "name": "stop",
+            "description": "Stops capturing instrumentation events."
+        }
+    ],
+    "events": [
+        {
+            "name": "eventRecorded",
+            "parameters": [
+                { "name": "record", "$ref": "TimelineEvent", "description": "Timeline event record data." }
+            ],
+            "description": "Fired for every instrumentation event while timeline is started."
+        },
+        {
+            "name": "recordingStarted",
+            "description": "Fired when recording has started."
+        },
+        {
+            "name": "recordingStopped",
+            "description": "Fired when recording has stopped."
+        }
+    ]
+}
+]}
diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json b/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json
new file mode 100644
index 000000000..be40adcae
--- /dev/null
+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-9.0.json
@@ -0,0 +1,3295 @@
+{"domains":[
+{
+    "domain": "ApplicationCache",
+    "availability": "web",
+    "types": [
+        {
+            "id": "ApplicationCacheResource",
+            "type": "object",
+            "description": "Detailed application cache resource information.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource url." },
+                { "name": "size", "type": "integer", "description": "Resource size." },
+                { "name": "type", "type": "string", "description": "Resource type." }
+            ]
+        },
+        {
+            "id": "ApplicationCache",
+            "type": "object",
+            "description": "Detailed application cache information.",
+            "properties": [
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "size", "type": "number", "description": "Application cache size." },
+                { "name": "creationTime", "type": "number", "description": "Application cache creation time." },
+                { "name": "updateTime", "type": "number", "description": "Application cache update time." },
+                { "name": "resources", "type": "array", "items": { "$ref": "ApplicationCacheResource" }, "description": "Application cache resources." }
+            ]
+        },
+        {
+            "id": "FrameWithManifest",
+            "type": "object",
+            "description": "Frame identifier - manifest URL pair.",
+            "properties": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame identifier." },
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "status", "type": "integer", "description": "Application cache status." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "getFramesWithManifests",
+            "returns": [
+                { "name": "frameIds", "type": "array", "items": { "$ref": "FrameWithManifest" }, "description": "Array of frame identifiers with manifest urls for each frame containing a document associated with some application cache." }
+            ],
+            "description": "Returns array of frame identifiers with manifest urls for each frame containing a document associated with some application cache."
+        },
+        {
+            "name": "enable",
+            "description": "Enables application cache domain notifications."
+        },
+        {
+            "name": "getManifestForFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose manifest is retrieved." }
+            ],
+            "returns": [
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL for document in the given frame." }
+            ],
+            "description": "Returns manifest URL for document in the given frame."
+        },
+        {
+            "name": "getApplicationCacheForFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache is retrieved." }
+            ],
+            "returns": [
+                { "name": "applicationCache", "$ref": "ApplicationCache", "description": "Relevant application cache data for the document in given frame." }
+            ],
+            "description": "Returns relevant application cache data for the document in given frame."
+        }
+    ],
+    "events": [
+        {
+            "name": "applicationCacheStatusUpdated",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache updated status." },
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "status", "type": "integer", "description": "Updated application cache status." }
+            ]
+        },
+        {
+            "name": "networkStateUpdated",
+            "parameters": [
+                { "name": "isNowOnline", "type": "boolean" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "CSS",
+    "description": "This domain exposes CSS read/write operations. All CSS objects, like stylesheets, rules, and styles, have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). Alternatively, a client can discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "StyleSheetId",
+            "type": "string"
+        },
+        {
+            "id": "CSSStyleId",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                { "name": "ordinal", "type": "integer", "description": "The style ordinal within the stylesheet." }
+            ],
+            "description": "This object identifies a CSS style in a unique way."
+        },
+        {
+            "id": "StyleSheetOrigin",
+            "type": "string",
+            "enum": ["user", "user-agent", "inspector", "regular"],
+            "description": "Stylesheet type: \"user\" for user stylesheets, \"user-agent\" for user-agent stylesheets, \"inspector\" for stylesheets created by the inspector (i.e. those holding the \"via inspector\" rules), \"regular\" for regular stylesheets."
+        },
+        {
+            "id": "CSSRuleId",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                { "name": "ordinal", "type": "integer", "description": "The rule ordinal within the stylesheet." }
+            ],
+            "description": "This object identifies a CSS rule in a unique way."
+        },
+        {
+            "id": "PseudoIdMatches",
+            "type": "object",
+            "properties": [
+                { "name": "pseudoId", "type": "integer", "description": "Pseudo style identifier (see <code>enum PseudoId</code> in <code>RenderStyleConstants.h</code>)."},
+                { "name": "matches", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules applicable to the pseudo style."}
+            ],
+            "description": "CSS rule collection for a single pseudo style."
+        },
+        {
+            "id": "InheritedStyleEntry",
+            "type": "object",
+            "properties": [
+                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "The ancestor node's inline style, if any, in the style inheritance chain." },
+                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules matching the ancestor node in the style inheritance chain." }
+            ],
+            "description": "CSS rule collection for a single pseudo style."
+        },
+        {
+            "id": "RuleMatch",
+            "type": "object",
+            "properties": [
+                { "name": "rule", "$ref": "CSSRule", "description": "CSS rule in the match." },
+                { "name": "matchingSelectors", "type": "array", "items": { "type": "integer" }, "description": "Matching selector indices in the rule's selectorList selectors (0-based)." }
+            ],
+            "description": "Match data for a CSS rule."
+        },
+        {
+            "id": "CSSSelector",
+            "type": "object",
+            "properties": [
+                { "name": "text", "type": "string", "description": "Canonicalized selector text." },
+                { "name": "specificity", "optional": true, "type": "array", "items": { "type": "integer" }, "description": "Specificity (a, b, c) tuple. Included if the selector is sent in response to CSS.getMatchedStylesForNode which provides a context element." },
+                { "name": "dynamic", "optional": true, "type": "boolean", "description": "Whether or not the specificity can be dynamic. Included if the selector is sent in response to CSS.getMatchedStylesForNode which provides a context element." }
+            ],
+            "description": "CSS selector."
+        },
+        {
+            "id": "SelectorList",
+            "type": "object",
+            "properties": [
+                { "name": "selectors", "type": "array", "items": { "$ref": "CSSSelector" }, "description": "Selectors in the list." },
+                { "name": "text", "type": "string", "description": "Rule selector text." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Rule selector range in the underlying resource (if available)." }
+            ],
+            "description": "Selector list data."
+        },
+        {
+            "id": "CSSStyleAttribute",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "DOM attribute name (e.g. \"width\")."},
+                { "name": "style", "$ref": "CSSStyle", "description": "CSS style generated by the respective DOM attribute."}
+            ],
+            "description": "CSS style information for a DOM style attribute."
+        },
+        {
+            "id": "CSSStyleSheetHeader",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Owner frame identifier."},
+                { "name": "sourceURL", "type": "string", "description": "Stylesheet resource URL."},
+                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Stylesheet origin."},
+                { "name": "title", "type": "string", "description": "Stylesheet title."},
+                { "name": "disabled", "type": "boolean", "description": "Denotes whether the stylesheet is disabled."}
+            ],
+            "description": "CSS stylesheet metainformation."
+        },
+        {
+            "id": "CSSStyleSheetBody",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                { "name": "rules", "type": "array", "items": { "$ref": "CSSRule" }, "description": "Stylesheet resource URL."},
+                { "name": "text", "type": "string", "optional": true, "description": "Stylesheet resource contents (if available)."}
+            ],
+            "description": "CSS stylesheet contents."
+        },
+        {
+            "id": "CSSRule",
+            "type": "object",
+            "properties": [
+                { "name": "ruleId", "$ref": "CSSRuleId", "optional": true, "description": "The CSS rule identifier (absent for user agent stylesheet and user-specified stylesheet rules)."},
+                { "name": "selectorList", "$ref": "SelectorList", "description": "Rule selector data." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "Parent stylesheet resource URL (for regular rules)."},
+                { "name": "sourceLine", "type": "integer", "description": "Line ordinal of the rule selector start character in the resource."},
+                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."},
+                { "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." },
+                { "name": "media", "type": "array", "items": { "$ref": "CSSMedia" }, "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards." }
+            ],
+            "description": "CSS rule representation."
+        },
+        {
+            "id": "SourceRange",
+            "type": "object",
+            "properties": [
+                { "name": "startLine", "type": "integer", "description": "Start line of range." },
+                { "name": "startColumn", "type": "integer", "description": "Start column of range (inclusive)." },
+                { "name": "endLine", "type": "integer", "description": "End line of range" },
+                { "name": "endColumn", "type": "integer", "description": "End column of range (exclusive)." }
+            ],
+            "description": "Text range within a resource."
+        },
+        {
+            "id": "ShorthandEntry",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Shorthand name." },
+                { "name": "value", "type": "string", "description": "Shorthand value." }
+            ]
+        },
+        {
+            "id": "CSSPropertyInfo",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "longhands", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Longhand property names." },
+                { "name": "values", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Supported values for this property." }
+            ]
+        },
+        {
+            "id": "CSSComputedStyleProperty",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Computed style property name." },
+                { "name": "value", "type": "string", "description": "Computed style property value." }
+            ]
+        },
+        {
+            "id": "CSSStyle",
+            "type": "object",
+            "properties": [
+                { "name": "styleId", "$ref": "CSSStyleId", "optional": true, "description": "The CSS style identifier (absent for attribute styles)." },
+                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSProperty" }, "description": "CSS properties in the style." },
+                { "name": "shorthandEntries", "type": "array", "items": { "$ref": "ShorthandEntry" }, "description": "Computed values for all shorthands found in the style." },
+                { "name": "cssText", "type": "string", "optional": true, "description": "Style declaration text (if available)." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Style declaration range in the enclosing stylesheet (if available)." },
+                { "name": "width", "type": "string", "optional": true, "description": "The effective \"width\" property value from this style." },
+                { "name": "height", "type": "string", "optional": true, "description": "The effective \"height\" property value from this style." }
+            ],
+            "description": "CSS style representation."
+        },
+        {
+            "id": "CSSPropertyStatus",
+	    "type": "string",
+            "enum": ["active", "inactive", "disabled", "style"],
+            "description": "The property status: \"active\" if the property is effective in the style, \"inactive\" if the property is overridden by a same-named property in this style later on, \"disabled\" if the property is disabled by the user, \"style\" (implied if absent) if the property is reported by the browser rather than by the CSS source parser."
+        },
+        {
+            "id": "CSSProperty",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "The property name." },
+                { "name": "value", "type": "string", "description": "The property value." },
+                { "name": "priority", "type": "string", "optional": true, "description": "The property priority (implies \"\" if absent)." },
+                { "name": "implicit", "type": "boolean", "optional": true, "description": "Whether the property is implicit (implies <code>false</code> if absent)." },
+                { "name": "text", "type": "string", "optional": true, "description": "The full property text as specified in the style." },
+                { "name": "parsedOk", "type": "boolean", "optional": true, "description": "Whether the property is understood by the browser (implies <code>true</code> if absent)." },
+                { "name": "status", "$ref": "CSSPropertyStatus", "optional": true, "description": "Whether the property is active or disabled." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "The entire property range in the enclosing style declaration (if available)." }
+            ],
+            "description": "CSS style effective visual dimensions and source offsets."
+        },
+        {
+            "id": "CSSMedia",
+            "type": "object",
+            "properties": [
+                { "name": "text", "type": "string", "description": "Media query text." },
+                { "name": "source", "type": "string", "enum": ["mediaRule", "importRule", "linkedSheet", "inlineSheet"], "description": "Source of the media query: \"mediaRule\" if specified by a @media rule, \"importRule\" if specified by an @import rule, \"linkedSheet\" if specified by a \"media\" attribute in a linked stylesheet's LINK tag, \"inlineSheet\" if specified by a \"media\" attribute in an inline stylesheet's STYLE tag." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the media query description." },
+                { "name": "sourceLine", "type": "integer", "optional": true, "description": "Line in the document containing the media query (not defined for the \"stylesheet\" source)." }
+            ],
+            "description": "CSS media query descriptor."
+        },
+        {
+            "id": "Region",
+            "type": "object",
+            "properties": [
+                { "name": "regionOverset", "type": "string", "enum": ["overset", "fit", "empty"], "description": "The \"overset\" attribute of a Named Flow." },
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The corresponding DOM node id." }
+            ],
+            "description": "This object represents a region that flows from a Named Flow."
+        },
+        {
+            "id": "NamedFlow",
+            "type": "object",
+            "properties": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "name", "type": "string", "description": "Named Flow identifier." },
+                { "name": "overset", "type": "boolean", "description": "The \"overset\" attribute of a Named Flow." },
+                { "name": "content", "type": "array", "items": { "$ref": "DOM.NodeId" }, "description": "An array of nodes that flow into the Named Flow." },
+                { "name": "regions", "type": "array", "items": { "$ref": "Region" }, "description": "An array of regions associated with the Named Flow." }
+            ],
+            "description": "This object represents a Named Flow."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables the CSS agent for the given page. Clients should not assume that the CSS agent has been enabled until the result of this command is received."
+        },
+        {
+            "name": "disable",
+            "description": "Disables the CSS agent for the given page."
+        },
+        {
+            "name": "getMatchedStylesForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" },
+                { "name": "includePseudo", "type": "boolean", "optional": true, "description": "Whether to include pseudo styles (default: true)." },
+                { "name": "includeInherited", "type": "boolean", "optional": true, "description": "Whether to include inherited styles (default: true)." }
+            ],
+            "returns": [
+                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "optional": true, "description": "CSS rules matching this node, from all applicable stylesheets." },
+                { "name": "pseudoElements", "type": "array", "items": { "$ref": "PseudoIdMatches" }, "optional": true, "description": "Pseudo style matches for this node." },
+                { "name": "inherited", "type": "array", "items": { "$ref": "InheritedStyleEntry" }, "optional": true, "description": "A chain of inherited styles (from the immediate node parent up to the DOM tree root)." }
+            ],
+            "description": "Returns requested styles for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getInlineStylesForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" }
+            ],
+            "returns": [
+                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "Inline style for the specified DOM node." },
+                { "name": "attributesStyle", "$ref": "CSSStyle", "optional": true, "description": "Attribute-defined element style (e.g. resulting from \"width=20 height=100%\")."}
+            ],
+            "description": "Returns the styles defined inline (explicitly in the \"style\" attribute and implicitly, using DOM attributes) for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getComputedStyleForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" }
+            ],
+            "returns": [
+                { "name": "computedStyle", "type": "array", "items": { "$ref": "CSSComputedStyleProperty" }, "description": "Computed style for the specified DOM node." }
+            ],
+            "description": "Returns the computed style for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getAllStyleSheets",
+            "returns": [
+                { "name": "headers", "type": "array", "items": { "$ref": "CSSStyleSheetHeader" }, "description": "Descriptor entries for all available stylesheets." }
+            ],
+            "description": "Returns metainfo entries for all known stylesheets."
+        },
+        {
+            "name": "getStyleSheet",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "returns": [
+                { "name": "styleSheet", "$ref": "CSSStyleSheetBody", "description": "Stylesheet contents for the specified <code>styleSheetId</code>." }
+            ],
+            "description": "Returns stylesheet data for the specified <code>styleSheetId</code>."
+        },
+        {
+            "name": "getStyleSheetText",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "returns": [
+                { "name": "text", "type": "string", "description": "The stylesheet text." }
+            ],
+            "description": "Returns the current textual content and the URL for a stylesheet."
+        },
+        {
+            "name": "setStyleSheetText",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" },
+                { "name": "text", "type": "string" }
+            ],
+            "description": "Sets the new stylesheet text, thereby invalidating all existing <code>CSSStyleId</code>'s and <code>CSSRuleId</code>'s contained by this stylesheet."
+        },
+        {
+            "name": "setStyleText",
+            "parameters": [
+                { "name": "styleId", "$ref": "CSSStyleId" },
+                { "name": "text", "type": "string" }
+            ],
+            "returns": [
+                { "name": "style", "$ref": "CSSStyle", "description": "The resulting style after the text modification." }
+            ],
+            "description": "Sets the new <code>text</code> for the respective style."
+        },
+        {
+            "name": "setRuleSelector",
+            "parameters": [
+                { "name": "ruleId", "$ref": "CSSRuleId" },
+                { "name": "selector", "type": "string" }
+            ],
+            "returns": [
+                { "name": "rule", "$ref": "CSSRule", "description": "The resulting rule after the selector modification." }
+            ],
+            "description": "Modifies the rule selector."
+        },
+        {
+            "name": "addRule",
+            "parameters": [
+                { "name": "contextNodeId", "$ref": "DOM.NodeId" },
+                { "name": "selector", "type": "string" }
+            ],
+            "returns": [
+                { "name": "rule", "$ref": "CSSRule", "description": "The newly created rule." }
+            ],
+            "description": "Creates a new empty rule with the given <code>selector</code> in a special \"inspector\" stylesheet in the owner document of the context node."
+        },
+        {
+            "name": "getSupportedCSSProperties",
+            "returns": [
+                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSPropertyInfo" }, "description": "Supported property metainfo." }
+            ],
+            "description": "Returns all supported CSS property names."
+        },
+        {
+            "name": "forcePseudoState",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The element id for which to force the pseudo state." },
+                { "name": "forcedPseudoClasses", "type": "array", "items": { "type": "string", "enum": ["active", "focus", "hover", "visited"] }, "description": "Element pseudo classes to force when computing the element's style." }
+            ],
+            "description": "Ensures that the given node will have specified pseudo-classes whenever its style is computed by the browser."
+        },
+        {
+            "name": "getNamedFlowCollection",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id for which to get the Named Flow Collection." }
+            ],
+            "returns": [
+                { "name": "namedFlows", "type": "array", "items": { "$ref": "NamedFlow" }, "description": "An array containing the Named Flows in the document." }
+            ],
+            "description": "Returns the Named Flows from the document."
+        }
+    ],
+    "events": [
+        {
+            "name": "mediaQueryResultChanged",
+            "description": "Fires whenever a MediaQuery result changes (for example, after a browser window has been resized.) The current implementation considers only viewport-dependent media features."
+        },
+        {
+            "name": "styleSheetChanged",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "description": "Fired whenever a stylesheet is changed as a result of the client operation."
+        },
+        {
+            "name": "namedFlowCreated",
+            "parameters": [
+                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The new Named Flow." }
+            ],
+            "description": "Fires when a Named Flow is created."
+        },
+        {
+            "name": "namedFlowRemoved",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Identifier of the removed Named Flow." }
+            ],
+            "description": "Fires when a Named Flow is removed: has no associated content nodes and regions."
+        },
+        {
+            "name": "regionOversetChanged",
+            "parameters": [
+                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The Named Flow containing the regions whose regionOverset values changed." }
+            ],
+            "description": "Fires if any of the regionOverset values changed in a Named Flow's region chain."
+        },
+        {
+            "name": "registeredNamedFlowContentElement",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was registered." },
+                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the registered content node." },
+                { "name": "nextContentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the element following the registered content node." }
+            ],
+            "description": "Fires when a Named Flow's has been registered with a new content node."
+        },
+        {
+            "name": "unregisteredNamedFlowContentElement",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was unregistered." },
+                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the unregistered content node." }
+            ],
+            "description": "Fires when a Named Flow's has been registered with a new content node."
+        }
+    ]
+}
+,
+{
+    "domain": "Console",
+    "description": "Console domain defines methods and events for interaction with the JavaScript console. Console collects messages created by means of the <a href='http://getfirebug.com/wiki/index.php/Console_API'>JavaScript Console API</a>. One needs to enable this domain using <code>enable</code> command in order to start receiving the console messages. Browser collects messages issued while console domain is not enabled as well and reports them using <code>messageAdded</code> notification upon enabling.",
+    "types": [
+        {
+            "id": "ConsoleMessage",
+            "type": "object",
+            "description": "Console message.",
+            "properties": [
+                { "name": "source", "type": "string", "enum": ["xml", "javascript", "network", "console-api", "storage", "appcache", "rendering", "css", "security", "content-blocker", "other"], "description": "Message source." },
+                { "name": "level", "type": "string", "enum": ["log", "info", "warning", "error", "debug"], "description": "Message severity." },
+                { "name": "text", "type": "string", "description": "Message text." },
+                { "name": "type", "type": "string", "optional": true, "enum": ["log", "dir", "dirxml", "table", "trace", "clear", "startGroup", "startGroupCollapsed", "endGroup", "assert", "timing", "profile", "profileEnd"], "description": "Console message type." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL of the message origin." },
+                { "name": "line", "type": "integer", "optional": true, "description": "Line number in the resource that generated this message." },
+                { "name": "column", "type": "integer", "optional": true, "description": "Column number on the line in the resource that generated this message." },
+                { "name": "repeatCount", "type": "integer", "optional": true, "description": "Repeat count for repeated messages." },
+                { "name": "parameters", "type": "array", "items": { "$ref": "Runtime.RemoteObject" }, "optional": true, "description": "Message parameters in case of the formatted message." },
+                { "name": "stackTrace", "$ref": "StackTrace", "optional": true, "description": "JavaScript stack trace for assertions and error messages." },
+                { "name": "networkRequestId", "$ref": "Network.RequestId", "optional": true, "description": "Identifier of the network request associated with this message." }
+            ]
+        },
+        {
+            "id": "CallFrame",
+            "type": "object",
+            "description": "Stack entry for console errors and assertions.",
+            "properties": [
+                { "name": "functionName", "type": "string", "description": "JavaScript function name." },
+                { "name": "url", "type": "string", "description": "JavaScript script name or url." },
+                { "name": "lineNumber", "type": "integer", "description": "JavaScript script line number." },
+                { "name": "columnNumber", "type": "integer", "description": "JavaScript script column number." }
+            ]
+        },
+        {
+            "id": "StackTrace",
+            "type": "array",
+            "items": { "$ref": "CallFrame" },
+            "description": "Call frames for assertions or error messages."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables console domain, sends the messages collected so far to the client by means of the <code>messageAdded</code> notification."
+        },
+        {
+            "name": "disable",
+            "description": "Disables console domain, prevents further console messages from being reported to the client."
+        },
+        {
+            "name": "clearMessages",
+            "description": "Clears console messages collected in the browser."
+        },
+        {
+            "name": "setMonitoringXHREnabled",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "Monitoring enabled state." }
+            ],
+            "description": "Toggles monitoring of XMLHttpRequest. If <code>true</code>, console will receive messages upon each XHR issued."
+        },
+        {
+            "name": "addInspectedNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "DOM node id to be accessible by means of $x command line API." }
+            ],
+            "description": "Enables console to refer to the node with given id via $x (see Command Line API for more details $x functions)."
+        }
+    ],
+    "events": [
+        {
+            "name": "messageAdded",
+            "parameters": [
+                { "name": "message", "$ref": "ConsoleMessage", "description": "Console message that has been added." }
+            ],
+            "description": "Issued when new console message is added."
+        },
+        {
+            "name": "messageRepeatCountUpdated",
+            "parameters": [
+                { "name": "count", "type": "integer", "description": "New repeat count value." }
+            ],
+            "description": "Issued when subsequent message(s) are equal to the previous one(s)."
+        },
+        {
+            "name": "messagesCleared",
+            "description": "Issued when console is cleared. This happens either upon <code>clearMessages</code> command or after page navigation."
+        }
+    ]
+}
+,
+{
+    "domain": "DOM",
+    "description": "This domain exposes DOM read/write operations. Each DOM Node is represented with its mirror object that has an <code>id</code>. This <code>id</code> can be used to get additional information on the Node, resolve it into the JavaScript object wrapper, etc. It is important that client receives DOM events only for the nodes that are known to the client. Backend keeps track of the nodes that were sent to the client and never sends the same node twice. It is client's responsibility to collect information about the nodes that were sent to the client.<p>Note that <code>iframe</code> owner elements will return corresponding document elements as their child nodes.</p>",
+    "availability": "web",
+    "types": [
+        {
+            "id": "NodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier."
+        },
+        {
+            "id": "BackendNodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier used to reference a node that may not have been pushed to the front-end."
+        },
+        {
+            "id": "LiveRegionRelevant",
+            "type": "string",
+            "enum": ["additions", "removals", "text"],
+            "description": "Token values of @aria-relevant attribute."
+        },
+        {
+            "id": "Node",
+            "type": "object",
+            "properties": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Node identifier that is passed into the rest of the DOM messages as the <code>nodeId</code>. Backend will only push node with given <code>id</code> once. It is aware of all requested nodes and will only fire DOM events for nodes known to the client." },
+                { "name": "nodeType", "type": "integer", "description": "<code>Node</code>'s nodeType." },
+                { "name": "nodeName", "type": "string", "description": "<code>Node</code>'s nodeName." },
+                { "name": "localName", "type": "string", "description": "<code>Node</code>'s localName." },
+                { "name": "nodeValue", "type": "string", "description": "<code>Node</code>'s nodeValue." },
+                { "name": "childNodeCount", "type": "integer", "optional": true, "description": "Child count for <code>Container</code> nodes." },
+                { "name": "children", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Child nodes of this node when requested with children." },
+                { "name": "attributes", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Attributes of the <code>Element</code> node in the form of flat array <code>[name1, value1, name2, value2]</code>." },
+                { "name": "documentURL", "type": "string", "optional": true, "description": "Document URL that <code>Document</code> or <code>FrameOwner</code> node points to." },
+                { "name": "baseURL", "type": "string", "optional": true, "description": "Base URL that <code>Document</code> or <code>FrameOwner</code> node uses for URL completion." },
+                { "name": "publicId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s publicId." },
+                { "name": "systemId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s systemId." },
+                { "name": "internalSubset", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s internalSubset." },
+                { "name": "xmlVersion", "type": "string", "optional": true, "description": "<code>Document</code>'s XML version in case of XML documents." },
+                { "name": "name", "type": "string", "optional": true, "description": "<code>Attr</code>'s name." },
+                { "name": "value", "type": "string", "optional": true, "description": "<code>Attr</code>'s value." },
+                { "name": "frameId", "$ref": "Network.FrameId", "optional": true, "description": "Frame ID for frame owner elements." },
+                { "name": "contentDocument", "$ref": "Node", "optional": true, "description": "Content document for frame owner elements." },
+                { "name": "shadowRoots", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Shadow root list for given element host." },
+                { "name": "templateContent", "$ref": "Node", "optional": true, "description": "Content document fragment for template elements" },
+                { "name": "role", "type": "string", "optional": true, "description": "Computed value for first recognized role token, default role per element, or overridden role." }
+            ],
+            "description": "DOM interaction is implemented in terms of mirror objects that represent the actual DOM nodes. DOMNode is a base node mirror type."
+        },
+        {
+            "id": "EventListener",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "description": "<code>EventListener</code>'s type." },
+                { "name": "useCapture", "type": "boolean", "description": "<code>EventListener</code>'s useCapture." },
+                { "name": "isAttribute", "type": "boolean", "description": "<code>EventListener</code>'s isAttribute." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                { "name": "handlerBody", "type": "string", "description": "Event handler function body." },
+                { "name": "location", "$ref": "Debugger.Location", "optional": true, "description": "Handler code location." },
+                { "name": "sourceName", "type": "string", "optional": true, "description": "Source script URL." },
+                { "name": "handler", "$ref": "Runtime.RemoteObject", "optional": true, "description": "Event handler function value." }
+            ],
+            "description": "A structure holding event listener properties."
+        },
+        {
+            "id": "AccessibilityProperties",
+            "description": "A structure holding accessibility properties.",
+            "type": "object",
+            "properties": [
+                { "name": "activeDescendantNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of the accessibility object referenced by aria-activedescendant." },
+                { "name": "busy", "type": "boolean", "optional": true, "description": "Value of @aria-busy on current or ancestor node." },
+                { "name": "checked", "type": "string", "optional": true, "enum": ["true", "false", "mixed"], "description": "Checked state of certain form controls." },
+                { "name": "childNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of the accessibility tree children if available." },
+                { "name": "controlledNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-controls." },
+                { "name": "disabled", "type": "boolean", "optional": true, "description": "Disabled state of form controls." },
+                { "name": "exists", "type": "boolean", "description": "Indicates whether there is an existing AX object for the DOM node. If this is false, all the other properties will be default values." },
+                { "name": "expanded", "type": "boolean", "optional": true, "description": "Expanded state." },
+                { "name": "flowedNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-flowto." },
+                { "name": "focused", "type": "boolean", "optional": true, "description": "Focused state. Only defined on focusable elements." },
+                { "name": "ignored", "type": "boolean", "optional": true, "description": "Indicates whether the accessibility of the associated AX object node is ignored, whether heuristically or explicitly." },
+                { "name": "ignoredByDefault", "type": "boolean", "optional": true, "description": "State indicating whether the accessibility of the associated AX object node is ignored by default for node type." },
+                { "name": "invalid", "type": "string", "optional": true, "enum": ["true", "false", "grammar", "spelling"], "description": "Invalid status of form controls." },
+                { "name": "hidden", "type": "boolean", "optional": true, "description": "Hidden state. True if node or an ancestor is hidden via CSS or explicit @aria-hidden, to clarify why the element is ignored." },
+                { "name": "label", "type": "string", "description": "Computed label value for the node, sometimes calculated by referencing other nodes." },
+                { "name": "liveRegionAtomic", "type": "boolean", "optional": true, "description": "Value of @aria-atomic." },
+                { "name": "liveRegionRelevant", "type": "array", "items": { "type": "string" }, "optional": true, "description": "Token value(s) of element's @aria-relevant attribute. Array of string values matching $ref LiveRegionRelevant. FIXME: Enum values blocked by http://webkit.org/b/133711" },
+                { "name": "liveRegionStatus", "type": "string", "optional": true, "enum": ["assertive", "polite", "off"], "description": "Value of element's @aria-live attribute." },
+                { "name": "mouseEventNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of node or closest ancestor node that has a mousedown, mouseup, or click event handler." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                { "name": "ownedNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-owns." },
+                { "name": "parentNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of the accessibility tree parent object if available." },
+                { "name": "pressed", "type": "boolean", "optional": true, "description": "Pressed state for toggle buttons." },
+                { "name": "readonly", "type": "boolean", "optional": true, "description": "Readonly state of text controls." },
+                { "name": "required", "type": "boolean", "optional": true, "description": "Required state of form controls." },
+                { "name": "role", "type": "string", "description": "Computed value for first recognized role token, default role per element, or overridden role." },
+                { "name": "selected", "type": "boolean", "optional": true, "description": "Selected state of certain form controls." },
+                { "name": "selectedChildNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any children marked as selected." }
+            ]
+        },
+        {
+            "id": "RGBAColor",
+            "type": "object",
+            "properties": [
+                { "name": "r", "type": "integer", "description": "The red component, in the [0-255] range." },
+                { "name": "g", "type": "integer", "description": "The green component, in the [0-255] range." },
+                { "name": "b", "type": "integer", "description": "The blue component, in the [0-255] range." },
+                { "name": "a", "type": "number", "optional": true, "description": "The alpha component, in the [0-1] range (default: 1)." }
+            ],
+            "description": "A structure holding an RGBA color."
+        },
+        {
+            "id": "Quad",
+            "type": "array",
+            "items": { "type": "number" },
+            "minItems": 8,
+            "maxItems": 8,
+            "description": "An array of quad vertices, x immediately followed by y for each point, points clock-wise."
+        },
+        {
+            "id": "HighlightConfig",
+            "type": "object",
+            "properties": [
+                { "name": "showInfo", "type": "boolean", "optional": true, "description": "Whether the node info tooltip should be shown (default: false)." },
+                { "name": "contentColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                { "name": "paddingColor", "$ref": "RGBAColor", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
+                { "name": "borderColor", "$ref": "RGBAColor", "optional": true, "description": "The border highlight fill color (default: transparent)." },
+                { "name": "marginColor", "$ref": "RGBAColor", "optional": true, "description": "The margin highlight fill color (default: transparent)." }
+            ],
+            "description": "Configuration data for the highlighting of page elements."
+        }
+    ],
+    "commands": [
+        {
+            "name": "getDocument",
+            "returns": [
+                { "name": "root", "$ref": "Node", "description": "Resulting node." }
+            ],
+            "description": "Returns the root DOM node to the caller."
+        },
+        {
+            "name": "requestChildNodes",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get children for." },
+                { "name": "depth", "type": "integer", "optional": true, "description": "The maximum depth at which children should be retrieved, defaults to 1. Use -1 for the entire subtree or provide an integer larger than 0." }
+            ],
+            "description": "Requests that children of the node with given id are returned to the caller in form of <code>setChildNodes</code> events where not only immediate children are retrieved, but all children down to the specified depth."
+        },
+        {
+            "name": "querySelector",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                { "name": "selector", "type": "string", "description": "Selector string." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Query selector result." }
+            ],
+            "description": "Executes <code>querySelector</code> on a given node."
+        },
+        {
+            "name": "querySelectorAll",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                { "name": "selector", "type": "string", "description": "Selector string." }
+            ],
+            "returns": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Query selector result." }
+            ],
+            "description": "Executes <code>querySelectorAll</code> on a given node."
+        },
+        {
+            "name": "setNodeName",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set name for." },
+                { "name": "name", "type": "string", "description": "New node's name." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "New node's id." }
+            ],
+            "description": "Sets node name for a node with given id."
+        },
+        {
+            "name": "setNodeValue",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set value for." },
+                { "name": "value", "type": "string", "description": "New node's value." }
+            ],
+            "description": "Sets node value for a node with given id."
+        },
+        {
+            "name": "removeNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to remove." }
+            ],
+            "description": "Removes node with given id."
+        },
+        {
+            "name": "setAttributeValue",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attribute for." },
+                { "name": "name", "type": "string", "description": "Attribute name." },
+                { "name": "value", "type": "string", "description": "Attribute value." }
+            ],
+            "description": "Sets attribute for an element with given id."
+        },
+        {
+            "name": "setAttributesAsText",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attributes for." },
+                { "name": "text", "type": "string", "description": "Text with a number of attributes. Will parse this text using HTML parser." },
+                { "name": "name", "type": "string", "optional": true, "description": "Attribute name to replace with new attributes derived from text in case text parsed successfully." }
+            ],
+            "description": "Sets attributes on element with given id. This method is useful when user edits some existing attribute value and types in several attribute name/value pairs."
+        },
+        {
+            "name": "removeAttribute",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to remove attribute from." },
+                { "name": "name", "type": "string", "description": "Name of the attribute to remove." }
+            ],
+            "description": "Removes attribute with given name from an element with given id."
+        },
+        {
+            "name": "getEventListenersForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get listeners for." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name for handler value. Handler value is not returned without this parameter specified." }
+            ],
+            "returns": [
+                { "name": "listeners", "type": "array", "items": { "$ref": "EventListener"}, "description": "Array of relevant listeners." }
+            ],
+            "description": "Returns event listeners relevant to the node."
+        },
+        {
+            "name": "getAccessibilityPropertiesForNode",
+            "description": "Returns a dictionary of accessibility properties for the node.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for which to get accessibility properties." }
+            ],
+            "returns": [
+                { "name": "properties", "$ref": "AccessibilityProperties", "description": "Dictionary of relevant accessibility properties." }
+            ]
+        },
+        {
+            "name": "getOuterHTML",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get markup for." }
+            ],
+            "returns": [
+                { "name": "outerHTML", "type": "string", "description": "Outer HTML markup." }
+            ],
+            "description": "Returns node's HTML markup."
+        },
+        {
+            "name": "setOuterHTML",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set markup for." },
+                { "name": "outerHTML", "type": "string", "description": "Outer HTML markup to set." }
+            ],
+            "description": "Sets node HTML markup, returns new node id."
+        },
+        {
+            "name": "performSearch",
+            "parameters": [
+                { "name": "query", "type": "string", "description": "Plain text or query selector or XPath search query." },
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Ids of nodes to use as starting points for the search." }
+            ],
+            "returns": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                { "name": "resultCount", "type": "integer", "description": "Number of search results." }
+            ],
+            "description": "Searches for a given string in the DOM tree. Use <code>getSearchResults</code> to access search results or <code>cancelSearch</code> to end this search session."
+        },
+        {
+            "name": "getSearchResults",
+            "parameters": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                { "name": "fromIndex", "type": "integer", "description": "Start index of the search result to be returned." },
+                { "name": "toIndex", "type": "integer", "description": "End index of the search result to be returned." }
+            ],
+            "returns": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the search result nodes." }
+            ],
+            "description": "Returns search results from given <code>fromIndex</code> to given <code>toIndex</code> from the sarch with the given identifier."
+        },
+        {
+            "name": "discardSearchResults",
+            "parameters": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." }
+            ],
+            "description": "Discards search results from the session with the given id. <code>getSearchResults</code> should no longer be called for that search."
+        },
+        {
+            "name": "requestNode",
+            "parameters": [
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "description": "JavaScript object id to convert into node." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Node id for given object." }
+            ],
+            "description": "Requests that the node is sent to the caller given the JavaScript node object reference. All nodes that form the path from the node to the root are also sent to the client as a series of <code>setChildNodes</code> notifications."
+        },
+        {
+            "name": "setInspectModeEnabled",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "True to enable inspection mode, false to disable it." },
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "optional": true, "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>." }
+            ],
+            "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspect' command upon element selection."
+        },
+        {
+            "name": "highlightRect",
+            "parameters": [
+                { "name": "x", "type": "integer", "description": "X coordinate" },
+                { "name": "y", "type": "integer", "description": "Y coordinate" },
+                { "name": "width", "type": "integer", "description": "Rectangle width" },
+                { "name": "height", "type": "integer", "description": "Rectangle height" },
+                { "name": "color", "$ref": "RGBAColor", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                { "name": "outlineColor", "$ref": "RGBAColor", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+            ],
+            "description": "Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport."
+        },
+        {
+            "name": "highlightQuad",
+            "parameters": [
+                { "name": "quad", "$ref": "Quad", "description": "Quad to highlight" },
+                { "name": "color", "$ref": "RGBAColor", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                { "name": "outlineColor", "$ref": "RGBAColor", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+            ],
+            "description": "Highlights given quad. Coordinates are absolute with respect to the main frame viewport."
+        },
+        {
+            "name": "highlightSelector",
+            "parameters": [
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
+                { "name": "selectorString", "type": "string", "description": "A CSS selector for finding matching nodes to highlight." },
+                { "name": "frameId", "type": "string", "optional": true, "description": "Identifier of the frame which will be searched using the selector.  If not provided, the main frame will be used." }
+            ],
+            "description": "Highlights all DOM nodes that match a given selector. A string containing a CSS selector must be specified."
+        },
+        {
+            "name": "highlightNode",
+            "parameters": [
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
+                { "name": "nodeId", "$ref": "NodeId", "optional": true, "description": "Identifier of the node to highlight." },
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "optional": true, "description": "JavaScript object id of the node to be highlighted." }
+            ],
+            "description": "Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified."
+        },
+        {
+            "name": "hideHighlight",
+            "description": "Hides DOM node highlight."
+        },
+        {
+            "name": "highlightFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame to highlight." },
+                { "name": "contentColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                { "name": "contentOutlineColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight outline color (default: transparent)." }
+            ],
+            "description": "Highlights owner element of the frame with given id."
+        },
+        {
+            "name": "pushNodeByPathToFrontend",
+            "parameters": [
+                { "name": "path", "type": "string", "description": "Path to node in the proprietary format." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for given path." }
+            ],
+            "description": "Requests that the node is sent to the caller given its path. // FIXME, use XPath"
+        },
+        {
+            "name": "pushNodeByBackendIdToFrontend",
+            "parameters": [
+                { "name": "backendNodeId", "$ref": "BackendNodeId", "description": "The backend node id of the node." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "The pushed node's id." }
+            ],
+            "description": "Requests that the node is sent to the caller given its backend node id."
+        },
+        {
+            "name": "releaseBackendNodeIds",
+            "parameters": [
+                { "name": "nodeGroup", "type": "string", "description": "The backend node ids group name." }
+            ],
+            "description": "Requests that group of <code>BackendNodeIds</code> is released."
+        },
+        {
+            "name": "resolveNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to resolve." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." }
+            ],
+            "returns": [
+                { "name": "object", "$ref": "Runtime.RemoteObject", "description": "JavaScript object wrapper for given node." }
+            ],
+            "description": "Resolves JavaScript node object for given node id."
+        },
+        {
+            "name": "getAttributes",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to retrieve attibutes for." }
+            ],
+            "returns": [
+                { "name": "attributes", "type": "array", "items": { "type": "string" }, "description": "An interleaved array of node attribute names and values." }
+            ],
+            "description": "Returns attributes for the specified node."
+        },
+        {
+            "name": "moveTo",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to drop." },
+                { "name": "targetNodeId", "$ref": "NodeId", "description": "Id of the element to drop into." },
+                { "name": "insertBeforeNodeId", "$ref": "NodeId", "optional": true, "description": "Drop node before given one." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "New id of the moved node." }
+            ],
+            "description": "Moves node into the new container, places it before the given anchor."
+        },
+        {
+            "name": "undo",
+            "description": "Undoes the last performed action."
+        },
+        {
+            "name": "redo",
+            "description": "Re-does the last undone action."
+        },
+        {
+            "name": "markUndoableState",
+            "description": "Marks last undoable state."
+        },
+        {
+            "name": "focus",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to focus." }
+            ],
+            "description": "Focuses the given element."
+        }
+    ],
+    "events": [
+        {
+            "name": "documentUpdated",
+            "description": "Fired when <code>Document</code> has been totally updated. Node ids are no longer valid."
+        },
+        {
+            "name": "setChildNodes",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Parent node id to populate with children." },
+                { "name": "nodes", "type": "array", "items": { "$ref": "Node"}, "description": "Child nodes array." }
+            ],
+            "description": "Fired when backend wants to provide client with the missing DOM structure. This happens upon most of the calls requesting node ids."
+        },
+        {
+            "name": "attributeModified",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "name", "type": "string", "description": "Attribute name." },
+                { "name": "value", "type": "string", "description": "Attribute value." }
+            ],
+            "description": "Fired when <code>Element</code>'s attribute is modified."
+        },
+        {
+            "name": "attributeRemoved",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "name", "type": "string", "description": "A ttribute name." }
+            ],
+            "description": "Fired when <code>Element</code>'s attribute is removed."
+        },
+        {
+            "name": "inlineStyleInvalidated",
+            "parameters": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the nodes for which the inline styles have been invalidated." }
+            ],
+            "description": "Fired when <code>Element</code>'s inline style is modified via a CSS property modification."
+        },
+        {
+            "name": "characterDataModified",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "characterData", "type": "string", "description": "New text value." }
+            ],
+            "description": "Mirrors <code>DOMCharacterDataModified</code> event."
+        },
+        {
+            "name": "childNodeCountUpdated",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "childNodeCount", "type": "integer", "description": "New node count." }
+            ],
+            "description": "Fired when <code>Container</code>'s child node count has changed."
+        },
+        {
+            "name": "childNodeInserted",
+            "parameters": [
+                { "name": "parentNodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "previousNodeId", "$ref": "NodeId", "description": "If of the previous siblint." },
+                { "name": "node", "$ref": "Node", "description": "Inserted node data." }
+            ],
+            "description": "Mirrors <code>DOMNodeInserted</code> event."
+        },
+        {
+            "name": "childNodeRemoved",
+            "parameters": [
+                { "name": "parentNodeId", "$ref": "NodeId", "description": "Parent id." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has been removed." }
+            ],
+            "description": "Mirrors <code>DOMNodeRemoved</code> event."
+        },
+        {
+            "name": "shadowRootPushed",
+            "parameters": [
+                { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                { "name": "root", "$ref": "Node", "description": "Shadow root." }
+            ],
+            "description": "Called when shadow root is pushed into the element."
+        },
+        {
+            "name": "shadowRootPopped",
+            "parameters": [
+                { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                { "name": "rootId", "$ref": "NodeId", "description": "Shadow root id." }
+            ],
+            "description": "Called when shadow root is popped from the element."
+        }
+    ]
+}
+,
+{
+    "domain": "DOMDebugger",
+    "description": "DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DOMBreakpointType",
+            "type": "string",
+            "enum": ["subtree-modified", "attribute-modified", "node-removed"],
+            "description": "DOM breakpoint type."
+        }
+    ],
+    "commands": [
+        {
+            "name": "setDOMBreakpoint",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to set breakpoint on." },
+                { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the operation to stop upon." }
+            ],
+            "description": "Sets breakpoint on particular operation with DOM."
+        },
+        {
+            "name": "removeDOMBreakpoint",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to remove breakpoint from." },
+                { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the breakpoint to remove." }
+            ],
+            "description": "Removes DOM breakpoint that was set using <code>setDOMBreakpoint</code>."
+        },
+        {
+            "name": "setEventListenerBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "DOM Event name to stop on (any DOM event will do)." }
+            ],
+            "description": "Sets breakpoint on particular DOM event."
+        },
+        {
+            "name": "removeEventListenerBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Event name." }
+            ],
+            "description": "Removes breakpoint on particular DOM event."
+        },
+        {
+            "name": "setInstrumentationBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+            ],
+            "description": "Sets breakpoint on particular native event."
+        },
+        {
+            "name": "removeInstrumentationBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+            ],
+            "description": "Sets breakpoint on particular native event."
+        },
+        {
+            "name": "setXHRBreakpoint",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "Resource URL substring. All XHRs having this substring in the URL will get stopped upon." }
+            ],
+            "description": "Sets breakpoint on XMLHttpRequest."
+        },
+        {
+            "name": "removeXHRBreakpoint",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "Resource URL substring." }
+            ],
+            "description": "Removes breakpoint from XMLHttpRequest."
+        }
+    ]
+}
+,
+{
+    "domain": "DOMStorage",
+    "description": "Query and modify DOM storage.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "StorageId",
+            "type": "object",
+            "description": "DOM Storage identifier.",
+            "properties": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin for the storage." },
+                { "name": "isLocalStorage", "type": "boolean", "description": "Whether the storage is local storage (not session storage)." }
+            ]
+        },
+        {
+            "id": "Item",
+            "type": "array",
+            "description": "DOM Storage item.",
+            "items": { "type": "string" }
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables storage tracking, storage events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables storage tracking, prevents storage events from being sent to the client."
+        },
+        {
+            "name": "getDOMStorageItems",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" }
+            ],
+            "returns": [
+                { "name": "entries", "type": "array", "items": { "$ref": "Item" } }
+            ]
+        },
+        {
+            "name": "setDOMStorageItem",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "value", "type": "string" }
+            ]
+        },
+        {
+            "name": "removeDOMStorageItem",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "domStorageItemsCleared",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" }
+            ]
+        },
+        {
+            "name": "domStorageItemRemoved",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" }
+            ]
+        },
+        {
+            "name": "domStorageItemAdded",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "newValue", "type": "string" }
+            ]
+        },
+        {
+            "name": "domStorageItemUpdated",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "oldValue", "type": "string" },
+                { "name": "newValue", "type": "string" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Database",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DatabaseId",
+            "type": "string",
+            "description": "Unique identifier of Database object."
+        },
+        {
+            "id": "Database",
+            "type": "object",
+            "description": "Database object.",
+            "properties": [
+                { "name": "id", "$ref": "DatabaseId", "description": "Database ID." },
+                { "name": "domain", "type": "string", "description": "Database domain." },
+                { "name": "name", "type": "string", "description": "Database name." },
+                { "name": "version", "type": "string", "description": "Database version." }
+            ]
+        },
+        {
+            "id": "Error",
+            "type": "object",
+            "description": "Database error.",
+            "properties": [
+                { "name": "message", "type": "string", "description": "Error message." },
+                { "name": "code", "type": "integer", "description": "Error code." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables database tracking, database events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables database tracking, prevents database events from being sent to the client."
+        },
+        {
+            "name": "getDatabaseTableNames",
+            "parameters": [
+                { "name": "databaseId", "$ref": "DatabaseId" }
+            ],
+            "returns": [
+                { "name": "tableNames", "type": "array", "items": { "type": "string" } }
+            ]
+        },
+        {
+            "name": "executeSQL",
+            "async": true,
+            "parameters": [
+                { "name": "databaseId", "$ref": "DatabaseId" },
+                { "name": "query", "type": "string" }
+            ],
+            "returns": [
+                { "name": "columnNames", "type": "array", "optional": true, "items": { "type": "string" } },
+                { "name": "values", "type": "array", "optional": true, "items": { "type": "any" }},
+                { "name": "sqlError", "$ref": "Error", "optional": true }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "addDatabase",
+            "parameters": [
+                { "name": "database", "$ref": "Database" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Debugger",
+    "description": "Debugger domain exposes JavaScript debugging capabilities. It allows setting and removing breakpoints, stepping through execution, exploring stack traces, etc.",
+    "types": [
+        {
+            "id": "BreakpointId",
+            "type": "string",
+            "description": "Breakpoint identifier."
+        },
+        {
+            "id": "BreakpointActionIdentifier",
+            "type": "integer",
+            "description": "Breakpoint action identifier."
+        },
+        {
+            "id": "ScriptId",
+            "type": "string",
+            "description": "Unique script identifier."
+        },
+        {
+            "id": "CallFrameId",
+            "type": "string",
+            "description": "Call frame identifier."
+        },
+        {
+            "id": "Location",
+            "type": "object",
+            "properties": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Script identifier as reported in the <code>Debugger.scriptParsed</code>." },
+                { "name": "lineNumber", "type": "integer", "description": "Line number in the script." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Column number in the script." }
+            ],
+            "description": "Location in the source code."
+        },
+        {
+            "id": "BreakpointAction",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["log", "evaluate", "sound", "probe"], "description": "Different kinds of breakpoint actions." },
+                { "name": "data", "type": "string", "optional": true, "description": "Data associated with this breakpoint type (e.g. for type \"eval\" this is the JavaScript string to evalulate)." },
+                { "name": "id", "$ref": "BreakpointActionIdentifier", "optional": true, "description": "A frontend-assigned identifier for this breakpoint action." }
+            ],
+            "description": "Action to perform when a breakpoint is triggered."
+        },
+        {
+            "id": "BreakpointOptions",
+            "type": "object",
+            "properties": [
+                { "name": "condition", "type": "string", "optional": true, "description": "Expression to use as a breakpoint condition. When specified, debugger will only stop on the breakpoint if this expression evaluates to true." },
+                { "name": "actions", "type": "array", "optional": true, "items": { "$ref": "BreakpointAction" }, "description": "Actions to perform automatically when the breakpoint is triggered." },
+                { "name": "autoContinue", "type": "boolean", "optional": true, "description": "Automatically continue after hitting this breakpoint and running actions." }
+            ],
+            "description": "Extra options that modify breakpoint behavior."
+        },
+        {
+            "id": "FunctionDetails",
+            "type": "object",
+            "properties": [
+                { "name": "location", "$ref": "Location", "description": "Location of the function." },
+                { "name": "name", "type": "string", "optional": true, "description": "Name of the function. Not present for anonymous functions." },
+                { "name": "displayName", "type": "string", "optional": true, "description": "Display name of the function(specified in 'displayName' property on the function object)." },
+                { "name": "inferredName", "type": "string", "optional": true, "description": "Name of the function inferred from its initial assignment." },
+                { "name": "scopeChain", "type": "array", "optional": true, "items": { "$ref": "Scope" }, "description": "Scope chain for this closure." }
+            ],
+            "description": "Information about the function."
+        },
+        {
+            "id": "CallFrame",
+            "type": "object",
+            "properties": [
+                { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier. This identifier is only valid while the virtual machine is paused." },
+                { "name": "functionName", "type": "string", "description": "Name of the JavaScript function called on this call frame." },
+                { "name": "location", "$ref": "Location", "description": "Location in the source code." },
+                { "name": "scopeChain", "type": "array", "items": { "$ref": "Scope" }, "description": "Scope chain for this call frame." },
+                { "name": "this", "$ref": "Runtime.RemoteObject", "description": "<code>this</code> object for this call frame." }
+            ],
+            "description": "JavaScript call frame. Array of call frames form the call stack."
+        },
+        {
+            "id": "Scope",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["global", "local", "with", "closure", "catch", "functionName"], "description": "Scope type." },
+                { "name": "object", "$ref": "Runtime.RemoteObject", "description": "Object representing the scope. For <code>global</code> and <code>with</code> scopes it represents the actual object; for the rest of the scopes, it is artificial transient object enumerating scope variables as its properties." }
+            ],
+            "description": "Scope description."
+        },
+        {
+            "id": "ProbeSample",
+            "description": "A sample collected by evaluating a probe breakpoint action.",
+            "type": "object",
+            "properties": [
+                { "name": "probeId", "$ref": "BreakpointActionIdentifier", "description": "Identifier of the probe breakpoint action that created the sample." },
+                { "name": "sampleId", "type": "integer", "description": "Unique identifier for this sample." },
+                { "name": "batchId", "type": "integer", "description": "A batch identifier which is the same for all samples taken at the same breakpoint hit." },
+                { "name": "timestamp", "type": "number", "description": "Timestamp of when the sample was taken." },
+                { "name": "payload", "$ref": "Runtime.RemoteObject", "description": "Contents of the sample." }
+            ]
+        },
+        {
+            "id": "AssertPauseReason",
+            "description": "The pause reason auxiliary data when paused because of an assertion.",
+            "type": "object",
+            "properties": [
+                { "name": "message", "type": "string", "optional": true, "description": "The console.assert message string if provided." }
+            ]
+        },
+        {
+            "id": "BreakpointPauseReason",
+            "description": "The pause reason auxiliary data when paused because of hitting a breakpoint.",
+            "type": "object",
+            "properties": [
+                { "name": "breakpointId", "type": "string", "description": "The identifier of the breakpoint causing the pause." }
+            ]
+        },
+        {
+            "id": "CSPViolationPauseReason",
+            "description": "The pause reason auxiliary data when paused because of a Content Security Policy directive.",
+            "type": "object",
+            "properties": [
+                { "name": "directive", "type": "string", "description": "The CSP directive that blocked script execution." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables debugger for the given page. Clients should not assume that the debugging has been enabled until the result for this command is received."
+        },
+        {
+            "name": "disable",
+            "description": "Disables debugger for given page."
+        },
+        {
+            "name": "setBreakpointsActive",
+            "parameters": [
+                { "name": "active", "type": "boolean", "description": "New value for breakpoints active state." }
+            ],
+            "description": "Activates / deactivates all breakpoints on the page."
+        },
+        {
+            "name": "setBreakpointByUrl",
+            "parameters": [
+                { "name": "lineNumber", "type": "integer", "description": "Line number to set breakpoint at." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL of the resources to set breakpoint on." },
+                { "name": "urlRegex", "type": "string", "optional": true, "description": "Regex pattern for the URLs of the resources to set breakpoints on. Either <code>url</code> or <code>urlRegex</code> must be specified." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Offset in the line to set breakpoint at." },
+                { "name": "options", "$ref": "BreakpointOptions", "optional": true, "description": "Options to apply to this breakpoint to modify its behavior." }
+            ],
+            "returns": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                { "name": "locations", "type": "array", "items": { "$ref": "Location"}, "description": "List of the locations this breakpoint resolved into upon addition." }
+            ],
+            "description": "Sets JavaScript breakpoint at given location specified either by URL or URL regex. Once this command is issued, all existing parsed scripts will have breakpoints resolved and returned in <code>locations</code> property. Further matching script parsing will result in subsequent <code>breakpointResolved</code> events issued. This logical breakpoint will survive page reloads."
+        },
+        {
+            "name": "setBreakpoint",
+            "parameters": [
+                { "name": "location", "$ref": "Location", "description": "Location to set breakpoint in." },
+                { "name": "options", "$ref": "BreakpointOptions", "optional": true, "description": "Options to apply to this breakpoint to modify its behavior." }
+            ],
+            "returns": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                { "name": "actualLocation", "$ref": "Location", "description": "Location this breakpoint resolved into." }
+            ],
+            "description": "Sets JavaScript breakpoint at a given location."
+        },
+        {
+            "name": "removeBreakpoint",
+            "parameters": [
+                { "name": "breakpointId", "$ref": "BreakpointId" }
+            ],
+            "description": "Removes JavaScript breakpoint."
+        },
+        {
+            "name": "continueToLocation",
+            "parameters": [
+                { "name": "location", "$ref": "Location", "description": "Location to continue to." }
+            ],
+            "description": "Continues execution until specific location is reached."
+        },
+        {
+            "name": "stepOver",
+            "description": "Steps over the statement."
+        },
+        {
+            "name": "stepInto",
+            "description": "Steps into the function call."
+        },
+        {
+            "name": "stepOut",
+            "description": "Steps out of the function call."
+        },
+        {
+            "name": "pause",
+            "description": "Stops on the next JavaScript statement."
+        },
+        {
+            "name": "resume",
+            "description": "Resumes JavaScript execution."
+        },
+        {
+            "name": "searchInContent",
+            "description": "Searches for given string in script content.",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to search in." },
+                { "name": "query", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "GenericTypes.SearchMatch" }, "description": "List of search matches." }
+            ]
+        },
+        {
+            "name": "getScriptSource",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to get source for." }
+            ],
+            "returns": [
+                { "name": "scriptSource", "type": "string", "description": "Script source." }
+            ],
+            "description": "Returns source for the script with given id."
+        },
+        {
+            "name": "getFunctionDetails",
+            "parameters": [
+                { "name": "functionId", "$ref": "Runtime.RemoteObjectId", "description": "Id of the function to get location for." }
+            ],
+            "returns": [
+                { "name": "details", "$ref": "FunctionDetails", "description": "Information about the function." }
+            ],
+            "description": "Returns detailed information on given function."
+        },
+        {
+            "name": "setPauseOnExceptions",
+            "parameters": [
+                { "name": "state", "type": "string", "enum": ["none", "uncaught", "all"], "description": "Pause on exceptions mode." }
+            ],
+            "description": "Defines pause on exceptions state. Can be set to stop on all exceptions, uncaught exceptions or no exceptions. Initial pause on exceptions state is <code>none</code>."
+        },
+        {
+            "name": "evaluateOnCallFrame",
+            "parameters": [
+                { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier to evaluate on." },
+                { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "String object group name to put result into (allows rapid releasing resulting object handles using <code>releaseObjectGroup</code>)." },
+                { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Specifies whether command line API should be available to the evaluated expression, defaults to false." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." },
+                { "name": "saveResult", "type": "boolean", "optional": true, "description": "Whether the resulting value should be considered for saving in the $n history." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "Runtime.RemoteObject", "description": "Object wrapper for the evaluation result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Evaluates expression on a given call frame."
+        },
+        {
+            "name": "setOverlayMessage",
+            "parameters": [
+                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
+            ],
+            "description": "Sets overlay message."
+        }
+    ],
+    "events": [
+        {
+            "name": "globalObjectCleared",
+            "description": "Called when global has been cleared and debugger client should reset its state. Happens upon navigation or reload."
+        },
+        {
+            "name": "scriptParsed",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Identifier of the script parsed." },
+                { "name": "url", "type": "string", "description": "URL or name of the script parsed (if any)." },
+                { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource with given URL (for script tags)." },
+                { "name": "startColumn", "type": "integer", "description": "Column offset of the script within the resource with given URL." },
+                { "name": "endLine", "type": "integer", "description": "Last line of the script." },
+                { "name": "endColumn", "type": "integer", "description": "Length of the last line of the script." },
+                { "name": "isContentScript", "type": "boolean", "optional": true, "description": "Determines whether this script is a user extension script." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with script (if any)." },
+                { "name": "hasSourceURL", "type": "boolean", "optional": true, "description": "True, if this script has sourceURL." }
+            ],
+            "description": "Fired when virtual machine parses script. This event is also fired for all known and uncollected scripts upon enabling debugger."
+        },
+        {
+            "name": "scriptFailedToParse",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "URL of the script that failed to parse." },
+                { "name": "scriptSource", "type": "string", "description": "Source text of the script that failed to parse." },
+                { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource." },
+                { "name": "errorLine", "type": "integer", "description": "Line with error." },
+                { "name": "errorMessage", "type": "string", "description": "Parse error message." }
+            ],
+            "description": "Fired when virtual machine fails to parse the script."
+        },
+        {
+            "name": "breakpointResolved",
+            "parameters": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Breakpoint unique identifier." },
+                { "name": "location", "$ref": "Location", "description": "Actual breakpoint location." }
+            ],
+            "description": "Fired when breakpoint is resolved to an actual script and location."
+        },
+        {
+            "name": "paused",
+            "parameters": [
+                { "name": "callFrames", "type": "array", "items": { "$ref": "CallFrame" }, "description": "Call stack the virtual machine stopped on." },
+                { "name": "reason", "type": "string", "enum": ["XHR", "DOM", "EventListener", "exception", "assert", "CSPViolation", "DebuggerStatement", "Breakpoint", "PauseOnNextStatement", "other"], "description": "Pause reason." },
+                { "name": "data", "type": "object", "optional": true, "description": "Object containing break-specific auxiliary properties." }
+            ],
+            "description": "Fired when the virtual machine stopped on breakpoint or exception or any other stop criteria."
+        },
+        {
+            "name": "resumed",
+            "description": "Fired when the virtual machine resumed execution."
+        },
+        {
+            "name": "didSampleProbe",
+            "description": "Fires when a new probe sample is collected.",
+            "parameters": [
+                { "name": "sample", "$ref": "ProbeSample", "description": "A collected probe sample." }
+            ]
+        },
+        {
+            "name": "playBreakpointActionSound",
+            "description": "Fired when a \"sound\" breakpoint action is triggered on a breakpoint.",
+            "parameters": [
+                { "name": "breakpointActionId", "$ref": "BreakpointActionIdentifier", "description": "Breakpoint action identifier." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "GenericTypes",
+    "description": "Exposes generic types to be used by any domain.",
+    "types": [
+        {
+            "id": "SearchMatch",
+            "type": "object",
+            "description": "Search match in a resource.",
+            "properties": [
+                { "name": "lineNumber", "type": "number", "description": "Line number in resource content." },
+                { "name": "lineContent", "type": "string", "description": "Line with match content." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "IndexedDB",
+    "featureGuard": "ENABLE(INDEXED_DATABASE)",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DatabaseWithObjectStores",
+            "type": "object",
+            "description": "Database with an array of object stores.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Database name." },
+                { "name": "version", "type": "number", "description": "Database version." },
+                { "name": "objectStores", "type": "array", "items": { "$ref": "ObjectStore" }, "description": "Object stores in this database." }
+            ]
+        },
+        {
+            "id": "ObjectStore",
+            "type": "object",
+            "description": "Object store.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Object store name." },
+                { "name": "keyPath", "$ref": "KeyPath", "description": "Object store key path." },
+                { "name": "autoIncrement", "type": "boolean", "description": "If true, object store has auto increment flag set." },
+                { "name": "indexes", "type": "array", "items": { "$ref": "ObjectStoreIndex" }, "description": "Indexes in this object store." }
+            ]
+        },
+        {
+            "id": "ObjectStoreIndex",
+            "type": "object",
+            "description": "Object store index.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Index name." },
+                { "name": "keyPath", "$ref": "KeyPath", "description": "Index key path." },
+                { "name": "unique", "type": "boolean", "description": "If true, index is unique." },
+                { "name": "multiEntry", "type": "boolean", "description": "If true, index allows multiple entries for a key." }
+            ]
+        },
+        {
+            "id": "Key",
+            "type": "object",
+            "description": "Key.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["number", "string", "date", "array"], "description": "Key type." },
+                { "name": "number", "type": "number", "optional": true, "description": "Number value." },
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "date", "type": "number", "optional": true, "description": "Date value." },
+                { "name": "array", "type": "array", "optional": true, "items": { "$ref": "Key" }, "description": "Array value." }
+            ]
+        },
+        {
+            "id": "KeyRange",
+            "type": "object",
+            "description": "Key range.",
+            "properties": [
+                { "name": "lower", "$ref": "Key", "optional": true, "description": "Lower bound." },
+                { "name": "upper", "$ref": "Key", "optional": true, "description": "Upper bound." },
+                { "name": "lowerOpen", "type": "boolean", "description": "If true lower bound is open." },
+                { "name": "upperOpen", "type": "boolean", "description": "If true upper bound is open." }
+            ]
+        },
+        {
+            "id": "DataEntry",
+            "type": "object",
+            "description": "Data entry.",
+            "properties": [
+                { "name": "key", "$ref": "Runtime.RemoteObject", "description": "Key." },
+                { "name": "primaryKey", "$ref": "Runtime.RemoteObject", "description": "Primary key." },
+                { "name": "value", "$ref": "Runtime.RemoteObject", "description": "Value." }
+            ]
+        },
+        {
+            "id": "KeyPath",
+            "type": "object",
+            "description": "Key path.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["null", "string", "array"], "description": "Key path type." },
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "array", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Array value." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables events from backend."
+        },
+        {
+            "name": "disable",
+            "description": "Disables events from backend."
+        },
+        {
+            "name": "requestDatabaseNames",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." }
+            ],
+            "returns": [
+                { "name": "databaseNames", "type": "array", "items": { "type": "string" }, "description": "Database names for origin." }
+            ],
+            "description": "Requests database names for given security origin."
+        },
+        {
+            "name": "requestDatabase",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." }
+            ],
+            "returns": [
+                { "name": "databaseWithObjectStores", "$ref": "DatabaseWithObjectStores", "description": "Database with an array of object stores." }
+            ],
+            "description": "Requests database with given name in given frame."
+        },
+        {
+            "name": "requestData",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." },
+                { "name": "objectStoreName", "type": "string", "description": "Object store name." },
+                { "name": "indexName", "type": "string", "description": "Index name, empty string for object store data requests." },
+                { "name": "skipCount", "type": "integer", "description": "Number of records to skip." },
+                { "name": "pageSize", "type": "integer", "description": "Number of records to fetch." },
+                { "name": "keyRange", "$ref": "KeyRange", "optional": true, "description": "Key range." }
+            ],
+            "returns": [
+                { "name": "objectStoreDataEntries", "type": "array", "items": { "$ref": "DataEntry" }, "description": "Array of object store data entries." },
+                { "name": "hasMore", "type": "boolean", "description": "If true, there are more entries to fetch in the given range." }
+            ],
+            "description": "Requests data from object store or index."
+        },
+        {
+            "name": "clearObjectStore",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." },
+                { "name": "objectStoreName", "type": "string", "description": "Object store name." }
+            ],
+            "returns": [
+            ],
+            "description": "Clears all entries from an object store."
+        }
+    ]
+}
+,
+{
+    "domain": "Inspector",
+    "types": [],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables inspector domain notifications."
+        },
+        {
+            "name": "disable",
+            "description": "Disables inspector domain notifications."
+        },
+        {
+            "name": "initialized",
+            "description": "Sent by the frontend after all initialization messages have been sent."
+        }
+    ],
+    "events": [
+        {
+            "name": "evaluateForTestInFrontend",
+            "parameters": [
+                { "name": "script", "type": "string" }
+            ]
+        },
+        {
+            "name": "inspect",
+            "parameters": [
+                { "name": "object", "$ref": "Runtime.RemoteObject" },
+                { "name": "hints", "type": "object" }
+            ]
+        },
+        {
+            "name": "detached",
+            "description": "Fired when remote debugging connection is about to be terminated. Contains detach reason.",
+            "parameters": [
+                { "name": "reason", "type": "string", "description": "The reason why connection has been terminated." }
+            ]
+        },
+        {
+            "name": "activateExtraDomains",
+            "description": "Fired when the backend has alternate domains that need to be activated.",
+            "parameters": [
+                { "name": "domains", "type": "array", "items": { "type": "string" }, "description": "Domain names that need activation" }
+            ]
+        },
+        {
+            "name": "targetCrashed",
+            "description": "Fired when debugging target has crashed"
+        }
+    ]
+}
+,
+{
+    "domain": "LayerTree",
+    "availability": "web",
+    "types": [
+        {
+            "id": "LayerId",
+            "type": "string",
+            "description": "Unique RenderLayer identifier."
+        },
+        {
+            "id": "PseudoElementId",
+            "type": "string",
+            "description": "Unique PseudoElement identifier."
+        },
+        {
+            "id": "IntRect",
+            "type": "object",
+            "description": "A rectangle.",
+            "properties": [
+                { "name": "x", "type": "integer", "description": "The x position." },
+                { "name": "y", "type": "integer", "description": "The y position." },
+                { "name": "width", "type": "integer", "description": "The width metric." },
+                { "name": "height", "type": "integer", "description": "The height metric." }
+            ]
+        },
+        {
+            "id": "Layer",
+            "type": "object",
+            "description": "Information about a compositing layer.",
+            "properties": [
+                { "name": "layerId", "$ref": "LayerId", "description": "The unique id for this layer." },
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The id for the node associated with this layer." },
+                { "name": "bounds", "$ref": "IntRect", "description": "Bounds of the layer in absolute page coordinates." },
+                { "name": "paintCount", "type": "integer", "description": "Indicates how many time this layer has painted." },
+                { "name": "memory", "type": "integer", "description": "Estimated memory used by this layer." },
+                { "name": "compositedBounds", "$ref": "IntRect", "description": "The bounds of the composited layer." },
+                { "name": "isInShadowTree", "type": "boolean", "optional": true, "description": "Indicates whether this layer is associated with an element hosted in a shadow tree." },
+                { "name": "isReflection", "type": "boolean", "optional": true, "description": "Indicates whether this layer was used to provide a reflection for the element." },
+                { "name": "isGeneratedContent", "type": "boolean", "optional": true, "description": "Indicates whether the layer is attached to a pseudo element that is CSS generated content." },
+                { "name": "isAnonymous", "type": "boolean", "optional": true, "description": "Indicates whether the layer was created for a CSS anonymous block or box." },
+                { "name": "pseudoElementId", "$ref": "PseudoElementId", "optional": true, "description": "The id for the pseudo element associated with this layer." },
+                { "name": "pseudoElement", "type": "string", "optional": true, "description": "The name of the CSS pseudo-element that prompted the layer to be generated." }
+            ]
+        },
+        {
+            "id": "CompositingReasons",
+            "type": "object",
+            "description": "An object containing the reasons why the layer was composited as properties.",
+            "properties": [
+                { "name": "transform3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a CSS 3D transform." },
+                { "name": "video", "type": "boolean", "optional": true, "description": "Composition due to association with a <video> element." },
+                { "name": "canvas", "type": "boolean", "optional": true, "description": "Composition due to the element being a <canvas> element." },
+                { "name": "plugin", "type": "boolean", "optional": true, "description": "Composition due to association with a plugin." },
+                { "name": "iFrame", "type": "boolean", "optional": true, "description": "Composition due to association with an <iframe> element." },
+                { "name": "backfaceVisibilityHidden", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"backface-visibility: hidden\" style." },
+                { "name": "clipsCompositingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element clipping compositing descendants." },
+                { "name": "animation", "type": "boolean", "optional": true, "description": "Composition due to association with an animated element." },
+                { "name": "filters", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied." },
+                { "name": "positionFixed", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: fixed\" style." },
+                { "name": "positionSticky", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: sticky\" style." },
+                { "name": "overflowScrollingTouch", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"overflow-scrolling: touch\" style." },
+                { "name": "stacking", "type": "boolean", "optional": true, "description": "Composition due to association with an element establishing a stacking context." },
+                { "name": "overlap", "type": "boolean", "optional": true, "description": "Composition due to association with an element overlapping other composited elements." },
+                { "name": "negativeZIndexChildren", "type": "boolean", "optional": true, "description": "Composition due to association with an element with descendants that have a negative z-index." },
+                { "name": "transformWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with composited descendants." },
+                { "name": "opacityWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with opacity applied and composited descendants." },
+                { "name": "maskWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with a masked element and composited descendants." },
+                { "name": "reflectionWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a reflection and composited descendants." },
+                { "name": "filterWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied and composited descendants." },
+                { "name": "blendingWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS blending applied and composited descendants." },
+                { "name": "isolatesCompositedBlendingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element isolating compositing descendants having CSS blending applied." },
+                { "name": "perspective", "type": "boolean", "optional": true, "description": "Composition due to association with an element with perspective applied." },
+                { "name": "preserve3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"transform-style: preserve-3d\" style." },
+                { "name": "root", "type": "boolean", "optional": true, "description": "Composition due to association with the root element." },
+                { "name": "blending", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"blend-mode\" style." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables compositing tree inspection."
+        },
+        {
+            "name": "disable",
+            "description": "Disables compositing tree inspection."
+        },
+        {
+            "name": "layersForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Root of the subtree for which we want to gather layers." }                ],
+            "description": "Returns the layer tree structure of the current page.",
+            "returns": [
+                { "name": "layers", "type": "array", "items": { "$ref": "Layer" }, "description": "Child layers." }
+            ]
+        },
+        {
+            "name": "reasonsForCompositingLayer",
+            "parameters": [
+                { "name": "layerId", "$ref": "LayerId", "description": "The id of the layer for which we want to get the reasons it was composited." }
+            ],
+            "description": "Provides the reasons why the given layer was composited.",
+            "returns": [
+                { "name": "compositingReasons", "$ref": "CompositingReasons", "description": "An object containing the reasons why the layer was composited as properties." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "layerTreeDidChange"
+        }
+    ]
+}
+,
+{
+    "domain": "Network",
+    "description": "Network domain allows tracking network activities of the page. It exposes information about http, file, data and other requests and responses, their headers, bodies, timing, etc.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "LoaderId",
+            "type": "string",
+            "description": "Unique loader identifier."
+        },
+        {
+            "id": "FrameId",
+            "type": "string",
+            "description": "Unique frame identifier."
+        },
+        {
+            "id": "RequestId",
+            "type": "string",
+            "description": "Unique request identifier."
+        },
+        {
+            "id": "Timestamp",
+            "type": "number",
+            "description": "Number of seconds since epoch."
+        },
+        {
+            "id": "Headers",
+            "type": "object",
+            "description": "Request / response headers as keys / values of JSON object."
+        },
+        {
+            "id": "ResourceTiming",
+            "type": "object",
+            "description": "Timing information for the request.",
+            "properties": [
+                { "name": "navigationStart", "type": "number", "description": "Timing's navigationStart is a baseline in seconds, while the other numbers are ticks in milliseconds relatively to this navigationStart." },
+                { "name": "domainLookupStart", "type": "number", "description": "Started DNS address resolve." },
+                { "name": "domainLookupEnd", "type": "number", "description": "Finished DNS address resolve." },
+                { "name": "connectStart", "type": "number", "description": "Started connecting to the remote host." },
+                { "name": "connectEnd", "type": "number", "description": "Connected to the remote host." },
+                { "name": "secureConnectionStart", "type": "number", "description": "Started SSL handshake." },
+                { "name": "requestStart", "type": "number", "description": "Started sending request." },
+                { "name": "responseStart", "type": "number", "description": "Started receiving response headers." }
+            ]
+        },
+        {
+            "id": "Request",
+            "type": "object",
+            "description": "HTTP request data.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Request URL." },
+                { "name": "method", "type": "string", "description": "HTTP request method." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP request headers." },
+                { "name": "postData", "type": "string", "optional": true, "description": "HTTP POST request data." }
+            ]
+        },
+        {
+            "id": "Response",
+            "type": "object",
+            "description": "HTTP response data.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Response URL. This URL can be different from CachedResource.url in case of redirect." },
+                { "name": "status", "type": "number", "description": "HTTP response status code." },
+                { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." },
+                { "name": "headersText", "type": "string", "optional": true, "description": "HTTP response headers text." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                { "name": "requestHeaders", "$ref": "Headers", "optional": true, "description": "Refined HTTP request headers that were actually transmitted over the network." },
+                { "name": "requestHeadersText", "type": "string", "optional": true, "description": "HTTP request headers text." },
+                { "name": "fromDiskCache", "type": "boolean", "optional": true, "description": "Specifies that the request was served from the disk cache." },
+                { "name": "timing", "$ref": "ResourceTiming", "optional": true, "description": "Timing information for the given request." }
+            ]
+        },
+        {
+            "id": "WebSocketRequest",
+            "type": "object",
+            "description": "WebSocket request data.",
+            "properties": [
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+            ]
+        },
+        {
+            "id": "WebSocketResponse",
+            "type": "object",
+            "description": "WebSocket response data.",
+            "properties": [
+                { "name": "status", "type": "number", "description": "HTTP response status code." },
+                { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+            ]
+        },
+        {
+            "id": "WebSocketFrame",
+            "type": "object",
+            "description": "WebSocket frame data.",
+            "properties": [
+                { "name": "opcode", "type": "number", "description": "WebSocket frame opcode." },
+                { "name": "mask", "type": "boolean", "description": "WebSocket frame mask." },
+                { "name": "payloadData", "type": "string", "description": "WebSocket frame payload data." }
+            ]
+        },
+        {
+            "id": "CachedResource",
+            "type": "object",
+            "description": "Information about the cached resource.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL. This is the url of the original network request." },
+                { "name": "type", "$ref": "Page.ResourceType", "description": "Type of this resource." },
+                { "name": "response", "$ref": "Response", "optional": true, "description": "Cached response data." },
+                { "name": "bodySize", "type": "number", "description": "Cached response body size." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "id": "Initiator",
+            "type": "object",
+            "description": "Information about the request initiator.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["parser", "script", "other"], "description": "Type of this initiator." },
+                { "name": "stackTrace", "$ref": "Console.StackTrace", "optional": true, "description": "Initiator JavaScript stack trace, set for Script only." },
+                { "name": "url", "type": "string", "optional": true, "description": "Initiator URL, set for Parser type only." },
+                { "name": "lineNumber", "type": "number", "optional": true, "description": "Initiator line number, set for Parser type only." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables network tracking, network events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables network tracking, prevents network events from being sent to the client."
+        },
+        {
+            "name": "setExtraHTTPHeaders",
+            "description": "Specifies whether to always send extra HTTP headers with the requests from this page.",
+            "parameters": [
+                { "name": "headers", "$ref": "Headers", "description": "Map with extra HTTP headers." }
+            ]
+        },
+        {
+            "name": "getResponseBody",
+            "description": "Returns content served for the given request.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Identifier of the network request to get content for." }
+            ],
+            "returns": [
+                { "name": "body", "type": "string", "description": "Response body." },
+                { "name": "base64Encoded", "type": "boolean", "description": "True, if content was sent as base64." }
+            ]
+        },
+        {
+            "name": "setCacheDisabled",
+            "parameters": [
+                { "name": "cacheDisabled", "type": "boolean", "description": "Cache disabled state." }
+            ],
+            "description": "Toggles ignoring cache for each request. If <code>true</code>, cache will not be used."
+        },
+        {
+            "name": "loadResource",
+            "async": true,
+            "parameters": [
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame to load the resource from." },
+                { "name": "url", "type": "string", "description": "URL of the resource to load." }
+            ],
+            "returns": [
+                { "name": "content", "type": "string", "description": "Resource content." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType." },
+                { "name": "status", "type": "number", "description": "HTTP response status code." }
+            ],
+            "description": "Loads a resource in the context of a frame on the inspected page without cross origin checks."
+        }
+    ],
+    "events": [
+        {
+            "name": "requestWillBeSent",
+            "description": "Fired when page is about to send HTTP request.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                { "name": "request", "$ref": "Request", "description": "Request data." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                { "name": "redirectResponse", "optional": true, "$ref": "Response", "description": "Redirect response data." },
+                { "name": "type", "$ref": "Page.ResourceType", "optional": true, "description": "Resource type." }
+            ]
+        },
+        {
+            "name": "requestServedFromCache",
+            "description": "Fired if request ended up loading from cache.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." }
+            ]
+        },
+        {
+            "name": "responseReceived",
+            "description": "Fired when HTTP response is available.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "type", "$ref": "Page.ResourceType", "description": "Resource type." },
+                { "name": "response", "$ref": "Response", "description": "Response data." }
+            ]
+        },
+        {
+            "name": "dataReceived",
+            "description": "Fired when data chunk was received over the network.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "dataLength", "type": "integer", "description": "Data chunk length." },
+                { "name": "encodedDataLength", "type": "integer", "description": "Actual bytes received (might be less than dataLength for compressed encodings)." }
+            ]
+        },
+        {
+            "name": "loadingFinished",
+            "description": "Fired when HTTP request has finished loading.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "name": "loadingFailed",
+            "description": "Fired when HTTP request has failed to load.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "errorText", "type": "string", "description": "User friendly error message." },
+                { "name": "canceled", "type": "boolean", "optional": true, "description": "True if loading was canceled." }
+            ]
+        },
+        {
+            "name": "requestServedFromMemoryCache",
+            "description": "Fired when HTTP request has been served from memory cache.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                { "name": "resource", "$ref": "CachedResource", "description": "Cached resource data." }
+            ]
+        },
+        {
+            "name": "webSocketWillSendHandshakeRequest",
+            "description": "Fired when WebSocket is about to initiate handshake.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "request", "$ref": "WebSocketRequest", "description": "WebSocket request data." }
+            ]
+        },
+        {
+            "name": "webSocketHandshakeResponseReceived",
+            "description": "Fired when WebSocket handshake response becomes available.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketResponse", "description": "WebSocket response data." }
+            ]
+        },
+        {
+            "name": "webSocketCreated",
+            "description": "Fired upon WebSocket creation.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "url", "type": "string", "description": "WebSocket request URL." }
+            ]
+        },
+        {
+            "name": "webSocketClosed",
+            "description": "Fired when WebSocket is closed.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." }
+            ]
+        },
+        {
+            "name": "webSocketFrameReceived",
+            "description": "Fired when WebSocket frame is received.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+            ]
+        },
+        {
+            "name": "webSocketFrameError",
+            "description": "Fired when WebSocket frame error occurs.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "errorMessage", "type": "string", "description": "WebSocket frame error message." }
+            ]
+        },
+        {
+            "name": "webSocketFrameSent",
+            "description": "Fired when WebSocket frame is sent.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "OverlayTypes",
+    "description": "Exposes types to be used by the inspector overlay.",
+    "types": [
+        {
+            "id": "Point",
+            "type": "object",
+            "properties": [
+                { "name": "x", "type": "number" },
+                { "name": "y", "type": "number" }
+            ]
+        },
+        {
+            "id": "Size",
+            "type": "object",
+            "properties": [
+                { "name": "width", "type": "integer" },
+                { "name": "height", "type": "integer" }
+            ]
+        },
+        {
+            "id": "Quad",
+            "description": "A quad is a collection of 4 points. When initialized from a rect, the points are in clockwise order from top left.",
+            "type": "array",
+            "items": { "$ref": "Point" }
+        },
+        {
+            "id": "Rect",
+            "description": "A rectangle specified by a reference coordinate and width/height offsets.",
+            "type": "object",
+            "properties": [
+                { "name": "x", "type": "number" },
+                { "name": "y", "type": "number" },
+                { "name": "width", "type": "number" },
+                { "name": "height", "type": "number" }
+            ]
+        },
+        {
+            "id": "Region",
+            "description": "A single region in a flow thread.",
+            "type": "object",
+            "properties": [
+                { "name": "borderQuad", "$ref": "Quad" },
+                { "name": "incomingQuad", "$ref": "Quad" },
+                { "name": "outgoingQuad", "$ref": "Quad" },
+                { "name": "isHighlighted", "type": "boolean", "optional": true }
+            ]
+        },
+        {
+            "id": "DisplayPath",
+            "description": "A vector path described using SVG path syntax.",
+            "type": "array",
+            "items": { "type": "any" }
+        },
+        {
+            "id": "RegionFlowData",
+            "type": "object",
+            "properties": [
+                { "name": "regions", "type": "array", "items": { "$ref": "Region"} },
+                { "name": "name", "type": "string" }
+            ]
+        },
+        {
+            "id": "ContentFlowData",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string" }
+            ]
+        },
+        {
+            "id": "ShapeOutsideData",
+            "type": "object",
+            "properties": [
+                { "name": "bounds", "$ref": "Quad", "description": "Bounds for the shape-outside paths." },
+                { "name": "shape", "$ref": "DisplayPath", "description": "Path for the element's shape.", "optional": true },
+                { "name": "marginShape", "$ref": "DisplayPath", "description": "Path for the element's margin shape.", "optional": true }
+            ]
+        },
+        {
+            "id": "ElementData",
+            "description": "Data that describes an element to be highlighted.",
+            "type": "object",
+            "properties": [
+                { "name": "tagName", "type": "string" },
+                { "name": "idValue", "type": "string", "description": "The value of the element's 'id' attribute." },
+                { "name": "className", "type": "string", "optional": true },
+                { "name": "size", "$ref": "Size", "optional": true },
+                { "name": "role", "type": "string", "description": "Computed accessibility role for the element.", "optional": true },
+                { "name": "regionFlowData", "$ref": "RegionFlowData", "optional": true },
+                { "name": "contentFlowData", "$ref": "ContentFlowData", "optional": true },
+                { "name": "shapeOutsideData", "$ref": "ShapeOutsideData", "optional": true }
+            ]
+        },
+        {
+            "id": "FragmentHighlightData",
+            "description": "Data required to highlight multiple quads.",
+            "type": "object",
+            "properties": [
+                { "name": "quads", "type": "array", "items": { "$ref": "Quad" }, "description": "Quads for which the highlight should be applied."},
+                { "name": "contentColor", "type": "string" },
+                { "name": "contentOutlineColor", "type": "string" },
+                { "name": "paddingColor", "type": "string" },
+                { "name": "borderColor", "type": "string" },
+                { "name": "marginColor", "type": "string" },
+                { "name": "regionClippingArea", "$ref": "Quad", "optional": true }
+            ]
+        },
+        {
+            "id": "NodeHighlightData",
+            "description": "Data required to highlight a DOM node.",
+            "type": "object",
+            "properties": [
+                { "name": "scrollOffset", "$ref": "Point", "description": "Scroll offset for the MainFrame's FrameView that is shared across all quads." },
+                { "name": "fragments", "type": "array", "items": { "$ref": "FragmentHighlightData" } },
+                { "name": "elementData", "$ref": "ElementData", "optional": true }
+            ]
+        },
+        {
+            "id": "OverlayConfiguration",
+            "description": "Data required to configure the overlay's size and scaling behavior.",
+            "type": "object",
+            "properties": [
+                { "name": "deviceScaleFactor", "type": "number" },
+                { "name": "viewportSize", "$ref": "Size" },
+                { "name": "frameViewFullSize", "$ref": "Size" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Page",
+    "description": "Actions and events related to the inspected page belong to the page domain.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "ResourceType",
+            "type": "string",
+            "enum": ["Document", "Stylesheet", "Image", "Font", "Script", "XHR", "WebSocket", "Other"],
+            "description": "Resource type as it was perceived by the rendering engine."
+        },
+        {
+            "id": "CoordinateSystem",
+            "type": "string",
+            "enum": ["Viewport", "Page"],
+            "description": "Coordinate system used by supplied coordinates."
+        },
+        {
+            "id": "Frame",
+            "type": "object",
+            "description": "Information about the Frame on the page.",
+            "properties": [
+                { "name": "id", "type": "string", "description": "Frame unique identifier." },
+                { "name": "parentId", "type": "string", "optional": true, "description": "Parent frame identifier." },
+                { "name": "loaderId", "$ref": "Network.LoaderId", "description": "Identifier of the loader associated with this frame." },
+                { "name": "name", "type": "string", "optional": true, "description": "Frame's name as specified in the tag." },
+                { "name": "url", "type": "string", "description": "Frame document's URL." },
+                { "name": "securityOrigin", "type": "string", "description": "Frame document's security origin." },
+                { "name": "mimeType", "type": "string", "description": "Frame document's mimeType as determined by the browser." }
+            ]
+        },
+        {
+            "id": "FrameResource",
+            "type": "object",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL." },
+                { "name": "type", "$ref": "ResourceType", "description": "Type of this resource." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                { "name": "failed", "type": "boolean", "optional": true, "description": "True if the resource failed to load." },
+                { "name": "canceled", "type": "boolean", "optional": true, "description": "True if the resource was canceled during loading." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "id": "FrameResourceTree",
+            "type": "object",
+            "description": "Information about the Frame hierarchy along with their cached resources.",
+            "properties": [
+                { "name": "frame", "$ref": "Frame", "description": "Frame information for this tree item." },
+                { "name": "childFrames", "type": "array", "optional": true, "items": { "$ref": "FrameResourceTree" }, "description": "Child frames." },
+                { "name": "resources", "type": "array", "items": { "$ref": "FrameResource" }, "description": "Information about frame resources." }
+            ]
+        },
+        {
+            "id": "SearchResult",
+            "type": "object",
+            "description": "Search result for resource.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL." },
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Resource frame id." },
+                { "name": "matchesCount", "type": "number", "description": "Number of matches in the resource content." }
+            ]
+        },
+        {
+            "id": "Cookie",
+            "type": "object",
+            "description": "Cookie object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Cookie name." },
+                { "name": "value", "type": "string", "description": "Cookie value." },
+                { "name": "domain", "type": "string", "description": "Cookie domain." },
+                { "name": "path", "type": "string", "description": "Cookie path." },
+                { "name": "expires", "type": "number", "description": "Cookie expires." },
+                { "name": "size", "type": "integer", "description": "Cookie size." },
+                { "name": "httpOnly", "type": "boolean", "description": "True if cookie is http-only." },
+                { "name": "secure", "type": "boolean", "description": "True if cookie is secure." },
+                { "name": "session", "type": "boolean", "description": "True in case of session cookie." }
+            ]
+        },
+        {
+            "id": "ScriptIdentifier",
+            "type": "string",
+            "description": "Unique script identifier."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables page domain notifications."
+        },
+        {
+            "name": "disable",
+            "description": "Disables page domain notifications."
+        },
+        {
+            "name": "addScriptToEvaluateOnLoad",
+            "parameters": [
+                { "name": "scriptSource", "type": "string" }
+            ],
+            "returns": [
+                { "name": "identifier", "$ref": "ScriptIdentifier", "description": "Identifier of the added script." }
+            ]
+        },
+        {
+            "name": "removeScriptToEvaluateOnLoad",
+            "parameters": [
+                { "name": "identifier", "$ref": "ScriptIdentifier" }
+            ]
+        },
+        {
+            "name": "reload",
+            "parameters": [
+                { "name": "ignoreCache", "type": "boolean", "optional": true, "description": "If true, browser cache is ignored (as if the user pressed Shift+refresh)." },
+                { "name": "scriptToEvaluateOnLoad", "type": "string", "optional": true, "description": "If set, the script will be injected into all frames of the inspected page after reload." }
+            ],
+            "description": "Reloads given page optionally ignoring the cache."
+        },
+        {
+            "name": "navigate",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "URL to navigate the page to." }
+            ],
+            "description": "Navigates current page to the given URL."
+        },
+        {
+            "name": "getCookies",
+            "returns": [
+                { "name": "cookies", "type": "array", "items": { "$ref": "Cookie"}, "description": "Array of cookie objects." }
+            ],
+            "description": "Returns all browser cookies. Depending on the backend support, will return detailed cookie information in the <code>cookies</code> field."
+        },
+        {
+            "name": "deleteCookie",
+            "parameters": [
+                { "name": "cookieName", "type": "string", "description": "Name of the cookie to remove." },
+                { "name": "url", "type": "string", "description": "URL to match cooke domain and path." }
+            ],
+            "description": "Deletes browser cookie with given name, domain and path."
+        },
+        {
+            "name": "getResourceTree",
+            "description": "Returns present frame / resource tree structure.",
+            "returns": [
+                { "name": "frameTree", "$ref": "FrameResourceTree", "description": "Present frame / resource tree structure." }
+            ]
+        },
+        {
+            "name": "getResourceContent",
+            "description": "Returns content of the given resource.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to get resource for." },
+                { "name": "url", "type": "string", "description": "URL of the resource to get content for." }
+            ],
+            "returns": [
+                { "name": "content", "type": "string", "description": "Resource content." },
+                { "name": "base64Encoded", "type": "boolean", "description": "True, if content was served as base64." }
+            ]
+        },
+        {
+            "name": "searchInResource",
+            "description": "Searches for given string in resource content.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id for resource to search in." },
+                { "name": "url", "type": "string", "description": "URL of the resource to search in." },
+                { "name": "query", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "GenericTypes.SearchMatch" }, "description": "List of search matches." }
+            ]
+        },
+        {
+            "name": "searchInResources",
+            "description": "Searches for given string in frame / resource tree structure.",
+            "parameters": [
+                { "name": "text", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "SearchResult" }, "description": "List of search results." }
+            ]
+        },
+        {
+            "name": "setDocumentContent",
+            "description": "Sets given markup as the document's HTML.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to set HTML for." },
+                { "name": "html", "type": "string", "description": "HTML content to set."  }
+            ]
+        },
+        {
+            "name": "setShowPaintRects",
+            "description": "Requests that backend shows paint rectangles",
+            "parameters": [
+                { "name": "result", "type": "boolean", "description": "True for showing paint rectangles" }
+            ]
+        },
+        {
+            "name": "getScriptExecutionStatus",
+            "description": "Determines if scripts can be executed in the page.",
+            "returns": [
+                { "name": "result", "type": "string", "enum": ["allowed", "disabled", "forbidden"], "description": "Script execution status: \"allowed\" if scripts can be executed, \"disabled\" if script execution has been disabled through page settings, \"forbidden\" if script execution for the given page is not possible for other reasons." }
+            ]
+        },
+        {
+            "name": "setScriptExecutionDisabled",
+            "description": "Switches script execution in the page.",
+            "parameters": [
+                { "name": "value", "type": "boolean", "description": "Whether script execution should be disabled in the page." }
+            ]
+        },
+        {
+            "name": "setEmulatedMedia",
+            "parameters": [
+                { "name": "media", "type": "string", "description": "Media type to emulate. Empty string disables the override." }
+            ],
+            "description": "Emulates the given media for CSS media queries."
+        },
+        {
+            "name": "getCompositingBordersVisible",
+            "description": "Indicates the visibility of compositing borders.",
+            "returns": [
+                { "name": "result", "type": "boolean", "description": "If true, compositing borders are visible." }
+            ]
+        },
+        {
+            "name": "setCompositingBordersVisible",
+            "description": "Controls the visibility of compositing borders.",
+            "parameters": [
+                { "name": "visible", "type": "boolean", "description": "True for showing compositing borders." }
+            ]
+        },
+        {
+            "name": "snapshotNode",
+            "description": "Capture a snapshot of the specified node that does not include unrelated layers.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Id of the node to snapshot." }
+            ],
+            "returns": [
+                { "name": "dataURL", "type": "string", "description": "Base64-encoded image data (PNG)." }
+            ]
+        },
+        {
+            "name": "snapshotRect",
+            "description": "Capture a snapshot of the page within the specified rectangle and coordinate system.",
+            "parameters": [
+                { "name": "x", "type": "integer", "description": "X coordinate" },
+                { "name": "y", "type": "integer", "description": "Y coordinate" },
+                { "name": "width", "type": "integer", "description": "Rectangle width" },
+                { "name": "height", "type": "integer", "description": "Rectangle height" },
+                { "name": "coordinateSystem", "$ref": "CoordinateSystem", "description": "Indicates the coordinate system of the supplied rectangle." }
+            ],
+            "returns": [
+                { "name": "dataURL", "type": "string", "description": "Base64-encoded image data (PNG)." }
+            ]
+        },
+        {
+            "name": "archive",
+            "description": "Grab an archive of the page.",
+            "returns": [
+                { "name": "data", "type": "string", "description": "Base64-encoded web archive." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "domContentEventFired",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "loadEventFired",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "frameNavigated",
+            "description": "Fired once navigation of the frame has completed. Frame is now associated with the new loader.",
+            "parameters": [
+                { "name": "frame", "$ref": "Frame", "description": "Frame object." }
+            ]
+        },
+        {
+            "name": "frameDetached",
+            "description": "Fired when frame has been detached from its parent.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has been detached." }
+            ]
+        },
+        {
+            "name": "frameStartedLoading",
+            "description": "Fired when frame has started loading.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has started loading." }
+            ]
+        },
+        {
+            "name": "frameStoppedLoading",
+            "description": "Fired when frame has stopped loading.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has stopped loading." }
+            ]
+        },
+        {
+            "name": "frameScheduledNavigation",
+            "description": "Fired when frame schedules a potential navigation.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has scheduled a navigation." },
+                { "name": "delay", "type": "number", "description": "Delay (in seconds) until the navigation is scheduled to begin. The navigation is not guaranteed to start." }
+            ]
+        },
+        {
+            "name": "frameClearedScheduledNavigation",
+            "description": "Fired when frame no longer has a scheduled navigation.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has cleared its scheduled navigation." }
+            ]
+        },
+        {
+            "name": "javascriptDialogOpening",
+            "description": "Fired when a JavaScript initiated dialog (alert, confirm, prompt, or onbeforeunload) is about to open.",
+            "parameters": [
+                { "name": "message", "type": "string", "description": "Message that will be displayed by the dialog." }
+            ]
+        },
+        {
+            "name": "javascriptDialogClosed",
+            "description": "Fired when a JavaScript initiated dialog (alert, confirm, prompt, or onbeforeunload) has been closed."
+        },
+        {
+            "name": "scriptsEnabled",
+            "description": "Fired when the JavaScript is enabled/disabled on the page",
+            "parameters": [
+                { "name": "isEnabled", "type": "boolean", "description": "Whether script execution is enabled or disabled on the page." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Runtime",
+    "description": "Runtime domain exposes JavaScript runtime by means of remote evaluation and mirror objects. Evaluation results are returned as mirror object that expose object type, string representation and unique identifier that can be used for further object reference. Original objects are maintained in memory unless they are either explicitly released or are released along with the other objects in their object group.",
+    "types": [
+        {
+            "id": "RemoteObjectId",
+            "type": "string",
+            "description": "Unique object identifier."
+        },
+        {
+            "id": "RemoteObject",
+            "type": "object",
+            "description": "Mirror object referencing original JavaScript object.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class"], "description": "Object subtype hint. Specified for <code>object</code> <code>function</code> (for class) type values only." },
+                { "name": "className", "type": "string", "optional": true, "description": "Object class (constructor) name. Specified for <code>object</code> type values only." },
+                { "name": "value", "type": "any", "optional": true, "description": "Remote object value (in case of primitive values or JSON values if it was requested)." },
+                { "name": "description", "type": "string", "optional": true, "description": "String representation of the object." },
+                { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Unique object identifier (for non-primitive values)." },
+                { "name": "size", "type": "integer", "optional": true, "description": "Size of the array/collection. Specified for array/map/set/weakmap/weakset object type values only." },
+                { "name": "classPrototype", "$ref": "RemoteObject", "optional": true, "description": "Remote object for the class prototype. Specified for class object type values only." },
+                { "name": "preview", "$ref": "ObjectPreview", "optional": true, "description": "Preview containing abbreviated property values. Specified for <code>object</code> type values only." }
+            ]
+        },
+        {
+            "id": "ObjectPreview",
+            "type": "object",
+            "description": "Object containing abbreviated remote object value.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class"], "description": "Object subtype hint. Specified for <code>object</code> type values only." },
+                { "name": "description", "type": "string", "optional": true, "description": "String representation of the object." },
+                { "name": "lossless", "type": "boolean", "description": "Determines whether preview is lossless (contains all information of the original object)." },
+                { "name": "overflow", "type": "boolean", "optional": true, "description": "True iff some of the properties of the original did not fit." },
+                { "name": "properties", "type": "array", "items": { "$ref": "PropertyPreview" }, "optional": true, "description": "List of the properties." },
+                { "name": "entries", "type": "array", "items": { "$ref": "EntryPreview" }, "optional": true, "description": "List of the entries. Specified for <code>map</code> and <code>set</code> subtype values only." },
+                { "name": "size", "type": "integer", "optional": true, "description": "Size of the array/collection. Specified for array/map/set/weakmap/weakset object type values only." }
+            ]
+        },
+        {
+            "id": "PropertyPreview",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol", "accessor"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class"], "description": "Object subtype hint. Specified for <code>object</code> type values only." },
+                { "name": "value", "type": "string", "optional": true, "description": "User-friendly property value string." },
+                { "name": "valuePreview", "$ref": "ObjectPreview", "optional": true, "description": "Nested value preview." },
+                { "name": "internal", "type": "boolean", "optional": true, "description": "True if this is an internal property." }
+            ]
+        },
+        {
+            "id": "EntryPreview",
+            "type": "object",
+            "properties": [
+                { "name": "key", "$ref": "ObjectPreview", "optional": true, "description": "Entry key. Specified for map-like collection entries." },
+                { "name": "value", "$ref": "ObjectPreview", "description": "Entry value." }
+            ]
+        },
+        {
+            "id": "CollectionEntry",
+            "type": "object",
+            "properties": [
+                { "name": "key", "$ref": "Runtime.RemoteObject", "optional": true, "description": "Entry key of a map-like collection, otherwise not provided." },
+                { "name": "value", "$ref": "Runtime.RemoteObject", "description": "Entry value." }
+            ]
+        },
+        {
+            "id": "PropertyDescriptor",
+            "type": "object",
+            "description": "Object property descriptor.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name or symbol description." },
+                { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." },
+                { "name": "writable", "type": "boolean", "optional": true, "description": "True if the value associated with the property may be changed (data descriptors only)." },
+                { "name": "get", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a getter for the property, or <code>undefined</code> if there is no getter (accessor descriptors only)." },
+                { "name": "set", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a setter for the property, or <code>undefined</code> if there is no setter (accessor descriptors only)." },
+                { "name": "configurable", "type": "boolean", "description": "True if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object." },
+                { "name": "enumerable", "type": "boolean", "description": "True if this property shows up during enumeration of the properties on the corresponding object." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "isOwn", "optional": true, "type": "boolean", "description": "True if the property is owned for the object." },
+                { "name": "symbol", "optional": true, "$ref": "Runtime.RemoteObject", "description": "Property symbol object, if the property is a symbol." },
+                { "name": "nativeGetter", "optional": true, "type": "boolean", "description": "True if the property value came from a native getter." }
+            ]
+        },
+        {
+            "id": "InternalPropertyDescriptor",
+            "type": "object",
+            "description": "Object internal property descriptor. This property isn't normally visible in JavaScript code.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Conventional property name." },
+                { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." }
+            ]
+        },
+        {
+            "id": "CallArgument",
+            "type": "object",
+            "description": "Represents function call argument. Either remote object id <code>objectId</code> or primitive <code>value</code> or neither of (for undefined) them should be specified.",
+            "properties": [
+                { "name": "value", "type": "any", "optional": true, "description": "Primitive value." },
+                { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Remote object handle." }
+            ]
+        },
+        {
+            "id": "ExecutionContextId",
+            "type": "integer",
+            "description": "Id of an execution context."
+        },
+        {
+            "id": "ExecutionContextDescription",
+            "type": "object",
+            "description": "Description of an isolated world.",
+            "properties": [
+                { "name": "id", "$ref": "ExecutionContextId", "description": "Unique id of the execution context. It can be used to specify in which execution context script evaluation should be performed." },
+                { "name": "isPageContext", "type": "boolean", "description": "True if this is a context where inpspected web page scripts run. False if it is a content script isolated context." },
+                { "name": "name", "type": "string", "description": "Human readable name describing given context."},
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the owning frame." }
+            ]
+        },
+        {
+            "id": "SyntaxErrorType",
+            "type": "string",
+            "enum": ["none", "irrecoverable", "unterminated-literal", "recoverable"],
+            "description": "Syntax error type: \"none\" for no error, \"irrecoverable\" for unrecoverable errors, \"unterminated-literal\" for when there is an unterminated literal, \"recoverable\" for when the expression is unfinished but valid so far."
+        },
+        {
+            "id": "ErrorRange",
+            "type": "object",
+            "description": "Range of an error in source code.",
+            "properties": [
+                { "name": "startOffset", "type": "integer", "description": "Start offset of range (inclusive)." },
+                { "name": "endOffset", "type": "integer", "description": "End offset of range (exclusive)." }
+            ]
+        },
+        {
+            "id": "StructureDescription",
+            "type": "object",
+            "properties": [
+                { "name": "fields", "type": "array",  "items": { "type": "string" }, "optional": true, "description": "Array of strings, where the strings represent object properties." },
+                { "name": "optionalFields", "type": "array",  "items": { "type": "string" }, "optional": true, "description": "Array of strings, where the strings represent optional object properties." },
+                { "name": "constructorName", "type": "string", "optional": true, "description": "Name of the constructor." },
+                { "name": "prototypeStructure", "$ref": "StructureDescription", "optional": true, "description": "Pointer to the StructureRepresentation of the protoype if one exists." },
+                { "name": "isImprecise", "type": "boolean", "optional": true, "description": "If true, it indicates that the fields in this StructureDescription may be inaccurate. I.e, there might have been fields that have been deleted before it was profiled or it has fields we haven't profiled." }
+            ]
+        },
+        {
+            "id": "TypeSet",
+            "type": "object",
+            "properties": [
+                { "name": "isFunction", "type": "boolean", "description": "Indicates if this type description has been type Function." },
+                { "name": "isUndefined", "type": "boolean", "description": "Indicates if this type description has been type Undefined." },
+                { "name": "isNull", "type": "boolean", "description": "Indicates if this type description has been type Null." },
+                { "name": "isBoolean", "type": "boolean", "description": "Indicates if this type description has been type Boolean." },
+                { "name": "isInteger", "type": "boolean", "description": "Indicates if this type description has been type Integer." },
+                { "name": "isNumber", "type": "boolean", "description": "Indicates if this type description has been type Number." },
+                { "name": "isString", "type": "boolean", "description": "Indicates if this type description has been type String." },
+                { "name": "isObject", "type": "boolean", "description": "Indicates if this type description has been type Object." },
+                { "name": "isSymbol", "type": "boolean", "description": "Indicates if this type description has been type Symbol." }
+            ]
+        },
+        {
+            "id": "TypeDescription",
+            "type": "object",
+            "description": "Container for type information that has been gathered.",
+            "properties": [
+                { "name": "isValid", "type": "boolean", "description": "If true, we were able to correlate the offset successfuly with a program location. If false, the offset may be bogus or the offset may be from a CodeBlock that hasn't executed." },
+                { "name": "leastCommonAncestor", "type": "string", "optional": true, "description": "Least common ancestor of all Constructors if the TypeDescription has seen any structures. This string is the display name of the shared constructor function." },
+                { "name": "typeSet", "$ref": "TypeSet", "optional": true, "description": "Set of booleans for determining the aggregate type of this type description." },
+                { "name": "structures", "type": "array", "items": { "$ref": "StructureDescription" }, "optional": true, "description": "Array of descriptions for all structures seen for this variable." },
+                { "name": "isTruncated", "type": "boolean", "optional": true, "description": "If true, this indicates that no more structures are being profiled because some maximum threshold has been reached and profiling has stopped because of memory pressure." }
+            ]
+        },
+        {
+            "id": "TypeLocation",
+            "type": "object",
+            "description": "Describes the location of an expression we want type information for.",
+            "properties": [
+                { "name": "typeInformationDescriptor", "type": "integer", "description": "What kind of type information do we want (normal, function return values, 'this' statement)." },
+                { "name": "sourceID", "type": "string", "description": "sourceID uniquely identifying a script" },
+                { "name": "divot", "type": "integer", "description": "character offset for assignment range" }
+            ]
+        },
+        {
+            "id": "BasicBlock",
+            "type": "object",
+            "description": "From Wikipedia: a basic block is a portion of the code within a program with only one entry point and only one exit point. This type gives the location of a basic block and if that basic block has executed.",
+            "properties": [
+                { "name": "startOffset", "type": "integer", "description": "Start offset of the basic block." },
+                { "name": "endOffset", "type": "integer", "description": "End offset of the basic block." },
+                { "name": "hasExecuted", "type": "boolean", "description": "Indicates if the basic block has executed before." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "parse",
+            "parameters": [
+                { "name": "source", "type": "string", "description": "Source code to parse." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "SyntaxErrorType", "description": "Parse result." },
+                { "name": "message", "type": "string", "optional": true, "description": "Parse error message." },
+                { "name": "range", "$ref": "ErrorRange", "optional": true, "description": "Range in the source where the error occurred." }
+            ],
+            "description": "Parses JavaScript source code for errors."
+        },
+        {
+            "name": "evaluate",
+            "parameters": [
+                { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." },
+                { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Determines whether Command Line API should be available during the evaluation." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "contextId", "$ref": "Runtime.ExecutionContextId", "optional": true, "description": "Specifies in which isolated context to perform evaluation. Each content script lives in an isolated context and this parameter may be used to specify one of those contexts. If the parameter is omitted or 0 the evaluation will be performed in the context of the inspected page." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." },
+                { "name": "saveResult", "type": "boolean", "optional": true, "description": "Whether the resulting value should be considered for saving in the $n history." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "RemoteObject", "description": "Evaluation result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Evaluates expression on global object."
+        },
+        {
+            "name": "callFunctionOn",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to call function on." },
+                { "name": "functionDeclaration", "type": "string", "description": "Declaration of the function to call." },
+                { "name": "arguments", "type": "array", "items": { "$ref": "CallArgument", "description": "Call argument." }, "optional": true, "description": "Call arguments. All call arguments must belong to the same JavaScript world as the target object." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether function call should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object which should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "RemoteObject", "description": "Call result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
+            ],
+            "description": "Calls function with given declaration on the given object. Object group of the result is inherited from the target object."
+        },
+        {
+            "name": "getProperties",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to return properties for." },
+                { "name": "ownProperties", "optional": true, "type": "boolean", "description": "If true, returns properties belonging only to the object itself, not to its prototype chain." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for property values." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "PropertyDescriptor"}, "description": "Object properties." },
+                { "name": "internalProperties", "optional": true, "type": "array", "items": { "$ref": "InternalPropertyDescriptor"}, "description": "Internal object properties." }
+            ],
+            "description": "Returns properties of a given object. Object group of the result is inherited from the target object."
+        },
+        {
+            "name": "getDisplayableProperties",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to return properties for." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for property values." }
+            ],
+            "returns": [
+                { "name": "properties", "type": "array", "items": { "$ref": "PropertyDescriptor"}, "description": "Object properties." },
+                { "name": "internalProperties", "optional": true, "type": "array", "items": { "$ref": "InternalPropertyDescriptor"}, "description": "Internal object properties." }
+            ],
+            "description": "Returns displayable properties of a given object. Object group of the result is inherited from the target object. Displayable properties are own properties, internal properties, and native getters in the prototype chain (assumed to be bindings and treated like own properties for the frontend)."
+        },
+        {
+            "name": "getCollectionEntries",
+            "description": "Returns entries of given Map / Set collection.",
+            "parameters": [
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "description": "Id of the collection to get entries for." },
+                { "name": "objectGroup", "optional": true, "type": "string", "description": "Symbolic group name that can be used to release multiple. If not provided, it will be the same objectGroup as the RemoteObject determined from <code>objectId</code>. This is useful for WeakMap to release the collection entries." },
+                { "name": "startIndex", "optional": true, "type": "integer", "description": "If provided skip to this index before collecting values. Otherwise, 0." },
+                { "name": "numberToFetch", "optional": true, "type": "integer", "description": "If provided only return <code>numberToFetch</code> values. Otherwise, return values all the way to the end." }
+            ],
+            "returns": [
+                { "name": "entries", "type": "array", "items": { "$ref": "CollectionEntry" }, "description": "Array of collection entries." }
+            ]
+        },
+        {
+            "name": "saveResult",
+            "parameters": [
+                { "name": "value", "$ref": "CallArgument", "description": "Id or value of the object to save." },
+                { "name": "contextId", "optional": true, "$ref": "ExecutionContextId", "description": "Unique id of the execution context. To specify in which execution context script evaluation should be performed. If not provided, determine from the CallArgument's objectId." }
+            ],
+            "returns": [
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the value was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Assign a saved result index to this value."
+        },
+        {
+            "name": "releaseObject",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to release." }
+            ],
+            "description": "Releases remote object with given id."
+        },
+        {
+            "name": "releaseObjectGroup",
+            "parameters": [
+                { "name": "objectGroup", "type": "string", "description": "Symbolic object group name." }
+            ],
+            "description": "Releases all remote objects that belong to a given group."
+        },
+        {
+            "name": "enable",
+            "description": "Enables reporting of execution contexts creation by means of <code>executionContextCreated</code> event. When the reporting gets enabled the event will be sent immediately for each existing execution context."
+        },
+        {
+            "name": "disable",
+            "description": "Disables reporting of execution contexts creation."
+        },
+        {
+            "name": "getRuntimeTypesForVariablesAtOffsets",
+            "parameters": [
+                { "name": "locations", "type": "array", "items": { "$ref": "TypeLocation" }, "description": "An array of type locations we're requesting information for. Results are expected in the same order they're sent in."}
+            ],
+            "returns": [
+                { "name": "types", "type": "array", "items": { "$ref": "TypeDescription", "description": "Types for requested variable." } }
+            ],
+            "description": "Returns detailed informtation on given function."
+        },
+        {
+            "name": "enableTypeProfiler",
+            "description": "Enables type profiling on the VM."
+        },
+        {
+            "name": "disableTypeProfiler",
+            "description": "Disables type profiling on the VM."
+        },
+        {
+            "name": "getBasicBlocks",
+            "parameters": [
+                { "name": "sourceID", "type": "string", "description": "Indicates which sourceID information is requested for." }
+            ],
+            "returns": [
+                { "name": "basicBlocks", "type": "array", "items": { "$ref": "BasicBlock", "description": "Array of basic blocks." } }
+            ],
+            "description": "Returns a list of basic blocks for the given sourceID with information about their text ranges and whether or not they have executed."
+        }
+    ],
+    "events": [
+        {
+            "name": "executionContextCreated",
+            "parameters": [
+                { "name": "context", "$ref": "ExecutionContextDescription", "description": "A newly created execution contex." }
+            ],
+            "description": "Issued when new execution context is created."
+        }
+    ]
+}
+,
+{
+    "domain": "Timeline",
+    "description": "Timeline provides its clients with instrumentation records that are generated during the page runtime. Timeline instrumentation can be started and stopped using corresponding commands. While timeline is started, it is generating timeline event records.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "EventType",
+            "type": "string",
+            "enum": [
+                "EventDispatch",
+                "ScheduleStyleRecalculation",
+                "RecalculateStyles",
+                "InvalidateLayout",
+                "Layout",
+                "Paint",
+                "Composite",
+                "RenderingFrame",
+                "ParseHTML",
+                "TimerInstall",
+                "TimerRemove",
+                "TimerFire",
+                "EvaluateScript",
+                "MarkLoad",
+                "MarkDOMContent",
+                "TimeStamp",
+                "Time",
+                "TimeEnd",
+                "XHRReadyStateChange",
+                "XHRLoad",
+                "FunctionCall",
+                "ProbeSample",
+                "ConsoleProfile",
+                "RequestAnimationFrame",
+                "CancelAnimationFrame",
+                "FireAnimationFrame",
+                "WebSocketCreate",
+                "WebSocketSendHandshakeRequest",
+                "WebSocketReceiveHandshakeResponse",
+                "WebSocketDestroy"
+            ],
+            "description": "Timeline record type."
+        },
+        {
+            "id": "TimelineEvent",
+            "type": "object",
+            "properties": [
+                { "name": "type", "$ref": "EventType", "description": "Event type." },
+                { "name": "data", "type": "object", "description": "Event data." },
+                { "name": "children", "type": "array", "optional": true, "items": { "$ref": "TimelineEvent" }, "description": "Nested records." }
+            ],
+            "description": "Timeline record contains information about the recorded activity."
+        },
+        {
+            "id": "CPUProfileNodeAggregateCallInfo",
+            "type": "object",
+            "description": "Aggregate CPU Profile call info. Holds time information for all the calls that happened on a node.",
+            "properties": [
+                { "name": "callCount", "type": "number", "description": "Total number of calls." },
+                { "name": "startTime", "type": "number", "description": "Start time for the first call." },
+                { "name": "endTime", "type": "number", "description": "End time for the last call." },
+                { "name": "totalTime", "type": "number", "description": "Total execution time for all calls combined." }
+            ]
+        },
+        {
+            "id": "CPUProfileNode",
+            "type": "object",
+            "description": "CPU Profile node. Holds callsite information, execution statistics and child nodes.",
+            "properties": [
+                { "name": "id", "type": "integer", "description": "Unique identifier for this call site." },
+                { "name": "callInfo", "$ref": "CPUProfileNodeAggregateCallInfo", "description": "Aggregate info about all the calls that making up this node." },
+                { "name": "functionName", "type": "string", "optional": true, "description": "Function name." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL." },
+                { "name": "lineNumber", "type": "integer", "optional": true, "description": "Line number." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Column number." },
+                { "name": "children", "type": "array", "items": { "$ref": "CPUProfileNode" }, "optional": true, "description": "Child nodes." }
+            ]
+        },
+        {
+            "id": "CPUProfile",
+            "type": "object",
+            "description": "Profile.",
+            "properties": [
+                { "name": "rootNodes", "type": "array", "items": { "$ref": "CPUProfileNode" }, "description": "Top level nodes in the stack." },
+                { "name": "idleTime", "type": "number", "optional": true }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "start",
+            "parameters": [
+                { "name": "maxCallStackDepth", "optional": true, "type": "integer", "description": "Samples JavaScript stack traces up to <code>maxCallStackDepth</code>, defaults to 5." }
+            ],
+            "description": "Starts capturing instrumentation events."
+        },
+        {
+            "name": "stop",
+            "description": "Stops capturing instrumentation events."
+        }
+    ],
+    "events": [
+        {
+            "name": "eventRecorded",
+            "parameters": [
+                { "name": "record", "$ref": "TimelineEvent", "description": "Timeline event record data." }
+            ],
+            "description": "Fired for every instrumentation event while timeline is started."
+        },
+        {
+            "name": "recordingStarted",
+            "description": "Fired when recording has started."
+        },
+        {
+            "name": "recordingStopped",
+            "description": "Fired when recording has stopped."
+        }
+    ]
+}
+]}
diff --git a/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json b/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json
new file mode 100644
index 000000000..d13ee8029
--- /dev/null
+++ b/Source/WebInspectorUI/Versions/Inspector-iOS-9.3.json
@@ -0,0 +1,3461 @@
+{"domains":[
+{
+    "domain": "ApplicationCache",
+    "availability": "web",
+    "types": [
+        {
+            "id": "ApplicationCacheResource",
+            "type": "object",
+            "description": "Detailed application cache resource information.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource url." },
+                { "name": "size", "type": "integer", "description": "Resource size." },
+                { "name": "type", "type": "string", "description": "Resource type." }
+            ]
+        },
+        {
+            "id": "ApplicationCache",
+            "type": "object",
+            "description": "Detailed application cache information.",
+            "properties": [
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "size", "type": "number", "description": "Application cache size." },
+                { "name": "creationTime", "type": "number", "description": "Application cache creation time." },
+                { "name": "updateTime", "type": "number", "description": "Application cache update time." },
+                { "name": "resources", "type": "array", "items": { "$ref": "ApplicationCacheResource" }, "description": "Application cache resources." }
+            ]
+        },
+        {
+            "id": "FrameWithManifest",
+            "type": "object",
+            "description": "Frame identifier - manifest URL pair.",
+            "properties": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame identifier." },
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "status", "type": "integer", "description": "Application cache status." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "getFramesWithManifests",
+            "returns": [
+                { "name": "frameIds", "type": "array", "items": { "$ref": "FrameWithManifest" }, "description": "Array of frame identifiers with manifest urls for each frame containing a document associated with some application cache." }
+            ],
+            "description": "Returns array of frame identifiers with manifest urls for each frame containing a document associated with some application cache."
+        },
+        {
+            "name": "enable",
+            "description": "Enables application cache domain notifications."
+        },
+        {
+            "name": "getManifestForFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose manifest is retrieved." }
+            ],
+            "returns": [
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL for document in the given frame." }
+            ],
+            "description": "Returns manifest URL for document in the given frame."
+        },
+        {
+            "name": "getApplicationCacheForFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache is retrieved." }
+            ],
+            "returns": [
+                { "name": "applicationCache", "$ref": "ApplicationCache", "description": "Relevant application cache data for the document in given frame." }
+            ],
+            "description": "Returns relevant application cache data for the document in given frame."
+        }
+    ],
+    "events": [
+        {
+            "name": "applicationCacheStatusUpdated",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame containing document whose application cache updated status." },
+                { "name": "manifestURL", "type": "string", "description": "Manifest URL." },
+                { "name": "status", "type": "integer", "description": "Updated application cache status." }
+            ]
+        },
+        {
+            "name": "networkStateUpdated",
+            "parameters": [
+                { "name": "isNowOnline", "type": "boolean" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "CSS",
+    "description": "This domain exposes CSS read/write operations. All CSS objects, like stylesheets, rules, and styles, have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). Alternatively, a client can discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "StyleSheetId",
+            "type": "string"
+        },
+        {
+            "id": "CSSStyleId",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                { "name": "ordinal", "type": "integer", "description": "The style ordinal within the stylesheet." }
+            ],
+            "description": "This object identifies a CSS style in a unique way."
+        },
+        {
+            "id": "StyleSheetOrigin",
+            "type": "string",
+            "enum": ["user", "user-agent", "inspector", "regular"],
+            "description": "Stylesheet type: \"user\" for user stylesheets, \"user-agent\" for user-agent stylesheets, \"inspector\" for stylesheets created by the inspector (i.e. those holding the \"via inspector\" rules), \"regular\" for regular stylesheets."
+        },
+        {
+            "id": "CSSRuleId",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
+                { "name": "ordinal", "type": "integer", "description": "The rule ordinal within the stylesheet." }
+            ],
+            "description": "This object identifies a CSS rule in a unique way."
+        },
+        {
+            "id": "PseudoIdMatches",
+            "type": "object",
+            "properties": [
+                { "name": "pseudoId", "type": "integer", "description": "Pseudo style identifier (see <code>enum PseudoId</code> in <code>RenderStyleConstants.h</code>)."},
+                { "name": "matches", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules applicable to the pseudo style."}
+            ],
+            "description": "CSS rule collection for a single pseudo style."
+        },
+        {
+            "id": "InheritedStyleEntry",
+            "type": "object",
+            "properties": [
+                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "The ancestor node's inline style, if any, in the style inheritance chain." },
+                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "description": "Matches of CSS rules matching the ancestor node in the style inheritance chain." }
+            ],
+            "description": "CSS rule collection for a single pseudo style."
+        },
+        {
+            "id": "RuleMatch",
+            "type": "object",
+            "properties": [
+                { "name": "rule", "$ref": "CSSRule", "description": "CSS rule in the match." },
+                { "name": "matchingSelectors", "type": "array", "items": { "type": "integer" }, "description": "Matching selector indices in the rule's selectorList selectors (0-based)." }
+            ],
+            "description": "Match data for a CSS rule."
+        },
+        {
+            "id": "CSSSelector",
+            "type": "object",
+            "properties": [
+                { "name": "text", "type": "string", "description": "Canonicalized selector text." },
+                { "name": "specificity", "optional": true, "type": "array", "items": { "type": "integer" }, "description": "Specificity (a, b, c) tuple. Included if the selector is sent in response to CSS.getMatchedStylesForNode which provides a context element." },
+                { "name": "dynamic", "optional": true, "type": "boolean", "description": "Whether or not the specificity can be dynamic. Included if the selector is sent in response to CSS.getMatchedStylesForNode which provides a context element." }
+            ],
+            "description": "CSS selector."
+        },
+        {
+            "id": "SelectorList",
+            "type": "object",
+            "properties": [
+                { "name": "selectors", "type": "array", "items": { "$ref": "CSSSelector" }, "description": "Selectors in the list." },
+                { "name": "text", "type": "string", "description": "Rule selector text." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Rule selector range in the underlying resource (if available)." }
+            ],
+            "description": "Selector list data."
+        },
+        {
+            "id": "CSSStyleAttribute",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "DOM attribute name (e.g. \"width\")."},
+                { "name": "style", "$ref": "CSSStyle", "description": "CSS style generated by the respective DOM attribute."}
+            ],
+            "description": "CSS style information for a DOM style attribute."
+        },
+        {
+            "id": "CSSStyleSheetHeader",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Owner frame identifier."},
+                { "name": "sourceURL", "type": "string", "description": "Stylesheet resource URL."},
+                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Stylesheet origin."},
+                { "name": "title", "type": "string", "description": "Stylesheet title."},
+                { "name": "disabled", "type": "boolean", "description": "Denotes whether the stylesheet is disabled."},
+                { "name": "isInline", "type": "boolean", "description": "Whether this stylesheet is a <style> tag created by the parser. This is not set for document.written <style> tags." },
+                { "name": "startLine", "type": "number", "description": "Line offset of the stylesheet within the resource (zero based)." },
+                { "name": "startColumn", "type": "number", "description": "Column offset of the stylesheet within the resource (zero based)." }
+            ],
+            "description": "CSS stylesheet metainformation."
+        },
+        {
+            "id": "CSSStyleSheetBody",
+            "type": "object",
+            "properties": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "The stylesheet identifier."},
+                { "name": "rules", "type": "array", "items": { "$ref": "CSSRule" }, "description": "Stylesheet resource URL."},
+                { "name": "text", "type": "string", "optional": true, "description": "Stylesheet resource contents (if available)."}
+            ],
+            "description": "CSS stylesheet contents."
+        },
+        {
+            "id": "CSSRule",
+            "type": "object",
+            "properties": [
+                { "name": "ruleId", "$ref": "CSSRuleId", "optional": true, "description": "The CSS rule identifier (absent for user agent stylesheet and user-specified stylesheet rules)."},
+                { "name": "selectorList", "$ref": "SelectorList", "description": "Rule selector data." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "Parent stylesheet resource URL (for regular rules)."},
+                { "name": "sourceLine", "type": "integer", "description": "Line ordinal of the rule selector start character in the resource."},
+                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."},
+                { "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." },
+                { "name": "media", "type": "array", "items": { "$ref": "CSSMedia" }, "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards." }
+            ],
+            "description": "CSS rule representation."
+        },
+        {
+            "id": "SourceRange",
+            "type": "object",
+            "properties": [
+                { "name": "startLine", "type": "integer", "description": "Start line of range." },
+                { "name": "startColumn", "type": "integer", "description": "Start column of range (inclusive)." },
+                { "name": "endLine", "type": "integer", "description": "End line of range" },
+                { "name": "endColumn", "type": "integer", "description": "End column of range (exclusive)." }
+            ],
+            "description": "Text range within a resource."
+        },
+        {
+            "id": "ShorthandEntry",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Shorthand name." },
+                { "name": "value", "type": "string", "description": "Shorthand value." }
+            ]
+        },
+        {
+            "id": "CSSPropertyInfo",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "longhands", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Longhand property names." },
+                { "name": "values", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Supported values for this property." }
+            ]
+        },
+        {
+            "id": "CSSComputedStyleProperty",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Computed style property name." },
+                { "name": "value", "type": "string", "description": "Computed style property value." }
+            ]
+        },
+        {
+            "id": "CSSStyle",
+            "type": "object",
+            "properties": [
+                { "name": "styleId", "$ref": "CSSStyleId", "optional": true, "description": "The CSS style identifier (absent for attribute styles)." },
+                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSProperty" }, "description": "CSS properties in the style." },
+                { "name": "shorthandEntries", "type": "array", "items": { "$ref": "ShorthandEntry" }, "description": "Computed values for all shorthands found in the style." },
+                { "name": "cssText", "type": "string", "optional": true, "description": "Style declaration text (if available)." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Style declaration range in the enclosing stylesheet (if available)." },
+                { "name": "width", "type": "string", "optional": true, "description": "The effective \"width\" property value from this style." },
+                { "name": "height", "type": "string", "optional": true, "description": "The effective \"height\" property value from this style." }
+            ],
+            "description": "CSS style representation."
+        },
+        {
+            "id": "CSSPropertyStatus",
+	    "type": "string",
+            "enum": ["active", "inactive", "disabled", "style"],
+            "description": "The property status: \"active\" if the property is effective in the style, \"inactive\" if the property is overridden by a same-named property in this style later on, \"disabled\" if the property is disabled by the user, \"style\" (implied if absent) if the property is reported by the browser rather than by the CSS source parser."
+        },
+        {
+            "id": "CSSProperty",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "The property name." },
+                { "name": "value", "type": "string", "description": "The property value." },
+                { "name": "priority", "type": "string", "optional": true, "description": "The property priority (implies \"\" if absent)." },
+                { "name": "implicit", "type": "boolean", "optional": true, "description": "Whether the property is implicit (implies <code>false</code> if absent)." },
+                { "name": "text", "type": "string", "optional": true, "description": "The full property text as specified in the style." },
+                { "name": "parsedOk", "type": "boolean", "optional": true, "description": "Whether the property is understood by the browser (implies <code>true</code> if absent)." },
+                { "name": "status", "$ref": "CSSPropertyStatus", "optional": true, "description": "Whether the property is active or disabled." },
+                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "The entire property range in the enclosing style declaration (if available)." }
+            ],
+            "description": "CSS style effective visual dimensions and source offsets."
+        },
+        {
+            "id": "CSSMedia",
+            "type": "object",
+            "properties": [
+                { "name": "text", "type": "string", "description": "Media query text." },
+                { "name": "source", "type": "string", "enum": ["mediaRule", "importRule", "linkedSheet", "inlineSheet"], "description": "Source of the media query: \"mediaRule\" if specified by a @media rule, \"importRule\" if specified by an @import rule, \"linkedSheet\" if specified by a \"media\" attribute in a linked stylesheet's LINK tag, \"inlineSheet\" if specified by a \"media\" attribute in an inline stylesheet's STYLE tag." },
+                { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the media query description." },
+                { "name": "sourceLine", "type": "integer", "optional": true, "description": "Line in the document containing the media query (not defined for the \"stylesheet\" source)." }
+            ],
+            "description": "CSS media query descriptor."
+        },
+        {
+            "id": "Region",
+            "type": "object",
+            "properties": [
+                { "name": "regionOverset", "type": "string", "enum": ["overset", "fit", "empty"], "description": "The \"overset\" attribute of a Named Flow." },
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The corresponding DOM node id." }
+            ],
+            "description": "This object represents a region that flows from a Named Flow."
+        },
+        {
+            "id": "NamedFlow",
+            "type": "object",
+            "properties": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "name", "type": "string", "description": "Named Flow identifier." },
+                { "name": "overset", "type": "boolean", "description": "The \"overset\" attribute of a Named Flow." },
+                { "name": "content", "type": "array", "items": { "$ref": "DOM.NodeId" }, "description": "An array of nodes that flow into the Named Flow." },
+                { "name": "regions", "type": "array", "items": { "$ref": "Region" }, "description": "An array of regions associated with the Named Flow." }
+            ],
+            "description": "This object represents a Named Flow."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables the CSS agent for the given page. Clients should not assume that the CSS agent has been enabled until the result of this command is received."
+        },
+        {
+            "name": "disable",
+            "description": "Disables the CSS agent for the given page."
+        },
+        {
+            "name": "getMatchedStylesForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" },
+                { "name": "includePseudo", "type": "boolean", "optional": true, "description": "Whether to include pseudo styles (default: true)." },
+                { "name": "includeInherited", "type": "boolean", "optional": true, "description": "Whether to include inherited styles (default: true)." }
+            ],
+            "returns": [
+                { "name": "matchedCSSRules", "type": "array", "items": { "$ref": "RuleMatch" }, "optional": true, "description": "CSS rules matching this node, from all applicable stylesheets." },
+                { "name": "pseudoElements", "type": "array", "items": { "$ref": "PseudoIdMatches" }, "optional": true, "description": "Pseudo style matches for this node." },
+                { "name": "inherited", "type": "array", "items": { "$ref": "InheritedStyleEntry" }, "optional": true, "description": "A chain of inherited styles (from the immediate node parent up to the DOM tree root)." }
+            ],
+            "description": "Returns requested styles for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getInlineStylesForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" }
+            ],
+            "returns": [
+                { "name": "inlineStyle", "$ref": "CSSStyle", "optional": true, "description": "Inline style for the specified DOM node." },
+                { "name": "attributesStyle", "$ref": "CSSStyle", "optional": true, "description": "Attribute-defined element style (e.g. resulting from \"width=20 height=100%\")."}
+            ],
+            "description": "Returns the styles defined inline (explicitly in the \"style\" attribute and implicitly, using DOM attributes) for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getComputedStyleForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId" }
+            ],
+            "returns": [
+                { "name": "computedStyle", "type": "array", "items": { "$ref": "CSSComputedStyleProperty" }, "description": "Computed style for the specified DOM node." }
+            ],
+            "description": "Returns the computed style for a DOM node identified by <code>nodeId</code>."
+        },
+        {
+            "name": "getAllStyleSheets",
+            "returns": [
+                { "name": "headers", "type": "array", "items": { "$ref": "CSSStyleSheetHeader" }, "description": "Descriptor entries for all available stylesheets." }
+            ],
+            "description": "Returns metainfo entries for all known stylesheets."
+        },
+        {
+            "name": "getStyleSheet",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "returns": [
+                { "name": "styleSheet", "$ref": "CSSStyleSheetBody", "description": "Stylesheet contents for the specified <code>styleSheetId</code>." }
+            ],
+            "description": "Returns stylesheet data for the specified <code>styleSheetId</code>."
+        },
+        {
+            "name": "getStyleSheetText",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "returns": [
+                { "name": "text", "type": "string", "description": "The stylesheet text." }
+            ],
+            "description": "Returns the current textual content and the URL for a stylesheet."
+        },
+        {
+            "name": "setStyleSheetText",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" },
+                { "name": "text", "type": "string" }
+            ],
+            "description": "Sets the new stylesheet text, thereby invalidating all existing <code>CSSStyleId</code>'s and <code>CSSRuleId</code>'s contained by this stylesheet."
+        },
+        {
+            "name": "setStyleText",
+            "parameters": [
+                { "name": "styleId", "$ref": "CSSStyleId" },
+                { "name": "text", "type": "string" }
+            ],
+            "returns": [
+                { "name": "style", "$ref": "CSSStyle", "description": "The resulting style after the text modification." }
+            ],
+            "description": "Sets the new <code>text</code> for the respective style."
+        },
+        {
+            "name": "setRuleSelector",
+            "parameters": [
+                { "name": "ruleId", "$ref": "CSSRuleId" },
+                { "name": "selector", "type": "string" }
+            ],
+            "returns": [
+                { "name": "rule", "$ref": "CSSRule", "description": "The resulting rule after the selector modification." }
+            ],
+            "description": "Modifies the rule selector."
+        },
+        {
+            "name": "createStyleSheet",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame where the new \"inspector\" stylesheet should be created." }
+            ],
+            "returns": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the created \"inspector\" stylesheet." }
+            ],
+            "description": "Creates a new special \"inspector\" stylesheet in the frame with given <code>frameId</code>."
+        },
+        {
+            "name": "addRule",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" },
+                { "name": "selector", "type": "string" }
+            ],
+            "returns": [
+                { "name": "rule", "$ref": "CSSRule", "description": "The newly created rule." }
+            ],
+            "description": "Creates a new empty rule with the given <code>selector</code> in a stylesheet with given <code>styleSheetId</code>."
+        },
+        {
+            "name": "getSupportedCSSProperties",
+            "returns": [
+                { "name": "cssProperties", "type": "array", "items": { "$ref": "CSSPropertyInfo" }, "description": "Supported property metainfo." }
+            ],
+            "description": "Returns all supported CSS property names."
+        },
+        {
+            "name": "getSupportedSystemFontFamilyNames",
+            "returns": [
+                { "name": "fontFamilyNames", "type": "array", "items": { "type": "string" }, "description": "Supported system font families." }
+            ],
+            "description": "Returns all supported system font family names."
+        },
+        {
+            "name": "forcePseudoState",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The element id for which to force the pseudo state." },
+                { "name": "forcedPseudoClasses", "type": "array", "items": { "type": "string", "enum": ["active", "focus", "hover", "visited"] }, "description": "Element pseudo classes to force when computing the element's style." }
+            ],
+            "description": "Ensures that the given node will have specified pseudo-classes whenever its style is computed by the browser."
+        },
+        {
+            "name": "getNamedFlowCollection",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id for which to get the Named Flow Collection." }
+            ],
+            "returns": [
+                { "name": "namedFlows", "type": "array", "items": { "$ref": "NamedFlow" }, "description": "An array containing the Named Flows in the document." }
+            ],
+            "description": "Returns the Named Flows from the document."
+        }
+    ],
+    "events": [
+        {
+            "name": "mediaQueryResultChanged",
+            "description": "Fires whenever a MediaQuery result changes (for example, after a browser window has been resized.) The current implementation considers only viewport-dependent media features."
+        },
+        {
+            "name": "styleSheetChanged",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId" }
+            ],
+            "description": "Fired whenever a stylesheet is changed as a result of the client operation."
+        },
+        {
+            "name": "styleSheetAdded",
+            "parameters": [
+                { "name": "header", "$ref": "CSSStyleSheetHeader", "description": "Added stylesheet metainfo." }
+            ],
+            "description": "Fired whenever an active document stylesheet is added."
+        },
+        {
+            "name": "styleSheetRemoved",
+            "parameters": [
+                { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the removed stylesheet." }
+            ],
+            "description": "Fired whenever an active document stylesheet is removed."
+        },
+        {
+            "name": "namedFlowCreated",
+            "parameters": [
+                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The new Named Flow." }
+            ],
+            "description": "Fires when a Named Flow is created."
+        },
+        {
+            "name": "namedFlowRemoved",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Identifier of the removed Named Flow." }
+            ],
+            "description": "Fires when a Named Flow is removed: has no associated content nodes and regions."
+        },
+        {
+            "name": "regionOversetChanged",
+            "parameters": [
+                { "name": "namedFlow", "$ref": "NamedFlow", "description": "The Named Flow containing the regions whose regionOverset values changed." }
+            ],
+            "description": "Fires if any of the regionOverset values changed in a Named Flow's region chain."
+        },
+        {
+            "name": "registeredNamedFlowContentElement",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was registered." },
+                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the registered content node." },
+                { "name": "nextContentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the element following the registered content node." }
+            ],
+            "description": "Fires when a Named Flow's has been registered with a new content node."
+        },
+        {
+            "name": "unregisteredNamedFlowContentElement",
+            "parameters": [
+                { "name": "documentNodeId", "$ref": "DOM.NodeId", "description": "The document node id." },
+                { "name": "flowName", "type": "string", "description": "Named Flow identifier for which the new content element was unregistered." },
+                { "name": "contentNodeId", "$ref": "DOM.NodeId", "description": "The node id of the unregistered content node." }
+            ],
+            "description": "Fires when a Named Flow's has been registered with a new content node."
+        }
+    ]
+}
+,
+{
+    "domain": "Console",
+    "description": "Console domain defines methods and events for interaction with the JavaScript console. Console collects messages created by means of the <a href='http://getfirebug.com/wiki/index.php/Console_API'>JavaScript Console API</a>. One needs to enable this domain using <code>enable</code> command in order to start receiving the console messages. Browser collects messages issued while console domain is not enabled as well and reports them using <code>messageAdded</code> notification upon enabling.",
+    "types": [
+        {
+            "id": "ConsoleMessage",
+            "type": "object",
+            "description": "Console message.",
+            "properties": [
+                { "name": "source", "type": "string", "enum": ["xml", "javascript", "network", "console-api", "storage", "appcache", "rendering", "css", "security", "content-blocker", "other"], "description": "Message source." },
+                { "name": "level", "type": "string", "enum": ["log", "info", "warning", "error", "debug"], "description": "Message severity." },
+                { "name": "text", "type": "string", "description": "Message text." },
+                { "name": "type", "type": "string", "optional": true, "enum": ["log", "dir", "dirxml", "table", "trace", "clear", "startGroup", "startGroupCollapsed", "endGroup", "assert", "timing", "profile", "profileEnd"], "description": "Console message type." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL of the message origin." },
+                { "name": "line", "type": "integer", "optional": true, "description": "Line number in the resource that generated this message." },
+                { "name": "column", "type": "integer", "optional": true, "description": "Column number on the line in the resource that generated this message." },
+                { "name": "repeatCount", "type": "integer", "optional": true, "description": "Repeat count for repeated messages." },
+                { "name": "parameters", "type": "array", "items": { "$ref": "Runtime.RemoteObject" }, "optional": true, "description": "Message parameters in case of the formatted message." },
+                { "name": "stackTrace", "$ref": "StackTrace", "optional": true, "description": "JavaScript stack trace for assertions and error messages." },
+                { "name": "networkRequestId", "$ref": "Network.RequestId", "optional": true, "description": "Identifier of the network request associated with this message." }
+            ]
+        },
+        {
+            "id": "CallFrame",
+            "type": "object",
+            "description": "Stack entry for console errors and assertions.",
+            "properties": [
+                { "name": "functionName", "type": "string", "description": "JavaScript function name." },
+                { "name": "url", "type": "string", "description": "JavaScript script name or url." },
+                { "name": "lineNumber", "type": "integer", "description": "JavaScript script line number." },
+                { "name": "columnNumber", "type": "integer", "description": "JavaScript script column number." }
+            ]
+        },
+        {
+            "id": "StackTrace",
+            "type": "array",
+            "items": { "$ref": "CallFrame" },
+            "description": "Call frames for assertions or error messages."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables console domain, sends the messages collected so far to the client by means of the <code>messageAdded</code> notification."
+        },
+        {
+            "name": "disable",
+            "description": "Disables console domain, prevents further console messages from being reported to the client."
+        },
+        {
+            "name": "clearMessages",
+            "description": "Clears console messages collected in the browser."
+        },
+        {
+            "name": "setMonitoringXHREnabled",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "Monitoring enabled state." }
+            ],
+            "description": "Toggles monitoring of XMLHttpRequest. If <code>true</code>, console will receive messages upon each XHR issued."
+        },
+        {
+            "name": "addInspectedNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "DOM node id to be accessible by means of $0 command line API." }
+            ],
+            "description": "Enables console to refer to the node with given id via $0 (see Command Line API for more details)."
+        }
+    ],
+    "events": [
+        {
+            "name": "messageAdded",
+            "parameters": [
+                { "name": "message", "$ref": "ConsoleMessage", "description": "Console message that has been added." }
+            ],
+            "description": "Issued when new console message is added."
+        },
+        {
+            "name": "messageRepeatCountUpdated",
+            "parameters": [
+                { "name": "count", "type": "integer", "description": "New repeat count value." }
+            ],
+            "description": "Issued when subsequent message(s) are equal to the previous one(s)."
+        },
+        {
+            "name": "messagesCleared",
+            "description": "Issued when console is cleared. This happens either upon <code>clearMessages</code> command or after page navigation."
+        }
+    ]
+}
+,
+{
+    "domain": "DOM",
+    "description": "This domain exposes DOM read/write operations. Each DOM Node is represented with its mirror object that has an <code>id</code>. This <code>id</code> can be used to get additional information on the Node, resolve it into the JavaScript object wrapper, etc. It is important that client receives DOM events only for the nodes that are known to the client. Backend keeps track of the nodes that were sent to the client and never sends the same node twice. It is client's responsibility to collect information about the nodes that were sent to the client.<p>Note that <code>iframe</code> owner elements will return corresponding document elements as their child nodes.</p>",
+    "availability": "web",
+    "types": [
+        {
+            "id": "NodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier."
+        },
+        {
+            "id": "BackendNodeId",
+            "type": "integer",
+            "description": "Unique DOM node identifier used to reference a node that may not have been pushed to the front-end."
+        },
+        {
+            "id": "PseudoType",
+            "type": "string",
+            "enum": ["before", "after"],
+            "description": "Pseudo element type."
+        },
+        {
+            "id": "LiveRegionRelevant",
+            "type": "string",
+            "enum": ["additions", "removals", "text"],
+            "description": "Token values of @aria-relevant attribute."
+        },
+        {
+            "id": "Node",
+            "type": "object",
+            "properties": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Node identifier that is passed into the rest of the DOM messages as the <code>nodeId</code>. Backend will only push node with given <code>id</code> once. It is aware of all requested nodes and will only fire DOM events for nodes known to the client." },
+                { "name": "nodeType", "type": "integer", "description": "<code>Node</code>'s nodeType." },
+                { "name": "nodeName", "type": "string", "description": "<code>Node</code>'s nodeName." },
+                { "name": "localName", "type": "string", "description": "<code>Node</code>'s localName." },
+                { "name": "nodeValue", "type": "string", "description": "<code>Node</code>'s nodeValue." },
+                { "name": "childNodeCount", "type": "integer", "optional": true, "description": "Child count for <code>Container</code> nodes." },
+                { "name": "children", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Child nodes of this node when requested with children." },
+                { "name": "attributes", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Attributes of the <code>Element</code> node in the form of flat array <code>[name1, value1, name2, value2]</code>." },
+                { "name": "documentURL", "type": "string", "optional": true, "description": "Document URL that <code>Document</code> or <code>FrameOwner</code> node points to." },
+                { "name": "baseURL", "type": "string", "optional": true, "description": "Base URL that <code>Document</code> or <code>FrameOwner</code> node uses for URL completion." },
+                { "name": "publicId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s publicId." },
+                { "name": "systemId", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s systemId." },
+                { "name": "internalSubset", "type": "string", "optional": true, "description": "<code>DocumentType</code>'s internalSubset." },
+                { "name": "xmlVersion", "type": "string", "optional": true, "description": "<code>Document</code>'s XML version in case of XML documents." },
+                { "name": "name", "type": "string", "optional": true, "description": "<code>Attr</code>'s name." },
+                { "name": "value", "type": "string", "optional": true, "description": "<code>Attr</code>'s value." },
+                { "name": "pseudoType", "$ref": "PseudoType", "optional": true, "description": "Pseudo element type for this node." },
+                { "name": "frameId", "$ref": "Network.FrameId", "optional": true, "description": "Frame ID for frame owner elements." },
+                { "name": "contentDocument", "$ref": "Node", "optional": true, "description": "Content document for frame owner elements." },
+                { "name": "shadowRoots", "type": "array", "optional": true, "items": { "$ref": "Node" }, "description": "Shadow root list for given element host." },
+                { "name": "templateContent", "$ref": "Node", "optional": true, "description": "Content document fragment for template elements" },
+                { "name": "pseudoElements", "type": "array", "items": { "$ref": "Node" }, "optional": true, "description": "Pseudo elements associated with this node." },
+                { "name": "role", "type": "string", "optional": true, "description": "Computed value for first recognized role token, default role per element, or overridden role." }
+            ],
+            "description": "DOM interaction is implemented in terms of mirror objects that represent the actual DOM nodes. DOMNode is a base node mirror type."
+        },
+        {
+            "id": "EventListener",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "description": "<code>EventListener</code>'s type." },
+                { "name": "useCapture", "type": "boolean", "description": "<code>EventListener</code>'s useCapture." },
+                { "name": "isAttribute", "type": "boolean", "description": "<code>EventListener</code>'s isAttribute." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                { "name": "handlerBody", "type": "string", "description": "Event handler function body." },
+                { "name": "location", "$ref": "Debugger.Location", "optional": true, "description": "Handler code location." },
+                { "name": "sourceName", "type": "string", "optional": true, "description": "Source script URL." },
+                { "name": "handler", "$ref": "Runtime.RemoteObject", "optional": true, "description": "Event handler function value." }
+            ],
+            "description": "A structure holding event listener properties."
+        },
+        {
+            "id": "AccessibilityProperties",
+            "description": "A structure holding accessibility properties.",
+            "type": "object",
+            "properties": [
+                { "name": "activeDescendantNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of the accessibility object referenced by aria-activedescendant." },
+                { "name": "busy", "type": "boolean", "optional": true, "description": "Value of @aria-busy on current or ancestor node." },
+                { "name": "checked", "type": "string", "optional": true, "enum": ["true", "false", "mixed"], "description": "Checked state of certain form controls." },
+                { "name": "childNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of the accessibility tree children if available." },
+                { "name": "controlledNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-controls." },
+                { "name": "disabled", "type": "boolean", "optional": true, "description": "Disabled state of form controls." },
+                { "name": "exists", "type": "boolean", "description": "Indicates whether there is an existing AX object for the DOM node. If this is false, all the other properties will be default values." },
+                { "name": "expanded", "type": "boolean", "optional": true, "description": "Expanded state." },
+                { "name": "flowedNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-flowto." },
+                { "name": "focused", "type": "boolean", "optional": true, "description": "Focused state. Only defined on focusable elements." },
+                { "name": "ignored", "type": "boolean", "optional": true, "description": "Indicates whether the accessibility of the associated AX object node is ignored, whether heuristically or explicitly." },
+                { "name": "ignoredByDefault", "type": "boolean", "optional": true, "description": "State indicating whether the accessibility of the associated AX object node is ignored by default for node type." },
+                { "name": "invalid", "type": "string", "optional": true, "enum": ["true", "false", "grammar", "spelling"], "description": "Invalid status of form controls." },
+                { "name": "hidden", "type": "boolean", "optional": true, "description": "Hidden state. True if node or an ancestor is hidden via CSS or explicit @aria-hidden, to clarify why the element is ignored." },
+                { "name": "label", "type": "string", "description": "Computed label value for the node, sometimes calculated by referencing other nodes." },
+                { "name": "liveRegionAtomic", "type": "boolean", "optional": true, "description": "Value of @aria-atomic." },
+                { "name": "liveRegionRelevant", "type": "array", "items": { "type": "string" }, "optional": true, "description": "Token value(s) of element's @aria-relevant attribute. Array of string values matching $ref LiveRegionRelevant. FIXME: Enum values blocked by http://webkit.org/b/133711" },
+                { "name": "liveRegionStatus", "type": "string", "optional": true, "enum": ["assertive", "polite", "off"], "description": "Value of element's @aria-live attribute." },
+                { "name": "mouseEventNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of node or closest ancestor node that has a mousedown, mouseup, or click event handler." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Target <code>DOMNode</code> id." },
+                { "name": "ownedNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any nodes referenced via @aria-owns." },
+                { "name": "parentNodeId", "$ref": "NodeId", "optional": true, "description": "<code>DOMNode</code> id of the accessibility tree parent object if available." },
+                { "name": "pressed", "type": "boolean", "optional": true, "description": "Pressed state for toggle buttons." },
+                { "name": "readonly", "type": "boolean", "optional": true, "description": "Readonly state of text controls." },
+                { "name": "required", "type": "boolean", "optional": true, "description": "Required state of form controls." },
+                { "name": "role", "type": "string", "description": "Computed value for first recognized role token, default role per element, or overridden role." },
+                { "name": "selected", "type": "boolean", "optional": true, "description": "Selected state of certain form controls." },
+                { "name": "selectedChildNodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Array of <code>DOMNode</code> ids of any children marked as selected." }
+            ]
+        },
+        {
+            "id": "RGBAColor",
+            "type": "object",
+            "properties": [
+                { "name": "r", "type": "integer", "description": "The red component, in the [0-255] range." },
+                { "name": "g", "type": "integer", "description": "The green component, in the [0-255] range." },
+                { "name": "b", "type": "integer", "description": "The blue component, in the [0-255] range." },
+                { "name": "a", "type": "number", "optional": true, "description": "The alpha component, in the [0-1] range (default: 1)." }
+            ],
+            "description": "A structure holding an RGBA color."
+        },
+        {
+            "id": "Quad",
+            "type": "array",
+            "items": { "type": "number" },
+            "minItems": 8,
+            "maxItems": 8,
+            "description": "An array of quad vertices, x immediately followed by y for each point, points clock-wise."
+        },
+        {
+            "id": "HighlightConfig",
+            "type": "object",
+            "properties": [
+                { "name": "showInfo", "type": "boolean", "optional": true, "description": "Whether the node info tooltip should be shown (default: false)." },
+                { "name": "contentColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                { "name": "paddingColor", "$ref": "RGBAColor", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
+                { "name": "borderColor", "$ref": "RGBAColor", "optional": true, "description": "The border highlight fill color (default: transparent)." },
+                { "name": "marginColor", "$ref": "RGBAColor", "optional": true, "description": "The margin highlight fill color (default: transparent)." }
+            ],
+            "description": "Configuration data for the highlighting of page elements."
+        }
+    ],
+    "commands": [
+        {
+            "name": "getDocument",
+            "returns": [
+                { "name": "root", "$ref": "Node", "description": "Resulting node." }
+            ],
+            "description": "Returns the root DOM node to the caller."
+        },
+        {
+            "name": "requestChildNodes",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get children for." },
+                { "name": "depth", "type": "integer", "optional": true, "description": "The maximum depth at which children should be retrieved, defaults to 1. Use -1 for the entire subtree or provide an integer larger than 0." }
+            ],
+            "description": "Requests that children of the node with given id are returned to the caller in form of <code>setChildNodes</code> events where not only immediate children are retrieved, but all children down to the specified depth."
+        },
+        {
+            "name": "querySelector",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                { "name": "selector", "type": "string", "description": "Selector string." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Query selector result." }
+            ],
+            "description": "Executes <code>querySelector</code> on a given node."
+        },
+        {
+            "name": "querySelectorAll",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to query upon." },
+                { "name": "selector", "type": "string", "description": "Selector string." }
+            ],
+            "returns": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Query selector result." }
+            ],
+            "description": "Executes <code>querySelectorAll</code> on a given node."
+        },
+        {
+            "name": "setNodeName",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set name for." },
+                { "name": "name", "type": "string", "description": "New node's name." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "New node's id." }
+            ],
+            "description": "Sets node name for a node with given id."
+        },
+        {
+            "name": "setNodeValue",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set value for." },
+                { "name": "value", "type": "string", "description": "New node's value." }
+            ],
+            "description": "Sets node value for a node with given id."
+        },
+        {
+            "name": "removeNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to remove." }
+            ],
+            "description": "Removes node with given id."
+        },
+        {
+            "name": "setAttributeValue",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attribute for." },
+                { "name": "name", "type": "string", "description": "Attribute name." },
+                { "name": "value", "type": "string", "description": "Attribute value." }
+            ],
+            "description": "Sets attribute for an element with given id."
+        },
+        {
+            "name": "setAttributesAsText",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to set attributes for." },
+                { "name": "text", "type": "string", "description": "Text with a number of attributes. Will parse this text using HTML parser." },
+                { "name": "name", "type": "string", "optional": true, "description": "Attribute name to replace with new attributes derived from text in case text parsed successfully." }
+            ],
+            "description": "Sets attributes on element with given id. This method is useful when user edits some existing attribute value and types in several attribute name/value pairs."
+        },
+        {
+            "name": "removeAttribute",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the element to remove attribute from." },
+                { "name": "name", "type": "string", "description": "Name of the attribute to remove." }
+            ],
+            "description": "Removes attribute with given name from an element with given id."
+        },
+        {
+            "name": "getEventListenersForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get listeners for." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name for handler value. Handler value is not returned without this parameter specified." }
+            ],
+            "returns": [
+                { "name": "listeners", "type": "array", "items": { "$ref": "EventListener"}, "description": "Array of relevant listeners." }
+            ],
+            "description": "Returns event listeners relevant to the node."
+        },
+        {
+            "name": "getAccessibilityPropertiesForNode",
+            "description": "Returns a dictionary of accessibility properties for the node.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for which to get accessibility properties." }
+            ],
+            "returns": [
+                { "name": "properties", "$ref": "AccessibilityProperties", "description": "Dictionary of relevant accessibility properties." }
+            ]
+        },
+        {
+            "name": "getOuterHTML",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to get markup for." }
+            ],
+            "returns": [
+                { "name": "outerHTML", "type": "string", "description": "Outer HTML markup." }
+            ],
+            "description": "Returns node's HTML markup."
+        },
+        {
+            "name": "setOuterHTML",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to set markup for." },
+                { "name": "outerHTML", "type": "string", "description": "Outer HTML markup to set." }
+            ],
+            "description": "Sets node HTML markup, returns new node id."
+        },
+        {
+            "name": "performSearch",
+            "parameters": [
+                { "name": "query", "type": "string", "description": "Plain text or query selector or XPath search query." },
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "optional": true, "description": "Ids of nodes to use as starting points for the search." }
+            ],
+            "returns": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                { "name": "resultCount", "type": "integer", "description": "Number of search results." }
+            ],
+            "description": "Searches for a given string in the DOM tree. Use <code>getSearchResults</code> to access search results or <code>cancelSearch</code> to end this search session."
+        },
+        {
+            "name": "getSearchResults",
+            "parameters": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." },
+                { "name": "fromIndex", "type": "integer", "description": "Start index of the search result to be returned." },
+                { "name": "toIndex", "type": "integer", "description": "End index of the search result to be returned." }
+            ],
+            "returns": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the search result nodes." }
+            ],
+            "description": "Returns search results from given <code>fromIndex</code> to given <code>toIndex</code> from the sarch with the given identifier."
+        },
+        {
+            "name": "discardSearchResults",
+            "parameters": [
+                { "name": "searchId", "type": "string", "description": "Unique search session identifier." }
+            ],
+            "description": "Discards search results from the session with the given id. <code>getSearchResults</code> should no longer be called for that search."
+        },
+        {
+            "name": "requestNode",
+            "parameters": [
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "description": "JavaScript object id to convert into node." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Node id for given object." }
+            ],
+            "description": "Requests that the node is sent to the caller given the JavaScript node object reference. All nodes that form the path from the node to the root are also sent to the client as a series of <code>setChildNodes</code> notifications."
+        },
+        {
+            "name": "setInspectModeEnabled",
+            "parameters": [
+                { "name": "enabled", "type": "boolean", "description": "True to enable inspection mode, false to disable it." },
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "optional": true, "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>." }
+            ],
+            "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspect' command upon element selection."
+        },
+        {
+            "name": "highlightRect",
+            "parameters": [
+                { "name": "x", "type": "integer", "description": "X coordinate" },
+                { "name": "y", "type": "integer", "description": "Y coordinate" },
+                { "name": "width", "type": "integer", "description": "Rectangle width" },
+                { "name": "height", "type": "integer", "description": "Rectangle height" },
+                { "name": "color", "$ref": "RGBAColor", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                { "name": "outlineColor", "$ref": "RGBAColor", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+            ],
+            "description": "Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport."
+        },
+        {
+            "name": "highlightQuad",
+            "parameters": [
+                { "name": "quad", "$ref": "Quad", "description": "Quad to highlight" },
+                { "name": "color", "$ref": "RGBAColor", "optional": true, "description": "The highlight fill color (default: transparent)." },
+                { "name": "outlineColor", "$ref": "RGBAColor", "optional": true, "description": "The highlight outline color (default: transparent)." },
+                { "name": "usePageCoordinates", "type": "boolean", "optional": true, "description": "Indicates whether the provided parameters are in page coordinates or in viewport coordinates (the default)." }
+            ],
+            "description": "Highlights given quad. Coordinates are absolute with respect to the main frame viewport."
+        },
+        {
+            "name": "highlightSelector",
+            "parameters": [
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
+                { "name": "selectorString", "type": "string", "description": "A CSS selector for finding matching nodes to highlight." },
+                { "name": "frameId", "type": "string", "optional": true, "description": "Identifier of the frame which will be searched using the selector.  If not provided, the main frame will be used." }
+            ],
+            "description": "Highlights all DOM nodes that match a given selector. A string containing a CSS selector must be specified."
+        },
+        {
+            "name": "highlightNode",
+            "parameters": [
+                { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
+                { "name": "nodeId", "$ref": "NodeId", "optional": true, "description": "Identifier of the node to highlight." },
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "optional": true, "description": "JavaScript object id of the node to be highlighted." }
+            ],
+            "description": "Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified."
+        },
+        {
+            "name": "hideHighlight",
+            "description": "Hides DOM node highlight."
+        },
+        {
+            "name": "highlightFrame",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Identifier of the frame to highlight." },
+                { "name": "contentColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
+                { "name": "contentOutlineColor", "$ref": "RGBAColor", "optional": true, "description": "The content box highlight outline color (default: transparent)." }
+            ],
+            "description": "Highlights owner element of the frame with given id."
+        },
+        {
+            "name": "pushNodeByPathToFrontend",
+            "parameters": [
+                { "name": "path", "type": "string", "description": "Path to node in the proprietary format." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node for given path." }
+            ],
+            "description": "Requests that the node is sent to the caller given its path. // FIXME, use XPath"
+        },
+        {
+            "name": "pushNodeByBackendIdToFrontend",
+            "parameters": [
+                { "name": "backendNodeId", "$ref": "BackendNodeId", "description": "The backend node id of the node." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "The pushed node's id." }
+            ],
+            "description": "Requests that the node is sent to the caller given its backend node id."
+        },
+        {
+            "name": "releaseBackendNodeIds",
+            "parameters": [
+                { "name": "nodeGroup", "type": "string", "description": "The backend node ids group name." }
+            ],
+            "description": "Requests that group of <code>BackendNodeIds</code> is released."
+        },
+        {
+            "name": "resolveNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to resolve." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." }
+            ],
+            "returns": [
+                { "name": "object", "$ref": "Runtime.RemoteObject", "description": "JavaScript object wrapper for given node." }
+            ],
+            "description": "Resolves JavaScript node object for given node id."
+        },
+        {
+            "name": "getAttributes",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to retrieve attibutes for." }
+            ],
+            "returns": [
+                { "name": "attributes", "type": "array", "items": { "type": "string" }, "description": "An interleaved array of node attribute names and values." }
+            ],
+            "description": "Returns attributes for the specified node."
+        },
+        {
+            "name": "moveTo",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to drop." },
+                { "name": "targetNodeId", "$ref": "NodeId", "description": "Id of the element to drop into." },
+                { "name": "insertBeforeNodeId", "$ref": "NodeId", "optional": true, "description": "Drop node before given one." }
+            ],
+            "returns": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "New id of the moved node." }
+            ],
+            "description": "Moves node into the new container, places it before the given anchor."
+        },
+        {
+            "name": "undo",
+            "description": "Undoes the last performed action."
+        },
+        {
+            "name": "redo",
+            "description": "Re-does the last undone action."
+        },
+        {
+            "name": "markUndoableState",
+            "description": "Marks last undoable state."
+        },
+        {
+            "name": "focus",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node to focus." }
+            ],
+            "description": "Focuses the given element."
+        }
+    ],
+    "events": [
+        {
+            "name": "documentUpdated",
+            "description": "Fired when <code>Document</code> has been totally updated. Node ids are no longer valid."
+        },
+        {
+            "name": "setChildNodes",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Parent node id to populate with children." },
+                { "name": "nodes", "type": "array", "items": { "$ref": "Node"}, "description": "Child nodes array." }
+            ],
+            "description": "Fired when backend wants to provide client with the missing DOM structure. This happens upon most of the calls requesting node ids."
+        },
+        {
+            "name": "attributeModified",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "name", "type": "string", "description": "Attribute name." },
+                { "name": "value", "type": "string", "description": "Attribute value." }
+            ],
+            "description": "Fired when <code>Element</code>'s attribute is modified."
+        },
+        {
+            "name": "attributeRemoved",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "name", "type": "string", "description": "A ttribute name." }
+            ],
+            "description": "Fired when <code>Element</code>'s attribute is removed."
+        },
+        {
+            "name": "inlineStyleInvalidated",
+            "parameters": [
+                { "name": "nodeIds", "type": "array", "items": { "$ref": "NodeId" }, "description": "Ids of the nodes for which the inline styles have been invalidated." }
+            ],
+            "description": "Fired when <code>Element</code>'s inline style is modified via a CSS property modification."
+        },
+        {
+            "name": "characterDataModified",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "characterData", "type": "string", "description": "New text value." }
+            ],
+            "description": "Mirrors <code>DOMCharacterDataModified</code> event."
+        },
+        {
+            "name": "childNodeCountUpdated",
+            "parameters": [
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "childNodeCount", "type": "integer", "description": "New node count." }
+            ],
+            "description": "Fired when <code>Container</code>'s child node count has changed."
+        },
+        {
+            "name": "childNodeInserted",
+            "parameters": [
+                { "name": "parentNodeId", "$ref": "NodeId", "description": "Id of the node that has changed." },
+                { "name": "previousNodeId", "$ref": "NodeId", "description": "If of the previous siblint." },
+                { "name": "node", "$ref": "Node", "description": "Inserted node data." }
+            ],
+            "description": "Mirrors <code>DOMNodeInserted</code> event."
+        },
+        {
+            "name": "childNodeRemoved",
+            "parameters": [
+                { "name": "parentNodeId", "$ref": "NodeId", "description": "Parent id." },
+                { "name": "nodeId", "$ref": "NodeId", "description": "Id of the node that has been removed." }
+            ],
+            "description": "Mirrors <code>DOMNodeRemoved</code> event."
+        },
+        {
+            "name": "shadowRootPushed",
+            "parameters": [
+                { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                { "name": "root", "$ref": "Node", "description": "Shadow root." }
+            ],
+            "description": "Called when shadow root is pushed into the element."
+        },
+        {
+            "name": "shadowRootPopped",
+            "parameters": [
+                { "name": "hostId", "$ref": "NodeId", "description": "Host element id." },
+                { "name": "rootId", "$ref": "NodeId", "description": "Shadow root id." }
+            ],
+            "description": "Called when shadow root is popped from the element."
+        },
+        {
+            "name": "pseudoElementAdded",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Pseudo element's parent element id." },
+                { "name": "pseudoElement", "$ref": "Node", "description": "The added pseudo element." }
+            ],
+            "description": "Called when a pseudo element is added to an element."
+        },
+        {
+            "name": "pseudoElementRemoved",
+            "parameters": [
+                { "name": "parentId", "$ref": "NodeId", "description": "Pseudo element's parent element id." },
+                { "name": "pseudoElementId", "$ref": "NodeId", "description": "The removed pseudo element id." }
+            ],
+            "description": "Called when a pseudo element is removed from an element."
+        }
+    ]
+}
+,
+{
+    "domain": "DOMDebugger",
+    "description": "DOM debugging allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DOMBreakpointType",
+            "type": "string",
+            "enum": ["subtree-modified", "attribute-modified", "node-removed"],
+            "description": "DOM breakpoint type."
+        }
+    ],
+    "commands": [
+        {
+            "name": "setDOMBreakpoint",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to set breakpoint on." },
+                { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the operation to stop upon." }
+            ],
+            "description": "Sets breakpoint on particular operation with DOM."
+        },
+        {
+            "name": "removeDOMBreakpoint",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Identifier of the node to remove breakpoint from." },
+                { "name": "type", "$ref": "DOMBreakpointType", "description": "Type of the breakpoint to remove." }
+            ],
+            "description": "Removes DOM breakpoint that was set using <code>setDOMBreakpoint</code>."
+        },
+        {
+            "name": "setEventListenerBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "DOM Event name to stop on (any DOM event will do)." }
+            ],
+            "description": "Sets breakpoint on particular DOM event."
+        },
+        {
+            "name": "removeEventListenerBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Event name." }
+            ],
+            "description": "Removes breakpoint on particular DOM event."
+        },
+        {
+            "name": "setInstrumentationBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+            ],
+            "description": "Sets breakpoint on particular native event."
+        },
+        {
+            "name": "removeInstrumentationBreakpoint",
+            "parameters": [
+                { "name": "eventName", "type": "string", "description": "Instrumentation name to stop on." }
+            ],
+            "description": "Sets breakpoint on particular native event."
+        },
+        {
+            "name": "setXHRBreakpoint",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "Resource URL substring. All XHRs having this substring in the URL will get stopped upon." }
+            ],
+            "description": "Sets breakpoint on XMLHttpRequest."
+        },
+        {
+            "name": "removeXHRBreakpoint",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "Resource URL substring." }
+            ],
+            "description": "Removes breakpoint from XMLHttpRequest."
+        }
+    ]
+}
+,
+{
+    "domain": "DOMStorage",
+    "description": "Query and modify DOM storage.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "StorageId",
+            "type": "object",
+            "description": "DOM Storage identifier.",
+            "properties": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin for the storage." },
+                { "name": "isLocalStorage", "type": "boolean", "description": "Whether the storage is local storage (not session storage)." }
+            ]
+        },
+        {
+            "id": "Item",
+            "type": "array",
+            "description": "DOM Storage item.",
+            "items": { "type": "string" }
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables storage tracking, storage events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables storage tracking, prevents storage events from being sent to the client."
+        },
+        {
+            "name": "getDOMStorageItems",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" }
+            ],
+            "returns": [
+                { "name": "entries", "type": "array", "items": { "$ref": "Item" } }
+            ]
+        },
+        {
+            "name": "setDOMStorageItem",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "value", "type": "string" }
+            ]
+        },
+        {
+            "name": "removeDOMStorageItem",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "domStorageItemsCleared",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" }
+            ]
+        },
+        {
+            "name": "domStorageItemRemoved",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" }
+            ]
+        },
+        {
+            "name": "domStorageItemAdded",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "newValue", "type": "string" }
+            ]
+        },
+        {
+            "name": "domStorageItemUpdated",
+            "parameters": [
+                { "name": "storageId", "$ref": "StorageId" },
+                { "name": "key", "type": "string" },
+                { "name": "oldValue", "type": "string" },
+                { "name": "newValue", "type": "string" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Database",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DatabaseId",
+            "type": "string",
+            "description": "Unique identifier of Database object."
+        },
+        {
+            "id": "Database",
+            "type": "object",
+            "description": "Database object.",
+            "properties": [
+                { "name": "id", "$ref": "DatabaseId", "description": "Database ID." },
+                { "name": "domain", "type": "string", "description": "Database domain." },
+                { "name": "name", "type": "string", "description": "Database name." },
+                { "name": "version", "type": "string", "description": "Database version." }
+            ]
+        },
+        {
+            "id": "Error",
+            "type": "object",
+            "description": "Database error.",
+            "properties": [
+                { "name": "message", "type": "string", "description": "Error message." },
+                { "name": "code", "type": "integer", "description": "Error code." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables database tracking, database events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables database tracking, prevents database events from being sent to the client."
+        },
+        {
+            "name": "getDatabaseTableNames",
+            "parameters": [
+                { "name": "databaseId", "$ref": "DatabaseId" }
+            ],
+            "returns": [
+                { "name": "tableNames", "type": "array", "items": { "type": "string" } }
+            ]
+        },
+        {
+            "name": "executeSQL",
+            "async": true,
+            "parameters": [
+                { "name": "databaseId", "$ref": "DatabaseId" },
+                { "name": "query", "type": "string" }
+            ],
+            "returns": [
+                { "name": "columnNames", "type": "array", "optional": true, "items": { "type": "string" } },
+                { "name": "values", "type": "array", "optional": true, "items": { "type": "any" }},
+                { "name": "sqlError", "$ref": "Error", "optional": true }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "addDatabase",
+            "parameters": [
+                { "name": "database", "$ref": "Database" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Debugger",
+    "description": "Debugger domain exposes JavaScript debugging capabilities. It allows setting and removing breakpoints, stepping through execution, exploring stack traces, etc.",
+    "types": [
+        {
+            "id": "BreakpointId",
+            "type": "string",
+            "description": "Breakpoint identifier."
+        },
+        {
+            "id": "BreakpointActionIdentifier",
+            "type": "integer",
+            "description": "Breakpoint action identifier."
+        },
+        {
+            "id": "ScriptId",
+            "type": "string",
+            "description": "Unique script identifier."
+        },
+        {
+            "id": "CallFrameId",
+            "type": "string",
+            "description": "Call frame identifier."
+        },
+        {
+            "id": "Location",
+            "type": "object",
+            "properties": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Script identifier as reported in the <code>Debugger.scriptParsed</code>." },
+                { "name": "lineNumber", "type": "integer", "description": "Line number in the script." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Column number in the script." }
+            ],
+            "description": "Location in the source code."
+        },
+        {
+            "id": "BreakpointAction",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["log", "evaluate", "sound", "probe"], "description": "Different kinds of breakpoint actions." },
+                { "name": "data", "type": "string", "optional": true, "description": "Data associated with this breakpoint type (e.g. for type \"eval\" this is the JavaScript string to evalulate)." },
+                { "name": "id", "$ref": "BreakpointActionIdentifier", "optional": true, "description": "A frontend-assigned identifier for this breakpoint action." }
+            ],
+            "description": "Action to perform when a breakpoint is triggered."
+        },
+        {
+            "id": "BreakpointOptions",
+            "type": "object",
+            "properties": [
+                { "name": "condition", "type": "string", "optional": true, "description": "Expression to use as a breakpoint condition. When specified, debugger will only stop on the breakpoint if this expression evaluates to true." },
+                { "name": "actions", "type": "array", "optional": true, "items": { "$ref": "BreakpointAction" }, "description": "Actions to perform automatically when the breakpoint is triggered." },
+                { "name": "autoContinue", "type": "boolean", "optional": true, "description": "Automatically continue after hitting this breakpoint and running actions." },
+                { "name": "ignoreCount", "type": "integer", "optional": true, "description": "Number of times to ignore this breakpoint, before stopping on the breakpoint and running actions." }
+            ],
+            "description": "Extra options that modify breakpoint behavior."
+        },
+        {
+            "id": "FunctionDetails",
+            "type": "object",
+            "properties": [
+                { "name": "location", "$ref": "Location", "description": "Location of the function." },
+                { "name": "name", "type": "string", "optional": true, "description": "Name of the function. Not present for anonymous functions." },
+                { "name": "displayName", "type": "string", "optional": true, "description": "Display name of the function(specified in 'displayName' property on the function object)." },
+                { "name": "inferredName", "type": "string", "optional": true, "description": "Name of the function inferred from its initial assignment." },
+                { "name": "scopeChain", "type": "array", "optional": true, "items": { "$ref": "Scope" }, "description": "Scope chain for this closure." }
+            ],
+            "description": "Information about the function."
+        },
+        {
+            "id": "CallFrame",
+            "type": "object",
+            "properties": [
+                { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier. This identifier is only valid while the virtual machine is paused." },
+                { "name": "functionName", "type": "string", "description": "Name of the JavaScript function called on this call frame." },
+                { "name": "location", "$ref": "Location", "description": "Location in the source code." },
+                { "name": "scopeChain", "type": "array", "items": { "$ref": "Scope" }, "description": "Scope chain for this call frame." },
+                { "name": "this", "$ref": "Runtime.RemoteObject", "description": "<code>this</code> object for this call frame." }
+            ],
+            "description": "JavaScript call frame. Array of call frames form the call stack."
+        },
+        {
+            "id": "Scope",
+            "type": "object",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["global", "local", "with", "closure", "catch", "functionName"], "description": "Scope type." },
+                { "name": "object", "$ref": "Runtime.RemoteObject", "description": "Object representing the scope. For <code>global</code> and <code>with</code> scopes it represents the actual object; for the rest of the scopes, it is artificial transient object enumerating scope variables as its properties." }
+            ],
+            "description": "Scope description."
+        },
+        {
+            "id": "ProbeSample",
+            "description": "A sample collected by evaluating a probe breakpoint action.",
+            "type": "object",
+            "properties": [
+                { "name": "probeId", "$ref": "BreakpointActionIdentifier", "description": "Identifier of the probe breakpoint action that created the sample." },
+                { "name": "sampleId", "type": "integer", "description": "Unique identifier for this sample." },
+                { "name": "batchId", "type": "integer", "description": "A batch identifier which is the same for all samples taken at the same breakpoint hit." },
+                { "name": "timestamp", "type": "number", "description": "Timestamp of when the sample was taken." },
+                { "name": "payload", "$ref": "Runtime.RemoteObject", "description": "Contents of the sample." }
+            ]
+        },
+        {
+            "id": "AssertPauseReason",
+            "description": "The pause reason auxiliary data when paused because of an assertion.",
+            "type": "object",
+            "properties": [
+                { "name": "message", "type": "string", "optional": true, "description": "The console.assert message string if provided." }
+            ]
+        },
+        {
+            "id": "BreakpointPauseReason",
+            "description": "The pause reason auxiliary data when paused because of hitting a breakpoint.",
+            "type": "object",
+            "properties": [
+                { "name": "breakpointId", "type": "string", "description": "The identifier of the breakpoint causing the pause." }
+            ]
+        },
+        {
+            "id": "CSPViolationPauseReason",
+            "description": "The pause reason auxiliary data when paused because of a Content Security Policy directive.",
+            "type": "object",
+            "properties": [
+                { "name": "directive", "type": "string", "description": "The CSP directive that blocked script execution." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables debugger for the given page. Clients should not assume that the debugging has been enabled until the result for this command is received."
+        },
+        {
+            "name": "disable",
+            "description": "Disables debugger for given page."
+        },
+        {
+            "name": "setBreakpointsActive",
+            "parameters": [
+                { "name": "active", "type": "boolean", "description": "New value for breakpoints active state." }
+            ],
+            "description": "Activates / deactivates all breakpoints on the page."
+        },
+        {
+            "name": "setBreakpointByUrl",
+            "parameters": [
+                { "name": "lineNumber", "type": "integer", "description": "Line number to set breakpoint at." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL of the resources to set breakpoint on." },
+                { "name": "urlRegex", "type": "string", "optional": true, "description": "Regex pattern for the URLs of the resources to set breakpoints on. Either <code>url</code> or <code>urlRegex</code> must be specified." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Offset in the line to set breakpoint at." },
+                { "name": "options", "$ref": "BreakpointOptions", "optional": true, "description": "Options to apply to this breakpoint to modify its behavior." }
+            ],
+            "returns": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                { "name": "locations", "type": "array", "items": { "$ref": "Location"}, "description": "List of the locations this breakpoint resolved into upon addition." }
+            ],
+            "description": "Sets JavaScript breakpoint at given location specified either by URL or URL regex. Once this command is issued, all existing parsed scripts will have breakpoints resolved and returned in <code>locations</code> property. Further matching script parsing will result in subsequent <code>breakpointResolved</code> events issued. This logical breakpoint will survive page reloads."
+        },
+        {
+            "name": "setBreakpoint",
+            "parameters": [
+                { "name": "location", "$ref": "Location", "description": "Location to set breakpoint in." },
+                { "name": "options", "$ref": "BreakpointOptions", "optional": true, "description": "Options to apply to this breakpoint to modify its behavior." }
+            ],
+            "returns": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Id of the created breakpoint for further reference." },
+                { "name": "actualLocation", "$ref": "Location", "description": "Location this breakpoint resolved into." }
+            ],
+            "description": "Sets JavaScript breakpoint at a given location."
+        },
+        {
+            "name": "removeBreakpoint",
+            "parameters": [
+                { "name": "breakpointId", "$ref": "BreakpointId" }
+            ],
+            "description": "Removes JavaScript breakpoint."
+        },
+        {
+            "name": "continueToLocation",
+            "parameters": [
+                { "name": "location", "$ref": "Location", "description": "Location to continue to." }
+            ],
+            "description": "Continues execution until specific location is reached."
+        },
+        {
+            "name": "stepOver",
+            "description": "Steps over the statement."
+        },
+        {
+            "name": "stepInto",
+            "description": "Steps into the function call."
+        },
+        {
+            "name": "stepOut",
+            "description": "Steps out of the function call."
+        },
+        {
+            "name": "pause",
+            "description": "Stops on the next JavaScript statement."
+        },
+        {
+            "name": "resume",
+            "description": "Resumes JavaScript execution."
+        },
+        {
+            "name": "searchInContent",
+            "description": "Searches for given string in script content.",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to search in." },
+                { "name": "query", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "GenericTypes.SearchMatch" }, "description": "List of search matches." }
+            ]
+        },
+        {
+            "name": "getScriptSource",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Id of the script to get source for." }
+            ],
+            "returns": [
+                { "name": "scriptSource", "type": "string", "description": "Script source." }
+            ],
+            "description": "Returns source for the script with given id."
+        },
+        {
+            "name": "getFunctionDetails",
+            "parameters": [
+                { "name": "functionId", "$ref": "Runtime.RemoteObjectId", "description": "Id of the function to get location for." }
+            ],
+            "returns": [
+                { "name": "details", "$ref": "FunctionDetails", "description": "Information about the function." }
+            ],
+            "description": "Returns detailed information on given function."
+        },
+        {
+            "name": "setPauseOnExceptions",
+            "parameters": [
+                { "name": "state", "type": "string", "enum": ["none", "uncaught", "all"], "description": "Pause on exceptions mode." }
+            ],
+            "description": "Defines pause on exceptions state. Can be set to stop on all exceptions, uncaught exceptions or no exceptions. Initial pause on exceptions state is <code>none</code>."
+        },
+        {
+            "name": "evaluateOnCallFrame",
+            "parameters": [
+                { "name": "callFrameId", "$ref": "CallFrameId", "description": "Call frame identifier to evaluate on." },
+                { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "String object group name to put result into (allows rapid releasing resulting object handles using <code>releaseObjectGroup</code>)." },
+                { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Specifies whether command line API should be available to the evaluated expression, defaults to false." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." },
+                { "name": "saveResult", "type": "boolean", "optional": true, "description": "Whether the resulting value should be considered for saving in the $n history." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "Runtime.RemoteObject", "description": "Object wrapper for the evaluation result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Evaluates expression on a given call frame."
+        },
+        {
+            "name": "setOverlayMessage",
+            "parameters": [
+                { "name": "message", "type": "string", "optional": true, "description": "Overlay message to display when paused in debugger." }
+            ],
+            "description": "Sets overlay message."
+        }
+    ],
+    "events": [
+        {
+            "name": "globalObjectCleared",
+            "description": "Called when global has been cleared and debugger client should reset its state. Happens upon navigation or reload."
+        },
+        {
+            "name": "scriptParsed",
+            "parameters": [
+                { "name": "scriptId", "$ref": "ScriptId", "description": "Identifier of the script parsed." },
+                { "name": "url", "type": "string", "description": "URL or name of the script parsed (if any)." },
+                { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource with given URL (for script tags)." },
+                { "name": "startColumn", "type": "integer", "description": "Column offset of the script within the resource with given URL." },
+                { "name": "endLine", "type": "integer", "description": "Last line of the script." },
+                { "name": "endColumn", "type": "integer", "description": "Length of the last line of the script." },
+                { "name": "isContentScript", "type": "boolean", "optional": true, "description": "Determines whether this script is a user extension script." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with script (if any)." },
+                { "name": "hasSourceURL", "type": "boolean", "optional": true, "description": "True, if this script has sourceURL." }
+            ],
+            "description": "Fired when virtual machine parses script. This event is also fired for all known and uncollected scripts upon enabling debugger."
+        },
+        {
+            "name": "scriptFailedToParse",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "URL of the script that failed to parse." },
+                { "name": "scriptSource", "type": "string", "description": "Source text of the script that failed to parse." },
+                { "name": "startLine", "type": "integer", "description": "Line offset of the script within the resource." },
+                { "name": "errorLine", "type": "integer", "description": "Line with error." },
+                { "name": "errorMessage", "type": "string", "description": "Parse error message." }
+            ],
+            "description": "Fired when virtual machine fails to parse the script."
+        },
+        {
+            "name": "breakpointResolved",
+            "parameters": [
+                { "name": "breakpointId", "$ref": "BreakpointId", "description": "Breakpoint unique identifier." },
+                { "name": "location", "$ref": "Location", "description": "Actual breakpoint location." }
+            ],
+            "description": "Fired when breakpoint is resolved to an actual script and location."
+        },
+        {
+            "name": "paused",
+            "parameters": [
+                { "name": "callFrames", "type": "array", "items": { "$ref": "CallFrame" }, "description": "Call stack the virtual machine stopped on." },
+                { "name": "reason", "type": "string", "enum": ["XHR", "DOM", "EventListener", "exception", "assert", "CSPViolation", "DebuggerStatement", "Breakpoint", "PauseOnNextStatement", "other"], "description": "Pause reason." },
+                { "name": "data", "type": "object", "optional": true, "description": "Object containing break-specific auxiliary properties." }
+            ],
+            "description": "Fired when the virtual machine stopped on breakpoint or exception or any other stop criteria."
+        },
+        {
+            "name": "resumed",
+            "description": "Fired when the virtual machine resumed execution."
+        },
+        {
+            "name": "didSampleProbe",
+            "description": "Fires when a new probe sample is collected.",
+            "parameters": [
+                { "name": "sample", "$ref": "ProbeSample", "description": "A collected probe sample." }
+            ]
+        },
+        {
+            "name": "playBreakpointActionSound",
+            "description": "Fired when a \"sound\" breakpoint action is triggered on a breakpoint.",
+            "parameters": [
+                { "name": "breakpointActionId", "$ref": "BreakpointActionIdentifier", "description": "Breakpoint action identifier." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "GenericTypes",
+    "description": "Exposes generic types to be used by any domain.",
+    "types": [
+        {
+            "id": "SearchMatch",
+            "type": "object",
+            "description": "Search match in a resource.",
+            "properties": [
+                { "name": "lineNumber", "type": "number", "description": "Line number in resource content." },
+                { "name": "lineContent", "type": "string", "description": "Line with match content." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "IndexedDB",
+    "featureGuard": "ENABLE(INDEXED_DATABASE)",
+    "availability": "web",
+    "types": [
+        {
+            "id": "DatabaseWithObjectStores",
+            "type": "object",
+            "description": "Database with an array of object stores.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Database name." },
+                { "name": "version", "type": "number", "description": "Database version." },
+                { "name": "objectStores", "type": "array", "items": { "$ref": "ObjectStore" }, "description": "Object stores in this database." }
+            ]
+        },
+        {
+            "id": "ObjectStore",
+            "type": "object",
+            "description": "Object store.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Object store name." },
+                { "name": "keyPath", "$ref": "KeyPath", "description": "Object store key path." },
+                { "name": "autoIncrement", "type": "boolean", "description": "If true, object store has auto increment flag set." },
+                { "name": "indexes", "type": "array", "items": { "$ref": "ObjectStoreIndex" }, "description": "Indexes in this object store." }
+            ]
+        },
+        {
+            "id": "ObjectStoreIndex",
+            "type": "object",
+            "description": "Object store index.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Index name." },
+                { "name": "keyPath", "$ref": "KeyPath", "description": "Index key path." },
+                { "name": "unique", "type": "boolean", "description": "If true, index is unique." },
+                { "name": "multiEntry", "type": "boolean", "description": "If true, index allows multiple entries for a key." }
+            ]
+        },
+        {
+            "id": "Key",
+            "type": "object",
+            "description": "Key.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["number", "string", "date", "array"], "description": "Key type." },
+                { "name": "number", "type": "number", "optional": true, "description": "Number value." },
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "date", "type": "number", "optional": true, "description": "Date value." },
+                { "name": "array", "type": "array", "optional": true, "items": { "$ref": "Key" }, "description": "Array value." }
+            ]
+        },
+        {
+            "id": "KeyRange",
+            "type": "object",
+            "description": "Key range.",
+            "properties": [
+                { "name": "lower", "$ref": "Key", "optional": true, "description": "Lower bound." },
+                { "name": "upper", "$ref": "Key", "optional": true, "description": "Upper bound." },
+                { "name": "lowerOpen", "type": "boolean", "description": "If true lower bound is open." },
+                { "name": "upperOpen", "type": "boolean", "description": "If true upper bound is open." }
+            ]
+        },
+        {
+            "id": "DataEntry",
+            "type": "object",
+            "description": "Data entry.",
+            "properties": [
+                { "name": "key", "$ref": "Runtime.RemoteObject", "description": "Key." },
+                { "name": "primaryKey", "$ref": "Runtime.RemoteObject", "description": "Primary key." },
+                { "name": "value", "$ref": "Runtime.RemoteObject", "description": "Value." }
+            ]
+        },
+        {
+            "id": "KeyPath",
+            "type": "object",
+            "description": "Key path.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["null", "string", "array"], "description": "Key path type." },
+                { "name": "string", "type": "string", "optional": true, "description": "String value." },
+                { "name": "array", "type": "array", "optional": true, "items": { "type": "string" }, "description": "Array value." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables events from backend."
+        },
+        {
+            "name": "disable",
+            "description": "Disables events from backend."
+        },
+        {
+            "name": "requestDatabaseNames",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." }
+            ],
+            "returns": [
+                { "name": "databaseNames", "type": "array", "items": { "type": "string" }, "description": "Database names for origin." }
+            ],
+            "description": "Requests database names for given security origin."
+        },
+        {
+            "name": "requestDatabase",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." }
+            ],
+            "returns": [
+                { "name": "databaseWithObjectStores", "$ref": "DatabaseWithObjectStores", "description": "Database with an array of object stores." }
+            ],
+            "description": "Requests database with given name in given frame."
+        },
+        {
+            "name": "requestData",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." },
+                { "name": "objectStoreName", "type": "string", "description": "Object store name." },
+                { "name": "indexName", "type": "string", "description": "Index name, empty string for object store data requests." },
+                { "name": "skipCount", "type": "integer", "description": "Number of records to skip." },
+                { "name": "pageSize", "type": "integer", "description": "Number of records to fetch." },
+                { "name": "keyRange", "$ref": "KeyRange", "optional": true, "description": "Key range." }
+            ],
+            "returns": [
+                { "name": "objectStoreDataEntries", "type": "array", "items": { "$ref": "DataEntry" }, "description": "Array of object store data entries." },
+                { "name": "hasMore", "type": "boolean", "description": "If true, there are more entries to fetch in the given range." }
+            ],
+            "description": "Requests data from object store or index."
+        },
+        {
+            "name": "clearObjectStore",
+            "async": true,
+            "parameters": [
+                { "name": "securityOrigin", "type": "string", "description": "Security origin." },
+                { "name": "databaseName", "type": "string", "description": "Database name." },
+                { "name": "objectStoreName", "type": "string", "description": "Object store name." }
+            ],
+            "returns": [
+            ],
+            "description": "Clears all entries from an object store."
+        }
+    ]
+}
+,
+{
+    "domain": "Inspector",
+    "types": [],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables inspector domain notifications."
+        },
+        {
+            "name": "disable",
+            "description": "Disables inspector domain notifications."
+        },
+        {
+            "name": "initialized",
+            "description": "Sent by the frontend after all initialization messages have been sent."
+        }
+    ],
+    "events": [
+        {
+            "name": "evaluateForTestInFrontend",
+            "parameters": [
+                { "name": "script", "type": "string" }
+            ]
+        },
+        {
+            "name": "inspect",
+            "parameters": [
+                { "name": "object", "$ref": "Runtime.RemoteObject" },
+                { "name": "hints", "type": "object" }
+            ]
+        },
+        {
+            "name": "detached",
+            "description": "Fired when remote debugging connection is about to be terminated. Contains detach reason.",
+            "parameters": [
+                { "name": "reason", "type": "string", "description": "The reason why connection has been terminated." }
+            ]
+        },
+        {
+            "name": "activateExtraDomains",
+            "description": "Fired when the backend has alternate domains that need to be activated.",
+            "parameters": [
+                { "name": "domains", "type": "array", "items": { "type": "string" }, "description": "Domain names that need activation" }
+            ]
+        },
+        {
+            "name": "targetCrashed",
+            "description": "Fired when debugging target has crashed"
+        }
+    ]
+}
+,
+{
+    "domain": "LayerTree",
+    "availability": "web",
+    "types": [
+        {
+            "id": "LayerId",
+            "type": "string",
+            "description": "Unique RenderLayer identifier."
+        },
+        {
+            "id": "PseudoElementId",
+            "type": "string",
+            "description": "Unique PseudoElement identifier."
+        },
+        {
+            "id": "IntRect",
+            "type": "object",
+            "description": "A rectangle.",
+            "properties": [
+                { "name": "x", "type": "integer", "description": "The x position." },
+                { "name": "y", "type": "integer", "description": "The y position." },
+                { "name": "width", "type": "integer", "description": "The width metric." },
+                { "name": "height", "type": "integer", "description": "The height metric." }
+            ]
+        },
+        {
+            "id": "Layer",
+            "type": "object",
+            "description": "Information about a compositing layer.",
+            "properties": [
+                { "name": "layerId", "$ref": "LayerId", "description": "The unique id for this layer." },
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "The id for the node associated with this layer." },
+                { "name": "bounds", "$ref": "IntRect", "description": "Bounds of the layer in absolute page coordinates." },
+                { "name": "paintCount", "type": "integer", "description": "Indicates how many time this layer has painted." },
+                { "name": "memory", "type": "integer", "description": "Estimated memory used by this layer." },
+                { "name": "compositedBounds", "$ref": "IntRect", "description": "The bounds of the composited layer." },
+                { "name": "isInShadowTree", "type": "boolean", "optional": true, "description": "Indicates whether this layer is associated with an element hosted in a shadow tree." },
+                { "name": "isReflection", "type": "boolean", "optional": true, "description": "Indicates whether this layer was used to provide a reflection for the element." },
+                { "name": "isGeneratedContent", "type": "boolean", "optional": true, "description": "Indicates whether the layer is attached to a pseudo element that is CSS generated content." },
+                { "name": "isAnonymous", "type": "boolean", "optional": true, "description": "Indicates whether the layer was created for a CSS anonymous block or box." },
+                { "name": "pseudoElementId", "$ref": "PseudoElementId", "optional": true, "description": "The id for the pseudo element associated with this layer." },
+                { "name": "pseudoElement", "type": "string", "optional": true, "description": "The name of the CSS pseudo-element that prompted the layer to be generated." }
+            ]
+        },
+        {
+            "id": "CompositingReasons",
+            "type": "object",
+            "description": "An object containing the reasons why the layer was composited as properties.",
+            "properties": [
+                { "name": "transform3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a CSS 3D transform." },
+                { "name": "video", "type": "boolean", "optional": true, "description": "Composition due to association with a <video> element." },
+                { "name": "canvas", "type": "boolean", "optional": true, "description": "Composition due to the element being a <canvas> element." },
+                { "name": "plugin", "type": "boolean", "optional": true, "description": "Composition due to association with a plugin." },
+                { "name": "iFrame", "type": "boolean", "optional": true, "description": "Composition due to association with an <iframe> element." },
+                { "name": "backfaceVisibilityHidden", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"backface-visibility: hidden\" style." },
+                { "name": "clipsCompositingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element clipping compositing descendants." },
+                { "name": "animation", "type": "boolean", "optional": true, "description": "Composition due to association with an animated element." },
+                { "name": "filters", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied." },
+                { "name": "positionFixed", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: fixed\" style." },
+                { "name": "positionSticky", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"position: sticky\" style." },
+                { "name": "overflowScrollingTouch", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"overflow-scrolling: touch\" style." },
+                { "name": "stacking", "type": "boolean", "optional": true, "description": "Composition due to association with an element establishing a stacking context." },
+                { "name": "overlap", "type": "boolean", "optional": true, "description": "Composition due to association with an element overlapping other composited elements." },
+                { "name": "negativeZIndexChildren", "type": "boolean", "optional": true, "description": "Composition due to association with an element with descendants that have a negative z-index." },
+                { "name": "transformWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with composited descendants." },
+                { "name": "opacityWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with opacity applied and composited descendants." },
+                { "name": "maskWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with a masked element and composited descendants." },
+                { "name": "reflectionWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a reflection and composited descendants." },
+                { "name": "filterWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS filters applied and composited descendants." },
+                { "name": "blendingWithCompositedDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element with CSS blending applied and composited descendants." },
+                { "name": "isolatesCompositedBlendingDescendants", "type": "boolean", "optional": true, "description": "Composition due to association with an element isolating compositing descendants having CSS blending applied." },
+                { "name": "perspective", "type": "boolean", "optional": true, "description": "Composition due to association with an element with perspective applied." },
+                { "name": "preserve3D", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"transform-style: preserve-3d\" style." },
+                { "name": "willChange", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"will-change\" style." },
+                { "name": "root", "type": "boolean", "optional": true, "description": "Composition due to association with the root element." },
+                { "name": "blending", "type": "boolean", "optional": true, "description": "Composition due to association with an element with a \"blend-mode\" style." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables compositing tree inspection."
+        },
+        {
+            "name": "disable",
+            "description": "Disables compositing tree inspection."
+        },
+        {
+            "name": "layersForNode",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Root of the subtree for which we want to gather layers." }                ],
+            "description": "Returns the layer tree structure of the current page.",
+            "returns": [
+                { "name": "layers", "type": "array", "items": { "$ref": "Layer" }, "description": "Child layers." }
+            ]
+        },
+        {
+            "name": "reasonsForCompositingLayer",
+            "parameters": [
+                { "name": "layerId", "$ref": "LayerId", "description": "The id of the layer for which we want to get the reasons it was composited." }
+            ],
+            "description": "Provides the reasons why the given layer was composited.",
+            "returns": [
+                { "name": "compositingReasons", "$ref": "CompositingReasons", "description": "An object containing the reasons why the layer was composited as properties." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "layerTreeDidChange"
+        }
+    ]
+}
+,
+{
+    "domain": "Network",
+    "description": "Network domain allows tracking network activities of the page. It exposes information about http, file, data and other requests and responses, their headers, bodies, timing, etc.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "LoaderId",
+            "type": "string",
+            "description": "Unique loader identifier."
+        },
+        {
+            "id": "FrameId",
+            "type": "string",
+            "description": "Unique frame identifier."
+        },
+        {
+            "id": "RequestId",
+            "type": "string",
+            "description": "Unique request identifier."
+        },
+        {
+            "id": "Timestamp",
+            "type": "number",
+            "description": "Number of seconds since epoch."
+        },
+        {
+            "id": "Headers",
+            "type": "object",
+            "description": "Request / response headers as keys / values of JSON object."
+        },
+        {
+            "id": "ResourceTiming",
+            "type": "object",
+            "description": "Timing information for the request.",
+            "properties": [
+                { "name": "navigationStart", "type": "number", "description": "Timing's navigationStart is a baseline in seconds, while the other numbers are ticks in milliseconds relatively to this navigationStart." },
+                { "name": "domainLookupStart", "type": "number", "description": "Started DNS address resolve." },
+                { "name": "domainLookupEnd", "type": "number", "description": "Finished DNS address resolve." },
+                { "name": "connectStart", "type": "number", "description": "Started connecting to the remote host." },
+                { "name": "connectEnd", "type": "number", "description": "Connected to the remote host." },
+                { "name": "secureConnectionStart", "type": "number", "description": "Started SSL handshake." },
+                { "name": "requestStart", "type": "number", "description": "Started sending request." },
+                { "name": "responseStart", "type": "number", "description": "Started receiving response headers." }
+            ]
+        },
+        {
+            "id": "Request",
+            "type": "object",
+            "description": "HTTP request data.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Request URL." },
+                { "name": "method", "type": "string", "description": "HTTP request method." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP request headers." },
+                { "name": "postData", "type": "string", "optional": true, "description": "HTTP POST request data." }
+            ]
+        },
+        {
+            "id": "Response",
+            "type": "object",
+            "description": "HTTP response data.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Response URL. This URL can be different from CachedResource.url in case of redirect." },
+                { "name": "status", "type": "number", "description": "HTTP response status code." },
+                { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." },
+                { "name": "headersText", "type": "string", "optional": true, "description": "HTTP response headers text." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                { "name": "requestHeaders", "$ref": "Headers", "optional": true, "description": "Refined HTTP request headers that were actually transmitted over the network." },
+                { "name": "requestHeadersText", "type": "string", "optional": true, "description": "HTTP request headers text." },
+                { "name": "fromDiskCache", "type": "boolean", "optional": true, "description": "Specifies that the request was served from the disk cache." },
+                { "name": "timing", "$ref": "ResourceTiming", "optional": true, "description": "Timing information for the given request." }
+            ]
+        },
+        {
+            "id": "WebSocketRequest",
+            "type": "object",
+            "description": "WebSocket request data.",
+            "properties": [
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+            ]
+        },
+        {
+            "id": "WebSocketResponse",
+            "type": "object",
+            "description": "WebSocket response data.",
+            "properties": [
+                { "name": "status", "type": "number", "description": "HTTP response status code." },
+                { "name": "statusText", "type": "string", "description": "HTTP response status text." },
+                { "name": "headers", "$ref": "Headers", "description": "HTTP response headers." }
+            ]
+        },
+        {
+            "id": "WebSocketFrame",
+            "type": "object",
+            "description": "WebSocket frame data.",
+            "properties": [
+                { "name": "opcode", "type": "number", "description": "WebSocket frame opcode." },
+                { "name": "mask", "type": "boolean", "description": "WebSocket frame mask." },
+                { "name": "payloadData", "type": "string", "description": "WebSocket frame payload data." }
+            ]
+        },
+        {
+            "id": "CachedResource",
+            "type": "object",
+            "description": "Information about the cached resource.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL. This is the url of the original network request." },
+                { "name": "type", "$ref": "Page.ResourceType", "description": "Type of this resource." },
+                { "name": "response", "$ref": "Response", "optional": true, "description": "Cached response data." },
+                { "name": "bodySize", "type": "number", "description": "Cached response body size." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "id": "Initiator",
+            "type": "object",
+            "description": "Information about the request initiator.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["parser", "script", "other"], "description": "Type of this initiator." },
+                { "name": "stackTrace", "$ref": "Console.StackTrace", "optional": true, "description": "Initiator JavaScript stack trace, set for Script only." },
+                { "name": "url", "type": "string", "optional": true, "description": "Initiator URL, set for Parser type only." },
+                { "name": "lineNumber", "type": "number", "optional": true, "description": "Initiator line number, set for Parser type only." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables network tracking, network events will now be delivered to the client."
+        },
+        {
+            "name": "disable",
+            "description": "Disables network tracking, prevents network events from being sent to the client."
+        },
+        {
+            "name": "setExtraHTTPHeaders",
+            "description": "Specifies whether to always send extra HTTP headers with the requests from this page.",
+            "parameters": [
+                { "name": "headers", "$ref": "Headers", "description": "Map with extra HTTP headers." }
+            ]
+        },
+        {
+            "name": "getResponseBody",
+            "description": "Returns content served for the given request.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Identifier of the network request to get content for." }
+            ],
+            "returns": [
+                { "name": "body", "type": "string", "description": "Response body." },
+                { "name": "base64Encoded", "type": "boolean", "description": "True, if content was sent as base64." }
+            ]
+        },
+        {
+            "name": "canClearBrowserCache",
+            "description": "Tells whether clearing browser cache is supported.",
+            "returns": [
+                { "name": "result", "type": "boolean", "description": "True if browser cache can be cleared." }
+            ]
+        },
+        {
+            "name": "clearBrowserCache",
+            "description": "Clears browser cache."
+        },
+        {
+            "name": "canClearBrowserCookies",
+            "description": "Tells whether clearing browser cookies is supported.",
+            "returns": [
+                { "name": "result", "type": "boolean", "description": "True if browser cookies can be cleared." }
+            ]
+        },
+        {
+            "name": "clearBrowserCookies",
+            "description": "Clears browser cookies."
+        },
+        {
+            "name": "setCacheDisabled",
+            "parameters": [
+                { "name": "cacheDisabled", "type": "boolean", "description": "Cache disabled state." }
+            ],
+            "description": "Toggles ignoring cache for each request. If <code>true</code>, cache will not be used."
+        },
+        {
+            "name": "loadResource",
+            "async": true,
+            "parameters": [
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame to load the resource from." },
+                { "name": "url", "type": "string", "description": "URL of the resource to load." }
+            ],
+            "returns": [
+                { "name": "content", "type": "string", "description": "Resource content." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType." },
+                { "name": "status", "type": "number", "description": "HTTP response status code." }
+            ],
+            "description": "Loads a resource in the context of a frame on the inspected page without cross origin checks."
+        }
+    ],
+    "events": [
+        {
+            "name": "requestWillBeSent",
+            "description": "Fired when page is about to send HTTP request.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                { "name": "request", "$ref": "Request", "description": "Request data." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                { "name": "redirectResponse", "optional": true, "$ref": "Response", "description": "Redirect response data." },
+                { "name": "type", "$ref": "Page.ResourceType", "optional": true, "description": "Resource type." }
+            ]
+        },
+        {
+            "name": "requestServedFromCache",
+            "description": "Fired if request ended up loading from cache.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." }
+            ]
+        },
+        {
+            "name": "responseReceived",
+            "description": "Fired when HTTP response is available.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "type", "$ref": "Page.ResourceType", "description": "Resource type." },
+                { "name": "response", "$ref": "Response", "description": "Response data." }
+            ]
+        },
+        {
+            "name": "dataReceived",
+            "description": "Fired when data chunk was received over the network.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "dataLength", "type": "integer", "description": "Data chunk length." },
+                { "name": "encodedDataLength", "type": "integer", "description": "Actual bytes received (might be less than dataLength for compressed encodings)." }
+            ]
+        },
+        {
+            "name": "loadingFinished",
+            "description": "Fired when HTTP request has finished loading.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "name": "loadingFailed",
+            "description": "Fired when HTTP request has failed to load.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "errorText", "type": "string", "description": "User friendly error message." },
+                { "name": "canceled", "type": "boolean", "optional": true, "description": "True if loading was canceled." }
+            ]
+        },
+        {
+            "name": "requestServedFromMemoryCache",
+            "description": "Fired when HTTP request has been served from memory cache.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "frameId", "$ref": "FrameId", "description": "Frame identifier." },
+                { "name": "loaderId", "$ref": "LoaderId", "description": "Loader identifier." },
+                { "name": "documentURL", "type": "string", "description": "URL of the document this request is loaded for." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "initiator", "$ref": "Initiator", "description": "Request initiator." },
+                { "name": "resource", "$ref": "CachedResource", "description": "Cached resource data." }
+            ]
+        },
+        {
+            "name": "webSocketWillSendHandshakeRequest",
+            "description": "Fired when WebSocket is about to initiate handshake.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "request", "$ref": "WebSocketRequest", "description": "WebSocket request data." }
+            ]
+        },
+        {
+            "name": "webSocketHandshakeResponseReceived",
+            "description": "Fired when WebSocket handshake response becomes available.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketResponse", "description": "WebSocket response data." }
+            ]
+        },
+        {
+            "name": "webSocketCreated",
+            "description": "Fired upon WebSocket creation.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "url", "type": "string", "description": "WebSocket request URL." }
+            ]
+        },
+        {
+            "name": "webSocketClosed",
+            "description": "Fired when WebSocket is closed.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." }
+            ]
+        },
+        {
+            "name": "webSocketFrameReceived",
+            "description": "Fired when WebSocket frame is received.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+            ]
+        },
+        {
+            "name": "webSocketFrameError",
+            "description": "Fired when WebSocket frame error occurs.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "errorMessage", "type": "string", "description": "WebSocket frame error message." }
+            ]
+        },
+        {
+            "name": "webSocketFrameSent",
+            "description": "Fired when WebSocket frame is sent.",
+            "parameters": [
+                { "name": "requestId", "$ref": "RequestId", "description": "Request identifier." },
+                { "name": "timestamp", "$ref": "Timestamp", "description": "Timestamp." },
+                { "name": "response", "$ref": "WebSocketFrame", "description": "WebSocket response data." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "OverlayTypes",
+    "description": "Exposes types to be used by the inspector overlay.",
+    "types": [
+        {
+            "id": "Point",
+            "type": "object",
+            "properties": [
+                { "name": "x", "type": "number" },
+                { "name": "y", "type": "number" }
+            ]
+        },
+        {
+            "id": "Size",
+            "type": "object",
+            "properties": [
+                { "name": "width", "type": "integer" },
+                { "name": "height", "type": "integer" }
+            ]
+        },
+        {
+            "id": "Quad",
+            "description": "A quad is a collection of 4 points. When initialized from a rect, the points are in clockwise order from top left.",
+            "type": "array",
+            "items": { "$ref": "Point" }
+        },
+        {
+            "id": "Rect",
+            "description": "A rectangle specified by a reference coordinate and width/height offsets.",
+            "type": "object",
+            "properties": [
+                { "name": "x", "type": "number" },
+                { "name": "y", "type": "number" },
+                { "name": "width", "type": "number" },
+                { "name": "height", "type": "number" }
+            ]
+        },
+        {
+            "id": "Region",
+            "description": "A single region in a flow thread.",
+            "type": "object",
+            "properties": [
+                { "name": "borderQuad", "$ref": "Quad" },
+                { "name": "incomingQuad", "$ref": "Quad" },
+                { "name": "outgoingQuad", "$ref": "Quad" },
+                { "name": "isHighlighted", "type": "boolean", "optional": true }
+            ]
+        },
+        {
+            "id": "DisplayPath",
+            "description": "A vector path described using SVG path syntax.",
+            "type": "array",
+            "items": { "type": "any" }
+        },
+        {
+            "id": "RegionFlowData",
+            "type": "object",
+            "properties": [
+                { "name": "regions", "type": "array", "items": { "$ref": "Region"} },
+                { "name": "name", "type": "string" }
+            ]
+        },
+        {
+            "id": "ContentFlowData",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string" }
+            ]
+        },
+        {
+            "id": "ShapeOutsideData",
+            "type": "object",
+            "properties": [
+                { "name": "bounds", "$ref": "Quad", "description": "Bounds for the shape-outside paths." },
+                { "name": "shape", "$ref": "DisplayPath", "description": "Path for the element's shape.", "optional": true },
+                { "name": "marginShape", "$ref": "DisplayPath", "description": "Path for the element's margin shape.", "optional": true }
+            ]
+        },
+        {
+            "id": "ElementData",
+            "description": "Data that describes an element to be highlighted.",
+            "type": "object",
+            "properties": [
+                { "name": "tagName", "type": "string" },
+                { "name": "idValue", "type": "string", "description": "The value of the element's 'id' attribute." },
+                { "name": "className", "type": "string", "optional": true },
+                { "name": "size", "$ref": "Size", "optional": true },
+                { "name": "role", "type": "string", "description": "Computed accessibility role for the element.", "optional": true },
+                { "name": "regionFlowData", "$ref": "RegionFlowData", "optional": true },
+                { "name": "contentFlowData", "$ref": "ContentFlowData", "optional": true },
+                { "name": "shapeOutsideData", "$ref": "ShapeOutsideData", "optional": true }
+            ]
+        },
+        {
+            "id": "FragmentHighlightData",
+            "description": "Data required to highlight multiple quads.",
+            "type": "object",
+            "properties": [
+                { "name": "quads", "type": "array", "items": { "$ref": "Quad" }, "description": "Quads for which the highlight should be applied."},
+                { "name": "contentColor", "type": "string" },
+                { "name": "contentOutlineColor", "type": "string" },
+                { "name": "paddingColor", "type": "string" },
+                { "name": "borderColor", "type": "string" },
+                { "name": "marginColor", "type": "string" },
+                { "name": "regionClippingArea", "$ref": "Quad", "optional": true }
+            ]
+        },
+        {
+            "id": "NodeHighlightData",
+            "description": "Data required to highlight a DOM node.",
+            "type": "object",
+            "properties": [
+                { "name": "scrollOffset", "$ref": "Point", "description": "Scroll offset for the MainFrame's FrameView that is shared across all quads." },
+                { "name": "fragments", "type": "array", "items": { "$ref": "FragmentHighlightData" } },
+                { "name": "elementData", "$ref": "ElementData", "optional": true }
+            ]
+        },
+        {
+            "id": "OverlayConfiguration",
+            "description": "Data required to configure the overlay's size and scaling behavior.",
+            "type": "object",
+            "properties": [
+                { "name": "deviceScaleFactor", "type": "number" },
+                { "name": "viewportSize", "$ref": "Size" },
+                { "name": "frameViewFullSize", "$ref": "Size" }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Page",
+    "description": "Actions and events related to the inspected page belong to the page domain.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "ResourceType",
+            "type": "string",
+            "enum": ["Document", "Stylesheet", "Image", "Font", "Script", "XHR", "WebSocket", "Other"],
+            "description": "Resource type as it was perceived by the rendering engine."
+        },
+        {
+            "id": "CoordinateSystem",
+            "type": "string",
+            "enum": ["Viewport", "Page"],
+            "description": "Coordinate system used by supplied coordinates."
+        },
+        {
+            "id": "Frame",
+            "type": "object",
+            "description": "Information about the Frame on the page.",
+            "properties": [
+                { "name": "id", "type": "string", "description": "Frame unique identifier." },
+                { "name": "parentId", "type": "string", "optional": true, "description": "Parent frame identifier." },
+                { "name": "loaderId", "$ref": "Network.LoaderId", "description": "Identifier of the loader associated with this frame." },
+                { "name": "name", "type": "string", "optional": true, "description": "Frame's name as specified in the tag." },
+                { "name": "url", "type": "string", "description": "Frame document's URL." },
+                { "name": "securityOrigin", "type": "string", "description": "Frame document's security origin." },
+                { "name": "mimeType", "type": "string", "description": "Frame document's mimeType as determined by the browser." }
+            ]
+        },
+        {
+            "id": "FrameResource",
+            "type": "object",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL." },
+                { "name": "type", "$ref": "ResourceType", "description": "Type of this resource." },
+                { "name": "mimeType", "type": "string", "description": "Resource mimeType as determined by the browser." },
+                { "name": "failed", "type": "boolean", "optional": true, "description": "True if the resource failed to load." },
+                { "name": "canceled", "type": "boolean", "optional": true, "description": "True if the resource was canceled during loading." },
+                { "name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with this resource (if any)." }
+            ]
+        },
+        {
+            "id": "FrameResourceTree",
+            "type": "object",
+            "description": "Information about the Frame hierarchy along with their cached resources.",
+            "properties": [
+                { "name": "frame", "$ref": "Frame", "description": "Frame information for this tree item." },
+                { "name": "childFrames", "type": "array", "optional": true, "items": { "$ref": "FrameResourceTree" }, "description": "Child frames." },
+                { "name": "resources", "type": "array", "items": { "$ref": "FrameResource" }, "description": "Information about frame resources." }
+            ]
+        },
+        {
+            "id": "SearchResult",
+            "type": "object",
+            "description": "Search result for resource.",
+            "properties": [
+                { "name": "url", "type": "string", "description": "Resource URL." },
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Resource frame id." },
+                { "name": "matchesCount", "type": "number", "description": "Number of matches in the resource content." }
+            ]
+        },
+        {
+            "id": "Cookie",
+            "type": "object",
+            "description": "Cookie object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Cookie name." },
+                { "name": "value", "type": "string", "description": "Cookie value." },
+                { "name": "domain", "type": "string", "description": "Cookie domain." },
+                { "name": "path", "type": "string", "description": "Cookie path." },
+                { "name": "expires", "type": "number", "description": "Cookie expires." },
+                { "name": "size", "type": "integer", "description": "Cookie size." },
+                { "name": "httpOnly", "type": "boolean", "description": "True if cookie is http-only." },
+                { "name": "secure", "type": "boolean", "description": "True if cookie is secure." },
+                { "name": "session", "type": "boolean", "description": "True in case of session cookie." }
+            ]
+        },
+        {
+            "id": "ScriptIdentifier",
+            "type": "string",
+            "description": "Unique script identifier."
+        }
+    ],
+    "commands": [
+        {
+            "name": "enable",
+            "description": "Enables page domain notifications."
+        },
+        {
+            "name": "disable",
+            "description": "Disables page domain notifications."
+        },
+        {
+            "name": "addScriptToEvaluateOnLoad",
+            "parameters": [
+                { "name": "scriptSource", "type": "string" }
+            ],
+            "returns": [
+                { "name": "identifier", "$ref": "ScriptIdentifier", "description": "Identifier of the added script." }
+            ]
+        },
+        {
+            "name": "removeScriptToEvaluateOnLoad",
+            "parameters": [
+                { "name": "identifier", "$ref": "ScriptIdentifier" }
+            ]
+        },
+        {
+            "name": "reload",
+            "parameters": [
+                { "name": "ignoreCache", "type": "boolean", "optional": true, "description": "If true, browser cache is ignored (as if the user pressed Shift+refresh)." },
+                { "name": "scriptToEvaluateOnLoad", "type": "string", "optional": true, "description": "If set, the script will be injected into all frames of the inspected page after reload." }
+            ],
+            "description": "Reloads given page optionally ignoring the cache."
+        },
+        {
+            "name": "navigate",
+            "parameters": [
+                { "name": "url", "type": "string", "description": "URL to navigate the page to." }
+            ],
+            "description": "Navigates current page to the given URL."
+        },
+        {
+            "name": "getCookies",
+            "returns": [
+                { "name": "cookies", "type": "array", "items": { "$ref": "Cookie"}, "description": "Array of cookie objects." }
+            ],
+            "description": "Returns all browser cookies. Depending on the backend support, will return detailed cookie information in the <code>cookies</code> field."
+        },
+        {
+            "name": "deleteCookie",
+            "parameters": [
+                { "name": "cookieName", "type": "string", "description": "Name of the cookie to remove." },
+                { "name": "url", "type": "string", "description": "URL to match cooke domain and path." }
+            ],
+            "description": "Deletes browser cookie with given name, domain and path."
+        },
+        {
+            "name": "getResourceTree",
+            "description": "Returns present frame / resource tree structure.",
+            "returns": [
+                { "name": "frameTree", "$ref": "FrameResourceTree", "description": "Present frame / resource tree structure." }
+            ]
+        },
+        {
+            "name": "getResourceContent",
+            "description": "Returns content of the given resource.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to get resource for." },
+                { "name": "url", "type": "string", "description": "URL of the resource to get content for." }
+            ],
+            "returns": [
+                { "name": "content", "type": "string", "description": "Resource content." },
+                { "name": "base64Encoded", "type": "boolean", "description": "True, if content was served as base64." }
+            ]
+        },
+        {
+            "name": "searchInResource",
+            "description": "Searches for given string in resource content.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id for resource to search in." },
+                { "name": "url", "type": "string", "description": "URL of the resource to search in." },
+                { "name": "query", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "GenericTypes.SearchMatch" }, "description": "List of search matches." }
+            ]
+        },
+        {
+            "name": "searchInResources",
+            "description": "Searches for given string in frame / resource tree structure.",
+            "parameters": [
+                { "name": "text", "type": "string", "description": "String to search for." },
+                { "name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive." },
+                { "name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "SearchResult" }, "description": "List of search results." }
+            ]
+        },
+        {
+            "name": "setDocumentContent",
+            "description": "Sets given markup as the document's HTML.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Frame id to set HTML for." },
+                { "name": "html", "type": "string", "description": "HTML content to set."  }
+            ]
+        },
+        {
+            "name": "setShowPaintRects",
+            "description": "Requests that backend shows paint rectangles",
+            "parameters": [
+                { "name": "result", "type": "boolean", "description": "True for showing paint rectangles" }
+            ]
+        },
+        {
+            "name": "getScriptExecutionStatus",
+            "description": "Determines if scripts can be executed in the page.",
+            "returns": [
+                { "name": "result", "type": "string", "enum": ["allowed", "disabled", "forbidden"], "description": "Script execution status: \"allowed\" if scripts can be executed, \"disabled\" if script execution has been disabled through page settings, \"forbidden\" if script execution for the given page is not possible for other reasons." }
+            ]
+        },
+        {
+            "name": "setScriptExecutionDisabled",
+            "description": "Switches script execution in the page.",
+            "parameters": [
+                { "name": "value", "type": "boolean", "description": "Whether script execution should be disabled in the page." }
+            ]
+        },
+        {
+            "name": "setEmulatedMedia",
+            "parameters": [
+                { "name": "media", "type": "string", "description": "Media type to emulate. Empty string disables the override." }
+            ],
+            "description": "Emulates the given media for CSS media queries."
+        },
+        {
+            "name": "getCompositingBordersVisible",
+            "description": "Indicates the visibility of compositing borders.",
+            "returns": [
+                { "name": "result", "type": "boolean", "description": "If true, compositing borders are visible." }
+            ]
+        },
+        {
+            "name": "setCompositingBordersVisible",
+            "description": "Controls the visibility of compositing borders.",
+            "parameters": [
+                { "name": "visible", "type": "boolean", "description": "True for showing compositing borders." }
+            ]
+        },
+        {
+            "name": "snapshotNode",
+            "description": "Capture a snapshot of the specified node that does not include unrelated layers.",
+            "parameters": [
+                { "name": "nodeId", "$ref": "DOM.NodeId", "description": "Id of the node to snapshot." }
+            ],
+            "returns": [
+                { "name": "dataURL", "type": "string", "description": "Base64-encoded image data (PNG)." }
+            ]
+        },
+        {
+            "name": "snapshotRect",
+            "description": "Capture a snapshot of the page within the specified rectangle and coordinate system.",
+            "parameters": [
+                { "name": "x", "type": "integer", "description": "X coordinate" },
+                { "name": "y", "type": "integer", "description": "Y coordinate" },
+                { "name": "width", "type": "integer", "description": "Rectangle width" },
+                { "name": "height", "type": "integer", "description": "Rectangle height" },
+                { "name": "coordinateSystem", "$ref": "CoordinateSystem", "description": "Indicates the coordinate system of the supplied rectangle." }
+            ],
+            "returns": [
+                { "name": "dataURL", "type": "string", "description": "Base64-encoded image data (PNG)." }
+            ]
+        },
+        {
+            "name": "archive",
+            "description": "Grab an archive of the page.",
+            "returns": [
+                { "name": "data", "type": "string", "description": "Base64-encoded web archive." }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "domContentEventFired",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "loadEventFired",
+            "parameters": [
+                { "name": "timestamp", "type": "number" }
+            ]
+        },
+        {
+            "name": "frameNavigated",
+            "description": "Fired once navigation of the frame has completed. Frame is now associated with the new loader.",
+            "parameters": [
+                { "name": "frame", "$ref": "Frame", "description": "Frame object." }
+            ]
+        },
+        {
+            "name": "frameDetached",
+            "description": "Fired when frame has been detached from its parent.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has been detached." }
+            ]
+        },
+        {
+            "name": "frameStartedLoading",
+            "description": "Fired when frame has started loading.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has started loading." }
+            ]
+        },
+        {
+            "name": "frameStoppedLoading",
+            "description": "Fired when frame has stopped loading.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has stopped loading." }
+            ]
+        },
+        {
+            "name": "frameScheduledNavigation",
+            "description": "Fired when frame schedules a potential navigation.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has scheduled a navigation." },
+                { "name": "delay", "type": "number", "description": "Delay (in seconds) until the navigation is scheduled to begin. The navigation is not guaranteed to start." }
+            ]
+        },
+        {
+            "name": "frameClearedScheduledNavigation",
+            "description": "Fired when frame no longer has a scheduled navigation.",
+            "parameters": [
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the frame that has cleared its scheduled navigation." }
+            ]
+        },
+        {
+            "name": "javascriptDialogOpening",
+            "description": "Fired when a JavaScript initiated dialog (alert, confirm, prompt, or onbeforeunload) is about to open.",
+            "parameters": [
+                { "name": "message", "type": "string", "description": "Message that will be displayed by the dialog." }
+            ]
+        },
+        {
+            "name": "javascriptDialogClosed",
+            "description": "Fired when a JavaScript initiated dialog (alert, confirm, prompt, or onbeforeunload) has been closed."
+        },
+        {
+            "name": "scriptsEnabled",
+            "description": "Fired when the JavaScript is enabled/disabled on the page",
+            "parameters": [
+                { "name": "isEnabled", "type": "boolean", "description": "Whether script execution is enabled or disabled on the page." }
+            ]
+        }
+    ]
+}
+,
+{
+    "domain": "Runtime",
+    "description": "Runtime domain exposes JavaScript runtime by means of remote evaluation and mirror objects. Evaluation results are returned as mirror object that expose object type, string representation and unique identifier that can be used for further object reference. Original objects are maintained in memory unless they are either explicitly released or are released along with the other objects in their object group.",
+    "types": [
+        {
+            "id": "RemoteObjectId",
+            "type": "string",
+            "description": "Unique object identifier."
+        },
+        {
+            "id": "RemoteObject",
+            "type": "object",
+            "description": "Mirror object referencing original JavaScript object.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class"], "description": "Object subtype hint. Specified for <code>object</code> <code>function</code> (for class) type values only." },
+                { "name": "className", "type": "string", "optional": true, "description": "Object class (constructor) name. Specified for <code>object</code> type values only." },
+                { "name": "value", "type": "any", "optional": true, "description": "Remote object value (in case of primitive values or JSON values if it was requested)." },
+                { "name": "description", "type": "string", "optional": true, "description": "String representation of the object." },
+                { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Unique object identifier (for non-primitive values)." },
+                { "name": "size", "type": "integer", "optional": true, "description": "Size of the array/collection. Specified for array/map/set/weakmap/weakset object type values only." },
+                { "name": "classPrototype", "$ref": "RemoteObject", "optional": true, "description": "Remote object for the class prototype. Specified for class object type values only." },
+                { "name": "preview", "$ref": "ObjectPreview", "optional": true, "description": "Preview containing abbreviated property values. Specified for <code>object</code> type values only." }
+            ]
+        },
+        {
+            "id": "ObjectPreview",
+            "type": "object",
+            "description": "Object containing abbreviated remote object value.",
+            "properties": [
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class"], "description": "Object subtype hint. Specified for <code>object</code> type values only." },
+                { "name": "description", "type": "string", "optional": true, "description": "String representation of the object." },
+                { "name": "lossless", "type": "boolean", "description": "Determines whether preview is lossless (contains all information of the original object)." },
+                { "name": "overflow", "type": "boolean", "optional": true, "description": "True iff some of the properties of the original did not fit." },
+                { "name": "properties", "type": "array", "items": { "$ref": "PropertyPreview" }, "optional": true, "description": "List of the properties." },
+                { "name": "entries", "type": "array", "items": { "$ref": "EntryPreview" }, "optional": true, "description": "List of the entries. Specified for <code>map</code> and <code>set</code> subtype values only." },
+                { "name": "size", "type": "integer", "optional": true, "description": "Size of the array/collection. Specified for array/map/set/weakmap/weakset object type values only." }
+            ]
+        },
+        {
+            "id": "PropertyPreview",
+            "type": "object",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name." },
+                { "name": "type", "type": "string", "enum": ["object", "function", "undefined", "string", "number", "boolean", "symbol", "accessor"], "description": "Object type." },
+                { "name": "subtype", "type": "string", "optional": true, "enum": ["array", "null", "node", "regexp", "date", "error", "map", "set", "weakmap", "weakset", "iterator", "class"], "description": "Object subtype hint. Specified for <code>object</code> type values only." },
+                { "name": "value", "type": "string", "optional": true, "description": "User-friendly property value string." },
+                { "name": "valuePreview", "$ref": "ObjectPreview", "optional": true, "description": "Nested value preview." },
+                { "name": "internal", "type": "boolean", "optional": true, "description": "True if this is an internal property." }
+            ]
+        },
+        {
+            "id": "EntryPreview",
+            "type": "object",
+            "properties": [
+                { "name": "key", "$ref": "ObjectPreview", "optional": true, "description": "Entry key. Specified for map-like collection entries." },
+                { "name": "value", "$ref": "ObjectPreview", "description": "Entry value." }
+            ]
+        },
+        {
+            "id": "CollectionEntry",
+            "type": "object",
+            "properties": [
+                { "name": "key", "$ref": "Runtime.RemoteObject", "optional": true, "description": "Entry key of a map-like collection, otherwise not provided." },
+                { "name": "value", "$ref": "Runtime.RemoteObject", "description": "Entry value." }
+            ]
+        },
+        {
+            "id": "PropertyDescriptor",
+            "type": "object",
+            "description": "Object property descriptor.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Property name or symbol description." },
+                { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." },
+                { "name": "writable", "type": "boolean", "optional": true, "description": "True if the value associated with the property may be changed (data descriptors only)." },
+                { "name": "get", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a getter for the property, or <code>undefined</code> if there is no getter (accessor descriptors only)." },
+                { "name": "set", "$ref": "RemoteObject", "optional": true, "description": "A function which serves as a setter for the property, or <code>undefined</code> if there is no setter (accessor descriptors only)." },
+                { "name": "configurable", "type": "boolean", "description": "True if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object." },
+                { "name": "enumerable", "type": "boolean", "description": "True if this property shows up during enumeration of the properties on the corresponding object." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "isOwn", "optional": true, "type": "boolean", "description": "True if the property is owned for the object." },
+                { "name": "symbol", "optional": true, "$ref": "Runtime.RemoteObject", "description": "Property symbol object, if the property is a symbol." },
+                { "name": "nativeGetter", "optional": true, "type": "boolean", "description": "True if the property value came from a native getter." }
+            ]
+        },
+        {
+            "id": "InternalPropertyDescriptor",
+            "type": "object",
+            "description": "Object internal property descriptor. This property isn't normally visible in JavaScript code.",
+            "properties": [
+                { "name": "name", "type": "string", "description": "Conventional property name." },
+                { "name": "value", "$ref": "RemoteObject", "optional": true, "description": "The value associated with the property." }
+            ]
+        },
+        {
+            "id": "CallArgument",
+            "type": "object",
+            "description": "Represents function call argument. Either remote object id <code>objectId</code> or primitive <code>value</code> or neither of (for undefined) them should be specified.",
+            "properties": [
+                { "name": "value", "type": "any", "optional": true, "description": "Primitive value." },
+                { "name": "objectId", "$ref": "RemoteObjectId", "optional": true, "description": "Remote object handle." }
+            ]
+        },
+        {
+            "id": "ExecutionContextId",
+            "type": "integer",
+            "description": "Id of an execution context."
+        },
+        {
+            "id": "ExecutionContextDescription",
+            "type": "object",
+            "description": "Description of an isolated world.",
+            "properties": [
+                { "name": "id", "$ref": "ExecutionContextId", "description": "Unique id of the execution context. It can be used to specify in which execution context script evaluation should be performed." },
+                { "name": "isPageContext", "type": "boolean", "description": "True if this is a context where inpspected web page scripts run. False if it is a content script isolated context." },
+                { "name": "name", "type": "string", "description": "Human readable name describing given context."},
+                { "name": "frameId", "$ref": "Network.FrameId", "description": "Id of the owning frame." }
+            ]
+        },
+        {
+            "id": "SyntaxErrorType",
+            "type": "string",
+            "enum": ["none", "irrecoverable", "unterminated-literal", "recoverable"],
+            "description": "Syntax error type: \"none\" for no error, \"irrecoverable\" for unrecoverable errors, \"unterminated-literal\" for when there is an unterminated literal, \"recoverable\" for when the expression is unfinished but valid so far."
+        },
+        {
+            "id": "ErrorRange",
+            "type": "object",
+            "description": "Range of an error in source code.",
+            "properties": [
+                { "name": "startOffset", "type": "integer", "description": "Start offset of range (inclusive)." },
+                { "name": "endOffset", "type": "integer", "description": "End offset of range (exclusive)." }
+            ]
+        },
+        {
+            "id": "StructureDescription",
+            "type": "object",
+            "properties": [
+                { "name": "fields", "type": "array",  "items": { "type": "string" }, "optional": true, "description": "Array of strings, where the strings represent object properties." },
+                { "name": "optionalFields", "type": "array",  "items": { "type": "string" }, "optional": true, "description": "Array of strings, where the strings represent optional object properties." },
+                { "name": "constructorName", "type": "string", "optional": true, "description": "Name of the constructor." },
+                { "name": "prototypeStructure", "$ref": "StructureDescription", "optional": true, "description": "Pointer to the StructureRepresentation of the protoype if one exists." },
+                { "name": "isImprecise", "type": "boolean", "optional": true, "description": "If true, it indicates that the fields in this StructureDescription may be inaccurate. I.e, there might have been fields that have been deleted before it was profiled or it has fields we haven't profiled." }
+            ]
+        },
+        {
+            "id": "TypeSet",
+            "type": "object",
+            "properties": [
+                { "name": "isFunction", "type": "boolean", "description": "Indicates if this type description has been type Function." },
+                { "name": "isUndefined", "type": "boolean", "description": "Indicates if this type description has been type Undefined." },
+                { "name": "isNull", "type": "boolean", "description": "Indicates if this type description has been type Null." },
+                { "name": "isBoolean", "type": "boolean", "description": "Indicates if this type description has been type Boolean." },
+                { "name": "isInteger", "type": "boolean", "description": "Indicates if this type description has been type Integer." },
+                { "name": "isNumber", "type": "boolean", "description": "Indicates if this type description has been type Number." },
+                { "name": "isString", "type": "boolean", "description": "Indicates if this type description has been type String." },
+                { "name": "isObject", "type": "boolean", "description": "Indicates if this type description has been type Object." },
+                { "name": "isSymbol", "type": "boolean", "description": "Indicates if this type description has been type Symbol." }
+            ]
+        },
+        {
+            "id": "TypeDescription",
+            "type": "object",
+            "description": "Container for type information that has been gathered.",
+            "properties": [
+                { "name": "isValid", "type": "boolean", "description": "If true, we were able to correlate the offset successfuly with a program location. If false, the offset may be bogus or the offset may be from a CodeBlock that hasn't executed." },
+                { "name": "leastCommonAncestor", "type": "string", "optional": true, "description": "Least common ancestor of all Constructors if the TypeDescription has seen any structures. This string is the display name of the shared constructor function." },
+                { "name": "typeSet", "$ref": "TypeSet", "optional": true, "description": "Set of booleans for determining the aggregate type of this type description." },
+                { "name": "structures", "type": "array", "items": { "$ref": "StructureDescription" }, "optional": true, "description": "Array of descriptions for all structures seen for this variable." },
+                { "name": "isTruncated", "type": "boolean", "optional": true, "description": "If true, this indicates that no more structures are being profiled because some maximum threshold has been reached and profiling has stopped because of memory pressure." }
+            ]
+        },
+        {
+            "id": "TypeLocation",
+            "type": "object",
+            "description": "Describes the location of an expression we want type information for.",
+            "properties": [
+                { "name": "typeInformationDescriptor", "type": "integer", "description": "What kind of type information do we want (normal, function return values, 'this' statement)." },
+                { "name": "sourceID", "type": "string", "description": "sourceID uniquely identifying a script" },
+                { "name": "divot", "type": "integer", "description": "character offset for assignment range" }
+            ]
+        },
+        {
+            "id": "BasicBlock",
+            "type": "object",
+            "description": "From Wikipedia: a basic block is a portion of the code within a program with only one entry point and only one exit point. This type gives the location of a basic block and if that basic block has executed.",
+            "properties": [
+                { "name": "startOffset", "type": "integer", "description": "Start offset of the basic block." },
+                { "name": "endOffset", "type": "integer", "description": "End offset of the basic block." },
+                { "name": "hasExecuted", "type": "boolean", "description": "Indicates if the basic block has executed before." }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "parse",
+            "parameters": [
+                { "name": "source", "type": "string", "description": "Source code to parse." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "SyntaxErrorType", "description": "Parse result." },
+                { "name": "message", "type": "string", "optional": true, "description": "Parse error message." },
+                { "name": "range", "$ref": "ErrorRange", "optional": true, "description": "Range in the source where the error occurred." }
+            ],
+            "description": "Parses JavaScript source code for errors."
+        },
+        {
+            "name": "evaluate",
+            "parameters": [
+                { "name": "expression", "type": "string", "description": "Expression to evaluate." },
+                { "name": "objectGroup", "type": "string", "optional": true, "description": "Symbolic group name that can be used to release multiple objects." },
+                { "name": "includeCommandLineAPI", "type": "boolean", "optional": true, "description": "Determines whether Command Line API should be available during the evaluation." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether evaluation should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "contextId", "$ref": "Runtime.ExecutionContextId", "optional": true, "description": "Specifies in which isolated context to perform evaluation. Each content script lives in an isolated context and this parameter may be used to specify one of those contexts. If the parameter is omitted or 0 the evaluation will be performed in the context of the inspected page." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object that should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." },
+                { "name": "saveResult", "type": "boolean", "optional": true, "description": "Whether the resulting value should be considered for saving in the $n history." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "RemoteObject", "description": "Evaluation result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." },
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the result was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Evaluates expression on global object."
+        },
+        {
+            "name": "callFunctionOn",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to call function on." },
+                { "name": "functionDeclaration", "type": "string", "description": "Declaration of the function to call." },
+                { "name": "arguments", "type": "array", "items": { "$ref": "CallArgument", "description": "Call argument." }, "optional": true, "description": "Call arguments. All call arguments must belong to the same JavaScript world as the target object." },
+                { "name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true, "description": "Specifies whether function call should stop on exceptions and mute console. Overrides setPauseOnException state." },
+                { "name": "returnByValue", "type": "boolean", "optional": true, "description": "Whether the result is expected to be a JSON object which should be sent by value." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for the result." }
+            ],
+            "returns": [
+                { "name": "result", "$ref": "RemoteObject", "description": "Call result." },
+                { "name": "wasThrown", "type": "boolean", "optional": true, "description": "True if the result was thrown during the evaluation." }
+            ],
+            "description": "Calls function with given declaration on the given object. Object group of the result is inherited from the target object."
+        },
+        {
+            "name": "getProperties",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to return properties for." },
+                { "name": "ownProperties", "optional": true, "type": "boolean", "description": "If true, returns properties belonging only to the object itself, not to its prototype chain." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for property values." }
+            ],
+            "returns": [
+                { "name": "result", "type": "array", "items": { "$ref": "PropertyDescriptor"}, "description": "Object properties." },
+                { "name": "internalProperties", "optional": true, "type": "array", "items": { "$ref": "InternalPropertyDescriptor"}, "description": "Internal object properties." }
+            ],
+            "description": "Returns properties of a given object. Object group of the result is inherited from the target object."
+        },
+        {
+            "name": "getDisplayableProperties",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to return properties for." },
+                { "name": "generatePreview", "type": "boolean", "optional": true, "description": "Whether preview should be generated for property values." }
+            ],
+            "returns": [
+                { "name": "properties", "type": "array", "items": { "$ref": "PropertyDescriptor"}, "description": "Object properties." },
+                { "name": "internalProperties", "optional": true, "type": "array", "items": { "$ref": "InternalPropertyDescriptor"}, "description": "Internal object properties." }
+            ],
+            "description": "Returns displayable properties of a given object. Object group of the result is inherited from the target object. Displayable properties are own properties, internal properties, and native getters in the prototype chain (assumed to be bindings and treated like own properties for the frontend)."
+        },
+        {
+            "name": "getCollectionEntries",
+            "description": "Returns entries of given Map / Set collection.",
+            "parameters": [
+                { "name": "objectId", "$ref": "Runtime.RemoteObjectId", "description": "Id of the collection to get entries for." },
+                { "name": "objectGroup", "optional": true, "type": "string", "description": "Symbolic group name that can be used to release multiple. If not provided, it will be the same objectGroup as the RemoteObject determined from <code>objectId</code>. This is useful for WeakMap to release the collection entries." },
+                { "name": "startIndex", "optional": true, "type": "integer", "description": "If provided skip to this index before collecting values. Otherwise, 0." },
+                { "name": "numberToFetch", "optional": true, "type": "integer", "description": "If provided only return <code>numberToFetch</code> values. Otherwise, return values all the way to the end." }
+            ],
+            "returns": [
+                { "name": "entries", "type": "array", "items": { "$ref": "CollectionEntry" }, "description": "Array of collection entries." }
+            ]
+        },
+        {
+            "name": "saveResult",
+            "parameters": [
+                { "name": "value", "$ref": "CallArgument", "description": "Id or value of the object to save." },
+                { "name": "contextId", "optional": true, "$ref": "ExecutionContextId", "description": "Unique id of the execution context. To specify in which execution context script evaluation should be performed. If not provided, determine from the CallArgument's objectId." }
+            ],
+            "returns": [
+                { "name": "savedResultIndex", "type": "integer", "optional": true, "description": "If the value was saved, this is the $n index that can be used to access the value." }
+            ],
+            "description": "Assign a saved result index to this value."
+        },
+        {
+            "name": "releaseObject",
+            "parameters": [
+                { "name": "objectId", "$ref": "RemoteObjectId", "description": "Identifier of the object to release." }
+            ],
+            "description": "Releases remote object with given id."
+        },
+        {
+            "name": "releaseObjectGroup",
+            "parameters": [
+                { "name": "objectGroup", "type": "string", "description": "Symbolic object group name." }
+            ],
+            "description": "Releases all remote objects that belong to a given group."
+        },
+        {
+            "name": "run",
+            "description": "Tells inspected instance(worker or page) that it can run in case it was started paused."
+        },
+        {
+            "name": "enable",
+            "description": "Enables reporting of execution contexts creation by means of <code>executionContextCreated</code> event. When the reporting gets enabled the event will be sent immediately for each existing execution context."
+        },
+        {
+            "name": "disable",
+            "description": "Disables reporting of execution contexts creation."
+        },
+        {
+            "name": "getRuntimeTypesForVariablesAtOffsets",
+            "parameters": [
+                { "name": "locations", "type": "array", "items": { "$ref": "TypeLocation" }, "description": "An array of type locations we're requesting information for. Results are expected in the same order they're sent in."}
+            ],
+            "returns": [
+                { "name": "types", "type": "array", "items": { "$ref": "TypeDescription", "description": "Types for requested variable." } }
+            ],
+            "description": "Returns detailed informtation on given function."
+        },
+        {
+            "name": "enableTypeProfiler",
+            "description": "Enables type profiling on the VM."
+        },
+        {
+            "name": "disableTypeProfiler",
+            "description": "Disables type profiling on the VM."
+        },
+        {
+            "name": "getBasicBlocks",
+            "parameters": [
+                { "name": "sourceID", "type": "string", "description": "Indicates which sourceID information is requested for." }
+            ],
+            "returns": [
+                { "name": "basicBlocks", "type": "array", "items": { "$ref": "BasicBlock", "description": "Array of basic blocks." } }
+            ],
+            "description": "Returns a list of basic blocks for the given sourceID with information about their text ranges and whether or not they have executed."
+        }
+    ],
+    "events": [
+        {
+            "name": "executionContextCreated",
+            "parameters": [
+                { "name": "context", "$ref": "ExecutionContextDescription", "description": "A newly created execution contex." }
+            ],
+            "description": "Issued when new execution context is created."
+        }
+    ]
+}
+,
+{
+    "domain": "Timeline",
+    "description": "Timeline provides its clients with instrumentation records that are generated during the page runtime. Timeline instrumentation can be started and stopped using corresponding commands. While timeline is started, it is generating timeline event records.",
+    "availability": "web",
+    "types": [
+        {
+            "id": "EventType",
+            "type": "string",
+            "enum": [
+                "EventDispatch",
+                "ScheduleStyleRecalculation",
+                "RecalculateStyles",
+                "InvalidateLayout",
+                "Layout",
+                "Paint",
+                "Composite",
+                "RenderingFrame",
+                "ScrollLayer",
+                "ParseHTML",
+                "TimerInstall",
+                "TimerRemove",
+                "TimerFire",
+                "EvaluateScript",
+                "MarkLoad",
+                "MarkDOMContent",
+                "TimeStamp",
+                "Time",
+                "TimeEnd",
+                "XHRReadyStateChange",
+                "XHRLoad",
+                "FunctionCall",
+                "ProbeSample",
+                "ConsoleProfile",
+                "GCEvent",
+                "RequestAnimationFrame",
+                "CancelAnimationFrame",
+                "FireAnimationFrame",
+                "WebSocketCreate",
+                "WebSocketSendHandshakeRequest",
+                "WebSocketReceiveHandshakeResponse",
+                "WebSocketDestroy"
+            ],
+            "description": "Timeline record type."
+        },
+        {
+            "id": "TimelineEvent",
+            "type": "object",
+            "properties": [
+                { "name": "type", "$ref": "EventType", "description": "Event type." },
+                { "name": "data", "type": "object", "description": "Event data." },
+                { "name": "children", "type": "array", "optional": true, "items": { "$ref": "TimelineEvent" }, "description": "Nested records." }
+            ],
+            "description": "Timeline record contains information about the recorded activity."
+        },
+        {
+            "id": "CPUProfileNodeAggregateCallInfo",
+            "type": "object",
+            "description": "Aggregate CPU Profile call info. Holds time information for all the calls that happened on a node.",
+            "properties": [
+                { "name": "callCount", "type": "number", "description": "Total number of calls." },
+                { "name": "startTime", "type": "number", "description": "Start time for the first call." },
+                { "name": "endTime", "type": "number", "description": "End time for the last call." },
+                { "name": "totalTime", "type": "number", "description": "Total execution time for all calls combined." }
+            ]
+        },
+        {
+            "id": "CPUProfileNode",
+            "type": "object",
+            "description": "CPU Profile node. Holds callsite information, execution statistics and child nodes.",
+            "properties": [
+                { "name": "id", "type": "integer", "description": "Unique identifier for this call site." },
+                { "name": "callInfo", "$ref": "CPUProfileNodeAggregateCallInfo", "description": "Aggregate info about all the calls that making up this node." },
+                { "name": "functionName", "type": "string", "optional": true, "description": "Function name." },
+                { "name": "url", "type": "string", "optional": true, "description": "URL." },
+                { "name": "lineNumber", "type": "integer", "optional": true, "description": "Line number." },
+                { "name": "columnNumber", "type": "integer", "optional": true, "description": "Column number." },
+                { "name": "children", "type": "array", "items": { "$ref": "CPUProfileNode" }, "optional": true, "description": "Child nodes." }
+            ]
+        },
+        {
+            "id": "CPUProfile",
+            "type": "object",
+            "description": "Profile.",
+            "properties": [
+                { "name": "rootNodes", "type": "array", "items": { "$ref": "CPUProfileNode" }, "description": "Top level nodes in the stack." },
+                { "name": "idleTime", "type": "number", "optional": true }
+            ]
+        }
+    ],
+    "commands": [
+        {
+            "name": "start",
+            "parameters": [
+                { "name": "maxCallStackDepth", "optional": true, "type": "integer", "description": "Samples JavaScript stack traces up to <code>maxCallStackDepth</code>, defaults to 5." }
+            ],
+            "description": "Starts capturing instrumentation events."
+        },
+        {
+            "name": "stop",
+            "description": "Stops capturing instrumentation events."
+        }
+    ],
+    "events": [
+        {
+            "name": "eventRecorded",
+            "parameters": [
+                { "name": "record", "$ref": "TimelineEvent", "description": "Timeline event record data." }
+            ],
+            "description": "Fired for every instrumentation event while timeline is started."
+        },
+        {
+            "name": "recordingStarted",
+            "parameters": [
+                { "name": "startTime", "type": "number", "description": "Start time of this new recording." }
+            ],
+            "description": "Fired when recording has started."
+        },
+        {
+            "name": "recordingStopped",
+            "parameters": [
+                { "name": "endTime", "type": "number", "description": "End time of this recording." }
+            ],
+            "description": "Fired when recording has stopped."
+        }
+    ]
+}
+,
+{
+    "domain": "Worker",
+    "types": [],
+    "availability": "web",
+    "commands": [
+        {
+            "name": "enable"
+        },
+        {
+            "name": "disable"
+        },
+        {
+            "name": "sendMessageToWorker",
+            "parameters": [
+                { "name": "workerId", "type": "integer" },
+                { "name": "message", "type": "object" }
+            ]
+        },
+        {
+            "name": "canInspectWorkers",
+            "description": "Tells whether browser supports workers inspection.",
+            "returns": [
+                { "name": "result", "type": "boolean", "description": "True if browser has workers support." }
+            ]
+        },
+        {
+            "name": "connectToWorker",
+            "parameters": [
+                { "name": "workerId", "type": "integer" }
+            ]
+        },
+        {
+            "name": "disconnectFromWorker",
+            "parameters": [
+                { "name": "workerId", "type": "integer" }
+            ]
+        },
+        {
+            "name": "setAutoconnectToWorkers",
+            "parameters": [
+                { "name": "value", "type": "boolean" }
+            ]
+        }
+    ],
+    "events": [
+        {
+            "name": "workerCreated",
+            "parameters": [
+                { "name": "workerId", "type": "integer" },
+                { "name": "url", "type": "string" },
+                { "name": "inspectorConnected", "type": "boolean" }
+            ]
+        },
+        {
+            "name": "workerTerminated",
+            "parameters": [
+                { "name": "workerId", "type": "integer" }
+            ]
+        },
+        {
+            "name": "dispatchMessageFromWorker",
+            "parameters": [
+                { "name": "workerId", "type": "integer" },
+                { "name": "message", "type": "object" }
+            ]
+        },
+        {
+            "name": "disconnectedFromWorker"
+        }
+    ]
+}
+]}
diff --git a/Source/WebInspectorUI/WebInspectorUI.c b/Source/WebInspectorUI/WebInspectorUI.c
new file mode 100644
index 000000000..93728c704
--- /dev/null
+++ b/Source/WebInspectorUI/WebInspectorUI.c
@@ -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.
+ */
+
+// Intentionally empty. This file is needed to create a linkable framework binary.