updated webkit front-end

- strip function wrapper from node sources

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);
 

front-end/AuditLauncherView.js

@@ -269,6 +269,7 @@ WebInspector.AuditLauncherView.prototype = {
         this._selectAllClicked(this._selectAllCheckboxElement.checked);
         this.updateResourceTrackingState();
         this._updateButton();
+        this._updateResourceProgress();
     },
 
     _updateResourceProgress: function()

front-end/AuditResultView.js

@@ -89,7 +89,8 @@ WebInspector.AuditCategoryResultPane.prototype = {
                 title = String.sprintf("%s (%d)", title, result.violationCount);
         }
 
-        var treeElement = new TreeElement(title, null, !!result.children);
+        var treeElement = new TreeElement(null, null, !!result.children);
+        treeElement.titleHTML = title;
         parentTreeElement.appendChild(treeElement);
 
         if (result.className)

front-end/AuditRules.js

@@ -42,17 +42,17 @@ WebInspector.AuditRules.CacheableResponseCodes =
     304: true // Underlying resource is cacheable
 }
 
-WebInspector.AuditRules.getDomainToResourcesMap = function(resources, types, regexp, needFullResources)
+WebInspector.AuditRules.getDomainToResourcesMap = function(resources, types, needFullResources)
 {
     var domainToResourcesMap = {};
     for (var i = 0, size = resources.length; i < size; ++i) {
         var resource = resources[i];
         if (types && types.indexOf(resource.type) === -1)
             continue;
-        var match = resource.url.match(regexp);
-        if (!match)
+        var parsedURL = resource.url.asParsedURL();
+        if (!parsedURL)
             continue;
-        var domain = match[2];
+        var domain = parsedURL.host;
         var domainResources = domainToResourcesMap[domain];
         if (domainResources === undefined) {
           domainResources = [];
@@ -128,7 +128,7 @@ WebInspector.AuditRules.CombineExternalResourcesRule = function(id, name, type,
 WebInspector.AuditRules.CombineExternalResourcesRule.prototype = {
     doRun: function(resources, result, callback)
     {
-        var domainToResourcesMap = WebInspector.AuditRules.getDomainToResourcesMap(resources, [this._type], WebInspector.URLRegExp);
+        var domainToResourcesMap = WebInspector.AuditRules.getDomainToResourcesMap(resources, [this._type]);
         var penalizedResourceCount = 0;
         // TODO: refactor according to the chosen i18n approach
         var summary = result.addChild("", true);
@@ -175,14 +175,14 @@ WebInspector.AuditRules.MinimizeDnsLookupsRule.prototype = {
     doRun: function(resources, result, callback)
     {
         var summary = result.addChild("");
-        var domainToResourcesMap = WebInspector.AuditRules.getDomainToResourcesMap(resources, undefined, WebInspector.URLRegExp);
+        var domainToResourcesMap = WebInspector.AuditRules.getDomainToResourcesMap(resources, undefined);
         for (var domain in domainToResourcesMap) {
             if (domainToResourcesMap[domain].length > 1)
                 continue;
-            var match = domain.match(WebInspector.URLRegExp);
-            if (!match)
+            var parsedURL = domain.asParsedURL();
+            if (!parsedURL)
                 continue;
-            if (!match[2].search(WebInspector.AuditRules.IPAddressRegexp))
+            if (!parsedURL.host.search(WebInspector.AuditRules.IPAddressRegexp))
                 continue; // an IP address
             summary.addSnippet(match[2]);
             result.violationCount++;
@@ -220,7 +220,6 @@ WebInspector.AuditRules.ParallelizeDownloadRule.prototype = {
         var domainToResourcesMap = WebInspector.AuditRules.getDomainToResourcesMap(
             resources,
             [WebInspector.Resource.Type.Stylesheet, WebInspector.Resource.Type.Image],
-            WebInspector.URLRegExp,
             true);
 
         var hosts = [];
@@ -278,6 +277,7 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
     doRun: function(resources, result, callback)
     {
         var self = this;
+
         function evalCallback(styleSheets) {
             if (!styleSheets.length)
                 return callback(null);
@@ -287,12 +287,12 @@ 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];
-                    if (rule.selectorText.match(pseudoSelectorRegexp))
+                for (var curRule = 0; curRule < styleSheet.rules.length; ++curRule) {
+                    var selectorText = styleSheet.rules[curRule].selectorText;
+                    if (selectorText.match(pseudoSelectorRegexp) || testedSelectors[selectorText])
                         continue;
-                    selectors.push(rule.selectorText);
-                    testedSelectors[rule.selectorText] = 1;
+                    selectors.push(selectorText);
+                    testedSelectors[selectorText] = 1;
                 }
             }
 
@@ -308,9 +308,12 @@ 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];
+                        // Exact computation whenever source ranges are available.
+                        var textLength = (rule.selectorRange && rule.style.properties.endOffset) ? rule.style.properties.endOffset - rule.selectorRange.start + 1 : 0;
+                        if (!textLength && rule.style.cssText)
+                            textLength = rule.style.cssText.length + rule.selectorText.length;
                         stylesheetSize += textLength;
                         if (!testedSelectors[rule.selectorText] || foundSelectors[rule.selectorText])
                             continue;
@@ -323,11 +326,13 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
                     if (!unusedRules.length)
                         continue;
 
-                    var url = styleSheet.href ? WebInspector.AuditRuleResult.linkifyDisplayName(styleSheet.href) : String.sprintf("Inline block #%d", ++inlineBlockOrdinal);
+                    var resource = WebInspector.resourceManager.resourceForURL(styleSheet.sourceURL);
+                    var isInlineBlock = resource && resource.type == WebInspector.Resource.Type.Document;
+                    var url = !isInlineBlock ? WebInspector.AuditRuleResult.linkifyDisplayName(styleSheet.sourceURL) : String.sprintf("Inline block #%d", ++inlineBlockOrdinal);
                     var pctUnused = Math.round(100 * unusedStylesheetSize / stylesheetSize);
                     if (!summary)
                         summary = result.addChild("", true);
-                    var entry = summary.addChild(String.sprintf("%s: %d%% (estimated) is not used by the current page.", url, pctUnused));
+                    var entry = summary.addChild(String.sprintf("%s: %s (%d%%) is not used by the current page.", url, Number.bytesToString(unusedStylesheetSize), pctUnused));
 
                     for (var j = 0; j < unusedRules.length; ++j)
                         entry.addSnippet(unusedRules[j]);
@@ -339,7 +344,7 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
                     return callback(null);
 
                 var totalUnusedPercent = Math.round(100 * totalUnusedStylesheetSize / totalStylesheetSize);
-                summary.value = String.sprintf("%d%% of CSS (estimated) is not used by the current page.", totalUnusedPercent);
+                summary.value = String.sprintf("%s (%d%%) of CSS is not used by the current page.", Number.bytesToString(totalUnusedStylesheetSize), totalUnusedPercent);
 
                 callback(result);
             }
@@ -349,11 +354,10 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
                 var result = {};
                 for (var i = 0; i < selectorArray.length; ++i) {
                     try {
-                        var nodes = document.querySelectorAll(selectorArray[i]);
-                        if (nodes && nodes.length)
+                        if (document.querySelector(selectorArray[i]))
                             result[selectorArray[i]] = true;
                     } catch(e) {
-                        // ignore and mark as unused
+                        // Ignore and mark as unused.
                     }
                 }
                 return result;
@@ -362,16 +366,24 @@ WebInspector.AuditRules.UnusedCssRule.prototype = {
             WebInspector.AuditRules.evaluateInTargetWindow(routine, [selectors], selectorsCallback.bind(null, callback, styleSheets, testedSelectors));
         }
 
-        function routine()
+        function styleSheetCallback(styleSheets, continuation, styleSheet)
         {
-            var styleSheets = document.styleSheets;
-            if (!styleSheets)
-                return false;
-
-            return routineResult;
+            if (styleSheet)
+                styleSheets.push(styleSheet);
+            if (continuation)
+                continuation(styleSheets);
         }
 
-        InspectorBackend.getAllStyles(evalCallback);
+        function allStylesCallback(styleSheetIds)
+        {
+            if (!styleSheetIds || !styleSheetIds.length)
+                return evalCallback([]);
+            var styleSheets = [];
+            for (var i = 0; i < styleSheetIds.length; ++i)
+                WebInspector.CSSStyleSheet.createForId(styleSheetIds[i], styleSheetCallback.bind(null, styleSheets, i == styleSheetIds.length - 1 ? evalCallback : null));
+        }
+
+        InspectorBackend.getAllStyles2(allStylesCallback);
     }
 }
 
@@ -647,7 +659,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = {
 
             const node = WebInspector.domAgent.nodeForId(imageId);
             var src = node.getAttribute("src");
-            if (!WebInspector.URLRegExp.test(src)) {
+            if (!src.asParsedURL()) {
                 for (var frameOwnerCandidate = node; frameOwnerCandidate; frameOwnerCandidate = frameOwnerCandidate.parentNode) {
                     if (frameOwnerCandidate.documentURL) {
                         var completeSrc = WebInspector.completeURL(frameOwnerCandidate.documentURL, src);
@@ -658,7 +670,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = {
             if (completeSrc)
                 src = completeSrc;
 
-            const computedStyle = new WebInspector.CSSStyleDeclaration(styles.computedStyle);
+            const computedStyle = styles.computedStyle;
             if (computedStyle.getPropertyValue("position") === "absolute") {
                 if (!context.imagesLeft)
                     doneCallback(context);
@@ -669,7 +681,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 = styles.matchedCSSRules[i].style;
                 if (style.getPropertyValue("width") !== "")
                     widthFound = true;
                 if (style.getPropertyValue("height") !== "")
@@ -693,7 +705,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = {
                 return callback(null);
             var context = {imagesLeft: imageIds.length, urlToNoDimensionCount: {}};
             for (var i = imageIds.length - 1; i >= 0; --i)
-                InspectorBackend.getStyles(imageIds[i], true, imageStylesReady.bind(this, imageIds[i], context));
+                WebInspector.cssModel.getStylesAsync(imageIds[i], imageStylesReady.bind(this, imageIds[i], context));
         }
 
         function pushImageNodes()
@@ -934,7 +946,6 @@ WebInspector.AuditRules.CookieSizeRule.prototype = {
 
         var domainToResourcesMap = WebInspector.AuditRules.getDomainToResourcesMap(resources,
                 null,
-                WebInspector.URLRegExp,
                 true);
         var matchingResourceData = {};
         this.mapResourceCookies(domainToResourcesMap, allCookies, collectorCallback.bind(this));
@@ -998,7 +1009,6 @@ WebInspector.AuditRules.StaticCookielessRule.prototype = {
         var domainToResourcesMap = WebInspector.AuditRules.getDomainToResourcesMap(resources,
                 [WebInspector.Resource.Type.Stylesheet,
                  WebInspector.Resource.Type.Image],
-                WebInspector.URLRegExp,
                 true);
         var totalStaticResources = 0;
         for (var domain in domainToResourcesMap)

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)
@@ -203,20 +203,15 @@ WebInspector.AuditsPanel.prototype = {
 
     _reloadResources: function(callback)
     {
-        this._resourceTrackingCallback = callback;
-
-        if (!WebInspector.panels.resources.resourceTrackingEnabled) {
-            InspectorBackend.enableResourceTracking(false);
-            this._updateLauncherViewControls(true);
-        } else
-            InspectorBackend.reloadPage();
+        this._pageReloadCallback = callback;
+        InspectorBackend.reloadPage();
     },
 
     _didMainResourceLoad: function()
     {
-        if (this._resourceTrackingCallback) {
-            var callback = this._resourceTrackingCallback;
-            delete this._resourceTrackingCallback;
+        if (this._pageReloadCallback) {
+            var callback = this._pageReloadCallback;
+            delete this._pageReloadCallback;
             callback();
         }
     },
@@ -256,7 +251,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()

front-end/BreakpointManager.js

@@ -28,7 +28,6 @@ WebInspector.BreakpointManager = function()
 {
     this._breakpoints = {};
     this._nativeBreakpoints = {};
-    this._domBreakpoints = {};
 }
 
 WebInspector.BreakpointManager.prototype = {
@@ -137,13 +136,12 @@ WebInspector.BreakpointManager.prototype = {
 
         var breakpoint = new WebInspector.DOMBreakpoint(this, frontendId, nodeId, domEventType);
         this._nativeBreakpoints[frontendId] = breakpoint;
-        this._domBreakpoints[frontendId] = breakpoint;
         this.dispatchEventToListeners("dom-breakpoint-added", breakpoint);
         breakpoint.enabled = !disabled;
         return breakpoint;
     },
 
-    createEventListenerBreakpoint: function(eventName, disabled)
+    createEventListenerBreakpoint: function(eventName)
     {
         var frontendId = eventName;
         if (frontendId in this._nativeBreakpoints)
@@ -151,7 +149,8 @@ WebInspector.BreakpointManager.prototype = {
 
         var breakpoint = new WebInspector.EventListenerBreakpoint(this, frontendId, eventName);
         this._nativeBreakpoints[frontendId] = breakpoint;
-        breakpoint.enabled = !disabled;
+        this.dispatchEventToListeners("event-listener-breakpoint-added", { breakpoint: breakpoint, eventName: eventName });
+        breakpoint.enabled = true;
         return breakpoint;
     },
 
@@ -175,8 +174,7 @@ WebInspector.BreakpointManager.prototype = {
         if (breakpoint.enabled)
             this._removeNativeBreakpointFromBackend(breakpoint);
         delete this._nativeBreakpoints[breakpoint._frontendId];
-        if (breakpoint._type === "DOM")
-            delete this._domBreakpoints[breakpoint._frontendId];
+        this._updateNativeBreakpointsInSettings();
         breakpoint.dispatchEventToListeners("removed");
     },
 
@@ -195,7 +193,7 @@ WebInspector.BreakpointManager.prototype = {
     _setNativeBreakpointOnBackend: function(breakpoint)
     {
         breakpoint._beingSetOnBackend = true;
-        var data = { type: breakpoint._type, condition: breakpoint._condition() };
+        var data = { type: breakpoint._type, condition: breakpoint._condition };
         InspectorBackend.setNativeBreakpoint(data, didSetNativeBreakpoint.bind(this));
 
         function didSetNativeBreakpoint(backendBreakpointId)
@@ -206,6 +204,7 @@ WebInspector.BreakpointManager.prototype = {
                 this._breakpoints[backendBreakpointId] = breakpoint;
             }
             breakpoint.dispatchEventToListeners("enable-changed");
+            this._updateNativeBreakpointsInSettings();
         }
     },
 
@@ -215,14 +214,33 @@ WebInspector.BreakpointManager.prototype = {
         delete this._breakpoints[breakpoint._backendId]
         delete breakpoint._backendId;
         breakpoint.dispatchEventToListeners("enable-changed");
+        this._updateNativeBreakpointsInSettings();
+    },
+
+    _updateNativeBreakpointsInSettings: function()
+    {
+        var persistentBreakpoints = [];
+        for (var id in this._nativeBreakpoints) {
+            var breakpoint = this._nativeBreakpoints[id];
+            if (breakpoint._persistentCondition)
+                persistentBreakpoints.push({ type: breakpoint._type, enabled: breakpoint.enabled, condition: breakpoint._persistentCondition });
+        }
+        WebInspector.settings.nativeBreakpoints = persistentBreakpoints;
     },
 
     debuggerPaused: function(details)
     {
-        if (details.eventType !== WebInspector.DebuggerEventTypes.NativeBreakpoint)
+        if (details.eventType === WebInspector.DebuggerEventTypes.JavaScriptPause)
             return;
 
-        var breakpoint = this._breakpoints[details.eventData.breakpointId];
+        if (details.eventData && details.eventData.breakpointId)
+            var breakpointId = details.eventData.breakpointId;
+        else if (details.callFrames && details.callFrames.length)
+            var breakpointId = WebInspector.Breakpoint.jsBreakpointId(details.callFrames[0].sourceID, details.callFrames[0].line);
+        else
+            return;
+
+        var breakpoint = this._breakpoints[breakpointId];
         if (!breakpoint)
             return;
 
@@ -242,31 +260,60 @@ WebInspector.BreakpointManager.prototype = {
         delete this._lastHitBreakpoint;
     },
 
+    restoreBreakpoints: function()
+    {
+        var breakpoints = this._persistentBreakpoints();
+        for (var i = 0; i < breakpoints.length; ++i) {
+            if (breakpoints[i].type === "EventListener")
+                this.createEventListenerBreakpoint(breakpoints[i].condition.eventName);
+            else if (breakpoints[i].type === "XHR")
+                this.createXHRBreakpoint(breakpoints[i].condition.url, !breakpoints[i].enabled);
+        }
+    },
+
     restoreDOMBreakpoints: function()
     {
-        var domBreakpoints = this._domBreakpoints;
-        this._domBreakpoints = {};
-
-        var breakpointsToRestore = {};
-        for (var frontendId in domBreakpoints) {
-            var breakpoint = domBreakpoints[frontendId];
-            var path = breakpoint._path;
-            if (!path)
-                continue;
-            if (!breakpointsToRestore[path]) {
-                breakpointsToRestore[path] = [];
-                InspectorBackend.pushNodeByPathToFrontend(path, restoreBreakpointsForNode.bind(this, breakpointsToRestore[path]));
-            }
-            breakpointsToRestore[path].push(breakpoint);
-        }
-
-        function restoreBreakpointsForNode(breakpoints, nodeId)
+        function didPushNodeByPathToFrontend(path, nodeId)
         {
-            if (!nodeId)
+            pathToNodeId[path] = nodeId;
+            pendingCalls -= 1;
+            if (pendingCalls)
                 return;
-            for (var i = 0; i < breakpoints.length; ++i)
-                this.createDOMBreakpoint(nodeId, breakpoints[i]._domEventType, !breakpoints[i].enabled);
+            for (var i = 0; i < breakpoints.length; ++i) {
+                var breakpoint = breakpoints[i];
+                var nodeId = pathToNodeId[breakpoint.condition.path];
+                if (nodeId)
+                    this.createDOMBreakpoint(nodeId, breakpoint.condition.type, !breakpoint.enabled);
+            }
         }
+
+        var breakpoints = this._persistentBreakpoints();
+        var pathToNodeId = {};
+        var pendingCalls = 0;
+        for (var i = 0; i < breakpoints.length; ++i) {
+            if (breakpoints[i].type !== "DOM")
+                continue;
+            var path = breakpoints[i].condition.path;
+            if (path in pathToNodeId)
+                continue;
+            pathToNodeId[path] = 0;
+            pendingCalls += 1;
+            InspectorBackend.pushNodeByPathToFrontend(path, didPushNodeByPathToFrontend.bind(this, path));
+        }
+    },
+
+    _persistentBreakpoints: function()
+    {
+        var result = [];
+        var breakpoints = WebInspector.settings.nativeBreakpoints;
+        if (breakpoints instanceof Array) {
+            for (var i = 0; i < breakpoints.length; ++i) {
+                var breakpoint = breakpoints[i];
+                if ("type" in breakpoint && "condition" in breakpoint)
+                    result.push(breakpoint)
+            }
+        }
+        return result;
     }
 }
 
@@ -283,6 +330,11 @@ WebInspector.Breakpoint = function(breakpointManager, sourceID, url, line, enabl
     this._breakpointManager = breakpointManager;
 }
 
+WebInspector.Breakpoint.jsBreakpointId = function(sourceID, line)
+{
+    return sourceID + ":" + line;
+}
+
 WebInspector.Breakpoint.prototype = {
     get enabled()
     {
@@ -307,12 +359,12 @@ WebInspector.Breakpoint.prototype = {
     set sourceText(text)
     {
         this._sourceText = text;
-        this.dispatchEventToListeners("text-changed");
+        this.dispatchEventToListeners("label-changed");
     },
 
     get id()
     {
-        return this.sourceID + ":" + this.line;
+        return WebInspector.Breakpoint.jsBreakpointId(this.sourceID, this.line);
     },
 
     get condition()
@@ -332,6 +384,11 @@ WebInspector.Breakpoint.prototype = {
         this.dispatchEventToListeners("condition-changed");
     },
 
+    click: function(event)
+    {
+        WebInspector.panels.scripts.showSourceLine(this.url, this.line);
+    },
+
     compareTo: function(other)
     {
         if (this.url != other.url)
@@ -341,6 +398,18 @@ WebInspector.Breakpoint.prototype = {
         return 0;
     },
 
+    populateLabelElement: function(element)
+    {
+        var displayName = this.url ? WebInspector.displayNameForURL(this.url) : WebInspector.UIString("(program)");
+        var labelElement = document.createTextNode(displayName + ":" + this.line);
+        element.appendChild(labelElement);
+
+        var sourceTextElement = document.createElement("div");
+        sourceTextElement.textContent = this.sourceText;
+        sourceTextElement.className = "source-text monospace";
+        element.appendChild(sourceTextElement);
+    },
+
     remove: function()
     {
         InspectorBackend.removeBreakpoint(this.sourceID, this.line);
@@ -405,20 +474,16 @@ WebInspector.DOMBreakpoint = function(manager, frontendId, nodeId, domEventType)
     WebInspector.NativeBreakpoint.call(this, manager, frontendId, "DOM");
     this._nodeId = nodeId;
     this._domEventType = domEventType;
+    this._condition = { nodeId: this._nodeId, type: this._domEventType };
 
     var node = WebInspector.domAgent.nodeForId(this._nodeId);
     if (node) {
         node.breakpoints[this._domEventType] = this;
-        this._path = node.path();
+        this._persistentCondition = { path: node.path(), type: this._domEventType };
     }
 }
 
 WebInspector.DOMBreakpoint.prototype = {
-    click: function()
-    {
-        WebInspector.updateFocusedNode(this._nodeId);
-    },
-
     compareTo: function(other)
     {
         return this._compare(this._domEventType, other._domEventType);
@@ -426,9 +491,14 @@ WebInspector.DOMBreakpoint.prototype = {
 
     populateLabelElement: function(element)
     {
-        element.appendChild(WebInspector.panels.elements.linkifyNodeById(this._nodeId));
-        element.appendChild(document.createTextNode(" - "));
-        element.appendChild(document.createTextNode(WebInspector.domBreakpointTypeLabel(this._domEventType)));
+        // FIXME: this should belong to the view, not the manager.
+        var linkifiedNode = WebInspector.panels.elements.linkifyNodeById(this._nodeId);
+        linkifiedNode.addStyleClass("monospace");
+        element.appendChild(linkifiedNode);
+        var description = document.createElement("div");
+        description.className = "source-text";
+        description.textContent = WebInspector.domBreakpointTypeLabel(this._domEventType);
+        element.appendChild(description);
     },
 
     populateStatusMessageElement: function(element, eventData)
@@ -459,11 +529,6 @@ WebInspector.DOMBreakpoint.prototype = {
             WebInspector.formatLocalized("Paused on a \"%s\" breakpoint set on %s.", substitutions, formatters, "", append);
     },
 
-    _condition: function()
-    {
-        return { nodeId: this._nodeId, type: this._domEventType };
-    },
-
     _onRemove: function()
     {
         var node = WebInspector.domAgent.nodeForId(this._nodeId);
@@ -478,6 +543,20 @@ WebInspector.EventListenerBreakpoint = function(manager, frontendId, eventName)
 {
     WebInspector.NativeBreakpoint.call(this, manager, frontendId, "EventListener");
     this._eventName = eventName;
+    this._condition = { eventName: this._eventName };
+    this._persistentCondition = this._condition;
+}
+
+WebInspector.EventListenerBreakpoint.eventNameForUI = function(eventName)
+{
+    if (!WebInspector.EventListenerBreakpoint._eventNamesForUI) {
+        WebInspector.EventListenerBreakpoint._eventNamesForUI = {
+            "instrumentation:setTimer": WebInspector.UIString("Set Timer"),
+            "instrumentation:clearTimer": WebInspector.UIString("Clear Timer"),
+            "instrumentation:timerFired": WebInspector.UIString("Timer Fired")
+        };
+    }
+    return WebInspector.EventListenerBreakpoint._eventNamesForUI[eventName] || eventName.substring(eventName.indexOf(":") + 1);
 }
 
 WebInspector.EventListenerBreakpoint.prototype = {
@@ -497,21 +576,9 @@ WebInspector.EventListenerBreakpoint.prototype = {
         element.appendChild(document.createTextNode(status));
     },
 
-    _condition: function()
-    {
-        return { eventName: this._eventName };
-    },
-
     _uiEventName: function()
     {
-        if (!WebInspector.EventListenerBreakpoint._uiEventNames) {
-            WebInspector.EventListenerBreakpoint._uiEventNames = {
-                "instrumentation:setTimer": WebInspector.UIString("Set Timer"),
-                "instrumentation:clearTimer": WebInspector.UIString("Clear Timer"),
-                "instrumentation:timerFired": WebInspector.UIString("Timer Fired")
-            };
-        }
-        return WebInspector.EventListenerBreakpoint._uiEventNames[this._eventName] || this._eventName.substring(this._eventName.indexOf(":") + 1);
+        return WebInspector.EventListenerBreakpoint.eventNameForUI(this._eventName);
     }
 }
 
@@ -521,6 +588,8 @@ WebInspector.XHRBreakpoint = function(manager, frontendId, url)
 {
     WebInspector.NativeBreakpoint.call(this, manager, frontendId, "XHR");
     this._url = url;
+    this._condition = { url: this._url };
+    this._persistentCondition = this._condition;
 }
 
 WebInspector.XHRBreakpoint.prototype = {
@@ -529,6 +598,11 @@ WebInspector.XHRBreakpoint.prototype = {
         return this._compare(this._url, other._url);
     },
 
+    populateEditElement: function(element)
+    {
+        element.textContent = this._url;
+    },
+
     populateLabelElement: function(element)
     {
         var label;
@@ -537,17 +611,13 @@ WebInspector.XHRBreakpoint.prototype = {
         else
             label = WebInspector.UIString("URL contains \"%s\"", this._url);
         element.appendChild(document.createTextNode(label));
+        element.addStyleClass("cursor-auto");
     },
 
     populateStatusMessageElement: function(element)
     {
         var status = WebInspector.UIString("Paused on a XMLHttpRequest.");
         element.appendChild(document.createTextNode(status));
-    },
-
-    _condition: function()
-    {
-        return { url: this._url };
     }
 }
 

front-end/BreakpointsSidebarPane.js

@@ -47,39 +47,27 @@ WebInspector.BreakpointsSidebarPane.prototype = {
         }
     },
 
-    addBreakpoint: function(breakpointItem)
+    addBreakpointItem: function(breakpointItem)
     {
-        breakpointItem.addEventListener("removed", this._breakpointRemoved, this);
-
-        var element = breakpointItem.element();
+        var element = breakpointItem.element;
         element._breakpointItem = breakpointItem;
 
+        breakpointItem.addEventListener("breakpoint-hit", this.expand, this);
+        breakpointItem.addEventListener("removed", this._removeListElement.bind(this, element), this);
+
         var currentElement = this.listElement.firstChild;
         while (currentElement) {
-             if (currentElement._breakpointItem.compareTo(element._breakpointItem) > 0) {
-                this.listElement.insertBefore(element, currentElement);
+            if (currentElement._breakpointItem && currentElement._breakpointItem.compareTo(element._breakpointItem) > 0)
                 break;
-            }
             currentElement = currentElement.nextSibling;
         }
-        if (!currentElement)
-            this.listElement.appendChild(element);
+        this._addListElement(element, currentElement);
 
+        if (breakpointItem.click) {
+            element.addStyleClass("cursor-pointer");
+            element.addEventListener("click", breakpointItem.click.bind(breakpointItem), false);
+        }
         element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this, breakpointItem), true);
-
-        if (this.emptyElement.parentElement) {
-            this.bodyElement.removeChild(this.emptyElement);
-            this.bodyElement.appendChild(this.listElement);
-        }
-    },
-
-    _breakpointRemoved: function(event)
-    {
-        this.listElement.removeChild(event.target.element());
-        if (!this.listElement.firstChild) {
-            this.bodyElement.removeChild(this.listElement);
-            this.bodyElement.appendChild(this.emptyElement);
-        }
     },
 
     _contextMenuEventFired: function(breakpointItem, event)
@@ -87,6 +75,28 @@ WebInspector.BreakpointsSidebarPane.prototype = {
         var contextMenu = new WebInspector.ContextMenu();
         contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), breakpointItem.remove.bind(breakpointItem));
         contextMenu.show(event);
+    },
+
+    _addListElement: function(element, beforeElement)
+    {
+        if (beforeElement)
+            this.listElement.insertBefore(element, beforeElement);
+        else {
+            if (!this.listElement.firstChild) {
+                this.bodyElement.removeChild(this.emptyElement);
+                this.bodyElement.appendChild(this.listElement);
+            }
+            this.listElement.appendChild(element);
+        }
+    },
+
+    _removeListElement: function(element)
+    {
+        this.listElement.removeChild(element);
+        if (!this.listElement.firstChild) {
+            this.bodyElement.removeChild(this.listElement);
+            this.bodyElement.appendChild(this.emptyElement);
+        }
     }
 }
 
@@ -96,36 +106,58 @@ WebInspector.XHRBreakpointsSidebarPane = function()
 {
     WebInspector.BreakpointsSidebarPane.call(this, WebInspector.UIString("XHR Breakpoints"));
 
+    function addButtonClicked(event)
+    {
+        event.stopPropagation();
+        this._startEditingBreakpoint(null);
+    }
+
     var addButton = document.createElement("button");
     addButton.className = "add";
-    addButton.addEventListener("click", this._showEditBreakpointDialog.bind(this), false);
+    addButton.addEventListener("click", addButtonClicked.bind(this), false);
     this.titleElement.appendChild(addButton);
-
-    this.urlInputElement = document.createElement("span");
-    this.urlInputElement.className = "breakpoint-condition editing";
 }
 
 WebInspector.XHRBreakpointsSidebarPane.prototype = {
-    _showEditBreakpointDialog: function(event)
+    addBreakpointItem: function(breakpointItem)
     {
-        event.stopPropagation();
+        WebInspector.BreakpointsSidebarPane.prototype.addBreakpointItem.call(this, breakpointItem);
+        breakpointItem._labelElement.addEventListener("dblclick", this._startEditingBreakpoint.bind(this, breakpointItem), false);
+    },
 
-        if (this.urlInputElement.parentElement)
+    _startEditingBreakpoint: function(breakpointItem)
+    {
+        if (this._editingBreakpoint)
             return;
+        this._editingBreakpoint = true;
 
         if (!this.expanded)
             this.expanded = true;
 
-        this.urlInputElement.textContent = "";
-        this.bodyElement.insertBefore(this.urlInputElement, this.bodyElement.firstChild);
-        WebInspector.startEditing(this.urlInputElement, this._hideEditBreakpointDialog.bind(this, false), this._hideEditBreakpointDialog.bind(this, true));
+        var inputElement = document.createElement("span");
+        inputElement.className = "breakpoint-condition editing";
+        if (breakpointItem) {
+            breakpointItem.populateEditElement(inputElement);
+            this.listElement.insertBefore(inputElement, breakpointItem.element);
+            breakpointItem.element.addStyleClass("hidden");
+        } else
+            this._addListElement(inputElement, this.listElement.firstChild);
+
+        var commitHandler = this._hideEditBreakpointDialog.bind(this, inputElement, true, breakpointItem);
+        var cancelHandler = this._hideEditBreakpointDialog.bind(this, inputElement, false, breakpointItem);
+        WebInspector.startEditing(inputElement, commitHandler, cancelHandler);
     },
 
-    _hideEditBreakpointDialog: function(discard)
+    _hideEditBreakpointDialog: function(inputElement, accept, breakpointItem)
     {
-        if (!discard)
-            WebInspector.breakpointManager.createXHRBreakpoint(this.urlInputElement.textContent.toLowerCase());
-        this.bodyElement.removeChild(this.urlInputElement);
+        this._removeListElement(inputElement);
+        this._editingBreakpoint = false;
+        if (accept) {
+            if (breakpointItem)
+                breakpointItem.remove();
+            WebInspector.breakpointManager.createXHRBreakpoint(inputElement.textContent.toLowerCase());
+        } else if (breakpointItem)
+            breakpointItem.element.removeStyleClass("hidden");
     }
 }
 
@@ -136,7 +168,6 @@ WebInspector.BreakpointItem = function(breakpoint)
     this._breakpoint = breakpoint;
 
     this._element = document.createElement("li");
-    this._element.addEventListener("click", this._breakpointClicked.bind(this), false);
 
     var checkboxElement = document.createElement("input");
     checkboxElement.className = "checkbox-elem";
@@ -145,16 +176,18 @@ WebInspector.BreakpointItem = function(breakpoint)
     checkboxElement.addEventListener("click", this._checkboxClicked.bind(this), false);
     this._element.appendChild(checkboxElement);
 
-    if ("populateLabelElement" in this._breakpoint)
-        this._breakpoint.populateLabelElement(this._element);
+    this._createLabelElement();
 
     this._breakpoint.addEventListener("enable-changed", this._enableChanged, this);
     this._breakpoint.addEventListener("hit-state-changed", this._hitStateChanged, this);
+    this._breakpoint.addEventListener("label-changed", this._labelChanged, this);
     this._breakpoint.addEventListener("removed", this.dispatchEventToListeners.bind(this, "removed"));
+    if (breakpoint.click)
+        this.click = breakpoint.click.bind(breakpoint);
 }
 
 WebInspector.BreakpointItem.prototype = {
-    element: function()
+    get element()
     {
         return this._element;
     },
@@ -164,17 +197,16 @@ WebInspector.BreakpointItem.prototype = {
         return this._breakpoint.compareTo(other._breakpoint);
     },
 
+    populateEditElement: function(element)
+    {
+        this._breakpoint.populateEditElement(element);
+    },
+
     remove: function()
     {
         this._breakpoint.remove();
     },
 
-    _breakpointClicked: function(event)
-    {
-        if ("click" in this._breakpoint)
-            this._breakpoint.click();
-    },
-
     _checkboxClicked: function(event)
     {
         this._breakpoint.enabled = !this._breakpoint.enabled;
@@ -191,46 +223,29 @@ WebInspector.BreakpointItem.prototype = {
 
     _hitStateChanged: function(event)
     {
-        if (event.target.hit)
+        if (event.target.hit) {
             this._element.addStyleClass("breakpoint-hit");
-        else
+            this.dispatchEventToListeners("breakpoint-hit");
+        } else
             this._element.removeStyleClass("breakpoint-hit");
+    },
+
+    _labelChanged: function(event)
+    {
+        this._element.removeChild(this._labelElement);
+        this._createLabelElement();
+    },
+
+    _createLabelElement: function()
+    {
+        this._labelElement = document.createElement("span");
+        this._breakpoint.populateLabelElement(this._labelElement);
+        this._element.appendChild(this._labelElement);
     }
 }
 
 WebInspector.BreakpointItem.prototype.__proto__ = WebInspector.Object.prototype;
 
-WebInspector.JSBreakpointItem = function(breakpoint)
-{
-    WebInspector.BreakpointItem.call(this, breakpoint);
-
-    var displayName = this._breakpoint.url ? WebInspector.displayNameForURL(this._breakpoint.url) : WebInspector.UIString("(program)");
-    var labelElement = document.createTextNode(displayName + ":" + this._breakpoint.line);
-    this._element.appendChild(labelElement);
-
-    var sourceTextElement = document.createElement("div");
-    sourceTextElement.textContent = this._breakpoint.sourceText;
-    sourceTextElement.className = "source-text monospace";
-    this._element.appendChild(sourceTextElement);
-
-    this._breakpoint.addEventListener("text-changed", this._textChanged, this);
-}
-
-WebInspector.JSBreakpointItem.prototype = {
-    _breakpointClicked: function()
-    {
-        WebInspector.panels.scripts.showSourceLine(this._breakpoint.url, this._breakpoint.line);
-    },
-
-    _textChanged: function()
-    {
-        var sourceTextElement = this._element.firstChild.nextSibling.nextSibling;
-        sourceTextElement.textContent = this._breakpoint.sourceText;
-    }
-}
-
-WebInspector.JSBreakpointItem.prototype.__proto__ = WebInspector.BreakpointItem.prototype;
-
 WebInspector.EventListenerBreakpointsSidebarPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Event Listener Breakpoints"));
@@ -240,97 +255,126 @@ WebInspector.EventListenerBreakpointsSidebarPane = function()
     this.categoriesElement.addStyleClass("properties-tree event-listener-breakpoints");
     this.categoriesTreeOutline = new TreeOutline(this.categoriesElement);
     this.bodyElement.appendChild(this.categoriesElement);
+
+    WebInspector.breakpointManager.addEventListener("event-listener-breakpoint-added", this._breakpointAdded, this);
+
+    this._breakpointItems = {};
+    this._createCategory("Keyboard", "listener", ["keydown", "keyup", "keypress", "textInput"]);
+    this._createCategory("Mouse", "listener", ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "mousewheel"]);
+    // FIXME: uncomment following once inspector stops being drop targer in major ports.
+    // Otherwise, inspector page reacts on drop event and tries to load the event data.
+    // this._createCategory("Drag", "listener", ["drag", "drop", "dragstart", "dragend", "dragenter", "dragleave", "dragover"]);
+    this._createCategory("Control", "listener", ["resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"]);
+    this._createCategory("Clipboard", "listener", ["copy", "cut", "paste", "beforecopy", "beforecut", "beforepaste"]);
+    this._createCategory("Load", "listener", ["load", "unload", "abort", "error"]);
+    this._createCategory("DOM Mutation", "listener", ["DOMActivate", "DOMFocusIn", "DOMFocusOut", "DOMAttrModified", "DOMCharacterDataModified", "DOMNodeInserted", "DOMNodeInsertedIntoDocument", "DOMNodeRemoved", "DOMNodeRemovedFromDocument", "DOMSubtreeModified", "DOMContentLoaded"]);
+    this._createCategory("Device", "listener", ["deviceorientation", "devicemotion"]);
+    this._createCategory("Timer", "instrumentation", ["setTimer", "clearTimer", "timerFired"]);
 }
 
 WebInspector.EventListenerBreakpointsSidebarPane.prototype = {
-    _populate: function()
+    _createCategory: function(name, type, eventNames)
     {
-        var categories = {
-            "Mouse": { type: "listener", eventNames: ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "mousewheel"] },
-            "Keyboard": { type: "listener", eventNames: ["keydown", "keypress", "keyup"] },
-            "HTML frame/object":  { type: "listener", eventNames: ["load", "error", "resize", "scroll"] },
-            "Timer": { type: "instrumentation", eventNames: ["setTimer", "clearTimer", "timerFired"] }
-        };
+        var categoryItem = {};
+        categoryItem.element = new TreeElement(WebInspector.UIString(name));
+        this.categoriesTreeOutline.appendChild(categoryItem.element);
+        categoryItem.element.listItemElement.addStyleClass("event-category");
+        categoryItem.element.selectable = true;
 
-        for (var category in categories) {
-            var categoryTreeElement = new TreeElement(WebInspector.UIString(category));
-            this.categoriesTreeOutline.appendChild(categoryTreeElement);
-            categoryTreeElement.listItemElement.addStyleClass("event-category");
-            categoryTreeElement.selectable = true;
+        categoryItem.checkbox = this._createCheckbox(categoryItem.element);
+        categoryItem.checkbox.addEventListener("click", this._categoryCheckboxClicked.bind(this, categoryItem), true);
 
-            var categoryItem = {};
-            categoryItem.checkbox = this._createCheckbox(categoryTreeElement, this._categoryCheckboxClicked.bind(this, categoryItem));
-            categoryItem.children = {};
+        categoryItem.children = {};
+        for (var i = 0; i < eventNames.length; ++i) {
+            var eventName = type + ":" + eventNames[i];
 
-            var categoryType = categories[category].type;
-            var eventNames = categories[category].eventNames;
-            for (var i = 0; i < eventNames.length; ++i) {
-                var eventName = categoryType + ":" + eventNames[i];
+            var breakpointItem = {};
+            var title = WebInspector.EventListenerBreakpoint.eventNameForUI(eventName);
+            breakpointItem.element = new TreeElement(title);
+            categoryItem.element.appendChild(breakpointItem.element);
+            var hitMarker = document.createElement("div");
+            hitMarker.className = "breakpoint-hit-marker";
+            breakpointItem.element.listItemElement.appendChild(hitMarker);
+            breakpointItem.element.listItemElement.addStyleClass("source-code");
+            breakpointItem.element.selectable = true;
 
-                var breakpoint = WebInspector.breakpointManager.createEventListenerBreakpoint(eventName, true);
-                if (!breakpoint)
-                    continue;
+            breakpointItem.checkbox = this._createCheckbox(breakpointItem.element);
+            breakpointItem.checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, breakpointItem), true);
+            breakpointItem.parent = categoryItem;
+            breakpointItem.eventName = eventName;
 
-                var labelElement = document.createElement("div");
-                breakpoint.populateLabelElement(labelElement);
-                var eventNameTreeElement = new TreeElement(labelElement);
-                categoryTreeElement.appendChild(eventNameTreeElement);
-                eventNameTreeElement.listItemElement.addStyleClass("source-code");
-                eventNameTreeElement.selectable = true;
-
-                var eventNameItem = {};
-                eventNameItem.checkbox = this._createCheckbox(eventNameTreeElement, this._eventNameCheckboxClicked.bind(this, categoryItem, eventNameItem));
-                eventNameItem.breakpoint = breakpoint;
-
-                breakpoint.addEventListener("enable-changed", this._breakpointEnableChanged.bind(this, categoryItem, eventNameItem), true);
-
-                categoryItem.children[eventName] = eventNameItem;
-            }
+            this._breakpointItems[eventName] = breakpointItem;
+            categoryItem.children[eventName] = breakpointItem;
         }
     },
 
-    _createCheckbox: function(treeElement, checkboxClickedDelegate)
+    _createCheckbox: function(treeElement)
     {
         var checkbox = document.createElement("input");
         checkbox.className = "checkbox-elem";
         checkbox.type = "checkbox";
-        checkbox.addEventListener("click", checkboxClickedDelegate, true);
         treeElement.listItemElement.insertBefore(checkbox, treeElement.listItemElement.firstChild);
         return checkbox;
     },
 
     _categoryCheckboxClicked: function(categoryItem)
     {
-        var checkbox = categoryItem.checkbox;
-        checkbox.indeterminate = false;
+        var checked = categoryItem.checkbox.checked;
         for (var eventName in categoryItem.children) {
-            var eventNameItem = categoryItem.children[eventName];
-            eventNameItem.checkbox.checked = checkbox.checked;
-            eventNameItem.breakpoint.enabled = checkbox.checked;
+            var breakpointItem = categoryItem.children[eventName];
+            if (breakpointItem.checkbox.checked !== checked) {
+                breakpointItem.checkbox.checked = checked;
+                this._breakpointCheckboxClicked(breakpointItem);
+            }
         }
     },
 
-    _eventNameCheckboxClicked: function(categoryItem, eventNameItem)
+    _breakpointCheckboxClicked: function(breakpointItem)
     {
-        this._updateCategoryCheckbox(categoryItem);
-        eventNameItem.breakpoint.enabled = eventNameItem.checkbox.checked;
+        if (breakpointItem.checkbox.checked)
+            WebInspector.breakpointManager.createEventListenerBreakpoint(breakpointItem.eventName);
+        else
+            breakpointItem.breakpoint.remove();
     },
 
-    _breakpointEnableChanged: function(categoryItem, eventNameItem)
+    _breakpointAdded: function(event)
     {
-        if (eventNameItem.checkbox.checked === eventNameItem.breakpoint.enabled)
-            return;
+        var breakpoint = event.data.breakpoint;
+        var eventName = event.data.eventName;
 
-        eventNameItem.checkbox.checked = eventNameItem.breakpoint.enabled;
-        this._updateCategoryCheckbox(categoryItem);
+        var breakpointItem = this._breakpointItems[eventName];
+        breakpointItem.breakpoint = breakpoint;
+        breakpoint.addEventListener("hit-state-changed", this._breakpointHitStateChanged.bind(this, breakpointItem));
+        breakpoint.addEventListener("removed", this._breakpointRemoved.bind(this, breakpointItem));
+        breakpointItem.checkbox.checked = true;
+        this._updateCategoryCheckbox(breakpointItem);
     },
 
-    _updateCategoryCheckbox: function(categoryItem)
+    _breakpointHitStateChanged: function(breakpointItem, event)
     {
+        if (event.target.hit) {
+            this.expanded = true;
+            var categoryItem = breakpointItem.parent;
+            categoryItem.element.expand();
+            breakpointItem.element.listItemElement.addStyleClass("breakpoint-hit");
+        } else
+            breakpointItem.element.listItemElement.removeStyleClass("breakpoint-hit");
+    },
+
+    _breakpointRemoved: function(breakpointItem)
+    {
+        breakpointItem.breakpoint = null;
+        breakpointItem.checkbox.checked = false;
+        this._updateCategoryCheckbox(breakpointItem);
+    },
+
+    _updateCategoryCheckbox: function(breakpointItem)
+    {
+        var categoryItem = breakpointItem.parent;
         var hasEnabled = false, hasDisabled = false;
         for (var eventName in categoryItem.children) {
-            var eventNameItem = categoryItem.children[eventName];
-            if (eventNameItem.checkbox.checked)
+            var breakpointItem = categoryItem.children[eventName];
+            if (breakpointItem.checkbox.checked)
                 hasEnabled = true;
             else
                 hasDisabled = true;
@@ -341,8 +385,12 @@ WebInspector.EventListenerBreakpointsSidebarPane.prototype = {
 
     reset: function()
     {
-        this.categoriesTreeOutline.removeChildren();
-        this._populate();
+        for (var eventName in this._breakpointItems) {
+            var breakpointItem = this._breakpointItems[eventName];
+            breakpointItem.breakpoint = null;
+            breakpointItem.checkbox.checked = false;
+            this._updateCategoryCheckbox(breakpointItem);
+        }
     }
 }
 

front-end/CSSStyleModel.js

@@ -32,80 +32,519 @@ 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.getStylesForNode2(nodeId, 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.getComputedStyleForNode2(nodeId, callback.bind(null, userCallback));
     },
 
-    setRuleSelector: function(ruleId, newContent, nodeId, successCallback, failureCallback)
+    getInlineStyleAsync: function(nodeId, userCallback)
     {
-        function callback(newRulePayload, doesAffectSelectedNode)
+        function callback(userCallback, stylePayload)
         {
-            if (!newRulePayload)
+            if (!stylePayload)
+                userCallback(null);
+            else
+                userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload));
+        }
+
+        InspectorBackend.getInlineStyleForNode2(nodeId, callback.bind(null, userCallback));
+    },
+
+    setRuleSelector: function(ruleId, nodeId, newSelector, successCallback, failureCallback)
+    {
+        function checkAffectsCallback(nodeId, successCallback, rulePayload, selectedNodeIds)
+        {
+            var doesAffectSelectedNode = (selectedNodeIds.indexOf(nodeId) >= 0);
+            var rule = WebInspector.CSSRule.parsePayload(rulePayload);
+            successCallback(rule, doesAffectSelectedNode);
+            this._styleSheetChanged(rule.id.styleSheetId, true);
+        }
+
+        function callback(nodeId, successCallback, failureCallback, newSelector, rulePayload)
+        {
+            if (!rulePayload)
                 failureCallback();
             else
-                successCallback(WebInspector.CSSStyleDeclaration.parseRule(newRulePayload), doesAffectSelectedNode);
+                InspectorBackend.querySelectorAll(nodeId, newSelector, checkAffectsCallback.bind(this, nodeId, successCallback, rulePayload));
         }
 
-        InspectorBackend.setRuleSelector(ruleId, newContent, nodeId, callback);
+        InspectorBackend.setRuleSelector2(ruleId, newSelector, callback.bind(this, nodeId, successCallback, failureCallback));
     },
 
-    addRule: function(nodeId, newContent, successCallback, failureCallback)
+    addRule: function(nodeId, selector, successCallback, failureCallback)
     {
-        function callback(rule, doesAffectSelectedNode)
+        function checkAffectsCallback(nodeId, successCallback, rulePayload, selectedNodeIds)
         {
-            if (!rule) {
+            var doesAffectSelectedNode = (selectedNodeIds.indexOf(nodeId) >= 0);
+            var rule = WebInspector.CSSRule.parsePayload(rulePayload);
+            successCallback(rule, doesAffectSelectedNode);
+            this._styleSheetChanged(rule.id.styleSheetId, true);
+        }
+
+        function callback(successCallback, failureCallback, selector, rulePayload)
+        {
+            if (!rulePayload) {
                 // Invalid syntax for a selector
                 failureCallback();
-            } else {
-                var styleRule = WebInspector.CSSStyleDeclaration.parseRule(rule);
-                styleRule.rule = rule;
-                successCallback(styleRule, doesAffectSelectedNode);
-            }
+            } else
+                InspectorBackend.querySelectorAll(nodeId, selector, checkAffectsCallback.bind(this, nodeId, successCallback, rulePayload));
         }
 
-        InspectorBackend.addRule(newContent, nodeId, callback);
+        InspectorBackend.addRule2(nodeId, selector, callback.bind(this, successCallback, failureCallback, selector));
     },
 
-    toggleStyleEnabled: function(styleId, propertyName, disabled, userCallback)
+    _styleSheetChanged: function(styleSheetId, majorChange)
     {
-        function callback(newPayload)
+        if (!majorChange || !styleSheetId)
+            return;
+
+        function callback(href, content)
         {
-            if (!newPayload) {
-                userCallback(null);
-                return;
-            }
-
-            var newStyle = WebInspector.CSSStyleDeclaration.parseStyle(newPayload);
-            userCallback(newStyle);
+            var resource = WebInspector.resourceManager.resourceForURL(href);
+            if (resource && resource.type === WebInspector.Resource.Type.Stylesheet)
+                resource.content = content;
         }
-
-        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, changedProperties)
-        {
-            if (!success)
-                failureCallback();
-            else {
-                var newStyle = newPayload ? WebInspector.CSSStyleDeclaration.parseStyle(newPayload) : null;
-                successCallback(newStyle, changedProperties);
-            }
-        }
-
-        InspectorBackend.applyStyleText(styleId, styleText, propertyName, callback);
+        InspectorBackend.getStyleSheetText2(styleSheetId, callback);
+    }
+}
+
+WebInspector.CSSStyleDeclaration = function(payload)
+{
+    this.id = payload.styleId;
+    this.properties = payload.properties;
+    this._shorthandValues = payload.shorthandValues;
+    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[propertyIndex] = name;
+        this._livePropertyMap[name] = property;
+
+        // Index longhand properties.
+        if (property.shorthand) { // only for parsed
+            var longhands = this._longhandProperties[property.shorthand];
+            if (!longhands) {
+                longhands = [];
+                this._longhandProperties[property.shorthand] = longhands;
+            }
+            longhands.push(property);
+        }
+        ++propertyIndex;
+    }
+    this.length = propertyIndex;
+    if ("cssText" in payload)
+        this.cssText = payload.cssText;
+}
+
+WebInspector.CSSStyleDeclaration.parsePayload = function(payload)
+{
+    return new WebInspector.CSSStyleDeclaration(payload);
+}
+
+WebInspector.CSSStyleDeclaration.prototype = {
+    get allProperties()
+    {
+        return this._allProperties;
+    },
+
+    getLiveProperty: function(name)
+    {
+        return this._livePropertyMap[name];
+    },
+
+    getPropertyValue: function(name)
+    {
+        var property = this._livePropertyMap[name];
+        return property ? property.value : "";
+    },
+
+    getPropertyPriority: function(name)
+    {
+        var property = this._livePropertyMap[name];
+        return property ? property.priority : "";
+    },
+
+    getPropertyShorthand: function(name)
+    {
+        var property = this._livePropertyMap[name];
+        return property ? property.shorthand : "";
+    },
+
+    isPropertyImplicit: function(name)
+    {
+        var property = this._livePropertyMap[name];
+        return property ? property.implicit : "";
+    },
+
+    styleTextWithShorthands: function()
+    {
+        var cssText = "";
+        var foundProperties = {};
+        for (var i = 0; i < this.length; ++i) {
+            var individualProperty = this[i];
+            var shorthandProperty = this.getPropertyShorthand(individualProperty);
+            var propertyName = (shorthandProperty || individualProperty);
+
+            if (propertyName in foundProperties)
+                continue;
+
+            if (shorthandProperty) {
+                var value = this.getShorthandValue(shorthandProperty);
+                var priority = this.getShorthandPriority(shorthandProperty);
+            } else {
+                var value = this.getPropertyValue(individualProperty);
+                var priority = this.getPropertyPriority(individualProperty);
+            }
+
+            foundProperties[propertyName] = true;
+
+            cssText += propertyName + ": " + value;
+            if (priority)
+                cssText += " !" + priority;
+            cssText += "; ";
+        }
+
+        return cssText;
+    },
+
+    getLonghandProperties: function(name)
+    {
+        return this._longhandProperties[name] || [];
+    },
+
+    getShorthandValue: function(shorthandProperty)
+    {
+        var property = this.getLiveProperty(shorthandProperty);
+        return property ? property.value : this._shorthandValues[shorthandProperty];
+    },
+
+    getShorthandPriority: function(shorthandProperty)
+    {
+        var priority = this.getPropertyPriority(shorthandProperty);
+        if (priority)
+            return priority;
+
+        var longhands = this._longhandProperties[shorthandProperty];
+        return longhands ? this.getPropertyPriority(longhands[0]) : null;
+    },
+
+    propertyAt: function(index)
+    {
+        return (index < this.allProperties.length) ? this.allProperties[index] : null;
+    },
+
+    pastLastSourcePropertyIndex: function()
+    {
+        for (var i = this.allProperties.length - 1; i >= 0; --i) {
+            var property = this.allProperties[i];
+            if (property.active || property.disabled)
+                return i + 1;
+        }
+        return 0;
+    },
+
+    newBlankProperty: function()
+    {
+        return new WebInspector.CSSProperty(this, this.pastLastSourcePropertyIndex(), "", "", "", "active", true, false, false, "");
+    },
+
+    insertPropertyAt: function(index, name, value, userCallback)
+    {
+        function callback(userCallback, payload)
+        {
+            if (!userCallback)
+                return;
+
+            if (!payload)
+                userCallback(null);
+            else {
+                userCallback(WebInspector.CSSStyleDeclaration.parsePayload(payload));
+                WebInspector.cssModel._styleSheetChanged(this.id.styleSheetId, true);
+            }
+        }
+
+        InspectorBackend.setPropertyText2(this.id, index, name + ": " + value + ";", false, callback.bind(null, userCallback));
+    },
+
+    appendProperty: function(name, value, userCallback)
+    {
+        this.insertPropertyAt(this.allProperties.length, name, value, userCallback);
+    }
+}
+
+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;
+    this.selectorRange = payload.selectorRange;
+}
+
+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;
+
+        if (this.name === "")
+            return "";
+        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, majorChange, userCallback)
+    {
+        function callback(stylePayload)
+        {
+            if (stylePayload)
+                this.text = propertyText;
+
+            if (!userCallback)
+                return;
+            if (!stylePayload)
+                userCallback(null);
+            else {
+                var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload);
+                userCallback(style);
+                WebInspector.cssModel._styleSheetChanged(style.id.styleSheetId, majorChange);
+            }
+        }
+
+        if (!this.ownerStyle)
+            throw "No ownerStyle for property";
+
+        // An index past all the properties adds a new property to the style.
+        InspectorBackend.setPropertyText2(this.ownerStyle.id, this.index, propertyText, this.index < this.ownerStyle.pastLastSourcePropertyIndex(), callback.bind(this));
+    },
+
+    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(stylePayload)
+        {
+            if (!userCallback)
+                return;
+            if (!stylePayload)
+                userCallback(null);
+            else {
+                var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload);
+                userCallback(style);
+                WebInspector.cssModel._styleSheetChanged(this.ownerStyle.id.styleSheetId, false);
+            }
+        }
+
+        InspectorBackend.toggleProperty2(this.ownerStyle.id, this.index, disabled, callback.bind(this));
+    }
+}
+
+WebInspector.CSSStyleSheet = function(payload)
+{
+    this.id = payload.styleSheetId;
+    this.sourceURL = payload.sourceURL;
+    this.title = payload.title;
+    this.disabled = payload.disabled;
+    this.rules = [];
+    this.styles = {};
+    for (var i = 0; i < payload.rules.length; ++i) {
+        var rule = WebInspector.CSSRule.parsePayload(payload.rules[i]);
+        this.rules.push(rule);
+        if (rule.style)
+            this.styles[rule.style.id] = rule.style;
+    }
+    if ("text" in payload)
+        this._text = payload.text;
+}
+
+WebInspector.CSSStyleSheet.createForId = function(styleSheetId, userCallback)
+{
+    function callback(styleSheetPayload)
+    {
+        if (!styleSheetPayload)
+            userCallback(null);
+        else
+            userCallback(new WebInspector.CSSStyleSheet(styleSheetPayload));
+    }
+    InspectorBackend.getStyleSheet2(styleSheetId, callback.bind(this));
+}
+
+WebInspector.CSSStyleSheet.prototype = {
+    getText: function()
+    {
+        return this._text;
+    },
+
+    setText: function(newText, userCallback)
+    {
+        function callback(styleSheetPayload)
+        {
+            if (!styleSheetPayload)
+                userCallback(null);
+            else {
+                userCallback(new WebInspector.CSSStyleSheet(styleSheetPayload));
+                WebInspector.cssModel._styleSheetChanged(this.id, true);
+            }
+        }
+
+        InspectorBackend.setStyleSheetText2(this.id, newText, callback.bind(this));
     }
 }

front-end/CallStackSidebarPane.js

@@ -173,11 +173,12 @@ WebInspector.CallStackSidebarPane.prototype = {
     _breakpointHit:  function(event)
     {
         var breakpoint = event.data.breakpoint;
-
-        var statusMessageElement = document.createElement("div");
-        statusMessageElement.className = "info";
-        breakpoint.populateStatusMessageElement(statusMessageElement, event.data.eventData);
-        this.bodyElement.appendChild(statusMessageElement);
+        if (breakpoint.populateStatusMessageElement) {
+            var statusMessageElement = document.createElement("div");
+            statusMessageElement.className = "info";
+            breakpoint.populateStatusMessageElement(statusMessageElement, event.data.eventData);
+            this.bodyElement.appendChild(statusMessageElement);
+        }
     }
 }
 

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.settings.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();
@@ -223,14 +218,7 @@ WebInspector.ConsoleView.prototype = {
     {
         if (msg instanceof WebInspector.ConsoleMessage && !(msg instanceof WebInspector.ConsoleCommandResult)) {
             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);
-            }
-
+            WebInspector.resourceManager.addConsoleMessage(msg);
             this.commandSincePreviousMessage = false;
             this.previousMessage = msg;
         } else if (msg instanceof WebInspector.ConsoleCommand) {
@@ -301,8 +289,7 @@ WebInspector.ConsoleView.prototype = {
 
     clearMessages: function()
     {
-        if (WebInspector.panels.resources)
-            WebInspector.panels.resources.clearMessages();
+        WebInspector.resourceManager.clearConsoleMessages();
 
         this.messages = [];
 
@@ -360,7 +347,7 @@ WebInspector.ConsoleView.prototype = {
         }
 
         var results = [];
-        var properties = Object.sortedProperties(result);
+        var properties = Object.keys(result).sort();
 
         for (var i = 0; i < properties.length; ++i) {
             var property = properties[i];
@@ -521,7 +508,7 @@ WebInspector.ConsoleView.prototype = {
 
     _enterKeyPressed: function(event)
     {
-        if (event.altKey || event.ctrlKey)
+        if (event.altKey || event.ctrlKey || event.shiftKey)
             return;
 
         event.preventDefault();
@@ -543,7 +530,7 @@ WebInspector.ConsoleView.prototype = {
             self.prompt.historyOffset = 0;
             self.prompt.text = "";
 
-            WebInspector.applicationSettings.consoleHistory = self.prompt.history.slice(-30);
+            WebInspector.settings.consoleHistory = self.prompt.history.slice(-30);
 
             self.addMessage(new WebInspector.ConsoleCommandResult(result, commandMessage));
         }
@@ -678,7 +665,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)

front-end/CookieItemsView.js

@@ -32,20 +32,19 @@ WebInspector.CookieItemsView = function(treeElement, cookieDomain)
     WebInspector.View.call(this);
 
     this.element.addStyleClass("storage-view");
-    this.element.addStyleClass("table");
 
-    this.deleteButton = new WebInspector.StatusBarButton(WebInspector.UIString("Delete"), "delete-storage-status-bar-item");
-    this.deleteButton.visible = false;
-    this.deleteButton.addEventListener("click", this._deleteButtonClicked.bind(this), false);
+    this._deleteButton = new WebInspector.StatusBarButton(WebInspector.UIString("Delete"), "delete-storage-status-bar-item");
+    this._deleteButton.visible = false;
+    this._deleteButton.addEventListener("click", this._deleteButtonClicked.bind(this), false);
+
+    this._refreshButton = new WebInspector.StatusBarButton(WebInspector.UIString("Refresh"), "refresh-storage-status-bar-item");
+    this._refreshButton.addEventListener("click", this._refreshButtonClicked.bind(this), false);
 
-    this.refreshButton = new WebInspector.StatusBarButton(WebInspector.UIString("Refresh"), "refresh-storage-status-bar-item");
-    this.refreshButton.addEventListener("click", this._refreshButtonClicked.bind(this), false);
-    
     this._treeElement = treeElement;
     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);
 }
@@ -53,7 +52,7 @@ WebInspector.CookieItemsView = function(treeElement, cookieDomain)
 WebInspector.CookieItemsView.prototype = {
     get statusBarItems()
     {
-        return [this.refreshButton.element, this.deleteButton.element];
+        return [this._refreshButton.element, this._deleteButton.element];
     },
 
     show: function(parentElement)
@@ -65,7 +64,13 @@ WebInspector.CookieItemsView.prototype = {
     hide: function()
     {
         WebInspector.View.prototype.hide.call(this);
-        this.deleteButton.visible = false;
+        this._deleteButton.visible = false;
+    },
+
+    resize: function()
+    {
+        if (this._cookiesTable)
+            this._cookiesTable.updateWidths();
     },
 
     _update: function()
@@ -75,57 +80,45 @@ WebInspector.CookieItemsView.prototype = {
 
     _updateWithCookies: function(allCookies, isAdvanced)
     {
-        if (isAdvanced)
-            this._filterCookiesForDomain(allCookies);
-        else
-            this._cookies = allCookies;
+        this._cookies = isAdvanced ? this._filterCookiesForDomain(allCookies) : allCookies;
 
         if (!this._cookies.length) {
             // Nothing to show.
             this._emptyMsgElement.removeStyleClass("hidden");
-            this.deleteButton.visible = false;
-            if (this._dataGrid)
-                this._dataGrid.element.addStyleClass("hidden");
+            this._deleteButton.visible = false;
+            if (this._cookiesTable)
+                this._cookiesTable.element.addStyleClass("hidden");
             return;
         }
 
-        if (!this._dataGrid) {
-            if (isAdvanced) {
-                this._createDataGrid();
-                this._populateDataGrid();
-                this._dataGrid.autoSizeColumns(6, 33);
-                this._treeElement.subtitle = String.sprintf(WebInspector.UIString("%d cookies (%s)"), this._cookies.length,
-                    Number.bytesToString(this._totalSize, WebInspector.UIString));
-            } else {
-                this._createSimpleDataGrid();
-                this._populateSimpleDataGrid();
-                this._dataGrid.autoSizeColumns(20, 80);
-            }
-        } else {
-            if (isAdvanced)
-                this._populateDataGrid();
-            else
-                this._populateSimpleDataGrid();
+        if (!this._cookiesTable) {
+            this._cookiesTable = isAdvanced ? new WebInspector.CookiesTable(this._cookieDomain, false, this._deleteCookie.bind(this)) : new WebInspector.SimpleCookiesTable();
+            this.element.appendChild(this._cookiesTable.element);
         }
 
-        this._dataGrid.element.removeStyleClass("hidden");
+        this._cookiesTable.setCookies(this._cookies);
+        this._cookiesTable.element.removeStyleClass("hidden");
         this._emptyMsgElement.addStyleClass("hidden");
-        if (isAdvanced)
-            this.deleteButton.visible = true;
+        if (isAdvanced) {
+            this._treeElement.subtitle = String.sprintf(WebInspector.UIString("%d cookies (%s)"), this._cookies.length,
+                Number.bytesToString(this._totalSize, WebInspector.UIString));
+            this._deleteButton.visible = true;
+        }
     },
 
     _filterCookiesForDomain: function(allCookies)
     {
-        this._cookies = [];
+        var cookies = [];
         var resourceURLsForDocumentURL = [];
         this._totalSize = 0;
 
-        for (var id in WebInspector.resources) {
-            var resource = WebInspector.resources[id];
-            var match = resource.documentURL.match(WebInspector.GenericURLRegExp);
-            if (match && match[2] === this._cookieDomain)
+        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;
@@ -136,126 +129,52 @@ WebInspector.CookieItemsView.prototype = {
                     this._totalSize += size;
                     if (!pushed) {
                         pushed = true;
-                        this._cookies.push(allCookies[i]);
+                        cookies.push(allCookies[i]);
                     }
                 }
             }
         }
+        return cookies;
     },
 
-    _createDataGrid: function()
+    _deleteCookie: function(cookie)
     {
-        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();
+        InspectorBackend.deleteCookie(cookie.name, this._cookieDomain);
+        this._update();
     },
 
-    _populateDataGrid: function()
+    _deleteButtonClicked: 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;
+        if (this._cookiesTable.selectedCookie)
+            this._deleteCookie(this._cookiesTable.selectedCookie);
     },
 
-    _createSimpleDataGrid: function()
+    _refreshButtonClicked: function(event)
     {
-        var columns = {};
-        columns[0] = {};
-        columns[1] = {};
-        columns[0].title = WebInspector.UIString("Name");
-        columns[1].title = WebInspector.UIString("Value");
+        this._update();
+    }
+}
 
-        this._dataGrid = new WebInspector.DataGrid(columns);
-        this.element.appendChild(this._dataGrid.element);
-        this._dataGrid.updateWidths();
-    },
+WebInspector.CookieItemsView.prototype.__proto__ = WebInspector.View.prototype;
 
-    _populateSimpleDataGrid: function()
+WebInspector.SimpleCookiesTable = function()
+{
+    this.element = document.createElement("div");
+    var columns = {};
+    columns[0] = {};
+    columns[1] = {};
+    columns[0].title = WebInspector.UIString("Name");
+    columns[1].title = WebInspector.UIString("Value");
+
+    this._dataGrid = new WebInspector.DataGrid(columns);
+    this._dataGrid.autoSizeColumns(20, 80);
+    this.element.appendChild(this._dataGrid.element);
+    this._dataGrid.updateWidths();
+}
+
+WebInspector.SimpleCookiesTable.prototype = {
+    setCookies: function(cookies)
     {
-        var cookies = this._cookies;
         this._dataGrid.removeChildren();
         var addedCookies = {};
         for (var i = 0; i < cookies.length; ++i) {
@@ -277,27 +196,5 @@ WebInspector.CookieItemsView.prototype = {
     {
         if (this._dataGrid)
             this._dataGrid.updateWidths();
-    },
-
-    _deleteButtonClicked: function(event)
-    {
-        if (!this._dataGrid || !this._dataGrid.selectedNode)
-            return;
-
-        this._deleteCookieCallback(this._dataGrid.selectedNode);
-    },
-
-    _deleteCookieCallback: function(node)
-    {
-        var cookie = node.cookie;
-        InspectorBackend.deleteCookie(cookie.name, this._cookieDomain);
-        this._update();
-    },
-
-    _refreshButtonClicked: function(event)
-    {
-        this._update();
     }
 }
-
-WebInspector.CookieItemsView.prototype.__proto__ = WebInspector.View.prototype;

front-end/CookieParser.js

@@ -0,0 +1,210 @@
+/*
+ * Copyright (C) 2010 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// Ideally, we would rely on platform support for parsing a cookie, since
+// this would save us from any potential inconsistency. However, exposing
+// platform cookie parsing logic would require quite a bit of additional 
+// plumbing, and at least some platforms lack support for parsing Cookie,
+// which is in a format slightly different from Set-Cookie and is normally 
+// only required on the server side.
+
+WebInspector.CookieParser = function()
+{
+}
+
+WebInspector.CookieParser.prototype = {
+    get cookies()
+    {
+        return this._cookies;
+    },
+
+    parseCookie: function(cookieHeader)
+    {
+        if (!this._initialize(cookieHeader))
+            return;
+
+        for (var kv = this._extractKeyValue(); kv; kv = this._extractKeyValue()) {
+            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, WebInspector.Cookie.Type.Request);
+            this._advanceAndCheckCookieDelimiter();
+        }
+        this._flushCookie();
+        return this._cookies;
+    },
+
+    parseSetCookie: function(setCookieHeader)
+    {
+        if (!this._initialize(setCookieHeader))
+            return;
+        for (var kv = this._extractKeyValue(); kv; kv = this._extractKeyValue()) {
+            if (this._lastCookie)
+                this._lastCookie.addAttribute(kv.key, kv.value);
+            else 
+                this._addCookie(kv, WebInspector.Cookie.Type.Response);
+            if (this._advanceAndCheckCookieDelimiter())
+                this._flushCookie();
+        }
+        this._flushCookie();
+        return this._cookies;
+    },
+
+    _initialize: function(headerValue)
+    {
+        this._input = headerValue;
+        if (typeof headerValue !== "string")
+            return false;
+        this._cookies = [];
+        this._lastCookie = null;
+        this._originalInputLength = this._input.length;
+        return true;
+    },
+
+    _flushCookie: function()
+    {
+        if (this._lastCookie)
+            this._lastCookie.size = this._originalInputLength - this._input.length - this._lastCookiePosition;
+        this._lastCookie = null;
+    },
+
+    _extractKeyValue: function()
+    {
+        if (!this._input || !this._input.length)
+            return null;
+        // Note: RFCs offer an option for quoted values that may contain commas and semicolons.
+        // Many browsers/platforms do not support this, however (see http://webkit.org/b/16699
+        // and http://crbug.com/12361). The logic below matches latest versions of IE, Firefox,
+        // Chrome and Safari on some old platforms. The latest version of Safari supports quoted
+        // cookie values, though. 
+        var keyValueMatch = /^[ \t]*([^\s=;]+)[ \t]*(?:=[ \t]*([^;\n]*))?/.exec(this._input);
+        if (!keyValueMatch) {
+            console.log("Failed parsing cookie header before: " + this._input);
+            return null;
+        }
+
+        var result = {
+            key: keyValueMatch[1],
+            value: keyValueMatch[2] && keyValueMatch[2].trim(),
+            position: this._originalInputLength - this._input.length
+        };
+        this._input = this._input.slice(keyValueMatch[0].length);
+        return result;
+    },
+
+    _advanceAndCheckCookieDelimiter: function()
+    {
+        var match = /^\s*[\n;]\s*/.exec(this._input);
+        if (!match)
+            return false;
+        this._input = this._input.slice(match[0].length);
+        return match[0].match("\n") !== null;
+    },
+
+    _addCookie: function(keyValue, type)
+    {
+        if (this._lastCookie)
+            this._lastCookie.size = keyValue.position - this._lastCookiePosition;
+        // 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, type) :
+            new WebInspector.Cookie("", keyValue.key, type);
+        this._lastCookiePosition = keyValue.position;
+        this._cookies.push(this._lastCookie);
+    }
+};
+
+WebInspector.CookieParser.parseCookie = function(header)
+{
+    return (new WebInspector.CookieParser()).parseCookie(header);
+}
+
+WebInspector.CookieParser.parseSetCookie = function(header)
+{
+    return (new WebInspector.CookieParser()).parseSetCookie(header);
+}
+
+WebInspector.Cookie = function(name, value, type)
+{
+    this.name = name;
+    this.value = value;
+    this.type = type;
+    this._attributes = {};
+}
+
+WebInspector.Cookie.prototype = {
+    get httpOnly()
+    {
+        return "httponly" in this._attributes;
+    },
+
+    get secure()
+    {
+        return "secure" in this._attributes;
+    },
+
+    get session()
+    {
+        // RFC 2965 suggests using Discard attribute to mark session cookies, but this does not seem to be widely used.
+        // Check for absence of explicity max-age or expiry date instead.
+        return  !("expries" in this._attributes || "max-age" in this._attributes);
+    },
+
+    get path()
+    {
+        return this._attributes.path;
+    },
+
+    get domain()
+    {
+        return this._attributes.domain;
+    },
+
+    expires: function(requestDate)
+    {
+        return this._attributes.expires ? new Date(this._attributes.expires) :
+            (this._attributes["max-age"] ? new Date(requestDate.getTime() + 1000 * this._attributes["max-age"]) : null);
+    },
+
+    get attributes()
+    {
+        return this._attributes;
+    },
+
+    addAttribute: function(key, value)
+    {
+        this._attributes[key.toLowerCase()] = value;
+    }
+}
+
+WebInspector.Cookie.Type = {
+    Request: 0,
+    Response: 1
+};

front-end/CookiesTable.js

@@ -0,0 +1,205 @@
+/*
+ * Copyright (C) 2009 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ * Copyright (C) 2010 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CookiesTable = function(cookieDomain, expandable, deleteCallback)
+{
+    this._cookieDomain = cookieDomain;
+
+    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[0].width = "24%";
+    columns[1].title = WebInspector.UIString("Value");
+    columns[1].sortable = true;
+    columns[1].width = "34%";
+    columns[2].title = WebInspector.UIString("Domain");
+    columns[2].sortable = true;
+    columns[2].width = "7%";
+    columns[3].title = WebInspector.UIString("Path");
+    columns[3].sortable = true;
+    columns[3].width = "7%";
+    columns[4].title = WebInspector.UIString("Expires");
+    columns[4].sortable = true;
+    columns[4].width = "7%";
+    columns[5].title = WebInspector.UIString("Size");
+    columns[5].aligned = "right";
+    columns[5].sortable = true;
+    columns[5].width = "7%";
+    columns[6].title = WebInspector.UIString("HTTP");
+    columns[6].aligned = "centered";
+    columns[6].sortable = true;
+    columns[6].width = "7%";
+    columns[7].title = WebInspector.UIString("Secure");
+    columns[7].aligned = "centered";
+    columns[7].sortable = true;
+    columns[7].width = "7%";
+
+    this._dataGrid = new WebInspector.DataGrid(columns, null, deleteCallback ? this._onDeleteFromGrid.bind(this) : null);
+    this._dataGrid.addEventListener("sorting changed", this._rebuildTable, this);
+
+    this.element = this._dataGrid.element;
+    this._data = [];
+    this._deleteCallback = deleteCallback;
+}
+
+WebInspector.CookiesTable.prototype = {
+    updateWidths: function()
+    {
+        if (this._dataGrid)
+            this._dataGrid.updateWidths();
+    },
+
+    setCookies: function(cookies)
+    {
+        this._data = [{cookies: cookies}];
+        this._rebuildTable();
+    },
+
+    addCookiesFolder: function(folderName, cookies)
+    {
+        this._data.push({cookies: cookies, folderName: folderName});
+        this._rebuildTable();
+    },
+
+    get selectedCookie()
+    {
+        var node = this._dataGrid.selectedNode;
+        return node ? node.cookie : null;
+    },
+
+    _rebuildTable: function()
+    {
+        this._dataGrid.removeChildren();
+        for (var i = 0; i < this._data.length; ++i) {
+            var item = this._data[i];
+            if (item.folderName) {
+                var groupData = [ item.folderName, "", "", "", "", this._totalSize(item.cookies), "", "" ];
+                var groupNode = new WebInspector.DataGridNode(groupData);
+                groupNode.selectable = true;
+                this._dataGrid.appendChild(groupNode);
+                groupNode.element.addStyleClass("row-group");
+                this._populateNode(groupNode, item.cookies);
+                groupNode.expand();
+            } else
+                this._populateNode(this._dataGrid, item.cookies);
+        }
+    },
+
+    _populateNode: function(parentNode, cookies)
+    {
+        var selectedCookie = this.selectedCookie;
+        parentNode.removeChildren();
+        if (!cookies)
+            return;
+
+        this._sortCookies(cookies);
+        for (var i = 0; i < cookies.length; ++i) {
+            var cookieNode = this._createGridNode(cookies[i]);
+            parentNode.appendChild(cookieNode);
+            if (selectedCookie === cookies[i])
+                cookieNode.selected = true;
+        }
+    },
+
+    _totalSize: function(cookies)
+    {
+        var totalSize = 0;
+        for (var i = 0; cookies && i < cookies.length; ++i)
+            totalSize += cookies[i].size;
+        return totalSize;
+    },
+
+    _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;
+        const checkmark = "\u2713";
+        data[6] = (cookie.httpOnly ? checkmark : "");
+        data[7] = (cookie.secure ? checkmark : "");
+
+        var node = new WebInspector.DataGridNode(data);
+        node.cookie = cookie;
+        node.selectable = true;
+        return node;
+    },
+
+    _onDeleteFromGrid: function(node)
+    {
+        this._deleteCallback(node.cookie);
+    }
+}

front-end/DOMAgent.js

@@ -500,17 +500,12 @@ WebInspector.Cookies.buildCookiesFromString = function(rawCookieString)
 
 WebInspector.Cookies.cookieMatchesResourceURL = function(cookie, resourceURL)
 {
-    var match = resourceURL.match(WebInspector.GenericURLRegExp);
-    if (!match)
+    var url = resourceURL.asParsedURL();
+    if (!url || !this.cookieDomainMatchesResourceDomain(cookie.domain, url.host))
         return false;
-    // See WebInspector.URLRegExp for definitions of the group index constants.
-    if (!this.cookieDomainMatchesResourceDomain(cookie.domain, match[2]))
-        return false;
-    var resourcePort = match[3] ? match[3] : undefined;
-    var resourcePath = match[4] ? match[4] : '/';
-    return (resourcePath.indexOf(cookie.path) === 0
-        && (!cookie.port || resourcePort == cookie.port)
-        && (!cookie.secure || match[1].toLowerCase() === 'https'));
+    return (url.path.indexOf(cookie.path) === 0
+        && (!cookie.port || url.port == cookie.port)
+        && (!cookie.secure || url.scheme === "https"));
 }
 
 WebInspector.Cookies.cookieDomainMatchesResourceDomain = function(cookieDomain, resourceDomain)
@@ -529,147 +524,6 @@ WebInspector.EventListeners.getEventListenersForNodeAsync = function(node, callb
     InspectorBackend.getEventListenersForNode(node.id, callback);
 }
 
-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._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];
-        var name = property.name;
-        this[i] = name;
-        this._propertyMap[name] = property;
-
-        // Index longhand properties.
-        if (property.shorthand) {
-            var longhands = this._longhandProperties[property.shorthand];
-            if (!longhands) {
-                longhands = [];
-                this._longhandProperties[property.shorthand] = longhands;
-            }
-            longhands.push(name);
-        }
-    }
-}
-
-WebInspector.CSSStyleDeclaration.parseStyle = 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 = {
-    getPropertyValue: function(name)
-    {
-        var property = this._propertyMap[name];
-        return property ? property.value : "";
-    },
-
-    getPropertyPriority: function(name)
-    {
-        var property = this._propertyMap[name];
-        return property ? property.priority : "";
-    },
-
-    getPropertyShorthand: function(name)
-    {
-        var property = this._propertyMap[name];
-        return property ? property.shorthand : "";
-    },
-
-    isPropertyImplicit: function(name)
-    {
-        var property = this._propertyMap[name];
-        return property ? property.implicit : "";
-    },
-
-    styleTextWithShorthands: function()
-    {
-        var cssText = "";
-        var foundProperties = {};
-        for (var i = 0; i < this.length; ++i) {
-            var individualProperty = this[i];
-            var shorthandProperty = this.getPropertyShorthand(individualProperty);
-            var propertyName = (shorthandProperty || individualProperty);
-
-            if (propertyName in foundProperties)
-                continue;
-
-            if (shorthandProperty) {
-                var value = this.getShorthandValue(shorthandProperty);
-                var priority = this.getShorthandPriority(shorthandProperty);
-            } else {
-                var value = this.getPropertyValue(individualProperty);
-                var priority = this.getPropertyPriority(individualProperty);
-            }
-
-            foundProperties[propertyName] = true;
-
-            cssText += propertyName + ": " + value;
-            if (priority)
-                cssText += " !" + priority;
-            cssText += "; ";
-        }
-
-        return cssText;
-    },
-
-    getLonghandProperties: function(name)
-    {
-        return this._longhandProperties[name] || [];
-    },
-
-    getShorthandValue: function(shorthandProperty)
-    {
-        return this._shorthandValues[shorthandProperty];
-    },
-
-    getShorthandPriority: function(shorthandProperty)
-    {
-        var priority = this.getPropertyPriority(shorthandProperty);
-        if (priority)
-            return priority;
-
-        var longhands = this._longhandProperties[shorthandProperty];
-        return longhands ? this.getPropertyPriority(longhands[0]) : null;
-    }
-}
-
 WebInspector.attributesUpdated = function()
 {
     this.domAgent._attributesUpdated.apply(this.domAgent, arguments);

front-end/DataGrid.js

@@ -53,12 +53,12 @@ WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
     
     this.aligned = {};
 
-    var scrollContainer = document.createElement("div");
-    scrollContainer.className = "data-container";
-    scrollContainer.appendChild(this._dataTable);
+    this._scrollContainer = document.createElement("div");
+    this._scrollContainer.className = "data-container";
+    this._scrollContainer.appendChild(this._dataTable);
 
     this.element.appendChild(this._headerTable);
-    this.element.appendChild(scrollContainer);
+    this.element.appendChild(this._scrollContainer);
 
     var headerRow = document.createElement("tr");
     var columnGroup = document.createElement("colgroup");
@@ -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
@@ -472,6 +485,16 @@ WebInspector.DataGrid.prototype = {
         this._columnWidthsInitialized = false;
     },
 
+    isScrolledToLastRow: function()
+    {
+        return this._scrollContainer.scrollTop === this._scrollContainer.scrollHeight - this._scrollContainer.offsetHeight;
+    },
+
+    scrollToLastRow: function()
+    {
+        this._scrollContainer.scrollTop = this._scrollContainer.scrollHeight - this._scrollContainer.offsetHeight;
+    },
+
     _positionResizers: function()
     {
         var headerTableColumns = this._headerTableColumnGroup.children;
@@ -661,7 +684,7 @@ WebInspector.DataGrid.prototype = {
         var fillerRow = childNodes[childNodes.length - 1];
 
         var sortedRows = Array.prototype.slice.call(childNodes, 0, childNodes.length - 1);
-        sortedRows.sort(comparatorWrapper.bind(this));
+        sortedRows.sort(comparatorWrapper);
         var sortedRowsLength = sortedRows.length;
 
         tbody.removeChildren();

front-end/DatabaseQueryView.js

@@ -139,7 +139,7 @@ WebInspector.DatabaseQueryView.prototype = {
 
     _queryFinished: function(query, columnNames, values)
     {
-        var dataGrid = WebInspector.panels.storage.dataGridForResult(columnNames, values);
+        var dataGrid = WebInspector.panels.resources.dataGridForResult(columnNames, values);
         var trimmedQuery = query.trim();
 
         if (dataGrid) {
@@ -149,7 +149,7 @@ WebInspector.DatabaseQueryView.prototype = {
         }
 
         if (trimmedQuery.match(/^create /i) || trimmedQuery.match(/^drop table /i))
-            WebInspector.panels.storage.updateDatabaseTables(this.database);
+            WebInspector.panels.resources.updateDatabaseTables(this.database);
     },
 
     _queryError: function(query, error)

front-end/DatabaseTableView.js

@@ -58,10 +58,10 @@ WebInspector.DatabaseTableView.prototype = {
     {
         this.element.removeChildren();
 
-        var dataGrid = WebInspector.panels.storage.dataGridForResult(columnNames, values);
+        var dataGrid = WebInspector.panels.resources.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;

front-end/ElementsPanel.js

@@ -58,7 +58,7 @@ WebInspector.ElementsPanel = function()
 
         if (this._focusedDOMNode) {
             InspectorBackend.addInspectedNode(this._focusedDOMNode.id);
-            WebInspector.extensionServer.notifyObjectSelected(this.panel.name, "DOMNode");
+            WebInspector.extensionServer.notifyObjectSelected(this.panel.name);
         }
     };
 
@@ -107,7 +107,6 @@ WebInspector.ElementsPanel = function()
     this.element.appendChild(this.sidebarResizeElement);
 
     this._registerShortcuts();
-    this._changedStyles = {};
 
     this.reset();
 }
@@ -346,115 +345,6 @@ WebInspector.ElementsPanel.prototype = {
         // TODO: Implement Shifting the oldSelector, and its contents to a newSelector
     },
 
-    addStyleChange: function(identifier, style, property)
-    {
-        if (!style.parentRule)
-            return;
-
-        var selector = style.parentRule.selectorText;
-        if (!this._changedStyles[identifier])
-            this._changedStyles[identifier] = {};
-
-        if (!this._changedStyles[identifier][selector])
-            this._changedStyles[identifier][selector] = {};
-
-        if (!this._changedStyles[identifier][selector][property])
-            WebInspector.styleChanges += 1;
-
-        this._changedStyles[identifier][selector][property] = style.getPropertyValue(property);
-    },
-
-    removeStyleChange: function(identifier, style, property)
-    {
-        if (!style.parentRule)
-            return;
-
-        var selector = style.parentRule.selectorText;
-        if (!this._changedStyles[identifier] || !this._changedStyles[identifier][selector])
-            return;
-
-        if (this._changedStyles[identifier][selector][property]) {
-            delete this._changedStyles[identifier][selector][property];
-            WebInspector.styleChanges -= 1;
-        }
-    },
-
-    generateStylesheet: function()
-    {
-        if (!WebInspector.styleChanges)
-            return;
-
-        // Merge Down to Just Selectors
-        var mergedSelectors = {};
-        for (var identifier in this._changedStyles) {
-            for (var selector in this._changedStyles[identifier]) {
-                if (!mergedSelectors[selector])
-                    mergedSelectors[selector] = this._changedStyles[identifier][selector];
-                else { // merge on selector
-                    var merge = {};
-                    for (var property in mergedSelectors[selector])
-                        merge[property] = mergedSelectors[selector][property];
-                    for (var property in this._changedStyles[identifier][selector]) {
-                        if (!merge[property])
-                            merge[property] = this._changedStyles[identifier][selector][property];
-                        else { // merge on property within a selector, include comment to notify user
-                            var value1 = merge[property];
-                            var value2 = this._changedStyles[identifier][selector][property];
-
-                            if (value1 === value2)
-                                merge[property] = [value1];
-                            else if (value1 instanceof Array)
-                                merge[property].push(value2);
-                            else
-                                merge[property] = [value1, value2];
-                        }
-                    }
-                    mergedSelectors[selector] = merge;
-                }
-            }
-        }
-
-        var builder = [];
-        builder.push("/**");
-        builder.push(" * Inspector Generated Stylesheet"); // UIString?
-        builder.push(" */\n");
-
-        var indent = "  ";
-        function displayProperty(property, value, comment) {
-            if (comment)
-                return indent + "/* " + property + ": " + value + "; */";
-            else
-                return indent + property + ": " + value + ";";
-        }
-
-        for (var selector in mergedSelectors) {
-            var psuedoStyle = mergedSelectors[selector];
-            var properties = Object.properties(psuedoStyle);
-            if (properties.length) {
-                builder.push(selector + " {");
-                for (var i = 0; i < properties.length; ++i) {
-                    var property = properties[i];
-                    var value = psuedoStyle[property];
-                    if (!(value instanceof Array))
-                        builder.push(displayProperty(property, value));
-                    else {
-                        if (value.length === 1)
-                            builder.push(displayProperty(property, value) + " /* merged from equivalent edits */"); // UIString?
-                        else {                        
-                            builder.push(indent + "/* There was a Conflict... There were Multiple Edits for '" + property + "' */"); // UIString?
-                            for (var j = 0; j < value.length; ++j)
-                                builder.push(displayProperty(property, value, true));
-                        }
-                    }
-                }
-                builder.push("}\n");
-            }
-        }
-
-        WebInspector.showConsole();
-        WebInspector.console.addMessage(WebInspector.ConsoleMessage.createTextMessage(builder.join("\n")));
-    },
-
     get rootDOMNode()
     {
         return this.treeOutline.rootDOMNode;

front-end/ElementsTreeOutline.js

@@ -265,21 +265,28 @@ WebInspector.ElementsTreeOutline.prototype = {
             return;
 
         var contextMenu = new WebInspector.ContextMenu();
-
-        var href = event.target.enclosingNodeOrSelfWithClass("webkit-html-resource-link") || event.target.enclosingNodeOrSelfWithClass("webkit-html-external-link");
-        var tag = event.target.enclosingNodeOrSelfWithClass("webkit-html-tag");
-        var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node");
-        var needSeparator;
-        if (href)
-            needSeparator = WebInspector.panels.elements.populateHrefContextMenu(contextMenu, event, href);
-        if (tag && listItem.treeElement._populateTagContextMenu) {
-            if (needSeparator)
-                contextMenu.appendSeparator();
-            listItem.treeElement._populateTagContextMenu(contextMenu, event);
-        } else if (textNode && listItem.treeElement._populateTextContextMenu) {
-            if (needSeparator)
-                contextMenu.appendSeparator();
-            listItem.treeElement._populateTextContextMenu(contextMenu, textNode);
+        if (this.showInElementsPanelEnabled) {
+            function focusElement()
+            {
+                WebInspector.panels.elements.focusedDOMNode = listItem.treeElement.representedObject;
+            }
+            contextMenu.appendItem(WebInspector.UIString("Reveal in Elements Panel"), focusElement.bind(this));
+        } else {
+            var href = event.target.enclosingNodeOrSelfWithClass("webkit-html-resource-link") || event.target.enclosingNodeOrSelfWithClass("webkit-html-external-link");
+            var tag = event.target.enclosingNodeOrSelfWithClass("webkit-html-tag");
+            var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node");
+            var needSeparator;
+            if (href)
+                needSeparator = WebInspector.panels.elements.populateHrefContextMenu(contextMenu, event, href);
+            if (tag && listItem.treeElement._populateTagContextMenu) {
+                if (needSeparator)
+                    contextMenu.appendSeparator();
+                listItem.treeElement._populateTagContextMenu(contextMenu, event);
+            } else if (textNode && listItem.treeElement._populateTextContextMenu) {
+                if (needSeparator)
+                    contextMenu.appendSeparator();
+                listItem.treeElement._populateTextContextMenu(contextMenu, textNode);
+            }
         }
         contextMenu.show(event);
     }
@@ -593,8 +600,8 @@ WebInspector.ElementsTreeElement.prototype = {
         if (childNodeCount > this.expandedChildCount) {
             var targetButtonIndex = expandedChildCount;
             if (!this.expandAllButtonElement) {
-                var title = "<button class=\"show-all-nodes\" value=\"\" />";
-                var item = new TreeElement(title, null, false);
+                var item = new TreeElement(null, null, false);
+                item.titleHTML = "<button class=\"show-all-nodes\" value=\"\" />";
                 item.selectable = false;
                 item.expandAllButton = true;
                 this.insertChild(item, targetButtonIndex);
@@ -758,13 +765,18 @@ WebInspector.ElementsTreeElement.prototype = {
             // Add debbuging-related actions
             contextMenu.appendSeparator();
 
+            function handlerFunction(nodeId, breakType)
+            {
+                WebInspector.breakpointManager.createDOMBreakpoint(nodeId, breakType);
+                WebInspector.panels.elements.sidebarPanes.domBreakpoints.expand();
+            }
             var node = this.representedObject;
             for (var key in WebInspector.DOMBreakpointTypes) {
                 var type = WebInspector.DOMBreakpointTypes[key];
                 var label = WebInspector.domBreakpointTypeContextMenuLabel(type);
                 var breakpoint = node.breakpoints[type];
                 if (!breakpoint)
-                    var handler = WebInspector.breakpointManager.createDOMBreakpoint.bind(WebInspector.breakpointManager, node.id, type);
+                    var handler = handlerFunction.bind(this, node.id, type);
                 else
                     var handler = breakpoint.remove.bind(breakpoint);
                 contextMenu.appendCheckboxItem(label, handler, !!breakpoint);
@@ -1170,8 +1182,7 @@ WebInspector.ElementsTreeElement.prototype = {
         if (this._editing)
             return;
 
-        var title = this._nodeTitleInfo(WebInspector.linkifyURL).title;
-        this.title = "<span class=\"highlight\">" + title + "</span>";
+        this.titleHTML = "<span class=\"highlight\">" + this._nodeTitleInfo(WebInspector.linkifyURL).titleHTML + "</span>";
         delete this.selectionElement;
         this.updateSelection();
         this._preventFollowingLinksOnDoubleClick();
@@ -1221,53 +1232,54 @@ WebInspector.ElementsTreeElement.prototype = {
     _nodeTitleInfo: function(linkify)
     {
         var node = this.representedObject;
-        var info = {title: "", hasChildren: this.hasChildren};
+        var info = {titleHTML: "", hasChildren: this.hasChildren};
 
         switch (node.nodeType) {
             case Node.DOCUMENT_NODE:
-                info.title = "Document";
+                info.titleHTML = "Document";
                 break;
 
             case Node.DOCUMENT_FRAGMENT_NODE:
-                info.title = "Document Fragment";
+                info.titleHTML = "Document Fragment";
                 break;
 
             case Node.ATTRIBUTE_NODE:
                 var value = node.value || "\u200B"; // Zero width space to force showing an empty value.
-                info.title = this._attributeHTML(node.name, value);
+                info.titleHTML = this._attributeHTML(node.name, value);
                 break;
 
             case Node.ELEMENT_NODE:
                 var tagName = this.treeOutline.nodeNameToCorrectCase(node.nodeName).escapeHTML();
                 if (this._elementCloseTag) {
-                    info.title = this._tagHTML(tagName, true, true);
+                    info.titleHTML = this._tagHTML(tagName, true, true);
                     info.hasChildren = false;
                     break;
                 }
 
-                info.title = this._tagHTML(tagName, false, false, linkify);
+                var titleHTML = this._tagHTML(tagName, false, false, linkify);
 
                 var textChild = onlyTextChild.call(node);
                 var showInlineText = textChild && textChild.textContent.length < Preferences.maxInlineTextChildLength;
 
                 if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WebInspector.ElementsTreeElement.ForbiddenClosingTagElements[tagName]))) {
                     if (this.hasChildren)
-                        info.title += "<span class=\"webkit-html-text-node\">&#8230;</span>&#8203;";
-                    info.title += this._tagHTML(tagName, true, false);
+                        titleHTML += "<span class=\"webkit-html-text-node\">&#8230;</span>&#8203;";
+                    titleHTML += this._tagHTML(tagName, true, false);
                 }
 
                 // If this element only has a single child that is a text node,
                 // just show that text and the closing tag inline rather than
                 // create a subtree for them
                 if (showInlineText) {
-                    info.title += "<span class=\"webkit-html-text-node\">" + textChild.nodeValue.escapeHTML() + "</span>&#8203;" + this._tagHTML(tagName, true, false);
+                    titleHTML += "<span class=\"webkit-html-text-node\">" + textChild.nodeValue.escapeHTML() + "</span>&#8203;" + this._tagHTML(tagName, true, false);
                     info.hasChildren = false;
                 }
+                info.titleHTML = titleHTML;
                 break;
 
             case Node.TEXT_NODE:
                 if (isNodeWhitespace.call(node))
-                    info.title = "(whitespace)";
+                    info.titleHTML = "(whitespace)";
                 else {
                     if (node.parentNode && node.parentNode.nodeName.toLowerCase() === "script") {
                         var newNode = document.createElement("span");
@@ -1276,7 +1288,7 @@ WebInspector.ElementsTreeElement.prototype = {
                         var javascriptSyntaxHighlighter = new WebInspector.DOMSyntaxHighlighter("text/javascript");
                         javascriptSyntaxHighlighter.syntaxHighlightNode(newNode);
 
-                        info.title = "<span class=\"webkit-html-text-node webkit-html-js-node\">" + newNode.innerHTML.replace(/^[\n\r]*/, "").replace(/\s*$/, "") + "</span>";
+                        info.titleHTML = "<span class=\"webkit-html-text-node webkit-html-js-node\">" + newNode.innerHTML.replace(/^[\n\r]*/, "").replace(/\s*$/, "") + "</span>";
                     } else if (node.parentNode && node.parentNode.nodeName.toLowerCase() === "style") {
                         var newNode = document.createElement("span");
                         newNode.textContent = node.textContent;
@@ -1284,35 +1296,35 @@ WebInspector.ElementsTreeElement.prototype = {
                         var cssSyntaxHighlighter = new WebInspector.DOMSyntaxHighlighter("text/css");
                         cssSyntaxHighlighter.syntaxHighlightNode(newNode);
 
-                        info.title = "<span class=\"webkit-html-text-node webkit-html-css-node\">" + newNode.innerHTML.replace(/^[\n\r]*/, "").replace(/\s*$/, "") + "</span>";
-                    } else {
-                        info.title = "\"<span class=\"webkit-html-text-node\">" + node.nodeValue.escapeHTML() + "</span>\"";
-                    }
+                        info.titleHTML = "<span class=\"webkit-html-text-node webkit-html-css-node\">" + newNode.innerHTML.replace(/^[\n\r]*/, "").replace(/\s*$/, "") + "</span>";
+                    } else
+                        info.titleHTML = "\"<span class=\"webkit-html-text-node\">" + node.nodeValue.escapeHTML() + "</span>\"";
                 }
                 break;
 
             case Node.COMMENT_NODE:
-                info.title = "<span class=\"webkit-html-comment\">&lt;!--" + node.nodeValue.escapeHTML() + "--&gt;</span>";
+                info.titleHTML = "<span class=\"webkit-html-comment\">&lt;!--" + node.nodeValue.escapeHTML() + "--&gt;</span>";
                 break;
 
             case Node.DOCUMENT_TYPE_NODE:
-                info.title = "<span class=\"webkit-html-doctype\">&lt;!DOCTYPE " + node.nodeName;
+                var titleHTML = "<span class=\"webkit-html-doctype\">&lt;!DOCTYPE " + node.nodeName;
                 if (node.publicId) {
-                    info.title += " PUBLIC \"" + node.publicId + "\"";
+                    titleHTML += " PUBLIC \"" + node.publicId + "\"";
                     if (node.systemId)
-                        info.title += " \"" + node.systemId + "\"";
+                        titleHTML += " \"" + node.systemId + "\"";
                 } else if (node.systemId)
-                    info.title += " SYSTEM \"" + node.systemId + "\"";
+                    titleHTML += " SYSTEM \"" + node.systemId + "\"";
                 if (node.internalSubset)
-                    info.title += " [" + node.internalSubset + "]";
-                info.title += "&gt;</span>";
+                    titleHTML += " [" + node.internalSubset + "]";
+                titleHTML += "&gt;</span>";
+                info.titleHTML = titleHTML;
                 break;
 
             case Node.CDATA_SECTION_NODE:
-                info.title = "<span class=\"webkit-html-text-node\">&lt;![CDATA[" + node.nodeValue.escapeHTML() + "]]&gt;</span>";
+                info.titleHTML = "<span class=\"webkit-html-text-node\">&lt;![CDATA[" + node.nodeValue.escapeHTML() + "]]&gt;</span>";
                 break;
             default:
-                info.title = this.treeOutline.nodeNameToCorrectCase(node.nodeName).collapseWhitespace().escapeHTML();
+                info.titleHTML = this.treeOutline.nodeNameToCorrectCase(node.nodeName).collapseWhitespace().escapeHTML();
         }
 
         return info;

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.settings.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;
@@ -112,7 +107,7 @@ WebInspector.EventListenersSidebarPane.prototype = {
     _changeSetting: function(event)
     {
         var selectedOption = this.settingsSelectElement[this.settingsSelectElement.selectedIndex];
-        WebInspector.applicationSettings.eventListenersFilter = selectedOption.value;
+        WebInspector.settings.eventListenersFilter = selectedOption.value;
 
         for (var i = 0; i < this.sections.length; ++i)
             this.sections[i].update();
@@ -142,7 +137,7 @@ WebInspector.EventListenersSection.prototype = {
     {
         // A Filtered Array simplifies when to create connectors
         var filteredEventListeners = this.eventListeners;
-        if (WebInspector.applicationSettings.eventListenersFilter === "selected") {
+        if (WebInspector.settings.eventListenersFilter === "selected") {
             filteredEventListeners = [];
             for (var i = 0; i < this.eventListeners.length; ++i) {
                 var eventListener = this.eventListeners[i];
@@ -156,12 +151,6 @@ WebInspector.EventListenersSection.prototype = {
         for (var i = 0; i < length; ++i) {
             var eventListener = filteredEventListeners[i];
             var eventListenerBar = new WebInspector.EventListenerBar(eventListener, this._nodeId);
-            if (i < length - 1) {
-                var connector = document.createElement("div");
-                connector.className = "event-bar-connector";
-                eventListenerBar.element.appendChild(connector);
-            }
-
             this.eventBars.appendChild(eventListenerBar.element);
         }
     },
@@ -183,6 +172,7 @@ WebInspector.EventListenerBar = function(eventListener, nodeId)
     this._setFunctionSubtitle();
     this.editable = false;
     this.element.className = "event-bar"; /* Changed from "section" */
+    this.headerElement.addStyleClass("source-code");
     this.propertiesElement.className = "event-properties properties-tree source-code"; /* Changed from "properties" */
 }
 

front-end/ExtensionAPI.js

@@ -85,13 +85,6 @@ EventSinkImpl.prototype = {
     }
 }
 
-function EventSink(type, customDispatch)
-{
-    var impl = new EventSinkImpl(type, customDispatch);
-    this.addListener = bind(impl.addListener, impl);
-    this.removeListener = bind(impl.removeListener, impl);
-}
-
 function InspectorExtensionAPI()
 {
     this.audits = new Audits();
@@ -111,72 +104,73 @@ InspectorExtensionAPI.prototype = {
 
 function Resources()
 {
-    this.onFinished = new EventSink("resource-finished");
+    function resourceDispatch(request)
+    {
+        var resource = request.arguments[1];
+        resource.__proto__ = new Resource(request.arguments[0]);
+        this._fire(resource);
+    }
+    this.onFinished = new EventSink("resource-finished", resourceDispatch);
 }
 
 Resources.prototype = {
-    getAll: function(callback)
+    getHAR: function(callback)
     {
-        return extensionServer.sendRequest({ command: "getResources" }, callback);
-    },
-
-    get: function(id, callback)
-    {
-        return extensionServer.sendRequest({ command: "getResources", id: id }, callback);
-    },
-
-    getPageTimings: function(callback)
-    {
-        return extensionServer.sendRequest({ command: "getPageTimings" }, callback);
-    },
-
-    getContent: function(ids, callback)
-    {
-        return extensionServer.sendRequest({ command: "getResourceContent", ids: ids }, callback);
+        function callbackWrapper(result)
+        {
+            var entries = (result && result.entries) || [];
+            for (var i = 0; i < entries.length; ++i) {
+                entries[i].__proto__ = new Resource(entries[i]._resourceId);
+                delete entries[i]._resourceId;
+            }
+            callback(result);
+        }
+        return extensionServer.sendRequest({ command: "getHAR" }, callback && callbackWrapper);
     }
 }
 
-var wellKnownPanelNames = [
-    "elements",
-    "scripts"
-];
+function ResourceImpl(id)
+{
+    this._id = id;
+}
+
+ResourceImpl.prototype = {
+    getContent: function(callback)
+    {
+        function callbackWrapper(response)
+        {
+            callback(response.content, response.encoding);
+        }
+        extensionServer.sendRequest({ command: "getResourceContent", id: this._id }, callback && callbackWrapper);
+    }
+};
 
 function Panels()
 {
-    var panels = [];
+    var panels = {
+        elements: new ElementsPanel()
+    };
+
     function panelGetter(name)
     {
         return panels[name];
     }
-
-    for (var i = 0; i < wellKnownPanelNames.length; ++i) {
-        var name = wellKnownPanelNames[i];
-        panels[name] = new Panel(name);
-        this.__defineGetter__(name, bind(panelGetter, null, name));
-    }
+    for (var panel in panels)
+        this.__defineGetter__(panel, bind(panelGetter, null, panel));
 }
 
 Panels.prototype = {
-    create: function(label, pageURL, iconURL, callback)
+    create: function(title, iconURL, pageURL, callback)
     {
         var id = "extension-panel-" + extensionServer.nextObjectId();
-        function callbackWrapper(result)
-        {
-            if (result.isError)
-                callback(result);
-            else {
-                panel = new ExtensionPanel(id);
-                callback(panel);
-            }
-        }
         var request = {
             command: "createPanel",
             id: id,
-            label: label,
-            url: expandURL(pageURL),
-            icon: expandURL(iconURL)
+            title: title,
+            icon: expandURL(iconURL),
+            url: expandURL(pageURL)
         };
-        extensionServer.sendRequest(request, callback && bind(callbackWrapper, this));
+        extensionServer.sendRequest(request, callback && bind(callback, this, new ExtensionPanel(id)));
     }
 }
 
@@ -185,25 +179,52 @@ function PanelImpl(id)
     this._id = id;
 }
 
-PanelImpl.prototype = {
+function PanelWithSidebarImpl(id)
+{
+    PanelImpl.call(this, id);
+}
+
+PanelWithSidebarImpl.prototype = {
     createSidebarPane: function(title, url, callback)
     {
         var id = "extension-sidebar-" + extensionServer.nextObjectId();
-        function callbackWrapper(result)
+        var request = {
+            command: "createSidebarPane",
+            panel: this._id,
+            id: id,
+            title: title,
+            url: expandURL(url)
+        };
+        function callbackWrapper()
         {
-            if (result.isError)
-                callback(result);
-            else
-                callback(new ExtensionSidebarPane(id));
+            callback(new ExtensionSidebarPane(id));
         }
-        extensionServer.sendRequest({ command: "createSidebarPane", panel: this._id, id: id, title: title, url: expandURL(url) }, callback && callbackWrapper);
+        extensionServer.sendRequest(request, callback && callbackWrapper);
+    },
+
+    createWatchExpressionSidebarPane: function(title, callback)
+    {
+        var id = "watch-sidebar-" + extensionServer.nextObjectId();
+        var request = {
+            command: "createWatchExpressionSidebarPane",
+            panel: this._id,
+            id: id,
+            title: title
+        };
+        function callbackWrapper()
+        {
+            callback(new WatchExpressionSidebarPane(id));
+        }
+        extensionServer.sendRequest(request, callback && callbackWrapper);
     }
 }
 
-function Panel(id)
+PanelWithSidebarImpl.prototype.__proto__ = PanelImpl.prototype;
+
+function ElementsPanel()
 {
-    var impl = new PanelImpl(id);
-    this.createSidebarPane = bind(impl.createSidebarPane, impl);
+    var id = "elements";
+    PanelWithSidebar.call(this, id);
     this.onSelectionChanged = new EventSink("panel-objectSelected-" + id);
 }
 
@@ -213,11 +234,6 @@ function ExtensionPanel(id)
     this.onSearch = new EventSink("panel-search-" + id);
 }
 
-ExtensionPanel.prototype = {
-}
-
-ExtensionPanel.prototype.__proto__ = Panel.prototype;
-
 function ExtensionSidebarPaneImpl(id)
 {
     this._id = id;
@@ -227,19 +243,33 @@ ExtensionSidebarPaneImpl.prototype = {
     setHeight: function(height)
     {
         extensionServer.sendRequest({ command: "setSidebarHeight", id: this._id, height: height });
-    },
-
-    setExpanded: function(expanded)
-    {
-        extensionServer.sendRequest({ command: "setSidebarExpanded", id: this._id, expanded: expanded });
     }
 }
 
-function ExtensionSidebarPane(id)
+function WatchExpressionSidebarPaneImpl(id)
 {
-    var impl = new ExtensionSidebarPaneImpl(id);
-    this.setHeight = bind(impl.setHeight, impl);
-    this.setExpanded = bind(impl.setExpanded, impl);
+    ExtensionSidebarPaneImpl.call(this, id);
+    this.onUpdated = new EventSink("watch-sidebar-updated-" + id);
+}
+
+WatchExpressionSidebarPaneImpl.prototype = {
+    setExpression: function(expression, rootTitle)
+    {
+        extensionServer.sendRequest({ command: "setWatchSidebarContent", id: this._id, expression: expression, rootTitle: rootTitle, evaluateOnPage: true });
+    },
+
+    setObject: function(jsonObject, rootTitle)
+    {
+        extensionServer.sendRequest({ command: "setWatchSidebarContent", id: this._id, expression: jsonObject, rootTitle: rootTitle });
+    }
+}
+
+WatchExpressionSidebarPaneImpl.prototype.__proto__ = ExtensionSidebarPaneImpl.prototype;
+
+function WatchExpressionSidebarPane(id)
+{
+    var impl = new WatchExpressionSidebarPaneImpl(id);
+    ExtensionSidebarPane.call(this, id, impl);
 }
 
 function Audits()
@@ -247,17 +277,17 @@ function Audits()
 }
 
 Audits.prototype = {
-    addCategory: function(displayName, ruleCount)
+    addCategory: function(displayName, resultCount)
     {
         var id = "extension-audit-category-" + extensionServer.nextObjectId();
-        extensionServer.sendRequest({ command: "addAuditCategory", id: id, displayName: displayName, ruleCount: ruleCount });
+        extensionServer.sendRequest({ command: "addAuditCategory", id: id, displayName: displayName, resultCount: resultCount });
         return new AuditCategory(id);
     }
 }
 
-function AuditCategory(id)
+function AuditCategoryImpl(id)
 {
-    function customDispatch(request)
+    function auditResultDispatch(request)
     {
         var auditResult = new AuditResult(request.arguments[0]);
         try {
@@ -267,22 +297,13 @@ function AuditCategory(id)
             auditResult.done();
         }
     }
-    var impl = new AuditCategoryImpl(id);
-    this.onAuditStarted = new EventSink("audit-started-" + id, customDispatch);
+    this._id = id;
+    this.onAuditStarted = new EventSink("audit-started-" + id, auditResultDispatch);
 }
 
-function AuditCategoryImpl(id)
+function AuditResultImpl(id)
 {
     this._id = id;
-}
-
-function AuditResult(id)
-{
-    var impl = new AuditResultImpl(id);
-
-    this.addResult = bind(impl.addResult, impl);
-    this.createResult = bind(impl.createResult, impl);
-    this.done = bind(impl.done, impl);
 
     var formatterTypes = [
         "url",
@@ -290,19 +311,7 @@ function AuditResult(id)
         "text"
     ];
     for (var i = 0; i < formatterTypes.length; ++i)
-        this[formatterTypes[i]] = bind(impl._nodeFactory, null, formatterTypes[i]);
-}
-
-AuditResult.prototype = {
-    get Severity()
-    {
-        return private.audits.Severity;
-    }
-}
-
-function AuditResultImpl(id)
-{
-    this._id = id;
+        this[formatterTypes[i]] = bind(this._nodeFactory, null, formatterTypes[i]);
 }
 
 AuditResultImpl.prototype = {
@@ -335,6 +344,11 @@ AuditResultImpl.prototype = {
         extensionServer.sendRequest({ command: "stopAuditCategoryRun", resultId: this._id });
     },
 
+    get Severity()
+    {
+        return apiPrivate.audits.Severity;
+    },
+
     _nodeFactory: function(type)
     {
         return {
@@ -362,9 +376,9 @@ AuditResultNode.prototype = {
 
 function InspectedWindow()
 {
+    this.onDOMContentLoaded = new EventSink("inspectedPageDOMContentLoaded");
     this.onLoaded = new EventSink("inspectedPageLoaded");
     this.onNavigated = new EventSink("inspectedURLChanged");
-    this.onDOMContentLoaded = new EventSink("DOMContentLoaded");
 }
 
 InspectedWindow.prototype = {
@@ -373,13 +387,14 @@ InspectedWindow.prototype = {
         return extensionServer.sendRequest({ command: "reload" });
     },
 
-    evaluate: function(expression, callback)
+    eval: function(expression, callback)
     {
         function callbackWrapper(result)
         {
-            if (result && !result.isException)
-                result.value = result.value === "undefined" ? undefined : JSON.parse(result.value);
-            callback(result);
+            var value = result.value;
+            if (!result.isException)
+                value = value === "undefined" ? undefined : JSON.parse(value);
+            callback(value, result.isException);
         }
         return extensionServer.sendRequest({ command: "evaluateOnInspectedPage", expression: expression }, callback && callbackWrapper);
     }
@@ -462,6 +477,36 @@ function bind(func, thisObject)
     return function() { return func.apply(thisObject, args.concat(Array.prototype.slice.call(arguments, 0))); };
 }
 
+function populateInterfaceClass(interface, implementation)
+{
+    for (var member in implementation) {
+        if (member.charAt(0) === "_")
+            continue;
+        var value = implementation[member];
+        interface[member] = typeof value === "function" ? bind(value, implementation)
+            : interface[member] = implementation[member];
+    }
+}
+
+function declareInterfaceClass(implConstructor)
+{
+    return function()
+    {
+        var impl = { __proto__: implConstructor.prototype };
+        implConstructor.apply(impl, arguments);
+        populateInterfaceClass(this, impl);
+    }
+}
+
+var AuditCategory = declareInterfaceClass(AuditCategoryImpl);
+var AuditResult = declareInterfaceClass(AuditResultImpl);
+var EventSink = declareInterfaceClass(EventSinkImpl);
+var ExtensionSidebarPane = declareInterfaceClass(ExtensionSidebarPaneImpl);
+var Panel = declareInterfaceClass(PanelImpl);
+var PanelWithSidebar = declareInterfaceClass(PanelWithSidebarImpl);
+var Resource = declareInterfaceClass(ResourceImpl);
+var WatchExpressionSidebarPane = declareInterfaceClass(WatchExpressionSidebarPaneImpl);
+
 var extensionServer = new ExtensionServerClient();
 
 webInspector = new InspectorExtensionAPI();

front-end/ExtensionCommon.js

@@ -28,13 +28,13 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.commonExtensionSymbols = function(private)
+WebInspector.commonExtensionSymbols = function(apiPrivate)
 {
     
-    if (!private.audits)
-        private.audits = {};
+    if (!apiPrivate.audits)
+        apiPrivate.audits = {};
 
-    private.audits.Severity = {
+    apiPrivate.audits.Severity = {
         Info: "info",
         Warning: "warning",
         Severe: "severe"

front-end/ExtensionPanel.js

@@ -80,3 +80,39 @@ WebInspector.ExtensionPanel.prototype = {
 }
 
 WebInspector.ExtensionPanel.prototype.__proto__ = WebInspector.Panel.prototype;
+
+WebInspector.ExtensionWatchSidebarPane = function(title, id)
+{
+    WebInspector.SidebarPane.call(this, title);
+    this._id = id;
+}
+
+WebInspector.ExtensionWatchSidebarPane.prototype = {
+    setObject: function(object, title)
+    {
+        this._setObject(WebInspector.RemoteObject.fromLocalObject(object), title);
+    },
+
+    setExpression: function(expression, title)
+    {
+        InjectedScriptAccess.getDefault().evaluate(expression, this._onEvaluate.bind(this, title));
+    },
+
+    _onEvaluate: function(title, result)
+    {
+        this._setObject(WebInspector.RemoteObject.fromPayload(result), title);
+    },
+
+    _setObject: function(object, title)
+    {
+        this.bodyElement.removeChildren();
+        var section = new WebInspector.ObjectPropertiesSection(object, title, null, true);
+        if (!title)
+            section.headerElement.addStyleClass("hidden");
+        section.expanded = true;
+        this.bodyElement.appendChild(section.element);
+        WebInspector.extensionServer.notifyExtensionWatchSidebarUpdated(this._id);
+    }
+}
+
+WebInspector.ExtensionWatchSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;

front-end/ExtensionServer.js

@@ -35,21 +35,22 @@ WebInspector.ExtensionServer = function()
     this._subscribers = {};
     this._status = new WebInspector.ExtensionStatus();
 
-    this._registerHandler("subscribe", this._onSubscribe.bind(this));
-    this._registerHandler("unsubscribe", this._onUnsubscribe.bind(this));
-    this._registerHandler("getResources", this._onGetResources.bind(this));
-    this._registerHandler("getResourceContent", this._onGetResourceContent.bind(this));
-    this._registerHandler("getPageTimings", this._onGetPageTimings.bind(this));
-    this._registerHandler("createPanel", this._onCreatePanel.bind(this));
-    this._registerHandler("createSidebarPane", this._onCreateSidebar.bind(this));
-    this._registerHandler("log", this._onLog.bind(this));
-    this._registerHandler("evaluateOnInspectedPage", this._onEvaluateOnInspectedPage.bind(this));
-    this._registerHandler("setSidebarHeight", this._onSetSidebarHeight.bind(this));
-    this._registerHandler("setSidebarExpanded", this._onSetSidebarExpansion.bind(this));
-
     this._registerHandler("addAuditCategory", this._onAddAuditCategory.bind(this));
     this._registerHandler("addAuditResult", this._onAddAuditResult.bind(this));
+    this._registerHandler("createPanel", this._onCreatePanel.bind(this));
+    this._registerHandler("createSidebarPane", this._onCreateSidebar.bind(this));
+    this._registerHandler("createWatchExpressionSidebarPane", this._onCreateWatchExpressionSidebarPane.bind(this));
+    this._registerHandler("evaluateOnInspectedPage", this._onEvaluateOnInspectedPage.bind(this));
+    this._registerHandler("getHAR", this._onGetHAR.bind(this));
+    this._registerHandler("getResourceContent", this._onGetResourceContent.bind(this));
+    this._registerHandler("log", this._onLog.bind(this));
+    this._registerHandler("reload", this._onReload.bind(this));
+    this._registerHandler("setSidebarHeight", this._onSetSidebarHeight.bind(this));
+    this._registerHandler("setWatchSidebarContent", this._onSetWatchSidebarContent.bind(this));
     this._registerHandler("stopAuditCategoryRun", this._onStopAuditCategoryRun.bind(this));
+    this._registerHandler("subscribe", this._onSubscribe.bind(this));
+    this._registerHandler("unsubscribe", this._onUnsubscribe.bind(this));
+
 
     window.addEventListener("message", this._onWindowMessage.bind(this), false);
 }
@@ -60,14 +61,14 @@ WebInspector.ExtensionServer.prototype = {
         this._postNotification("panel-shown-" + panelName);
     },
 
-    notifyObjectSelected: function(panelId, objectType, objectId)
+    notifyObjectSelected: function(panelId, objectId)
     {
-        this._postNotification("panel-objectSelected-" + panelId, objectType, objectId);
+        this._postNotification("panel-objectSelected-" + panelId, objectId);
     },
 
     notifyResourceFinished: function(resource)
     {
-        this._postNotification("resource-finished", this._convertResource(resource));
+        this._postNotification("resource-finished", resource.identifier, (new WebInspector.HAREntry(resource)).build());
     },
 
     notifySearchAction: function(panelId, action, searchString)
@@ -75,9 +76,14 @@ WebInspector.ExtensionServer.prototype = {
         this._postNotification("panel-search-" + panelId, action, searchString);
     },
 
-    notifyInspectedPageLoaded: function()
+    notifyPageLoaded: function(milliseconds)
     {
-        this._postNotification("inspectedPageLoaded");
+        this._postNotification("inspectedPageLoaded", milliseconds);
+    },
+
+    notifyPageDOMContentLoaded: function(milliseconds)
+    {
+        this._postNotification("inspectedPageDOMContentLoaded", milliseconds);
     },
 
     notifyInspectedURLChanged: function()
@@ -90,6 +96,11 @@ WebInspector.ExtensionServer.prototype = {
         this._postNotification("reset");
     },
 
+    notifyExtensionWatchSidebarUpdated: function(id)
+    {
+        this._postNotification("watch-sidebar-updated-" + id);
+    },
+
     startAuditRun: function(category, auditRun)
     {
         this._clientObjects[auditRun.id] = auditRun;
@@ -101,15 +112,6 @@ WebInspector.ExtensionServer.prototype = {
         delete this._clientObjects[auditRun.id];
     },
 
-    _convertResource: function(resource)
-    {
-        return {
-            id: resource.identifier,
-            type: WebInspector.Resource.Type.toString(resource.type),
-            har: (new WebInspector.HAREntry(resource)).build(),
-        };
-    },
-
     _postNotification: function(type, details)
     {
         var subscribers = this._subscribers[type];
@@ -149,7 +151,7 @@ WebInspector.ExtensionServer.prototype = {
         // shouldn't be hit unless someone is bypassing the API.
         if (id in this._clientObjects || id in WebInspector.panels)
             return this._status.E_EXISTS(id);
-        var panel = new WebInspector.ExtensionPanel(id, message.label, message.icon);
+        var panel = new WebInspector.ExtensionPanel(id, message.title, message.icon);
         this._clientObjects[id] = panel;
 
         var toolbarElement = document.getElementById("toolbar");
@@ -161,7 +163,22 @@ WebInspector.ExtensionServer.prototype = {
         return this._status.OK();
     },
 
-    _onCreateSidebar: function(message, port)
+    _onCreateSidebar: function(message)
+    {
+        var sidebar = this._createSidebar(message, WebInspector.SidebarPane);
+        if (sidebar.isError)
+            return sidebar;
+        this._createClientIframe(sidebar.bodyElement, message.url);
+        return this._status.OK();
+    },
+
+    _onCreateWatchExpressionSidebarPane: function(message)
+    {
+        var sidebar = this._createSidebar(message, WebInspector.ExtensionWatchSidebarPane);
+        return sidebar.isError ? sidebar : this._status.OK();
+    },
+
+    _createSidebar: function(message, constructor)
     {
         var panel = WebInspector.panels[message.panel];
         if (!panel)
@@ -169,12 +186,12 @@ WebInspector.ExtensionServer.prototype = {
         if (!panel.sidebarElement || !panel.sidebarPanes)
             return this._status.E_NOTSUPPORTED();
         var id = message.id;
-        var sidebar = new WebInspector.SidebarPane(message.title);
+        var sidebar = new constructor(message.title, message.id);
         this._clientObjects[id] = sidebar;
         panel.sidebarPanes[id] = sidebar;
         panel.sidebarElement.appendChild(sidebar.element);
-        this._createClientIframe(sidebar.bodyElement, message.url);
-        return this._status.OK();
+
+        return sidebar;
     },
 
     _createClientIframe: function(parent, url, requestId, port)
@@ -194,15 +211,15 @@ WebInspector.ExtensionServer.prototype = {
         sidebar.bodyElement.firstChild.style.height = message.height;
     },
 
-    _onSetSidebarExpansion: function(message)
+    _onSetWatchSidebarContent: function(message)
     {
         var sidebar = this._clientObjects[message.id];
         if (!sidebar)
             return this._status.E_NOTFOUND(message.id);
-        if (message.expanded)
-            sidebar.expand();
+        if (message.evaluateOnPage)
+            sidebar.setExpression(message.expression, message.rootTitle);
         else
-            sidebar.collapse();
+            sidebar.setObject(message.expression, message.rootTitle);
     },
 
     _onLog: function(message)
@@ -210,6 +227,12 @@ WebInspector.ExtensionServer.prototype = {
         WebInspector.log(message.message);
     },
 
+    _onReload: function()
+    {
+        InspectorBackend.reloadPage();
+        return this._status.OK();
+    },
+
     _onEvaluateOnInspectedPage: function(message, port)
     {
         function callback(resultPayload)
@@ -240,9 +263,10 @@ WebInspector.ExtensionServer.prototype = {
         var id = message.id;
         var resource = null;
 
-        resource = typeof id === "number" ? 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");
     },
@@ -252,68 +276,32 @@ WebInspector.ExtensionServer.prototype = {
         port.postMessage({ command: "callback", requestId: requestId, result: result });
     },
 
-    _onGetResources: function(request)
+    _onGetHAR: function(request)
     {
-        function resourceWrapper(id)
-        {
-            return WebInspector.extensionServer._convertResource(WebInspector.resources[id]);
-        }
-
-        var response;
-        if (request.id)
-            response = WebInspector.resources[request.id] ? resourceWrapper(request.id) : this._status.E_NOTFOUND(request.id);
-        else
-            response = Object.properties(WebInspector.resources).map(resourceWrapper);
-        return response;
+        var harLog = new WebInspector.HARLog();
+        harLog.includeResourceIds = true;
+        return harLog.build();
     },
 
     _onGetResourceContent: function(message, port)
     {
-        var ids;
-        var response = [];
-
-        function onContentAvailable(id, encoded, content)
+        function onContentAvailable(content, encoded)
         {
-            var resourceContent = {
-                id: id,
+            var response = {
                 encoding: encoded ? "base64" : "",
                 content: content
             };
-            response.push(resourceContent);
-            if (response.length === ids.length)
-                this._dispatchCallback(message.requestId, port, response);
-        }
-
-        if (typeof message.ids === "number") {
-            ids = [ message.ids ];
-        } else if (message.ids instanceof Array) {
-            ids = message.ids;
-        } else {
-            return this._status.E_BADARGTYPE("message.ids", "Array", typeof message.ids);
-        }
-
-        for (var i = 0; i < ids.length; ++i) {
-            var id = ids[i];
-            var resource = WebInspector.resources[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));
-            }
-        }
-        if (response.length === ids.length)
             this._dispatchCallback(message.requestId, port, response);
-    },
-
-    _onGetPageTimings: function()
-    {
-        return (new WebInspector.HARLog()).buildMainResourceTimings();
+        }
+        var resource = WebInspector.networkResources[message.id];
+        if (!resource)
+            return this._status.E_NOTFOUND(message.id);
+        resource.requestContent(onContentAvailable.bind(this));
     },
 
     _onAddAuditCategory: function(request)
     {
-        var category = new WebInspector.ExtensionAuditCategory(request.id, request.displayName, request.ruleCount);
+        var category = new WebInspector.ExtensionAuditCategory(request.id, request.displayName, request.resultCount);
         if (WebInspector.panels.audits.getCategory(category.id))
             return this._status.E_EXISTS(category.id);
         this._clientObjects[request.id] = category;
@@ -377,8 +365,8 @@ WebInspector.ExtensionServer.prototype = {
         }
         var platformAPI = WebInspector.buildPlatformExtensionAPI ? WebInspector.buildPlatformExtensionAPI() : "";
         return "(function(){ " +
-            "var private = {};" +
-            "(" + WebInspector.commonExtensionSymbols.toString() + ")(private);" +
+            "var apiPrivate = {};" +
+            "(" + WebInspector.commonExtensionSymbols.toString() + ")(apiPrivate);" +
             "(" + WebInspector.injectedExtensionAPI.toString() + ").apply(this, arguments);" +
             "webInspector.resources.Types = " + JSON.stringify(resourceTypes) + ";" +
             platformAPI +
@@ -447,8 +435,3 @@ WebInspector.addExtensions = function(extensions)
 }
 
 WebInspector.extensionServer = new WebInspector.ExtensionServer();
-
-WebInspector.getEncodedResourceContent = function(identifier, encode, callback)
-{
-    InspectorBackend.getResourceContent(identifier, encode, callback);
-}

front-end/FileSystemView.js

@@ -0,0 +1,190 @@
+/*
+ * Copyright (C) 2010 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FileSystem = {}
+
+// Keep in sync with Type in AsyncFileSystem.h
+WebInspector.FileSystem.TEMPORARY = 0;
+WebInspector.FileSystem.PERSISTENT = 1;
+
+WebInspector.FileSystem.getFileSystemPathsAsync = function(origin)
+{
+    InspectorBackend.getFileSystemPathAsync(WebInspector.FileSystem.PERSISTENT, origin);
+    InspectorBackend.getFileSystemPathAsync(WebInspector.FileSystem.TEMPORARY, origin);
+}
+
+WebInspector.FileSystemView = function(treeElement, fileSystemOrigin)
+{
+    WebInspector.View.call(this);
+
+    this.element.addStyleClass("resource-view");
+    this._treeElement = treeElement;
+    this._origin = fileSystemOrigin;
+    this._tabbedPane = new WebInspector.TabbedPane(this.element);
+
+    this._persistentFileSystemElement = document.createElement("div");
+    this._persistentFileSystemElement.className = "resource-view-headers";
+    this._tabbedPane.appendTab("persistent", WebInspector.UIString("Persistent File System"), this._persistentFileSystemElement, this._selectFileSystemTab.bind(this, true));
+
+    this._tempFileSystemElement = document.createElement("div");
+    this._tempFileSystemElement.className = "resource-view-headers";
+    this._tabbedPane.appendTab("temp", WebInspector.UIString("Temporary File System"), this._tempFileSystemElement, this.selectTemporaryFileSystemTab.bind(this, true));
+
+    this._temporaryRoot = "";
+    this._persistentRoot = "";
+    this._isFileSystemDisabled = false;
+    this._persistentRootError = false;
+    this._temporaryRootError = false;
+    this.fileSystemVisible = true;
+    this._selectFileSystemTab();
+    this.refreshFileSystem();
+}
+
+WebInspector.FileSystemView.prototype = {
+    show: function(parentElement)
+    {
+        WebInspector.View.prototype.show.call(this, parentElement);
+        this._update();
+    },
+
+    set fileSystemVisible(x)
+    {
+        if (x === this._fileSystemVisible)
+            return;
+        this._fileSystemVisible = x;
+        if (x)
+            this.element.addStyleClass("headers-visible");
+        else
+            this.element.removeStyleClass("headers-visible"); 
+        this._selectFileSystemTab();
+    },
+
+    _update: function()
+    {
+        this._selectFileSystemTab();
+        WebInspector.FileSystem.getFileSystemPathsAsync(this._origin);
+    },
+
+    updateFileSystemPath: function(root, type, origin)
+    {
+        if (origin == this._origin && type == WebInspector.FileSystem.PERSISTENT) {
+            this._persistentRoot = root;
+            this._persistentRootError = false;
+        }
+        
+        if (origin == this._origin && type == WebInspector.FileSystem.TEMPORARY) {
+            this._temporaryRoot = root;
+            this._temporaryRootErrorError = false;
+        }
+
+        this.refreshFileSystem();
+    },
+    
+    updateFileSystemError: function(type, origin)
+    {
+        if (type == WebInspector.FileSystem.PERSISTENT)
+            this._persistentRootError = true;
+        
+        if (type == WebInspector.FileSystem.TEMPORARY)
+            this._temporaryRootError = true;
+
+        this.refreshFileSystem();
+    },
+    
+    setFileSystemDisabled: function()
+    {
+        this._isFileSystemDisabled = true;
+        this.refreshFileSystem();
+    },
+    _selectFileSystemTab: function()
+    {
+        this._tabbedPane.selectTab("persistent");
+    },
+    
+    selectTemporaryFileSystemTab: function()
+    {
+        this._tabbedPane.selectTab("temp");
+    },
+
+    _revealPersistentFolderInOS: function()
+    {
+        InspectorBackend.revealFolderInOS(this._persistentRoot);
+    },
+    
+    _revealTemporaryFolderInOS: function()
+    {
+        InspectorBackend.revealFolderInOS(this._temporaryRoot);
+    },
+    
+    _createTextAndButton: function(fileSystemElement, rootPathText, type, isError)
+    {
+        fileSystemElement.removeChildren();
+        var rootPath = WebInspector.UIString("File System root path not available.");
+        if (this._isFileSystemDisabled)
+            rootPath = WebInspector.UIString("File System is disabled.");
+        else if (isError)
+            rootPath = WebInspector.UIString("Error in fetching root path for file system.");
+        else if (rootPathText)
+            rootPath = rootPathText;
+
+        var rootTextNode = document.createTextNode("Root: " + rootPath.escapeHTML());
+        var rootSystemElement = document.createElement("div");
+        rootSystemElement.className = "header-value source-code";
+        rootSystemElement.appendChild(rootTextNode);
+        fileSystemElement.appendChild(rootSystemElement);
+            
+        if (!isError && rootPathText) {
+            // Append Browse button iff root path is available and it is not an error.
+            var contentElement = document.createElement("div");
+            contentElement.className = "panel-enabler-view-content";
+            fileSystemElement.appendChild(contentElement);
+            var choicesForm = document.createElement("form");
+            contentElement.appendChild(choicesForm);
+            var enableButton = document.createElement("button");
+            enableButton.setAttribute("type", "button");
+            enableButton.textContent = WebInspector.UIString("Reveal folder in OS");
+            // FIXME: Bind this directly to InspectorBackend.
+            if (type == WebInspector.FileSystem.PERSISTENT)
+                enableButton.addEventListener("click", this._revealPersistentFolderInOS.bind(this), false);
+            if (type == WebInspector.FileSystem.TEMPORARY)
+                enableButton.addEventListener("click", this._revealTemporaryFolderInOS.bind(this), false);
+            choicesForm.appendChild(enableButton);
+            fileSystemElement.appendChild(contentElement);
+        }
+    },
+    
+    refreshFileSystem: function()
+    {
+        this._createTextAndButton(this._persistentFileSystemElement, this._persistentRoot, WebInspector.FileSystem.PERSISTENT, this._persistentRootError);
+        this._createTextAndButton(this._tempFileSystemElement, this._temporaryRoot, WebInspector.FileSystem.TEMPORARY, this._temporaryRootError);
+    }, 
+}
+
+WebInspector.FileSystemView.prototype.__proto__ = WebInspector.View.prototype;

front-end/FontView.js

@@ -34,12 +34,12 @@ WebInspector.FontView = function(resource)
 }
 
 WebInspector.FontView.prototype = {
-    hasContentTab: function()
+    hasContent: function()
     {
         return true;
     },
 
-    contentTabSelected: function()
+    _createContentIfNeeded: function()
     {
         if (this.fontPreviewElement)
             return;
@@ -51,7 +51,7 @@ WebInspector.FontView.prototype = {
         document.head.appendChild(this.fontStyleElement);
 
         this.fontPreviewElement = document.createElement("div");
-        this.contentElement.appendChild(this.fontPreviewElement);
+        this.element.appendChild(this.fontPreviewElement);
 
         this.fontPreviewElement.style.setProperty("font-family", uniqueFontName, null);
         this.fontPreviewElement.innerHTML = "ABCDEFGHIJKLM<br>NOPQRSTUVWXYZ<br>abcdefghijklm<br>nopqrstuvwxyz<br>1234567890";
@@ -63,12 +63,14 @@ WebInspector.FontView.prototype = {
     show: function(parentElement)
     {
         WebInspector.ResourceView.prototype.show.call(this, parentElement);
+        this._createContentIfNeeded();
         this.updateFontPreviewSize();
     },
 
     resize: function()
     {
         this.updateFontPreviewSize();
+        WebInspector.ResourceView.prototype.resize.call(this);
     },
 
     updateFontPreviewSize: function()
@@ -85,7 +87,7 @@ WebInspector.FontView.prototype = {
         const width = this.fontPreviewElement.offsetWidth;
 
         // Subtract some padding. This should match the padding in the CSS plus room for the scrollbar.
-        const containerWidth = this.contentElement.offsetWidth - 50;
+        const containerWidth = this.element.offsetWidth - 50;
 
         if (!height || !width || !containerWidth) {
             this.fontPreviewElement.style.removeProperty("font-size");

front-end/HAREntry.js

@@ -56,7 +56,6 @@ WebInspector.HAREntry.prototype = {
             method: this._resource.requestMethod,
             url: this._resource.url,
             // httpVersion: "HTTP/1.1" -- Not available.
-            // cookies: [] -- Not available.
             headers: this._buildHeaders(this._resource.requestHeaders),
             headersSize: -1, // Not available.
             bodySize: -1 // Not available.
@@ -65,22 +64,26 @@ WebInspector.HAREntry.prototype = {
             res.queryString = this._buildParameters(this._resource.queryParameters);
         if (this._resource.requestFormData)
             res.postData = this._buildPostData();
+        if (this._resource.requestCookies)
+            res.cookies = this._buildCookies(this._resource.requestCookies);
         return res;
     },
 
     _buildResponse: function()
     {
-        return {
+        var res = {
             status: this._resource.statusCode,
             statusText: this._resource.statusText,
             // "httpVersion": "HTTP/1.1" -- Not available.
-            // "cookies": [],  -- Not available.
             headers: this._buildHeaders(this._resource.responseHeaders),
             content: this._buildContent(),
             redirectURL: this._resource.responseHeaderValue("Location") || "",
             headersSize: -1, // Not available.
             bodySize: this._resource.resourceSize
         };
+        if (this._resource.responseCookies)
+            res.cookies = this._buildCookies(this._resource.responseCookies);
+        return res;
     },
 
     _buildContent: function()
@@ -150,6 +153,25 @@ WebInspector.HAREntry.prototype = {
         return parameters.slice();
     },
 
+    _buildCookies: function(cookies)
+    {
+        return cookies.map(this._buildCookie.bind(this));
+    },
+
+    _buildCookie: function(cookie)
+    {
+        
+        return {
+            name: cookie.name,
+            value: cookie.value,
+            path: cookie.path,
+            domain: cookie.domain,
+            expires: cookie.expires(new Date(this._resource.startTime * 1000)),
+            httpOnly: cookie.httpOnly,
+            secure: cookie.secure
+        };
+    },
+
     _interval: function(start, end)
     {
         var timing = this._resource.timing;
@@ -158,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)
 {
@@ -167,6 +189,7 @@ WebInspector.HAREntry._toMilliseconds = function(time)
 
 WebInspector.HARLog = function()
 {
+    this.includeResourceIds = false;
 }
 
 WebInspector.HARLog.prototype = {
@@ -181,7 +204,7 @@ WebInspector.HARLog.prototype = {
                 version: webKitVersion ? webKitVersion[1] : "n/a"
             },
             pages: this._buildPages(),
-            entries: Object.properties(WebInspector.resources).map(this._convertResource)
+            entries: Object.keys(WebInspector.networkResources).map(this._convertResource.bind(this))
         }
     },
 
@@ -199,17 +222,18 @@ 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();
+        var entry = (new WebInspector.HAREntry(WebInspector.networkResources[id])).build();
+        if (this.includeResourceIds)
+            entry._resourceId = id;
+        return entry;
     },
 
     _pageEventTime: function(time)
@@ -219,4 +243,4 @@ WebInspector.HARLog.prototype = {
             return -1;
         return WebInspector.HAREntry._toMilliseconds(time - startTime);
     }
-};
+}

front-end/ImageView.js

@@ -34,28 +34,33 @@ WebInspector.ImageView = function(resource)
 }
 
 WebInspector.ImageView.prototype = {
-    hasContentTab: function()
+    hasContent: function()
     {
         return true;
     },
 
-    contentTabSelected: function()
+    show: function(parentElement)
+    {
+        WebInspector.ResourceView.prototype.show.call(this, parentElement);
+        this._createContentIfNeeded();
+    },
+
+    _createContentIfNeeded: function()
     {
         if (this._container)
             return;
-        this._container = document.createElement("div");
-        this._container.className = "image";
-        this.contentElement.appendChild(this._container);
 
-        this.imagePreviewElement = document.createElement("img");
-        this.imagePreviewElement.addStyleClass("resource-image-view");
-        this.imagePreviewElement.setAttribute("src", this.resource.url);
+        var imageContainer = document.createElement("div");
+        imageContainer.className = "image";
+        this.element.appendChild(imageContainer);
 
-        this._container.appendChild(this.imagePreviewElement);
+        var imagePreviewElement = document.createElement("img");
+        imagePreviewElement.addStyleClass("resource-image-view");
+        imageContainer.appendChild(imagePreviewElement);
 
         this._container = document.createElement("div");
         this._container.className = "info";
-        this.contentElement.appendChild(this._container);
+        this.element.appendChild(this._container);
 
         var imageNameElement = document.createElement("h1");
         imageNameElement.className = "title";
@@ -65,18 +70,51 @@ WebInspector.ImageView.prototype = {
         var infoListElement = document.createElement("dl");
         infoListElement.className = "infoList";
 
-        var imageProperties = [
-            { name: WebInspector.UIString("Dimensions"), value: WebInspector.UIString("%d × %d", this.imagePreviewElement.naturalWidth, this.imagePreviewElement.height) },
-            { name: WebInspector.UIString("File size"), value: Number.bytesToString(this.resource.resourceSize, WebInspector.UIString) },
-            { name: WebInspector.UIString("MIME type"), value: this.resource.mimeType }
-        ];
+        function onResourceContent(element, content)
+        {
+            imagePreviewElement.setAttribute("src", this.resource.contentURL);
+        }
+        this.resource.requestContent(onResourceContent.bind(this));
 
-        var listHTML = '';
-        for (var i = 0; i < imageProperties.length; ++i)
-            listHTML += "<dt>" + imageProperties[i].name + "</dt><dd>" + imageProperties[i].value + "</dd>";
 
-        infoListElement.innerHTML = listHTML;
-        this._container.appendChild(infoListElement);
+        function onImageLoad()
+        {
+            var content = this.resource.content;
+            if (content)
+                var resourceSize = this._base64ToSize(content);
+            else
+                var resourceSize = this.resource.resourceSize;
+
+            var imageProperties = [
+                { name: WebInspector.UIString("Dimensions"), value: WebInspector.UIString("%d × %d", imagePreviewElement.naturalWidth, imagePreviewElement.naturalHeight) },
+                { name: WebInspector.UIString("File size"), value: Number.bytesToString(resourceSize, WebInspector.UIString) },
+                { name: WebInspector.UIString("MIME type"), value: this.resource.mimeType }
+            ];
+    
+            infoListElement.removeChildren();
+            for (var i = 0; i < imageProperties.length; ++i) {
+                var dt = document.createElement("dt");
+                dt.textContent = imageProperties[i].name;
+                infoListElement.appendChild(dt);
+                var dd = document.createElement("dd");
+                dd.textContent = imageProperties[i].value;
+                infoListElement.appendChild(dd);
+            }
+            this._container.appendChild(infoListElement);
+        }
+        imagePreviewElement.addEventListener("load", onImageLoad.bind(this), false);
+    },
+
+    _base64ToSize: function(content)
+    {
+        if (!content.length)
+            return 0;
+        var size = (content.length || 0) * 3 / 4;
+        if (content.length > 0 && content[content.length - 1] === "=")
+            size--;
+        if (content.length > 1 && content[content.length - 2] === "=")
+            size--;
+        return size;
     }
 }
 

front-end/InjectedScript.js

@@ -52,7 +52,6 @@ InjectedScript.prototype = {
             var objectId;
             if (typeof object === "object" || typeof object === "function" || this._isHTMLAllCollection(object)) {
                 var id = this._lastBoundObjectId++;
-                objectId = id;
                 this._idToWrappedObject[id] = object;
     
                 var group = this._objectGroups[objectGroupName];
@@ -268,7 +267,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;

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);
     }
 }
 

front-end/NetworkItemView.js

@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2010 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkItemView = function(resource)
+{
+    WebInspector.View.call(this);
+
+    this.element.addStyleClass("network-item-view");
+
+    this._headersView = new WebInspector.ResourceHeadersView(resource);
+    // Do not store reference to content view - it can be recreated.
+    var contentView = WebInspector.ResourceManager.resourceViewForResource(resource);
+    this._cookiesView = new WebInspector.ResourceCookiesView(resource);
+
+    this._tabbedPane = new WebInspector.TabbedPane(this.element);
+    this._tabbedPane.appendTab("headers", WebInspector.UIString("Headers"), this._headersView);
+    if (contentView.hasContent()) {
+        // Reusing this view, so hide it at first.
+        contentView.visible = false;
+        this._tabbedPane.appendTab("content", WebInspector.UIString("Content"), contentView);
+    }
+    this._tabbedPane.appendTab("cookies", WebInspector.UIString("Cookies"), this._cookiesView);
+
+    if (Preferences.showTimingTab) {
+        var timingView = new WebInspector.ResourceTimingView(resource);
+        this._tabbedPane.appendTab("timing", WebInspector.UIString("Timing"), timingView);
+    }
+
+    this._tabbedPane.addEventListener("tab-selected", this._tabSelected, this);
+}
+
+WebInspector.NetworkItemView.prototype = {
+    show: function(parentElement)
+    {
+        WebInspector.View.prototype.show.call(this, parentElement);
+        this._selectTab();
+    },
+
+    _selectTab: function(tabId)
+    {
+        if (!tabId)
+            tabId = WebInspector.settings.resourceViewTab;
+
+        if (!this._tabbedPane.selectTab(tabId)) {
+            this._isInFallbackSelection = true;
+            this._tabbedPane.selectTab("headers");
+            delete this._isInFallbackSelection;
+        }
+    },
+
+    _tabSelected: function(event)
+    {
+        WebInspector.settings.resourceViewTab = event.data.tabId;
+    },
+
+    resize: function()
+    {
+        if (this._cookiesView.visible)
+            this._cookiesView.resize();
+    }
+}
+
+WebInspector.NetworkItemView.prototype.__proto__ = WebInspector.View.prototype;

front-end/NetworkPanel.js

@@ -1,7 +1,7 @@
 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
- * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -36,6 +36,9 @@ WebInspector.NetworkPanel = function()
     this.sidebarElement.className = "network-sidebar";
 
     this._resources = [];
+    this._resourcesById = {};
+    this._resourcesByURL = {};
+    this._lastIdentifier = 0;
     this._staleResources = [];
     this._resourceGridNodes = {};
     this._mainResourceLoadTime = -1;
@@ -51,9 +54,13 @@ WebInspector.NetworkPanel = function()
     this._viewsContainerElement = document.createElement("div");
     this._viewsContainerElement.id = "network-views";
     this._viewsContainerElement.className = "hidden";
-
     this.element.appendChild(this._viewsContainerElement);
 
+    this._closeButtonElement = document.createElement("button");
+    this._closeButtonElement.id = "network-close-button";
+    this._closeButtonElement.addEventListener("click", this._toggleGridMode.bind(this), false);
+    this._viewsContainerElement.appendChild(this._closeButtonElement);
+
     this._createSortingFunctions();
     this._createTable();
     this._createTimelineGrid();
@@ -61,7 +68,12 @@ WebInspector.NetworkPanel = function()
     this._createFilterStatusBarItems();
     this._createSummaryBar();
 
+    if (!WebInspector.settings.resourcesLargeRows)
+        this._setLargerResources(WebInspector.settings.resourcesLargeRows);
+
     this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), true);
+    // Enable faster hint.
+    this._popoverHelper.setTimeout(100);
 
     this.calculator = new WebInspector.NetworkTransferTimeCalculator();
     this._filter(this._filterAllElement, false);
@@ -77,7 +89,7 @@ WebInspector.NetworkPanel.prototype = {
 
     get statusBarItems()
     {
-        return [this._largerResourcesButton.element, this._clearButton.element, this._filterBarElement];
+        return [this._largerResourcesButton.element, this._preserveLogToggle.element, this._clearButton.element, this._filterBarElement];
     },
 
     isCategoryVisible: function(categoryName)
@@ -97,11 +109,13 @@ WebInspector.NetworkPanel.prototype = {
         this._positionSummaryBar();
     },
 
-    updateSidebarWidth: function()
+    updateSidebarWidth: function(width)
     {
         if (!this._viewingResourceMode)
             return;
-        WebInspector.Panel.prototype.updateSidebarWidth.apply(this, arguments);
+        WebInspector.Panel.prototype.updateSidebarWidth.call(this, width);
+        if (this._summaryBarElement.parentElement === this.element)
+            this._summaryBarElement.style.width = width + "px";
     },
 
     updateMainViewWidth: function(width)
@@ -120,30 +134,39 @@ WebInspector.NetworkPanel.prototype = {
     _positionSummaryBar: function()
     {
         // Position the total bar.
-        const rowHeight = 22;
-        const summaryBarHeight = 22;
-        var offsetHeight = this.element.offsetHeight;
 
-        var parentElement = this._summaryBarElement.parentElement;
-
-        if (this._summaryBarElement.parentElement !== this.element && offsetHeight > (this._dataGrid.children.length - 1) * rowHeight + summaryBarHeight) {
-            this._dataGrid.removeChild(this._summaryBarRowNode);
+        var fillerRow = this._dataGrid.dataTableBody.lastChild;
+        if (this._summaryBarElement.parentElement !== this.element && fillerRow.offsetHeight > 0) {
+            // Glue status to bottom.
+            if (this._summaryBarRowNode) {
+                this._dataGrid.removeChild(this._summaryBarRowNode);
+                delete this._summaryBarRowNode;
+            }
             this._summaryBarElement.addStyleClass("network-summary-bar-bottom");
-            delete this._summaryBarRowNode;
+            this._summaryBarElement.style.setProperty("width", this.sidebarElement.offsetWidth + "px");
             this.element.appendChild(this._summaryBarElement);
             this._dataGrid.element.style.bottom = "20px";
             return;
         }
 
-        if (!this._summaryBarRowNode && offsetHeight - summaryBarHeight < this._dataGrid.children.length * rowHeight) {
+        if (!this._summaryBarRowNode && !fillerRow.offsetHeight) {
+            // Glue status to table.
             this._summaryBarRowNode = new WebInspector.NetworkTotalGridNode(this._summaryBarElement);
             this._summaryBarElement.removeStyleClass("network-summary-bar-bottom");
+            this._summaryBarElement.style.removeProperty("width");
             this._dataGrid.appendChild(this._summaryBarRowNode);
             this._dataGrid.element.style.bottom = 0;
             this._sortItems();
         }
     },
 
+    _resetSummaryBar: function()
+    {
+        delete this._summaryBarRowNode;
+        this._summaryBarElement.parentElement.removeChild(this._summaryBarElement);
+        this._updateSummaryBar();
+    },
+
     _createTimelineGrid: function()
     {
         this._timelineGrid = new WebInspector.TimelineGrid();
@@ -169,21 +192,21 @@ 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;
         columns.size.width = "10%";
         columns.size.aligned = "right";
 
-        columns.time.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Time"), WebInspector.UIString("Duration"));
+        columns.time.titleDOMFragment = this._makeHeaderFragment(WebInspector.UIString("Time"), WebInspector.UIString("Latency"));
         columns.time.sortable = true;
         columns.time.width = "10%";
         columns.time.aligned = "right";
 
         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);
@@ -240,7 +263,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);
@@ -349,20 +372,37 @@ WebInspector.NetworkPanel.prototype = {
     {
         this._positionSummaryBar(); // Grid is growing.
         var numRequests = this._resources.length;
+
+        if (!numRequests) {
+            if (this._summaryBarElement._isDisplayingWarning)
+                return;
+            this._summaryBarElement._isDisplayingWarning = true;
+
+            var img = document.createElement("img");
+            img.src = "Images/warningIcon.png";
+            this._summaryBarElement.removeChildren();
+            this._summaryBarElement.appendChild(img);
+            this._summaryBarElement.appendChild(document.createTextNode(" "));
+            this._summaryBarElement.appendChild(document.createTextNode(
+                WebInspector.UIString("No requests captured. Reload the page to see detailed information on the network activity.")));
+            return;
+        }
+        delete this._summaryBarElement._isDisplayingWarning;
+
         var transferSize = 0;
         var baseTime = -1;
         var maxTime = -1;
         for (var i = 0; i < this._resources.length; ++i) {
             var resource = this._resources[i];
-            transferSize += resource.cached ? 0 : resource.transferSize;
-            if (resource === WebInspector.mainResource)
+            transferSize += (resource.cached || !resource.transferSize) ? 0 : resource.transferSize;
+            if (resource.isMainResource)
                 baseTime = resource.startTime;
             if (resource.endTime > maxTime) 
                 maxTime = resource.endTime;
         }
         var text = String.sprintf(WebInspector.UIString("%d requests"), numRequests);
         text += "  \u2758  " + String.sprintf(WebInspector.UIString("%s transferred"), Number.bytesToString(transferSize));
-        if (baseTime !== -1 && this._mainResourceLoadTime !== -1 && this._mainResourceDOMContentTime !== -1) {
+        if (baseTime !== -1 && this._mainResourceLoadTime !== -1 && this._mainResourceDOMContentTime !== -1 && this._mainResourceDOMContentTime > baseTime) {
             text += "  \u2758  " + String.sprintf(WebInspector.UIString("%s (onload: %s, DOMContentLoaded: %s)"),
                         Number.secondsToString(maxTime - baseTime),
                         Number.secondsToString(this._mainResourceLoadTime - baseTime),
@@ -393,9 +433,7 @@ WebInspector.NetworkPanel.prototype = {
             selectMultiple = true;
 
         this._filter(e.target, selectMultiple);
-
-        var searchField = document.getElementById("search");
-        WebInspector.doPerformSearch(searchField.value, WebInspector.shortSearchWasForcedByKeyEvent, false, true);
+        this._positionSummaryBar();
     },
 
     _filter: function(target, selectMultiple)
@@ -570,28 +608,19 @@ WebInspector.NetworkPanel.prototype = {
         this._timelineGrid.addEventDivider(divider);
     },
 
-    get resourceTrackingEnabled()
-    {
-        return this._resourceTrackingEnabled;
-    },
-
     _createStatusbarButtons: function()
     {
+        this._preserveLogToggle = new WebInspector.StatusBarButton(WebInspector.UIString("Preserve Log upon Navigation"), "record-profile-status-bar-item");
+        this._preserveLogToggle.addEventListener("click", this._onPreserveLogClicked.bind(this), false);
+
         this._clearButton = new WebInspector.StatusBarButton(WebInspector.UIString("Clear"), "clear-status-bar-item");
-        this._clearButton.addEventListener("click", this.reset.bind(this), false);
+        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.toggled = WebInspector.settings.resourcesLargeRows;
         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);
-    },
-
     set mainResourceLoadTime(x)
     {
         if (this._mainResourceLoadTime === x)
@@ -614,27 +643,11 @@ WebInspector.NetworkPanel.prototype = {
     show: function()
     {
         WebInspector.Panel.prototype.show.call(this);
-
         this._refreshIfNeeded();
 
-        var visibleView = this.visibleView;
-        if (this.visibleResource) {
-            this.visibleView.headersVisible = true;
+        if (this.visibleView)
             this.visibleView.show(this._viewsContainerElement);
-        } else if (visibleView)
-            visibleView.show();
 
-        // Hide any views that are visible that are not this panel's current visible view.
-        // This can happen when a ResourceView is visible in the Scripts panel then switched
-        // to the this panel.
-        var resourcesLength = this._resources.length;
-        for (var i = 0; i < resourcesLength; ++i) {
-            var resource = this._resources[i];
-            var view = resource._resourcesView;
-            if (!view || view === visibleView)
-                continue;
-            view.visible = false;
-        }
         this._dataGrid.updateWidths();
         this._positionSummaryBar();
     },
@@ -669,13 +682,6 @@ WebInspector.NetworkPanel.prototype = {
         WebInspector.Panel.prototype.performSearch.call(this, query);
     },
 
-    get visibleView()
-    {
-        if (this.visibleResource)
-            return this.visibleResource._resourcesView;
-        return null;
-    },
-
     refresh: function()
     {
         this._needsRefresh = false;
@@ -684,8 +690,8 @@ WebInspector.NetworkPanel.prototype = {
             delete this._refreshTimeout;
         }
 
+        var wasScrolledToLastRow = this._dataGrid.isScrolledToLastRow();
         var staleItemsLength = this._staleResources.length;
-
         var boundariesChanged = false;
 
         for (var i = 0; i < staleItemsLength; ++i) {
@@ -716,42 +722,36 @@ WebInspector.NetworkPanel.prototype = {
         this._sortItems();
         this._updateSummaryBar();
         this._dataGrid.updateWidths();
+
+        if (wasScrolledToLastRow)
+            this._dataGrid.scrollToLastRow();
+    },
+
+    _onPreserveLogClicked: function(e)
+    {
+        this._preserveLogToggle.toggled = !this._preserveLogToggle.toggled;
     },
 
     reset: function()
+    {
+        if (!this._preserveLogToggle.toggled)
+            this._reset();
+    },
+
+    _reset: function()
     {
         this._popoverHelper.hidePopup();
         this._closeVisibleResource();
 
         this._toggleGridMode();
 
-        delete this.currentQuery;
-        this.searchCanceled();
-
-        if (this._resources) {
-            var resourcesLength = this._resources.length;
-            for (var i = 0; i < resourcesLength; ++i) {
-                var resource = this._resources[i];
-
-                resource.warnings = 0;
-                resource.errors = 0;
-
-                delete resource._resourcesView;
-            }
-        }
-
         // Begin reset timeline
         if (this._calculator)
             this._calculator.reset();
 
-        if (this._resources) {
-            var itemsLength = this._resources.length;
-            for (var i = 0; i < itemsLength; ++i) {
-                var item = this._resources[i];
-            }
-        }
-
         this._resources = [];
+        this._resourcesById = {};
+        this._resourcesByURL = {};
         this._staleResources = [];
         this._resourceGridNodes = {};
 
@@ -764,55 +764,58 @@ WebInspector.NetworkPanel.prototype = {
         this._mainResourceDOMContentTime = -1;
  
         this._viewsContainerElement.removeChildren();
+        this._viewsContainerElement.appendChild(this._closeButtonElement);
+        this._resetSummaryBar();
     },
 
-    addResource: function(resource)
+    get resources()
     {
-        this._resources.push(resource);
-        this.refreshResource(resource);
+        return this._resourcesById;
     },
 
     refreshResource: function(resource)
     {
+        if (!resource.identifier)
+            resource.identifier = "network:" + this._lastIdentifier++;
+
+        if (!this._resourcesById[resource.identifier]) {
+            this._resources.push(resource);
+            this._resourcesById[resource.identifier] = resource;
+            this._resourcesByURL[resource.url] = resource;
+
+            // Pull all the redirects of the main resource upon commit load.
+            if (resource.redirects) {
+                for (var i = 0; i < resource.redirects.length; ++i)
+                    this.refreshResource(resource.redirects[i]);
+            }
+        }
+
         this._staleResources.push(resource);
         this._scheduleRefresh();
-
-        if (!resource || !resource._resourcesView)
+        
+        if (!resource)
             return;
 
-        if (this._resourceViewTypeMatchesResource(resource, resource._resourcesView))
+        var oldView = WebInspector.ResourceManager.existingResourceViewForResource(resource);
+        if (!oldView)
             return;
 
-        var newView = this._createResourceView(resource);
-        if (newView.__proto__ === resource._resourcesView.__proto__)
+        if (WebInspector.ResourceManager.resourceViewTypeMatchesResource(resource))
             return;
 
-        if (!this.currentQuery && this._resourceGridNode(resource))
-            this._resourceGridNode(resource).updateErrorsAndWarnings();
-
-        var oldView = resource._resourcesView;
-        var oldViewParentNode = oldView.visible ? oldView.element.parentNode : null;
-
-        resource._resourcesView.detach();
-        delete resource._resourcesView;
-
-        resource._resourcesView = newView;
-
-        newView.headersVisible = oldView.headersVisible;
-
-        if (oldViewParentNode)
-            newView.show(oldViewParentNode);
-
-        WebInspector.panels.scripts.viewRecreated(oldView, newView);
+        var newView = WebInspector.ResourceManager.recreateResourceView(resource);
+        if (this.visibleView === oldView)
+            this.visibleView = newView;
     },
 
     canShowSourceLine: function(url, line)
     {
-        return false;
+        return !!this._resourcesByURL[url];
     },
 
     showSourceLine: function(url, line)
     {
+        this._showResource(this._resourcesByURL[url], line);
     },
 
     _showResource: function(resource, line)
@@ -824,22 +827,15 @@ WebInspector.NetworkPanel.prototype = {
 
         this._toggleViewingResourceMode();
 
-        if (this.visibleResource && this.visibleResource._resourcesView)
-            this.visibleResource._resourcesView.hide();
-
-        var view = this._resourceViewForResource(resource);
-        view.headersVisible = true;
-        view.show(this._viewsContainerElement);
-
-        if (line) {
-            view.selectContentTab(true);
-            if (view.revealLine)
-                view.revealLine(line);
-            if (view.highlightLine)
-                view.highlightLine(line);
+        if (this.visibleView) {
+            this.visibleView.detach();
+            delete this.visibleView;
         }
 
-        this.visibleResource = resource;
+        var view = new WebInspector.NetworkItemView(resource);
+        view.show(this._viewsContainerElement);
+        this.visibleView = view;
+
         this.updateSidebarWidth();
     },
 
@@ -847,9 +843,10 @@ WebInspector.NetworkPanel.prototype = {
     {
         this.element.removeStyleClass("viewing-resource");
 
-        if (this.visibleResource && this.visibleResource._resourcesView)
-            this.visibleResource._resourcesView.hide();
-        delete this.visibleResource;
+        if (this.visibleView) {
+            this.visibleView.detach();
+            delete this.visibleView;
+        }
 
         if (this._lastSelectedGraphTreeElement)
             this._lastSelectedGraphTreeElement.select(true);
@@ -857,19 +854,10 @@ 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;
-        this._setLargerResources(WebInspector.applicationSettings.resourcesLargeRows);
+        WebInspector.settings.resourcesLargeRows = !WebInspector.settings.resourcesLargeRows;
+        this._setLargerResources(WebInspector.settings.resourcesLargeRows);
     },
 
     _setLargerResources: function(enabled)
@@ -879,46 +867,14 @@ 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;
+        this._positionSummaryBar();
     },
 
     _getPopoverAnchor: function(element)
@@ -932,87 +888,8 @@ WebInspector.NetworkPanel.prototype = {
 
     _showPopover: function(anchor)
     {
-        var tableElement = document.createElement("table");
         var resource = anchor.parentElement.resource;
-        var rows = [];
-
-        function addRow(title, start, end, color)
-        {
-            var row = {};
-            row.title = title;
-            row.start = start;
-            row.end = end;
-            rows.push(row);
-        }
-
-        if (resource.timing.proxyStart !== -1)
-            addRow(WebInspector.UIString("Proxy"), resource.timing.proxyStart, resource.timing.proxyEnd);
-
-        if (resource.timing.dnsStart !== -1)
-            addRow(WebInspector.UIString("DNS Lookup"), resource.timing.dnsStart, resource.timing.dnsEnd);
-
-        if (resource.timing.connectStart !== -1) {
-            if (resource.connectionReused)
-                addRow(WebInspector.UIString("Blocking"), resource.timing.connectStart, resource.timing.connectEnd);
-            else {
-                var connectStart = resource.timing.connectStart;
-                // Connection includes DNS, subtract it here.
-                if (resource.timing.dnsStart !== -1)
-                    connectStart += resource.timing.dnsEnd - resource.timing.dnsStart;
-                addRow(WebInspector.UIString("Connecting"), connectStart, resource.timing.connectEnd);
-            }
-        }
-
-        if (resource.timing.sslStart !== -1)
-            addRow(WebInspector.UIString("SSL"), resource.timing.sslStart, resource.timing.sslEnd);
-
-        var sendStart = resource.timing.sendStart;
-        if (resource.timing.sslStart !== -1)
-            sendStart += resource.timing.sslEnd - resource.timing.sslStart;
-        
-        addRow(WebInspector.UIString("Sending"), resource.timing.sendStart, resource.timing.sendEnd);
-        addRow(WebInspector.UIString("Waiting"), resource.timing.sendEnd, resource.timing.receiveHeadersEnd);
-        addRow(WebInspector.UIString("Receiving"), (resource.responseReceivedTime - resource.timing.requestTime) * 1000, (resource.endTime - resource.timing.requestTime) * 1000);
-
-        const chartWidth = 200;
-        var total = (resource.endTime - resource.timing.requestTime) * 1000;
-        var scale = chartWidth / total;
-
-        for (var i = 0; i < rows.length; ++i) {
-            var tr = document.createElement("tr");
-            tableElement.appendChild(tr);
-
-            var td = document.createElement("td");
-            td.textContent = rows[i].title;
-            tr.appendChild(td);
-
-            td = document.createElement("td");
-            td.width = chartWidth + "px";
-
-            var row = document.createElement("div");
-            row.className = "network-timing-row";
-            td.appendChild(row);
-
-            var bar = document.createElement("span");
-            bar.className = "network-timing-bar";
-            bar.style.left = scale * rows[i].start + "px";
-            bar.style.right = scale * (total - rows[i].end) + "px";
-            bar.style.backgroundColor = rows[i].color;
-            bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
-            row.appendChild(bar);
-
-            var title = document.createElement("span");
-            title.className = "network-timing-bar-title";
-            if (total - rows[i].end < rows[i].start)
-                title.style.right = (scale * (total - rows[i].end) + 3) + "px";
-            else
-                title.style.left = (scale * rows[i].start + 3) + "px";
-            title.textContent = Number.millisToString(rows[i].end - rows[i].start);
-            row.appendChild(title);
-
-            tr.appendChild(td);
-        }
-
+        var tableElement = WebInspector.ResourceTimingView.createTimingTable(resource);
         var popover = new WebInspector.Popover(tableElement);
         popover.show(anchor);
         return popover;
@@ -1027,6 +904,9 @@ WebInspector.NetworkPanel.prototype = {
             this._viewsContainerElement.addStyleClass("hidden");
             this.sidebarElement.style.right = 0;
             this.sidebarElement.style.removeProperty("width");
+            this._summaryBarElement.style.removeProperty("width");
+            if (this._dataGrid.selectedNode)
+                this._dataGrid.selectedNode.selected = false;
         }
 
         if (this._briefGrid) {
@@ -1056,10 +936,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");
@@ -1097,11 +977,6 @@ WebInspector.NetworkPanel.prototype = {
 
 WebInspector.NetworkPanel.prototype.__proto__ = WebInspector.Panel.prototype;
 
-WebInspector.getResourceContent = function(identifier, callback)
-{
-    InspectorBackend.getResourceContent(identifier, false, callback);
-}
-
 WebInspector.NetworkBaseCalculator = function()
 {
 }
@@ -1401,16 +1276,19 @@ WebInspector.NetworkDataGridNode.prototype = {
         this._sizeCell = this._createDivInTD("size");
         this._timeCell = this._createDivInTD("time");
         this._createTimelineCell();
+        this._nameCell.addEventListener("click", this.select.bind(this), false);
     },
 
     select: function()
     {
-        WebInspector.DataGridNode.prototype.select.apply(this, arguments);
         this._panel._showResource(this._resource);
+        WebInspector.DataGridNode.prototype.select.apply(this, arguments);
     },
 
     get selectable()
     {
+        if (!this._panel._viewingResourceMode)
+            return false;
         if (!this._panel._hiddenCategories.all)
             return true;
         if (this._panel._hiddenCategories[this._resource.category.name])
@@ -1432,7 +1310,6 @@ WebInspector.NetworkDataGridNode.prototype = {
     {
         this._graphElement = document.createElement("div");
         this._graphElement.className = "network-graph-side";
-        this._graphElement.addEventListener("mouseover", this._refreshLabelPositions.bind(this), false);
 
         this._barAreaElement = document.createElement("div");
         //    this._barAreaElement.className = "network-graph-bar-area hidden";
@@ -1448,6 +1325,7 @@ WebInspector.NetworkDataGridNode.prototype = {
         this._barRightElement.className = "network-graph-bar";
         this._barAreaElement.appendChild(this._barRightElement);
 
+
         this._labelLeftElement = document.createElement("div");
         this._labelLeftElement.className = "network-graph-label waiting";
         this._barAreaElement.appendChild(this._labelLeftElement);
@@ -1456,6 +1334,8 @@ WebInspector.NetworkDataGridNode.prototype = {
         this._labelRightElement.className = "network-graph-label";
         this._barAreaElement.appendChild(this._labelRightElement);
 
+        this._graphElement.addEventListener("mouseover", this._refreshLabelPositions.bind(this), false);
+
         this._timelineCell = document.createElement("td");
         this._timelineCell.className = "timeline-column";
         this._element.appendChild(this._timelineCell);
@@ -1497,7 +1377,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.requestContent(onResourceContent.bind(this));
+            else
+                previewImage.src = this._resource.url;
 
             var iconElement = document.createElement("div");
             iconElement.className = "icon";
@@ -1534,6 +1422,14 @@ WebInspector.NetworkDataGridNode.prototype = {
     {
         this._statusCell.removeChildren();
 
+        var fromCache = this._resource.cached;
+        if (fromCache) {
+            this._statusCell.textContent = WebInspector.UIString("(from cache)");
+            this._statusCell.addStyleClass("network-dim-cell");
+            return;
+        }
+
+        this._statusCell.removeStyleClass("network-dim-cell");
         if (this._resource.statusCode) {
             this._statusCell.appendChild(document.createTextNode(this._resource.statusCode));
             this._statusCell.removeStyleClass("network-dim-cell");
@@ -1582,8 +1478,6 @@ WebInspector.NetworkDataGridNode.prototype = {
     refreshGraph: function(calculator)
     {
         var percentages = calculator.computeBarGraphPercentages(this._resource);
-        var labels = calculator.computeBarGraphLabels(this._resource);
-
         this._percentages = percentages;
 
         this._barAreaElement.removeStyleClass("hidden");
@@ -1599,6 +1493,7 @@ WebInspector.NetworkDataGridNode.prototype = {
         this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
         this._barRightElement.style.setProperty("left", percentages.middle + "%");
 
+        var labels = calculator.computeBarGraphLabels(this._resource);
         this._labelLeftElement.textContent = labels.left;
         this._labelRightElement.textContent = labels.right;
 
@@ -1611,6 +1506,8 @@ WebInspector.NetworkDataGridNode.prototype = {
 
     _refreshLabelPositions: function()
     {
+        if (!this._percentages)
+            return;
         this._labelLeftElement.style.removeProperty("left");
         this._labelLeftElement.style.removeProperty("right");
         this._labelLeftElement.removeStyleClass("before");

front-end/ObjectPropertiesSection.js

@@ -76,7 +76,8 @@ WebInspector.ObjectPropertiesSection.prototype = {
 
         if (!this.propertiesTreeOutline.children.length) {
             var title = "<div class=\"info\">" + this.emptyPlaceholder + "</div>";
-            var infoElement = new TreeElement(title, null, false);
+            var infoElement = new TreeElement(null, null, false);
+            infoElement.titleHTML = title;
             this.propertiesTreeOutline.appendChild(infoElement);
         }
         this.propertiesForTest = properties;
@@ -186,6 +187,8 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
             this.valueElement.addStyleClass("error");
         if (this.property.value.type)
             this.valueElement.addStyleClass("console-formatted-" + this.property.value.type);
+        if (this.property.value.type === "node")
+            this.valueElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
 
         this.listItemElement.removeChildren();
 
@@ -195,6 +198,24 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
         this.hasChildren = this.property.value.hasChildren;
     },
 
+    _contextMenuEventFired: function()
+    {
+        function selectNode(nodeId)
+        {
+            if (nodeId)
+                WebInspector.panels.elements.focusedDOMNode = WebInspector.domAgent.nodeForId(nodeId);
+        }
+
+        function revealElement()
+        {
+            this.property.value.pushNodeToFrontend(selectNode);
+        }
+
+        var contextMenu = new WebInspector.ContextMenu();
+        contextMenu.appendItem(WebInspector.UIString("Reveal in Elements Panel"), revealElement.bind(this));
+        contextMenu.show(event);
+    },
+
     updateSiblings: function()
     {
         if (this.parent.root)

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.settings.installApplicationSetting(this._sidebarWidthSettingName(), undefined);
 }
 
 // Should by in sync with style declarations.
@@ -377,7 +377,7 @@ WebInspector.Panel.prototype = {
 
     restoreSidebarWidth: function()
     {
-        var sidebarWidth = WebInspector.applicationSettings[this._sidebarWidthSettingName()];
+        var sidebarWidth = WebInspector.settings[this._sidebarWidthSettingName()];
         this.updateSidebarWidth(sidebarWidth);
     },
 
@@ -385,7 +385,7 @@ WebInspector.Panel.prototype = {
     {
         if (!this.sidebarElement)
             return;
-        WebInspector.applicationSettings[this._sidebarWidthSettingName()] = this.sidebarElement.offsetWidth;
+        WebInspector.settings[this._sidebarWidthSettingName()] = this.sidebarElement.offsetWidth;
     },
 
     updateMainViewWidth: function(width)

front-end/Popover.js

@@ -155,9 +155,15 @@ WebInspector.PopoverHelper = function(panelElement, getAnchor, showPopup, showOn
     this._onHide = onHide;
     panelElement.addEventListener("mousedown", this._mouseDown.bind(this), false);
     panelElement.addEventListener("mousemove", this._mouseMove.bind(this), false);
+    this.setTimeout(1000);
 }
 
 WebInspector.PopoverHelper.prototype = {
+    setTimeout: function(timeout)
+    {
+         this._timeout = timeout;
+    },
+
     _mouseDown: function(event)
     {
         this._killHidePopupTimer();
@@ -170,7 +176,7 @@ WebInspector.PopoverHelper.prototype = {
         if (this._hoverElement === event.target || (this._hoverElement && this._hoverElement.isAncestor(event.target)))
             return;
 
-        // User has 500ms to reach the popup.
+        // User has 500ms (this._timeout / 2) to reach the popup.
         if (this._popup && !this._hidePopupTimer) {
             var self = this;
             function doHide()
@@ -178,7 +184,7 @@ WebInspector.PopoverHelper.prototype = {
                 self._hidePopup();
                 delete self._hidePopupTimer;
             }
-            this._hidePopupTimer = setTimeout(doHide, 500);
+            this._hidePopupTimer = setTimeout(doHide, this._timeout / 2);
         }
 
         this._handleMouseAction(event);
@@ -192,7 +198,7 @@ WebInspector.PopoverHelper.prototype = {
         if (!this._hoverElement)
             return;
 
-        const toolTipDelay = isMouseDown ? 0 : (this._popup ? 600 : 1000);
+        const toolTipDelay = isMouseDown ? 0 : (this._popup ? this._timeout * 0.6 : this._timeout);
         this._hoverTimer = setTimeout(this._mouseHover.bind(this, this._hoverElement), toolTipDelay);
     },
 

front-end/ProfilesPanel.js

@@ -386,6 +386,20 @@ WebInspector.ProfilesPanel.prototype = {
         return result;
     },
 
+    hasTemporaryProfile: function(typeId)
+    {
+        var profilesCount = this._profiles.length;
+        for (var i = 0; i < profilesCount; ++i)
+            if (this._profiles[i].typeId === typeId && this._profiles[i].isTemporary)
+                return true;
+        return false;
+    },
+
+    hasProfile: function(profile)
+    {
+        return !!this._profilesIdMap[this._makeKey(profile.uid, profile.typeId)];
+    },
+
     updateProfile: function(profile)
     {
         var profilesCount = this._profiles.length;
@@ -443,12 +457,12 @@ WebInspector.ProfilesPanel.prototype = {
             if (!(titleKey in this._profileGroupsForLinks))
                 this._profileGroupsForLinks[titleKey] = 0;
 
-            groupNumber = ++this._profileGroupsForLinks[titleKey];
+            var groupNumber = ++this._profileGroupsForLinks[titleKey];
 
             if (groupNumber > 2)
                 // The title is used in the console message announcing that a profile has started so it gets
                 // incremented twice as often as it's displayed
-                title += " " + WebInspector.UIString("Run %d", groupNumber / 2);
+                title += " " + WebInspector.UIString("Run %d", (groupNumber + 1) / 2);
         }
         
         return title;
@@ -538,10 +552,11 @@ WebInspector.ProfilesPanel.prototype = {
             profileHeaders.sort(function(a, b) { return a.uid - b.uid; });
             var profileHeadersLength = profileHeaders.length;
             for (var i = 0; i < profileHeadersLength; ++i)
-                WebInspector.addProfileHeader(profileHeaders[i]);
+                if (!this.hasProfile(profileHeaders[i]))
+                    WebInspector.addProfileHeader(profileHeaders[i]);
         }
 
-        InspectorBackend.getProfileHeaders(populateCallback);
+        InspectorBackend.getProfileHeaders(populateCallback.bind(this));
 
         this._profilesWereRequested = true;
     },

front-end/PropertiesSection.js

@@ -31,8 +31,9 @@ WebInspector.PropertiesSection = function(title, subtitle)
 {
     WebInspector.Section.call(this, title, subtitle);
 
+    this.headerElement.addStyleClass("monospace");
     this.propertiesElement = document.createElement("ol");
-    this.propertiesElement.className = "properties properties-tree source-code";
+    this.propertiesElement.className = "properties properties-tree monospace";
     this.propertiesElement.tabIndex = 0;
     this.propertiesTreeOutline = new TreeOutline(this.propertiesElement);
     this.propertiesTreeOutline.section = this;

front-end/PropertiesSidebarPane.js

@@ -54,7 +54,7 @@ WebInspector.PropertiesSidebarPane.prototype = {
                 var title = prototype.description;
                 if (title.match(/Prototype$/))
                     title = title.replace(/Prototype$/, "");
-                var section = new WebInspector.ObjectPropertiesSection(prototype, title, WebInspector.UIString("Prototype"));
+                var section = new WebInspector.ObjectPropertiesSection(prototype, title);
                 self.sections.push(section);
                 body.appendChild(section.element);
             }

front-end/RemoteObject.js

@@ -41,6 +41,11 @@ WebInspector.RemoteObject.fromPrimitiveValue = function(value)
     return new WebInspector.RemoteObject(null, typeof value, value);
 }
 
+WebInspector.RemoteObject.fromLocalObject = function(value)
+{
+    return new WebInspector.LocalJSONObject(value);
+}
+
 WebInspector.RemoteObject.resolveNode = function(node, callback)
 {
     function mycallback(object)
@@ -136,3 +141,62 @@ WebInspector.RemoteObjectProperty = function(name, value)
     this.name = name;
     this.value = value;
 }
+
+// The below is a wrapper around a local object that provides an interface comaptible
+// with RemoteObject, to be used by the UI code (primarily ObjectPropertiesSection).
+// Note that only JSON-compliant objects are currently supported, as there's no provision
+// for traversing prototypes, extracting class names via constuctor, handling properties
+// or functions.
+
+WebInspector.LocalJSONObject = function(value)
+{
+    this._value = value;
+}
+
+WebInspector.LocalJSONObject.prototype = {
+    get description()
+    {
+        var type = this.type;
+        switch (type) {
+            case "array":
+                return "[" + this._value.length + "]";
+            case "object":
+                return this.hasChildren ? "{...}" : "{ }";
+            default:
+                return JSON.stringify(this._value);
+        }
+    },
+
+    get type()
+    {
+        if (this._value === null)
+            return "null";
+        if (this._value instanceof Array)
+            return "array";
+        return typeof this._value;
+    },
+
+    get hasChildren()
+    {
+        return typeof this._value === "object" && this._value !== null && Object.keys(this._value).length;
+    },
+
+    getOwnProperties: function(abbreviate, callback)
+    {
+        return this.getProperties(false, abbreviate, callback);
+    },
+
+    getProperties: function(ignoreHasOwnProperty, abbreviate, callback)
+    {
+        function buildProperty(propName)
+        {
+            return new WebInspector.RemoteObjectProperty(propName, new WebInspector.LocalJSONObject(this._value[propName]));
+        }
+        callback(Object.keys(this._value).map(buildProperty.bind(this)));
+    },
+
+    isError: function()
+    {
+        return false;
+    }
+}

front-end/Resource.js

@@ -25,15 +25,15 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-
 WebInspector.Resource = function(identifier, url)
 {
     this.identifier = identifier;
-    this._url = url;
+    this.url = url;
     this._startTime = -1;
     this._endTime = -1;
     this._requestMethod = "";
     this._category = WebInspector.resourceCategories.other;
+    this._pendingContentCallbacks = [];
 }
 
 // Keep these in sync with WebCore::InspectorResource::Type
@@ -74,11 +74,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";
@@ -97,14 +97,26 @@ WebInspector.Resource.prototype = {
         if (this._url === x)
             return;
 
-        var oldURL = this._url;
         this._url = x;
         delete this._parsedQueryParameters;
-        // FIXME: We should make the WebInspector object listen for the "url changed" event.
-        // Then resourceURLChanged can be removed.
-        WebInspector.resourceURLChanged(this, oldURL);
 
-        this.dispatchEventToListeners("url changed");
+        var parsedURL = x.asParsedURL();
+        this.domain = parsedURL ? parsedURL.host : "";
+        this.path = parsedURL ? parsedURL.path : "";
+        this.lastPathComponent = "";
+        if (parsedURL && parsedURL.path) {
+            // 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 = path.substring(lastSlashIndex + 1);
+        }
+        this.lastPathComponentLowerCase = this.lastPathComponent.toLowerCase();
     },
 
     get documentURL()
@@ -114,46 +126,21 @@ WebInspector.Resource.prototype = {
 
     set documentURL(x)
     {
-        if (this._documentURL === x)
-            return;
         this._documentURL = x;
     },
 
-    get domain()
-    {
-        return this._domain;
-    },
-
-    set domain(x)
-    {
-        if (this._domain === x)
-            return;
-        this._domain = x;
-    },
-
-    get lastPathComponent()
-    {
-        return this._lastPathComponent;
-    },
-
-    set lastPathComponent(x)
-    {
-        if (this._lastPathComponent === x)
-            return;
-        this._lastPathComponent = x;
-        this._lastPathComponentLowerCase = x ? x.toLowerCase() : null;
-    },
-
     get displayName()
     {
-        var title = this.lastPathComponent;
-        if (!title)
-            title = this.displayDomain;
-        if (!title && this.url)
-            title = this.url.trimURL(WebInspector.mainResource ? WebInspector.mainResource.domain : "");
-        if (title === "/")
-            title = this.url;
-        return title;
+        if (this._displayName)
+            return this._displayName;
+        this._displayName = this.lastPathComponent;
+        if (!this._displayName)
+            this._displayName = this.displayDomain;
+        if (!this._displayName && this.url)
+            this._displayName = this.url.trimURL(WebInspector.mainResource ? WebInspector.mainResource.domain : "");
+        if (this._displayName === "/")
+            this._displayName = this.url;
+        return this._displayName;
     },
 
     get displayDomain()
@@ -171,13 +158,7 @@ WebInspector.Resource.prototype = {
 
     set startTime(x)
     {
-        if (this._startTime === x)
-            return;
-
         this._startTime = x;
-
-        if (WebInspector.panels.resources)
-            WebInspector.panels.resources.refreshResource(this);
     },
 
     get responseReceivedTime()
@@ -187,13 +168,7 @@ WebInspector.Resource.prototype = {
 
     set responseReceivedTime(x)
     {
-        if (this._responseReceivedTime === x)
-            return;
-
         this._responseReceivedTime = x;
-
-        if (WebInspector.panels.resources)
-            WebInspector.panels.resources.refreshResource(this);
     },
 
     get endTime()
@@ -203,13 +178,15 @@ WebInspector.Resource.prototype = {
 
     set endTime(x)
     {
-        if (this._endTime === x)
-            return;
-
-        this._endTime = x;
-
-        if (WebInspector.panels.resources)
-            WebInspector.panels.resources.refreshResource(this);
+        if (this.timing && this.timing.requestTime) {
+            // Check against accurate responseReceivedTime.
+            this._endTime = Math.max(x, this.responseReceivedTime);
+        } else {
+            // Prefer endTime since it might be from the network stack.
+            this._endTime = x;
+            if (this._responseReceivedTime > x)
+                this._responseReceivedTime = x;
+        }
     },
 
     get duration()
@@ -240,13 +217,7 @@ WebInspector.Resource.prototype = {
 
     set resourceSize(x)
     {
-        if (this._resourceSize === x)
-            return;
-
         this._resourceSize = x;
-
-        if (WebInspector.panels.resources)
-            WebInspector.panels.resources.refreshResource(this);
     },
 
     get transferSize()
@@ -262,8 +233,6 @@ WebInspector.Resource.prototype = {
 
     set expectedContentLength(x)
     {
-        if (this._expectedContentLength === x)
-            return;
         this._expectedContentLength = x;
     },
 
@@ -282,6 +251,8 @@ WebInspector.Resource.prototype = {
         if (x) {
             this._checkWarnings();
             this.dispatchEventToListeners("finished");
+            if (this._pendingContentCallbacks.length)
+                this._innerRequestContent();
         }
     },
 
@@ -302,22 +273,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);
-
-        if (WebInspector.panels.resources) {
-            WebInspector.panels.resources.refreshResource(this);
-            WebInspector.panels.resources.recreateViewForResourceIfNeeded(this);
-        }
     },
 
     get cached()
@@ -328,7 +284,27 @@ WebInspector.Resource.prototype = {
     set cached(x)
     {
         this._cached = x;
-        this.dispatchEventToListeners("cached changed");
+        if (x)
+            delete this._timing;
+    },
+
+
+    get timing()
+    {
+        return this._timing;
+    },
+
+    set timing(x)
+    {
+        if (x && !this._cached) {
+            // Take startTime and responseReceivedTime from timing data for better accuracy.
+            // Timing's requestTime is a baseline in seconds, rest of the numbers there are ticks in millis.
+            this._startTime = x.requestTime;
+            this._responseReceivedTime = x.requestTime + x.receiveHeadersEnd / 1000.0;
+
+            this._timing = x;
+            this.dispatchEventToListeners("timing changed");
+        }
     },
 
     get mimeType()
@@ -338,9 +314,6 @@ WebInspector.Resource.prototype = {
 
     set mimeType(x)
     {
-        if (this._mimeType === x)
-            return;
-
         this._mimeType = x;
     },
 
@@ -376,7 +349,7 @@ WebInspector.Resource.prototype = {
                 this.category = WebInspector.resourceCategories.xhr;
                 break;
             case WebInspector.Resource.Type.WebSocket:
-                this.category = WebInspector.resourceCategories.websocket;
+                this.category = WebInspector.resourceCategories.websockets;
                 break;
             case WebInspector.Resource.Type.Other:
             default:
@@ -387,18 +360,14 @@ WebInspector.Resource.prototype = {
 
     get requestHeaders()
     {
-        if (this._requestHeaders === undefined)
-            this._requestHeaders = {};
-        return this._requestHeaders;
+        return this._requestHeaders || {};
     },
 
     set requestHeaders(x)
     {
-        if (this._requestHeaders === x)
-            return;
-
         this._requestHeaders = x;
         delete this._sortedRequestHeaders;
+        delete this._requestCookies;
 
         this.dispatchEventToListeners("requestHeaders changed");
     },
@@ -421,6 +390,13 @@ WebInspector.Resource.prototype = {
         return this._headerValue(this.requestHeaders, headerName);
     },
 
+    get requestCookies()
+    {
+        if (!this._requestCookies)
+            this._requestCookies = WebInspector.CookieParser.parseCookie(this.requestHeaderValue("Cookie"));
+        return this._requestCookies;
+    },
+
     get requestFormData()
     {
         return this._requestFormData;
@@ -434,18 +410,14 @@ WebInspector.Resource.prototype = {
 
     get responseHeaders()
     {
-        if (this._responseHeaders === undefined)
-            this._responseHeaders = {};
-        return this._responseHeaders;
+        return this._responseHeaders || {};
     },
 
     set responseHeaders(x)
     {
-        if (this._responseHeaders === x)
-            return;
-
         this._responseHeaders = x;
         delete this._sortedResponseHeaders;
+        delete this._responseCookies;
 
         this.dispatchEventToListeners("responseHeaders changed");
     },
@@ -468,6 +440,13 @@ WebInspector.Resource.prototype = {
         return this._headerValue(this.responseHeaders, headerName);
     },
 
+    get responseCookies()
+    {
+        if (!this._responseCookies)
+            this._responseCookies = WebInspector.CookieParser.parseSetCookie(this.responseHeaderValue("Set-Cookie"));
+        return this._responseCookies;
+    },
+
     get queryParameters()
     {
         if (this._parsedQueryParameters)
@@ -568,6 +547,7 @@ WebInspector.Resource.prototype = {
     set errors(x)
     {
         this._errors = x;
+        this.dispatchEventToListeners("errors-warnings-updated");
     },
 
     get warnings()
@@ -578,6 +558,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()
@@ -594,6 +582,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];
 
@@ -613,7 +604,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,
@@ -627,50 +618,70 @@ WebInspector.Resource.prototype = {
 
         if (msg)
             WebInspector.console.addMessage(msg);
+    },
+
+    get content()
+    {
+        return this._content;
+    },
+
+    set content(content)
+    {
+        var data = { oldContent: this._content, oldContentTimestamp: this._contentTimestamp };
+        this._content = content;
+        this._contentTimestamp = new Date();
+        this.dispatchEventToListeners("content-changed", data);
+    },
+
+    get contentTimestamp()
+    {
+        return this._contentTimestamp;
+    },
+
+    setInitialContent: function(content)
+    {
+        this._content = content;
+    },
+
+    requestContent: function(callback)
+    {
+        if (this._content) {
+            callback(this._content, this._contentEncoded);
+            return;
+        }
+        this._pendingContentCallbacks.push(callback);
+        if (this.finished)
+            this._innerRequestContent();
+    },
+
+    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;
+    },
+
+    _innerRequestContent: function()
+    {
+        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;
+            delete this._contentRequested;
+        }
+        WebInspector.ResourceManager.requestContent(this, this._contentEncoded, onResourceContent.bind(this));
     }
 }
 
 WebInspector.Resource.prototype.__proto__ = WebInspector.Object.prototype;
-
-WebInspector.Resource.CompareByStartTime = function(a, b)
-{
-    return a.startTime - b.startTime;
-}
-
-WebInspector.Resource.CompareByResponseReceivedTime = function(a, b)
-{
-    var aVal = a.responseReceivedTime;
-    var bVal = b.responseReceivedTime;
-    if (aVal === -1 ^ bVal === -1)
-        return bVal - aVal;
-    return aVal - bVal;
-}
-
-WebInspector.Resource.CompareByEndTime = function(a, b)
-{
-    var aVal = a.endTime;
-    var bVal = b.endTime;
-    if (aVal === -1 ^ bVal === -1)
-        return bVal - aVal;
-    return aVal - bVal;
-}
-
-WebInspector.Resource.CompareByDuration = function(a, b)
-{
-    return a.duration - b.duration;
-}
-
-WebInspector.Resource.CompareByLatency = function(a, b)
-{
-    return a.latency - b.latency;
-}
-
-WebInspector.Resource.CompareBySize = function(a, b)
-{
-    return a.resourceSize - b.resourceSize;
-}
-
-WebInspector.Resource.CompareByTransferSize = function(a, b)
-{
-    return a.transferSize - b.transferSize;
-}

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 = [];
     }
 }

front-end/ResourceCookiesView.js

@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceCookiesView = function(resource)
+{
+    WebInspector.View.call(this);
+    this.element.addStyleClass("resource-cookies-view");
+
+    this._resource = resource;
+
+    resource.addEventListener("requestHeaders changed", this.show, this);
+    resource.addEventListener("responseHeaders changed", this.show, this);
+}
+
+WebInspector.ResourceCookiesView.prototype = {
+    show: function(parentElement)
+    {
+        if (!this._resource.requestCookies && !this._resource.responseCookies) {
+            if (!this._emptyMsgElement) {
+                this._emptyMsgElement = document.createElement("div");
+                this._emptyMsgElement.className = "storage-empty-view";
+                this._emptyMsgElement.textContent = WebInspector.UIString("This request has no cookies.");
+                this.element.appendChild(this._emptyMsgElement);
+            }
+            WebInspector.View.prototype.show.call(this, parentElement);
+            return;
+        }
+
+        if (this._emptyMsgElement)
+            this._emptyMsgElement.parentElement.removeChild(this._emptyMsgElement);
+
+        this._cookiesTable = new WebInspector.CookiesTable(null, true, true);
+        this._cookiesTable.addCookiesFolder(WebInspector.UIString("Request Cookies"), this._resource.requestCookies);
+        this._cookiesTable.addCookiesFolder(WebInspector.UIString("Response Cookies"), this._resource.responseCookies);
+        this.element.appendChild(this._cookiesTable.element);
+
+        WebInspector.View.prototype.show.call(this, parentElement);
+        this._cookiesTable.updateWidths();
+    }
+}
+
+WebInspector.ResourceCookiesView.prototype.__proto__ = WebInspector.View.prototype;

front-end/ResourceHeadersView.js

@@ -0,0 +1,276 @@
+/*
+ * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) IBM Corp. 2009  All rights reserved.
+ * Copyright (C) 2010 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer. 
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution. 
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission. 
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceHeadersView = function(resource)
+{
+    WebInspector.View.call(this);
+    this.element.addStyleClass("resource-headers-view");
+
+    this._resource = resource;
+
+    this._headersListElement = document.createElement("ol");
+    this._headersListElement.className = "outline-disclosure";
+    this.element.appendChild(this._headersListElement);
+
+    this._headersTreeOutline = new TreeOutline(this._headersListElement);
+    this._headersTreeOutline.expandTreeElementsWhenArrowing = true;
+
+    this._urlTreeElement = new TreeElement("", null, false);
+    this._urlTreeElement.selectable = false;
+    this._headersTreeOutline.appendChild(this._urlTreeElement);
+
+    this._requestMethodTreeElement = new TreeElement("", null, false);
+    this._requestMethodTreeElement.selectable = false;
+    this._headersTreeOutline.appendChild(this._requestMethodTreeElement);
+
+    this._statusCodeTreeElement = new TreeElement("", null, false);
+    this._statusCodeTreeElement.selectable = false;
+    this._headersTreeOutline.appendChild(this._statusCodeTreeElement);
+     
+    this._requestHeadersTreeElement = new TreeElement("", null, true);
+    this._requestHeadersTreeElement.expanded = true;
+    this._requestHeadersTreeElement.selectable = false;
+    this._headersTreeOutline.appendChild(this._requestHeadersTreeElement);
+
+    this._decodeHover = WebInspector.UIString("Double-Click to toggle between URL encoded and decoded formats");
+    this._decodeRequestParameters = true;
+
+    this._queryStringTreeElement = new TreeElement("", null, true);
+    this._queryStringTreeElement.expanded = true;
+    this._queryStringTreeElement.selectable = false;
+    this._queryStringTreeElement.hidden = true;
+    this._headersTreeOutline.appendChild(this._queryStringTreeElement);
+
+    this._formDataTreeElement = new TreeElement("", null, true);
+    this._formDataTreeElement.expanded = true;
+    this._formDataTreeElement.selectable = false;
+    this._formDataTreeElement.hidden = true;
+    this._headersTreeOutline.appendChild(this._formDataTreeElement);
+
+    this._requestPayloadTreeElement = new TreeElement(WebInspector.UIString("Request Payload"), null, true);
+    this._requestPayloadTreeElement.expanded = true;
+    this._requestPayloadTreeElement.selectable = false;
+    this._requestPayloadTreeElement.hidden = true;
+    this._headersTreeOutline.appendChild(this._requestPayloadTreeElement);
+
+    this._responseHeadersTreeElement = new TreeElement("", null, true);
+    this._responseHeadersTreeElement.expanded = true;
+    this._responseHeadersTreeElement.selectable = false;
+    this._headersTreeOutline.appendChild(this._responseHeadersTreeElement);
+
+    resource.addEventListener("requestHeaders changed", this._refreshRequestHeaders, this);
+    resource.addEventListener("responseHeaders changed", this._refreshResponseHeaders, this);
+    resource.addEventListener("finished", this._refreshHTTPInformation, this);
+
+    this._refreshURL();
+    this._refreshQueryString();
+    this._refreshRequestHeaders();
+    this._refreshResponseHeaders();
+    this._refreshHTTPInformation();
+}
+
+WebInspector.ResourceHeadersView.prototype = {
+
+    _refreshURL: function()
+    {
+        this._urlTreeElement.titleHTML = "<div class=\"header-name\">" + WebInspector.UIString("Request URL") + ":</div>" +
+            "<div class=\"header-value source-code\">" + this._resource.url.escapeHTML() + "</div>";
+    },
+
+    _refreshQueryString: function()
+    {
+        var queryParameters = this._resource.queryParameters;
+        this._queryStringTreeElement.hidden = !queryParameters;
+        if (queryParameters)
+            this._refreshParms(WebInspector.UIString("Query String Parameters"), queryParameters, this._queryStringTreeElement);
+    },
+
+    _refreshFormData: function()
+    {
+        this._formDataTreeElement.hidden = true;
+        this._requestPayloadTreeElement.hidden = true;
+
+        var formData = this._resource.requestFormData;
+        if (!formData)
+            return;
+
+        var formParameters = this._resource.formParameters;
+        if (formParameters) {
+            this._formDataTreeElement.hidden = false;
+            this._refreshParms(WebInspector.UIString("Form Data"), formParameters, this._formDataTreeElement);
+        } else {
+            this._requestPayloadTreeElement.hidden = false;
+            this._refreshRequestPayload(formData);
+        }
+    },
+
+    _refreshRequestPayload: function(formData)
+    {
+        this._requestPayloadTreeElement.removeChildren();
+
+        var title = "<div class=\"raw-form-data header-value source-code\">" + formData.escapeHTML() + "</div>";
+        var parmTreeElement = new TreeElement(null, null, false);
+        parmTreeElement.titleHTML = title;
+        parmTreeElement.selectable = false;
+        this._requestPayloadTreeElement.appendChild(parmTreeElement);
+    },
+
+    _refreshParms: function(title, parms, parmsTreeElement)
+    {
+        parmsTreeElement.removeChildren();
+
+        parmsTreeElement.titleHTML = title + "<span class=\"header-count\">" + WebInspector.UIString(" (%d)", parms.length) + "</span>";
+
+        for (var i = 0; i < parms.length; ++i) {
+            var name = parms[i].name;
+            var value = parms[i].value;
+
+            var errorDecoding = false;
+            if (this._decodeRequestParameters) {
+                if (value.indexOf("%") >= 0) {
+                    try {
+                        value = decodeURIComponent(value);
+                    } catch(e) {
+                        errorDecoding = true;
+                    }
+                }
+                    
+                value = value.replace(/\+/g, " ");
+            }
+
+            valueEscaped = value.escapeHTML();
+            if (errorDecoding)
+                valueEscaped += " <span class=\"error-message\">" + WebInspector.UIString("(unable to decode value)").escapeHTML() + "</span>";
+
+            var title = "<div class=\"header-name\">" + name.escapeHTML() + ":</div>";
+            title += "<div class=\"header-value source-code\">" + valueEscaped + "</div>";
+
+            var parmTreeElement = new TreeElement(null, null, false);
+            parmTreeElement.titleHTML = title;
+            parmTreeElement.selectable = false;
+            parmTreeElement.tooltip = this._decodeHover;
+            parmTreeElement.ondblclick = this._toggleURLdecoding.bind(this);
+            parmsTreeElement.appendChild(parmTreeElement);
+        }
+    },
+
+    _toggleURLdecoding: function(event)
+    {
+        this._decodeRequestParameters = !this._decodeRequestParameters;
+        this._refreshQueryString();
+        this._refreshFormData();
+    },
+
+    _getHeaderValue: function(headers, key)
+    {
+        var lowerKey = key.toLowerCase();
+        for (var testKey in headers) {
+            if (testKey.toLowerCase() === lowerKey)
+                return headers[testKey];
+        }
+    },
+
+    _refreshRequestHeaders: function()
+    {
+        var additionalRow = null;
+        if (typeof this._resource.webSocketRequestKey3 !== "undefined")
+            additionalRow = {header: "(Key3)", value: this._resource.webSocketRequestKey3};
+        this._refreshHeaders(WebInspector.UIString("Request Headers"), this._resource.sortedRequestHeaders, additionalRow, this._requestHeadersTreeElement);
+        this._refreshFormData();
+    },
+
+    _refreshResponseHeaders: function()
+    {
+        var additionalRow = null;
+        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);
+    },
+
+    _refreshHTTPInformation: function()
+    {
+        var requestMethodElement = this._requestMethodTreeElement;
+        requestMethodElement.hidden = !this._resource.statusCode;
+        var statusCodeElement = this._statusCodeTreeElement;
+        statusCodeElement.hidden = !this._resource.statusCode;
+        var statusCodeImage = "";
+
+        if (this._resource.statusCode) {
+            var statusImageSource = "";
+            if (this._resource.statusCode < 300)
+                statusImageSource = "Images/successGreenDot.png";
+            else if (this._resource.statusCode < 400)
+                statusImageSource = "Images/warningOrangeDot.png";
+            else
+                statusImageSource = "Images/errorRedDot.png";
+
+            var statusTextEscaped = this._resource.statusCode + " " + this._resource.statusText.escapeHTML();
+            statusCodeImage = "<img class=\"resource-status-image\" src=\"" + statusImageSource + "\" title=\"" + statusTextEscaped + "\">";
+    
+            requestMethodElement.titleHTML = "<div class=\"header-name\">" + WebInspector.UIString("Request Method") + ":</div>" +
+                "<div class=\"header-value source-code\">" + this._resource.requestMethod + "</div>";
+
+            statusCodeElement.titleHTML = "<div class=\"header-name\">" + WebInspector.UIString("Status Code") + ":</div>" +
+                statusCodeImage + "<div class=\"header-value source-code\">" + statusTextEscaped + "</div>";
+        }
+    },
+    
+    _refreshHeaders: function(title, headers, additionalRow, headersTreeElement)
+    {
+        headersTreeElement.removeChildren();
+
+        var length = headers.length;
+        headersTreeElement.titleHTML = title.escapeHTML() + "<span class=\"header-count\">" + WebInspector.UIString(" (%d)", length) + "</span>";
+        headersTreeElement.hidden = !length;
+
+        var length = headers.length;
+        for (var i = 0; i < length; ++i) {
+            var title = "<div class=\"header-name\">" + headers[i].header.escapeHTML() + ":</div>";
+            title += "<div class=\"header-value source-code\">" + headers[i].value.escapeHTML() + "</div>"
+
+            var headerTreeElement = new TreeElement(null, null, false);
+            headerTreeElement.titleHTML = title;
+            headerTreeElement.selectable = false;
+            headersTreeElement.appendChild(headerTreeElement);
+        }
+
+        if (additionalRow) {
+            var title = "<div class=\"header-name\">" + additionalRow.header.escapeHTML() + ":</div>";
+            title += "<div class=\"header-value source-code\">" + additionalRow.value.escapeHTML() + "</div>"
+
+            var headerTreeElement = new TreeElement(null, null, false);
+            headerTreeElement.titleHTML = title;
+            headerTreeElement.selectable = false;
+            headersTreeElement.appendChild(headerTreeElement);
+        }
+    }
+}
+
+WebInspector.ResourceHeadersView.prototype.__proto__ = WebInspector.View.prototype;

front-end/ResourceManager.js

@@ -0,0 +1,621 @@
+/*
+ * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceManager = function()
+{
+    this._registerNotifyHandlers(
+        "identifierForInitialRequest",
+        "willSendRequest",
+        "markResourceAsCached",
+        "didReceiveResponse",
+        "didReceiveContentLength",
+        "didFinishLoading",
+        "didFailLoading",
+        "didLoadResourceFromMemoryCache",
+        "setInitialContent",
+        "didCommitLoadForFrame",
+        "frameDetachedFromParent",
+        "didCreateWebSocket",
+        "willSendWebSocketHandshakeRequest",
+        "didReceiveWebSocketHandshakeResponse",
+        "didCloseWebSocket");
+
+    this._resourcesById = {};
+    this._resourcesByURL = {};
+    this._resourceTreeModel = new WebInspector.ResourceTreeModel();
+    InspectorBackend.cachedResources(this._processCachedResources.bind(this));
+}
+
+WebInspector.ResourceManager.prototype = {
+    _registerNotifyHandlers: function()
+    {
+        for (var i = 0; i < arguments.length; ++i)
+            WebInspector[arguments[i]] = this[arguments[i]].bind(this);
+    },
+
+    identifierForInitialRequest: function(identifier, url, loader)
+    {
+        var resource = this._createResource(identifier, url, loader);
+
+        // It is important to bind resource url early (before scripts compile).
+        this._bindResourceURL(resource);
+
+        WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.audits.resourceStarted(resource);
+    },
+
+    _createResource: function(identifier, url, loader)
+    {
+        var resource = new WebInspector.Resource(identifier, url);
+        resource.loader = loader;
+        if (loader)
+            resource.documentURL = loader.url;
+
+        this._resourcesById[identifier] = resource;
+        return resource;
+    },
+
+    willSendRequest: function(identifier, time, request, redirectResponse)
+    {
+        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
+        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);
+        }
+
+        this._updateResourceWithRequest(resource, request);
+        resource.startTime = time;
+
+        if (isRedirect) {
+            WebInspector.panels.network.refreshResource(resource);
+            WebInspector.panels.audits.resourceStarted(resource);
+        } else 
+            WebInspector.panels.network.refreshResource(resource);
+    },
+
+    _updateResourceWithRequest: function(resource, request)
+    {
+        resource.requestMethod = request.httpMethod;
+        resource.requestHeaders = request.httpHeaderFields;
+        resource.requestFormData = request.requestFormData;
+    },
+
+    _appendRedirect: function(identifier, redirectURL)
+    {
+        var originalResource = this._resourcesById[identifier];
+        originalResource.identifier = null;
+
+        var newResource = this._createResource(identifier, redirectURL, originalResource.loader);
+        newResource.redirects = originalResource.redirects || [];
+        delete originalResource.redirects;
+        newResource.redirects.push(originalResource);
+        return newResource;
+    },
+
+    markResourceAsCached: function(identifier)
+    {
+        var resource = this._resourcesById[identifier];
+        if (!resource)
+            return;
+
+        resource.cached = true;
+        WebInspector.panels.network.refreshResource(resource);
+    },
+
+    didReceiveResponse: function(identifier, time, resourceType, response)
+    {
+        var resource = this._resourcesById[identifier];
+        if (!resource)
+            return;
+
+        resource.responseReceivedTime = time;
+        resource.type = WebInspector.Resource.Type[resourceType];
+
+        this._updateResourceWithResponse(resource, response);
+
+        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;
+        resource.suggestedFilename = response.suggestedFilename;
+        resource.statusCode = response.httpStatusCode;
+        resource.statusText = response.httpStatusText;
+
+        resource.responseHeaders = response.httpHeaderFields;
+        resource.connectionReused = response.connectionReused;
+        resource.connectionID = response.connectionID;
+
+        if (response.wasCached)
+            resource.cached = true;
+        else
+            resource.timing = response.timing;
+
+        if (response.loadInfo) {
+            if (response.loadInfo.httpStatusCode)
+                resource.statusCode = response.loadInfo.httpStatusCode;
+            if (response.loadInfo.httpStatusText)
+                resource.statusText = response.loadInfo.httpStatusText;
+            resource.requestHeaders = response.loadInfo.requestHeaders;
+            resource.responseHeaders = response.loadInfo.responseHeaders;
+        }
+    },
+
+    didReceiveContentLength: function(identifier, time, lengthReceived)
+    {
+        var resource = this._resourcesById[identifier];
+        if (!resource)
+            return;
+
+        resource.resourceSize += lengthReceived;
+        resource.endTime = time;
+
+        WebInspector.panels.network.refreshResource(resource);
+    },
+
+    didFinishLoading: function(identifier, finishTime)
+    {
+        var resource = this._resourcesById[identifier];
+        if (!resource)
+            return;
+
+        resource.endTime = finishTime;
+        resource.finished = true;
+
+        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._resourcesById[identifier];
+        if (!resource)
+            return;
+
+        resource.failed = true;
+        resource.localizedFailDescription = localizedDescription;
+        resource.finished = true;
+        resource.endTime = time;
+
+        WebInspector.panels.network.refreshResource(resource);
+        WebInspector.panels.audits.resourceFinished(resource);
+        WebInspector.extensionServer.notifyResourceFinished(resource);
+        delete this._resourcesById[identifier];
+    },
+
+    didLoadResourceFromMemoryCache: function(time, cachedResource)
+    {
+        var resource = this._createResource(null, cachedResource.url, cachedResource.loader);
+        this._updateResourceWithCachedResource(resource, cachedResource);
+        resource.cached = true;
+        resource.requestMethod = "GET";
+        resource.startTime = resource.responseReceivedTime = resource.endTime = time;
+        resource.finished = true;
+
+        WebInspector.panels.network.refreshResource(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);
+    },
+
+    setInitialContent: function(identifier, sourceString, type)
+    {
+        var resource = WebInspector.panels.network.resources[identifier];
+        if (!resource)
+            return;
+
+        resource.type = WebInspector.Resource.Type[type];
+        resource.setInitialContent(sourceString);
+        WebInspector.panels.resources.refreshResource(resource);
+        WebInspector.panels.network.refreshResource(resource);
+    },
+
+    didCommitLoadForFrame: function(frame, loader)
+    {
+        this._resourceTreeModel.didCommitLoadForFrame(frame, loader);
+        if (!frame.parentId) {
+            var mainResource = this.resourceForURL(frame.url);
+            if (mainResource) {
+                WebInspector.mainResource = mainResource;
+                mainResource.isMainResource = true;
+            }
+        }
+    },
+
+    frameDetachedFromParent: function(frameId)
+    {
+        this._resourceTreeModel.frameDetachedFromParent(frameId);
+    },
+
+    didCreateWebSocket: function(identifier, requestURL)
+    {
+        var resource = this._createResource(identifier, requestURL);
+        resource.type = WebInspector.Resource.Type.WebSocket;
+        WebInspector.panels.network.refreshResource(resource);
+    },
+
+    willSendWebSocketHandshakeRequest: function(identifier, time, request)
+    {
+        var resource = this._resourcesById[identifier];
+        if (!resource)
+            return;
+
+        resource.requestMethod = "GET";
+        resource.requestHeaders = request.webSocketHeaderFields;
+        resource.webSocketRequestKey3 = request.webSocketRequestKey3;
+        resource.startTime = time;
+
+        WebInspector.panels.network.refreshResource(resource);
+    },
+
+    didReceiveWebSocketHandshakeResponse: function(identifier, time, response)
+    {
+        var resource = this._resourcesById[identifier];
+        if (!resource)
+            return;
+
+        resource.statusCode = response.statusCode;
+        resource.statusText = response.statusText;
+        resource.responseHeaders = response.webSocketHeaderFields;
+        resource.webSocketChallengeResponse = response.webSocketChallengeResponse;
+        resource.responseReceivedTime = time;
+
+        WebInspector.panels.network.refreshResource(resource);
+    },
+
+    didCloseWebSocket: function(identifier, time)
+    {
+        var resource = this._resourcesById[identifier];
+        if (!resource)
+            return;
+        resource.endTime = time;
+
+        WebInspector.panels.network.refreshResource(resource);
+    },
+
+    _processCachedResources: function(mainFramePayload)
+    {
+        var mainResource = this._addFramesRecursively(mainFramePayload);
+        WebInspector.mainResource = mainResource;
+        mainResource.isMainResource = true;
+    },
+
+    _addFramesRecursively: function(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(framePayload);
+        this._resourceTreeModel.addResourceToFrame(framePayload.id, frameResource);
+
+        for (var i = 0; framePayload.children && i < framePayload.children.length; ++i)
+            this._addFramesRecursively(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, resource];
+    },
+
+    _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)
+{
+    var resourceView = resource._resourcesView;
+    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.recreateResourceView = function(resource)
+{
+    var newView = WebInspector.ResourceManager.createResourceView(resource);
+
+    var oldView = resource._resourcesView;
+    var oldViewParentNode = oldView.visible ? oldView.element.parentNode : null;
+    var scrollTop = oldView.scrollTop;
+
+    resource._resourcesView.detach();
+    delete resource._resourcesView;
+
+    resource._resourcesView = newView;
+
+    if (oldViewParentNode)
+        newView.show(oldViewParentNode);
+    if (scrollTop)
+        newView.scrollTop = scrollTop;
+
+    WebInspector.panels.scripts.viewRecreated(oldView, newView);
+    return newView;
+}
+
+WebInspector.ResourceManager.existingResourceViewForResource = function(resource)
+{
+    if (!resource)
+        return null;
+    return resource._resourcesView;
+}
+
+WebInspector.ResourceManager.requestContent = function(resource, base64Encode, callback)
+{
+    InspectorBackend.resourceContent(resource.loader.frameId, resource.url, base64Encode, callback);
+}
+
+WebInspector.ResourceTreeModel = function()
+{
+    this._resourcesByFrameId = {};
+    this._subframes = {};
+}
+
+WebInspector.ResourceTreeModel.prototype = {
+    addOrUpdateFrame: function(frame)
+    {
+        var tmpResource = new WebInspector.Resource(null, frame.url);
+        WebInspector.panels.resources.addOrUpdateFrame(frame.parentId, frame.id, frame.name, tmpResource.displayName);
+        var subframes = this._subframes[frame.parentId];
+        if (!subframes) {
+            subframes = {};
+            this._subframes[frame.parentId || 0] = subframes;
+        }
+        subframes[frame.id] = true;
+    },
+
+    didCommitLoadForFrame: function(frame, loader)
+    {
+        // frame.parentId === 0 is when main frame navigation happens.
+        this._clearChildFramesAndResources(frame.parentId ? frame.id : 0, loader.loaderId);
+
+        this.addOrUpdateFrame(frame);
+
+        var resourcesForFrame = this._resourcesByFrameId[frame.id];
+        for (var i = 0; resourcesForFrame && i < resourcesForFrame.length; ++i) {
+            WebInspector.resourceManager._bindResourceURL(resourcesForFrame[i]);
+            WebInspector.panels.resources.addResourceToFrame(frame.id, resourcesForFrame[i]);
+        }
+    },
+
+    frameDetachedFromParent: function(frameId)
+    {
+        this._clearChildFramesAndResources(frameId, 0);
+        WebInspector.panels.resources.removeFrame(frameId);
+    },
+
+    _clearChildFramesAndResources: function(frameId, loaderId)
+    {
+        WebInspector.panels.resources.removeResourcesFromFrame(frameId);
+
+        this._clearResources(frameId, loaderId);
+        var subframes = this._subframes[frameId];
+        if (!subframes)
+            return;
+
+        for (var childFrameId in subframes) {
+            WebInspector.panels.resources.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.resources.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;
+    }
+}

front-end/ResourceTimingView.js

@@ -0,0 +1,157 @@
+/*
+ * Copyright (C) 2010 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceTimingView = function(resource)
+{
+    WebInspector.View.call(this);
+    this.element.addStyleClass("resource-timing-view");
+
+    this._resource = resource;
+
+    resource.addEventListener("timing changed", this._refresh, this);
+}
+
+WebInspector.ResourceTimingView.prototype = {
+    show: function(parentElement)
+    {
+        if (!this._resource.timing) {
+            if (!this._emptyMsgElement) {
+                this._emptyMsgElement = document.createElement("div");
+                this._emptyMsgElement.className = "storage-empty-view";
+                this._emptyMsgElement.textContent = WebInspector.UIString("This request has no detailed timing info.");
+                this.element.appendChild(this._emptyMsgElement);
+            }
+            WebInspector.View.prototype.show.call(this, parentElement);
+            return;
+        }
+
+        if (this._emptyMsgElement)
+            this._emptyMsgElement.parentElement.removeChild(this._emptyMsgElement);
+
+        this._refresh();
+        WebInspector.View.prototype.show.call(this, parentElement);
+    },
+
+    _refresh: function()
+    {
+        if (this._tableElement)
+            this._tableElement.parentElement.removeChild(this._tableElement);
+
+        this._tableElement = WebInspector.ResourceTimingView.createTimingTable(this._resource);
+        this.element.appendChild(this._tableElement);
+    }
+}
+
+WebInspector.ResourceTimingView.createTimingTable = function(resource)
+{
+    var tableElement = document.createElement("table");
+    var rows = [];
+
+    function addRow(title, className, start, end, color)
+    {
+        var row = {};
+        row.title = title;
+        row.className = className;
+        row.start = start;
+        row.end = end;
+        rows.push(row);
+    }
+
+    if (resource.timing.proxyStart !== -1)
+        addRow(WebInspector.UIString("Proxy"), "proxy", resource.timing.proxyStart, resource.timing.proxyEnd);
+
+    if (resource.timing.dnsStart !== -1)
+        addRow(WebInspector.UIString("DNS Lookup"), "dns", resource.timing.dnsStart, resource.timing.dnsEnd);
+
+    if (resource.timing.connectStart !== -1) {
+        if (resource.connectionReused)
+            addRow(WebInspector.UIString("Blocking"), "connecting", resource.timing.connectStart, resource.timing.connectEnd);
+        else {
+            var connectStart = resource.timing.connectStart;
+            // Connection includes DNS, subtract it here.
+            if (resource.timing.dnsStart !== -1)
+                connectStart += resource.timing.dnsEnd - resource.timing.dnsStart;
+            addRow(WebInspector.UIString("Connecting"), "connecting", connectStart, resource.timing.connectEnd);
+        }
+    }
+
+    if (resource.timing.sslStart !== -1)
+        addRow(WebInspector.UIString("SSL"), "ssl", resource.timing.sslStart, resource.timing.sslEnd);
+
+    var sendStart = resource.timing.sendStart;
+    if (resource.timing.sslStart !== -1)
+        sendStart += resource.timing.sslEnd - resource.timing.sslStart;
+    
+    addRow(WebInspector.UIString("Sending"), "sending", resource.timing.sendStart, resource.timing.sendEnd);
+    addRow(WebInspector.UIString("Waiting"), "waiting", resource.timing.sendEnd, resource.timing.receiveHeadersEnd);
+    addRow(WebInspector.UIString("Receiving"), "receiving", (resource.responseReceivedTime - resource.timing.requestTime) * 1000, (resource.endTime - resource.timing.requestTime) * 1000);
+
+    const chartWidth = 200;
+    var total = (resource.endTime - resource.timing.requestTime) * 1000;
+    var scale = chartWidth / total;
+
+    for (var i = 0; i < rows.length; ++i) {
+        var tr = document.createElement("tr");
+        tableElement.appendChild(tr);
+
+        var td = document.createElement("td");
+        td.textContent = rows[i].title;
+        tr.appendChild(td);
+
+        td = document.createElement("td");
+        td.width = chartWidth + "px";
+
+        var row = document.createElement("div");
+        row.className = "network-timing-row";
+        td.appendChild(row);
+
+        var bar = document.createElement("span");
+        bar.className = "network-timing-bar " + rows[i].className;
+        bar.style.left = scale * rows[i].start + "px";
+        bar.style.right = scale * (total - rows[i].end) + "px";
+        bar.style.backgroundColor = rows[i].color;
+        bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
+        row.appendChild(bar);
+
+        var title = document.createElement("span");
+        title.className = "network-timing-bar-title";
+        if (total - rows[i].end < rows[i].start)
+            title.style.right = (scale * (total - rows[i].end) + 3) + "px";
+        else
+            title.style.left = (scale * rows[i].start + 3) + "px";
+        title.textContent = Number.millisToString(rows[i].end - rows[i].start);
+        row.appendChild(title);
+
+        tr.appendChild(td);
+    }
+    return tableElement;
+}
+
+WebInspector.ResourceTimingView.prototype.__proto__ = WebInspector.View.prototype;

front-end/ResourceView.js

@@ -7,13 +7,13 @@
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer. 
+ *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
  *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution. 
+ *     documentation and/or other materials provided with the distribution.
  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission. 
+ *     from this software without specific prior written permission.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
@@ -30,324 +30,14 @@
 WebInspector.ResourceView = function(resource)
 {
     WebInspector.View.call(this);
-
     this.element.addStyleClass("resource-view");
-
     this.resource = resource;
-
-    this.tabbedPane = new WebInspector.TabbedPane(this.element);
-
-    this.headersElement = document.createElement("div");
-    this.headersElement.className = "resource-view-headers";
-    this.tabbedPane.appendTab("headers", WebInspector.UIString("Headers"), this.headersElement, this._selectHeadersTab.bind(this, true));
-
-    if (this.hasContentTab()) {
-        this.contentElement = document.createElement("div");
-        this.contentElement.className = "resource-view-content";
-        this.tabbedPane.appendTab("content", WebInspector.UIString("Content"), this.contentElement, this.selectContentTab.bind(this, true));
-    }
-
-    this.headersListElement = document.createElement("ol");
-    this.headersListElement.className = "outline-disclosure";
-    this.headersElement.appendChild(this.headersListElement);
-
-    this.headersTreeOutline = new TreeOutline(this.headersListElement);
-    this.headersTreeOutline.expandTreeElementsWhenArrowing = true;
-
-    this.urlTreeElement = new TreeElement("", null, false);
-    this.urlTreeElement.selectable = false;
-    this.headersTreeOutline.appendChild(this.urlTreeElement);
-
-    this.requestMethodTreeElement = new TreeElement("", null, false);
-    this.requestMethodTreeElement.selectable = false;
-    this.headersTreeOutline.appendChild(this.requestMethodTreeElement);
-
-    this.statusCodeTreeElement = new TreeElement("", null, false);
-    this.statusCodeTreeElement.selectable = false;
-    this.headersTreeOutline.appendChild(this.statusCodeTreeElement);
-     
-    this.requestHeadersTreeElement = new TreeElement("", null, true);
-    this.requestHeadersTreeElement.expanded = true;
-    this.requestHeadersTreeElement.selectable = false;
-    this.headersTreeOutline.appendChild(this.requestHeadersTreeElement);
-
-    this._decodeHover = WebInspector.UIString("Double-Click to toggle between URL encoded and decoded formats");
-    this._decodeRequestParameters = true;
-
-    this.queryStringTreeElement = new TreeElement("", null, true);
-    this.queryStringTreeElement.expanded = true;
-    this.queryStringTreeElement.selectable = false;
-    this.queryStringTreeElement.hidden = true;
-    this.headersTreeOutline.appendChild(this.queryStringTreeElement);
-
-    this.formDataTreeElement = new TreeElement("", null, true);
-    this.formDataTreeElement.expanded = true;
-    this.formDataTreeElement.selectable = false;
-    this.formDataTreeElement.hidden = true;
-    this.headersTreeOutline.appendChild(this.formDataTreeElement);
-
-    this.requestPayloadTreeElement = new TreeElement(WebInspector.UIString("Request Payload"), null, true);
-    this.requestPayloadTreeElement.expanded = true;
-    this.requestPayloadTreeElement.selectable = false;
-    this.requestPayloadTreeElement.hidden = true;
-    this.headersTreeOutline.appendChild(this.requestPayloadTreeElement);
-
-    this.responseHeadersTreeElement = new TreeElement("", null, true);
-    this.responseHeadersTreeElement.expanded = true;
-    this.responseHeadersTreeElement.selectable = false;
-    this.headersTreeOutline.appendChild(this.responseHeadersTreeElement);
-
-    this.headersVisible = true;
-
-    resource.addEventListener("url changed", this._refreshURL, this);
-    resource.addEventListener("requestHeaders changed", this._refreshRequestHeaders, this);
-    resource.addEventListener("responseHeaders changed", this._refreshResponseHeaders, this);
-    resource.addEventListener("finished", this._refreshHTTPInformation, this);
-
-    this._refreshURL();
-    this._refreshQueryString();
-    this._refreshRequestHeaders();
-    this._refreshResponseHeaders();
-    this._refreshHTTPInformation();
-    this._selectTab();
 }
 
 WebInspector.ResourceView.prototype = {
-    attach: function()
+    hasContent: function()
     {
-        if (!this.element.parentNode) {
-            var parentElement = (document.getElementById("resource-views") || document.getElementById("script-resource-views"));
-            if (parentElement)
-                parentElement.appendChild(this.element);
-        }
-    },
-
-    show: function(parentElement)
-    {
-        WebInspector.View.prototype.show.call(this, parentElement);
-        this._selectTab();
-    },
-
-    set headersVisible(x)
-    {
-        if (x === this._headersVisible)
-            return;
-        this._headersVisible = x;
-        if (x)
-            this.element.addStyleClass("headers-visible"); 
-        else
-            this.element.removeStyleClass("headers-visible"); 
-        this._selectTab();
-    },
-
-    _selectTab: function()
-    {
-        if (this._headersVisible) {
-            if (!this.hasContentTab() || WebInspector.applicationSettings.resourceViewTab === "headers")
-                this._selectHeadersTab();
-            else
-                this.selectContentTab();
-        } else
-            this._innerSelectContentTab();
-    },
-
-    _selectHeadersTab: function(updatePrefs)
-    {
-        if (updatePrefs)
-            WebInspector.applicationSettings.resourceViewTab = "headers";
-        this.tabbedPane.selectTabById("headers");
-    },
-
-    selectContentTab: function(updatePrefs)
-    {
-        if (updatePrefs)
-            WebInspector.applicationSettings.resourceViewTab = "content";
-        this._innerSelectContentTab();
-    },
-
-    hasContentTab: function()
-    {
-        // Derived classes should override this method and define this.contentTabSelected for content rendering.
         return false;
-    },
-
-    _innerSelectContentTab: function()
-    {
-        this.tabbedPane.selectTabById("content");
-        if ("resize" in this)
-            this.resize();
-        if (this.hasContentTab())
-            this.contentTabSelected();
-    },
-
-    _refreshURL: function()
-    {
-        this.urlTreeElement.title = "<div class=\"header-name\">" + WebInspector.UIString("Request URL") + ":</div>" +
-            "<div class=\"header-value source-code\">" + this.resource.url.escapeHTML() + "</div>";
-    },
-
-    _refreshQueryString: function()
-    {
-        var queryParameters = this.resource.queryParameters;
-        this.queryStringTreeElement.hidden = !queryParameters;
-        if (queryParameters)
-            this._refreshParms(WebInspector.UIString("Query String Parameters"), queryParameters, this.queryStringTreeElement);
-    },
-
-    _refreshFormData: function()
-    {
-        this.formDataTreeElement.hidden = true;
-        this.requestPayloadTreeElement.hidden = true;
-
-        var formData = this.resource.requestFormData;
-        if (!formData)
-            return;
-
-        var formParameters = this.resource.formParameters;
-        if (formParameters) {
-            this.formDataTreeElement.hidden = false;
-            this._refreshParms(WebInspector.UIString("Form Data"), formParameters, this.formDataTreeElement);
-        } else {
-            this.requestPayloadTreeElement.hidden = false;
-            this._refreshRequestPayload(formData);
-        }
-    },
-
-    _refreshRequestPayload: function(formData)
-    {
-        this.requestPayloadTreeElement.removeChildren();
-
-        var title = "<div class=\"raw-form-data header-value source-code\">" + formData.escapeHTML() + "</div>";
-        var parmTreeElement = new TreeElement(title, null, false);
-        parmTreeElement.selectable = false;
-        this.requestPayloadTreeElement.appendChild(parmTreeElement);
-    },
-
-    _refreshParms: function(title, parms, parmsTreeElement)
-    {
-        parmsTreeElement.removeChildren();
-
-        parmsTreeElement.title = title + "<span class=\"header-count\">" + WebInspector.UIString(" (%d)", parms.length) + "</span>";
-
-        for (var i = 0; i < parms.length; ++i) {
-            var name = parms[i].name;
-            var value = parms[i].value;
-
-            var errorDecoding = false;
-            if (this._decodeRequestParameters) {
-                if (value.indexOf("%") >= 0) {
-                    try {
-                        value = decodeURIComponent(value);
-                    } catch(e) {
-                        errorDecoding = true;
-                    }
-                }
-                    
-                value = value.replace(/\+/g, " ");
-            }
-
-            valueEscaped = value.escapeHTML();
-            if (errorDecoding)
-                valueEscaped += " <span class=\"error-message\">" + WebInspector.UIString("(unable to decode value)").escapeHTML() + "</span>";
-
-            var title = "<div class=\"header-name\">" + name.escapeHTML() + ":</div>";
-            title += "<div class=\"header-value source-code\">" + valueEscaped + "</div>";
-
-            var parmTreeElement = new TreeElement(title, null, false);
-            parmTreeElement.selectable = false;
-            parmTreeElement.tooltip = this._decodeHover;
-            parmTreeElement.ondblclick = this._toggleURLdecoding.bind(this);
-            parmsTreeElement.appendChild(parmTreeElement);
-        }
-    },
-
-    _toggleURLdecoding: function(event)
-    {
-        this._decodeRequestParameters = !this._decodeRequestParameters;
-        this._refreshQueryString();
-        this._refreshFormData();
-    },
-
-    _getHeaderValue: function(headers, key)
-    {
-        var lowerKey = key.toLowerCase();
-        for (var testKey in headers) {
-            if (testKey.toLowerCase() === lowerKey)
-                return headers[testKey];
-        }
-    },
-
-    _refreshRequestHeaders: function()
-    {
-        var additionalRow = null;
-        if (typeof this.resource.webSocketRequestKey3 !== "undefined")
-            additionalRow = {header: "(Key3)", value: this.resource.webSocketRequestKey3};
-        this._refreshHeaders(WebInspector.UIString("Request Headers"), this.resource.sortedRequestHeaders, additionalRow, this.requestHeadersTreeElement);
-        this._refreshFormData();
-    },
-
-    _refreshResponseHeaders: function()
-    {
-        var additionalRow = null;
-        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);
-    },
-
-    _refreshHTTPInformation: function()
-    {
-        var requestMethodElement = this.requestMethodTreeElement;
-        requestMethodElement.hidden = !this.resource.statusCode;
-        var statusCodeElement = this.statusCodeTreeElement;
-        statusCodeElement.hidden = !this.resource.statusCode;
-        var statusCodeImage = "";
-
-        if (this.resource.statusCode) {
-            var statusImageSource = "";
-            if (this.resource.statusCode < 300)
-                statusImageSource = "Images/successGreenDot.png";
-            else if (this.resource.statusCode < 400)
-                statusImageSource = "Images/warningOrangeDot.png";
-            else
-                statusImageSource = "Images/errorRedDot.png";
-
-            var statusTextEscaped = this.resource.statusCode + " " + this.resource.statusText.escapeHTML();
-            statusCodeImage = "<img class=\"resource-status-image\" src=\"" + statusImageSource + "\" title=\"" + statusTextEscaped + "\">";
-    
-            requestMethodElement.title = "<div class=\"header-name\">" + WebInspector.UIString("Request Method") + ":</div>" +
-                "<div class=\"header-value source-code\">" + this.resource.requestMethod + "</div>";
-
-            statusCodeElement.title = "<div class=\"header-name\">" + WebInspector.UIString("Status Code") + ":</div>" +
-                statusCodeImage + "<div class=\"header-value source-code\">" + statusTextEscaped + "</div>";
-        }
-    },
-    
-    _refreshHeaders: function(title, headers, additionalRow, headersTreeElement)
-    {
-        headersTreeElement.removeChildren();
-
-        var length = headers.length;
-        headersTreeElement.title = title.escapeHTML() + "<span class=\"header-count\">" + WebInspector.UIString(" (%d)", length) + "</span>";
-        headersTreeElement.hidden = !length;
-
-        var length = headers.length;
-        for (var i = 0; i < length; ++i) {
-            var title = "<div class=\"header-name\">" + headers[i].header.escapeHTML() + ":</div>";
-            title += "<div class=\"header-value source-code\">" + headers[i].value.escapeHTML() + "</div>"
-
-            var headerTreeElement = new TreeElement(title, null, false);
-            headerTreeElement.selectable = false;
-            headersTreeElement.appendChild(headerTreeElement);
-        }
-
-        if (additionalRow) {
-            var title = "<div class=\"header-name\">" + additionalRow.header.escapeHTML() + ":</div>";
-            title += "<div class=\"header-value source-code\">" + additionalRow.value.escapeHTML() + "</div>"
-
-            var headerTreeElement = new TreeElement(title, null, false);
-            headerTreeElement.selectable = false;
-            headersTreeElement.appendChild(headerTreeElement);
-        }
     }
 }
 

front-end/ScriptsPanel.js

@@ -135,8 +135,8 @@ WebInspector.ScriptsPanel = function()
     if (Preferences.nativeInstrumentationEnabled) {
         this.sidebarPanes.domBreakpoints = WebInspector.createDOMBreakpointsSidebarPane();
         this.sidebarPanes.xhrBreakpoints = WebInspector.createXHRBreakpointsSidebarPane();
+        this.sidebarPanes.eventListenerBreakpoints = new WebInspector.EventListenerBreakpointsSidebarPane();
     }
-    //this.sidebarPanes.eventListenerBreakpoints = new WebInspector.EventListenerBreakpointsSidebarPane();
 
     //this.sidebarPanes.workers = new WebInspector.WorkersSidebarPane();
 
@@ -213,11 +213,9 @@ WebInspector.ScriptsPanel.prototype = {
         WebInspector.Panel.prototype.show.call(this);
         this.sidebarResizeElement.style.right = (this.sidebarElement.offsetWidth - 3) + "px";
 
-        if (this.visibleView) {
-            if (this.visibleView instanceof WebInspector.ResourceView)
-                this.visibleView.headersVisible = false;
+        if (this.visibleView)
             this.visibleView.show(this.viewsContainerElement);
-        }
+
         if (this._attachDebuggerWhenShown) {
             InspectorBackend.enableDebugger(false);
             delete this._attachDebuggerWhenShown;
@@ -241,7 +239,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 +287,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);
         }
@@ -376,7 +374,7 @@ WebInspector.ScriptsPanel.prototype = {
         InjectedScriptAccess.get(callFrame.worldId).evaluateInCallFrame(callFrame.id, code, objectGroup, evalCallback);
     },
 
-    debuggerPaused: function(details)
+    debuggerPaused: function(callFrames)
     {
         WebInspector.breakpointManager.removeOneTimeBreakpoint();
         this._paused = true;
@@ -385,10 +383,11 @@ WebInspector.ScriptsPanel.prototype = {
 
         this._updateDebuggerButtons();
 
-        this.sidebarPanes.callstack.update(details.callFrames, this._sourceIDMap);
-        this.sidebarPanes.callstack.selectedCallFrame = details.callFrames[0];
-
         WebInspector.currentPanel = this;
+
+        this.sidebarPanes.callstack.update(callFrames, this._sourceIDMap);
+        this.sidebarPanes.callstack.selectedCallFrame = callFrames[0];
+
         window.focus();
     },
 
@@ -435,13 +434,7 @@ WebInspector.ScriptsPanel.prototype = {
         delete this.currentQuery;
         this.searchCanceled();
 
-        if (!this._debuggerEnabled) {
-            this._paused = false;
-            this._waitingToPause = false;
-            this._stepping = false;
-        }
-
-        this._clearInterface();
+        this.debuggerResumed();
 
         this._backForwardList = [];
         this._currentBackForwardIndex = -1;
@@ -468,8 +461,8 @@ WebInspector.ScriptsPanel.prototype = {
             if (Preferences.nativeInstrumentationEnabled) {
                 this.sidebarPanes.domBreakpoints.reset();
                 this.sidebarPanes.xhrBreakpoints.reset();
+                this.sidebarPanes.eventListenerBreakpoints.reset();
             }
-            //this.sidebarPanes.eventListenerBreakpoints.reset();
             //this.sidebarPanes.workers.reset();
         }
     },
@@ -576,11 +569,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:}
@@ -590,12 +596,9 @@ WebInspector.ScriptsPanel.prototype = {
             return;
 
         var view;
-        if (scriptOrResource instanceof WebInspector.Resource) {
-            if (!WebInspector.panels.resources)
-                return null;
-            view = WebInspector.panels.resources.resourceViewForResource(scriptOrResource);
-            view.headersVisible = false;
-        } else if (scriptOrResource instanceof WebInspector.Script)
+        if (scriptOrResource instanceof WebInspector.Resource)
+            view = WebInspector.ResourceManager.resourceViewForResource(scriptOrResource);
+        else if (scriptOrResource instanceof WebInspector.Script)
             view = this.scriptViewForScript(scriptOrResource);
 
         if (!view)
@@ -603,7 +606,7 @@ WebInspector.ScriptsPanel.prototype = {
 
         var url = scriptOrResource.url || scriptOrResource.sourceURL;
         if (url && !options.initialLoad)
-            WebInspector.applicationSettings.lastViewedScriptFile = url;
+            WebInspector.settings.lastViewedScriptFile = url;
 
         if (!options.fromBackForwardAction) {
             var oldIndex = this._currentBackForwardIndex;
@@ -697,16 +700,22 @@ WebInspector.ScriptsPanel.prototype = {
         else
             script.filesSelectOption = option;
 
-        // Call _showScriptOrResource if the option we just appended ended up being selected.
-        // This will happen for the first item added to the menu.
-        if (select.options[select.selectedIndex] === option)
+        if (select.options[select.selectedIndex] === option) {
+            // Call _showScriptOrResource if the option we just appended ended up being selected.
+            // This will happen for the first item added to the menu.
             this._showScriptOrResource(option.representedObject, {initialLoad: true});
-        else {
-            // if not first item, check to see if this was the last viewed
+        } else {
+            // If not first item, check to see if this was the last viewed
             var url = option.representedObject.url || option.representedObject.sourceURL;
-            var lastURL = WebInspector.applicationSettings.lastViewedScriptFile;
-            if (url && url === lastURL)
-                this._showScriptOrResource(option.representedObject, {initialLoad: true});
+            var lastURL = WebInspector.settings.lastViewedScriptFile;
+            if (url && url === lastURL) {
+                // For resources containing multiple <script> tags, we first report them separately and
+                // then glue them all together. They all share url and there is no need to show them all one
+                // by one.
+                var isResource = !!option.representedObject.url;
+                if (isResource || !this.visibleView || !this.visibleView.script || this.visibleView.script.sourceURL !== url)
+                    this._showScriptOrResource(option.representedObject, {initialLoad: true});
+            }
         }
 
         if (script.worldType === WebInspector.Script.WorldType.EXTENSIONS_WORLD)

front-end/Settings.js

@@ -45,96 +45,84 @@ var Preferences = {
     onlineDetectionEnabled: true,
     nativeInstrumentationEnabled: false,
     resourceExportEnabled: false,
-    networkPanelEnabled: false
+    fileSystemEnabled: false,
+    useDataURLForResourceImageIcons: true,
+    showTimingTab: false,
+    debugMode: false
 }
 
-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);
-
-    function populateApplicationSettings(settingsString)
-    {
-        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");
-    }
-
-    function populateSessionSettings(settingsString)
-    {
-        WebInspector.sessionSettings._load(settingsString);
-        WebInspector.sessionSettings.dispatchEventToListeners("loaded");
-    }
-
-    InspectorBackend.getSettings(function(settings) {
-        populateApplicationSettings(settings.application);
-        populateSessionSettings(settings.session);
-    });
+    this.installProjectSetting("breakpoints", {});
+    this.installProjectSetting("nativeBreakpoints", []);
 }
 
 WebInspector.Settings.prototype = {
-    reset: function()
+    installApplicationSetting: function(key, defaultValue)
     {
-        this._store = {};
-        // FIXME: restore default values (bug 42820)
-        this.dispatchEventToListeners("loaded");
-    },
-
-    _load: function(settingsString)
-    {
-        try {
-            var loadedStore = JSON.parse(settingsString);
-        } catch (e) {
-            // May fail;
-            loadedStore = {};
-        }
-        if (!loadedStore)
+        if (key in this)
             return;
-        for (var propertyName in loadedStore)
-            this._store[propertyName] = loadedStore[propertyName];
+
+        this.__defineGetter__(key, this._get.bind(this, key, defaultValue));
+        this.__defineSetter__(key, this._set.bind(this, key));
     },
 
-    installSetting: function(name, propertyName, defaultValue)
+    installProjectSetting: 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;
+        this.__defineGetter__(key, this._getProjectSetting.bind(this, key, defaultValue));
+        this.__defineSetter__(key, this._setProjectSetting.bind(this, key));
     },
 
-    _get: function(propertyName)
+    inspectedURLChanged: function(url)
     {
-        return this._store[propertyName];
+        var fragmentIndex = url.indexOf("#");
+        if (fragmentIndex !== -1)
+            url = url.substring(0, fragmentIndex);
+        this._inspectedURL = url;
     },
 
-    _set: function(propertyName, newValue)
+    _get: function(key, defaultValue)
     {
-        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;
+        if (key in window.localStorage) {
+            try {
+                return JSON.parse(window.localStorage[key]);
+            } catch(e) {
+                window.localStorage.removeItem(key);
+            }
         }
+        return defaultValue;
+    },
+
+    _set: function(key, value)
+    {
+        window.localStorage[key] = JSON.stringify(value);
+    },
+
+    _getProjectSetting: function(key, defaultValue)
+    {
+        return this._get(this._formatProjectKey(key), defaultValue);
+    },
+
+    _setProjectSetting: function(key, value)
+    {
+        return this._set(this._formatProjectKey(key), value);
+    },
+
+    _formatProjectKey: function(key)
+    {
+        return key + ":" + this._inspectedURL;
     }
 }
 

front-end/SourceFrame.js

@@ -87,6 +87,16 @@ WebInspector.SourceFrame.prototype = {
             this._updateExecutionLine(previousLine);
     },
 
+    markDiff: function(diffData)
+    {
+        if (this._diffLines && this._textViewer)
+            this._removeDiffDecorations();
+
+        this._diffLines = diffData;
+        if (this._textViewer)
+            this._updateDiffDecorations();
+    },
+
     revealLine: function(lineNumber)
     {
         if (this._textViewer)
@@ -161,6 +171,17 @@ WebInspector.SourceFrame.prototype = {
         return this._textModel;
     },
 
+    get scrollTop()
+    {
+        return this._textViewer ? this._textViewer.element.scrollTop : 0;
+    },
+
+    set scrollTop(scrollTop)
+    {
+        if (this._textViewer)
+            this._textViewer.element.scrollTop = scrollTop;
+    },
+
     highlightLine: function(line)
     {
         if (this._textViewer)
@@ -199,6 +220,7 @@ WebInspector.SourceFrame.prototype = {
         this._addExistingMessagesToSource();
         this._addExistingBreakpointsToSource();
         this._updateExecutionLine();
+        this._updateDiffDecorations();
         this._textViewer.resize();
 
         if (this._lineNumberToReveal) {
@@ -319,6 +341,33 @@ WebInspector.SourceFrame.prototype = {
             this._textViewer.addDecoration(this._executionLine - 1, "webkit-execution-line");
     },
 
+    _updateDiffDecorations: function()
+    {
+        if (!this._diffLines)
+            return;
+
+        function addDecorations(textViewer, lines, className)
+        {
+            for (var i = 0; i < lines.length; ++i)
+                textViewer.addDecoration(lines[i], className);
+        }
+        addDecorations(this._textViewer, this._diffLines.added, "webkit-added-line");
+        addDecorations(this._textViewer, this._diffLines.removed, "webkit-removed-line");
+        addDecorations(this._textViewer, this._diffLines.changed, "webkit-changed-line");
+    },
+
+    _removeDiffDecorations: function()
+    {
+        function removeDecorations(textViewer, lines, className)
+        {
+            for (var i = 0; i < lines.length; ++i)
+                textViewer.removeDecoration(lines[i], className);
+        }
+        removeDecorations(this._textViewer, this._diffLines.added, "webkit-added-line");
+        removeDecorations(this._textViewer, this._diffLines.removed, "webkit-removed-line");
+        removeDecorations(this._textViewer, this._diffLines.changed, "webkit-changed-line");
+    },
+
     _addExistingMessagesToSource: function()
     {
         var length = this._messages.length;

front-end/SourceView.js

@@ -33,7 +33,7 @@ WebInspector.SourceView = function(resource)
     this.element.addStyleClass("source");
 
     var canEditScripts = WebInspector.panels.scripts && WebInspector.panels.scripts.canEditScripts() && resource.type === WebInspector.Resource.Type.Script;
-    this.sourceFrame = new WebInspector.SourceFrame(this.contentElement, this._addBreakpoint.bind(this), canEditScripts ? this._editLine.bind(this) : null, this._continueToLine.bind(this));
+    this.sourceFrame = new WebInspector.SourceFrame(this.element, this._addBreakpoint.bind(this), canEditScripts ? this._editLine.bind(this) : null, this._continueToLine.bind(this));
     resource.addEventListener("finished", this._resourceLoadingFinished, this);
     this._frameNeedsSetup = true;
 }
@@ -50,9 +50,8 @@ WebInspector.SourceView.prototype = {
     show: function(parentElement)
     {
         WebInspector.ResourceView.prototype.show.call(this, parentElement);
+        this.setupSourceFrameIfNeeded();
         this.sourceFrame.visible = true;
-        if (this.localSourceFrame)
-            this.localSourceFrame.visible = true;
         this.resize();
     },
 
@@ -62,8 +61,6 @@ WebInspector.SourceView.prototype = {
         if (!this._frameNeedsSetup)
             this.sourceFrame.clearLineHighlight();
         WebInspector.View.prototype.hide.call(this);
-        if (this.localSourceFrame)
-            this.localSourceFrame.visible = false;
         this._currentSearchResultIndex = -1;
     },
 
@@ -71,31 +68,33 @@ WebInspector.SourceView.prototype = {
     {
         if (this.sourceFrame)
             this.sourceFrame.resize();
-        if (this.localSourceFrame)
-            this.localSourceFrame.resize();
     },
 
+    get scrollTop()
+    {
+        return this.sourceFrame.scrollTop;
+    },
+
+    set scrollTop(scrollTop)
+    {
+        this.sourceFrame.scrollTop = scrollTop;
+    },
+
+
     setupSourceFrameIfNeeded: function()
     {
         if (!this._frameNeedsSetup)
             return;
 
-        this.attach();
-
         delete this._frameNeedsSetup;
-        WebInspector.getResourceContent(this.resource.identifier, this._contentLoaded.bind(this));
+        this.resource.requestContent(this._contentLoaded.bind(this));
     },
 
-    hasContentTab: function()
+    hasContent: function()
     {
         return true;
     },
 
-    contentTabSelected: function()
-    {
-        this.setupSourceFrameIfNeeded();
-    },
-
     _contentLoaded: function(content)
     {
         var mimeType = this._canonicalMimeType(this.resource);
@@ -149,12 +148,13 @@ WebInspector.SourceView.prototype = {
         }
 
         var linesCountToShift = newContent.split("\n").length - 1;
-        WebInspector.panels.scripts.editScriptSource(this._sourceIDForLine(line), lines.join("\n"), line, linesCountToShift, this._editLineComplete.bind(this), cancelEditingCallback);
+        var newContent = lines.join("\n");
+        WebInspector.panels.scripts.editScriptSource(this._sourceIDForLine(line), newContent, line, linesCountToShift, this._editLineComplete.bind(this, newContent), cancelEditingCallback);
     },
 
-    _editLineComplete: function(newBody)
+    _editLineComplete: function(newContent)
     {
-        this.sourceFrame.updateContent(newBody);
+        this.resource.content = newContent;
     },
 
     _sourceIDForLine: function(line)
@@ -207,25 +207,6 @@ WebInspector.SourceView.prototype = {
         findSearchMatches.call(this, query, finishedCallback);
     },
 
-    updateLocalContent: function(content, mimeType)
-    {
-        if (!this.localContentElement) {
-            this.localContentElement = document.createElement("div");
-            this.localContentElement.className = "resource-view-content";
-            this.tabbedPane.appendTab("local", WebInspector.UIString("Local"), this.localContentElement, this.selectLocalContentTab.bind(this));
-            this.localSourceFrame = new WebInspector.SourceFrame(this.localContentElement, this._addBreakpoint.bind(this), null, this._continueToLine.bind(this));
-        }
-        this.localSourceFrame.setContent(mimeType, content, "");
-    },
-
-    selectLocalContentTab: function()
-    {
-        this.tabbedPane.selectTabById("local");
-        this.localSourceFrame.visible = true;
-        if ("resize" in this)
-            this.resize();
-    },
-
     jumpToFirstSearchResult: function()
     {
         if (!this._searchResults || !this._searchResults.length)

front-end/StoragePanel.js

@@ -1,618 +0,0 @@
-/*
- * Copyright (C) 2007, 2008, 2010 Apple Inc.  All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.StoragePanel = function(database)
-{
-    WebInspector.Panel.call(this, "storage");
-
-    this.createSidebar();
-
-    this.databasesListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("DATABASES"), {}, true);
-    this.sidebarTree.appendChild(this.databasesListTreeElement);
-    this.databasesListTreeElement.expand();
-
-    this.localStorageListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("LOCAL STORAGE"), {}, true);
-    this.sidebarTree.appendChild(this.localStorageListTreeElement);
-    this.localStorageListTreeElement.expand();
-
-    this.sessionStorageListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("SESSION STORAGE"), {}, true);
-    this.sidebarTree.appendChild(this.sessionStorageListTreeElement);
-    this.sessionStorageListTreeElement.expand();
-
-    this.cookieListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("COOKIES"), {}, true);
-    this.sidebarTree.appendChild(this.cookieListTreeElement);
-    this.cookieListTreeElement.expand();
-
-    
-    this.applicationCacheListTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("APPLICATION CACHE"), {}, true);
-    this.sidebarTree.appendChild(this.applicationCacheListTreeElement);
-    this.applicationCacheListTreeElement.expand();
-    
-    this.storageViews = document.createElement("div");
-    this.storageViews.id = "storage-views";
-    this.element.appendChild(this.storageViews);
-
-    this.storageViewStatusBarItemsContainer = document.createElement("div");
-    this.storageViewStatusBarItemsContainer.className = "status-bar-items";
-
-    this.reset();
-}
-
-WebInspector.StoragePanel.prototype = {
-    get toolbarItemLabel()
-    {
-        return WebInspector.UIString("Storage");
-    },
-
-    get statusBarItems()
-    {
-        return [this.storageViewStatusBarItemsContainer];
-    },
-
-    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;
-            }
-        }
-
-        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;
-            }
-        }
-
-        this._domStorage = [];
-
-        this._cookieViews = {};
-
-        this._applicationCacheView = null;
-        delete this._cachedApplicationCacheViewStatus;
-
-        this.databasesListTreeElement.removeChildren();
-        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();
-    },
-
-    addDatabase: function(database)
-    {
-        this._databases.push(database);
-
-        var databaseTreeElement = new WebInspector.DatabaseSidebarTreeElement(database);
-        database._databasesTreeElement = databaseTreeElement;
-        this.databasesListTreeElement.appendChild(databaseTreeElement);
-    },
-    
-    addCookieDomain: function(domain)
-    {
-        var cookieDomainTreeElement = new WebInspector.CookieSidebarTreeElement(domain);
-        this.cookieListTreeElement.appendChild(cookieDomainTreeElement);
-    },
-
-    addDOMStorage: function(domStorage)
-    {
-        this._domStorage.push(domStorage);
-        var domStorageTreeElement = new WebInspector.DOMStorageSidebarTreeElement(domStorage, (domStorage.isLocalStorage ? "local-storage" : "session-storage"));
-        domStorage._domStorageTreeElement = domStorageTreeElement;
-        if (domStorage.isLocalStorage)
-            this.localStorageListTreeElement.appendChild(domStorageTreeElement);
-        else
-            this.sessionStorageListTreeElement.appendChild(domStorageTreeElement);
-    },
-
-    addApplicationCache: function(domain)
-    {
-        var applicationCacheTreeElement = new WebInspector.ApplicationCacheSidebarTreeElement(domain);
-        this.applicationCacheListTreeElement.appendChild(applicationCacheTreeElement);
-    },
-
-    selectDatabase: function(databaseId)
-    {
-        var database;
-        for (var i = 0, len = this._databases.length; i < len; ++i) {
-            database = this._databases[i];
-            if (database.id === databaseId) {
-                this.showDatabase(database);
-                database._databasesTreeElement.select();
-                return;
-            }
-        }
-    },
-
-    selectDOMStorage: function(storageId)
-    {
-        var domStorage = this._domStorageForId(storageId);
-        if (domStorage) {
-            this.showDOMStorage(domStorage);
-            domStorage._domStorageTreeElement.select();
-        }
-    },
-
-    showDatabase: function(database, tableName)
-    {
-        if (!database)
-            return;
-
-        if (this.visibleView)
-            this.visibleView.hide();
-
-        var view;
-        if (tableName) {
-            if (!("_tableViews" in database))
-                database._tableViews = {};
-            view = database._tableViews[tableName];
-            if (!view) {
-                view = new WebInspector.DatabaseTableView(database, tableName);
-                database._tableViews[tableName] = view;
-            }
-        } else {
-            view = database._queryView;
-            if (!view) {
-                view = new WebInspector.DatabaseQueryView(database);
-                database._queryView = view;
-            }
-        }
-
-        this._genericViewSetup(view);
-    },
-
-    showDOMStorage: function(domStorage)
-    {
-        if (!domStorage)
-            return;
-
-        if (this.visibleView)
-            this.visibleView.hide();
-
-        var view;
-        view = domStorage._domStorageView;
-        if (!view) {
-            view = new WebInspector.DOMStorageItemsView(domStorage);
-            domStorage._domStorageView = view;
-        }
-
-        this._genericViewSetup(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);
-    },
-
-    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);
-
-        if ("_cachedApplicationCacheViewStatus" in this)
-            this._applicationCacheView.updateStatus(this._cachedApplicationCacheViewStatus);
-    },
-
-    _genericViewSetup: function(view)
-    {
-        view.show(this.storageViews);
-        this.visibleView = view;
-
-        this.storageViewStatusBarItemsContainer.removeChildren();
-        var statusBarItems = view.statusBarItems || [];
-        for (var i = 0; i < statusBarItems.length; ++i)
-            this.storageViewStatusBarItemsContainer.appendChild(statusBarItems[i]);
-    },
-
-    closeVisibleView: function()
-    {
-        if (this.visibleView)
-            this.visibleView.hide();
-        delete this.visibleView;
-    },
-
-    updateDatabaseTables: function(database)
-    {
-        if (!database || !database._databasesTreeElement)
-            return;
-
-        database._databasesTreeElement.shouldRefreshChildren = true;
-
-        if (!("_tableViews" in database))
-            return;
-
-        var tableNamesHash = {};
-        var self = this;
-        function tableNamesCallback(tableNames)
-        {
-            var tableNamesLength = tableNames.length;
-            for (var i = 0; i < tableNamesLength; ++i)
-                tableNamesHash[tableNames[i]] = true;
-
-            for (var tableName in database._tableViews) {
-                if (!(tableName in tableNamesHash)) {
-                    if (self.visibleView === database._tableViews[tableName])
-                        self.closeVisibleView();
-                    delete database._tableViews[tableName];
-                }
-            }
-        }
-        database.getTableNames(tableNamesCallback);
-    },
-
-    dataGridForResult: function(columnNames, values)
-    {
-        var numColumns = columnNames.length;
-        if (!numColumns)
-            return null;
-
-        var columns = {};
-
-        for (var i = 0; i < columnNames.length; ++i) {
-            var column = {};
-            column.width = columnNames[i].length;
-            column.title = columnNames[i];
-            column.sortable = true;
-
-            columns[columnNames[i]] = column;
-        }
-
-        var nodes = [];
-        for (var i = 0; i < values.length / numColumns; ++i) {
-            var data = {};
-            for (var j = 0; j < columnNames.length; ++j)
-                data[columnNames[j]] = values[numColumns * i + j];
-
-            var node = new WebInspector.DataGridNode(data, false);
-            node.selectable = false;
-            nodes.push(node);
-        }
-
-        var dataGrid = new WebInspector.DataGrid(columns);
-        var length = nodes.length;
-        for (var i = 0; i < length; ++i)
-            dataGrid.appendChild(nodes[i]);
-
-        dataGrid.addEventListener("sorting changed", this._sortDataGrid.bind(this, dataGrid), this);
-        return dataGrid;
-    },
-
-    _sortDataGrid: function(dataGrid)
-    {
-        var nodes = dataGrid.children.slice();
-        var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
-        var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
-        var columnIsNumeric = true;
-
-        for (var i = 0; i < nodes.length; i++) {
-            if (isNaN(Number(nodes[i].data[sortColumnIdentifier])))
-                columnIsNumeric = false;
-        }
-
-        function comparator(dataGridNode1, dataGridNode2)
-        {
-            var item1 = dataGridNode1.data[sortColumnIdentifier];
-            var item2 = dataGridNode2.data[sortColumnIdentifier];
-
-            var comparison;
-            if (columnIsNumeric) {
-                // Sort numbers based on comparing their values rather than a lexicographical comparison.
-                var number1 = parseFloat(item1);
-                var number2 = parseFloat(item2);
-                comparison = number1 < number2 ? -1 : (number1 > number2 ? 1 : 0);
-            } else
-                comparison = item1 < item2 ? -1 : (item1 > item2 ? 1 : 0);
-
-            return sortDirection * comparison;
-        }
-
-        nodes.sort(comparator);
-        dataGrid.removeChildren();
-        for (var i = 0; i < nodes.length; i++)
-            dataGrid.appendChild(nodes[i]);
-    },
-
-    updateDOMStorage: function(storageId)
-    {
-        var domStorage = this._domStorageForId(storageId);
-        if (!domStorage)
-            return;
-
-        var view = domStorage._domStorageView;
-        if (this.visibleView && view === this.visibleView)
-            domStorage._domStorageView.update();
-    },
-
-    updateApplicationCacheStatus: function(status)
-    {
-        this._cachedApplicationCacheViewStatus = status;
-        if (this._applicationCacheView && this._applicationCacheView === this.visibleView)
-            this._applicationCacheView.updateStatus(status);
-    },
-
-    updateNetworkState: function(isNowOnline)
-    {
-        if (this._applicationCacheView && this._applicationCacheView === this.visibleView)
-            this._applicationCacheView.updateNetworkState(isNowOnline);
-    },
-
-    updateManifest: function(manifest)
-    {
-        if (this._applicationCacheView && this._applicationCacheView === this.visibleView)
-            this._applicationCacheView.updateManifest(manifest);
-    },
-
-    _domStorageForId: function(storageId)
-    {
-        if (!this._domStorage)
-            return null;
-        var domStorageLength = this._domStorage.length;
-        for (var i = 0; i < domStorageLength; ++i) {
-            var domStorage = this._domStorage[i];
-            if (domStorage.id == storageId)
-                return domStorage;
-        }
-        return null;
-    },
-
-    updateMainViewWidth: function(width)
-    {
-        this.storageViews.style.left = width + "px";
-        this.storageViewStatusBarItemsContainer.style.left = width + "px";
-        this.resize();
-    }
-}
-
-WebInspector.StoragePanel.prototype.__proto__ = WebInspector.Panel.prototype;
-
-WebInspector.DatabaseSidebarTreeElement = function(database)
-{
-    this.database = database;
-
-    WebInspector.SidebarTreeElement.call(this, "database-sidebar-tree-item", "", "", database, true);
-
-    this.refreshTitles();
-}
-
-WebInspector.DatabaseSidebarTreeElement.prototype = {
-    onselect: function()
-    {
-        WebInspector.panels.storage.showDatabase(this.database);
-    },
-
-    oncollapse: function()
-    {
-        // Request a refresh after every collapse so the next
-        // expand will have an updated table list.
-        this.shouldRefreshChildren = true;
-    },
-
-    onpopulate: function()
-    {
-        this.removeChildren();
-
-        var self = this;
-        function tableNamesCallback(tableNames)
-        {
-            var tableNamesLength = tableNames.length;
-            for (var i = 0; i < tableNamesLength; ++i)
-                self.appendChild(new WebInspector.SidebarDatabaseTableTreeElement(self.database, tableNames[i]));
-        }
-        this.database.getTableNames(tableNamesCallback);
-    },
-
-    get mainTitle()
-    {
-        return this.database.name;
-    },
-
-    set mainTitle(x)
-    {
-        // Do nothing.
-    },
-
-    get subtitle()
-    {
-        return this.database.displayDomain;
-    },
-
-    set subtitle(x)
-    {
-        // Do nothing.
-    }
-}
-
-WebInspector.DatabaseSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
-
-WebInspector.SidebarDatabaseTableTreeElement = function(database, tableName)
-{
-    this.database = database;
-    this.tableName = tableName;
-
-    WebInspector.SidebarTreeElement.call(this, "database-table-sidebar-tree-item small", tableName, "", null, false);
-}
-
-WebInspector.SidebarDatabaseTableTreeElement.prototype = {
-    onselect: function()
-    {
-        WebInspector.panels.storage.showDatabase(this.database, this.tableName);
-    }
-}
-
-WebInspector.SidebarDatabaseTableTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
-
-WebInspector.DOMStorageSidebarTreeElement = function(domStorage, className)
-{
-
-    this.domStorage = domStorage;
-
-    WebInspector.SidebarTreeElement.call(this, "domstorage-sidebar-tree-item " + className, domStorage, "", null, false);
-
-    this.refreshTitles();
-}
-
-WebInspector.DOMStorageSidebarTreeElement.prototype = {
-    onselect: function()
-    {
-        WebInspector.panels.storage.showDOMStorage(this.domStorage);
-    },
-
-    get mainTitle()
-    {
-        return this.domStorage.domain ? this.domStorage.domain : WebInspector.UIString("Local Files");
-    },
-
-    set mainTitle(x)
-    {
-        // Do nothing.
-    },
-
-    get subtitle()
-    {
-        return ""; //this.database.displayDomain;
-    },
-
-    set subtitle(x)
-    {
-        // Do nothing.
-    }
-}
-
-WebInspector.DOMStorageSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
-
-WebInspector.CookieSidebarTreeElement = function(cookieDomain)
-{
-    WebInspector.SidebarTreeElement.call(this, "cookie-sidebar-tree-item", cookieDomain, "", null, false);
-    this._cookieDomain = cookieDomain;
-    this._subtitle = "";
-
-    this.refreshTitles();
-}
-
-WebInspector.CookieSidebarTreeElement.prototype = {
-    onselect: function()
-    {
-        WebInspector.panels.storage.showCookies(this, this._cookieDomain);
-    },
-
-    get mainTitle()
-    {
-        return this._cookieDomain ? this._cookieDomain : WebInspector.UIString("Local Files");
-    },
-
-    set mainTitle(x)
-    {
-        // Do nothing.
-    },
-
-    get subtitle()
-    {
-        return this._subtitle;
-    },
-
-    set subtitle(x)
-    {
-        this._subtitle = x;
-        this.refreshTitles();
-    }
-}
-
-WebInspector.CookieSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
-
-WebInspector.ApplicationCacheSidebarTreeElement = function(appcacheDomain)
-{
-    WebInspector.SidebarTreeElement.call(this, "application-cache-sidebar-tree-item", appcacheDomain, "", null, false);
-    this._appcacheDomain = appcacheDomain;
-    this._subtitle = "";
-    this._mainTitle = this._appcacheDomain;
-    this.refreshTitles();
-}
-
-WebInspector.ApplicationCacheSidebarTreeElement.prototype = {
-    onselect: function()
-    {
-        WebInspector.panels.storage.showApplicationCache(this, this._appcacheDomain);
-    },
-
-    get mainTitle()
-    {
-        return this._mainTitle;
-    },
-
-    set mainTitle(x)
-    {
-        this._mainTitle = x;
-        this.refreshTitles();
-    },
-
-    get subtitle()
-    {
-        return this._subtitle;
-    },
-
-    set subtitle(x)
-    {
-        this._subtitle = x;
-        this.refreshTitles();
-    }
-}
-
-WebInspector.ApplicationCacheSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;

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.settings.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, editable: !!(rule.style && rule.style.id) });
             }
             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];
@@ -221,7 +216,7 @@ WebInspector.StylesSidebarPane.prototype = {
                 continue;
             if (section.computedStyle)
                 section.styleRule.style = nodeComputedStyle;
-            var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle, rule: section.rule };
+            var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle, rule: section.rule, editable: !!(section.styleRule.style && section.styleRule.style.id) };
             styleRules.push(styleRule);
         }
         return styleRules;
@@ -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, editable: !!(rule.style && rule.style.id) });
         }
 
         // 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, editable: !!(rule.style && rule.style.id) });
             }
-            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;
@@ -493,7 +465,7 @@ WebInspector.StylesSidebarPane.prototype = {
         // Select the correct color format setting again, since it needs to be selected.
         var selectedIndex = 0;
         for (var i = 0; i < options.length; ++i) {
-            if (options[i].value === WebInspector.applicationSettings.colorFormat) {
+            if (options[i].value === WebInspector.settings.colorFormat) {
                 selectedIndex = i;
                 break;
             }
@@ -505,7 +477,7 @@ WebInspector.StylesSidebarPane.prototype = {
     _changeColorFormat: function(event)
     {
         var selectedOption = this.settingsSelectElement[this.settingsSelectElement.selectedIndex];
-        WebInspector.applicationSettings.colorFormat = selectedOption.value;
+        WebInspector.settings.colorFormat = selectedOption.value;
 
         for (var pseudoId in this.sections) {
             var sections = this.sections[pseudoId];
@@ -590,20 +562,15 @@ 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.settings.showInheritedComputedStyleProperties) {
+        this.bodyElement.addStyleClass("show-inherited");
+        showInheritedCheckbox.checked = true;
     }
 
-    WebInspector.applicationSettings.addEventListener("loaded", settingsLoaded.bind(this));
-
     function showInheritedToggleFunction(event)
     {
-        WebInspector.applicationSettings.showInheritedComputedStyleProperties = showInheritedCheckbox.checked;
-        if (WebInspector.applicationSettings.showInheritedComputedStyleProperties)
+        WebInspector.settings.showInheritedComputedStyleProperties = showInheritedCheckbox.checked;
+        if (WebInspector.settings.showInheritedComputedStyleProperties)
             this.bodyElement.addStyleClass("show-inherited");
         else
             this.bodyElement.removeStyleClass("show-inherited");
@@ -622,6 +589,8 @@ WebInspector.StylePropertiesSection = function(styleRule, editable, isInherited,
     this._selectorElement = document.createElement("span");
     this._selectorElement.textContent = styleRule.selectorText;
     this.titleElement.appendChild(this._selectorElement);
+    if (Preferences.debugMode)
+        this._selectorElement.addEventListener("click", this._debugShowStyle.bind(this), false);
 
     var openBrace = document.createElement("span");
     openBrace.textContent = " {";
@@ -661,16 +630,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 +660,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) {
@@ -761,37 +723,48 @@ WebInspector.StylePropertiesSection.prototype = {
     {
         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]);
-
-        for (var name in disabledProperties)
-            this.uniqueProperties.push(name);
-
-        this.uniqueProperties.sort();
+        var allProperties = style.allProperties;
+        for (var i = 0; i < allProperties.length; ++i)
+            this.uniqueProperties.push(allProperties[i]);
 
+        // Collect all shorthand names.
         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];
+            if (property.disabled)
+                continue;
+            if (property.shorthand)
+                shorthandNames[property.shorthand] = true;
+        }
 
-            if (shorthand && shorthand in foundShorthands)
+        // Collect all shorthand names.
+        for (var i = 0; i < this.uniqueProperties.length; ++i) {
+            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;
+
+            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;
         }
     },
 
@@ -806,15 +779,50 @@ WebInspector.StylePropertiesSection.prototype = {
         return null;
     },
 
-    addNewBlankProperty: function()
+    addNewBlankProperty: function(optionalIndex)
     {
-        var item = new WebInspector.StylePropertyTreeElement(this.styleRule, this.styleRule.style, "", false, false, false, false);
+        var style = this.styleRule.style;
+        var property = style.newBlankProperty();
+        var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, property, false, false, false);
         this.propertiesTreeOutline.appendChild(item);
         item.listItemElement.textContent = "";
         item._newProperty = true;
         return item;
     },
 
+    _debugShowStyle: function(anchor)
+    {
+        var boundHandler;
+        function removeStyleBox(element, event)
+        {
+            if (event.target === element) {
+                event.stopPropagation();
+                return;
+            }
+            document.body.removeChild(element);
+            document.getElementById("main").removeEventListener("mousedown", boundHandler, true);
+        }
+
+        if (!event.shiftKey)
+            return;
+
+        var container = document.createElement("div");
+        var element = document.createElement("span");
+        container.appendChild(element);
+        element.style.background = "yellow";
+        element.style.display = "inline-block";
+        container.style.cssText = "z-index: 2000000; position: absolute; top: 50px; left: 50px; white-space: pre; overflow: auto; background: white; font-family: monospace; font-size: 12px; border: 1px solid black; opacity: 0.85; -webkit-user-select: text; padding: 2px;";
+        container.style.width = (document.body.offsetWidth - 100) + "px";
+        container.style.height = (document.body.offsetHeight - 100) + "px";
+        document.body.appendChild(container);
+        if (this.rule)
+            element.textContent = this.rule.selectorText + " {" + ((this.styleRule.style.cssText !== undefined) ? this.styleRule.style.cssText : "<no cssText>") + "}";
+        else
+            element.textContent = this.styleRule.style.cssText;
+        boundHandler = removeStyleBox.bind(null, container);
+        document.getElementById("main").addEventListener("mousedown", boundHandler, true);
+    },
+
     _handleEmptySpaceDoubleClick: function(event)
     {
         if (event.target.hasStyleClass("header")) {
@@ -894,7 +902,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;
@@ -906,7 +914,8 @@ WebInspector.StylePropertiesSection.prototype = {
             moveToNextIfNeeded.call(self);
         }
 
-        WebInspector.cssModel.setRuleSelector(this.rule.id, newContent, this.pane.node.id, successCallback, moveToNextIfNeeded.bind(this));
+        var focusedNode = WebInspector.panels.elements.focusedDOMNode;
+        WebInspector.cssModel.setRuleSelector(this.rule.id, focusedNode ? focusedNode.id : 0, newContent, successCallback, moveToNextIfNeeded.bind(this));
     },
 
     editingSelectorCancelled: function()
@@ -937,9 +946,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 +965,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 +995,22 @@ 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);
+                    var childElement = new TreeElement(null, null, false);
+                    childElement.titleHTML = title + subtitle;
                     treeElement.appendChild(childElement);
-                    if (section.isPropertyOverloaded(name))
+                    if (section.isPropertyOverloaded(property.name))
                         childElement.listItemElement.addStyleClass("overloaded");
                 }
             }
@@ -1025,8 +1041,9 @@ WebInspector.BlankStylePropertiesSection.prototype = {
     editingSelectorCommitted: function(element, newContent, oldContent, context)
     {
         var self = this;
-        function successCallback(styleRule, doesSelectorAffectSelectedNode)
+        function successCallback(newRule, doesSelectorAffectSelectedNode)
         {
+            var styleRule = { section: self, style: newRule.style, selectorText: newRule.selectorText, sourceURL: newRule.sourceURL, rule: newRule };
             self.makeNormal(styleRule);
 
             if (!doesSelectorAffectSelectedNode) {
@@ -1060,15 +1077,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 +1119,49 @@ 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();
+        if (!this.disabled || !this.property.text)
+            return this.property.name;
+
+        var text = this.property.text;
+        var index = text.indexOf(":");
+        if (index < 1)
+            return this.property.name;
+
+        return text.substring(0, index).trim();
     },
 
     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 ""; // rely upon raw text to render it in the value field
+        return 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 || !this.property.text)
+            return this.property.value;
+
+        var match = this.property.text.match(/(.*);\s*/);
+        if (!match || !match[1])
+            return this.property.value;
+
+        var text = match[1];
+        var index = text.indexOf(":");
+        if (index < 1)
+            return this.property.value;
+
+        return text.substring(index + 1).trim();
+    },
+
+    get parsedOk()
+    {
+        return this.property.parsedOk;
     },
 
     onattach: function()
@@ -1145,11 +1181,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 +1225,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;
             }
@@ -1210,9 +1250,9 @@ WebInspector.StylePropertyTreeElement.prototype = {
                 var format;
                 if (Preferences.showColorNicknames && color.nickname)
                     format = "nickname";
-                else if (WebInspector.applicationSettings.colorFormat === "rgb")
+                else if (WebInspector.settings.colorFormat === "rgb")
                     format = (color.simple ? "rgb" : "rgba");
-                else if (WebInspector.applicationSettings.colorFormat === "hsl")
+                else if (WebInspector.settings.colorFormat === "hsl")
                     format = (color.simple ? "hsl" : "hsla");
                 else if (color.simple)
                     format = (color.hasShortHex() ? "shorthex" : "hex");
@@ -1297,7 +1337,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 +1350,12 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         this.listItemElement.appendChild(document.createTextNode(";"));
 
-        this.tooltip = this.name + ": " + valueElement.textContent + (priority ? " " + priority : "");
+        if (!this.parsedOk)
+            this.listItemElement.addStyleClass("not-parsed-ok");
+        if (this.property.inactive)
+            this.listItemElement.addStyleClass("inactive");
+
+        this.tooltip = this.property.propertyText;
     },
 
     updateAll: function(updateAllRules)
@@ -1322,33 +1367,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;
+            this.style = newStyle;
+            this._styleRule.style = newStyle;
 
-            // 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;
+            if (this.treeOutline.section && this.treeOutline.section.pane)
+                this.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
 
-            if (self.treeOutline.section && self.treeOutline.section.pane)
-                self.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()
@@ -1361,6 +1401,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         else
             this.listItemElement.removeStyleClass("implicit");
 
+        this.selectable = !this.inherited;
         if (this.inherited)
             this.listItemElement.addStyleClass("inherited");
         else
@@ -1385,14 +1426,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);
         }
     },
@@ -1489,6 +1532,28 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (selectionRange.commonAncestorContainer !== this.listItemElement && !selectionRange.commonAncestorContainer.isDescendant(this.listItemElement))
             return;
 
+        // If there are several properties in the text, do not handle increments/decrements.
+        var text = event.target.textContent.trim();
+        var openQuote;
+        var wasEscape = false;
+        // Exclude the last character from the check since it is allowed to be ";".
+        for (var i = 0; i < text.length - 1; ++i) {
+            var ch = text.charAt(i);
+            if (ch === "\\") {
+                wasEscape = true;
+                continue;
+            }
+            if (ch === ";" && !openQuote)
+                return; // Do not handle name/value shifts if the property is compound.
+            if ((ch === "'" || ch === "\"") && !wasEscape) {
+                if (!openQuote)
+                    openQuote = ch;
+                else if (ch === openQuote)
+                    openQuote = null;
+            }
+            wasEscape = false;
+        }
+
         const styleValueDelimeters = " \t\n\"':;,/()";
         var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, styleValueDelimeters, this.listItemElement);
         var wordString = wordRange.toString();
@@ -1566,16 +1631,11 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         event.preventDefault();
 
-        if (!this.originalCSSText) {
+        if (!("originalPropertyText" in this)) {
             // Remember the rule's original CSS text, so it can be restored
             // if the editing is canceled and before each apply.
-            this.originalCSSText = this.style.styleTextWithShorthands();
-        } else {
-            // Restore the original CSS text before applying user changes. This is needed to prevent
-            // new properties from sticking around if the user adds one, then removes it.
-            WebInspector.cssModel.setCSSText(this.style.id, this.originalCSSText);
+            this.originalPropertyText = this.property.propertyText;
         }
-
         this.applyStyleText(this.listItemElement.textContent);
     },
 
@@ -1586,23 +1646,19 @@ WebInspector.StylePropertyTreeElement.prototype = {
             this.expand();
         this.listItemElement.removeEventListener("keydown", context.keyDownListener, false);
         this.listItemElement.removeEventListener("keypress", context.keyPressListener, false);
-        delete this.originalCSSText;
+        delete this.originalPropertyText;
     },
 
     editingCancelled: function(element, context)
     {
-        if (this._newProperty)
-            this.treeOutline.removeChild(this);
-        else if (this.originalCSSText) {
-            WebInspector.cssModel.setCSSText(this.style.id, this.originalCSSText);
-
-            if (this.treeOutline.section && this.treeOutline.section.pane)
-                this.treeOutline.section.pane.dispatchEventToListeners("style edited");
-
-            this.updateAll();
-        } else
-            this.updateTitle();
-
+        if ("originalPropertyText" in this)
+            this.applyStyleText(this.originalPropertyText, true);
+        else {
+            if (this._newProperty)
+                this.treeOutline.removeChild(this);
+            else
+                this.updateTitle();
+        }
         this.editingEnded(context);
     },
 
@@ -1612,7 +1668,11 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         // Determine where to move to before making changes
         var newProperty, moveToPropertyName, moveToSelector;
-        var moveTo = (moveDirection === "forward" ? this.nextSibling : this.previousSibling);
+        var moveTo = this;
+        do {
+            moveTo = (moveDirection === "forward" ? moveTo.nextSibling : moveTo.previousSibling);
+        } while(moveTo && !moveTo.selectable);
+
         if (moveTo)
             moveToPropertyName = moveTo.name;
         else if (moveDirection === "forward")
@@ -1642,6 +1702,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
             // User has made a change then tabbed, wiping all the original treeElements,
             // recalculate the new treeElement for the same property we were going to edit next
+            // FIXME(apavlov): this will not work for multiple same-named properties in a style
+            //                 (the first one will always be returned).
             if (moveTo && !moveTo.parent) {
                 var treeElement = section.findTreeElementWithName(moveToPropertyName);
                 if (treeElement)
@@ -1675,48 +1737,41 @@ WebInspector.StylePropertyTreeElement.prototype = {
                 this.parent.removeChild(this);
                 section.afterUpdate();
                 return;
-            } else {
+            } else
                 delete section._afterUpdate;
-            }
         }
 
-        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, changedProperties)
-        {
-            elementsPanel.removeStyleChange(section.identifier, self.style, self.name);
-
-            if (!styleTextLength) {
-                // Do remove ourselves from UI when the property removal is confirmed.
-                self.parent.removeChild(self);
-            } else {
-                self.style = newStyle;
-                for (var i = 0; i < changedProperties.length; ++i)
-                    elementsPanel.addStyleChange(section.identifier, self.style, changedProperties[i]);
-                self._styleRule.style = self.style;
-            }
+            this.style = newStyle;
+            this.property = newStyle.propertyAt(this.property.index);
+            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);
+        // Append a ";" if the new text does not end in ";".
+        // FIXME: this does not handle trailing comments.
+        if (styleText.length && !/;\s*$/.test(styleText))
+            styleText += ";";
+        this.property.setText(styleText, updateInterface, callback.bind(this));
     }
 }
 

front-end/TabbedPane.js

@@ -31,51 +31,56 @@
 WebInspector.TabbedPane = function(element)
 {
     this.element = element || document.createElement("div");
-
-    this.tabsElement = document.createElement("div");
-    this.tabsElement.className = "tabbed-pane-header";
-    this.element.appendChild(this.tabsElement);
-
-    this._tabObjects = {};
+    this.element.addStyleClass("tabbed-pane");
+    this._tabsElement = this.element.createChild("div", "tabbed-pane-header");
+    this._contentElement = this.element.createChild("div", "tabbed-pane-content");
+    this._tabs = {};
 }
 
 WebInspector.TabbedPane.prototype = {
-    appendTab: function(id, tabTitle, contentElement, tabClickListener)
+    appendTab: function(id, tabTitle, view)
     {
         var tabElement = document.createElement("li");
         tabElement.textContent = tabTitle;
-        tabElement.addEventListener("click", tabClickListener, false);
-        this.tabsElement.appendChild(tabElement);
-        this.element.appendChild(contentElement);
-        this._tabObjects[id] = {tab: tabElement, content: contentElement};
-    },
-    
-    tabObjectForId: function(id)
-    {
-        return this._tabObjects[id];
+        tabElement.addEventListener("click", this.selectTab.bind(this, id, true), false);
+
+        this._tabsElement.appendChild(tabElement);
+        this._contentElement.appendChild(view.element);
+
+        this._tabs[id] = { tabElement: tabElement, view: view }
     },
 
-    hideTab: function(id)
+    selectTab: function(id, userGesture)
     {
-        var tabObject = this._tabObjects[id];
-        if (tabObject)
-            tabObject.tab.addStyleClass("hidden");
-    },
+        if (!(id in this._tabs))
+            return false;
 
-    selectTabById: function(selectId)
-    {
-        var selected = false;
-        for (var id in this._tabObjects) {
-            var tabObject = this._tabObjects[id];
-            if (id === selectId) {
-                selected = true;
-                tabObject.tab.addStyleClass("selected");
-                tabObject.content.removeStyleClass("hidden");
-            } else {
-                tabObject.tab.removeStyleClass("selected");
-                tabObject.content.addStyleClass("hidden");
-            }
+        if (this._currentTab) {
+            this._hideTab(this._currentTab)
+            delete this._currentTab;
         }
-        return selected;
+
+        var tab = this._tabs[id];
+        this._showTab(tab);
+        this._currentTab = tab;
+        if (userGesture) {
+            var event = {tabId: id};
+            this.dispatchEventToListeners("tab-selected", event);
+        }
+        return true;
+    },
+
+    _showTab: function(tab)
+    {
+        tab.tabElement.addStyleClass("selected");
+        tab.view.show(this._contentElement);
+    },
+
+    _hideTab: function(tab)
+    {
+        tab.tabElement.removeStyleClass("selected");
+        tab.view.visible = false;
     }
 }
+
+WebInspector.TabbedPane.prototype.__proto__ = WebInspector.Object.prototype;

front-end/TextPrompt.js

@@ -100,22 +100,6 @@ WebInspector.TextPrompt.prototype = {
                 }
                 defaultAction.call(this);
                 break;
-            case "U+0041": // Ctrl+A = Move caret to the start of prompt on non-Mac.
-                if (!WebInspector.isMac() && event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
-                    handled = true;
-                    this._moveCaretToStartOfPrompt();
-                    break;
-                }
-                defaultAction.call(this);
-                break;
-            case "U+0045": // Ctrl+E = Move caret to the end of prompt on non-Mac.
-                if (!WebInspector.isMac() && event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
-                    handled = true;
-                    this.moveCaretToEndOfPrompt();
-                    break;
-                }
-                defaultAction.call(this);
-                break;
             default:
                 defaultAction.call(this);
                 break;
@@ -379,18 +363,6 @@ WebInspector.TextPrompt.prototype = {
         return true;
     },
 
-    _moveCaretToStartOfPrompt: function()
-    {
-        var selection = window.getSelection();
-        var selectionRange = document.createRange();
-
-        selectionRange.setStart(this.element, 0);
-        selectionRange.setEnd(this.element, 0);
-
-        selection.removeAllRanges();
-        selection.addRange(selectionRange);
-    },
-
     moveCaretToEndOfPrompt: function()
     {
         var selection = window.getSelection();

front-end/WatchExpressionsSidebarPane.js

@@ -31,15 +31,15 @@
 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();
 
-        this.expanded = WebInspector.applicationSettings.watchExpressions.length > 0;
+        this.expanded = WebInspector.settings.watchExpressions.length > 0;
         this.section = new WebInspector.WatchExpressionsSection();
         this.bodyElement.appendChild(this.section.element);
 
@@ -77,7 +77,7 @@ WebInspector.WatchExpressionsSection = function()
 
     WebInspector.ObjectPropertiesSection.call(this);
 
-    this.watchExpressions = WebInspector.applicationSettings.watchExpressions;
+    this.watchExpressions = WebInspector.settings.watchExpressions;
 
     this.headerElement.className = "hidden";
     this.editable = true;
@@ -181,7 +181,7 @@ WebInspector.WatchExpressionsSection.prototype = {
             if (this.watchExpressions[i])
                 toSave.push(this.watchExpressions[i]);
 
-        WebInspector.applicationSettings.watchExpressions = toSave;
+        WebInspector.settings.watchExpressions = toSave;
         return toSave.length;
     }
 }

front-end/WebKit.qrc

@@ -20,6 +20,8 @@
     <file>ConsoleView.js</file>
     <file>ContextMenu.js</file>
     <file>CookieItemsView.js</file>
+    <file>CookieParser.js</file>
+    <file>CookiesTable.js</file>
     <file>CSSCompletions.js</file>
     <file>CSSStyleModel.js</file>
     <file>Database.js</file>
@@ -40,6 +42,7 @@
     <file>ExtensionPanel.js</file>
     <file>ExtensionRegistryStub.js</file>
     <file>ExtensionServer.js</file>
+    <file>FileSystemView.js</file>
     <file>FontView.js</file>
     <file>GoToLineDialog.js</file>
     <file>HAREntry.js</file>
@@ -53,6 +56,7 @@
     <file>InspectorFrontendHostStub.js</file>
     <file>KeyboardShortcut.js</file>
     <file>MetricsSidebarPane.js</file>
+    <file>NetworkItemView.js</file>
     <file>NetworkPanel.js</file>
     <file>Object.js</file>
     <file>ObjectPropertiesSection.js</file>
@@ -68,8 +72,12 @@
     <file>RemoteObject.js</file>
     <file>Resource.js</file>
     <file>ResourceCategory.js</file>
-    <file>ResourcesPanel.js</file>
+    <file>ResourceCookiesView.js</file>
+    <file>ResourceHeadersView.js</file>
+    <file>ResourceManager.js</file>
+    <file>ResourceTimingView.js</file>
     <file>ResourceView.js</file>
+    <file>ResourcesPanel.js</file>
     <file>ScopeChainSidebarPane.js</file>
     <file>Script.js</file>
     <file>ScriptsPanel.js</file>
@@ -86,7 +94,6 @@
     <file>SourceTokenizer.js</file>
     <file>SourceView.js</file>
     <file>StatusBarButton.js</file>
-    <file>StoragePanel.js</file>
     <file>StylesSidebarPane.js</file>
     <file>SummaryBar.js</file>
     <file>TabbedPane.js</file>
@@ -156,6 +163,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>
@@ -164,7 +172,6 @@
     <file>Images/goArrow.png</file>
     <file>Images/graphLabelCalloutLeft.png</file>
     <file>Images/graphLabelCalloutRight.png</file>
-    <file>Images/grayConnectorPoint.png</file>
     <file>Images/largerResourcesButtonGlyph.png</file>
     <file>Images/localStorage.png</file>
     <file>Images/networkIcon.png</file>
@@ -195,7 +202,6 @@
     <file>Images/resourcePlainIcon.png</file>
     <file>Images/resourcePlainIconSmall.png</file>
     <file>Images/resourcesIcon.png</file>
-    <file>Images/resourcesSilhouette.png</file>
     <file>Images/resourcesSizeGraphIcon.png</file>
     <file>Images/resourcesTimeGraphIcon.png</file>
     <file>Images/scriptsIcon.png</file>
@@ -221,7 +227,6 @@
     <file>Images/statusbarMenuButtonSelected.png</file>
     <file>Images/statusbarResizerHorizontal.png</file>
     <file>Images/statusbarResizerVertical.png</file>
-    <file>Images/storageIcon.png</file>
     <file>Images/successGreenDot.png</file>
     <file>Images/thumbActiveHoriz.png</file>
     <file>Images/thumbActiveVert.png</file>
@@ -270,7 +275,6 @@
     <file>Images/warningMediumIcon.png</file>
     <file>Images/warningOrangeDot.png</file>
     <file>Images/warningsErrors.png</file>
-    <file>Images/whiteConnectorPoint.png</file>
     <file alias="DebuggerScript.js">../../bindings/v8/DebuggerScript.js</file>
 </qresource>
 </RCC>

front-end/WorkersSidebarPane.js

@@ -59,7 +59,8 @@ WebInspector.WorkersSidebarPane.prototype = {
         this._workers[id] = worker;
 
         var title = WebInspector.linkifyURL(url, WebInspector.displayNameForURL(url), "worker-item", true, url);
-        var treeElement = new TreeElement(title, worker, false);
+        var treeElement = new TreeElement(null, worker, false);
+        treeElement.titleHTML = title;
         this._treeOutline.appendChild(treeElement);
     },
 
@@ -80,7 +81,6 @@ WebInspector.WorkersSidebarPane.prototype = {
 
     reset: function()
     {
-        InspectorBackend.removeAllScriptsToEvaluateOnLoad();
         this.setInstrumentation(this._enableWorkersCheckbox.checked);
         this._treeOutline.removeChildren();
         this._workers = {};

front-end/index.html

@@ -60,15 +60,18 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="ChangesView.js"></script>
     <script type="text/javascript" src="ConsoleView.js"></script>
     <script type="text/javascript" src="Panel.js"></script>
-    <script type="text/javascript" src="TimelineGrid.js"></script>
+    <script type="text/javascript" src="TimelineGrid.js"></script>    
     <script type="text/javascript" src="Resource.js"></script>
+    <script type="text/javascript" src="ResourceManager.js"></script>
     <script type="text/javascript" src="ResourceCategory.js"></script>
     <script type="text/javascript" src="Database.js"></script>
     <script type="text/javascript" src="DOMStorage.js"></script>
     <script type="text/javascript" src="DOMStorageItemsView.js"></script>
     <script type="text/javascript" src="DataGrid.js"></script>
+    <script type="text/javascript" src="CookiesTable.js"></script>
     <script type="text/javascript" src="CookieItemsView.js"></script>
     <script type="text/javascript" src="ApplicationCacheItemsView.js"></script>
+    <script type="text/javascript" src="FileSystemView.js"></script>
     <script type="text/javascript" src="Script.js"></script>
     <script type="text/javascript" src="BreakpointManager.js"></script>
     <script type="text/javascript" src="SidebarPane.js"></script>
@@ -95,10 +98,9 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="SummaryBar.js"></script>
     <script type="text/javascript" src="ElementsPanel.js"></script>
     <script type="text/javascript" src="NetworkPanel.js"></script>
-    <script type="text/javascript" src="ResourcesPanel.js"></script>
     <script type="text/javascript" src="InjectedFakeWorker.js"></script>
     <script type="text/javascript" src="ScriptsPanel.js"></script>
-    <script type="text/javascript" src="StoragePanel.js"></script>
+    <script type="text/javascript" src="ResourcesPanel.js"></script>
     <script type="text/javascript" src="ProfilesPanel.js"></script>
     <script type="text/javascript" src="ConsolePanel.js"></script>
     <script type="text/javascript" src="ExtensionAPI.js"></script>
@@ -112,6 +114,10 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="AuditRules.js"></script>
     <script type="text/javascript" src="AuditCategories.js"></script>
     <script type="text/javascript" src="AuditFormatters.js"></script>
+    <script type="text/javascript" src="ResourceHeadersView.js"></script>
+    <script type="text/javascript" src="ResourceCookiesView.js"></script>
+    <script type="text/javascript" src="ResourceTimingView.js"></script>
+    <script type="text/javascript" src="NetworkItemView.js"></script>
     <script type="text/javascript" src="ResourceView.js"></script>
     <script type="text/javascript" src="SourceFrame.js"></script>
     <script type="text/javascript" src="DOMSyntaxHighlighter.js"></script>
@@ -144,6 +150,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="GoToLineDialog.js"></script>
     <script type="text/javascript" src="ShortcutsHelp.js"></script>
     <script type="text/javascript" src="HAREntry.js"></script>
+    <script type="text/javascript" src="CookieParser.js"></script>
     <script type="text/javascript" src="node/Overrides.js"></script>
 </head>
 <body class="attached">

front-end/inspector.css

@@ -219,10 +219,6 @@ body.attached #search-results-matches {
     background-image: url(Images/timelineIcon.png);
 }
 
-.toolbar-item.storage .toolbar-icon {
-    background-image: url(Images/storageIcon.png);
-}
-
 .toolbar-item.profiles .toolbar-icon {
     background-image: url(Images/profilesIcon.png);
 }
@@ -508,7 +504,7 @@ body.drawer-visible #drawer {
 }
 
 .monospace {
-    font-size: 10px;
+    font-size: 10px !important;
     font-family: monospace;
 }
 
@@ -519,17 +515,17 @@ body.platform-mac .monospace, body.platform-mac .source-code {
 /* Keep .platform-mac to make the rule more specific than the general one above. */
 body.platform-mac.platform-mac-snowleopard .monospace,
 body.platform-mac.platform-mac-snowleopard .source-code {
-    font-size: 11px;
+    font-size: 11px !important;
     font-family: Menlo, monospace;
 }
 
 body.platform-windows .monospace, body.platform-windows .source-code {
-    font-size: 12px;
+    font-size: 12px !important;
     font-family: Consolas, Lucida Console, monospace;
 }
 
 body.platform-linux .monospace, body.platform-linux .source-code {
-    font-size: 11px;
+    font-size: 11px !important;
     font-family: dejavu sans mono, monospace;
 }
 
@@ -715,11 +711,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;
@@ -807,102 +798,6 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     display: block;
 }
 
-.resource-view {
-    display: none;
-    position: absolute;
-    background: white;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.resource-view.visible {
-    display: block;
-}
-
-.resource-view .tabbed-pane-header {
-    display: none;
-    position: absolute;
-    height: 20px;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
-    border-bottom: 1px solid rgb(163, 163, 163);
-}
-
-.resource-view.headers-visible .tabbed-pane-header {
-    display: block;
-}
-
-.resource-view .scope-bar li {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.resource-view-headers {
-    padding: 6px;
-    -webkit-user-select: text;    
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow: auto;
-}
-
-.resource-view.headers-visible .resource-view-headers {
-    top: 20px;
-}
-
-.resource-view-headers .outline-disclosure .parent {
-    -webkit-user-select: none;
-    font-weight: bold;
-}
-
-.resource-view-headers .outline-disclosure .children li {
-    white-space: nowrap;
-}
-
-.resource-view-headers .outline-disclosure li.expanded .header-count {
-    display: none;
-}
-
-.resource-view-headers .outline-disclosure .header-name {
-    color: rgb(33%, 33%, 33%);
-    display: inline-block;
-    margin-right: 0.5em;
-    font-weight: bold;
-    vertical-align: top;
-    white-space: pre-wrap;
-}
-
-.resource-view-headers .outline-disclosure .header-value {
-    display: inline;
-    margin-right: 100px;
-    white-space: pre-wrap;
-    word-break: break-all;
-    margin-top: 1px;
-}
-
-.resource-view-headers .outline-disclosure .raw-form-data {
-    white-space:pre-wrap;
-}
-
-.resource-view .resource-view-content {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    overflow: auto;
-}
-
-.resource-view.headers-visible .resource-view-content {
-    top: 20px;
-}
-
 .webkit-line-gutter-backdrop {
     /* Keep this in sync with view-source.css (.webkit-line-gutter-backdrop) */
     width: 31px;
@@ -915,7 +810,21 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     height: 100%
 }
 
-.resource-view.font .resource-view-content {
+.resource-view {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    overflow: auto;
+}
+
+.resource-view.visible {
+    display: block;
+}
+
+.resource-view.font {
     font-size: 60px;
     white-space: pre-wrap;
     word-wrap: break-word;
@@ -923,12 +832,12 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     padding: 15px;
 }
 
-.resource-view.image .resource-view-content > .image {
+.resource-view.image > .image {
     padding: 20px 20px 10px 20px;
     text-align: center;
 }
 
-.resource-view.image .resource-view-content > .info {
+.resource-view.image > .info {
     padding-bottom: 10px;
     font-size: 11px;
     -webkit-user-select: text;
@@ -1015,7 +924,6 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     right: 0;
     bottom: 0;
     width: 325px;
-    background-color: rgb(245, 245, 245);
     border-left: 1px solid rgb(64%, 64%, 64%);
     cursor: default;
     overflow: auto;
@@ -1158,7 +1066,7 @@ body.platform-linux .monospace, body.platform-linux .source-code {
 
 .source-code {
     font-family: monospace;
-    font-size: 10px;
+    font-size: 10px !important;
     white-space: pre-wrap;
 }
 
@@ -1190,7 +1098,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 +1107,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;
 }
@@ -1300,26 +1201,21 @@ body.inactive .placard.selected {
     margin-top: 1px;
 }
 
-.section:nth-last-of-type(1), .event-bar:nth-last-of-type(1) {
-    margin-bottom: 1px;
-}
-
 .watch-expressions-buttons-container {
     text-align: center;
 }
 
+.events-pane .section:not(:nth-of-type(1)) {
+    border-top: 1px solid rgb(191, 191, 191);
+}
+
 .event-bar:first-child {
     margin-top: 1px;
 }
 
-.event-bar:nth-last-of-type(1) .header {
-    border-bottom: 1px solid rgb(163, 163, 163);
-}
-
 .section .header {
-    padding: 2px 8px 4px 18px;
-    border-top: 1px solid rgb(145, 160, 192);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
+    color: black;
+    padding: 0 8px 0 18px;
     min-height: 18px;
     white-space: nowrap;
     -webkit-background-origin: padding;
@@ -1328,22 +1224,23 @@ body.inactive .placard.selected {
 
 .section .header::before {
     position: absolute;
-    top: 4px;
+    top: 2px;
     left: 7px;
     width: 8px;
     height: 8px;
-    content: url(Images/treeRightTriangleWhite.png);
+    content: url(Images/treeRightTriangleBlack.png);
+    opacity: 0.8;
 }
 
 .section.expanded .header::before {
-    content: url(Images/treeDownTriangleWhite.png);
+    content: url(Images/treeDownTriangleBlack.png);
 }
 
 .section .header .title, .event-bar .header .title {
-    color: white;
-    font-weight: bold;
+    font-weight: normal;
     word-wrap: break-word;
     white-space: normal;
+    line-height: 18px;
 }
 
 .section .header .title.blank-title {
@@ -1360,10 +1257,8 @@ body.inactive .placard.selected {
 
 .section .header .subtitle, .event-bar .header .subtitle {
     float: right;
-    font-size: 10px;
     margin-left: 5px;
     max-width: 55%;
-    color: rgba(255, 255, 255, 0.7);
     text-overflow: ellipsis;
     overflow: hidden;
 }
@@ -1378,6 +1273,7 @@ body.inactive .placard.selected {
 
 .section.expanded .properties, .event-bar.expanded .event-properties {
     display: block;
+    padding-left: 16px;
 }
 
 .section.no-affect .properties li {
@@ -1390,7 +1286,7 @@ body.inactive .placard.selected {
 
 .properties-tree {
     margin: 0;
-    padding: 2px 6px 3px;
+    padding: 0 6px 2px;
     list-style: none;
     min-height: 18px;
 }
@@ -1430,35 +1326,35 @@ 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-size: 11px;
     font-weight: bold;
-    color: rgb(110, 110, 110);
+    color: rgb(96, 96, 96);
+    padding-top: 2px;
 }
 
 .event-listener-breakpoints.properties-tree .children li {
-    margin-left: 17px;
+    margin-left: 12px;
+    height: 16px;
 }
 
 .event-listener-breakpoints .checkbox-elem {
+    font-size: 10px;
     float: left;
-    margin-top: 1px;
-    margin-left: 0px;
+    top: -2px;
+    position: relative;
+    left: -1px;
 }
 
 .section .event-bars {
@@ -1471,38 +1367,21 @@ ol.stack-trace {
 
 .event-bar {
     position: relative;
-}
-
-.event-bar-connector {
-    position: absolute;
-    left: 75%;
-    bottom: -7px;
-    margin-left: -7px;
-    content: url(Images/grayConnectorPoint.png);
-    z-index: 3;
-}
-
-.event-bar.expanded .event-bar-connector {
-    content: url(Images/whiteConnectorPoint.png);
+    margin-left: 10px;
 }
 
 .event-bars .event-bar .header {
-    padding: 2px 8px 4px 18px;
-    border-top: 1px solid rgb(163, 163, 163);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), to(rgb(207, 207, 207)));
-    min-height: 18px;
+    padding: 0 8px 0 18px;
+    min-height: 16px;
+    opacity: 1.0;
     white-space: nowrap;
     -webkit-background-origin: padding;
     -webkit-background-clip: padding;
 }
 
-.event-bars .event-bar.expanded .header {
-    border-bottom: 1px solid rgb(163, 163, 163);
-}
-
 .event-bars .event-bar .header .title {
-    font-weight: bold;
-    color: #333;
+    font-weight: normal;
+    color: black;
     text-shadow: white 0 1px 0; 
 }
 
@@ -1512,7 +1391,7 @@ ol.stack-trace {
 
 .event-bars .event-bar .header::before {
     position: absolute;
-    top: 4px;
+    top: 2px;
     left: 7px;
     width: 8px;
     height: 8px;
@@ -1727,7 +1606,6 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
 .pane > .body {
     position: relative;
     display: none;
-    background-color: white;
     overflow-y: auto;
     overflow-x: hidden;
 }
@@ -1737,11 +1615,12 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     font-style: italic;
     font-size: 10px;
     padding: 6px;
-    color: gray;
+    color: black;
 }
 
 .pane > .body .placard + .info {
-    border-top: 1px solid gray
+    border-top: 1px solid rgb(189, 189, 189);
+    background-color: rgb(255, 255, 194);
 }
 
 .pane.expanded > .body, .pane.expanded > .growbar {
@@ -1769,9 +1648,9 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
 }
 
 .sidebar-pane-subtitle {
-    float: right;
+    position: absolute;
+    right: 0;
     font-weight: normal;
-    overflow: hidden;
 }
 
 body.platform-windows .sidebar-pane-subtitle {
@@ -1897,27 +1776,36 @@ 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);
+}
+
+/* FIXME: Make separate png for file-system */
+.file-system-storage-tree-item .icon {
     content: url(Images/applicationCache.png);
 }
 
@@ -1929,6 +1817,82 @@ body.inactive .sidebar {
     bottom: 0;
 }
 
+.resources.panel .sidebar {
+    padding-left: 0;
+    z-index: 10;
+}
+
+.resources.panel .sidebar li {
+    height: 17px;
+    white-space: nowrap;
+    text-indent: 0;
+    margin-left: -2px;
+}
+
+.resources.panel .sidebar li.parent {
+    text-indent: 0;
+    margin-left: -12px;
+}
+
+.resources.panel .sidebar li.selected {
+    color: white;
+    text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
+    font-weight: bold;
+}
+
+.resources.panel .sidebar li.selected .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;
+}
+
+.resources.panel .sidebar :focus li.selected .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 .resources.panel .sidebar li.selected .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);
+}
+
+.resources.panel .sidebar .icon {
+    width: 16px;
+    height: 16px;
+    float: left;
+}
+
+.resources.panel .base-storage-tree-element-title {
+    overflow: hidden;
+    position: relative;
+    text-overflow: ellipsis;
+    padding-left: 2px;
+    top: 1px;
+}
+
+li.selected .base-storage-tree-element-subtitle {
+    color: white;
+}
+
+.base-storage-tree-element-subtitle {
+    padding-left: 2px;
+    color: rgb(80, 80, 80);
+    text-shadow: none;
+}
+
+.resources.panel .status {
+    float: right;
+    height: 16px;
+    margin-top: 1px;
+    margin-left: 4px;
+    line-height: 1em;
+}
+
+.resources.panel li .status .bubble {
+    height: 13px;
+    padding-top: 0;
+}
+
 .storage-view {
     display: none;
     overflow: hidden;
@@ -1943,16 +1907,16 @@ body.inactive .sidebar {
     display: block;
 }
 
-.storage-view.table {
+.storage-view {
     overflow: hidden;
 }
 
-.storage-view.table .data-grid {
+.storage-view .data-grid {
     border: none;
     height: 100%;
 }
 
-.storage-view.table .storage-table-empty, .storage-view.table .storage-table-error {
+.storage-empty-view, .storage-view .storage-table-error {
     position: absolute;
     top: 0;
     bottom: 25%;
@@ -1970,7 +1934,7 @@ body.inactive .sidebar {
     white-space: pre-wrap;
 }
 
-.storage-view.table .storage-table-error {
+.storage-view .storage-table-error {
     color: rgb(66%, 33%, 33%);
 }
 
@@ -2417,10 +2381,6 @@ body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-v
                 -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
 }
 
-.panel-enabler-view.resources img {
-    content: url(Images/resourcesSilhouette.png);
-}
-
 .panel-enabler-view.scripts img {
     content: url(Images/scriptsSilhouette.png);
 }
@@ -2450,7 +2410,7 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
 }
 
 #scripts-files {
-    max-width: 450px;
+    max-width: 250px;
 }
 
 #scripts-files option.extension-script {
@@ -2561,7 +2521,6 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
     right: 0;
     bottom: 0;
     width: 225px;
-    background-color: rgb(245, 245, 245);
     border-left: 1px solid rgb(64%, 64%, 64%);
     cursor: default;
     overflow: auto;
@@ -2585,6 +2544,16 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
     margin-top: 1px;
 }
 
+.tabbed-pane {
+    -webkit-box-orient: vertical;
+    height: 100%;
+}
+
+.tabbed-pane-content {
+    -webkit-box-flex: 1;
+    position: relative;
+}
+
 .tabbed-pane-header {
     height: 23px;
     padding: 0 10px;
@@ -2600,7 +2569,8 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
     background: transparent;
     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
     vertical-align: middle;
-    padding: 1px 7px 2px;
+    padding: 3px 7px 2px;
+    height: 21px;
     border: 1px solid transparent;
     border-bottom: none;
 }
@@ -3166,7 +3136,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;
@@ -3174,11 +3144,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;
@@ -3197,20 +3167,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;
 }
 
@@ -3361,7 +3331,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;
@@ -3379,7 +3349,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;
@@ -3431,15 +3401,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);
 }
 
@@ -4017,7 +3987,7 @@ button.enable-toggle-status-bar-item .glyph {
 }
 
 ol.breakpoint-list {
-    -webkit-padding-start: 2px;
+    -webkit-padding-start: 0;
     list-style: none;
     margin: 0;
 }
@@ -4026,9 +3996,8 @@ ol.breakpoint-list {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    margin: 4px 0;
-    color: rgb(33%, 33%, 33%);
-    cursor: pointer;
+    padding: 2px 0;
+    color: black;
 }
 
 .breakpoint-list li:hover {
@@ -4050,8 +4019,18 @@ ol.breakpoint-list {
     margin: 2px 0 0px 20px;
 }
 
-.breakpoint-list .breakpoint-hit {
-    background-color: yellow;
+.pane .breakpoint-hit {
+    background-color: rgb(255, 255, 194);
+}
+
+li.breakpoint-hit .breakpoint-hit-marker {
+    background-color: rgb(255, 255, 194);
+    height: 18px;
+    left: 0px;
+    margin-top: -16px;
+    position: absolute;
+    right: 0px;
+    z-index: -1;
 }
 
 .webkit-html-js-node, .webkit-html-css-node {
@@ -4148,6 +4127,7 @@ a.worker-item {
     cursor: pointer;
     text-decoration: none;
 }
+
 .styles-section {
     padding: 2px 2px 4px 4px;
     min-height: 18px;
@@ -4165,6 +4145,23 @@ a.worker-item {
     background-color: rgb(240, 240, 240);
 }
 
+.styles-section .properties li.not-parsed-ok {
+    margin-left: 0px;
+}
+
+.styles-section .properties li.not-parsed-ok::before {
+    content: url(Images/warningIcon.png);
+    opacity: 0.75;
+    float: left;
+    width: 8px;
+    height: 8px;
+    margin-top: 0;
+    padding-right: 5px;
+    vertical-align: sub;
+    -webkit-user-select: none;
+    cursor: default;
+}
+
 .styles-section .header {
     white-space: nowrap;
     -webkit-background-origin: padding;
@@ -4275,7 +4272,7 @@ a.worker-item {
     z-index: 1;
 }
 
-.styles-section .properties .overloaded, .styles-section .properties .disabled {
+.styles-section .properties .overloaded, .styles-section .properties .inactive, .styles-section .properties .disabled {
     text-decoration: line-through;
 }
 
@@ -4313,3 +4310,11 @@ a.worker-item:hover {
     text-decoration: underline;
     cursor: pointer;
 }
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.cursor-auto {
+    cursor: auto;
+}

front-end/inspector.html

@@ -61,13 +61,16 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="Panel.js"></script>
     <script type="text/javascript" src="TimelineGrid.js"></script>    
     <script type="text/javascript" src="Resource.js"></script>
+    <script type="text/javascript" src="ResourceManager.js"></script>
     <script type="text/javascript" src="ResourceCategory.js"></script>
     <script type="text/javascript" src="Database.js"></script>
     <script type="text/javascript" src="DOMStorage.js"></script>
     <script type="text/javascript" src="DOMStorageItemsView.js"></script>
     <script type="text/javascript" src="DataGrid.js"></script>
+    <script type="text/javascript" src="CookiesTable.js"></script>
     <script type="text/javascript" src="CookieItemsView.js"></script>
     <script type="text/javascript" src="ApplicationCacheItemsView.js"></script>
+    <script type="text/javascript" src="FileSystemView.js"></script>
     <script type="text/javascript" src="Script.js"></script>
     <script type="text/javascript" src="BreakpointManager.js"></script>
     <script type="text/javascript" src="SidebarPane.js"></script>
@@ -94,10 +97,9 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="SummaryBar.js"></script>
     <script type="text/javascript" src="ElementsPanel.js"></script>
     <script type="text/javascript" src="NetworkPanel.js"></script>
-    <script type="text/javascript" src="ResourcesPanel.js"></script>
     <script type="text/javascript" src="InjectedFakeWorker.js"></script>
     <script type="text/javascript" src="ScriptsPanel.js"></script>
-    <script type="text/javascript" src="StoragePanel.js"></script>
+    <script type="text/javascript" src="ResourcesPanel.js"></script>
     <script type="text/javascript" src="ProfilesPanel.js"></script>
     <script type="text/javascript" src="ConsolePanel.js"></script>
     <script type="text/javascript" src="ExtensionAPI.js"></script>
@@ -111,6 +113,10 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="AuditRules.js"></script>
     <script type="text/javascript" src="AuditCategories.js"></script>
     <script type="text/javascript" src="AuditFormatters.js"></script>
+    <script type="text/javascript" src="ResourceHeadersView.js"></script>
+    <script type="text/javascript" src="ResourceCookiesView.js"></script>
+    <script type="text/javascript" src="ResourceTimingView.js"></script>
+    <script type="text/javascript" src="NetworkItemView.js"></script>
     <script type="text/javascript" src="ResourceView.js"></script>
     <script type="text/javascript" src="SourceFrame.js"></script>
     <script type="text/javascript" src="DOMSyntaxHighlighter.js"></script>
@@ -143,6 +149,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="GoToLineDialog.js"></script>
     <script type="text/javascript" src="ShortcutsHelp.js"></script>
     <script type="text/javascript" src="HAREntry.js"></script>
+    <script type="text/javascript" src="CookieParser.js"></script>
 </head>
 <body class="detached">
     <div id="toolbar">

front-end/inspector.js

@@ -50,21 +50,9 @@
 
 var WebInspector = {
     resources: {},
-    resourceURLMap: {},
-    cookieDomains: {},
-    applicationCacheDomains: {},
     missingLocalizedStrings: {},
     pendingDispatches: 0,
 
-    // RegExp groups:
-    // 1 - scheme
-    // 2 - hostname
-    // 3 - ?port
-    // 4 - ?path
-    // 5 - ?fragment
-    URLRegExp: /^(http[s]?|file):\/\/([^\/:]*)(?::([\d]+))?(?:(\/[^#]*)(?:#(.*))?)?$/i,
-    GenericURLRegExp: /^([^:]+):\/\/([^\/:]*)(?::([\d]+))?(?:(\/[^#]*)(?:#(.*))?)?$/i,
-
     get platform()
     {
         if (!("_platform" in this))
@@ -191,7 +179,7 @@ var WebInspector = {
 
         for (var panelName in WebInspector.panels) {
             if (WebInspector.panels[panelName] === x) {
-                InspectorBackend.storeLastActivePanel(panelName);
+                WebInspector.settings.lastActivePanel = panelName;
                 this._panelHistory.setPanel(panelName);
             }
         }
@@ -202,7 +190,7 @@ var WebInspector = {
         var pane = new WebInspector.BreakpointsSidebarPane(WebInspector.UIString("Breakpoints"));
         function breakpointAdded(event)
         {
-            pane.addBreakpoint(new WebInspector.JSBreakpointItem(event.data));
+            pane.addBreakpointItem(new WebInspector.BreakpointItem(event.data));
         }
         WebInspector.breakpointManager.addEventListener("breakpoint-added", breakpointAdded);
         return pane;
@@ -213,7 +201,7 @@ var WebInspector = {
         var pane = new WebInspector.BreakpointsSidebarPane(WebInspector.UIString("DOM Breakpoints"));
         function breakpointAdded(event)
         {
-            pane.addBreakpoint(new WebInspector.BreakpointItem(event.data));
+            pane.addBreakpointItem(new WebInspector.BreakpointItem(event.data));
         }
         WebInspector.breakpointManager.addEventListener("dom-breakpoint-added", breakpointAdded);
         return pane;
@@ -224,7 +212,7 @@ var WebInspector = {
         var pane = new WebInspector.XHRBreakpointsSidebarPane();
         function breakpointAdded(event)
         {
-            pane.addBreakpoint(new WebInspector.BreakpointItem(event.data));
+            pane.addBreakpointItem(new WebInspector.BreakpointItem(event.data));
         }
         WebInspector.breakpointManager.addEventListener("xhr-breakpoint-added", breakpointAdded);
         return pane;
@@ -235,10 +223,10 @@ var WebInspector = {
         var hiddenPanels = (InspectorFrontendHost.hiddenPanels() || "").split(',');
         if (hiddenPanels.indexOf("elements") === -1)
             this.panels.elements = new WebInspector.ElementsPanel();
-        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("network") === -1)
+            this.panels.network = new WebInspector.NetworkPanel();
         if (hiddenPanels.indexOf("scripts") === -1)
             this.panels.scripts = new WebInspector.ScriptsPanel();
         if (hiddenPanels.indexOf("timeline") === -1)
@@ -249,8 +237,6 @@ 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 (hiddenPanels.indexOf("audits") === -1)
             this.panels.audits = new WebInspector.AuditsPanel();
         if (hiddenPanels.indexOf("console") === -1)
@@ -450,6 +436,21 @@ var WebInspector = {
     {
         this.currentPanel = this.panels.elements;
         this.panels.elements.updateFocusedNode(nodeId);
+    },
+
+    get networkResources()
+    {
+        return this.panels.network.resources;
+    },
+
+    forAllResources: function(callback)
+    {
+        WebInspector.resourceManager.forAllResources(callback);
+    },
+
+    resourceForURL: function(url)
+    {
+        return this.resourceManager.resourceForURL(url);
     }
 }
 
@@ -502,8 +503,8 @@ WebInspector.doLoadedDone = function()
     document.body.addStyleClass("port-" + port);
 
     InspectorFrontendHost.loaded();
-    WebInspector.Settings.initialize();
-    
+    WebInspector.settings = new WebInspector.Settings();
+
     this._registerShortcuts();
 
     // set order of some sections explicitly
@@ -516,6 +517,7 @@ 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;
+    this.resourceManager = new WebInspector.ResourceManager();
     this.domAgent = new WebInspector.DOMAgent();
 
     this.resourceCategories = {
@@ -525,7 +527,7 @@ WebInspector.doLoadedDone = function()
         scripts: new WebInspector.ResourceCategory("scripts", WebInspector.UIString("Scripts"), "rgb(255,121,0)"),
         xhr: new WebInspector.ResourceCategory("xhr", WebInspector.UIString("XHR"), "rgb(231,231,10)"),
         fonts: new WebInspector.ResourceCategory("fonts", WebInspector.UIString("Fonts"), "rgb(255,82,62)"),
-        websocket: new WebInspector.ResourceCategory("websockets", WebInspector.UIString("WebSocket"), "rgb(186,186,186)"), // FIXME: Decide the color.
+        websockets: new WebInspector.ResourceCategory("websockets", WebInspector.UIString("WebSocket"), "rgb(186,186,186)"), // FIXME: Decide the color.
         other: new WebInspector.ResourceCategory("other", WebInspector.UIString("Other"), "rgb(186,186,186)")
     };
 
@@ -595,14 +597,17 @@ 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();
     }
     InspectorBackend.getInspectorState(populateInspectorState);
 
-    InspectorBackend.populateScriptObjects();
+    function onPopulateScriptObjects()
+    {
+        if (!WebInspector.currentPanel)
+            WebInspector.showPanel(WebInspector.settings.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.
     InspectorBackend.getSupportedCSSProperties(WebInspector.CSSCompletions._load);
@@ -632,11 +637,11 @@ var windowLoaded = function()
     } else
         WebInspector.loaded();
 
-    window.removeEventListener("load", windowLoaded, false);
+    window.removeEventListener("DOMContentLoaded", windowLoaded, false);
     delete windowLoaded;
 };
 
-window.addEventListener("load", windowLoaded, false);
+window.addEventListener("DOMContentLoaded", windowLoaded, false);
 
 WebInspector.dispatch = function(message) {
     // We'd like to enforce asynchronous interaction between the inspector controller and the frontend.
@@ -653,6 +658,9 @@ WebInspector.dispatch = function(message) {
 // This function is purposely put into the global scope for easy access.
 WebInspector_syncDispatch = function(message)
 {
+    if (window.dumpInspectorProtocolMessages)
+        console.log("backend: " + ((typeof message === "string") ? message : JSON.stringify(message)));
+
     var messageObject = (typeof message === "string") ? JSON.parse(message) : message;
 
     var arguments = [];
@@ -769,12 +777,12 @@ WebInspector.documentClick = function(event)
             return;
         }
 
-        const urlMatch = WebInspector.GenericURLRegExp.exec(anchor.href);
-        if (urlMatch && urlMatch[1] === "webkit-link-action") {
-            if (urlMatch[2] === "show-panel") {
-                const panel = urlMatch[4].substring(1);
+        var parsedURL = anchor.href.asParsedURL();
+        if (parsedURL && parsedURL.scheme === "webkit-link-action") {
+            if (parsedURL.host === "show-panel") {
+                var panel = parsedURL.path.substring(1);
                 if (WebInspector.panels[panel])
-                    WebInspector.currentPanel = WebInspector.panels[panel];
+                    WebInspector.showPanel(panel);
             }
             return;
         }
@@ -1203,8 +1211,8 @@ WebInspector.showPanel = function(panel)
 
 WebInspector.selectDatabase = function(o)
 {
-    WebInspector.showPanel("storage");
-    WebInspector.panels.storage.selectDatabase(o);
+    WebInspector.showPanel("resources");
+    WebInspector.panels.resources.selectDatabase(o);
 }
 
 WebInspector.consoleMessagesCleared = function()
@@ -1214,181 +1222,79 @@ WebInspector.consoleMessagesCleared = function()
 
 WebInspector.selectDOMStorage = function(o)
 {
-    WebInspector.showPanel("storage");
-    WebInspector.panels.storage.selectDOMStorage(o);
+    WebInspector.showPanel("resources");
+    WebInspector.panels.resources.selectDOMStorage(o);
 }
 
-WebInspector.updateResource = function(payload)
-{
-    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);
-        if (this.panels.network)
-            this.panels.network.addResource(resource);
-    }
-
-    if (payload.didRequestChange) {
-        resource.domain = payload.host;
-        resource.path = payload.path;
-        resource.lastPathComponent = payload.lastPathComponent;
-        resource.requestHeaders = payload.requestHeaders;
-        resource.mainResource = payload.mainResource;
-        resource.requestMethod = payload.requestMethod;
-        resource.requestFormData = payload.requestFormData;
-        resource.documentURL = payload.documentURL;
-        if (typeof payload.webSocketRequestKey3 !== "undefined")
-            resource.webSocketRequestKey3 = payload.webSocketRequestKey3;
-
-        if (resource.mainResource)
-            this.mainResource = resource;
-
-        var match = payload.documentURL.match(WebInspector.GenericURLRegExp);
-        if (match) {
-            var protocol = match[1].toLowerCase();
-            this._addCookieDomain(match[2]);
-            this._addAppCacheDomain(match[2]);
-        }
-    }
-
-    if (payload.didResponseChange) {
-        resource.mimeType = payload.mimeType;
-        resource.suggestedFilename = payload.suggestedFilename;
-        resource.expectedContentLength = payload.expectedContentLength;
-        resource.statusCode = payload.statusCode;
-        resource.statusText = payload.statusText;
-        resource.suggestedFilename = payload.suggestedFilename;
-        resource.responseHeaders = payload.responseHeaders;
-        resource.connectionID = payload.connectionID;
-        resource.connectionReused = payload.connectionReused;
-        resource.timing = payload.timing;
-        resource.cached = payload.cached;
-        if (typeof payload.webSocketChallengeResponse !== "undefined")
-            resource.webSocketChallengeResponse = payload.webSocketChallengeResponse;
-    }
-
-    if (payload.didTypeChange)
-        resource.type = payload.type;
-
-    if (payload.didLengthChange)
-        resource.resourceSize = payload.resourceSize;
-
-    if (payload.didCompletionChange) {
-        resource.failed = payload.failed;
-        resource.finished = payload.finished;
-        if (this.panels.audits)
-            this.panels.audits.resourceFinished(resource);
-        this.extensionServer.notifyResourceFinished(resource);
-    }
-
-    if (payload.didTimingChange) {
-        if (payload.startTime)
-            resource.startTime = payload.startTime;
-        if (payload.responseReceivedTime)
-            resource.responseReceivedTime = payload.responseReceivedTime;
-        if (payload.endTime)
-            resource.endTime = payload.endTime;
-    }
-
-    if (this.panels.network)
-        this.panels.network.refreshResource(resource);
-}
-
-
 WebInspector.domContentEventFired = function(time)
 {
-    this.panels.resources.mainResourceDOMContentTime = time;
     this.panels.audits.mainResourceDOMContentTime = time;
     if (this.panels.network)
         this.panels.network.mainResourceDOMContentTime = time;
+    this.extensionServer.notifyPageDOMContentLoaded((time - WebInspector.mainResource.startTime) * 1000);
+    this.mainResourceDOMContentTime = time;
 }
 
 WebInspector.loadEventFired = function(time)
 {
-    this.panels.resources.mainResourceLoadTime = time;
     this.panels.audits.mainResourceLoadTime = time;
     if (this.panels.network)
         this.panels.network.mainResourceLoadTime = time;
-}
-
-WebInspector.removeResource = function(identifier)
-{
-    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)
-        this.panels.resources.removeResource(resource);
+    this.extensionServer.notifyPageLoaded((time - WebInspector.mainResource.startTime) * 1000);
+    this.mainResourceLoadTime = time;
 }
 
 WebInspector.addDatabase = function(payload)
 {
-    if (!this.panels.storage)
+    if (!this.panels.resources)
         return;
     var database = new WebInspector.Database(
         payload.id,
         payload.domain,
         payload.name,
         payload.version);
-    this.panels.storage.addDatabase(database);
-}
-
-WebInspector._addCookieDomain = function(domain)
-{
-    // Eliminate duplicate domains from the list.
-    if (domain in this.cookieDomains)
-        return;
-    this.cookieDomains[domain] = true;
-
-    if (!this.panels.storage)
-        return;
-    this.panels.storage.addCookieDomain(domain);
-}
-
-WebInspector._addAppCacheDomain = function(domain)
-{
-    // Eliminate duplicate domains from the list.
-    if (domain in this.applicationCacheDomains)
-        return;
-    this.applicationCacheDomains[domain] = true;
-
-    if (!this.panels.storage)
-        return;
-    this.panels.storage.addApplicationCache(domain);
+    this.panels.resources.addDatabase(database);
 }
 
 WebInspector.addDOMStorage = function(payload)
 {
-    if (!this.panels.storage)
+    if (!this.panels.resources)
         return;
     var domStorage = new WebInspector.DOMStorage(
         payload.id,
         payload.host,
         payload.isLocalStorage);
-    this.panels.storage.addDOMStorage(domStorage);
+    this.panels.resources.addDOMStorage(domStorage);
 }
 
 WebInspector.updateDOMStorage = function(storageId)
 {
-    this.panels.storage.updateDOMStorage(storageId);
+    this.panels.resources.updateDOMStorage(storageId);
 }
 
 WebInspector.updateApplicationCacheStatus = function(status)
 {
-    this.panels.storage.updateApplicationCacheStatus(status);
+    this.panels.resources.updateApplicationCacheStatus(status);
+}
+
+WebInspector.didGetFileSystemPath = function(root, type, origin)
+{
+    this.panels.resources.updateFileSystemPath(root, type, origin);
+}
+
+WebInspector.didGetFileSystemError = function(type, origin)
+{
+    this.panels.resources.updateFileSystemError(type, origin);
+}
+
+WebInspector.didGetFileSystemDisabled = function()
+{
+    this.panels.resources.setFileSystemDisabled();
 }
 
 WebInspector.updateNetworkState = function(isNowOnline)
 {
-    this.panels.storage.updateNetworkState(isNowOnline);
+    this.panels.resources.updateNetworkState(isNowOnline);
 }
 
 WebInspector.searchingForNodeWasEnabled = function()
@@ -1443,7 +1349,7 @@ WebInspector.failedToParseScriptSource = function(sourceURL, source, startingLin
 
 WebInspector.pausedScript = function(details)
 {
-    this.panels.scripts.debuggerPaused(details);
+    this.panels.scripts.debuggerPaused(details.callFrames);
     this.breakpointManager.debuggerPaused(details);
     InspectorFrontendHost.bringToFront();
 }
@@ -1464,21 +1370,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;
-
     this.console.clearMessages();
     this.extensionServer.notifyInspectorReset();
+
+    this.breakpointManager.restoreBreakpoints();
 }
 
 WebInspector.resetProfilesPanel = function()
@@ -1495,20 +1393,18 @@ WebInspector.bringToFront = function()
 WebInspector.inspectedURLChanged = function(url)
 {
     InspectorFrontendHost.inspectedURLChanged(url);
+    this.settings.inspectedURLChanged(url);
     this.extensionServer.notifyInspectedURLChanged();
-}
-
-WebInspector.resourceURLChanged = function(resource, oldURL)
-{
-    delete this.resourceURLMap[oldURL];
-    this.resourceURLMap[resource.url] = resource;
+    if (!this._breakpointsRestored) {
+        this.breakpointManager.restoreBreakpoints();
+        this._breakpointsRestored = true;
+    }
 }
 
 WebInspector.didCommitLoad = function()
 {
     // Cleanup elements panel early on inspected page refresh.
     WebInspector.setDocument(null);
-    this.extensionServer.notifyInspectedPageLoaded();
 }
 
 WebInspector.updateConsoleMessageExpiredCount = function(count)
@@ -1632,7 +1528,7 @@ WebInspector.addProfileHeader = function(profile)
 WebInspector.setRecordingProfile = function(isProfiling)
 {
     this.panels.profiles.getProfileType(WebInspector.CPUProfileType.TypeId).setRecordingProfile(isProfiling);
-    if (this._previousIsProfiling !== isProfiling) {
+    if (this.panels.profiles.hasTemporaryProfile(WebInspector.CPUProfileType.TypeId) !== isProfiling) {
         if (!this._temporaryRecordingProfile) {
             this._temporaryRecordingProfile = {
                 typeId: WebInspector.CPUProfileType.TypeId,
@@ -1641,7 +1537,6 @@ WebInspector.setRecordingProfile = function(isProfiling)
                 isTemporary: true
             };
         }
-        this._previousIsProfiling = isProfiling;
         if (isProfiling)
             this.panels.profiles.addProfileHeader(this._temporaryRecordingProfile);
         else
@@ -1690,7 +1585,8 @@ WebInspector.displayNameForURL = function(url)
 {
     if (!url)
         return "";
-    var resource = this.resourceURLMap[url];
+
+    var resource = this.resourceForURL(url);
     if (resource)
         return resource.displayName;
 
@@ -1708,24 +1604,10 @@ 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";
+
     var panel = this.panels[preferredPanel];
     if (panel && panel.canShowSourceLine(url, line))
         return panel;
@@ -1751,6 +1633,7 @@ WebInspector.linkifyStringAsFragment = function(string)
 {
     var container = document.createDocumentFragment();
     var linkStringRegEx = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/|www\.)[\w$\-_+*'=\|\/\\(){}[\]%@&#~,:;.!?]{2,}[\w$\-_+*=\|\/\\({%@&#~]/;
+    var lineColumnRegEx = /:(\d+)(:(\d+))?$/;
 
     while (string) {
         var linkString = linkStringRegEx.exec(string);
@@ -1768,7 +1651,17 @@ 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 lineColumnMatch = lineColumnRegEx.exec(realURL);
+        if (lineColumnMatch)
+            realURL = realURL.substring(0, realURL.length - lineColumnMatch[0].length);
+
+        var hasResourceWithURL = !!WebInspector.resourceForURL(realURL);
+        var urlNode = WebInspector.linkifyURLAsNode(realURL, title, null, hasResourceWithURL);
+        container.appendChild(urlNode);
+        if (lineColumnMatch) {
+            urlNode.setAttribute("line_number", lineColumnMatch[1]);
+            urlNode.setAttribute("preferred_panel", "scripts");
+        }
         string = string.substring(linkIndex + linkString.length, string.length);
     }
 
@@ -1836,27 +1729,31 @@ WebInspector.resourceURLForRelatedNode = function(node, url)
     }
 
     // documentURL not found or has bad value
-    for (var resourceURL in WebInspector.resourceURLMap) {
-        var match = resourceURL.match(WebInspector.URLRegExp);
-        if (match && match[4] === 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)
 {
-    var match = baseURL.match(WebInspector.URLRegExp);
-    if (match) {
+    var parsedURL = baseURL.asParsedURL();
+    if (parsedURL) {
         var path = href;
         if (path.charAt(0) !== "/") {
-            var basePath = match[4] || "/";
+            var basePath = parsedURL.path;
             path = basePath.substring(0, basePath.lastIndexOf("/")) + "/" + path;
         } else if (path.length > 1 && path.charAt(1) === "/") {
             // href starts with "//" which is a full URL with the protocol dropped (use the baseURL protocol).
-            return match[1] + ":" + path;
+            return parsedURL.scheme + ":" + path;
         }
-        return match[1] + "://" + match[2] + (match[3] ? (":" + match[3]) : "") + path;
+        return parsedURL.scheme + "://" + parsedURL.host + (parsedURL.port ? (":" + parsedURL.port) : "") + path;
     }
     return null;
 }
@@ -1939,9 +1836,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();

front-end/networkPanel.css

@@ -2,7 +2,7 @@
     -webkit-mask-image: url(Images/largerResourcesButtonGlyph.png);
 }
 
-.network.panel .data-grid {
+.network-sidebar .data-grid {
     border: none;
     position: absolute;
     top: 0;
@@ -12,47 +12,51 @@
     font-size: 11px;
 }
 
-.network.panel .data-grid table.data {
+.network-sidebar .data-grid table.data {
     -webkit-background-size: 1px 82px;
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05)));
     font-size: 11px;
 }
 
-.network.panel .data-grid.small table.data {
+.network-sidebar .data-grid.small table.data {
     -webkit-background-size: 1px 42px;
 }
 
-.network.panel .data-grid td {
+.network-sidebar .data-grid td:not(.network-summary) {
     line-height: 17px;
+    height: 37px;
     border-right: 1px solid rgb(210, 210, 210);
-    -webkit-user-select: none;
     vertical-align: middle;
 }
 
-.network.panel .data-grid th {
+.network-sidebar .data-grid.small td {
+    height: 17px;
+}
+
+.network-sidebar .data-grid th {
     border-bottom: 1px solid rgb(64%, 64%, 64%);
     height: 30px;
     font-size: 11px;
     font-weight: bold;
 }
 
-.network.panel .data-grid.small th {
+.network-sidebar .data-grid.small th {
     height: 22px;
 }
 
-.network.panel .data-grid th, .network.panel .data-grid th.sort-descending, .network.panel .data-grid th.sort-ascending {
+.network-sidebar .data-grid th, .network.panel .data-grid th.sort-descending, .network.panel .data-grid th.sort-ascending {
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
 }
 
-.network.panel .data-grid .data-container {
+.network-sidebar .data-grid .data-container {
     top: 31px;
 }
 
-.network.panel .data-grid.small .data-container {
+.network-sidebar .data-grid.small .data-container {
     top: 23px;
 }
 
-.network.panel .data-grid select {
+.network-sidebar .data-grid select {
     -webkit-appearance: none;
     background-color: transparent;
     border: none;
@@ -60,100 +64,114 @@
     font-size: 11px;
     font-weight: bold;
 }
-.network.panel .data-grid td.name-column {
-    font-weight: bold;
+
+.network-sidebar .data-grid tr.filler {
+    background-color: white;
 }
 
-.network.panel .data-grid td.method-column,
-.network.panel .data-grid td.status-column,
-.network.panel .data-grid td.type-column,
-.network.panel .data-grid td.size-column,
-.network.panel .data-grid td.time-column {
+.network-sidebar .data-grid td.name-column {
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.network.panel:not(.viewing-resource) .network-sidebar td.name-column:hover {
+    text-decoration: underline;
+}
+
+.network-sidebar .data-grid td.method-column,
+.network-sidebar .data-grid td.status-column,
+.network-sidebar .data-grid td.type-column,
+.network-sidebar .data-grid td.size-column,
+.network-sidebar .data-grid td.time-column {
     background-color: rgba(0, 0, 0, 0.07);
 }
 
-.network.panel .data-grid td.size-column,
-.network.panel .data-grid td.time-column {
+.network-sidebar .data-grid td.size-column,
+.network-sidebar .data-grid td.time-column {
     text-align: right;
 }
 
-.network.panel .small .network-graph-side {
+.network-sidebar .small .network-graph-side {
     height: 14px;
 }
 
-.network.panel .data-grid th.sortable:active {
+.network-sidebar .data-grid th.sortable:active {
     background-image: none;
 }
 
 .network-cell-subtitle {
     font-weight: normal;
-    color: grey;
+    color: gray;
+}
+
+.network-sidebar tr.selected .network-cell-subtitle {
+    color: white;
 }
 
 .network-header-subtitle {
-    color: grey;
+    color: gray;
 }
 
-.network.panel .data-grid.small .network-cell-subtitle,
-.network.panel .data-grid.small .network-header-subtitle
+.network-sidebar .data-grid.small .network-cell-subtitle,
+.network-sidebar .data-grid.small .network-header-subtitle
 {
     display: none;
 }
 
 /* Resource preview icons */
 
-.network.panel .data-grid .icon {
+.network-sidebar .data-grid .icon {
     content: url(Images/resourcePlainIcon.png);
 }
 
-.network.panel .data-grid.small .icon {
+.network-sidebar .data-grid.small .icon {
     content: url(Images/resourcePlainIconSmall.png);
 }
 
-.network.panel .network-category-scripts .icon {
+.network-sidebar .network-category-scripts .icon {
     content: url(Images/resourceJSIcon.png);
 }
 
-.network.panel .data-grid.small .network-category-scripts .icon {
+.network-sidebar .data-grid.small .network-category-scripts .icon {
     content: url(Images/resourceDocumentIconSmall.png);
 }
 
-.network.panel .network-category-documents .icon {
+.network-sidebar .network-category-documents .icon {
     content: url(Images/resourceDocumentIcon.png);
 }
 
-.network.panel .data-grid.small .network-category-documents .icon {
+.network-sidebar .data-grid.small .network-category-documents .icon {
     content: url(Images/resourceDocumentIconSmall.png);
 }
 
-.network.panel .network-category-stylesheets .icon {
+.network-sidebar .network-category-stylesheets .icon {
     content: url(Images/resourceCSSIcon.png);
 }
 
-.network.panel .data-grid.small .network-category-stylesheets .icon {
+.network-sidebar .data-grid.small .network-category-stylesheets .icon {
     content: url(Images/resourceDocumentIconSmall.png);
 }
 
-.network.panel .network-category-images .icon {
+.network-sidebar .network-category-images .icon {
     position: relative;
     background-image: url(Images/resourcePlainIcon.png);
     background-repeat: no-repeat;
     content: "";
 }
 
-.network.panel .network-category-images .icon {
+.network-sidebar .network-category-images .icon {
     position: relative;
     background-image: url(Images/resourcePlainIcon.png);
     background-repeat: no-repeat;
     content: "";
 }
 
-.network.panel .data-grid.small .network-category-images .icon {
+.network-sidebar .data-grid.small .network-category-images .icon {
     background-image: url(Images/resourcePlainIconSmall.png);
     content: "";
 }
 
-.network.panel .data-grid .icon {
+.network-sidebar .data-grid .icon {
     float: left;
     width: 32px;
     height: 32px;
@@ -161,12 +179,12 @@
     margin-right: 3px;
 }
 
-.network.panel .data-grid.small .icon {
+.network-sidebar .data-grid.small .icon {
     width: 16px;
     height: 16px;
 }
 
-.network.panel .image-network-icon-preview {
+.network-sidebar .image-network-icon-preview {
     position: absolute;
     margin: auto;
     top: 3px;
@@ -179,7 +197,7 @@
     min-height: 1px;
 }
 
-.network.panel .data-grid.small .image-network-icon-preview {
+.network-sidebar .data-grid.small .image-network-icon-preview {
     top: 2px;
     bottom: 1px;
     left: 3px;
@@ -352,7 +370,7 @@
 
 .network-timing-row {
     position: relative;
-    height: 12px;
+    height: 16px;
 }
 
 .network-timing-bar {
@@ -360,10 +378,14 @@
     background-color: red;
     border-left: 1px solid red;
     opacity: 0.4;
+    top: 0;
+    bottom: 0;
 }
 
 .network-timing-bar-title {
     position: absolute;
+    color: black;
+    top: 1px;
 }
 
 .network-dim-cell {
@@ -397,7 +419,7 @@
     z-index: 300;
 }
 
-.network.panel .network-timeline-grid.small .network-event-divider {
+.network-sidebar .network-timeline-grid.small .network-event-divider {
     top: 23px;
 }
 
@@ -409,36 +431,40 @@
     background-color: rgba(0, 0, 255, 0.5);
 }
 
-.network.panel .resources-dividers-label-bar {
+.network-sidebar .resources-dividers {
+    z-index: 0;
+}
+
+.network-sidebar .resources-dividers-label-bar {
     background-color: transparent;
     border: none;
     height: 30px;
     pointer-events: none;
 }
 
-.network.panel .network-timeline-grid.small .resources-dividers-label-bar {
+.network-sidebar .network-timeline-grid.small .resources-dividers-label-bar {
     height: 23px;
 }
 
-.network.panel .resources-divider-label {
+.network-sidebar .resources-divider-label {
     top: 0px;
     margin-top: -4px;
     color: black;
 }
 
-.network.panel .resources-dividers-label-bar .resources-divider {
+.network-sidebar .resources-dividers-label-bar .resources-divider {
     top: 23px;
 }
 
-.network.panel .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
+.network-sidebar .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
     top: 15px;
 }
 
-.network.panel .resources-divider.first .resources-divider-label {
+.network-sidebar .resources-divider.first .resources-divider-label {
     display: none;
 }
 
-.network.panel .resources-dividers-label-bar .resources-divider.first {
+.network-sidebar .resources-dividers-label-bar .resources-divider.first {
     background-color: transparent;
 }
 
@@ -473,10 +499,12 @@
     height: 20px;
     font-size: 11px;
     font-weight: bold;
-    padding-top: 1px;
+    padding-top: 3px;
     padding-left: 10px;
     z-index: 2000;
     white-space: pre;
+    overflow : hidden;
+    text-overflow : ellipsis;
 }
 
 .network-summary-bar-bottom {
@@ -491,14 +519,14 @@
     white-space: pre;
 }
 
-.network.panel .data-grid td.network-summary {
+.network-sidebar .data-grid td.network-summary {
     padding: 0;
 }
 
 /* Viewer */
 
-.network.panel.viewing-resource .data-grid td,
-.network.panel.viewing-resource .data-grid th {
+.network.panel.viewing-resource .network-sidebar .data-grid td,
+.network.panel.viewing-resource .network-sidebar .data-grid th {
     border-right: none;
 }
 
@@ -530,16 +558,47 @@
     left: 0;
 }
 
-.network.panel .data-grid.full-grid-mode .viewer-column {
+#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: 8px;
+    left: 5px;
+    z-index: 10;
     display: none;
 }
 
-.network.panel .data-grid.brief-grid-mode .viewer-column,
-.network.panel .data-grid.brief-grid-mode .method-column,
-.network.panel .data-grid.brief-grid-mode .status-column,
-.network.panel .data-grid.brief-grid-mode .type-column,
-.network.panel .data-grid.brief-grid-mode .size-column,
-.network.panel .data-grid.brief-grid-mode .time-column {
+#network-views.small #network-close-button  {
+    top: 4px;
+}
+
+#network-close-button:hover {
+    background-position: 14px 0;
+}
+
+#network-close-button:active {
+    background-position: 28px 0;
+}
+
+.network.panel.viewing-resource #network-close-button  {
+    display: block;
+}
+
+
+.network-sidebar .data-grid.full-grid-mode .viewer-column {
+    display: none;
+}
+
+.network-sidebar .data-grid.brief-grid-mode .viewer-column,
+.network-sidebar .data-grid.brief-grid-mode .method-column,
+.network-sidebar .data-grid.brief-grid-mode .status-column,
+.network-sidebar .data-grid.brief-grid-mode .type-column,
+.network-sidebar .data-grid.brief-grid-mode .size-column,
+.network-sidebar .data-grid.brief-grid-mode .time-column {
     display: none;
 }
 
@@ -547,12 +606,12 @@
     display: none;
 }
 
-.network.panel .data-grid.viewing-resource-mode .method-column,
-.network.panel .data-grid.viewing-resource-mode .status-column,
-.network.panel .data-grid.viewing-resource-mode .type-column,
-.network.panel .data-grid.viewing-resource-mode .size-column,
-.network.panel .data-grid.viewing-resource-mode .time-column,
-.network.panel .data-grid.viewing-resource-mode .timeline-column {
+.network-sidebar .data-grid.viewing-resource-mode .method-column,
+.network-sidebar .data-grid.viewing-resource-mode .status-column,
+.network-sidebar .data-grid.viewing-resource-mode .type-column,
+.network-sidebar .data-grid.viewing-resource-mode .size-column,
+.network-sidebar .data-grid.viewing-resource-mode .time-column,
+.network-sidebar .data-grid.viewing-resource-mode .timeline-column {
     display: none;
 }
 
@@ -568,7 +627,7 @@
     display: none;
 }
 
-.network.panel.viewing-resource .data-grid-resizer {
+.network.panel.viewing-resource .network-sidebar .data-grid-resizer {
     display: none;
 }
 
@@ -577,20 +636,183 @@
     padding-top: 5px;
 }
 
-.network.panel .resource-view.headers-visible .resource-view-content {
-    top: 23px;
-}
-
 .network.panel:not(.viewing-resource) .data-grid tr.selected {
     background-color: transparent;
     color: black;
 }
 
-.network.panel .resource-view .tabbed-pane-header {
+#network-views .network-item-view .tabbed-pane-header {
+    height: 31px;
+    padding-top: 8px;
+    padding-left: 25px;
+    white-space: nowrap;
+}
+
+#network-views.small .network-item-view .tabbed-pane-header {
     height: 23px;
-    padding-top: 3px;
+    padding-top: 0;
 }
 
 .network.panel.viewing-resource .data-grid .data-container {
     padding-right: 0;
 }
+
+.network-item-view {
+    display: none;
+    position: absolute;
+    background: white;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.network-item-view.visible {
+    display: -webkit-box;
+}
+
+.network-item-view .tabbed-pane-header {
+    height: 20px;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
+    border-bottom: 1px solid rgb(163, 163, 163);
+}
+
+.network-item-view .scope-bar li {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.resource-headers-view {
+    display: none;
+    padding: 6px;
+    -webkit-user-select: text;    
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+}
+
+.resource-headers-view.visible {
+    display: block;
+}
+
+.resource-headers-view .outline-disclosure .parent {
+    -webkit-user-select: none;
+    font-weight: bold;
+}
+
+.resource-headers-view .outline-disclosure .children li {
+    white-space: nowrap;
+}
+
+.resource-headers-view .outline-disclosure li.expanded .header-count {
+    display: none;
+}
+
+.resource-headers-view .outline-disclosure .header-name {
+    color: rgb(33%, 33%, 33%);
+    display: inline-block;
+    margin-right: 0.5em;
+    font-weight: bold;
+    vertical-align: top;
+    white-space: pre-wrap;
+}
+
+.resource-headers-view .outline-disclosure .header-value {
+    display: inline;
+    margin-right: 100px;
+    white-space: pre-wrap;
+    word-break: break-all;
+    margin-top: 1px;
+}
+
+.resource-headers-view .outline-disclosure .raw-form-data {
+    white-space: pre-wrap;
+}
+
+.resource-cookies-view {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    overflow: auto;
+    padding: 12px;
+    height: 100%;
+}
+
+.resource-cookies-view.visible {
+    display: block;
+}
+
+.resource-cookies-view .data-grid {
+    height: 100%;
+}
+
+.resource-cookies-view .data-grid .row-group {
+    font-weight: bold;
+    font-size: 11px;
+}
+
+.resource-timing-view {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    padding: 6px;
+    font-weight: bold;
+    font-size: 11px;
+    color: rgb(30%, 30%, 30%);
+}
+
+.resource-timing-view table {
+    border-spacing: 21px 0;
+}
+
+.resource-timing-view .network-timing-bar {
+    opacity: 1;
+}
+
+.resource-timing-view .network-timing-bar.proxy {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(239, 228, 176)), to(rgb(139, 128, 76)));
+    border-left: 1px solid rgb(139, 128, 76);
+}
+
+.resource-timing-view .network-timing-bar.dns {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(153, 208, 216)), to(rgb(81, 174, 189)));
+    border-left: 1px solid rgb(81, 174, 189);
+}
+
+.resource-timing-view .network-timing-bar.connecting {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(203, 232, 145)), to(rgb(160, 214, 56)));
+    border-left: 1px solid rgb(160, 214, 56);
+}
+
+.resource-timing-view .network-timing-bar.ssl {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(21, 232, 145)), to(rgb(216, 149, 132)));
+    border-left: 1px solid rgb(216, 149, 132);
+}
+
+.resource-timing-view .network-timing-bar.sending {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(232, 192, 182)), to(rgb(216, 147, 130)));
+    border-left: 1px solid rgb(216, 147, 130);
+}
+
+.resource-timing-view .network-timing-bar.waiting {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(188, 179, 208)), to(rgb(141, 125, 175)));
+    border-left: 1px solid rgb(141, 125, 175);
+}
+
+.resource-timing-view .network-timing-bar.receiving {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(214, 214, 214)), to(rgb(182, 182, 182)));
+    border-left: 1px solid rgb(182, 182, 182);
+}
+
+.resource-timing-view.visible {
+    display: block;
+}

front-end/node/InspectorBackendStub.js

@@ -90,6 +90,8 @@ WebInspector.InspectorBackendStub = function()
     this._ignore('{"seq": 0, "domain": "Controller", "command": "getDOMStorageEntries", "arguments": {"storageId": "number"}}');
     this._ignore('{"seq": 0, "domain": "Controller", "command": "setDOMStorageItem", "arguments": {"storageId": "number","key": "string","value": "string"}}');
     this._ignore('{"seq": 0, "domain": "Controller", "command": "removeDOMStorageItem", "arguments": {"storageId": "number","key": "string"}}');
+    this._ignore('{"seq": 0, "domain": "Controller", "command": "cachedResources"}');
+    this._ignore('{"seq": 0, "domain": "Controller", "command": "setConsoleMessagesEnabled"}');
 }
 
 WebInspector.InspectorBackendStub.prototype = {

front-end/node/InspectorFrontendHostStub.js

@@ -107,7 +107,7 @@ WebInspector.InspectorFrontendHostStub.prototype = {
 
     hiddenPanels: function()
     {
-        return "elements,resources,timeline,profiles,storage,audits";
+        return "elements,resources,timeline,profiles,network,audits";
     },
 
     inspectedURLChanged: function(url)

front-end/textViewer.css

@@ -25,8 +25,6 @@
     margin: 6px 25px;
     padding: 0 7px 1px;
     z-index:20;
-    max-width: 80%;
-    
 }
 
 .webkit-html-warning-message {
@@ -66,8 +64,8 @@
     vertical-align: top;
     word-break: normal;
     -webkit-user-select: none;
-	padding-right: 4px;
-	padding-left: 6px;
+    padding-right: 4px;
+    padding-left: 6px;
 }
 
 .webkit-line-number-outer {
@@ -143,6 +141,19 @@
     outline: 1px solid rgb(64, 115, 244);
 }
 
+.diff-container .webkit-added-line .webkit-line-content {
+    background-color: rgb(220, 255, 220);
+}
+
+.diff-container .webkit-removed-line .webkit-line-content {
+    background-color: rgb(255, 220, 220);
+    text-decoration: line-through;
+}
+
+.diff-container .webkit-changed-line .webkit-line-content {
+    background-color: rgb(220, 220, 255);
+}
+
 .webkit-search-result {
     -webkit-border-radius: 4px;
     padding: 2px 2px 2px 3px;

front-end/treeoutline.js

@@ -485,6 +485,15 @@ TreeElement.prototype = {
         this._setListItemNodeContent();
     },
 
+    get titleHTML() {
+        return this._titleHTML;
+    },
+
+    set titleHTML(x) {
+        this._titleHTML = x;
+        this._setListItemNodeContent();
+    },
+
     get tooltip() {
         return this._tooltip;
     },
@@ -553,8 +562,13 @@ TreeElement.prototype = {
     {
         if (!this._listItemNode)
             return;
-        if (!this._title || typeof this._title === "string")
-            this._listItemNode.innerHTML = this._title;
+
+        if (!this._titleHTML && !this._title)
+            this._listItemNode.removeChildren();
+        else if (typeof this._titleHTML === "string")
+            this._listItemNode.innerHTML = this._titleHTML;
+        else if (typeof this._title === "string")
+            this._listItemNode.textContent = this._title;
         else {
             this._listItemNode.removeChildren();
             if (this._title.parentNode)

front-end/utilities.js

@@ -24,21 +24,11 @@
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * Contains diff method based on Javascript Diff Algorithm By John Resig
+ * http://ejohn.org/files/jsdiff.js (released under the MIT license).
  */
 
-Object.properties = function(obj)
-{
-    var properties = [];
-    for (var prop in obj)
-        properties.push(prop);
-    return properties;
-}
-
-Object.sortedProperties = function(obj, sortFunc)
-{
-    return Object.properties(obj).sort(sortFunc);
-}
-
 Function.prototype.bind = function(thisObject)
 {
     var func = this;
@@ -393,6 +383,26 @@ String.prototype.hasSubstring = function(string, caseInsensitive)
     return this.match(new RegExp(string.escapeForRegExp(), "i"));
 }
 
+String.prototype.asParsedURL = function()
+{
+    // RegExp groups:
+    // 1 - scheme
+    // 2 - hostname
+    // 3 - ?port
+    // 4 - ?path
+    // 5 - ?fragment
+    var match = this.match(/^([^:]+):\/\/([^\/:]*)(?::([\d]+))?(?:(\/[^#]*)(?:#(.*))?)?$/i);
+    if (!match)
+        return null;
+    var result = {};
+    result.scheme = match[1].toLowerCase();
+    result.host = match[2];
+    result.port = match[3];
+    result.path = match[4] || "/";
+    result.fragment = match[5];
+    return result;
+}
+
 String.prototype.escapeCharacters = function(chars)
 {
     var foundChar = false;
@@ -724,6 +734,51 @@ Array.prototype.keySet = function()
     return keys;
 }
 
+Array.diff = function(left, right)
+{
+    var o = left;
+    var n = right;
+
+    var ns = {};
+    var os = {};
+
+    for (var i = 0; i < n.length; i++) {
+        if (ns[n[i]] == null)
+            ns[n[i]] = { rows: [], o: null };
+        ns[n[i]].rows.push(i);
+    }
+
+    for (var i = 0; i < o.length; i++) {
+        if (os[o[i]] == null)
+            os[o[i]] = { rows: [], n: null };
+        os[o[i]].rows.push(i);
+    }
+
+    for (var i in ns) {
+        if (ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1) {
+            n[ns[i].rows[0]] = { text: n[ns[i].rows[0]], row: os[i].rows[0] };
+            o[os[i].rows[0]] = { text: o[os[i].rows[0]], row: ns[i].rows[0] };
+        }
+    }
+
+    for (var i = 0; i < n.length - 1; i++) {
+        if (n[i].text != null && n[i + 1].text == null && n[i].row + 1 < o.length && o[n[i].row + 1].text == null && n[i + 1] == o[n[i].row + 1]) {
+            n[i + 1] = { text: n[i + 1], row: n[i].row + 1 };
+            o[n[i].row + 1] = { text: o[n[i].row + 1], row: i + 1 };
+        }
+    }
+
+    for (var i = n.length - 1; i > 0; i--) {
+        if (n[i].text != null && n[i - 1].text == null && n[i].row > 0 && o[n[i].row - 1].text == null && 
+            n[i - 1] == o[n[i].row - 1]) {
+            n[i - 1] = { text: n[i - 1], row: n[i].row - 1 };
+            o[n[i].row - 1] = { text: o[n[i].row - 1], row: i - 1 };
+        }
+    }
+
+    return { left: o, right: n };
+}
+
 Array.convert = function(list)
 {
     // Cast array-like object to an array.
@@ -990,6 +1045,6 @@ function offerFileForDownload(contents)
     var builder = new BlobBuilder();
     builder.append(contents);
     var blob = builder.getBlob("application/octet-stream");
-    var url = window.createBlobURL(blob);
+    var url = window.createObjectURL(blob);
     window.open(url);
 }

lib/session.js

@@ -105,7 +105,7 @@ exports.create = function (conn, debuggerPort, config) {
             return f;
           });
       }
-      return [{type:'program', sourceID:'internal', line: 0, id: 0, worldId: 1}];
+      return [{type:'program', sourceID:'internal', line: 0, id: 0, worldId: 1, scopeChain:[]}];
   }
 
   function evaluate(expr, frame, andThen) {
@@ -152,10 +152,11 @@ exports.create = function (conn, debuggerPort, config) {
   
   function parsedScripts(msg) {
     var scripts = msg.body.map(function(s) {
+      var source = FUNC_WRAP.test(s.source) ? FUNC_WRAP.exec(s.source)[1] : s.source;
       return {
         sourceID: s.id.toString(),
         url: s.name,
-        data: s.source,
+        data: source,
         firstLine: s.lineOffset,
         scriptWorldType: 0,
         path: s.name.split('/')