Merge Webkit at r70949: Initial merge by git.

Change-Id: I77b8645c083b5d0da8dba73ed01d4014aab9848e

37 files changed, 2122 insertions, 1073 deletions

diff --git a/WebCore/inspector/front-end/ApplicationCacheItemsView.js b/WebCore/inspector/front-end/ApplicationCacheItemsView.js
index f450938..f5147e3 100644
--- a/WebCore/inspector/front-end/ApplicationCacheItemsView.js
+++ b/WebCore/inspector/front-end/ApplicationCacheItemsView.js
@@ -64,7 +64,7 @@ WebInspector.ApplicationCacheItemsView = function(treeElement, appcacheDomain)
     this._appcacheDomain = appcacheDomain;
 
     this._emptyMsgElement = document.createElement("div");
-    this._emptyMsgElement.className = "storage-table-empty";
+    this._emptyMsgElement.className = "storage-empty-view";
     this._emptyMsgElement.textContent = WebInspector.UIString("No Application Cache information available.");
     this.element.appendChild(this._emptyMsgElement);
 
diff --git a/WebCore/inspector/front-end/AuditLauncherView.js b/WebCore/inspector/front-end/AuditLauncherView.js
index a922715..d4bbf90 100644
--- a/WebCore/inspector/front-end/AuditLauncherView.js
+++ b/WebCore/inspector/front-end/AuditLauncherView.js
@@ -269,6 +269,7 @@ WebInspector.AuditLauncherView.prototype = {
         this._selectAllClicked(this._selectAllCheckboxElement.checked);
         this.updateResourceTrackingState();
         this._updateButton();
+        this._updateResourceProgress();
     },
 
     _updateResourceProgress: function()
diff --git a/WebCore/inspector/front-end/AuditRules.js b/WebCore/inspector/front-end/AuditRules.js
index cd9f13e..515ce8e 100644
--- a/WebCore/inspector/front-end/AuditRules.js
+++ b/WebCore/inspector/front-end/AuditRules.js
@@ -286,8 +286,8 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
             var testedSelectors = {};
             for (var i = 0; i < styleSheets.length; ++i) {
                 var styleSheet = styleSheets[i];
-                for (var curRule = 0; curRule < styleSheet.cssRules.length; ++curRule) {
-                    var rule = styleSheet.cssRules[curRule];
+                for (var curRule = 0; curRule < styleSheet.rules.length; ++curRule) {
+                    var rule = styleSheet.rules[curRule];
                     if (rule.selectorText.match(pseudoSelectorRegexp))
                         continue;
                     selectors.push(rule.selectorText);
@@ -307,9 +307,10 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
                     var stylesheetSize = 0;
                     var unusedStylesheetSize = 0;
                     var unusedRules = [];
-                    for (var curRule = 0; curRule < styleSheet.cssRules.length; ++curRule) {
-                        var rule = styleSheet.cssRules[curRule];
-                        var textLength = rule.cssText ? rule.cssText.length : 0;
+                    for (var curRule = 0; curRule < styleSheet.rules.length; ++curRule) {
+                        var rule = styleSheet.rules[curRule];
+                        // FIXME: replace this by an exact computation once source ranges are available
+                        var textLength = rule.style.cssText ? rule.style.cssText.length + rule.selectorText.length : 0;
                         stylesheetSize += textLength;
                         if (!testedSelectors[rule.selectorText] || foundSelectors[rule.selectorText])
                             continue;
@@ -322,7 +323,7 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
                     if (!unusedRules.length)
                         continue;
 
-                    var url = styleSheet.href ? WebInspector.AuditRuleResult.linkifyDisplayName(styleSheet.href) : String.sprintf("Inline block #%d", ++inlineBlockOrdinal);
+                    var url = styleSheet.sourceURL ? WebInspector.AuditRuleResult.linkifyDisplayName(styleSheet.sourceURL) : String.sprintf("Inline block #%d", ++inlineBlockOrdinal);
                     var pctUnused = Math.round(100 * unusedStylesheetSize / stylesheetSize);
                     if (!summary)
                         summary = result.addChild("", true);
@@ -657,7 +658,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = {
             if (completeSrc)
                 src = completeSrc;
 
-            const computedStyle = new WebInspector.CSSStyleDeclaration(styles.computedStyle);
+            const computedStyle = WebInspector.CSSStyleDeclaration.parsePayload(styles.computedStyle);
             if (computedStyle.getPropertyValue("position") === "absolute") {
                 if (!context.imagesLeft)
                     doneCallback(context);
@@ -668,7 +669,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = {
             var heightFound = "height" in styles.styleAttributes;
 
             for (var i = styles.matchedCSSRules.length - 1; i >= 0 && !(widthFound && heightFound); --i) {
-                var style = WebInspector.CSSStyleDeclaration.parseRule(styles.matchedCSSRules[i]).style;
+                var style = WebInspector.CSSRule.parsePayload(styles.matchedCSSRules[i]).style;
                 if (style.getPropertyValue("width") !== "")
                     widthFound = true;
                 if (style.getPropertyValue("height") !== "")
diff --git a/WebCore/inspector/front-end/AuditsPanel.js b/WebCore/inspector/front-end/AuditsPanel.js
index f6cbed0..b4eb202 100644
--- a/WebCore/inspector/front-end/AuditsPanel.js
+++ b/WebCore/inspector/front-end/AuditsPanel.js
@@ -130,8 +130,8 @@ WebInspector.AuditsPanel.prototype = {
     _executeAudit: function(categories, resultCallback)
     {
         var resources = [];
-        for (var id in WebInspector.resources)
-            resources.push(WebInspector.resources[id]);
+        for (var id in WebInspector.networkResources)
+            resources.push(WebInspector.networkResources[id]);
 
         var rulesRemaining = 0;
         for (var i = 0; i < categories.length; ++i)
@@ -205,8 +205,8 @@ WebInspector.AuditsPanel.prototype = {
     {
         this._resourceTrackingCallback = callback;
 
-        if (!WebInspector.panels.resources.resourceTrackingEnabled) {
-            InspectorBackend.enableResourceTracking(false);
+        if (WebInspector.panels.resources && !WebInspector.panels.resources.resourceTrackingEnabled) {
+            WebInspector.panels.resources.toggleResourceTracking(false);
             this._updateLauncherViewControls(true);
         } else
             InspectorBackend.reloadPage();
@@ -256,7 +256,7 @@ WebInspector.AuditsPanel.prototype = {
     show: function()
     {
         WebInspector.Panel.prototype.show.call(this);
-        this._updateLauncherViewControls(WebInspector.panels.resources.resourceTrackingEnabled);
+        this._updateLauncherViewControls(!WebInspector.panels.resources || WebInspector.panels.resources.resourceTrackingEnabled);
     },
 
     reset: function()
diff --git a/WebCore/inspector/front-end/CSSStyleModel.js b/WebCore/inspector/front-end/CSSStyleModel.js
index e3e9b4f..702c923 100644
--- a/WebCore/inspector/front-end/CSSStyleModel.js
+++ b/WebCore/inspector/front-end/CSSStyleModel.js
@@ -32,15 +32,84 @@ WebInspector.CSSStyleModel = function()
 {
 }
 
+WebInspector.CSSStyleModel.parseRuleArrayPayload = function(ruleArray)
+{
+    var result = [];
+    for (var i = 0; i < ruleArray.length; ++i)
+        result.push(WebInspector.CSSRule.parsePayload(ruleArray[i]));
+    return result;
+}
+
 WebInspector.CSSStyleModel.prototype = {
-    getStylesAsync: function(nodeId, authOnly, userCallback)
+    getStylesAsync: function(nodeId, userCallback)
     {
-        InspectorBackend.getStyles(nodeId, authOnly, userCallback);
+        function callback(userCallback, payload)
+        {
+            if (!payload) {
+                if (userCallback)
+                    userCallback(null);
+                return;
+            }
+
+            var result = {};
+            if ("inlineStyle" in payload)
+                result.inlineStyle = WebInspector.CSSStyleDeclaration.parsePayload(payload.inlineStyle);
+
+            result.computedStyle = WebInspector.CSSStyleDeclaration.parsePayload(payload.computedStyle);
+            result.matchedCSSRules = WebInspector.CSSStyleModel.parseRuleArrayPayload(payload.matchedCSSRules);
+
+            result.styleAttributes = {};
+            for (var name in payload.styleAttributes)
+                result.styleAttributes[name] = WebInspector.CSSStyleDeclaration.parsePayload(payload.styleAttributes[name]);
+
+            result.pseudoElements = [];
+            for (var i = 0; i < payload.pseudoElements.length; ++i) {
+                var entryPayload = payload.pseudoElements[i];
+                result.pseudoElements.push({ pseudoId: entryPayload.pseudoId, rules: WebInspector.CSSStyleModel.parseRuleArrayPayload(entryPayload.rules) });
+            }
+
+            result.inherited = [];
+            for (var i = 0; i < payload.inherited.length; ++i) {
+                var entryPayload = payload.inherited[i];
+                var entry = {};
+                if ("inlineStyle" in entryPayload)
+                    entry.inlineStyle = WebInspector.CSSStyleDeclaration.parsePayload(entryPayload.inlineStyle);
+                if ("matchedCSSRules" in entryPayload)
+                    entry.matchedCSSRules = WebInspector.CSSStyleModel.parseRuleArrayPayload(entryPayload.matchedCSSRules);
+                result.inherited.push(entry);
+            }
+
+            if (userCallback)
+                userCallback(result);
+        }
+
+        InspectorBackend.getStyles(nodeId, false, callback.bind(null, userCallback));
     },
 
     getComputedStyleAsync: function(nodeId, userCallback)
     {
-        InspectorBackend.getComputedStyle(nodeId, userCallback);
+        function callback(userCallback, stylePayload)
+        {
+            if (!stylePayload)
+                userCallback(null);
+            else
+                userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload));
+        }
+
+        InspectorBackend.getComputedStyle(nodeId, callback.bind(null, userCallback));
+    },
+
+    getInlineStyleAsync: function(nodeId, userCallback)
+    {
+        function callback(userCallback, stylePayload)
+        {
+            if (!stylePayload)
+                userCallback(null);
+            else
+                userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload));
+        }
+
+        InspectorBackend.getInlineStyle(nodeId, callback.bind(null, userCallback));
     },
 
     setRuleSelector: function(ruleId, newContent, nodeId, successCallback, failureCallback)
@@ -73,39 +142,8 @@ WebInspector.CSSStyleModel.prototype = {
         InspectorBackend.addRule(newContent, nodeId, callback);
     },
 
-    toggleStyleEnabled: function(styleId, propertyName, disabled, userCallback)
-    {
-        function callback(newPayload)
-        {
-            if (!newPayload) {
-                userCallback(null);
-                return;
-            }
-
-            var newStyle = WebInspector.CSSStyleDeclaration.parseStyle(newPayload);
-            userCallback(newStyle);
-        }
-
-        InspectorBackend.toggleStyleEnabled(styleId, propertyName, disabled, callback);
-    },
-
     setCSSText: function(styleId, cssText)
     {
         InspectorBackend.setStyleText(styleId, cssText);
-    },
-
-    applyStyleText: function(styleId, styleText, propertyName, successCallback, failureCallback)
-    {
-        function callback(success, newPayload)
-        {
-            if (!success)
-                failureCallback();
-            else {
-                var newStyle = newPayload ? WebInspector.CSSStyleDeclaration.parseStyle(newPayload) : null;
-                successCallback(newStyle);
-            }
-        }
-
-        InspectorBackend.applyStyleText(styleId, styleText, propertyName, callback);
     }
 }
diff --git a/WebCore/inspector/front-end/ConsoleView.js b/WebCore/inspector/front-end/ConsoleView.js
index 8cd5d52..deca21c 100644
--- a/WebCore/inspector/front-end/ConsoleView.js
+++ b/WebCore/inspector/front-end/ConsoleView.js
@@ -48,7 +48,7 @@ WebInspector.ConsoleView = function(drawer)
     this.promptElement.className = "source-code";
     this.promptElement.addEventListener("keydown", this._promptKeyDown.bind(this), true);
     this.prompt = new WebInspector.TextPrompt(this.promptElement, this.completions.bind(this), ExpressionStopCharacters + ".");
-    WebInspector.applicationSettings.addEventListener("loaded", this._settingsLoaded, this);
+    this.prompt.history = WebInspector.applicationSettings.consoleHistory;
 
     this.topGroup = new WebInspector.ConsoleGroup(null, 0);
     this.messagesElement.insertBefore(this.topGroup.element, this.promptElement);
@@ -102,11 +102,6 @@ WebInspector.ConsoleView = function(drawer)
 }
 
 WebInspector.ConsoleView.prototype = {
-    _settingsLoaded: function()
-    {
-        this.prompt.history = WebInspector.applicationSettings.consoleHistory;
-    },
-    
     _updateFilter: function(e)
     {
         var isMac = WebInspector.isMac();
@@ -225,11 +220,15 @@ WebInspector.ConsoleView.prototype = {
             this._incrementErrorWarningCount(msg);
 
             // Add message to the resource panel
-            if (msg.url in WebInspector.resourceURLMap) {
-                msg.resource = WebInspector.resourceURLMap[msg.url];
-                if (WebInspector.panels.resources)
-                    WebInspector.panels.resources.addMessageToResource(msg.resource, msg);
-            }
+            if (!Preferences.networkPanelEnabled) {
+                var resource = WebInspector.resourceForURL(msg.url);
+                if (resource) {
+                    msg.resource = resource;
+                    if (WebInspector.panels.resources)
+                        WebInspector.panels.resources.addMessageToResource(msg.resource, msg);
+                }
+            } else
+                WebInspector.resourceManager.addConsoleMessage(msg);
 
             this.commandSincePreviousMessage = false;
             this.previousMessage = msg;
@@ -303,6 +302,8 @@ WebInspector.ConsoleView.prototype = {
     {
         if (WebInspector.panels.resources)
             WebInspector.panels.resources.clearMessages();
+        if (WebInspector.resourceManager)
+            WebInspector.resourceManager.clearConsoleMessages();
 
         this.messages = [];
 
@@ -678,7 +679,7 @@ WebInspector.ConsoleMessage.prototype = {
             case WebInspector.ConsoleMessage.MessageType.Trace:
             case WebInspector.ConsoleMessage.MessageType.UncaughtException:
                 var ol = document.createElement("ol");
-                ol.addStyleClass("stack-trace");
+                ol.className = "outline-disclosure";
                 var treeOutline = new TreeOutline(ol);
                 var messageText;
                 if (this.type === WebInspector.ConsoleMessage.MessageType.Assert)
diff --git a/WebCore/inspector/front-end/CookieItemsView.js b/WebCore/inspector/front-end/CookieItemsView.js
index 88cbe05..b2da875 100644
--- a/WebCore/inspector/front-end/CookieItemsView.js
+++ b/WebCore/inspector/front-end/CookieItemsView.js
@@ -27,12 +27,141 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.CookieItemsView = function(treeElement, cookieDomain)
+WebInspector.CookiesTable = function()
 {
     WebInspector.View.call(this);
 
-    this.element.addStyleClass("storage-view");
     this.element.addStyleClass("table");
+}
+
+WebInspector.CookiesTable.prototype = {
+    resize: function()
+    {
+        if (!this._dataGrid)
+            return;
+
+        if (this._autoSizingDone)
+            this._dataGrid.updateWidths();
+        else {
+            this._autoSizingDone = true;
+            this._dataGrid.autoSizeColumns(4, 45, 1);
+        }
+    },
+
+    _createDataGrid: function(expandable)
+    {
+        var columns = { 0: {}, 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, 6: {}, 7: {} };
+        columns[0].title = WebInspector.UIString("Name");
+        columns[0].sortable = true;
+        columns[0].disclosure = expandable;
+        columns[1].title = WebInspector.UIString("Value");
+        columns[1].sortable = true;
+        columns[2].title = WebInspector.UIString("Domain");
+        columns[2].sortable = true;
+        columns[3].title = WebInspector.UIString("Path");
+        columns[3].sortable = true;
+        columns[4].title = WebInspector.UIString("Expires");
+        columns[4].sortable = true;
+        columns[5].title = WebInspector.UIString("Size");
+        columns[5].aligned = "right";
+        columns[5].sortable = true;
+        columns[6].title = WebInspector.UIString("HTTP");
+        columns[6].aligned = "centered";
+        columns[6].sortable = true;
+        columns[7].title = WebInspector.UIString("Secure");
+        columns[7].aligned = "centered";
+        columns[7].sortable = true;
+
+        var deleteCallback = this._deleteCookieCallback ? this._deleteCookieCallback.bind(this) : null;
+        this._dataGrid = new WebInspector.DataGrid(columns, null, deleteCallback);
+        this._dataGrid.addEventListener("sorting changed", this._populateDataGrid, this);
+        this.element.appendChild(this._dataGrid.element);
+    },
+
+    _populateCookies: function(parentNode, cookies)
+    {
+        var selectedCookie = this._dataGrid.selectedNode ? this._dataGrid.selectedNode.cookie : null;
+        parentNode.removeChildren();
+        if (!cookies)
+            return;
+        this._sortCookies(cookies);
+        var totalSize = 0;
+        for (var i = 0; i < cookies.length; ++i) {
+            var cookieNode = this._createGridNode(cookies[i]);
+            parentNode.appendChild(cookieNode);
+            if (selectedCookie === cookies[i])
+                cookieNode.selected = true;
+        }
+    },
+
+    _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)) {
+            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);
+    },
+
+    _createGridNode: function(cookie)
+    {
+        var data = {};
+        data[0] = cookie.name;
+        data[1] = cookie.value;
+        data[2] = cookie.domain || "";
+        data[3] = cookie.path || "";
+        data[4] = cookie.type === WebInspector.Cookie.Type.Request ? "" :
+            (cookie.session ? WebInspector.UIString("Session") : new Date(cookie.expires).toGMTString());
+        data[5] = cookie.size;
+        data[6] = (cookie.httpOnly ? "\u2713" : ""); // Checkmark
+        data[7] = (cookie.secure ? "\u2713" : ""); // Checkmark
+
+        var node = new WebInspector.DataGridNode(data);
+        node.cookie = cookie;
+        node.selectable = true;
+        return node;
+    }
+};
+
+WebInspector.CookiesTable.prototype.__proto__ = WebInspector.View.prototype;
+
+WebInspector.CookieItemsView = function(treeElement, cookieDomain)
+{
+    WebInspector.CookiesTable.call(this);
+
+    this.element.addStyleClass("storage-view");
 
     this.deleteButton = new WebInspector.StatusBarButton(WebInspector.UIString("Delete"), "delete-storage-status-bar-item");
     this.deleteButton.visible = false;
@@ -45,7 +174,7 @@ WebInspector.CookieItemsView = function(treeElement, cookieDomain)
     this._cookieDomain = cookieDomain;
 
     this._emptyMsgElement = document.createElement("div");
-    this._emptyMsgElement.className = "storage-table-empty";
+    this._emptyMsgElement.className = "storage-empty-view";
     this._emptyMsgElement.textContent = WebInspector.UIString("This site has no cookies.");
     this.element.appendChild(this._emptyMsgElement);
 }
@@ -79,7 +208,6 @@ WebInspector.CookieItemsView.prototype = {
             this._filterCookiesForDomain(allCookies);
         else
             this._cookies = allCookies;
-
         if (!this._cookies.length) {
             // Nothing to show.
             this._emptyMsgElement.removeStyleClass("hidden");
@@ -120,12 +248,13 @@ WebInspector.CookieItemsView.prototype = {
         var resourceURLsForDocumentURL = [];
         this._totalSize = 0;
 
-        for (var id in WebInspector.resources) {
-            var resource = WebInspector.resources[id];
+        function populateResourcesForDocuments(resource)
+        {
             var url = resource.documentURL.asParsedURL();
             if (url && url.host == this._cookieDomain)
                 resourceURLsForDocumentURL.push(resource.url);
         }
+        WebInspector.forAllResources(populateResourcesForDocuments.bind(this));
 
         for (var i = 0; i < allCookies.length; ++i) {
             var pushed = false;
@@ -143,101 +272,9 @@ WebInspector.CookieItemsView.prototype = {
         }
     },
 
-    _createDataGrid: function()
-    {
-        var columns = { 0: {}, 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, 6: {}, 7: {} };
-        columns[0].title = WebInspector.UIString("Name");
-        columns[0].sortable = true;
-        columns[1].title = WebInspector.UIString("Value");
-        columns[1].sortable = true;
-        columns[2].title = WebInspector.UIString("Domain");
-        columns[2].sortable = true;
-        columns[3].title = WebInspector.UIString("Path");
-        columns[3].sortable = true;
-        columns[4].title = WebInspector.UIString("Expires");
-        columns[4].sortable = true;
-        columns[5].title = WebInspector.UIString("Size");
-        columns[5].aligned = "right";
-        columns[5].sortable = true;
-        columns[6].title = WebInspector.UIString("HTTP");
-        columns[6].aligned = "centered";
-        columns[6].sortable = true;
-        columns[7].title = WebInspector.UIString("Secure");
-        columns[7].aligned = "centered";
-        columns[7].sortable = true;
-
-        this._dataGrid = new WebInspector.DataGrid(columns, null, this._deleteCookieCallback.bind(this));
-        this._dataGrid.addEventListener("sorting changed", this._populateDataGrid, this);
-        this.element.appendChild(this._dataGrid.element);
-        this._dataGrid.updateWidths();
-    },
-
     _populateDataGrid: function()
     {
-        var selectedCookie = this._dataGrid.selectedNode ? this._dataGrid.selectedNode.cookie : null;
-        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)) {
-            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");
-        }
-
-        this._cookies.sort(comparator);
-
-        this._dataGrid.removeChildren();
-        var nodeToSelect;
-        for (var i = 0; i < this._cookies.length; ++i) {
-            var data = {};
-            var cookie = this._cookies[i];
-            data[0] = cookie.name;
-            data[1] = cookie.value;
-            data[2] = cookie.domain;
-            data[3] = cookie.path;
-            data[4] = (cookie.session ? WebInspector.UIString("Session") : new Date(cookie.expires).toGMTString());
-            data[5] = Number.bytesToString(cookie.size, WebInspector.UIString);
-            data[6] = (cookie.httpOnly ? "\u2713" : ""); // Checkmark
-            data[7] = (cookie.secure ? "\u2713" : ""); // Checkmark
-
-            var node = new WebInspector.DataGridNode(data);
-            node.cookie = cookie;
-            node.selectable = true;
-            this._dataGrid.appendChild(node);
-            if (cookie === selectedCookie)
-                nodeToSelect = node;
-        }
-        if (nodeToSelect)
-            nodeToSelect.selected = true;
-        else
-            this._dataGrid.children[0].selected = true;
+        this._populateCookies(this._dataGrid, this._cookies);
     },
 
     _createSimpleDataGrid: function()
@@ -273,12 +310,6 @@ WebInspector.CookieItemsView.prototype = {
         this._dataGrid.children[0].selected = true;
     },
 
-    resize: function()
-    {
-        if (this._dataGrid)
-            this._dataGrid.updateWidths();
-    },
-
     _deleteButtonClicked: function(event)
     {
         if (!this._dataGrid || !this._dataGrid.selectedNode)
@@ -300,4 +331,5 @@ WebInspector.CookieItemsView.prototype = {
     }
 }
 
-WebInspector.CookieItemsView.prototype.__proto__ = WebInspector.View.prototype;
+WebInspector.CookieItemsView.prototype.__proto__ = WebInspector.CookiesTable.prototype;
+
diff --git a/WebCore/inspector/front-end/CookieParser.js b/WebCore/inspector/front-end/CookieParser.js
index 2be5df7..f96be0b 100755
--- a/WebCore/inspector/front-end/CookieParser.js
+++ b/WebCore/inspector/front-end/CookieParser.js
@@ -54,7 +54,7 @@ WebInspector.CookieParser.prototype = {
             if (kv.key.charAt(0) === "$" && this._lastCookie)
                 this._lastCookie.addAttribute(kv.key.slice(1), kv.value);
             else if (kv.key.toLowerCase() !== "$version" && typeof kv.value === "string")
-                this._addCookie(kv);
+                this._addCookie(kv, WebInspector.Cookie.Type.Request);
             this._advanceAndCheckCookieDelimiter();
         }
         this._flushCookie();
@@ -69,7 +69,7 @@ WebInspector.CookieParser.prototype = {
             if (this._lastCookie)
                 this._lastCookie.addAttribute(kv.key, kv.value);
             else 
-                this._addCookie(kv);
+                this._addCookie(kv, WebInspector.Cookie.Type.Response);
             if (this._advanceAndCheckCookieDelimiter())
                 this._flushCookie();
         }
@@ -128,14 +128,14 @@ WebInspector.CookieParser.prototype = {
         return match[0].match("\n") !== null;
     },
 
-    _addCookie: function(keyValue)
+    _addCookie: function(keyValue, type)
     {
         if (this._lastCookie)
             this._lastCookie.size = keyValue.position - this._lastCookiePosition;
-        // Mozilla bug 169091: Mozilla, IE and Chrome treat signle token (w/o "=") as
+        // Mozilla bug 169091: Mozilla, IE and Chrome treat single token (w/o "=") as
         // specifying a value for a cookie with empty name.
-        this._lastCookie = keyValue.value ? new WebInspector.Cookie(keyValue.key, keyValue.value) :
-            new WebInspector.Cookie("", keyValue.key);
+        this._lastCookie = keyValue.value ? new WebInspector.Cookie(keyValue.key, keyValue.value, type) :
+            new WebInspector.Cookie("", keyValue.key, type);
         this._lastCookiePosition = keyValue.position;
         this._cookies.push(this._lastCookie);
     }
@@ -151,10 +151,11 @@ WebInspector.CookieParser.parseSetCookie = function(header)
     return (new WebInspector.CookieParser()).parseSetCookie(header);
 }
 
-WebInspector.Cookie = function(name, value)
+WebInspector.Cookie = function(name, value, type)
 {
     this.name = name;
     this.value = value;
+    this.type = type;
     this._attributes = {};
 }
 
@@ -202,3 +203,8 @@ WebInspector.Cookie.prototype = {
         this._attributes[key.toLowerCase()] = value;
     }
 }
+
+WebInspector.Cookie.Type = {
+    Request: 0,
+    Response: 1
+};
diff --git a/WebCore/inspector/front-end/DOMAgent.js b/WebCore/inspector/front-end/DOMAgent.js
index 5153fb1..470e775 100644
--- a/WebCore/inspector/front-end/DOMAgent.js
+++ b/WebCore/inspector/front-end/DOMAgent.js
@@ -526,90 +526,78 @@ WebInspector.EventListeners.getEventListenersForNodeAsync = function(node, callb
 
 WebInspector.CSSStyleDeclaration = function(payload)
 {
-    this.id = payload.id;
-    this.parentStyleSheetId = payload.parentStyleSheetId;
-    this.width = payload.width;
-    this.height = payload.height;
-    this.__disabledProperties = {};
-    this.__disabledPropertyValues = {};
-    this.__disabledPropertyPriorities = {};
-    if (payload.disabled) {
-        for (var i = 0; i < payload.disabled.length; ++i) {
-            var property = payload.disabled[i];
-            this.__disabledProperties[property.name] = true;
-            this.__disabledPropertyValues[property.name] = property.value;
-            this.__disabledPropertyPriorities[property.name] = property.priority;
-        }
-    }
-
+    this.id = payload.styleId;
+    this.properties = payload.properties;
     this._shorthandValues = payload.shorthandValues;
-    this._propertyMap = {};
-    this._longhandProperties = {};
-    this.length = payload.properties.length;
-
-    for (var i = 0; i < this.length; ++i) {
-        var property = payload.properties[i];
+    this._livePropertyMap = {}; // LIVE properties (source-based or style-based) : { name -> CSSProperty }
+    this._allProperties = []; // ALL properties: [ CSSProperty ]
+    this._longhandProperties = {}; // shorthandName -> [ CSSProperty ]
+    this.__disabledProperties = {}; // DISABLED properties: { index -> CSSProperty }
+    var payloadPropertyCount = payload.cssProperties.length;
+
+    var propertyIndex = 0;
+    for (var i = 0; i < payloadPropertyCount; ++i) {
+        var property = new WebInspector.CSSProperty.parsePayload(this, i, payload.cssProperties[i]);
+        this._allProperties.push(property);
+        if (property.disabled)
+            this.__disabledProperties[i] = property;
+        if (!property.active && !property.styleBased)
+            continue;
         var name = property.name;
-        this[i] = name;
-        this._propertyMap[name] = property;
+        this[propertyIndex] = name;
+        this._livePropertyMap[name] = property;
 
         // Index longhand properties.
-        if (property.shorthand) {
+        if (property.shorthand) { // only for parsed
             var longhands = this._longhandProperties[property.shorthand];
             if (!longhands) {
                 longhands = [];
                 this._longhandProperties[property.shorthand] = longhands;
             }
-            longhands.push(name);
+            longhands.push(property);
         }
+        ++propertyIndex;
     }
+    this.length = propertyIndex;
 }
 
-WebInspector.CSSStyleDeclaration.parseStyle = function(payload)
+WebInspector.CSSStyleDeclaration.parsePayload = function(payload)
 {
     return new WebInspector.CSSStyleDeclaration(payload);
 }
 
-WebInspector.CSSStyleDeclaration.parseRule = function(payload)
-{
-    var rule = {};
-    rule.id = payload.id;
-    rule.selectorText = payload.selectorText;
-    rule.style = new WebInspector.CSSStyleDeclaration(payload.style);
-    rule.style.parentRule = rule;
-    rule.isUserAgent = payload.isUserAgent;
-    rule.isUser = payload.isUser;
-    rule.isViaInspector = payload.isViaInspector;
-    rule.sourceLine = payload.sourceLine;
-    rule.documentURL = payload.documentURL;
-    if (payload.parentStyleSheet)
-        rule.parentStyleSheet = { href: payload.parentStyleSheet.href };
-
-    return rule;
-}
-
 WebInspector.CSSStyleDeclaration.prototype = {
+    get allProperties()
+    {
+        return this._allProperties;
+    },
+
+    getLiveProperty: function(name)
+    {
+        return this._livePropertyMap[name];
+    },
+
     getPropertyValue: function(name)
     {
-        var property = this._propertyMap[name];
+        var property = this._livePropertyMap[name];
         return property ? property.value : "";
     },
 
     getPropertyPriority: function(name)
     {
-        var property = this._propertyMap[name];
+        var property = this._livePropertyMap[name];
         return property ? property.priority : "";
     },
 
     getPropertyShorthand: function(name)
     {
-        var property = this._propertyMap[name];
+        var property = this._livePropertyMap[name];
         return property ? property.shorthand : "";
     },
 
     isPropertyImplicit: function(name)
     {
-        var property = this._propertyMap[name];
+        var property = this._livePropertyMap[name];
         return property ? property.implicit : "";
     },
 
@@ -651,7 +639,8 @@ WebInspector.CSSStyleDeclaration.prototype = {
 
     getShorthandValue: function(shorthandProperty)
     {
-        return this._shorthandValues[shorthandProperty];
+        var property = this.getLiveProperty(shorthandProperty);
+        return property ? property.value : this._shorthandValues[shorthandProperty];
     },
 
     getShorthandPriority: function(shorthandProperty)
@@ -662,6 +651,166 @@ WebInspector.CSSStyleDeclaration.prototype = {
 
         var longhands = this._longhandProperties[shorthandProperty];
         return longhands ? this.getPropertyPriority(longhands[0]) : null;
+    },
+
+    appendProperty: function(propertyName, propertyValue, userCallback)
+    {
+        function setPropertyCallback(userCallback, success, stylePayload)
+        {
+            if (!success)
+                userCallback(null);
+            else
+                userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload));
+        }
+
+        // FIXME(apavlov): this should be migrated to the new InspectorCSSAgent API once it is enabled.
+        InspectorBackend.applyStyleText(this.id, propertyName + ": " + propertyValue + ";", propertyName, setPropertyCallback.bind(this, userCallback));
+    },
+
+    propertyAt: function(index)
+    {
+        return (index < this.allProperties.length) ? this.allProperties[index] : null;
+    }
+}
+
+WebInspector.CSSRule = function(payload)
+{
+    this.id = payload.ruleId;
+    this.selectorText = payload.selectorText;
+    this.sourceLine = payload.sourceLine;
+    this.sourceURL = payload.sourceURL;
+    this.origin = payload.origin;
+    this.style = WebInspector.CSSStyleDeclaration.parsePayload(payload.style);
+    this.style.parentRule = this;
+}
+
+WebInspector.CSSRule.parsePayload = function(payload)
+{
+    return new WebInspector.CSSRule(payload);
+}
+
+WebInspector.CSSRule.prototype = {
+    get isUserAgent()
+    {
+        return this.origin === "user-agent";
+    },
+
+    get isUser()
+    {
+        return this.origin === "user";
+    },
+
+    get isViaInspector()
+    {
+        return this.origin === "inspector";
+    },
+
+    get isRegular()
+    {
+        return this.origin === "";
+    }
+}
+
+WebInspector.CSSProperty = function(ownerStyle, index, name, value, priority, status, parsedOk, implicit, shorthand, text)
+{
+    this.ownerStyle = ownerStyle;
+    this.index = index;
+    this.name = name;
+    this.value = value;
+    this.priority = priority;
+    this.status = status;
+    this.parsedOk = parsedOk;
+    this.implicit = implicit;
+    this.shorthand = shorthand;
+    this.text = text;
+}
+
+WebInspector.CSSProperty.parsePayload = function(ownerStyle, index, payload)
+{
+    var result = new WebInspector.CSSProperty(
+        ownerStyle, index, payload.name, payload.value, payload.priority, payload.status, payload.parsedOk, payload.implicit, payload.shorthandName, payload.text);
+    return result;
+}
+
+WebInspector.CSSProperty.prototype = {
+    get propertyText()
+    {
+        if (this.text !== undefined)
+            return this.text;
+
+        return this.name + ": " + this.value + (this.priority ? " !" + this.priority : "") + ";";
+    },
+
+    get isLive()
+    {
+        return this.active || this.styleBased;
+    },
+
+    get active()
+    {
+        return this.status === "active";
+    },
+
+    get styleBased()
+    {
+        return this.status === "style";
+    },
+
+    get inactive()
+    {
+        return this.status === "inactive";
+    },
+
+    get disabled()
+    {
+        return this.status === "disabled";
+    },
+
+    // Replaces "propertyName: propertyValue [!important];" in the stylesheet by an arbitrary propertyText.
+    setText: function(propertyText, userCallback)
+    {
+        function callback(userCallback, success, stylePayload)
+        {
+            if (!userCallback)
+                return;
+            if (!success)
+                userCallback(null);
+            else {
+                var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload);
+                userCallback(style);
+            }
+        }
+
+        if (!this.ownerStyle)
+            throw "No ownerStyle for property";
+        InspectorBackend.applyStyleText(this.ownerStyle.id, propertyText, this.name, callback.bind(this, userCallback));
+    },
+
+    setValue: function(newValue, userCallback)
+    {
+        var text = this.name + ": " + newValue + (this.priority ? " !" + this.priority : "") + ";"
+        this.setText(text, userCallback);
+    },
+
+    setDisabled: function(disabled, userCallback)
+    {
+        if (!this.ownerStyle && userCallback)
+            userCallback(null);
+        if (disabled === this.disabled && userCallback)
+            userCallback(this.ownerStyle);
+
+        function callback(userCallback, stylePayload)
+        {
+            if (!userCallback)
+                return;
+            if (!stylePayload)
+                userCallback(null);
+            else {
+                var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload);
+                userCallback(style);
+            }
+        }
+        InspectorBackend.toggleStyleEnabled(this.ownerStyle.id, this.name, disabled, callback.bind(this, userCallback));
     }
 }
 
diff --git a/WebCore/inspector/front-end/DataGrid.js b/WebCore/inspector/front-end/DataGrid.js
index 3007497..bc429d9 100644
--- a/WebCore/inspector/front-end/DataGrid.js
+++ b/WebCore/inspector/front-end/DataGrid.js
@@ -308,7 +308,7 @@ WebInspector.DataGrid.prototype = {
         return this._dataTableBody;
     },
 
-    autoSizeColumns: function(minPercent, maxPercent)
+    autoSizeColumns: function(minPercent, maxPercent, maxDescentLevel)
     {
         if (minPercent)
             minPercent = Math.min(minPercent, Math.floor(100 / this._columnCount));
@@ -317,8 +317,9 @@ WebInspector.DataGrid.prototype = {
         for (var columnIdentifier in columns)
             widths[columnIdentifier] = (columns[columnIdentifier].title || "").length;
 
-        for (var i = 0; i < this.children.length; ++i) {
-            var node = this.children[i];
+        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])
@@ -371,6 +372,17 @@ WebInspector.DataGrid.prototype = {
         this.updateWidths();
     },
 
+    _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.
     //
@@ -388,7 +400,8 @@ WebInspector.DataGrid.prototype = {
         var tableWidth = this._dataTable.offsetWidth;
         var numColumns = headerTableColumns.length;
         
-        if (!this._columnWidthsInitialized) {
+        // 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
diff --git a/WebCore/inspector/front-end/DatabaseTableView.js b/WebCore/inspector/front-end/DatabaseTableView.js
index 5440763..b234b9a 100644
--- a/WebCore/inspector/front-end/DatabaseTableView.js
+++ b/WebCore/inspector/front-end/DatabaseTableView.js
@@ -61,7 +61,7 @@ WebInspector.DatabaseTableView.prototype = {
         var dataGrid = WebInspector.panels.storage.dataGridForResult(columnNames, values);
         if (!dataGrid) {
             var emptyMsgElement = document.createElement("div");
-            emptyMsgElement.className = "storage-table-empty";
+            emptyMsgElement.className = "storage-empty-view";
             emptyMsgElement.textContent = WebInspector.UIString("The “%s”\ntable is empty.", this.tableName);
             this.element.appendChild(emptyMsgElement);
             return;
diff --git a/WebCore/inspector/front-end/EventListenersSidebarPane.js b/WebCore/inspector/front-end/EventListenersSidebarPane.js
index e2ad259..3354191 100644
--- a/WebCore/inspector/front-end/EventListenersSidebarPane.js
+++ b/WebCore/inspector/front-end/EventListenersSidebarPane.js
@@ -46,7 +46,11 @@ WebInspector.EventListenersSidebarPane = function()
     option.label = WebInspector.UIString("Selected Node Only");
     this.settingsSelectElement.appendChild(option);
 
-    WebInspector.applicationSettings.addEventListener("loaded", this._settingsLoaded, this);
+    var filter = WebInspector.applicationSettings.eventListenersFilter;
+    if (filter === "all")
+        this.settingsSelectElement[0].selected = true;
+    else if (filter === "selected")
+        this.settingsSelectElement[1].selected = true;
     this.settingsSelectElement.addEventListener("click", function(event) { event.stopPropagation() }, false);
     this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false);
 
@@ -54,15 +58,6 @@ WebInspector.EventListenersSidebarPane = function()
 }
 
 WebInspector.EventListenersSidebarPane.prototype = {
-    _settingsLoaded: function()
-    {
-        var filter = WebInspector.applicationSettings.eventListenersFilter;
-        if (filter === "all")
-            this.settingsSelectElement[0].selected = true;
-        if (filter === "selected")
-            this.settingsSelectElement[1].selected = true;
-    },
-
     update: function(node)
     {
         var body = this.bodyElement;
diff --git a/WebCore/inspector/front-end/ExtensionServer.js b/WebCore/inspector/front-end/ExtensionServer.js
index 9ab4c0c..5e593f7 100644
--- a/WebCore/inspector/front-end/ExtensionServer.js
+++ b/WebCore/inspector/front-end/ExtensionServer.js
@@ -240,11 +240,16 @@ WebInspector.ExtensionServer.prototype = {
         var id = message.id;
         var resource = null;
 
-        resource = WebInspector.resources[id] || WebInspector.resourceForURL(id);
+        resource = WebInspector.networkResources[id] || WebInspector.resourceForURL(id);
         if (!resource)
             return this._status.E_NOTFOUND(typeof id + ": " + id);
-        WebInspector.panels.resources.showResource(resource, message.line);
-        WebInspector.showPanel("resources");
+        if (Preferences.networkPanelEnabled) {
+            WebInspector.panels.storage.showResource(resource, message.line);
+            WebInspector.showPanel("storage");
+        } else {
+            WebInspector.panels.resources.showResource(resource, message.line);
+            WebInspector.showPanel("resources");
+        }
     },
 
     _dispatchCallback: function(requestId, port, result)
@@ -256,14 +261,14 @@ WebInspector.ExtensionServer.prototype = {
     {
         function resourceWrapper(id)
         {
-            return WebInspector.extensionServer._convertResource(WebInspector.resources[id]);
+            return WebInspector.extensionServer._convertResource(WebInspector.networkResources[id]);
         }
 
         var response;
         if (request.id)
-            response = WebInspector.resources[request.id] ? resourceWrapper(request.id) : this._status.E_NOTFOUND(request.id);
+            response = WebInspector.networkResources[request.id] ? resourceWrapper(request.id) : this._status.E_NOTFOUND(request.id);
         else
-            response = Object.keys(WebInspector.resources).map(resourceWrapper);
+            response = Object.keys(WebInspector.networkResources).map(resourceWrapper);
         return response;
     },
 
@@ -272,7 +277,7 @@ WebInspector.ExtensionServer.prototype = {
         var ids;
         var response = [];
 
-        function onContentAvailable(id, encoded, content)
+        function onContentAvailable(id, content, encoded)
         {
             var resourceContent = {
                 id: id,
@@ -293,13 +298,12 @@ WebInspector.ExtensionServer.prototype = {
 
         for (var i = 0; i < ids.length; ++i) {
             var id = ids[i];
-            var resource = WebInspector.resources[id];
+            var resource = WebInspector.networkResources[id];
+ 
             if (!resource)
                 response.push(this._status.E_NOTFOUND(id));
-            else {
-                var encode = !WebInspector.Resource.Type.isTextType(resource.type);
-                WebInspector.getEncodedResourceContent(id, encode, onContentAvailable.bind(this, id, encode));
-            }
+            else
+                resource.getContent(onContentAvailable.bind(this, id));
         }
         if (response.length === ids.length)
             this._dispatchCallback(message.requestId, port, response);
@@ -446,8 +450,3 @@ WebInspector.addExtensions = function(extensions)
 }
 
 WebInspector.extensionServer = new WebInspector.ExtensionServer();
-
-WebInspector.getEncodedResourceContent = function(identifier, encode, callback)
-{
-    InspectorBackend.getResourceContent(identifier, encode, callback);
-}
diff --git a/WebCore/inspector/front-end/FontView.js b/WebCore/inspector/front-end/FontView.js
index b011204..78a7e70 100644
--- a/WebCore/inspector/front-end/FontView.js
+++ b/WebCore/inspector/front-end/FontView.js
@@ -69,6 +69,7 @@ WebInspector.FontView.prototype = {
     resize: function()
     {
         this.updateFontPreviewSize();
+        WebInspector.ResourceView.prototype.resize.call(this);
     },
 
     updateFontPreviewSize: function()
diff --git a/WebCore/inspector/front-end/HAREntry.js b/WebCore/inspector/front-end/HAREntry.js
index 2b8f41b..f3bfb06 100644
--- a/WebCore/inspector/front-end/HAREntry.js
+++ b/WebCore/inspector/front-end/HAREntry.js
@@ -180,7 +180,7 @@ WebInspector.HAREntry.prototype = {
         var startTime = timing[start];
         return typeof startTime !== "number" || startTime === -1 ? -1 : Math.round(timing[end] - startTime);
     }
-};
+}
 
 WebInspector.HAREntry._toMilliseconds = function(time)
 {
@@ -203,7 +203,7 @@ WebInspector.HARLog.prototype = {
                 version: webKitVersion ? webKitVersion[1] : "n/a"
             },
             pages: this._buildPages(),
-            entries: Object.keys(WebInspector.resources).map(this._convertResource)
+            entries: Object.keys(WebInspector.networkResources).map(this._convertResource)
         }
     },
 
@@ -221,17 +221,15 @@ WebInspector.HARLog.prototype = {
 
     buildMainResourceTimings: function()
     {
-        var resourcesPanel = WebInspector.panels.resources;
-        var startTime = WebInspector.mainResource.startTime;
         return {
-             onContentLoad: this._pageEventTime(resourcesPanel.mainResourceDOMContentTime),
-             onLoad: this._pageEventTime(resourcesPanel.mainResourceLoadTime),
+             onContentLoad: this._pageEventTime(WebInspector.mainResourceDOMContentTime),
+             onLoad: this._pageEventTime(WebInspector.mainResourceLoadTime),
         }
     },
 
     _convertResource: function(id)
     {
-        return (new WebInspector.HAREntry(WebInspector.resources[id])).build();
+        return (new WebInspector.HAREntry(WebInspector.networkResources[id])).build();
     },
 
     _pageEventTime: function(time)
@@ -241,4 +239,4 @@ WebInspector.HARLog.prototype = {
             return -1;
         return WebInspector.HAREntry._toMilliseconds(time - startTime);
     }
-};
+}
diff --git a/WebCore/inspector/front-end/ImageView.js b/WebCore/inspector/front-end/ImageView.js
index 06ca4a4..7cff056 100644
--- a/WebCore/inspector/front-end/ImageView.js
+++ b/WebCore/inspector/front-end/ImageView.js
@@ -49,10 +49,14 @@ WebInspector.ImageView.prototype = {
 
         this.imagePreviewElement = document.createElement("img");
         this.imagePreviewElement.addStyleClass("resource-image-view");
-        this.imagePreviewElement.setAttribute("src", this.resource.url);
-
         this._container.appendChild(this.imagePreviewElement);
 
+        function onResourceContent(element, content)
+        {
+            this.imagePreviewElement.setAttribute("src", this.resource.contentURL);
+        }
+        this.resource.getContent(onResourceContent.bind(this));
+
         this._container = document.createElement("div");
         this._container.className = "info";
         this.contentElement.appendChild(this._container);
diff --git a/WebCore/inspector/front-end/Images/frame.png b/WebCore/inspector/front-end/Images/frame.png
new file mode 100644
index 0000000..0d1953c
--- /dev/null
+++ b/WebCore/inspector/front-end/Images/frame.png
diff --git a/WebCore/inspector/front-end/Images/networkIcon.png b/WebCore/inspector/front-end/Images/networkIcon.png
index 982424d..ba10bba 100644
--- a/WebCore/inspector/front-end/Images/networkIcon.png
+++ b/WebCore/inspector/front-end/Images/networkIcon.png
diff --git a/WebCore/inspector/front-end/InjectedScript.js b/WebCore/inspector/front-end/InjectedScript.js
index 24b270b..2d60f69 100644
--- a/WebCore/inspector/front-end/InjectedScript.js
+++ b/WebCore/inspector/front-end/InjectedScript.js
@@ -268,7 +268,7 @@ InjectedScript.prototype = {
         // We don't want local variables to be shadowed by global ones when evaluating on CallFrame.
         if (!isEvalOnCallFrame)
             expression = "with (window) {\n" + expression + "\n} ";
-        expression = "with (window.console._commandLineAPI) {\n" + expression + "\n}";
+        expression = "with (window ? window.console._commandLineAPI : {}) {\n" + expression + "\n}";
         var value = evalFunction.call(object, expression);
     
         delete inspectedWindow.console._commandLineAPI;
diff --git a/WebCore/inspector/front-end/MetricsSidebarPane.js b/WebCore/inspector/front-end/MetricsSidebarPane.js
index 18bc240..3784ce8 100644
--- a/WebCore/inspector/front-end/MetricsSidebarPane.js
+++ b/WebCore/inspector/front-end/MetricsSidebarPane.js
@@ -46,24 +46,24 @@ WebInspector.MetricsSidebarPane.prototype = {
         }
 
         var self = this;
-        var callback = function(stylePayload) {
-            if (!stylePayload)
+        var callback = function(style) {
+            if (!style)
                 return;
-            var style = WebInspector.CSSStyleDeclaration.parseStyle(stylePayload);
             self._update(style);
         };
-        InspectorBackend.getComputedStyle(node.id, callback);
+        WebInspector.cssModel.getComputedStyleAsync(node.id, callback);
 
-        var inlineStyleCallback = function(stylePayload) {
-            if (!stylePayload)
+        var inlineStyleCallback = function(style) {
+            if (!style)
                 return;
-            self._inlineStyleId = stylePayload.id;
+            self.inlineStyle = style;
         };
-        InspectorBackend.getInlineStyle(node.id, inlineStyleCallback);
+        WebInspector.cssModel.getInlineStyleAsync(node.id, inlineStyleCallback);
     },
 
     _update: function(style)
     {
+        // Updating with computed style.
         var metricsElement = document.createElement("div");
         metricsElement.className = "metrics";
 
@@ -116,23 +116,23 @@ WebInspector.MetricsSidebarPane.prototype = {
         for (var i = 0; i < boxes.length; ++i) {
             var name = boxes[i];
 
-            if (name === "margin" && noMarginDisplayType[style.display])
+            if (name === "margin" && noMarginDisplayType[style.getPropertyValue("display")])
                 continue;
-            if (name === "padding" && noPaddingDisplayType[style.display])
+            if (name === "padding" && noPaddingDisplayType[style.getPropertyValue("display")])
                 continue;
-            if (name === "position" && noPositionType[style.position])
+            if (name === "position" && noPositionType[style.getPropertyValue("position")])
                 continue;
 
             var boxElement = document.createElement("div");
             boxElement.className = name;
 
             if (name === "content") {
-                var width = style.width.replace(/px$/, "");
+                var width = style.getPropertyValue("width").replace(/px$/, "");
                 var widthElement = document.createElement("span");
                 widthElement.textContent = width;
                 widthElement.addEventListener("dblclick", this.startEditing.bind(this, widthElement, "width", "width"), false);
 
-                var height = style.height.replace(/px$/, "");
+                var height = style.getPropertyValue("height").replace(/px$/, "");
                 var heightElement = document.createElement("span");
                 heightElement.textContent = height;
                 heightElement.addEventListener("dblclick", this.startEditing.bind(this, heightElement, "height", "height"), false);
@@ -185,7 +185,7 @@ WebInspector.MetricsSidebarPane.prototype = {
 
     editingCommitted: function(element, userInput, previousContent, context)
     {
-        if (!this._inlineStyleId) {
+        if (!this.inlineStyle) {
             // Element has no renderer.
             return this.editingCancelled(element, context); // nothing changed, so cancel
         }
@@ -203,14 +203,36 @@ WebInspector.MetricsSidebarPane.prototype = {
             userInput += "px";
 
         var self = this;
-        var callback = function(success) {
-            if (!success)
+        var callback = function(style) {
+            if (!style)
                 return;
+            self.inlineStyle = style;
             self.dispatchEventToListeners("metrics edited");
             self.update();
         };
 
-        InspectorBackend.setStyleProperty(this._inlineStyleId, context.styleProperty, userInput, callback);
+        function setEnabledValueCallback(context, style)
+        {
+            var property = style.getLiveProperty(context.styleProperty);
+            if (!property)
+                style.appendProperty(context.styleProperty, userInput, callback);
+             else
+                property.setValue(userInput, callback);
+        }
+
+        var allProperties = this.inlineStyle.allProperties;
+        for (var i = 0; i < allProperties.length; ++i) {
+            var property = allProperties[i];
+            if (property.name !== context.styleProperty || property.inactive)
+                continue;
+            if (property.disabled)
+                property.setDisabled(false, setEnabledValueCallback.bind(null, context));
+            else
+                property.setValue(userInput, callback);
+            return;
+        }
+
+        this.inlineStyle.appendProperty(context.styleProperty, userInput, callback);
     }
 }
 
diff --git a/WebCore/inspector/front-end/NetworkPanel.js b/WebCore/inspector/front-end/NetworkPanel.js
index 8eed425..c666e54 100644
--- a/WebCore/inspector/front-end/NetworkPanel.js
+++ b/WebCore/inspector/front-end/NetworkPanel.js
@@ -36,6 +36,8 @@ WebInspector.NetworkPanel = function()
     this.sidebarElement.className = "network-sidebar";
 
     this._resources = [];
+    this._resourcesById = {};
+    this._lastIdentifier = 0;
     this._staleResources = [];
     this._resourceGridNodes = {};
     this._mainResourceLoadTime = -1;
@@ -51,9 +53,13 @@ WebInspector.NetworkPanel = function()
     this._viewsContainerElement = document.createElement("div");
     this._viewsContainerElement.id = "network-views";
     this._viewsContainerElement.className = "hidden";
-
     this.element.appendChild(this._viewsContainerElement);
 
+    var closeButtonElement = document.createElement("button");
+    closeButtonElement.className = "network-close-button";
+    closeButtonElement.addEventListener("click", this._toggleGridMode.bind(this), false);
+    this._viewsContainerElement.appendChild(closeButtonElement);
+
     this._createSortingFunctions();
     this._createTable();
     this._createTimelineGrid();
@@ -180,7 +186,7 @@ WebInspector.NetworkPanel.prototype = {
 
         columns.type.title = WebInspector.UIString("Type");
         columns.type.sortable = true;
-        columns.type.width = "7%";
+        columns.type.width = "10%";
 
         columns.size.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Size"), WebInspector.UIString("Transfer"));
         columns.size.sortable = true;
@@ -194,7 +200,7 @@ WebInspector.NetworkPanel.prototype = {
 
         columns.timeline.title = "";
         columns.timeline.sortable = false;
-        columns.timeline.width = "40%";
+        columns.timeline.width = "37%";
         columns.timeline.sort = "ascending";
 
         this._dataGrid = new WebInspector.DataGrid(columns);
@@ -251,7 +257,7 @@ WebInspector.NetworkPanel.prototype = {
         timelineSorting.appendChild(option);
 
         var header = this._dataGrid.headerTableHeader("timeline");
-        header.firstChild.appendChild(timelineSorting);
+        header.replaceChild(timelineSorting, header.firstChild);
 
         timelineSorting.addEventListener("click", function(event) { event.stopPropagation() }, false);
         timelineSorting.addEventListener("change", this._sortByTimeline.bind(this), false);
@@ -609,15 +615,10 @@ WebInspector.NetworkPanel.prototype = {
         this._clearButton.addEventListener("click", this._reset.bind(this), false);
 
         this._largerResourcesButton = new WebInspector.StatusBarButton(WebInspector.UIString("Use small resource rows."), "network-larger-resources-status-bar-item");
-        WebInspector.applicationSettings.addEventListener("loaded", this._settingsLoaded, this);
-        this._largerResourcesButton.addEventListener("click", this._toggleLargerResources.bind(this), false);
-    },
-
-    _settingsLoaded: function()
-    {
         this._largerResourcesButton.toggled = WebInspector.applicationSettings.resourcesLargeRows;
         if (!WebInspector.applicationSettings.resourcesLargeRows)
             this._setLargerResources(WebInspector.applicationSettings.resourcesLargeRows);
+        this._largerResourcesButton.addEventListener("click", this._toggleLargerResources.bind(this), false);
     },
 
     set mainResourceLoadTime(x)
@@ -758,6 +759,7 @@ WebInspector.NetworkPanel.prototype = {
             this._calculator.reset();
 
         this._resources = [];
+        this._resourcesById = {};
         this._staleResources = [];
         this._resourceGridNodes = {};
 
@@ -773,9 +775,17 @@ WebInspector.NetworkPanel.prototype = {
         this._resetSummaryBar();
     },
 
+    get resources()
+    {
+        return this._resourcesById;
+    },
+
     addResource: function(resource)
     {
         this._resources.push(resource);
+        if (!resource.identifier)
+            resource.identifier = "network:" + this._lastIdentifier++;
+        this._resourcesById[resource.identifier] = resource;
         this.refreshResource(resource);
     },
 
@@ -787,12 +797,9 @@ WebInspector.NetworkPanel.prototype = {
         if (!resource || !resource._resourcesView)
             return;
 
-        if (this._resourceViewTypeMatchesResource(resource, resource._resourcesView))
-            return;
-
-        var newView = this._createResourceView(resource);
-        if (newView.__proto__ === resource._resourcesView.__proto__)
+        if (WebInspector.ResourceManager.resourceViewTypeMatchesResource(resource, resource._resourcesView))
             return;
+        var newView = WebInspector.ResourceManager.createResourceView(resource);
 
         var oldView = resource._resourcesView;
         var oldViewParentNode = oldView.visible ? oldView.element.parentNode : null;
@@ -831,7 +838,7 @@ WebInspector.NetworkPanel.prototype = {
         if (this.visibleResource && this.visibleResource._resourcesView)
             this.visibleResource._resourcesView.hide();
 
-        var view = this._resourceViewForResource(resource);
+        var view = WebInspector.ResourceManager.resourceViewForResource(resource);
         view.headersVisible = true;
         view.show(this._viewsContainerElement);
 
@@ -861,15 +868,6 @@ WebInspector.NetworkPanel.prototype = {
         this.updateSidebarWidth();
     },
 
-    _resourceViewForResource: function(resource)
-    {
-        if (!resource)
-            return null;
-        if (!resource._resourcesView)
-            resource._resourcesView = this._createResourceView(resource);
-        return resource._resourcesView;
-    },
-
     _toggleLargerResources: function()
     {
         WebInspector.applicationSettings.resourcesLargeRows = !WebInspector.applicationSettings.resourcesLargeRows;
@@ -883,48 +881,15 @@ WebInspector.NetworkPanel.prototype = {
             this._largerResourcesButton.title = WebInspector.UIString("Use large resource rows.");
             this._dataGrid.element.addStyleClass("small");
             this._timelineGrid.element.addStyleClass("small");
+            this._viewsContainerElement.addStyleClass("small");
         } else {
             this._largerResourcesButton.title = WebInspector.UIString("Use small resource rows.");
             this._dataGrid.element.removeStyleClass("small");
             this._timelineGrid.element.removeStyleClass("small");
+            this._viewsContainerElement.removeStyleClass("small");
         }
     },
 
-    _createResourceView: function(resource)
-    {
-        switch (resource.category) {
-            case WebInspector.resourceCategories.documents:
-            case WebInspector.resourceCategories.stylesheets:
-            case WebInspector.resourceCategories.scripts:
-            case WebInspector.resourceCategories.xhr:
-                return new WebInspector.SourceView(resource);
-            case WebInspector.resourceCategories.images:
-                return new WebInspector.ImageView(resource);
-            case WebInspector.resourceCategories.fonts:
-                return new WebInspector.FontView(resource);
-            default:
-                return new WebInspector.ResourceView(resource);
-        }
-    },
-
-    _resourceViewTypeMatchesResource: function(resource, resourceView)
-    {
-        switch (resource.category) {
-            case WebInspector.resourceCategories.documents:
-            case WebInspector.resourceCategories.stylesheets:
-            case WebInspector.resourceCategories.scripts:
-            case WebInspector.resourceCategories.xhr:
-                return resourceView instanceof WebInspector.SourceView;
-            case WebInspector.resourceCategories.images:
-                return resourceView instanceof WebInspector.ImageView;
-            case WebInspector.resourceCategories.fonts:
-                return resourceView instanceof WebInspector.FontView;
-            default:
-                return resourceView instanceof WebInspector.ResourceView;
-        }
-        return false;
-    },
-
     _getPopoverAnchor: function(element)
     {
         var anchor = element.enclosingNodeOrSelfWithClass("network-graph-bar") || element.enclosingNodeOrSelfWithClass("network-graph-label");
@@ -1060,10 +1025,10 @@ WebInspector.NetworkPanel.prototype = {
             widths.name = 20;
             widths.method = 7;
             widths.status = 8;
-            widths.type = 7;
+            widths.type = 10;
             widths.size = 10;
             widths.time = 10;
-            widths.timeline = 40;
+            widths.timeline = 37;
         }
 
         this._dataGrid.showColumn("timeline");
@@ -1496,7 +1461,15 @@ WebInspector.NetworkDataGridNode.prototype = {
         if (this._resource.category === WebInspector.resourceCategories.images) {
             var previewImage = document.createElement("img");
             previewImage.className = "image-network-icon-preview";
-            previewImage.src = this._resource.url;
+
+            function onResourceContent()
+            {
+                previewImage.src = this._resource.contentURL;
+            }
+            if (Preferences.useDataURLForResourceImageIcons)
+                this._resource.getContent(onResourceContent.bind(this));
+            else
+                previewImage.src = this._resource.url;
 
             var iconElement = document.createElement("div");
             iconElement.className = "icon";
diff --git a/WebCore/inspector/front-end/Panel.js b/WebCore/inspector/front-end/Panel.js
index 2a4104f..ec9250c 100644
--- a/WebCore/inspector/front-end/Panel.js
+++ b/WebCore/inspector/front-end/Panel.js
@@ -34,7 +34,7 @@ WebInspector.Panel = function(name)
     this.element.addStyleClass(name);
     this._panelName = name;
 
-    WebInspector.applicationSettings.installSetting(this._sidebarWidthSettingName(), this._panelName + "-sidebar-width", undefined);
+    WebInspector.applicationSettings.installApplicationSetting(this._sidebarWidthSettingName(), undefined);
 }
 
 // Should by in sync with style declarations.
diff --git a/WebCore/inspector/front-end/Resource.js b/WebCore/inspector/front-end/Resource.js
index fe2f7d2..1a2ce96 100644
--- a/WebCore/inspector/front-end/Resource.js
+++ b/WebCore/inspector/front-end/Resource.js
@@ -34,6 +34,7 @@ WebInspector.Resource = function(identifier, url)
     this._endTime = -1;
     this._requestMethod = "";
     this._category = WebInspector.resourceCategories.other;
+    this._pendingContentCallbacks = [];
 }
 
 // Keep these in sync with WebCore::InspectorResource::Type
@@ -74,11 +75,11 @@ WebInspector.Resource.Type = {
             case this.Script:
                 return "script";
             case this.XHR:
-                return "XHR";
+                return "xhr";
             case this.Media:
                 return "media";
             case this.WebSocket:
-                return "WebSocket";
+                return "websocket";
             case this.Other:
             default:
                 return "other";
@@ -105,9 +106,16 @@ WebInspector.Resource.prototype = {
         this.path = parsedURL ? parsedURL.path : "";
         this.lastPathComponent = "";
         if (parsedURL && parsedURL.path) {
-            var lastSlashIndex = parsedURL.path.lastIndexOf("/");
+            // First cut the query params.
+            var path = parsedURL.path;
+            var indexOfQuery = path.indexOf("?");
+            if (indexOfQuery !== -1)
+                path = path.substring(0, indexOfQuery);
+
+            // Then take last path component.
+            var lastSlashIndex = path.lastIndexOf("/");
             if (lastSlashIndex !== -1)
-                this.lastPathComponent = parsedURL.path.substring(lastSlashIndex + 1);
+                this.lastPathComponent = path.substring(lastSlashIndex + 1);
         }
         this.lastPathComponentLowerCase = this.lastPathComponent.toLowerCase();
     },
@@ -247,6 +255,8 @@ WebInspector.Resource.prototype = {
         if (x) {
             this._checkWarnings();
             this.dispatchEventToListeners("finished");
+            if (this._pendingContentCallbacks.length)
+                this._requestContent();
         }
     },
 
@@ -267,17 +277,7 @@ WebInspector.Resource.prototype = {
 
     set category(x)
     {
-        if (this._category === x)
-            return;
-
-        var oldCategory = this._category;
-        if (oldCategory)
-            oldCategory.removeResource(this);
-
         this._category = x;
-
-        if (this._category)
-            this._category.addResource(this);
     },
 
     get cached()
@@ -530,6 +530,7 @@ WebInspector.Resource.prototype = {
     set errors(x)
     {
         this._errors = x;
+        this.dispatchEventToListeners("errors-warnings-updated");
     },
 
     get warnings()
@@ -540,6 +541,14 @@ WebInspector.Resource.prototype = {
     set warnings(x)
     {
         this._warnings = x;
+        this.dispatchEventToListeners("errors-warnings-updated");
+    },
+
+    clearErrorsAndWarnings: function()
+    {
+        this._warnings = 0;
+        this._errors = 0;
+        this.dispatchEventToListeners("errors-warnings-updated");
     },
 
     _mimeTypeIsConsistentWithType: function()
@@ -556,6 +565,9 @@ WebInspector.Resource.prototype = {
          || this.type === WebInspector.Resource.Type.WebSocket)
             return true;
 
+        if (!this.mimeType)
+            return true; // Might be not known for cached resources with null responses.
+
         if (this.mimeType in WebInspector.MIMETypes)
             return this.type in WebInspector.MIMETypes[this.mimeType];
 
@@ -575,7 +587,7 @@ WebInspector.Resource.prototype = {
             case WebInspector.Warnings.IncorrectMIMEType.id:
                 if (!this._mimeTypeIsConsistentWithType())
                     msg = new WebInspector.ConsoleMessage(WebInspector.ConsoleMessage.MessageSource.Other,
-                        WebInspector.ConsoleMessage.MessageType.Log, 
+                        WebInspector.ConsoleMessage.MessageType.Log,
                         WebInspector.ConsoleMessage.MessageLevel.Warning,
                         -1,
                         this.url,
@@ -591,13 +603,48 @@ WebInspector.Resource.prototype = {
             WebInspector.console.addMessage(msg);
     },
 
-    getContents: function(callback)
+    set content(content)
+    {
+        this._content = content;
+    },
+
+    getContent: function(callback)
+    {
+        if (this._content) {
+            callback(this._content, this._contentEncoded);
+            return;
+        }
+        this._pendingContentCallbacks.push(callback);
+        if (this.finished)
+            this._requestContent();
+    },
+
+    get contentURL()
+    {
+        const maxDataUrlSize = 1024 * 1024;
+        // If resource content is not available or won't fit a data URL, fall back to using original URL.
+        if (!this._content || this._content.length > maxDataUrlSize)
+            return this.url;
+
+        return "data:" + this.mimeType + (this._contentEncoded ? ";base64," : ",") + this._content;
+    },
+
+    _requestContent: function()
     {
-        // FIXME: eventually, cached resources will have no identifiers.
-        if (this.frameID)
-            InspectorBackend.resourceContent(this.frameID, this.url, callback);
-        else
-            InspectorBackend.getResourceContent(this.identifier, false, callback);
+        if (this._contentRequested)
+            return;
+        this._contentRequested = true;
+        this._contentEncoded = !WebInspector.Resource.Type.isTextType(this.type);
+
+        function onResourceContent(data)
+        {
+            this._content = data;
+            var callbacks = this._pendingContentCallbacks.slice();
+            for (var i = 0; i < callbacks.length; ++i)
+                callbacks[i](this._content, this._contentEncoded);
+            this._pendingContentCallbacks.length = 0;
+        }
+        WebInspector.ResourceManager.getContent(this, this._contentEncoded, onResourceContent.bind(this));
     }
 }
 
diff --git a/WebCore/inspector/front-end/ResourceCategory.js b/WebCore/inspector/front-end/ResourceCategory.js
index 7d95a1f..43c7c2b 100644
--- a/WebCore/inspector/front-end/ResourceCategory.js
+++ b/WebCore/inspector/front-end/ResourceCategory.js
@@ -31,40 +31,11 @@ WebInspector.ResourceCategory = function(name, title, color)
     this.name = name;
     this.title = title;
     this.color = color;
-    this.resources = [];
 }
 
 WebInspector.ResourceCategory.prototype = {
-
     toString: function()
     {
         return this.title;
-    },
-
-    addResource: function(resource)
-    {
-        var a = resource;
-        var resourcesLength = this.resources.length;
-        for (var i = 0; i < resourcesLength; ++i) {
-            var b = this.resources[i];
-            if (a.lastPathComponentLowerCase && b.lastPathComponentLowerCase)
-                if (a.lastPathComponentLowerCase < b.lastPathComponentLowerCase)
-                    break;
-            else if (a.name && b.name)
-                if (a.name < b.name)
-                    break;
-        }
-
-        this.resources.splice(i, 0, resource);
-    },
-
-    removeResource: function(resource)
-    {
-        this.resources.remove(resource, true);
-    },
-
-    removeAllResources: function(resource)
-    {
-        this.resources = [];
     }
 }
diff --git a/WebCore/inspector/front-end/ResourceManager.js b/WebCore/inspector/front-end/ResourceManager.js
index 7244cea..62273ee 100644
--- a/WebCore/inspector/front-end/ResourceManager.js
+++ b/WebCore/inspector/front-end/ResourceManager.js
@@ -40,16 +40,17 @@ WebInspector.ResourceManager = function()
         "didFailLoading",
         "didLoadResourceFromMemoryCache",
         "setOverrideContent",
-        "didCommitLoad",
+        "didCommitLoadForFrame",
         "frameDetachedFromParent",
         "didCreateWebSocket",
         "willSendWebSocketHandshakeRequest",
         "didReceiveWebSocketHandshakeResponse",
         "didCloseWebSocket");
 
-    this._resources = {};
-    this._resourcesByFrame = {};
-    this._lastCachedId = 0;
+    this._resourcesById = {};
+    this._resourcesByURL = {};
+    this._resourceTreeModel = new WebInspector.ResourceTreeModel();
+    InspectorBackend.cachedResources(this._processCachedResources.bind(this));
 }
 
 WebInspector.ResourceManager.prototype = {
@@ -59,62 +60,69 @@ WebInspector.ResourceManager.prototype = {
             WebInspector[arguments[i]] = this[arguments[i]].bind(this);
     },
 
-    identifierForInitialRequest: function(identifier, url, frameID, isMainResource)
+    identifierForInitialRequest: function(identifier, url, loader)
     {
-        var resource = new WebInspector.Resource(identifier, url);
-        if (isMainResource)
+        var resource = this._createResource(identifier, url, loader);
+        if (loader.url === url) {
             resource.isMainResource = true;
-        this._resources[identifier] = resource;
-
-        if (frameID) {
-            resource.frameID = frameID;
-            var resourcesForFrame = this._resourcesByFrame[frameID];
-            if (!resourcesForFrame) {
-                resourcesForFrame = [];
-                this._resourcesByFrame[frameID] = resourcesForFrame;
-            }
-            resourcesForFrame.push(resource);
+            WebInspector.mainResource = resource;
         }
 
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.addResource(resource);
+        // It is important to bind resource url early (before scripts compile).
+        this._bindResourceURL(resource);
+
+        WebInspector.panels.network.addResource(resource);
+        WebInspector.panels.audits.resourceStarted(resource);
+    },
+
+    _createResource: function(identifier, url, loader)
+    {
+        var resource = new WebInspector.Resource(identifier, url);
+        resource.loader = loader;
+        resource.documentURL = loader.url;
+
+        this._resourcesById[identifier] = resource;
+        return resource;
     },
 
     willSendRequest: function(identifier, time, request, redirectResponse)
     {
-        var resource = this._resources[identifier];
+        var resource = this._resourcesById[identifier];
         if (!resource)
             return;
 
         // Redirect may have empty URL and we'd like to not crash with invalid HashMap entry.
         // See http/tests/misc/will-send-request-returns-null-on-redirect.html
-        if (!redirectResponse.isNull && request.url.length) {
+        var isRedirect = !redirectResponse.isNull && request.url.length;
+        if (isRedirect) {
             resource.endTime = time;
             this.didReceiveResponse(identifier, time, "Other", redirectResponse);
             resource = this._appendRedirect(resource.identifier, request.url);
         }
 
-        resource.requestMethod = request.httpMethod;
-        resource.requestHeaders = request.httpHeaderFields;
-        resource.requestFormData = request.requestFormData;
+        this._updateResourceWithRequest(resource, request);
         resource.startTime = time;
 
-        if (WebInspector.panels.network)
+        if (isRedirect) {
+            WebInspector.panels.network.addResource(resource);
+            WebInspector.panels.audits.resourceStarted(resource);
+        } else 
             WebInspector.panels.network.refreshResource(resource);
     },
 
-    _appendRedirect: function(identifier, redirectURL)
+    _updateResourceWithRequest: function(resource, request)
     {
-        // We always store last redirect by the original id key. Rest of the redirects are referenced from within the last one.
-
-        var originalResource = this._resources[identifier];
-        var redirectIdentifier = originalResource.identifier + ":" + (originalResource.redirects ? originalResource.redirects.length : 0);
-        originalResource.identifier = redirectIdentifier;
-        this._resources[redirectIdentifier] = originalResource;
+        resource.requestMethod = request.httpMethod;
+        resource.requestHeaders = request.httpHeaderFields;
+        resource.requestFormData = request.requestFormData;
+    },
 
-        this.identifierForInitialRequest(identifier, redirectURL, originalResource.frameID);
+    _appendRedirect: function(identifier, redirectURL)
+    {
+        var originalResource = this._resourcesById[identifier];
+        originalResource.identifier = null;
 
-        var newResource = this._resources[identifier];
+        var newResource = this._createResource(identifier, redirectURL, originalResource.loader);
         newResource.redirects = originalResource.redirects || [];
         delete originalResource.redirects;
         newResource.redirects.push(originalResource);
@@ -123,23 +131,32 @@ WebInspector.ResourceManager.prototype = {
 
     markResourceAsCached: function(identifier)
     {
-        var resource = this._resources[identifier];
+        var resource = this._resourcesById[identifier];
         if (!resource)
             return;
 
         resource.cached = true;
-
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.network.refreshResource(resource);
     },
 
     didReceiveResponse: function(identifier, time, resourceType, response)
     {
-        var resource = this._resources[identifier];
+        var resource = this._resourcesById[identifier];
         if (!resource)
             return;
-
+        this._updateResourceWithResponse(resource, response);
         resource.type = WebInspector.Resource.Type[resourceType];
+        resource.responseReceivedTime = time;
+
+        WebInspector.panels.network.refreshResource(resource);
+        this._resourceTreeModel.addResourceToFrame(resource.loader.frameId, resource);
+    },
+
+    _updateResourceWithResponse: function(resource, response)
+    {
+        if (resource.isNull)
+            return;
+
         resource.mimeType = response.mimeType;
         resource.expectedContentLength = response.expectedContentLength;
         resource.textEncodingName = response.textEncodingName;
@@ -150,7 +167,6 @@ WebInspector.ResourceManager.prototype = {
         resource.responseHeaders = response.httpHeaderFields;
         resource.connectionReused = response.connectionReused;
         resource.connectionID = response.connectionID;
-        resource.responseReceivedTime = time;
 
         if (response.wasCached)
             resource.cached = true;
@@ -161,101 +177,105 @@ WebInspector.ResourceManager.prototype = {
             resource.requestHeaders = response.rawHeaders.requestHeaders;
             resource.responseHeaders = response.rawHeaders.responseHeaders;
         }
-
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.refreshResource(resource);
     },
 
     didReceiveContentLength: function(identifier, time, lengthReceived)
     {
-        var resource = this._resources[identifier];
+        var resource = this._resourcesById[identifier];
         if (!resource)
             return;
 
         resource.resourceSize += lengthReceived;
         resource.endTime = time;
 
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.network.refreshResource(resource);
     },
 
     didFinishLoading: function(identifier, finishTime)
     {
-        var resource = this._resources[identifier];
+        var resource = this._resourcesById[identifier];
         if (!resource)
             return;
 
         resource.finished = true;
         resource.endTime = finishTime;
 
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.audits.resourceFinished(resource);
+        WebInspector.extensionServer.notifyResourceFinished(resource);
+        delete this._resourcesById[identifier];
     },
 
     didFailLoading: function(identifier, time, localizedDescription)
     {
-        var resource = this._resources[identifier];
+        var resource = this._resourcesById[identifier];
         if (!resource)
             return;
 
         resource.failed = true;
+        resource.localizedFailDescription = localizedDescription;
+        resource.finished = true;
         resource.endTime = time;
 
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.audits.resourceFinished(resource);
+        WebInspector.extensionServer.notifyResourceFinished(resource);
+        delete this._resourcesById[identifier];
     },
 
-    didLoadResourceFromMemoryCache: function(time, frameID, cachedResource)
+    didLoadResourceFromMemoryCache: function(time, cachedResource)
     {
-        var identifier = "cached:" + this._lastCachedId++;
-        this.identifierForInitialRequest(identifier, cachedResource.url, frameID);
-
-        var resource = this._resources[identifier];
+        var resource = this._createResource(null, cachedResource.url, cachedResource.loader);
+        this._updateResourceWithCachedResource(resource, cachedResource);
         resource.cached = true;
-        resource.startTime = resource.responseReceivedTime = time;
-        resource.resourceSize = cachedResource.encodedSize();
+        resource.startTime = resource.responseReceivedTime = resource.endTime = time;
 
-        this.didReceiveResponse(identifier, time, cachedResource.response);
+        WebInspector.panels.network.addResource(resource);
+        WebInspector.panels.audits.resourceStarted(resource);
+        WebInspector.panels.audits.resourceFinished(resource);
+        this._resourceTreeModel.addResourceToFrame(resource.loader.frameId, resource);
+    },
+
+    _updateResourceWithCachedResource: function(resource, cachedResource)
+    {
+        resource.type = WebInspector.Resource.Type[cachedResource.type];
+        resource.resourceSize = cachedResource.encodedSize;
+        this._updateResourceWithResponse(resource, cachedResource.response);
     },
 
     setOverrideContent: function(identifier, sourceString, type)
     {
-        var resource = this._resources[identifier];
+        var resource = WebInspector.panels.network.resources[identifier];
         if (!resource)
             return;
 
         resource.type = WebInspector.Resource.Type[type];
-        resource.overridenContent = sourceString;
-
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.addResource(resource);
+        resource.content = sourceString;
+        WebInspector.panels.network.refreshResource(resource);
     },
 
-    didCommitLoad: function(frameID)
+    didCommitLoadForFrame: function(parentFrameId, loader)
     {
+        this._resourceTreeModel.didCommitLoadForFrame(parentFrameId, loader);
     },
 
-    frameDetachedFromParent: function(frameID)
+    frameDetachedFromParent: function(frameId)
     {
-        var resourcesForFrame = this._resourcesByFrame[frameID];
-        for (var i = 0; resourcesForFrame && i < resourcesForFrame.length; ++i)
-            delete this._resources[resourcesForFrame[i].identifier];
-        delete this._resourcesByFrame[frameID];
+        this._resourceTreeModel.frameDetachedFromParent(frameId);
     },
 
     didCreateWebSocket: function(identifier, requestURL)
     {
         this.identifierForInitialRequest(identifier, requestURL);
-        var resource = this._resources[identifier];
+        var resource = this._resourcesById[identifier];
         resource.type = WebInspector.Resource.Type.WebSocket;
 
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.addResource(resource);
+        WebInspector.panels.network.addResource(resource);
     },
 
     willSendWebSocketHandshakeRequest: function(identifier, time, request)
     {
-        var resource = this._resources[identifier];
+        var resource = this._resourcesById[identifier];
         if (!resource)
             return;
 
@@ -264,13 +284,12 @@ WebInspector.ResourceManager.prototype = {
         resource.webSocketRequestKey3 = request.webSocketRequestKey3;
         resource.startTime = time;
 
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.network.refreshResource(resource);
     },
 
     didReceiveWebSocketHandshakeResponse: function(identifier, time, response)
     {
-        var resource = this._resources[identifier];
+        var resource = this._resourcesById[identifier];
         if (!resource)
             return;
 
@@ -280,18 +299,293 @@ WebInspector.ResourceManager.prototype = {
         resource.webSocketChallengeResponse = response.webSocketChallengeResponse;
         resource.responseReceivedTime = time;
 
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.network.refreshResource(resource);
     },
 
     didCloseWebSocket: function(identifier, time)
     {
-        var resource = this._resources[identifier];
+        var resource = this._resourcesById[identifier];
         if (!resource)
             return;
         resource.endTime = time;
 
-        if (WebInspector.panels.network)
-            WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.network.refreshResource(resource);
+    },
+
+    _processCachedResources: function(mainFramePayload)
+    {
+        var mainResource = this._addFramesRecursively(null, mainFramePayload);
+        WebInspector.mainResource = mainResource;
+        mainResource.isMainResource = true;
+    },
+
+    _addFramesRecursively: function(parentFrameId, framePayload)
+    {
+        var frameResource = this._createResource(null, framePayload.resource.url, framePayload.resource.loader);
+        this._updateResourceWithRequest(frameResource, framePayload.resource.request);
+        this._updateResourceWithResponse(frameResource, framePayload.resource.response);
+        frameResource.type = WebInspector.Resource.Type["Document"];
+        frameResource.finished = true;
+        this._bindResourceURL(frameResource);
+
+        this._resourceTreeModel.addOrUpdateFrame(parentFrameId, framePayload.id, frameResource.displayName);
+        this._resourceTreeModel.addResourceToFrame(framePayload.id, frameResource);
+
+        for (var i = 0; framePayload.children && i < framePayload.children.length; ++i)
+            this._addFramesRecursively(framePayload.id, framePayload.children[i]);
+
+        if (!framePayload.subresources)
+            return;
+
+        for (var i = 0; i < framePayload.subresources.length; ++i) {
+            var cachedResource = framePayload.subresources[i];
+            var resource = this._createResource(null, cachedResource.url, cachedResource.loader);
+            this._updateResourceWithCachedResource(resource, cachedResource);
+            resource.finished = true;
+            this._bindResourceURL(resource);
+            this._resourceTreeModel.addResourceToFrame(framePayload.id, resource);
+        }
+        return frameResource;
+    },
+
+    resourceForURL: function(url)
+    {
+        // FIXME: receive frameId here.
+        var entry = this._resourcesByURL[url];
+        if (entry instanceof Array)
+            return entry[0];
+        return entry;
+    },
+
+    addConsoleMessage: function(msg)
+    {
+        var resource = this.resourceForURL(msg.url);
+        if (!resource)
+            return;
+
+        switch (msg.level) {
+        case WebInspector.ConsoleMessage.MessageLevel.Warning:
+            resource.warnings += msg.repeatDelta;
+            break;
+        case WebInspector.ConsoleMessage.MessageLevel.Error:
+            resource.errors += msg.repeatDelta;
+            break;
+        }
+
+        var view = WebInspector.ResourceManager.resourceViewForResource(resource);
+        if (view.addMessage)
+            view.addMessage(msg);
+    },
+
+    clearConsoleMessages: function()
+    {
+        function callback(resource)
+        {
+            resource.clearErrorsAndWarnings();
+        }
+        this._resourceTreeModel.forAllResources(callback);
+    },
+
+    forAllResources: function(callback)
+    {
+        this._resourceTreeModel.forAllResources(callback);
+    },
+
+    _bindResourceURL: function(resource)
+    {
+        var resourceForURL = this._resourcesByURL[resource.url];
+        if (!resourceForURL)
+            this._resourcesByURL[resource.url] = resource;
+        else if (resourceForURL instanceof Array)
+            resourceForURL.push(resource);
+        else
+            this._resourcesByURL[resource.url] = [resourceForURL];
+    },
+
+    _unbindResourceURL: function(resource)
+    {
+        var resourceForURL = this._resourcesByURL[resource.url];
+        if (!resourceForURL)
+            return;
+
+        if (resourceForURL instanceof Array) {
+            resourceForURL.remove(resource, true);
+            if (resourceForURL.length === 1)
+                this._resourcesByURL[resource.url] = resourceForURL[0];
+            return;
+        }
+
+        delete this._resourcesByURL[resource.url];
+    }
+}
+
+WebInspector.ResourceManager.createResourceView = function(resource)
+{
+    switch (resource.category) {
+    case WebInspector.resourceCategories.documents:
+    case WebInspector.resourceCategories.stylesheets:
+    case WebInspector.resourceCategories.scripts:
+    case WebInspector.resourceCategories.xhr:
+        return new WebInspector.SourceView(resource);
+    case WebInspector.resourceCategories.images:
+        return new WebInspector.ImageView(resource);
+    case WebInspector.resourceCategories.fonts:
+        return new WebInspector.FontView(resource);
+    default:
+        return new WebInspector.ResourceView(resource);
+    }
+}
+
+WebInspector.ResourceManager.resourceViewTypeMatchesResource = function(resource, resourceView)
+{
+    switch (resource.category) {
+    case WebInspector.resourceCategories.documents:
+    case WebInspector.resourceCategories.stylesheets:
+    case WebInspector.resourceCategories.scripts:
+    case WebInspector.resourceCategories.xhr:
+        return resourceView.__proto__ === WebInspector.SourceView.prototype;
+    case WebInspector.resourceCategories.images:
+        return resourceView.__proto__ === WebInspector.ImageView.prototype;
+    case WebInspector.resourceCategories.fonts:
+        return resourceView.__proto__ === WebInspector.FontView.prototype;
+    default:
+        return resourceView.__proto__ === WebInspector.ResourceView.prototype;
+    }
+}
+
+WebInspector.ResourceManager.resourceViewForResource = function(resource)
+{
+    if (!resource)
+        return null;
+    if (!resource._resourcesView)
+        resource._resourcesView = WebInspector.ResourceManager.createResourceView(resource);
+    return resource._resourcesView;
+}
+
+WebInspector.ResourceManager.existingResourceViewForResource = function(resource)
+{
+    if (!resource)
+        return null;
+    return resource._resourcesView;
+}
+
+WebInspector.ResourceManager.getContent = function(resource, base64Encode, callback)
+{
+    // FIXME: eventually, cached resources will have no identifiers.
+    if (resource.loader)
+        InspectorBackend.resourceContent(resource.loader.frameId, resource.url, base64Encode, callback);
+    else
+        InspectorBackend.getResourceContent(resource.identifier, base64Encode, callback);
+}
+
+WebInspector.ResourceTreeModel = function()
+{
+    this._resourcesByFrameId = {};
+    this._subframes = {};
+}
+
+WebInspector.ResourceTreeModel.prototype = {
+    addOrUpdateFrame: function(parentFrameId, frameId, displayName)
+    {
+        WebInspector.panels.storage.addOrUpdateFrame(parentFrameId, frameId, displayName);
+        var subframes = this._subframes[parentFrameId];
+        if (!subframes) {
+            subframes = {};
+            this._subframes[parentFrameId || 0] = subframes;
+        }
+        subframes[frameId] = true;
+    },
+
+    didCommitLoadForFrame: function(parentFrameId, loader)
+    {
+        // parentFrameId === 0 is when main frame navigation happens.
+        this._clearChildFramesAndResources(parentFrameId ? loader.frameId : 0, loader.loaderId);
+
+        var tmpResource = new WebInspector.Resource(null, loader.url);
+        this.addOrUpdateFrame(parentFrameId, loader.frameId, tmpResource.displayName);
+
+        var resourcesForFrame = this._resourcesByFrameId[loader.frameId];
+        for (var i = 0; resourcesForFrame && i < resourcesForFrame.length; ++i) {
+            WebInspector.resourceManager._bindResourceURL(resourcesForFrame[i]);
+            WebInspector.panels.storage.addResourceToFrame(loader.frameId, resourcesForFrame[i]);
+        }
+    },
+
+    frameDetachedFromParent: function(frameId)
+    {
+        this._clearChildFramesAndResources(frameId, 0);
+        WebInspector.panels.storage.removeFrame(frameId);
+    },
+
+    _clearChildFramesAndResources: function(frameId, loaderId)
+    {
+        WebInspector.panels.storage.removeResourcesFromFrame(frameId);
+
+        this._clearResources(frameId, loaderId);
+        var subframes = this._subframes[frameId];
+        if (!subframes)
+            return;
+
+        for (var childFrameId in subframes) {
+            WebInspector.panels.storage.removeFrame(childFrameId);
+            this._clearChildFramesAndResources(childFrameId, loaderId);
+        }
+        delete this._subframes[frameId];
+    },
+
+    addResourceToFrame: function(frameId, resource)
+    {
+        var resourcesForFrame = this._resourcesByFrameId[frameId];
+        if (!resourcesForFrame) {
+            resourcesForFrame = [];
+            this._resourcesByFrameId[frameId] = resourcesForFrame;
+        }
+        resourcesForFrame.push(resource);
+
+        WebInspector.panels.storage.addResourceToFrame(frameId, resource);
+    },
+
+    _clearResources: function(frameId, loaderToPreserveId)
+    {
+        var resourcesForFrame = this._resourcesByFrameId[frameId];
+        if (!resourcesForFrame)
+            return;
+
+        var preservedResourcesForFrame = [];
+        for (var i = 0; i < resourcesForFrame.length; ++i) {
+            var resource = resourcesForFrame[i];
+            if (resource.loader.loaderId === loaderToPreserveId) {
+                preservedResourcesForFrame.push(resource);
+                continue;
+            }
+            WebInspector.resourceManager._unbindResourceURL(resource);
+        }
+
+        delete this._resourcesByFrameId[frameId];
+        if (preservedResourcesForFrame.length)
+            this._resourcesByFrameId[frameId] = preservedResourcesForFrame;
+    },
+
+    forAllResources: function(callback)
+    {
+        this._callForFrameResources(0, callback);
+    },
+
+    _callForFrameResources: function(frameId, callback)
+    {
+        var resources = this._resourcesByFrameId[frameId];
+        for (var i = 0; resources && i < resources.length; ++i) {
+            if (callback(resources[i]))
+                return true;
+        }
+        
+        var frames = this._subframes[frameId];
+        if (frames) {
+            for (var id in frames) {
+                if (this._callForFrameResources(id, callback))
+                    return true;
+            }
+        }
+        return false;
     }
 }
diff --git a/WebCore/inspector/front-end/ResourceView.js b/WebCore/inspector/front-end/ResourceView.js
index 862569f..ffb229d 100644
--- a/WebCore/inspector/front-end/ResourceView.js
+++ b/WebCore/inspector/front-end/ResourceView.js
@@ -139,14 +139,20 @@ WebInspector.ResourceView.prototype = {
         this._selectTab();
     },
 
+    resize: function()
+    {
+        if (this._cookiesView && !this._cookiesView.element.hasStyleClass("hidden"))
+            this._cookiesView.resize();
+    },
+
     _selectTab: function()
     {
-        if (this._headersVisible) {
-            if (!this.hasContentTab() || WebInspector.applicationSettings.resourceViewTab === "headers")
-                this._selectHeadersTab();
-            else
-                this.selectContentTab();
-        } else
+        var preferredTab = WebInspector.applicationSettings.resourceViewTab;
+        if (this._headersVisible && this._cookiesView && preferredTab === "cookies")
+            this._selectCookiesTab();
+        else if (this._headersVisible && (!this.hasContentTab() || preferredTab === "headers"))
+            this._selectHeadersTab();
+        else
             this._innerSelectContentTab();
     },
 
@@ -170,11 +176,18 @@ WebInspector.ResourceView.prototype = {
         return false;
     },
 
+    _selectCookiesTab: function(updatePrefs)
+    {
+        if (updatePrefs)
+            WebInspector.applicationSettings.resourceViewTab = "cookies";
+        this.tabbedPane.selectTabById("cookies");
+        this._cookiesView.resize();
+    },
+
     _innerSelectContentTab: function()
     {
         this.tabbedPane.selectTabById("content");
-        if ("resize" in this)
-            this.resize();
+        this.resize();
         if (this.hasContentTab())
             this.contentTabSelected();
     },
@@ -283,6 +296,7 @@ WebInspector.ResourceView.prototype = {
             additionalRow = {header: "(Key3)", value: this.resource.webSocketRequestKey3};
         this._refreshHeaders(WebInspector.UIString("Request Headers"), this.resource.sortedRequestHeaders, additionalRow, this.requestHeadersTreeElement);
         this._refreshFormData();
+        this._refreshCookies();
     },
 
     _refreshResponseHeaders: function()
@@ -291,6 +305,7 @@ WebInspector.ResourceView.prototype = {
         if (typeof this.resource.webSocketChallengeResponse !== "undefined")
             additionalRow = {header: "(Challenge Response)", value: this.resource.webSocketChallengeResponse};
         this._refreshHeaders(WebInspector.UIString("Response Headers"), this.resource.sortedResponseHeaders, additionalRow, this.responseHeadersTreeElement);
+        this._refreshCookies();
     },
 
     _refreshHTTPInformation: function()
@@ -347,7 +362,80 @@ WebInspector.ResourceView.prototype = {
             headerTreeElement.selectable = false;
             headersTreeElement.appendChild(headerTreeElement);
         }
+    },
+
+    _refreshCookies: function()
+    {
+        if (!this._cookiesView) {
+            if (!this.resource.requestCookies && !this.resource.responseCookies)
+                return;
+            this._cookiesView = new WebInspector.ResourceCookiesTab();
+            this.tabbedPane.appendTab("cookies", WebInspector.UIString("Cookies"), this._cookiesView.element, this._selectCookiesTab.bind(this, true));
+        }
+        this._cookiesView.requestCookies = this.resource.requestCookies;
+        this._cookiesView.responseCookies = this.resource.responseCookies;
     }
 }
 
 WebInspector.ResourceView.prototype.__proto__ = WebInspector.View.prototype;
+
+WebInspector.ResourceCookiesTab = function()
+{
+    WebInspector.CookiesTable.call(this);
+    this.element.addStyleClass("resource-view-cookies");
+    this._requestCookies = [];
+    this._responseCookies = [];
+    this._createDataGrid(true);
+    this._requestCookiesNode = this._createFolder(WebInspector.UIString("Request Cookies"));
+    this._responseCookiesNode = this._createFolder(WebInspector.UIString("Response Cookies"));
+}
+
+WebInspector.ResourceCookiesTab.prototype = {
+    set requestCookies(cookies)
+    {
+        if (this._requestCookies === cookies)
+            return;
+        this._requestCookies = cookies;
+        this._populateCookies(this._requestCookiesNode, this._requestCookies);
+    },
+
+    set responseCookies(cookies)
+    {
+        if (this._responseCookies === cookies)
+            return;
+        this._responseCookies = cookies;
+        this._populateCookies(this._responseCookiesNode, this._responseCookies);
+    },
+
+    _populateDataGrid: function()
+    {
+        this._populateCookies(this._requestCookiesNode, this._requestCookies);
+        this._populateCookies(this._responseCookiesNode, this._responseCookies);
+    },
+
+    _populateCookies: function(parentNode, cookies)
+    {
+        WebInspector.CookiesTable.prototype._populateCookies.call(this, parentNode, cookies);
+        var totalSize = 0;
+        if (cookies) {
+            for (var i = 0; i < cookies.length; ++i)
+                totalSize += cookies[i].size;
+        }
+        parentNode.expanded = true;
+        parentNode.data[5] = totalSize;
+        parentNode.refresh();
+    },
+
+    _createFolder: function(name)
+    {
+        var data = [ name, "", "", "", "", 0, "", "" ];
+        var node = new WebInspector.DataGridNode(data);
+        node.selectable = true;
+        node.expanded = true;
+        this._dataGrid.appendChild(node);
+        node.element.addStyleClass("row-group");
+        return node;
+    }
+};
+
+WebInspector.ResourceCookiesTab.prototype.__proto__ = WebInspector.CookiesTable.prototype;
diff --git a/WebCore/inspector/front-end/ResourcesPanel.js b/WebCore/inspector/front-end/ResourcesPanel.js
index ae67bef..b35fc4b 100644
--- a/WebCore/inspector/front-end/ResourcesPanel.js
+++ b/WebCore/inspector/front-end/ResourcesPanel.js
@@ -30,7 +30,7 @@
 WebInspector.ResourcesPanel = function()
 {
     WebInspector.Panel.call(this, "resources");
-
+    this.resourceURLMap = {};
     this._items = [];
     this._staleItems = [];
 
@@ -439,26 +439,22 @@ WebInspector.ResourcesPanel.prototype = {
         this.element.appendChild(this.panelEnablerView.element);
 
         this.enableToggleButton = new WebInspector.StatusBarButton("", "enable-toggle-status-bar-item");
-        this.enableToggleButton.addEventListener("click", this._toggleResourceTracking.bind(this), false);
+        this.enableToggleButton.addEventListener("click", this.toggleResourceTracking.bind(this), false);
     },
 
     _createStatusbarButtons: function()
     {
         this.largerResourcesButton = new WebInspector.StatusBarButton(WebInspector.UIString("Use small resource rows."), "resources-larger-resources-status-bar-item");
 
-        WebInspector.applicationSettings.addEventListener("loaded", this._settingsLoaded, this);
-        this.largerResourcesButton.addEventListener("click", this._toggleLargerResources.bind(this), false);
-        this.sortingSelectElement = document.createElement("select");
-        this.sortingSelectElement.className = "status-bar-item";
-        this.sortingSelectElement.addEventListener("change", this._changeSortingFunction.bind(this), false);
-    },
-
-    _settingsLoaded: function()
-    {
         this.largerResourcesButton.toggled = WebInspector.applicationSettings.resourcesLargeRows;
         if (!WebInspector.applicationSettings.resourcesLargeRows)
             this._setLargerResources(WebInspector.applicationSettings.resourcesLargeRows);
         this._loadSortOptions();
+
+        this.largerResourcesButton.addEventListener("click", this._toggleLargerResources.bind(this), false);
+        this.sortingSelectElement = document.createElement("select");
+        this.sortingSelectElement.className = "status-bar-item";
+        this.sortingSelectElement.addEventListener("change", this._changeSortingFunction.bind(this), false);
     },
 
     _loadSortOptions: function()
@@ -557,7 +553,7 @@ WebInspector.ResourcesPanel.prototype = {
             var resource = this._resources[i];
             if (!resource._itemsTreeElement || !resource._itemsTreeElement.selectable)
                 continue;
-            var resourceView = this.resourceViewForResource(resource);
+            var resourceView = WebInspector.ResourceManager.resourceViewForResource(resource);
             if (!resourceView.performSearch || resourceView === visibleView)
                 continue;
             views.push(resourceView);
@@ -752,10 +748,12 @@ WebInspector.ResourcesPanel.prototype = {
             this.sortingSelectElement.addStyleClass("hidden");
             this.panelEnablerView.visible = true;
         }
+        this.resourceURLMap = {};
     },
 
     addResource: function(resource)
     {
+        this.resourceURLMap[resource.url] = resource;
         this._resources.push(resource);
     },
 
@@ -770,6 +768,7 @@ WebInspector.ResourcesPanel.prototype = {
         resource.errors = 0;
 
         delete resource._resourcesView;
+        delete this.resourceURLMap[resource.url];
     },
 
     addMessageToResource: function(resource, msg)
@@ -789,7 +788,7 @@ WebInspector.ResourcesPanel.prototype = {
         if (!this.currentQuery && resource._itemsTreeElement)
             resource._itemsTreeElement.updateErrorsAndWarnings();
 
-        var view = this.resourceViewForResource(resource);
+        var view = WebInspector.ResourceManager.resourceViewForResource(resource);
         if (view.addMessage)
             view.addMessage(msg);
     },
@@ -823,10 +822,10 @@ WebInspector.ResourcesPanel.prototype = {
         if (!resource || !resource._resourcesView)
             return;
 
-        if (this._resourceViewIsConsistentWithCategory(resource, resource._resourcesView))
+        if (WebInspector.ResourceManager.resourceViewTypeMatchesResource(resource, resource._resourcesView))
             return;
+        var newView = WebInspector.ResourceManager.createResourceView(resource);
 
-        var newView = this._createResourceView(resource);
         if (!this.currentQuery && resource._itemsTreeElement)
             resource._itemsTreeElement.updateErrorsAndWarnings();
 
@@ -868,7 +867,7 @@ WebInspector.ResourcesPanel.prototype = {
         if (this.visibleResource && this.visibleResource._resourcesView)
             this.visibleResource._resourcesView.hide();
 
-        var view = this.resourceViewForResource(resource);
+        var view = WebInspector.ResourceManager.resourceViewForResource(resource);
         view.headersVisible = true;
         view.show(this.viewsContainerElement);
 
@@ -909,32 +908,6 @@ WebInspector.ResourcesPanel.prototype = {
         this.updateSidebarWidth();
     },
 
-    resourceViewForResource: function(resource)
-    {
-        if (!resource)
-            return null;
-        if (!resource._resourcesView)
-            resource._resourcesView = this._createResourceView(resource);
-        return resource._resourcesView;
-    },
-
-    sourceFrameForResource: function(resource)
-    {
-        var view = this.resourceViewForResource(resource);
-        if (!view)
-            return null;
-
-        if (!view.setupSourceFrameIfNeeded)
-            return null;
-
-        // Setting up the source frame requires that we be attached.
-        if (!this.element.parentNode)
-            this.attach();
-
-        view.setupSourceFrameIfNeeded();
-        return view.sourceFrame;
-    },
-
     _sortResourcesIfNeeded: function()
     {
         this.sortItems(this.sortingFunction);
@@ -1068,40 +1041,6 @@ WebInspector.ResourcesPanel.prototype = {
         this.calculator = this.summaryBar.calculator = selectedOption.calculator;
     },
 
-    _resourceViewIsConsistentWithCategory: function(resource, resourceView)
-    {
-        switch (resource.category) {
-            case WebInspector.resourceCategories.documents:
-            case WebInspector.resourceCategories.stylesheets:
-            case WebInspector.resourceCategories.scripts:
-            case WebInspector.resourceCategories.xhr:
-                return resourceView.__proto__ === WebInspector.SourceView.prototype;
-            case WebInspector.resourceCategories.images:
-                return resourceView.__proto__ === WebInspector.ImageView.prototype;
-            case WebInspector.resourceCategories.fonts:
-                return resourceView.__proto__ === WebInspector.FontView.prototype;
-            default:
-                return resourceView.__proto__ === WebInspector.ResourceView.prototype;
-        }
-    },
-
-    _createResourceView: function(resource)
-    {
-        switch (resource.category) {
-            case WebInspector.resourceCategories.documents:
-            case WebInspector.resourceCategories.stylesheets:
-            case WebInspector.resourceCategories.scripts:
-            case WebInspector.resourceCategories.xhr:
-                return new WebInspector.SourceView(resource);
-            case WebInspector.resourceCategories.images:
-                return new WebInspector.ImageView(resource);
-            case WebInspector.resourceCategories.fonts:
-                return new WebInspector.FontView(resource);
-            default:
-                return new WebInspector.ResourceView(resource);
-        }
-    },
-
     setSidebarWidth: function(width)
     {
         if (this.visibleResource) {
@@ -1126,10 +1065,10 @@ WebInspector.ResourcesPanel.prototype = {
     {
         if (this._resourceTrackingEnabled)
             return;
-        this._toggleResourceTracking(this.panelEnablerView.alwaysEnabled);
+        this.toggleResourceTracking(this.panelEnablerView.alwaysEnabled);
     },
 
-    _toggleResourceTracking: function(optionalAlways)
+    toggleResourceTracking: function(optionalAlways)
     {
         function callback(newState) {
             if (newState)
@@ -1142,7 +1081,7 @@ WebInspector.ResourcesPanel.prototype = {
             this.largerResourcesButton.visible = false;
             this.sortingSelectElement.visible = false;
             WebInspector.resources = {};
-            WebInspector.resourceURLMap = {};
+            this.resourceURLMap = {};
             InspectorBackend.setResourceTrackingEnabled(false, true, callback);
         } else {
             this.largerResourcesButton.visible = true;
@@ -1723,7 +1662,15 @@ WebInspector.ResourceSidebarTreeElement.prototype = {
         if (this.resource.category === WebInspector.resourceCategories.images) {
             var previewImage = document.createElement("img");
             previewImage.className = "image-resource-icon-preview";
-            previewImage.src = this.resource.url;
+
+            function onResourceContent()
+            {
+                previewImage.src = this.resource.contentURL;
+            }
+            if (Preferences.useDataURLForResourceImageIcons)
+                this.resource.getContent(onResourceContent.bind(this));
+            else
+                previewImage.src = this.resource.url;
 
             this.iconElement = document.createElement("div");
             this.iconElement.className = "icon";
diff --git a/WebCore/inspector/front-end/ScriptsPanel.js b/WebCore/inspector/front-end/ScriptsPanel.js
index 0a653c9..8125c1e 100644
--- a/WebCore/inspector/front-end/ScriptsPanel.js
+++ b/WebCore/inspector/front-end/ScriptsPanel.js
@@ -241,7 +241,7 @@ WebInspector.ScriptsPanel.prototype = {
         var script = new WebInspector.Script(sourceID, sourceURL, source, startingLine, errorLine, errorMessage, scriptWorldType);
         this._sourceIDMap[sourceID] = script;
 
-        var resource = WebInspector.resourceURLMap[sourceURL];
+        var resource = WebInspector.resourceForURL(sourceURL);
         if (resource) {
             if (resource.finished) {
                 // Resource is finished, bind the script right away.
@@ -289,7 +289,7 @@ WebInspector.ScriptsPanel.prototype = {
 
         var sourceFrame;
         if (breakpoint.url) {
-            var resource = WebInspector.resourceURLMap[breakpoint.url];
+            var resource = WebInspector.resourceForURL(breakpoint.url);
             if (resource && resource.finished)
                 sourceFrame = this._sourceFrameForScriptOrResource(resource);
         }
@@ -570,11 +570,24 @@ WebInspector.ScriptsPanel.prototype = {
     _sourceFrameForScriptOrResource: function(scriptOrResource)
     {
         if (scriptOrResource instanceof WebInspector.Resource)
-            return WebInspector.panels.resources.sourceFrameForResource(scriptOrResource);
+            return this._sourceFrameForResource(scriptOrResource);
         if (scriptOrResource instanceof WebInspector.Script)
             return this.sourceFrameForScript(scriptOrResource);
     },
 
+    _sourceFrameForResource: function(resource)
+    {
+        var view = WebInspector.ResourceManager.resourceViewForResource(resource);
+        if (!view)
+            return null;
+
+        if (!view.setupSourceFrameIfNeeded)
+            return null;
+
+        view.setupSourceFrameIfNeeded();
+        return view.sourceFrame;
+    },
+
     _showScriptOrResource: function(scriptOrResource, options)
     {
         // options = {line:, shouldHighlightLine:, fromBackForwardAction:, initialLoad:}
@@ -585,9 +598,7 @@ WebInspector.ScriptsPanel.prototype = {
 
         var view;
         if (scriptOrResource instanceof WebInspector.Resource) {
-            if (!WebInspector.panels.resources)
-                return null;
-            view = WebInspector.panels.resources.resourceViewForResource(scriptOrResource);
+            view = WebInspector.ResourceManager.resourceViewForResource(scriptOrResource);
             view.headersVisible = false;
         } else if (scriptOrResource instanceof WebInspector.Script)
             view = this.scriptViewForScript(scriptOrResource);
diff --git a/WebCore/inspector/front-end/Settings.js b/WebCore/inspector/front-end/Settings.js
index c6da14d..3fb81f5 100644
--- a/WebCore/inspector/front-end/Settings.js
+++ b/WebCore/inspector/front-end/Settings.js
@@ -45,96 +45,74 @@ var Preferences = {
     onlineDetectionEnabled: true,
     nativeInstrumentationEnabled: false,
     resourceExportEnabled: false,
-    networkPanelEnabled: false
+    networkPanelEnabled: false,
+    useDataURLForResourceImageIcons: true
 }
 
-WebInspector.Settings = function(sessionScope)
+WebInspector.Settings = function()
 {
-    this._sessionScope = sessionScope;
-    this._store = {};
-}
+    this.installApplicationSetting("colorFormat", "hex");
+    this.installApplicationSetting("consoleHistory", []);
+    this.installApplicationSetting("eventListenersFilter", "all");
+    this.installApplicationSetting("lastViewedScriptFile", "application");
+    this.installApplicationSetting("resourcesLargeRows", true);
+    this.installApplicationSetting("resourcesSortOptions", {timeOption: "responseTime", sizeOption: "transferSize"});
+    this.installApplicationSetting("resourceViewTab", "content");
+    this.installApplicationSetting("showInheritedComputedStyleProperties", false);
+    this.installApplicationSetting("showUserAgentStyles", true);
+    this.installApplicationSetting("watchExpressions", []);
+    this.installApplicationSetting("lastActivePanel", "elements");
 
-WebInspector.Settings.initialize = function()
-{
-    WebInspector.applicationSettings = new WebInspector.Settings(false);
-    WebInspector.sessionSettings = new WebInspector.Settings(true);
+    this.installProjectSetting("breakpoints", {});
+}
 
-    function populateApplicationSettings(settingsString)
+WebInspector.Settings.prototype = {
+    installApplicationSetting: function(key, defaultValue)
     {
-        WebInspector.applicationSettings._load(settingsString);
-        WebInspector.applicationSettings.installSetting("eventListenersFilter", "event-listeners-filter", "all");
-        WebInspector.applicationSettings.installSetting("colorFormat", "color-format", "hex");
-        WebInspector.applicationSettings.installSetting("resourcesLargeRows", "resources-large-rows", true);
-        WebInspector.applicationSettings.installSetting("watchExpressions", "watch-expressions", []);
-        WebInspector.applicationSettings.installSetting("lastViewedScriptFile", "last-viewed-script-file");
-        WebInspector.applicationSettings.installSetting("showInheritedComputedStyleProperties", "show-inherited-computed-style-properties", false);
-        WebInspector.applicationSettings.installSetting("showUserAgentStyles", "show-user-agent-styles", true);
-        WebInspector.applicationSettings.installSetting("resourceViewTab", "resource-view-tab", "content");
-        WebInspector.applicationSettings.installSetting("consoleHistory", "console-history", []);
-        WebInspector.applicationSettings.installSetting("resourcesSortOptions", "resources-sort-options", {timeOption: "responseTime", sizeOption: "transferSize"});
-
-        WebInspector.applicationSettings.dispatchEventToListeners("loaded");
-    }
+        this.__defineGetter__(key, this._get.bind(this, key, defaultValue));
+        this.__defineSetter__(key, this._set.bind(this, key));
+    },
 
-    function populateSessionSettings(settingsString)
+    installProjectSetting: function(key, defaultValue)
     {
-        WebInspector.sessionSettings._load(settingsString);
-        WebInspector.sessionSettings.dispatchEventToListeners("loaded");
-    }
-
-    InspectorBackend.getSettings(function(settings) {
-        populateApplicationSettings(settings.application);
-        populateSessionSettings(settings.session);
-    });
-}
+        this.__defineGetter__(key, this._getProjectSetting.bind(this, key, defaultValue));
+        this.__defineSetter__(key, this._setProjectSetting.bind(this, key));
+    },
 
-WebInspector.Settings.prototype = {
-    reset: function()
+    _get: function(key, defaultValue)
     {
-        this._store = {};
-        // FIXME: restore default values (bug 42820)
-        this.dispatchEventToListeners("loaded");
+        if (key in window.localStorage) {
+            try {
+                return JSON.parse(window.localStorage[key]);
+            } catch(e) {
+                window.localStorage.removeItem(key);
+            }
+        }
+        return defaultValue;
     },
 
-    _load: function(settingsString)
+    _set: function(key, value)
     {
-        try {
-            var loadedStore = JSON.parse(settingsString);
-        } catch (e) {
-            // May fail;
-            loadedStore = {};
-        }
-        if (!loadedStore)
-            return;
-        for (var propertyName in loadedStore)
-            this._store[propertyName] = loadedStore[propertyName];
+        window.localStorage[key] = JSON.stringify(value);
     },
 
-    installSetting: function(name, propertyName, defaultValue)
+    _getProjectSetting: function(key, defaultValue)
     {
-        this.__defineGetter__(name, this._get.bind(this, propertyName));
-        this.__defineSetter__(name, this._set.bind(this, propertyName));
-        if (!(propertyName in this._store))
-            this._store[propertyName] = defaultValue;
+        return this._get(this._formatProjectKey(key), defaultValue);
     },
 
-    _get: function(propertyName)
+    _setProjectSetting: function(key, value)
     {
-        return this._store[propertyName];
+        return this._set(this._formatProjectKey(key), value);
     },
 
-    _set: function(propertyName, newValue)
+    _formatProjectKey: function(key)
     {
-        this._store[propertyName] = newValue;
-        try {
-            var store = JSON.stringify(this._store);
-            if (this._sessionScope)
-                InspectorBackend.saveSessionSettings(store);
-            else
-                InspectorBackend.saveApplicationSettings(store);
-        } catch (e) {
-            // May fail;
-        }
+        var url = this._mainResourceURL;
+        var fragmentIndex = url.indexOf("#");
+        if (fragmentIndex !== -1)
+            url = url.substring(0, fragmentIndex);
+        return key + "." + url;
     }
 }
 
diff --git a/WebCore/inspector/front-end/SourceView.js b/WebCore/inspector/front-end/SourceView.js
index 8092505..bfdc058 100644
--- a/WebCore/inspector/front-end/SourceView.js
+++ b/WebCore/inspector/front-end/SourceView.js
@@ -73,6 +73,7 @@ WebInspector.SourceView.prototype = {
             this.sourceFrame.resize();
         if (this.localSourceFrame)
             this.localSourceFrame.resize();
+        WebInspector.ResourceView.prototype.resize.call(this);
     },
 
     setupSourceFrameIfNeeded: function()
@@ -83,7 +84,7 @@ WebInspector.SourceView.prototype = {
         this.attach();
 
         delete this._frameNeedsSetup;
-        this.resource.getContents(this._contentLoaded.bind(this));
+        this.resource.getContent(this._contentLoaded.bind(this));
     },
 
     hasContentTab: function()
diff --git a/WebCore/inspector/front-end/StoragePanel.js b/WebCore/inspector/front-end/StoragePanel.js
index e033b57..2fa54c2 100644
--- a/WebCore/inspector/front-end/StoragePanel.js
+++ b/WebCore/inspector/front-end/StoragePanel.js
@@ -32,28 +32,36 @@ WebInspector.StoragePanel = function(database)
     WebInspector.Panel.call(this, "storage");
 
     this.createSidebar();
+    this.sidebarElement.addStyleClass("outline-disclosure filter-all children small");
+    this.sidebarTreeElement.removeStyleClass("sidebar-tree");
+
+    if (Preferences.networkPanelEnabled) {
+        this.resourcesListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Frames"), "frame-storage-tree-item");
+        this.sidebarTree.appendChild(this.resourcesListTreeElement);
+        this.resourcesListTreeElement.expand();
+        this._treeElementForFrameId = {};
+    }
 
-    this.databasesListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("DATABASES"), {}, true);
+    this.databasesListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Databases"), "database-storage-tree-item");
     this.sidebarTree.appendChild(this.databasesListTreeElement);
     this.databasesListTreeElement.expand();
 
-    this.localStorageListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("LOCAL STORAGE"), {}, true);
+    this.localStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Local Storage"), "domstorage-storage-tree-item local-storage");
     this.sidebarTree.appendChild(this.localStorageListTreeElement);
     this.localStorageListTreeElement.expand();
 
-    this.sessionStorageListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("SESSION STORAGE"), {}, true);
+    this.sessionStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Session Storage"), "domstorage-storage-tree-item session-storage");
     this.sidebarTree.appendChild(this.sessionStorageListTreeElement);
     this.sessionStorageListTreeElement.expand();
 
-    this.cookieListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("COOKIES"), {}, true);
+    this.cookieListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Cookies"), "cookie-storage-tree-item");
     this.sidebarTree.appendChild(this.cookieListTreeElement);
     this.cookieListTreeElement.expand();
-
     
-    this.applicationCacheListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("APPLICATION CACHE"), {}, true);
+    this.applicationCacheListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Application Cache"), "application-cache-storage-tree-item");
     this.sidebarTree.appendChild(this.applicationCacheListTreeElement);
     this.applicationCacheListTreeElement.expand();
-    
+
     this.storageViews = document.createElement("div");
     this.storageViews.id = "storage-views";
     this.element.appendChild(this.storageViews);
@@ -61,13 +69,15 @@ WebInspector.StoragePanel = function(database)
     this.storageViewStatusBarItemsContainer = document.createElement("div");
     this.storageViewStatusBarItemsContainer.className = "status-bar-items";
 
-    this.reset();
+    this._databases = [];
+    this._domStorage = [];
+    this._cookieViews = {};
 }
 
 WebInspector.StoragePanel.prototype = {
     get toolbarItemLabel()
     {
-        return WebInspector.UIString("Storage");
+        return Preferences.networkPanelEnabled ? WebInspector.UIString("Resources") : WebInspector.UIString("Storage");
     },
 
     get statusBarItems()
@@ -77,27 +87,18 @@ WebInspector.StoragePanel.prototype = {
 
     reset: function()
     {
-        if (this._databases) {
-            var databasesLength = this._databases.length;
-            for (var i = 0; i < databasesLength; ++i) {
-                var database = this._databases[i];
-
-                delete database._tableViews;
-                delete database._queryView;
-            }
+        for (var i = 0; i < this._databases.length; ++i) {
+            var database = this._databases[i];
+            delete database._tableViews;
+            delete database._queryView;
         }
-
         this._databases = [];
 
-        if (this._domStorage) {
-            var domStorageLength = this._domStorage.length;
-            for (var i = 0; i < domStorageLength; ++i) {
-                var domStorage = this._domStorage[i];
-
-                delete domStorage._domStorageView;
-            }
+        var domStorageLength = this._domStorage.length;
+        for (var i = 0; i < this._domStorage.length; ++i) {
+            var domStorage = this._domStorage[i];
+            delete domStorage._domStorageView;
         }
-
         this._domStorage = [];
 
         this._cookieViews = {};
@@ -109,36 +110,112 @@ WebInspector.StoragePanel.prototype = {
         this.localStorageListTreeElement.removeChildren();
         this.sessionStorageListTreeElement.removeChildren();
         this.cookieListTreeElement.removeChildren();
-
         this.applicationCacheListTreeElement.removeChildren();
 
         this.storageViews.removeChildren();
 
         this.storageViewStatusBarItemsContainer.removeChildren();
-        
+
         if (this.sidebarTree.selectedTreeElement)
             this.sidebarTree.selectedTreeElement.deselect();
     },
 
+    addOrUpdateFrame: function(parentFrameId, frameId, displayName)
+    {
+        var frameTreeElement = this._treeElementForFrameId[frameId];
+        if (frameTreeElement) {
+            frameTreeElement.displayName = displayName;
+            return;
+        }
+
+        var parentTreeElement = parentFrameId ? this._treeElementForFrameId[parentFrameId] : this.resourcesListTreeElement;
+        if (!parentTreeElement) {
+            console.warning("No frame with id:" + parentFrameId + " to route " + displayName + " to.")
+            return;
+        }
+
+        var frameTreeElement = new WebInspector.FrameTreeElement(this, frameId, displayName);
+        this._treeElementForFrameId[frameId] = frameTreeElement;
+
+        // Insert in the alphabetical order, first frames, then resources.
+        var children = parentTreeElement.children;
+        for (var i = 0; i < children.length; ++i) {
+            var child = children[i];
+            if (!(child instanceof WebInspector.FrameTreeElement)) {
+                parentTreeElement.insertChild(frameTreeElement, i);
+                return;
+            }
+            if (child.displayName.localeCompare(frameTreeElement.displayName) > 0) {
+                parentTreeElement.insertChild(frameTreeElement, i);
+                return;
+            }
+        }
+        parentTreeElement.appendChild(frameTreeElement);
+    },
+
+    removeFrame: function(frameId)
+    {
+        var frameTreeElement = this._treeElementForFrameId[frameId];
+        if (!frameTreeElement)
+            return;
+        delete this._treeElementForFrameId[frameId];
+        if (frameTreeElement.parent)
+            frameTreeElement.parent.removeChild(frameTreeElement);
+    },
+
+    addResourceToFrame: function(frameId, resource)
+    {
+        var frameTreeElement = this._treeElementForFrameId[frameId];
+        if (!frameTreeElement) {
+            // This is a frame's main resource, it will be retained
+            // and re-added by the resource manager;
+            return;
+        }
+
+        var resourceTreeElement = new WebInspector.FrameResourceTreeElement(this, resource);
+
+        // Insert in the alphabetical order, first frames, then resources. Document resource goes first.
+        var children = frameTreeElement.children;
+        for (var i = 0; i < children.length; ++i) {
+            var child = children[i];
+            if (!(child instanceof WebInspector.FrameResourceTreeElement))
+                continue;
+
+            if (resource.type === WebInspector.Resource.Type.Document ||
+                    (child._resource.type !== WebInspector.Resource.Type.Document && child._resource.displayName.localeCompare(resource.displayName) > 0)) {
+                frameTreeElement.insertChild(resourceTreeElement, i);
+                return;
+            }
+        }
+        frameTreeElement.appendChild(resourceTreeElement);
+    },
+
+    removeResourcesFromFrame: function(frameId)
+    {
+        var frameTreeElement = this._treeElementForFrameId[frameId];
+        if (frameTreeElement)
+            frameTreeElement.removeChildren();
+    },
+
     addDatabase: function(database)
     {
         this._databases.push(database);
 
-        var databaseTreeElement = new WebInspector.DatabaseSidebarTreeElement(database);
+        var databaseTreeElement = new WebInspector.DatabaseTreeElement(this, database);
         database._databasesTreeElement = databaseTreeElement;
         this.databasesListTreeElement.appendChild(databaseTreeElement);
     },
     
     addCookieDomain: function(domain)
     {
-        var cookieDomainTreeElement = new WebInspector.CookieSidebarTreeElement(domain);
+        var cookieDomainTreeElement = new WebInspector.CookieTreeElement(this, domain);
         this.cookieListTreeElement.appendChild(cookieDomainTreeElement);
     },
 
     addDOMStorage: function(domStorage)
     {
         this._domStorage.push(domStorage);
-        var domStorageTreeElement = new WebInspector.DOMStorageSidebarTreeElement(domStorage, (domStorage.isLocalStorage ? "local-storage" : "session-storage"));
+        var domStorageTreeElement = new WebInspector.DOMStorageTreeElement(this, domStorage, (domStorage.isLocalStorage ? "local-storage" : "session-storage"));
         domStorage._domStorageTreeElement = domStorageTreeElement;
         if (domStorage.isLocalStorage)
             this.localStorageListTreeElement.appendChild(domStorageTreeElement);
@@ -148,7 +225,7 @@ WebInspector.StoragePanel.prototype = {
 
     addApplicationCache: function(domain)
     {
-        var applicationCacheTreeElement = new WebInspector.ApplicationCacheSidebarTreeElement(domain);
+        var applicationCacheTreeElement = new WebInspector.ApplicationCacheTreeElement(this, domain);
         this.applicationCacheListTreeElement.appendChild(applicationCacheTreeElement);
     },
 
@@ -174,14 +251,47 @@ WebInspector.StoragePanel.prototype = {
         }
     },
 
+    canShowSourceLine: function(url, line)
+    {
+        return !!WebInspector.resourceManager.resourceForURL(url);
+    },
+
+    showSourceLine: function(url, line)
+    {
+        this.showResource(WebInspector.resourceManager.resourceForURL(url), line);
+    },
+
+    showResource: function(resource, line)
+    {
+        var resourceTreeElement = this._findTreeElementForResource(resource);
+        if (resourceTreeElement) {
+            resourceTreeElement.reveal();
+            resourceTreeElement.select();
+        }
+
+        if (line) {
+            var view = WebInspector.ResourceManager.resourceViewForResource(resource);
+            view.selectContentTab(true);
+            if (view.revealLine)
+                view.revealLine(line);
+            if (view.highlightLine)
+                view.highlightLine(line);
+        }
+        return true;
+    },
+
+    _showResourceView: function(resource)
+    {
+        var view = WebInspector.ResourceManager.resourceViewForResource(resource);
+        view.headersVisible = false;
+        this._innerShowView(view);
+    },
+
     showDatabase: function(database, tableName)
     {
         if (!database)
             return;
 
-        if (this.visibleView)
-            this.visibleView.hide();
-
         var view;
         if (tableName) {
             if (!("_tableViews" in database))
@@ -199,7 +309,7 @@ WebInspector.StoragePanel.prototype = {
             }
         }
 
-        this._genericViewSetup(view);
+        this._innerShowView(view);
     },
 
     showDOMStorage: function(domStorage)
@@ -207,9 +317,6 @@ WebInspector.StoragePanel.prototype = {
         if (!domStorage)
             return;
 
-        if (this.visibleView)
-            this.visibleView.hide();
-
         var view;
         view = domStorage._domStorageView;
         if (!view) {
@@ -217,42 +324,47 @@ WebInspector.StoragePanel.prototype = {
             domStorage._domStorageView = view;
         }
 
-        this._genericViewSetup(view);
+        this._innerShowView(view);
     },
 
     showCookies: function(treeElement, cookieDomain)
     {
-        if (this.visibleView)
-            this.visibleView.hide();
-
         var view = this._cookieViews[cookieDomain];
         if (!view) {
             view = new WebInspector.CookieItemsView(treeElement, cookieDomain);
             this._cookieViews[cookieDomain] = view;
         }
 
-        this._genericViewSetup(view);
+        this._innerShowView(view);
     },
 
     showApplicationCache: function(treeElement, appcacheDomain)
     {
-        if (this.visibleView)
-            this.visibleView.hide();
-
         var view = this._applicationCacheView;
         if (!view) {
             view = new WebInspector.ApplicationCacheItemsView(treeElement, appcacheDomain);
             this._applicationCacheView = view;
         }
 
-        this._genericViewSetup(view);
+        this._innerShowView(view);
 
         if ("_cachedApplicationCacheViewStatus" in this)
             this._applicationCacheView.updateStatus(this._cachedApplicationCacheViewStatus);
     },
 
-    _genericViewSetup: function(view)
+    showCategoryView: function(categoryName)
+    {
+        if (!this._categoryView)
+            this._categoryView = new WebInspector.StorageCategoryView();
+        this._categoryView.setText(categoryName);
+        this._innerShowView(this._categoryView);
+    },
+
+    _innerShowView: function(view)
     {
+        if (this.visibleView)
+            this.visibleView.hide();
+
         view.show(this.storageViews);
         this.visibleView = view;
 
@@ -418,201 +530,413 @@ WebInspector.StoragePanel.prototype = {
         this.storageViews.style.left = width + "px";
         this.storageViewStatusBarItemsContainer.style.left = width + "px";
         this.resize();
-    }
-}
+    },
 
-WebInspector.StoragePanel.prototype.__proto__ = WebInspector.Panel.prototype;
+    get searchableViews()
+    {
+        var views = [];
 
-WebInspector.DatabaseSidebarTreeElement = function(database)
-{
-    this.database = database;
+        if (!Preferences.networkPanelEnabled)
+            return views;
 
-    WebInspector.SidebarTreeElement.call(this, "database-sidebar-tree-item", "", "", database, true);
+        const visibleView = this.visibleView;
+        if (visibleView instanceof WebInspector.ResourceView && visibleView.performSearch)
+            views.push(visibleView);
 
-    this.refreshTitles();
-}
+        function callback(resourceTreeElement)
+        {
+            var resource = resourceTreeElement._resource;
+            var resourceView = WebInspector.ResourceManager.resourceViewForResource(resource);
+            if (resourceView.performSearch && resourceView !== visibleView)
+                views.push(resourceView);
+        }
+        this._forAllResourceTreeElements(callback);
+        return views;
+    },
 
-WebInspector.DatabaseSidebarTreeElement.prototype = {
-    onselect: function()
+    _forAllResourceTreeElements: function(callback)
     {
-        WebInspector.panels.storage.showDatabase(this.database);
+        var stop = false;
+        for (var treeElement = this.resourcesListTreeElement; !stop && treeElement; treeElement = treeElement.traverseNextTreeElement(false, this.resourcesListTreeElement, true)) {
+            if (treeElement instanceof WebInspector.FrameResourceTreeElement)
+                stop = callback(treeElement);
+        }
     },
 
-    oncollapse: function()
+    searchMatchFound: function(view, matches)
     {
-        // Request a refresh after every collapse so the next
-        // expand will have an updated table list.
-        this.shouldRefreshChildren = true;
+        if (!view.resource)
+            return;
+        var treeElement = this._findTreeElementForResource(view.resource);
+        if (treeElement)
+            treeElement.searchMatchFound(matches);
     },
 
-    onpopulate: function()
+    _findTreeElementForResource: function(resource)
     {
-        this.removeChildren();
+        function isAncestor(ancestor, object)
+        {
+            console.error("There should be no calls to isAncestor, but there was one for ", object);
+            return false;
+        }
 
-        var self = this;
-        function tableNamesCallback(tableNames)
+        function getParent(object)
         {
-            var tableNamesLength = tableNames.length;
-            for (var i = 0; i < tableNamesLength; ++i)
-                self.appendChild(new WebInspector.SidebarDatabaseTableTreeElement(self.database, tableNames[i]));
+            console.error("There should be no calls to getParent, but there was one for ", object);
+            return null;
+        }
+
+        return this.sidebarTree.findTreeElement(resource, isAncestor, getParent);
+    },
+
+    searchCanceled: function(startingNewSearch)
+    {
+        WebInspector.Panel.prototype.searchCanceled.call(this, startingNewSearch);
+
+        if (startingNewSearch)
+            return;
+
+        function callback(resourceTreeElement)
+        {
+            resourceTreeElement._errorsWarningsUpdated();
+        }
+        this._forAllResourceTreeElements(callback);
+    },
+
+    performSearch: function(query)
+    {
+        function callback(resourceTreeElement)
+        {
+            resourceTreeElement._resetBubble();
         }
-        this.database.getTableNames(tableNamesCallback);
+        this._forAllResourceTreeElements(callback);
+        WebInspector.Panel.prototype.performSearch.call(this, query);
     },
 
-    get mainTitle()
+    showView: function(view)
+    {
+        if (view)
+            this.showResource(view.resource);
+    }
+}
+
+WebInspector.StoragePanel.prototype.__proto__ = WebInspector.Panel.prototype;
+
+WebInspector.BaseStorageTreeElement = function(storagePanel, representedObject, title, iconClass, hasChildren)
+{
+    TreeElement.call(this, "", representedObject, hasChildren);
+    this._storagePanel = storagePanel;
+    this._titleText = title;
+    this._iconClass = iconClass;
+}
+
+WebInspector.BaseStorageTreeElement.prototype = {
+    onattach: function()
     {
-        return this.database.name;
+        this.listItemElement.removeChildren();
+        this.listItemElement.addStyleClass(this._iconClass);
+
+        var selectionElement = document.createElement("div");
+        selectionElement.className = "selection";
+        this.listItemElement.appendChild(selectionElement);
+
+        this.imageElement = document.createElement("img");
+        this.imageElement.className = "icon";
+        this.listItemElement.appendChild(this.imageElement);
+
+        this.titleElement = document.createElement("div");
+        this.titleElement.className = "base-storage-tree-element-title";
+        this.titleElement.textContent = this._titleText;
+        this.listItemElement.appendChild(this.titleElement);
     },
 
-    set mainTitle(x)
+    onreveal: function()
     {
-        // Do nothing.
+        if (this.listItemElement)
+            this.listItemElement.scrollIntoViewIfNeeded(false);
     },
 
-    get subtitle()
+    set titleText(titleText)
     {
-        return this.database.displayDomain;
+        this._titleText = titleText;
+        this.titleElement.textContent = this._titleText;
     },
 
-    set subtitle(x)
+    isEventWithinDisclosureTriangle: function()
     {
-        // Do nothing.
+        // Override it since we use margin-left in place of treeoutline's text-indent.
+        // Hence we need to take padding into consideration. This all is needed for leading
+        // icons in the tree.
+        const paddingLeft = 14;
+        var left = this.listItemElement.totalOffsetLeft + paddingLeft;
+        return event.pageX >= left && event.pageX <= left + this.arrowToggleWidth && this.hasChildren;
     }
 }
 
-WebInspector.DatabaseSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
+WebInspector.BaseStorageTreeElement.prototype.__proto__ = TreeElement.prototype;
 
-WebInspector.SidebarDatabaseTableTreeElement = function(database, tableName)
+WebInspector.StorageCategoryTreeElement = function(storagePanel, categoryName, iconClass)
 {
-    this.database = database;
-    this.tableName = tableName;
-
-    WebInspector.SidebarTreeElement.call(this, "database-table-sidebar-tree-item small", tableName, "", null, false);
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, categoryName, iconClass, true);
+    this._categoryName = categoryName;
 }
 
-WebInspector.SidebarDatabaseTableTreeElement.prototype = {
+WebInspector.StorageCategoryTreeElement.prototype = {
     onselect: function()
     {
-        WebInspector.panels.storage.showDatabase(this.database, this.tableName);
+        this._storagePanel.showCategoryView(this._categoryName);
     }
 }
+WebInspector.StorageCategoryTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype;
 
-WebInspector.SidebarDatabaseTableTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
-
-WebInspector.DOMStorageSidebarTreeElement = function(domStorage, className)
+WebInspector.FrameTreeElement = function(storagePanel, frameId, displayName)
 {
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, displayName, "frame-storage-tree-item");
+    this._frameId = frameId;
+    this._displayName = displayName;
+}
 
-    this.domStorage = domStorage;
+WebInspector.FrameTreeElement.prototype = {
+    onselect: function()
+    {
+        this._storagePanel.showCategoryView(this._displayName);
+    },
 
-    WebInspector.SidebarTreeElement.call(this, "domstorage-sidebar-tree-item " + className, domStorage, "", null, false);
+    get displayName()
+    {
+        return this._displayName;
+    },
 
-    this.refreshTitles();
+    set displayName(displayName)
+    {
+        this._displayName = displayName;
+        this.titleText = displayName;
+    }
+}
+WebInspector.FrameTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype;
+
+WebInspector.FrameResourceTreeElement = function(storagePanel, resource)
+{
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, resource, resource.displayName, "resource-sidebar-tree-item resources-category-" + resource.category.name);
+    this._resource = resource;
+    this._resource.addEventListener("errors-warnings-updated", this._errorsWarningsUpdated, this);
+    this.tooltip = resource.url;
 }
 
-WebInspector.DOMStorageSidebarTreeElement.prototype = {
+WebInspector.FrameResourceTreeElement.prototype = {
     onselect: function()
     {
-        WebInspector.panels.storage.showDOMStorage(this.domStorage);
+        this._storagePanel._showResourceView(this._resource);
     },
 
-    get mainTitle()
+    ondblclick: function(event)
     {
-        return this.domStorage.domain ? this.domStorage.domain : WebInspector.UIString("Local Files");
+        InspectorBackend.openInInspectedWindow(this._resource.url);
     },
 
-    set mainTitle(x)
+    onattach: function()
     {
-        // Do nothing.
+        WebInspector.BaseStorageTreeElement.prototype.onattach.call(this);
+
+        if (this._resource.category === WebInspector.resourceCategories.images) {
+            var previewImage = document.createElement("img");
+            previewImage.className = "image-resource-icon-preview";
+            previewImage.src = this._resource.url;
+
+            var iconElement = document.createElement("div");
+            iconElement.className = "icon";
+            iconElement.appendChild(previewImage);
+            this.listItemElement.replaceChild(iconElement, this.imageElement);
+        }
+
+        this._statusElement = document.createElement("div");
+        this._statusElement.className = "status";
+        this.listItemElement.insertBefore(this._statusElement, this.titleElement);
+
+        this.listItemElement.draggable = true;
+        this.listItemElement.addEventListener("dragstart", this._ondragstart.bind(this), false);
     },
 
-    get subtitle()
+    _ondragstart: function(event)
     {
-        return ""; //this.database.displayDomain;
+        event.dataTransfer.setData("text/plain", this._resource.url);
+        event.dataTransfer.setData("text/uri-list", this._resource.url + "\r\n");
+        event.dataTransfer.effectAllowed = "copy";
+        return true;
+    },
+
+    _setBubbleText: function(x)
+    {
+        if (!this._bubbleElement) {
+            this._bubbleElement = document.createElement("div");
+            this._bubbleElement.className = "bubble";
+            this._statusElement.appendChild(this._bubbleElement);
+        }
+
+        this._bubbleElement.textContent = x;
+    },
+
+    _resetBubble: function()
+    {
+        if (this._bubbleElement) {
+            this._bubbleElement.textContent = "";
+            this._bubbleElement.removeStyleClass("search-matches");
+            this._bubbleElement.removeStyleClass("warning");
+            this._bubbleElement.removeStyleClass("error");
+        }
+    },
+
+    searchMatchFound: function(matches)
+    {
+        this._resetBubble();
+
+        this._setBubbleText(matches);
+        this._bubbleElement.addStyleClass("search-matches");
+
+        // Expand, do not scroll into view.
+        var currentAncestor = this.parent;
+        while (currentAncestor && !currentAncestor.root) {
+            if (!currentAncestor.expanded)
+                currentAncestor.expand();
+            currentAncestor = currentAncestor.parent;
+        }
     },
 
-    set subtitle(x)
+    _errorsWarningsUpdated: function()
     {
-        // Do nothing.
+        // FIXME: move to the Script/SourceView.
+        if (!this._resource.warnings && !this._resource.errors) {
+            var view = WebInspector.ResourceManager.existingResourceViewForResource(this._resource);
+            if (view && view.clearMessages)
+                view.clearMessages();
+        }
+
+        if (this._storagePanel.currentQuery)
+            return;
+
+        this._resetBubble();
+
+        if (this._resource.warnings || this._resource.errors)
+            this._setBubbleText(this._resource.warnings + this._resource.errors);
+
+        if (this._resource.warnings)
+            this._bubbleElement.addStyleClass("warning");
+
+        if (this._resource.errors)
+            this._bubbleElement.addStyleClass("error");
     }
 }
 
-WebInspector.DOMStorageSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
+WebInspector.FrameResourceTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype;
 
-WebInspector.CookieSidebarTreeElement = function(cookieDomain)
+WebInspector.DatabaseTreeElement = function(storagePanel, database)
 {
-    WebInspector.SidebarTreeElement.call(this, "cookie-sidebar-tree-item", cookieDomain, "", null, false);
-    this._cookieDomain = cookieDomain;
-    this._subtitle = "";
-
-    this.refreshTitles();
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, database.name, "database-storage-tree-item", true);
+    this._database = database;
 }
 
-WebInspector.CookieSidebarTreeElement.prototype = {
+WebInspector.DatabaseTreeElement.prototype = {
     onselect: function()
     {
-        WebInspector.panels.storage.showCookies(this, this._cookieDomain);
+        this._storagePanel.showDatabase(this._database);
     },
 
-    get mainTitle()
+    oncollapse: function()
     {
-        return this._cookieDomain ? this._cookieDomain : WebInspector.UIString("Local Files");
+        // Request a refresh after every collapse so the next
+        // expand will have an updated table list.
+        this.shouldRefreshChildren = true;
     },
 
-    set mainTitle(x)
+    onpopulate: function()
     {
-        // Do nothing.
-    },
+        this.removeChildren();
+
+        function tableNamesCallback(tableNames)
+        {
+            var tableNamesLength = tableNames.length;
+            for (var i = 0; i < tableNamesLength; ++i)
+                this.appendChild(new WebInspector.DatabaseTableTreeElement(this._storagePanel, this._database, tableNames[i]));
+        }
+        this._database.getTableNames(tableNamesCallback.bind(this));
+    }
+
+}
+WebInspector.DatabaseTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype;
+
+WebInspector.DatabaseTableTreeElement = function(storagePanel, database, tableName)
+{
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, tableName, "database-storage-tree-item");
+    this._database = database;
+    this._tableName = tableName;
+}
 
-    get subtitle()
+WebInspector.DatabaseTableTreeElement.prototype = {
+    onselect: function()
     {
-        return this._subtitle;
-    },
+        this._storagePanel.showDatabase(this._database, this._tableName);
+    }
+}
+WebInspector.DatabaseTableTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype;
+
+WebInspector.DOMStorageTreeElement = function(storagePanel, domStorage, className)
+{
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, domStorage.domain ? domStorage.domain : WebInspector.UIString("Local Files"), "domstorage-storage-tree-item " + className);
+    this._domStorage = domStorage;
+}
 
-    set subtitle(x)
+WebInspector.DOMStorageTreeElement.prototype = {
+    onselect: function()
     {
-        this._subtitle = x;
-        this.refreshTitles();
+        this._storagePanel.showDOMStorage(this._domStorage);
     }
 }
+WebInspector.DOMStorageTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype;
 
-WebInspector.CookieSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
+WebInspector.CookieTreeElement = function(storagePanel, cookieDomain)
+{
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, cookieDomain ? cookieDomain : WebInspector.UIString("Local Files"), "cookie-storage-tree-item");
+    this._cookieDomain = cookieDomain;
+}
 
-WebInspector.ApplicationCacheSidebarTreeElement = function(appcacheDomain)
+WebInspector.CookieTreeElement.prototype = {
+    onselect: function()
+    {
+        this._storagePanel.showCookies(this, this._cookieDomain);
+    }
+}
+WebInspector.CookieTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype;
+
+WebInspector.ApplicationCacheTreeElement = function(storagePanel, appcacheDomain)
 {
-    WebInspector.SidebarTreeElement.call(this, "application-cache-sidebar-tree-item", appcacheDomain, "", null, false);
+    WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, appcacheDomain ? appcacheDomain : WebInspector.UIString("Local Files"), "application-cache-storage-tree-item");
     this._appcacheDomain = appcacheDomain;
-    this._subtitle = "";
-    this._mainTitle = this._appcacheDomain;
-    this.refreshTitles();
 }
 
-WebInspector.ApplicationCacheSidebarTreeElement.prototype = {
+WebInspector.ApplicationCacheTreeElement.prototype = {
     onselect: function()
     {
-        WebInspector.panels.storage.showApplicationCache(this, this._appcacheDomain);
-    },
+        this._storagePanel.showApplicationCache(this, this._appcacheDomain);
+    }
+}
+WebInspector.ApplicationCacheTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype;
 
-    get mainTitle()
-    {
-        return this._mainTitle;
-    },
+WebInspector.StorageCategoryView = function()
+{
+    WebInspector.View.call(this);
 
-    set mainTitle(x)
-    {
-        this._mainTitle = x;
-        this.refreshTitles();
-    },
+    this.element.addStyleClass("storage-view");
 
-    get subtitle()
-    {
-        return this._subtitle;
-    },
+    this._emptyMsgElement = document.createElement("div");
+    this._emptyMsgElement.className = "storage-empty-view";
+    this.element.appendChild(this._emptyMsgElement);
+}
 
-    set subtitle(x)
+WebInspector.StorageCategoryView.prototype = {
+    setText: function(text)
     {
-        this._subtitle = x;
-        this.refreshTitles();
+        this._emptyMsgElement.textContent = text;
     }
 }
 
-WebInspector.ApplicationCacheSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
+WebInspector.StorageCategoryView.prototype.__proto__ = WebInspector.View.prototype;
diff --git a/WebCore/inspector/front-end/StylesSidebarPane.js b/WebCore/inspector/front-end/StylesSidebarPane.js
index 36d854c..cc97520 100644
--- a/WebCore/inspector/front-end/StylesSidebarPane.js
+++ b/WebCore/inspector/front-end/StylesSidebarPane.js
@@ -60,7 +60,13 @@ WebInspector.StylesSidebarPane = function(computedStylePane)
 
     this.settingsSelectElement.addEventListener("click", function(event) { event.stopPropagation() }, false);
     this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false);
-    WebInspector.applicationSettings.addEventListener("loaded", this._settingsLoaded, this);
+    var format = WebInspector.applicationSettings.colorFormat;
+    if (format === "hex")
+        this.settingsSelectElement[0].selected = true;
+    else if (format === "rgb")
+        this.settingsSelectElement[1].selected = true;
+    else if (format === "hsl")
+        this.settingsSelectElement[2].selected = true;
 
     this.titleElement.appendChild(this.settingsSelectElement);
     this._computedStylePane = computedStylePane;
@@ -95,17 +101,6 @@ WebInspector.StylesSidebarPane.PseudoIdNames = [
 ];
 
 WebInspector.StylesSidebarPane.prototype = {
-    _settingsLoaded: function()
-    {
-        var format = WebInspector.applicationSettings.colorFormat;
-        if (format === "hex")
-            this.settingsSelectElement[0].selected = true;
-        if (format === "rgb")
-            this.settingsSelectElement[1].selected = true;
-        if (format === "hsl")
-            this.settingsSelectElement[2].selected = true;
-    },
-
     _contextMenuEventFired: function(event)
     {
         var href = event.target.enclosingNodeOrSelfWithClass("webkit-html-resource-link") || event.target.enclosingNodeOrSelfWithClass("webkit-html-external-link");
@@ -160,7 +155,7 @@ WebInspector.StylesSidebarPane.prototype = {
         if (refresh)
             WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this));
         else
-            WebInspector.cssModel.getStylesAsync(node.id, !WebInspector.applicationSettings.showUserAgentStyles, stylesCallback.bind(this));
+            WebInspector.cssModel.getStylesAsync(node.id, stylesCallback.bind(this));
     },
 
     _refreshUpdate: function(node, computedStyle, editedSection)
@@ -201,8 +196,8 @@ WebInspector.StylesSidebarPane.prototype = {
 
             // Add rules in reverse order to match the cascade order.
             for (var j = pseudoElementCSSRules.rules.length - 1; j >= 0; --j) {
-                var rule = WebInspector.CSSStyleDeclaration.parseRule(pseudoElementCSSRules.rules[j]);
-                styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule });
+                var rule = pseudoElementCSSRules.rules[j];
+                styleRules.push({ style: rule.style, selectorText: rule.selectorText, sourceURL: rule.sourceURL, rule: rule });
             }
             usedProperties = {};
             disabledComputedProperties = {};
@@ -213,7 +208,7 @@ WebInspector.StylesSidebarPane.prototype = {
 
     _refreshStyleRules: function(sections, computedStyle)
     {
-        var nodeComputedStyle = new WebInspector.CSSStyleDeclaration(computedStyle);
+        var nodeComputedStyle = computedStyle;
         var styleRules = [];
         for (var i = 0; sections && i < sections.length; ++i) {
             var section = sections[i];
@@ -229,7 +224,7 @@ WebInspector.StylesSidebarPane.prototype = {
 
     _rebuildStyleRules: function(node, styles)
     {
-        var nodeComputedStyle = new WebInspector.CSSStyleDeclaration(styles.computedStyle);
+        var nodeComputedStyle = styles.computedStyle;
         this.sections = {};
 
         var styleRules = [];
@@ -238,7 +233,7 @@ WebInspector.StylesSidebarPane.prototype = {
 
         var styleAttributes = {};
         for (var name in styles.styleAttributes) {
-            var attrStyle = { style: new WebInspector.CSSStyleDeclaration(styles.styleAttributes[name]), editable: false };
+            var attrStyle = { style: styles.styleAttributes[name], editable: false };
             attrStyle.selectorText = WebInspector.panels.elements.treeOutline.nodeNameToCorrectCase(node.nodeName) + "[" + name;
             if (node.getAttribute(name))
                 attrStyle.selectorText += "=" + node.getAttribute(name);
@@ -248,7 +243,7 @@ WebInspector.StylesSidebarPane.prototype = {
 
         // Show element's Style Attributes
         if (styles.inlineStyle && node.nodeType === Node.ELEMENT_NODE) {
-            var inlineStyle = { selectorText: "element.style", style: new WebInspector.CSSStyleDeclaration(styles.inlineStyle), isAttribute: true };
+            var inlineStyle = { selectorText: "element.style", style: styles.inlineStyle, isAttribute: true };
             styleRules.push(inlineStyle);
         }
 
@@ -256,12 +251,11 @@ WebInspector.StylesSidebarPane.prototype = {
         if (styles.matchedCSSRules.length)
             styleRules.push({ isStyleSeparator: true, text: WebInspector.UIString("Matched CSS Rules") });
         for (var i = styles.matchedCSSRules.length - 1; i >= 0; --i) {
-            var rule = WebInspector.CSSStyleDeclaration.parseRule(styles.matchedCSSRules[i]);
-            styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule });
+            var rule = styles.matchedCSSRules[i];
+            styleRules.push({ style: rule.style, selectorText: rule.selectorText, sourceURL: rule.sourceURL, rule: rule });
         }
 
         // Walk the node structure and identify styles with inherited properties.
-        var parentStyles = styles.parent;
         var parentNode = node.parentNode;
         function insertInheritedNodeSeparator(node)
         {
@@ -271,11 +265,12 @@ WebInspector.StylesSidebarPane.prototype = {
             styleRules.push(entry);
         }
 
-        while (parentStyles) {
+        for (var parentOrdinal = 0; parentOrdinal < styles.inherited.length; ++parentOrdinal) {
+            var parentStyles = styles.inherited[parentOrdinal];
             var separatorInserted = false;
             if (parentStyles.inlineStyle) {
                 if (this._containsInherited(parentStyles.inlineStyle)) {
-                    var inlineStyle = { selectorText: WebInspector.UIString("Style Attribute"), style: new WebInspector.CSSStyleDeclaration(parentStyles.inlineStyle), isAttribute: true, isInherited: true };
+                    var inlineStyle = { selectorText: WebInspector.UIString("Style Attribute"), style: parentStyles.inlineStyle, isAttribute: true, isInherited: true };
                     if (!separatorInserted) {
                         insertInheritedNodeSeparator(parentNode);
                         separatorInserted = true;
@@ -288,14 +283,13 @@ WebInspector.StylesSidebarPane.prototype = {
                 var rulePayload = parentStyles.matchedCSSRules[i];
                 if (!this._containsInherited(rulePayload.style))
                     continue;
-                var rule = WebInspector.CSSStyleDeclaration.parseRule(rulePayload);
+                var rule = rulePayload;
                 if (!separatorInserted) {
                     insertInheritedNodeSeparator(parentNode);
                     separatorInserted = true;
                 }
-                styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule, isInherited: true });
+                styleRules.push({ style: rule.style, selectorText: rule.selectorText, sourceURL: rule.sourceURL, rule: rule, isInherited: true });
             }
-            parentStyles = parentStyles.parent;
             parentNode = parentNode.parentNode;
         }
         return styleRules;
@@ -303,18 +297,6 @@ WebInspector.StylesSidebarPane.prototype = {
 
     _markUsedProperties: function(styleRules, usedProperties, disabledComputedProperties)
     {
-        function deleteDisabledProperty(style, name)
-        {
-            if (!style || !name)
-                return;
-            if (style.__disabledPropertyValues)
-                delete style.__disabledPropertyValues[name];
-            if (style.__disabledPropertyPriorities)
-                delete style.__disabledPropertyPriorities[name];
-            if (style.__disabledProperties)
-                delete style.__disabledProperties[name];
-        }
-
         var priorityUsed = false;
 
         // Walk the style rules and make a list of all used and overloaded properties.
@@ -328,10 +310,14 @@ WebInspector.StylesSidebarPane.prototype = {
             styleRule.usedProperties = {};
 
             var style = styleRule.style;
-            for (var j = 0; j < style.length; ++j) {
-                var name = style[j];
+            var allProperties = style.allProperties;
+            for (var j = 0; j < allProperties.length; ++j) {
+                var property = allProperties[j];
+                if (!property.isLive)
+                    continue;
+                var name = property.name;
 
-                if (!priorityUsed && style.getPropertyPriority(name).length)
+                if (!priorityUsed && property.priority.length)
                     priorityUsed = true;
 
                 // If the property name is already used by another rule then this rule's
@@ -350,22 +336,12 @@ WebInspector.StylesSidebarPane.prototype = {
                     styleRule.usedProperties["font-weight"] = true;
                     styleRule.usedProperties["line-height"] = true;
                 }
-
-                // Delete any disabled properties, since the property does exist.
-                // This prevents it from showing twice.
-                deleteDisabledProperty(style, name);
-                deleteDisabledProperty(style, style.getPropertyShorthand(name));
             }
 
             // Add all the properties found in this style to the used properties list.
             // Do this here so only future rules are affect by properties used in this rule.
             for (var name in styleRules[i].usedProperties)
                 usedProperties[name] = true;
-
-            // Remember all disabled properties so they show up in computed style.
-            if (style.__disabledProperties)
-                for (var name in style.__disabledProperties)
-                    disabledComputedProperties[name] = true;
         }
 
         if (priorityUsed) {
@@ -378,9 +354,13 @@ WebInspector.StylesSidebarPane.prototype = {
                     continue;
 
                 var style = styleRules[i].style;
-                for (var j = 0; j < style.length; ++j) {
-                    var name = style[j];
-                    if (style.getPropertyPriority(name).length) {
+                var allProperties = style.allProperties;
+                for (var j = 0; j < allProperties.length; ++j) {
+                    var property = allProperties[j];
+                    if (!property.isLive)
+                        continue;
+                    var name = property.name;
+                    if (property.priority.length) {
                         if (!(name in foundPriorityProperties))
                             styleRules[i].usedProperties[name] = true;
                         else
@@ -464,21 +444,13 @@ WebInspector.StylesSidebarPane.prototype = {
         return sections;
     },
 
-    _containsInherited: function(payload)
-    {
-        if (this._arrayContainsInheritedProperty(payload.properties))
-            return true;
-        if (payload.disabled && this._arrayContainsInheritedProperty(payload.disabled))
-            return true;
-        return false;
-    },
-
-    _arrayContainsInheritedProperty: function(properties)
+    _containsInherited: function(style)
     {
+        var properties = style.allProperties;
         for (var i = 0; i < properties.length; ++i) {
             var property = properties[i];
             // Does this style contain non-overridden inherited property?
-            if (property.name in WebInspector.StylesSidebarPane.InheritedProperties)
+            if (property.isLive && property.name in WebInspector.StylesSidebarPane.InheritedProperties)
                 return true;
         }
         return false;
@@ -590,16 +562,11 @@ WebInspector.ComputedStyleSidebarPane = function()
     var showInheritedCheckbox = new WebInspector.Checkbox(WebInspector.UIString("Show inherited"), "sidebar-pane-subtitle");
     this.titleElement.appendChild(showInheritedCheckbox.element);
 
-    function settingsLoaded()
-    {
-        if (WebInspector.applicationSettings.showInheritedComputedStyleProperties) {
-            this.bodyElement.addStyleClass("show-inherited");
-            showInheritedCheckbox.checked = true;
-        }
+    if (WebInspector.applicationSettings.showInheritedComputedStyleProperties) {
+        this.bodyElement.addStyleClass("show-inherited");
+        showInheritedCheckbox.checked = true;
     }
 
-    WebInspector.applicationSettings.addEventListener("loaded", settingsLoaded.bind(this));
-
     function showInheritedToggleFunction(event)
     {
         WebInspector.applicationSettings.showInheritedComputedStyleProperties = showInheritedCheckbox.checked;
@@ -661,16 +628,16 @@ WebInspector.StylePropertiesSection = function(styleRule, editable, isInherited,
     }
 
     var subtitle = "";
-    if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.href)
-        this.subtitleElement.appendChild(linkifyUncopyable(this.styleRule.parentStyleSheet.href, this.rule.sourceLine));
+    if (this.styleRule.sourceURL)
+        this.subtitleElement.appendChild(linkifyUncopyable(this.styleRule.sourceURL, this.rule.sourceLine));
     else if (isUserAgent)
         subtitle = WebInspector.UIString("user agent stylesheet");
     else if (isUser)
         subtitle = WebInspector.UIString("user stylesheet");
     else if (isViaInspector)
         subtitle = WebInspector.UIString("via inspector");
-    else if (this.rule && this.rule.documentURL)
-        this.subtitleElement.appendChild(linkifyUncopyable(this.rule.documentURL, this.rule.sourceLine));
+    else if (this.rule && this.rule.sourceURL)
+        this.subtitleElement.appendChild(linkifyUncopyable(this.rule.sourceURL, this.rule.sourceLine));
 
     if (isInherited)
         this.element.addStyleClass("show-inherited"); // This one is related to inherited rules, not compted style.
@@ -691,49 +658,42 @@ WebInspector.StylePropertiesSection.prototype = {
         // Overriding with empty body.
     },
 
-    isPropertyInherited: function(property)
+    isPropertyInherited: function(propertyName)
     {
         if (this.isInherited) {
             // While rendering inherited stylesheet, reverse meaning of this property.
             // Render truly inherited properties with black, i.e. return them as non-inherited.
-            return !(property in WebInspector.StylesSidebarPane.InheritedProperties);
+            return !(propertyName in WebInspector.StylesSidebarPane.InheritedProperties);
         }
         return false;
     },
 
-    isPropertyOverloaded: function(property, shorthand)
+    isPropertyOverloaded: function(propertyName, shorthand)
     {
         if (!this._usedProperties || this.noAffect)
             return false;
 
-        if (this.isInherited && !(property in WebInspector.StylesSidebarPane.InheritedProperties)) {
+        if (this.isInherited && !(propertyName in WebInspector.StylesSidebarPane.InheritedProperties)) {
             // In the inherited sections, only show overrides for the potentially inherited properties.
             return false;
         }
 
-        var used = (property in this._usedProperties);
+        var used = (propertyName in this._usedProperties);
         if (used || !shorthand)
             return !used;
 
         // Find out if any of the individual longhand properties of the shorthand
         // are used, if none are then the shorthand is overloaded too.
-        var longhandProperties = this.styleRule.style.getLonghandProperties(property);
+        var longhandProperties = this.styleRule.style.getLonghandProperties(propertyName);
         for (var j = 0; j < longhandProperties.length; ++j) {
             var individualProperty = longhandProperties[j];
-            if (individualProperty in this._usedProperties)
+            if (individualProperty.name in this._usedProperties)
                 return false;
         }
 
         return true;
     },
 
-    isPropertyDisabled: function(property)
-    {
-        if (!this.styleRule.style.__disabledPropertyValues)
-            return false;
-        return property in this.styleRule.style.__disabledPropertyValues;
-    },
-
     update: function(full)
     {
         if (full) {
@@ -759,39 +719,56 @@ WebInspector.StylePropertiesSection.prototype = {
 
     onpopulate: function()
     {
+        function sorter(a, b)
+        {
+            return a.name.localeCompare(b.name);
+        }
+
         var style = this.styleRule.style;
 
-        var foundShorthands = {};
-        var disabledProperties = style.__disabledPropertyValues || {};
+        var handledProperties = {};
+        var shorthandNames = {};
 
         this.uniqueProperties = [];
-        for (var i = 0; i < style.length; ++i)
-            this.uniqueProperties.push(style[i]);
+        var allProperties = style.allProperties;
+        for (var i = 0; i < allProperties.length; ++i)
+            this.uniqueProperties.push(allProperties[i]);
 
-        for (var name in disabledProperties)
-            this.uniqueProperties.push(name);
+        this.uniqueProperties.sort(sorter);
 
-        this.uniqueProperties.sort();
+        // Collect all shorthand names.
+        for (var i = 0; i < this.uniqueProperties.length; ++i) {
+            var property = this.uniqueProperties[i];
+            if (property.disabled)
+                continue;
+            if (property.shorthand)
+                shorthandNames[property.shorthand] = true;
+        }
 
         for (var i = 0; i < this.uniqueProperties.length; ++i) {
-            var name = this.uniqueProperties[i];
-            var disabled = name in disabledProperties;
-            var shorthand = !disabled ? style.getPropertyShorthand(name) : null;
+            var property = this.uniqueProperties[i];
+            var disabled = property.disabled;
+            if (!disabled && this.disabledComputedProperties && !(property.name in this.usedProperties) && property.name in this.disabledComputedProperties)
+                disabled = true;
 
-            if (shorthand && shorthand in foundShorthands)
+            var shorthand = !disabled ? property.shorthand : null;
+
+            if (shorthand && shorthand in handledProperties)
                 continue;
 
             if (shorthand) {
-                foundShorthands[shorthand] = true;
-                name = shorthand;
+                property = style.getLiveProperty(shorthand);
+                if (!property)
+                    property = new WebInspector.CSSProperty(style, style.allProperties.length, shorthand, style.getShorthandValue(shorthand), style.getShorthandPriority(shorthand), "style", true, true, "");
             }
 
-            var isShorthand = (shorthand ? true : false);
-            var inherited = this.isPropertyInherited(name);
-            var overloaded = this.isPropertyOverloaded(name, isShorthand);
+            var isShorthand = !!(property.isLive && (shorthand || shorthandNames[property.name]));
+            var inherited = this.isPropertyInherited(property.name);
+            var overloaded = this.isPropertyOverloaded(property.name, isShorthand);
 
-            var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, name, isShorthand, inherited, overloaded, disabled);
+            var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, property, isShorthand, inherited, overloaded);
             this.propertiesTreeOutline.appendChild(item);
+            handledProperties[property.name] = property;
         }
     },
 
@@ -808,7 +785,9 @@ WebInspector.StylePropertiesSection.prototype = {
 
     addNewBlankProperty: function()
     {
-        var item = new WebInspector.StylePropertyTreeElement(this.styleRule, this.styleRule.style, "", false, false, false, false);
+        var style = this.styleRule.style;
+        var property = new WebInspector.CSSProperty(style, style.allProperties.length, "", "", "", "style", true, false, false, undefined);
+        var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, property, false, false, false);
         this.propertiesTreeOutline.appendChild(item);
         item.listItemElement.textContent = "";
         item._newProperty = true;
@@ -894,7 +873,7 @@ WebInspector.StylePropertiesSection.prototype = {
             }
 
             self.rule = newRule;
-            self.styleRule = { section: self, style: newRule.style, selectorText: newRule.selectorText, parentStyleSheet: newRule.parentStyleSheet, rule: newRule };
+            self.styleRule = { section: self, style: newRule.style, selectorText: newRule.selectorText, sourceURL: newRule.sourceURL, rule: newRule };
 
             var oldIdentifier = this.identifier;
             self.identifier = newRule.selectorText + ":" + self.subtitleElement.textContent;
@@ -937,9 +916,9 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
         // Overriding with empty body.
     },
 
-    _isPropertyInherited: function(property)
+    _isPropertyInherited: function(propertyName)
     {
-        return !(property in this._usedProperties) && !(property in this._alwaysShowComputedProperties) && !(property in this._disabledComputedProperties);
+        return !(propertyName in this._usedProperties) && !(propertyName in this._alwaysShowComputedProperties) && !(propertyName in this._disabledComputedProperties);
     },
 
     update: function()
@@ -956,19 +935,25 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
 
     onpopulate: function()
     {
+        function sorter(a, b)
+        {
+            return a.name.localeCompare(b.name);
+        }
+
         var style = this.styleRule.style;
         var uniqueProperties = [];
-        for (var i = 0; i < style.length; ++i)
-            uniqueProperties.push(style[i]);
-        uniqueProperties.sort();
+        var allProperties = style.allProperties;
+        for (var i = 0; i < allProperties.length; ++i)
+            uniqueProperties.push(allProperties[i]);
+        uniqueProperties.sort(sorter);
 
         this._propertyTreeElements = {};
         for (var i = 0; i < uniqueProperties.length; ++i) {
-            var name = uniqueProperties[i];
-            var inherited = this._isPropertyInherited(name);
-            var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, name, false, inherited, false, false);
+            var property = uniqueProperties[i];
+            var inherited = this._isPropertyInherited(property.name);
+            var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, property, false, inherited, false);
             this.propertiesTreeOutline.appendChild(item);
-            this._propertyTreeElements[name] = item;
+            this._propertyTreeElements[property.name] = item;
         }
     },
 
@@ -980,21 +965,21 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
                 continue;
 
             for (var j = 0; j < section.uniqueProperties.length; ++j) {
-                var name = section.uniqueProperties[j];
-                if (section.isPropertyDisabled(name))
+                var property = section.uniqueProperties[j];
+                if (property.disabled)
                     continue;
-                if (section.isInherited && !(name in WebInspector.StylesSidebarPane.InheritedProperties))
+                if (section.isInherited && !(property.name in WebInspector.StylesSidebarPane.InheritedProperties))
                     continue;
 
-                var treeElement = this._propertyTreeElements[name];
+                var treeElement = this._propertyTreeElements[property.name];
                 if (treeElement) {
                     var selectorText = section.styleRule.selectorText;
-                    var value = section.styleRule.style.getPropertyValue(name);
+                    var value = property.value;
                     var title = "<span style='color: gray'>" + selectorText + "</span> - " + value;
                     var subtitle = " <span style='float:right'>" + section.subtitleElement.innerHTML + "</span>";
                     var childElement = new TreeElement(title + subtitle, null, false);
                     treeElement.appendChild(childElement);
-                    if (section.isPropertyOverloaded(name))
+                    if (section.isPropertyOverloaded(property.name))
                         childElement.listItemElement.addStyleClass("overloaded");
                 }
             }
@@ -1060,15 +1045,14 @@ WebInspector.BlankStylePropertiesSection.prototype = {
 
 WebInspector.BlankStylePropertiesSection.prototype.__proto__ = WebInspector.StylePropertiesSection.prototype;
 
-WebInspector.StylePropertyTreeElement = function(styleRule, style, name, shorthand, inherited, overloaded, disabled)
+WebInspector.StylePropertyTreeElement = function(styleRule, style, property, shorthand, inherited, overloaded)
 {
     this._styleRule = styleRule;
     this.style = style;
-    this.name = name;
+    this.property = property;
     this.shorthand = shorthand;
     this._inherited = inherited;
     this._overloaded = overloaded;
-    this._disabled = disabled;
 
     // Pass an empty title, the title gets made later in onattach.
     TreeElement.call(this, "", null, shorthand);
@@ -1103,29 +1087,31 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
     get disabled()
     {
-        return this._disabled;
+        return this.property.disabled;
     },
 
-    set disabled(x)
+    get name()
     {
-        if (x === this._disabled)
-            return;
-        this._disabled = x;
-        this.updateState();
+        return this.property.name;
     },
 
     get priority()
     {
-        if (this.disabled && this.style.__disabledPropertyPriorities && this.name in this.style.__disabledPropertyPriorities)
-            return this.style.__disabledPropertyPriorities[this.name];
-        return (this.shorthand ? this.style.getShorthandPriority(this.name) : this.style.getPropertyPriority(this.name));
+        if (this.disabled)
+            return this.property.priority;
+        return (this.shorthand ? this.style.getShorthandPriority(this.name) : this.property.priority);
     },
 
     get value()
     {
-        if (this.disabled && this.style.__disabledPropertyValues && this.name in this.style.__disabledPropertyValues)
-            return this.style.__disabledPropertyValues[this.name];
-        return (this.shorthand ? this.style.getShorthandValue(this.name) : this.style.getPropertyValue(this.name));
+        if (this.disabled)
+            return this.property.value;
+        return (this.shorthand ? this.style.getShorthandValue(this.name) : this.property.value);
+    },
+
+    get parsedOk()
+    {
+        return this.property.parsedOk;
     },
 
     onattach: function()
@@ -1145,11 +1131,14 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         this.updateState();
 
-        var enabledCheckboxElement = document.createElement("input");
-        enabledCheckboxElement.className = "enabled-button";
-        enabledCheckboxElement.type = "checkbox";
-        enabledCheckboxElement.checked = !this.disabled;
-        enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bind(this), false);
+        var enabledCheckboxElement;
+        if (this.parsedOk) {
+            enabledCheckboxElement = document.createElement("input");
+            enabledCheckboxElement.className = "enabled-button";
+            enabledCheckboxElement.type = "checkbox";
+            enabledCheckboxElement.checked = !this.disabled;
+            enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bind(this), false);
+        }
 
         var nameElement = document.createElement("span");
         nameElement.className = "webkit-css-property";
@@ -1186,7 +1175,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
             {
                 var container = document.createDocumentFragment();
                 container.appendChild(document.createTextNode("url("));
-                container.appendChild(WebInspector.linkifyURLAsNode(url, url, null, (url in WebInspector.resourceURLMap)));
+                var hasResource = !!WebInspector.resourceForURL(url);
+                container.appendChild(WebInspector.linkifyURLAsNode(url, url, null, hasResource));
                 container.appendChild(document.createTextNode(")"));
                 return container;
             }
@@ -1297,7 +1287,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
             return;
 
         // Append the checkbox for root elements of an editable section.
-        if (this.treeOutline.section && this.treeOutline.section.editable && this.parent.root)
+        if (enabledCheckboxElement && this.treeOutline.section && this.treeOutline.section.editable && this.parent.root)
             this.listItemElement.appendChild(enabledCheckboxElement);
         this.listItemElement.appendChild(nameElement);
         this.listItemElement.appendChild(document.createTextNode(": "));
@@ -1310,7 +1300,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         this.listItemElement.appendChild(document.createTextNode(";"));
 
-        this.tooltip = this.name + ": " + valueElement.textContent + (priority ? " " + priority : "");
+        this.tooltip = this.property.propertyText;
     },
 
     updateAll: function(updateAllRules)
@@ -1322,33 +1312,28 @@ WebInspector.StylePropertyTreeElement.prototype = {
         else if (this.treeOutline.section)
             this.treeOutline.section.update(true);
         else
-            this.updateTitle(); // FIXME: this will not show new properties. But we don't hit his case yet.
+            this.updateTitle(); // FIXME: this will not show new properties. But we don't hit this case yet.
     },
 
     toggleEnabled: function(event)
     {
         var disabled = !event.target.checked;
 
-        var self = this;
         function callback(newStyle)
         {
             if (!newStyle)
                 return;
 
-            self.style = newStyle;
-            self._styleRule.style = self.style;
-
-            // Set the disabled property here, since the code above replies on it not changing
-            // until after the value and priority are retrieved.
-            self.disabled = disabled;
+            this.style = newStyle;
+            this._styleRule.style = newStyle;
 
-            if (self.treeOutline.section && self.treeOutline.section.pane)
-                self.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
+            if (this.treeOutline.section && this.treeOutline.section.pane)
+                this.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
 
-            self.updateAll(true);
+            this.updateAll(true);
         }
 
-        WebInspector.cssModel.toggleStyleEnabled(this.style.id, this.name, disabled, callback);
+        this.property.setDisabled(disabled, callback.bind(this));
     },
 
     updateState: function()
@@ -1385,14 +1370,16 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         var longhandProperties = this.style.getLonghandProperties(this.name);
         for (var i = 0; i < longhandProperties.length; ++i) {
-            var name = longhandProperties[i];
+            var name = longhandProperties[i].name;
+
 
             if (this.treeOutline.section) {
                 var inherited = this.treeOutline.section.isPropertyInherited(name);
                 var overloaded = this.treeOutline.section.isPropertyOverloaded(name);
             }
 
-            var item = new WebInspector.StylePropertyTreeElement(this._styleRule, this.style, name, false, inherited, overloaded);
+            var liveProperty = this.style.getLiveProperty(name);
+            var item = new WebInspector.StylePropertyTreeElement(this._styleRule, this.style, liveProperty, false, inherited, overloaded);
             this.appendChild(item);
         }
     },
@@ -1680,39 +1667,37 @@ WebInspector.StylePropertyTreeElement.prototype = {
             }
         }
 
-        var self = this;
-
-        function failureCallback()
+        function callback(newStyle)
         {
-            // The user typed something, but it didn't parse. Just abort and restore
-            // the original title for this property.  If this was a new attribute and
-            // we couldn't parse, then just remove it.
-            if (self._newProperty) {
-                self.parent.removeChild(self);
+            if (!newStyle) {
+                // The user typed something, but it didn't parse. Just abort and restore
+                // the original title for this property.  If this was a new attribute and
+                // we couldn't parse, then just remove it.
+                if (this._newProperty) {
+                    this.parent.removeChild(this);
+                    return;
+                }
+                if (updateInterface)
+                    this.updateTitle();
                 return;
             }
-            if (updateInterface)
-                self.updateTitle();
-        }
 
-        function successCallback(newStyle)
-        {
             if (!styleTextLength) {
                 // Do remove ourselves from UI when the property removal is confirmed.
-                self.parent.removeChild(self);
+                this.parent.removeChild(this);
             } else {
-                self.style = newStyle;
-                self._styleRule.style = self.style;
+                this.style = newStyle;
+                this._styleRule.style = this.style;
             }
 
             if (section && section.pane)
                 section.pane.dispatchEventToListeners("style edited");
 
             if (updateInterface)
-                self.updateAll(true);
+                this.updateAll(true);
         }
 
-        WebInspector.cssModel.applyStyleText(this.style.id, styleText, this.name, successCallback, failureCallback);
+        this.property.setText(styleText, callback.bind(this));
     }
 }
 
diff --git a/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js b/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js
index 28dad23..11b0e03 100644
--- a/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js
+++ b/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js
@@ -31,11 +31,11 @@
 WebInspector.WatchExpressionsSidebarPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Watch Expressions"));
-    WebInspector.applicationSettings.addEventListener("loaded", this._settingsLoaded, this);
+    this.reset();
 }
 
 WebInspector.WatchExpressionsSidebarPane.prototype = {
-    _settingsLoaded: function()
+    reset: function()
     {
         this.bodyElement.removeChildren();
 
diff --git a/WebCore/inspector/front-end/WebKit.qrc b/WebCore/inspector/front-end/WebKit.qrc
index 1e5a508..481f8b3 100644
--- a/WebCore/inspector/front-end/WebKit.qrc
+++ b/WebCore/inspector/front-end/WebKit.qrc
@@ -158,6 +158,7 @@
     <file>Images/excludeButtonGlyph.png</file>
     <file>Images/focusButtonGlyph.png</file>
     <file>Images/forward.png</file>
+    <file>Images/frame.png</file>
     <file>Images/gearButtonGlyph.png</file>
     <file>Images/glossyHeader.png</file>
     <file>Images/glossyHeaderPressed.png</file>
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index 0662954..429e749 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -715,11 +715,6 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     content: url(Images/treeDownTriangleBlack.png);
 }
 
-.console-message.repeated-message > ol.stack-trace {
-    margin-top: -14px;
-    margin-left: 18px;
-}
-
 .console-group-messages .section .header .title {
     color: black;
     font-weight: normal;
@@ -903,6 +898,29 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     top: 20px;
 }
 
+.resource-view .resource-view-cookies {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    overflow: auto;
+    padding: 12px;
+}
+
+.resource-view.headers-visible .resource-view-cookies {
+    top: 20px;
+}
+
+.resource-view-cookies.table .data-grid {
+    height: 100%;
+}
+
+.resource-view-cookies .data-grid .row-group {
+    font-weight: bold;
+    font-size: 11px;
+}
+
 .webkit-line-gutter-backdrop {
     /* Keep this in sync with view-source.css (.webkit-line-gutter-backdrop) */
     width: 31px;
@@ -1190,7 +1208,6 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     margin-left: -12px;
 }
 
-.stack-trace li.parent::before,
 .outline-disclosure li.parent::before {
     content: url(Images/treeRightTriangleBlack.png);
     float: left;
@@ -1200,32 +1217,26 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     padding-right: 2px;
 }
 
-.stack-trace li.parent::before,
 .outline-disclosure li.parent::before {
     content: url(Images/treeRightTriangleBlack.png);
 }
 
-.stack-trace ol:focus li.parent.selected::before,
 .outline-disclosure ol:focus li.parent.selected::before {
     content: url(Images/treeRightTriangleWhite.png);
 }
 
-.stack-trace li.parent.expanded::before,
 .outline-disclosure li.parent.expanded::before {
     content: url(Images/treeDownTriangleBlack.png);
 }
 
-.stack-trace ol:focus li.parent.expanded.selected::before,
 .outline-disclosure ol:focus li.parent.expanded.selected::before {
     content: url(Images/treeDownTriangleWhite.png);
 }
 
-.stack-trace ol.children,
 .outline-disclosure ol.children {
     display: none;
 }
 
-.stack-trace ol.children.expanded,
 .outline-disclosure ol.children.expanded {
     display: block;
 }
@@ -1430,21 +1441,17 @@ body.inactive .placard.selected {
     padding-bottom: 3px;
 }
 
-.properties-tree ol, .stack-trace ol, ol.stack-trace {
+.properties-tree ol {
     display: none;
     margin: 0;
     -webkit-padding-start: 12px;
     list-style: none;
 }
 
-.properties-tree ol.expanded, .stack-trace ol, ol.stack-trace {
+.properties-tree ol.expanded {
     display: block;
 }
 
-ol.stack-trace {
-    -webkit-padding-start: 0px;
-}
-
 .event-listener-breakpoints .event-category {
     font-size: 12px;
     font-weight: bold;
@@ -1897,27 +1904,31 @@ body.inactive .sidebar {
     background-color: rgb(232, 232, 232);
 }
 
-.database-sidebar-tree-item .icon {
+.frame-storage-tree-item .icon {
+    content: url(Images/frame.png);
+}
+
+.database-storage-tree-item .icon {
     content: url(Images/database.png);
 }
 
-.database-table-sidebar-tree-item .icon {
+.database-table-storage-tree-item .icon {
     content: url(Images/databaseTable.png);
 }
 
-.domstorage-sidebar-tree-item.local-storage .icon {
+.domstorage-storage-tree-item.local-storage .icon {
     content: url(Images/localStorage.png);
 }
 
-.domstorage-sidebar-tree-item.session-storage .icon {
+.domstorage-storage-tree-item.session-storage .icon {
     content: url(Images/sessionStorage.png);
 }
 
-.cookie-sidebar-tree-item .icon {
+.cookie-storage-tree-item .icon {
     content: url(Images/cookie.png);
 }
 
-.application-cache-sidebar-tree-item .icon {
+.application-cache-storage-tree-item .icon {
     content: url(Images/applicationCache.png);
 }
 
@@ -1929,6 +1940,72 @@ body.inactive .sidebar {
     bottom: 0;
 }
 
+.storage.panel .sidebar {
+    padding-left: 0;
+    z-index: 10;
+}
+
+.storage.panel .sidebar li {
+    height: 17px;
+    white-space: nowrap;
+    text-indent: 0;
+    margin-left: -2px;
+}
+
+.storage.panel .sidebar li.parent {
+    text-indent: 0;
+    margin-left: -12px;
+}
+
+.storage.panel .sidebar li.selected {
+    color: white;
+    text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
+    font-weight: bold;
+}
+
+.storage.panel .sidebar li .selection {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
+    border-top: 1px solid #979797;
+    height: 17px;
+}
+
+.storage.panel .sidebar :focus li .selection {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
+    border-top: 1px solid rgb(68, 128, 200);
+}
+
+body.inactive .storage.panel .sidebar li .selection {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
+    border-top: 1px solid rgb(151, 151, 151);
+}
+
+.storage.panel .sidebar .icon {
+    width: 16px;
+    height: 16px;
+    float: left;
+}
+
+.storage.panel .base-storage-tree-element-title {
+    overflow: hidden;
+    position: relative;
+    text-overflow: ellipsis;
+    padding-left: 2px;
+    top: 1px;
+}
+
+.storage.panel .status {
+    float: right;
+    height: 16px;
+    margin-top: 1px;
+    margin-left: 4px;
+    line-height: 1em;
+}
+
+.storage.panel li .status .bubble {
+    height: 13px;
+    padding-top: 0;
+}
+
 .storage-view {
     display: none;
     overflow: hidden;
@@ -1952,7 +2029,7 @@ body.inactive .sidebar {
     height: 100%;
 }
 
-.storage-view.table .storage-table-empty, .storage-view.table .storage-table-error {
+.storage-empty-view, .storage-view.table .storage-table-error {
     position: absolute;
     top: 0;
     bottom: 25%;
@@ -3167,7 +3244,7 @@ body.inactive .sidebar-tree-item .disclosure-button:active {
     margin-right: 3px;
 }
 
-.sidebar-tree-item .status {
+li .status {
     float: right;
     height: 16px;
     margin-top: 9px;
@@ -3175,11 +3252,11 @@ body.inactive .sidebar-tree-item .disclosure-button:active {
     line-height: 1em;
 }
 
-.sidebar-tree-item .status:empty {
+li .status:empty {
     display: none;
 }
 
-.sidebar-tree-item .status .bubble {
+li .status .bubble {
     display: inline-block;
     height: 14px;
     min-width: 16px;
@@ -3198,20 +3275,20 @@ body.inactive .sidebar-tree-item .disclosure-button:active {
     -webkit-border-radius: 7px;
 }
 
-.sidebar-tree-item .status .bubble:empty {
+li .status .bubble:empty {
     display: none;
 }
 
-.sidebar-tree-item.selected .status .bubble {
+li.selected .status .bubble {
     background-color: white !important;
     color: rgb(132, 154, 190) !important;
 }
 
-:focus .sidebar-tree-item.selected .status .bubble {
+:focus li.selected .status .bubble {
     color: rgb(36, 98, 172) !important;
 }
 
-body.inactive .sidebar-tree-item.selected .status .bubble {
+body.inactive li.selected .status .bubble {
     color: rgb(159, 159, 159) !important;
 }
 
@@ -3362,7 +3439,7 @@ body.inactive .sidebar-tree-item.selected {
     content: "";
 }
 
-.resource-sidebar-tree-item.resources-category-images .image-resource-icon-preview {
+.resources-category-images .image-resource-icon-preview {
     position: absolute;
     margin: auto;
     top: 3px;
@@ -3380,7 +3457,7 @@ body.inactive .sidebar-tree-item.selected {
     content: "";
 }
 
-.children.small .resource-sidebar-tree-item.resources-category-images .image-resource-icon-preview {
+.children.small .resources-category-images .image-resource-icon-preview {
     top: 2px;
     bottom: 1px;
     left: 3px;
@@ -3432,15 +3509,15 @@ body.inactive .sidebar-tree-item.selected {
     padding-left: 13px !important;
 }
 
-.sidebar-tree-item.selected .bubble.search-matches {
+li.selected .bubble.search-matches {
     background-image: url(Images/searchSmallBlue.png);
 }
 
-:focus .sidebar-tree-item.selected .bubble.search-matches {
+:focus li.selected .bubble.search-matches {
     background-image: url(Images/searchSmallBrightBlue.png);
 }
 
-body.inactive .sidebar-tree-item.selected .bubble.search-matches {
+body.inactive li.selected .bubble.search-matches {
     background-image: url(Images/searchSmallGray.png);
 }
 
diff --git a/WebCore/inspector/front-end/inspector.js b/WebCore/inspector/front-end/inspector.js
index 9bd88d6..f5a70c8 100644
--- a/WebCore/inspector/front-end/inspector.js
+++ b/WebCore/inspector/front-end/inspector.js
@@ -50,7 +50,6 @@
 
 var WebInspector = {
     resources: {},
-    resourceURLMap: {},
     cookieDomains: {},
     applicationCacheDomains: {},
     missingLocalizedStrings: {},
@@ -182,7 +181,7 @@ var WebInspector = {
 
         for (var panelName in WebInspector.panels) {
             if (WebInspector.panels[panelName] === x) {
-                InspectorBackend.storeLastActivePanel(panelName);
+                WebInspector.applicationSettings.lastActivePanel = panelName;
                 this._panelHistory.setPanel(panelName);
             }
         }
@@ -226,10 +225,17 @@ var WebInspector = {
         var hiddenPanels = (InspectorFrontendHost.hiddenPanels() || "").split(',');
         if (hiddenPanels.indexOf("elements") === -1)
             this.panels.elements = new WebInspector.ElementsPanel();
+
+        if (Preferences.networkPanelEnabled) {
+            if (hiddenPanels.indexOf("storage") === -1 && hiddenPanels.indexOf("databases") === -1)
+                this.panels.storage = new WebInspector.StoragePanel();
+            if (hiddenPanels.indexOf("network") === -1)
+                this.panels.network = new WebInspector.NetworkPanel();
+        } else if (hiddenPanels.indexOf("resources") === -1)
+            this.panels.resources = new WebInspector.ResourcesPanel();
+
         if (Preferences.networkPanelEnabled && hiddenPanels.indexOf("network") === -1)
             this.panels.network = new WebInspector.NetworkPanel();
-        if (hiddenPanels.indexOf("resources") === -1)
-            this.panels.resources = new WebInspector.ResourcesPanel();
         if (hiddenPanels.indexOf("scripts") === -1)
             this.panels.scripts = new WebInspector.ScriptsPanel();
         if (hiddenPanels.indexOf("timeline") === -1)
@@ -240,8 +246,12 @@ var WebInspector = {
             if (Preferences.heapProfilerPresent)
                 this.panels.profiles.registerProfileType(new WebInspector.HeapSnapshotProfileType());
         }
-        if (hiddenPanels.indexOf("storage") === -1 && hiddenPanels.indexOf("databases") === -1)
-            this.panels.storage = new WebInspector.StoragePanel();
+
+        if (!Preferences.networkPanelEnabled) {
+            if (hiddenPanels.indexOf("storage") === -1 && hiddenPanels.indexOf("databases") === -1)
+                this.panels.storage = new WebInspector.StoragePanel();
+        }
+
         if (hiddenPanels.indexOf("audits") === -1)
             this.panels.audits = new WebInspector.AuditsPanel();
         if (hiddenPanels.indexOf("console") === -1)
@@ -441,6 +451,33 @@ var WebInspector = {
     {
         this.currentPanel = this.panels.elements;
         this.panels.elements.updateFocusedNode(nodeId);
+    },
+
+    get networkResources()
+    {
+        if (Preferences.networkPanelEnabled)
+            return this.panels.network.resources;
+        else
+            return this.resources;
+    },
+
+    forAllResources: function(callback)
+    {
+        if (Preferences.networkPanelEnabled)
+            WebInspector.resourceManager.forAllResources(callback);
+        else {
+            for (var id in this.resources) {
+                if (callback(this.resources[id]))
+                    return;
+            }
+        }
+    },
+
+    resourceForURL: function(url)
+    {
+        if (Preferences.networkPanelEnabled)
+            return this.resourceManager.resourceForURL(url);
+        return this.panels.resources.resourceURLMap[url];
     }
 }
 
@@ -493,8 +530,8 @@ WebInspector.doLoadedDone = function()
     document.body.addStyleClass("port-" + port);
 
     InspectorFrontendHost.loaded();
-    WebInspector.Settings.initialize();
-    
+    WebInspector.applicationSettings = new WebInspector.Settings();
+
     this._registerShortcuts();
 
     // set order of some sections explicitly
@@ -507,8 +544,8 @@ WebInspector.doLoadedDone = function()
     // this.changes = new WebInspector.ChangesView(this.drawer);
     // TODO: Remove class="hidden" from inspector.html on button#changes-status-bar-item
     this.drawer.visibleView = this.console;
-    // FIXME: uncomment when ready.
-    // this.resourceManager = new WebInspector.ResourceManager();
+    if (Preferences.networkPanelEnabled)
+        this.resourceManager = new WebInspector.ResourceManager();
     this.domAgent = new WebInspector.DOMAgent();
 
     this.resourceCategories = {
@@ -536,6 +573,11 @@ WebInspector.doLoadedDone = function()
     for (var panelName in this.panels)
         previousToolbarItem = WebInspector.addPanelToolbarIcon(toolbarElement, this.panels[panelName], previousToolbarItem);
 
+    if (Preferences.networkPanelEnabled) {
+        this.panels.storage._toolbarItem.removeStyleClass("storage");
+        this.panels.storage._toolbarItem.addStyleClass("resources");
+    }
+
     this.Tips = {
         ResourceNotCompressed: {id: 0, message: WebInspector.UIString("You could save bandwidth by having your web server compress this transfer with gzip or zlib.")}
     };
@@ -588,14 +630,22 @@ WebInspector.doLoadedDone = function()
         WebInspector.monitoringXHREnabled = inspectorState.monitoringXHREnabled;
         if ("pauseOnExceptionsState" in inspectorState)
             WebInspector.panels.scripts.updatePauseOnExceptionsState(inspectorState.pauseOnExceptionsState);
-        if (inspectorState.resourceTrackingEnabled)
-            WebInspector.panels.resources.resourceTrackingWasEnabled();
-        else
-            WebInspector.panels.resources.resourceTrackingWasDisabled();
+        if (WebInspector.panels.resources) {
+            if (inspectorState.resourceTrackingEnabled)
+                WebInspector.panels.resources.resourceTrackingWasEnabled();
+            else
+                WebInspector.panels.resources.resourceTrackingWasDisabled();
+        }
     }
     InspectorBackend.getInspectorState(populateInspectorState);
 
-    InspectorBackend.populateScriptObjects();
+    function onPopulateScriptObjects()
+    {
+        if (!WebInspector.currentPanel)
+            WebInspector.showPanel(WebInspector.applicationSettings.lastActivePanel);
+    }
+    InspectorBackend.populateScriptObjects(onPopulateScriptObjects);
+
     InspectorBackend.setConsoleMessagesEnabled(true);
 
     // As a DOMAgent method, this needs to happen after the frontend has loaded and the agent is available.
@@ -768,7 +818,7 @@ WebInspector.documentClick = function(event)
             if (parsedURL.host === "show-panel") {
                 var panel = parsedURL.path.substring(1);
                 if (WebInspector.panels[panel])
-                    WebInspector.currentPanel = WebInspector.panels[panel];
+                    WebInspector.showPanel(panel);
             }
             return;
         }
@@ -794,8 +844,13 @@ WebInspector.openResource = function(resourceURL, inResourcesPanel)
 {
     var resource = WebInspector.resourceForURL(resourceURL);
     if (inResourcesPanel && resource) {
-        WebInspector.panels.resources.showResource(resource);
-        WebInspector.showPanel("resources");
+        if (Preferences.networkPanelEnabled) {
+            WebInspector.panels.storage.showResource(resource);
+            WebInspector.showPanel("storage");
+        } else {
+            WebInspector.panels.resources.showResource(resource);
+            WebInspector.showPanel("resources");
+        }
     } else
         InspectorBackend.openInInspectedWindow(resource ? resource.url : resourceURL);
 }
@@ -1214,12 +1269,14 @@ WebInspector.selectDOMStorage = function(o)
 
 WebInspector.updateResource = function(payload)
 {
+    if (Preferences.networkPanelEnabled)
+        return;
+
     var identifier = payload.id;
     var resource = this.resources[identifier];
     if (!resource) {
         resource = new WebInspector.Resource(identifier, payload.url);
         this.resources[identifier] = resource;
-        this.resourceURLMap[resource.url] = resource;
         this.panels.resources.addResource(resource);
         this.panels.audits.resourceStarted(resource);
     }
@@ -1267,6 +1324,7 @@ WebInspector.updateResource = function(payload)
 
     if (payload.didCompletionChange) {
         resource.failed = payload.failed;
+        resource.localizedFailDescription = payload.localizedFailDescription;
         resource.finished = payload.finished;
         if (this.panels.audits)
             this.panels.audits.resourceFinished(resource);
@@ -1286,28 +1344,33 @@ WebInspector.updateResource = function(payload)
 
 WebInspector.domContentEventFired = function(time)
 {
-    this.panels.resources.mainResourceDOMContentTime = time;
+    if (this.panels.resources)
+        this.panels.resources.mainResourceDOMContentTime = time;
     this.panels.audits.mainResourceDOMContentTime = time;
     if (this.panels.network)
         this.panels.network.mainResourceDOMContentTime = time;
+    this.mainResourceDOMContentTime = time;
 }
 
 WebInspector.loadEventFired = function(time)
 {
-    this.panels.resources.mainResourceLoadTime = time;
+    if (this.panels.resources)
+        this.panels.resources.mainResourceLoadTime = time;
     this.panels.audits.mainResourceLoadTime = time;
     if (this.panels.network)
         this.panels.network.mainResourceLoadTime = time;
+    this.mainResourceLoadTime = time;
 }
 
 WebInspector.removeResource = function(identifier)
 {
+    if (Preferences.networkPanelEnabled)
+        return;
+
     var resource = this.resources[identifier];
     if (!resource)
         return;
 
-    resource.category.removeResource(resource);
-    delete this.resourceURLMap[resource.url];
     delete this.resources[identifier];
 
     if (this.panels.resources)
@@ -1449,18 +1512,13 @@ WebInspector.reset = function()
             panel.reset();
     }
 
-    this.sessionSettings.reset();
-
-    for (var category in this.resourceCategories)
-        this.resourceCategories[category].removeAllResources();
-
     this.resources = {};
-    this.resourceURLMap = {};
     this.cookieDomains = {};
     this.applicationCacheDomains = {};
     this.highlightDOMNode(0);
 
-    delete this.mainResource;
+    if (!Preferences.networkPanelEnabled)
+        delete this.mainResource;
 
     this.console.clearMessages();
     this.extensionServer.notifyInspectorReset();
@@ -1669,7 +1727,8 @@ WebInspector.displayNameForURL = function(url)
 {
     if (!url)
         return "";
-    var resource = this.resourceURLMap[url];
+
+    var resource = this.resourceForURL(url);
     if (resource)
         return resource.displayName;
 
@@ -1687,28 +1746,16 @@ WebInspector.displayNameForURL = function(url)
     return url.trimURL(WebInspector.mainResource.domain);
 }
 
-WebInspector.resourceForURL = function(url)
-{
-    if (url in this.resourceURLMap)
-        return this.resourceURLMap[url];
-
-    // No direct match found. Search for resources that contain
-    // a substring of the URL.
-    for (var resourceURL in this.resourceURLMap) {
-        if (resourceURL.hasSubstring(url))
-            return this.resourceURLMap[resourceURL];
-    }
-
-    return null;
-}
-
 WebInspector._choosePanelToShowSourceLine = function(url, line, preferredPanel)
 {
     preferredPanel = preferredPanel || "resources";
+    if (Preferences.networkPanelEnabled && preferredPanel === "resources")
+        preferredPanel = "storage";
+
     var panel = this.panels[preferredPanel];
     if (panel && panel.canShowSourceLine(url, line))
         return panel;
-    panel = this.panels.resources;
+    panel = Preferences.networkPanelEnabled ? this.panels.storage : this.panels.resources;
     return panel.canShowSourceLine(url, line) ? panel : null;
 }
 
@@ -1747,7 +1794,8 @@ WebInspector.linkifyStringAsFragment = function(string)
             title = WebInspector.panels.profiles.displayTitleForProfileLink(profileStringMatches[2], profileStringMatches[1]);
 
         var realURL = (linkString.indexOf("www.") === 0 ? "http://" + linkString : linkString);
-        container.appendChild(WebInspector.linkifyURLAsNode(realURL, title, null, (realURL in WebInspector.resourceURLMap)));
+        var hasResourceWithURL = !!WebInspector.resourceForURL(realURL);
+        container.appendChild(WebInspector.linkifyURLAsNode(realURL, title, null, hasResourceWithURL));
         string = string.substring(linkIndex + linkString.length, string.length);
     }
 
@@ -1815,13 +1863,17 @@ WebInspector.resourceURLForRelatedNode = function(node, url)
     }
 
     // documentURL not found or has bad value
-    for (var resourceURL in WebInspector.resourceURLMap) {
-        var parsedURL = resourceURL.asParsedURL();
-        if (parsedURL && parsedURL.path === url)
-            return resourceURL;
+    var resourceURL = url;
+    function callback(resource)
+    {
+        if (resource.path === url) {
+            resourceURL = resource.url;
+            return true;
+        }
     }
-    return url;
-},
+    WebInspector.forAllResources(callback);
+    return resourceURL;
+}
 
 WebInspector.completeURL = function(baseURL, href)
 {
@@ -1918,9 +1970,10 @@ WebInspector.doPerformSearch = function(query, forceSearch, isBackwardSearch, re
 
         for (var panelName in this.panels) {
             var panel = this.panels[panelName];
-            if (panel.currentQuery && panel.searchCanceled)
-                panel.searchCanceled();
+            var hadCurrentQuery = !!panel.currentQuery;
             delete panel.currentQuery;
+            if (hadCurrentQuery && panel.searchCanceled)
+                panel.searchCanceled();
         }
 
         this.updateSearchMatchesCount();
diff --git a/WebCore/inspector/front-end/networkPanel.css b/WebCore/inspector/front-end/networkPanel.css
index 773fe99..215681f 100644
--- a/WebCore/inspector/front-end/networkPanel.css
+++ b/WebCore/inspector/front-end/networkPanel.css
@@ -24,11 +24,16 @@
 
 .network.panel .data-grid td {
     line-height: 17px;
+    height: 37px;
     border-right: 1px solid rgb(210, 210, 210);
     -webkit-user-select: none;
     vertical-align: middle;
 }
 
+.network.panel .data-grid.small td {
+    height: 17px;
+}
+
 .network.panel .data-grid th {
     border-bottom: 1px solid rgb(64%, 64%, 64%);
     height: 30px;
@@ -414,6 +419,10 @@
     background-color: rgba(0, 0, 255, 0.5);
 }
 
+.network.panel .resources-dividers {
+    z-index: 0;
+}
+
 .network.panel .resources-dividers-label-bar {
     background-color: transparent;
     border: none;
@@ -535,6 +544,19 @@
     left: 0;
 }
 
+.network-close-button {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    background-image: url(Images/closeButtons.png);
+    background-position: 0 0;
+    background-color: transparent;
+    border: 0 none transparent;
+    top: 4px;
+    right: 5px;
+    z-index: 10;
+}
+
 .network.panel .data-grid.full-grid-mode .viewer-column {
     display: none;
 }
@@ -582,7 +604,19 @@
     padding-top: 5px;
 }
 
-.network.panel .resource-view.headers-visible .resource-view-content {
+#network-views .resource-view.headers-visible .resource-view-content {
+    top: 31px;
+}
+
+#network-views.small .resource-view.headers-visible .resource-view-content {
+    top: 23px;
+}
+
+#network-views .resource-view-headers {
+    top: 31px;
+}
+
+#network-views.small .resource-view-headers {
     top: 23px;
 }
 
@@ -591,7 +625,12 @@
     color: black;
 }
 
-.network.panel .resource-view .tabbed-pane-header {
+#network-views .resource-view .tabbed-pane-header {
+    height: 31px;
+    padding-top: 11px;
+}
+
+#network-views.small .resource-view .tabbed-pane-header {
     height: 23px;
     padding-top: 3px;
 }