diff options
Diffstat (limited to 'WebCore/inspector/front-end')
38 files changed, 1505 insertions, 2770 deletions
diff --git a/WebCore/inspector/front-end/AuditsPanel.js b/WebCore/inspector/front-end/AuditsPanel.js index b4eb202..096f8ce 100644 --- a/WebCore/inspector/front-end/AuditsPanel.js +++ b/WebCore/inspector/front-end/AuditsPanel.js @@ -203,20 +203,15 @@ WebInspector.AuditsPanel.prototype = { _reloadResources: function(callback) { - this._resourceTrackingCallback = callback; - - if (WebInspector.panels.resources && !WebInspector.panels.resources.resourceTrackingEnabled) { - WebInspector.panels.resources.toggleResourceTracking(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(); } }, diff --git a/WebCore/inspector/front-end/BreakpointManager.js b/WebCore/inspector/front-end/BreakpointManager.js index 77ba89d..221a777 100644 --- a/WebCore/inspector/front-end/BreakpointManager.js +++ b/WebCore/inspector/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,6 +214,18 @@ 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) @@ -242,31 +253,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 = {}; + function didPushNodeByPathToFrontend(path, nodeId) + { + pathToNodeId[path] = nodeId; + pendingCalls -= 1; + if (pendingCalls) + return; + 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 breakpointsToRestore = {}; - for (var frontendId in domBreakpoints) { - var breakpoint = domBreakpoints[frontendId]; - var path = breakpoint._path; - if (!path) + var breakpoints = this._persistentBreakpoints(); + var pathToNodeId = {}; + var pendingCalls = 0; + for (var i = 0; i < breakpoints.length; ++i) { + if (breakpoints[i].type !== "DOM") continue; - if (!breakpointsToRestore[path]) { - breakpointsToRestore[path] = []; - InspectorBackend.pushNodeByPathToFrontend(path, restoreBreakpointsForNode.bind(this, breakpointsToRestore[path])); - } - breakpointsToRestore[path].push(breakpoint); + var path = breakpoints[i].condition.path; + if (path in pathToNodeId) + continue; + pathToNodeId[path] = 0; + pendingCalls += 1; + InspectorBackend.pushNodeByPathToFrontend(path, didPushNodeByPathToFrontend.bind(this, path)); } + }, - function restoreBreakpointsForNode(breakpoints, nodeId) - { - if (!nodeId) - return; - for (var i = 0; i < breakpoints.length; ++i) - this.createDOMBreakpoint(nodeId, breakpoints[i]._domEventType, !breakpoints[i].enabled); + _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; } } @@ -307,7 +347,7 @@ WebInspector.Breakpoint.prototype = { set sourceText(text) { this._sourceText = text; - this.dispatchEventToListeners("text-changed"); + this.dispatchEventToListeners("label-changed"); }, get id() @@ -332,6 +372,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 +386,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 +462,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 +479,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 +517,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 +531,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 +564,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 +576,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 +586,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 +599,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 }; } } diff --git a/WebCore/inspector/front-end/BreakpointsSidebarPane.js b/WebCore/inspector/front-end/BreakpointsSidebarPane.js index 2151137..f010330 100644 --- a/WebCore/inspector/front-end/BreakpointsSidebarPane.js +++ b/WebCore/inspector/front-end/BreakpointsSidebarPane.js @@ -47,46 +47,56 @@ 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); + }, + + _contextMenuEventFired: function(breakpointItem, event) + { + var contextMenu = new WebInspector.ContextMenu(); + contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), breakpointItem.remove.bind(breakpointItem)); + contextMenu.show(event); + }, - if (this.emptyElement.parentElement) { - this.bodyElement.removeChild(this.emptyElement); - this.bodyElement.appendChild(this.listElement); + _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); } }, - _breakpointRemoved: function(event) + _removeListElement: function(element) { - this.listElement.removeChild(event.target.element()); + this.listElement.removeChild(element); if (!this.listElement.firstChild) { this.bodyElement.removeChild(this.listElement); this.bodyElement.appendChild(this.emptyElement); } - }, - - _contextMenuEventFired: function(breakpointItem, event) - { - var contextMenu = new WebInspector.ContextMenu(); - contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), breakpointItem.remove.bind(breakpointItem)); - contextMenu.show(event); } } @@ -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,15 +197,14 @@ WebInspector.BreakpointItem.prototype = { return this._breakpoint.compareTo(other._breakpoint); }, - remove: function() + populateEditElement: function(element) { - this._breakpoint.remove(); + this._breakpoint.populateEditElement(element); }, - _breakpointClicked: function(event) + remove: function() { - if ("click" in this._breakpoint) - this._breakpoint.click(); + this._breakpoint.remove(); }, _checkboxClicked: function(event) @@ -191,45 +223,28 @@ 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"); - } -} - -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() + _labelChanged: function(event) { - WebInspector.panels.scripts.showSourceLine(this._breakpoint.url, this._breakpoint.line); + this._element.removeChild(this._labelElement); + this._createLabelElement(); }, - _textChanged: function() + _createLabelElement: function() { - var sourceTextElement = this._element.firstChild.nextSibling.nextSibling; - sourceTextElement.textContent = this._breakpoint.sourceText; + this._labelElement = document.createElement("span"); + this._breakpoint.populateLabelElement(this._labelElement); + this._element.appendChild(this._labelElement); } } -WebInspector.JSBreakpointItem.prototype.__proto__ = WebInspector.BreakpointItem.prototype; +WebInspector.BreakpointItem.prototype.__proto__ = WebInspector.Object.prototype; WebInspector.EventListenerBreakpointsSidebarPane = function() { @@ -240,97 +255,116 @@ 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("Mouse", "listener", ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "mousewheel"]); + this._createCategory("Keyboard", "listener", ["keydown", "keypress", "keyup"]); + this._createCategory("HTML frame/object", "listener", ["load", "error", "resize", "scroll"]); + 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"] } - }; - - for (var category in categories) { - var categoryTreeElement = new TreeElement(WebInspector.UIString(category)); - this.categoriesTreeOutline.appendChild(categoryTreeElement); - categoryTreeElement.listItemElement.addStyleClass("event-category"); - categoryTreeElement.selectable = true; - - var categoryItem = {}; - categoryItem.checkbox = this._createCheckbox(categoryTreeElement, this._categoryCheckboxClicked.bind(this, categoryItem)); - categoryItem.children = {}; - - var categoryType = categories[category].type; - var eventNames = categories[category].eventNames; - for (var i = 0; i < eventNames.length; ++i) { - var eventName = categoryType + ":" + eventNames[i]; - - var breakpoint = WebInspector.breakpointManager.createEventListenerBreakpoint(eventName, true); - if (!breakpoint) - continue; - - 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; - } + var categoryItem = {}; + categoryItem.element = new TreeElement(WebInspector.UIString(name)); + this.categoriesTreeOutline.appendChild(categoryItem.element); + categoryItem.element.listItemElement.addStyleClass("event-category"); + categoryItem.element.selectable = true; + + categoryItem.checkbox = this._createCheckbox(categoryItem.element); + categoryItem.checkbox.addEventListener("click", this._categoryCheckboxClicked.bind(this, categoryItem), true); + + categoryItem.children = {}; + for (var i = 0; i < eventNames.length; ++i) { + var eventName = type + ":" + eventNames[i]; + + var breakpointItem = {}; + var title = WebInspector.EventListenerBreakpoint.eventNameForUI(eventName); + breakpointItem.element = new TreeElement(title); + categoryItem.element.appendChild(breakpointItem.element); + breakpointItem.element.listItemElement.addStyleClass("source-code"); + breakpointItem.element.selectable = true; + + breakpointItem.checkbox = this._createCheckbox(breakpointItem.element); + breakpointItem.checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, breakpointItem), true); + breakpointItem.parent = categoryItem; + breakpointItem.eventName = eventName; + + 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; + + 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); + }, - eventNameItem.checkbox.checked = eventNameItem.breakpoint.enabled; - this._updateCategoryCheckbox(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"); }, - _updateCategoryCheckbox: function(categoryItem) + _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 +375,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); + } } } diff --git a/WebCore/inspector/front-end/CSSStyleModel.js b/WebCore/inspector/front-end/CSSStyleModel.js index 702c923..542a3b3 100644 --- a/WebCore/inspector/front-end/CSSStyleModel.js +++ b/WebCore/inspector/front-end/CSSStyleModel.js @@ -119,7 +119,7 @@ WebInspector.CSSStyleModel.prototype = { if (!newRulePayload) failureCallback(); else - successCallback(WebInspector.CSSStyleDeclaration.parseRule(newRulePayload), doesAffectSelectedNode); + successCallback(WebInspector.CSSRule.parsePayload(newRulePayload), doesAffectSelectedNode); } InspectorBackend.setRuleSelector(ruleId, newContent, nodeId, callback); @@ -133,7 +133,7 @@ WebInspector.CSSStyleModel.prototype = { // Invalid syntax for a selector failureCallback(); } else { - var styleRule = WebInspector.CSSStyleDeclaration.parseRule(rule); + var styleRule = WebInspector.CSSRule.parsePayload(rule); styleRule.rule = rule; successCallback(styleRule, doesAffectSelectedNode); } diff --git a/WebCore/inspector/front-end/ConsoleView.js b/WebCore/inspector/front-end/ConsoleView.js index deca21c..737b84f 100644 --- a/WebCore/inspector/front-end/ConsoleView.js +++ b/WebCore/inspector/front-end/ConsoleView.js @@ -48,7 +48,7 @@ WebInspector.ConsoleView = function(drawer) this.promptElement.className = "source-code"; this.promptElement.addEventListener("keydown", this._promptKeyDown.bind(this), true); this.prompt = new WebInspector.TextPrompt(this.promptElement, this.completions.bind(this), ExpressionStopCharacters + "."); - this.prompt.history = WebInspector.applicationSettings.consoleHistory; + this.prompt.history = WebInspector.settings.consoleHistory; this.topGroup = new WebInspector.ConsoleGroup(null, 0); this.messagesElement.insertBefore(this.topGroup.element, this.promptElement); @@ -218,18 +218,7 @@ WebInspector.ConsoleView.prototype = { { if (msg instanceof WebInspector.ConsoleMessage && !(msg instanceof WebInspector.ConsoleCommandResult)) { this._incrementErrorWarningCount(msg); - - // Add message to the resource panel - if (!Preferences.networkPanelEnabled) { - var resource = WebInspector.resourceForURL(msg.url); - if (resource) { - msg.resource = resource; - if (WebInspector.panels.resources) - WebInspector.panels.resources.addMessageToResource(msg.resource, msg); - } - } else - WebInspector.resourceManager.addConsoleMessage(msg); - + WebInspector.resourceManager.addConsoleMessage(msg); this.commandSincePreviousMessage = false; this.previousMessage = msg; } else if (msg instanceof WebInspector.ConsoleCommand) { @@ -300,10 +289,7 @@ WebInspector.ConsoleView.prototype = { clearMessages: function() { - if (WebInspector.panels.resources) - WebInspector.panels.resources.clearMessages(); - if (WebInspector.resourceManager) - WebInspector.resourceManager.clearConsoleMessages(); + WebInspector.resourceManager.clearConsoleMessages(); this.messages = []; @@ -522,7 +508,7 @@ WebInspector.ConsoleView.prototype = { _enterKeyPressed: function(event) { - if (event.altKey || event.ctrlKey) + if (event.altKey || event.ctrlKey || event.shiftKey) return; event.preventDefault(); @@ -544,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)); } diff --git a/WebCore/inspector/front-end/DataGrid.js b/WebCore/inspector/front-end/DataGrid.js index bc429d9..902062c 100644 --- a/WebCore/inspector/front-end/DataGrid.js +++ b/WebCore/inspector/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"); @@ -485,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; diff --git a/WebCore/inspector/front-end/ElementsTreeOutline.js b/WebCore/inspector/front-end/ElementsTreeOutline.js index 1d546c2..4404051 100644 --- a/WebCore/inspector/front-end/ElementsTreeOutline.js +++ b/WebCore/inspector/front-end/ElementsTreeOutline.js @@ -758,13 +758,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); diff --git a/WebCore/inspector/front-end/EventListenersSidebarPane.js b/WebCore/inspector/front-end/EventListenersSidebarPane.js index 3354191..bc8bb12 100644 --- a/WebCore/inspector/front-end/EventListenersSidebarPane.js +++ b/WebCore/inspector/front-end/EventListenersSidebarPane.js @@ -46,7 +46,7 @@ WebInspector.EventListenersSidebarPane = function() option.label = WebInspector.UIString("Selected Node Only"); this.settingsSelectElement.appendChild(option); - var filter = WebInspector.applicationSettings.eventListenersFilter; + var filter = WebInspector.settings.eventListenersFilter; if (filter === "all") this.settingsSelectElement[0].selected = true; else if (filter === "selected") @@ -107,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(); @@ -137,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]; @@ -151,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); } }, @@ -178,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" */ } diff --git a/WebCore/inspector/front-end/ExtensionAPI.js b/WebCore/inspector/front-end/ExtensionAPI.js index 5d090b0..7d6d76c 100644 --- a/WebCore/inspector/front-end/ExtensionAPI.js +++ b/WebCore/inspector/front-end/ExtensionAPI.js @@ -197,6 +197,19 @@ PanelImpl.prototype = { callback(new ExtensionSidebarPane(id)); } extensionServer.sendRequest({ command: "createSidebarPane", panel: this._id, id: id, title: title, url: expandURL(url) }, callback && callbackWrapper); + }, + + createWatchExpressionSidebarPane: function(title, callback) + { + var id = "watch-sidebar-" + extensionServer.nextObjectId(); + function callbackWrapper(result) + { + if (result.isError) + callback(result); + else + callback(new WatchExpressionSidebarPane(id)); + } + extensionServer.sendRequest({ command: "createWatchExpressionSidebarPane", panel: this._id, id: id, title: title }, callback && callbackWrapper); } } @@ -204,6 +217,7 @@ function Panel(id) { var impl = new PanelImpl(id); this.createSidebarPane = bind(impl.createSidebarPane, impl); + this.createWatchExpressionSidebarPane = bind(impl.createWatchExpressionSidebarPane, impl); this.onSelectionChanged = new EventSink("panel-objectSelected-" + id); } @@ -235,13 +249,40 @@ ExtensionSidebarPaneImpl.prototype = { } } -function ExtensionSidebarPane(id) +function ExtensionSidebarPane(id, impl) { - var impl = new ExtensionSidebarPaneImpl(id); + if (!impl) + impl = new ExtensionSidebarPaneImpl(id); this.setHeight = bind(impl.setHeight, impl); this.setExpanded = bind(impl.setExpanded, impl); } +function WatchExpressionSidebarPaneImpl(id) +{ + ExtensionSidebarPaneImpl.call(this, 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 }); + } +} + +function WatchExpressionSidebarPane(id) +{ + var impl = new WatchExpressionSidebarPaneImpl(id); + ExtensionSidebarPane.call(this, id, impl); + this.setExpression = bind(impl.setExpression, impl); + this.setObject = bind(impl.setObject, impl); + this.onUpdated = new EventSink("watch-sidebar-updated-" + id); +} + function Audits() { } diff --git a/WebCore/inspector/front-end/ExtensionPanel.js b/WebCore/inspector/front-end/ExtensionPanel.js index ba5fa8e..4b42e68 100644 --- a/WebCore/inspector/front-end/ExtensionPanel.js +++ b/WebCore/inspector/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; diff --git a/WebCore/inspector/front-end/ExtensionServer.js b/WebCore/inspector/front-end/ExtensionServer.js index 5e593f7..6ffa33a 100644 --- a/WebCore/inspector/front-end/ExtensionServer.js +++ b/WebCore/inspector/front-end/ExtensionServer.js @@ -42,10 +42,12 @@ WebInspector.ExtensionServer = function() this._registerHandler("getPageTimings", this._onGetPageTimings.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("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("setWatchSidebarContent", this._onSetWatchSidebarContent.bind(this)); this._registerHandler("addAuditCategory", this._onAddAuditCategory.bind(this)); this._registerHandler("addAuditResult", this._onAddAuditResult.bind(this)); @@ -90,6 +92,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; @@ -161,7 +168,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 +191,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) @@ -205,6 +227,17 @@ WebInspector.ExtensionServer.prototype = { sidebar.collapse(); }, + _onSetWatchSidebarContent: function(message) + { + var sidebar = this._clientObjects[message.id]; + if (!sidebar) + return this._status.E_NOTFOUND(message.id); + if (message.evaluateOnPage) + sidebar.setExpression(message.expression, message.rootTitle); + else + sidebar.setObject(message.expression, message.rootTitle); + }, + _onLog: function(message) { WebInspector.log(message.message); @@ -243,13 +276,9 @@ WebInspector.ExtensionServer.prototype = { resource = WebInspector.networkResources[id] || WebInspector.resourceForURL(id); if (!resource) return this._status.E_NOTFOUND(typeof id + ": " + id); - if (Preferences.networkPanelEnabled) { - WebInspector.panels.storage.showResource(resource, message.line); - WebInspector.showPanel("storage"); - } else { - WebInspector.panels.resources.showResource(resource, message.line); - WebInspector.showPanel("resources"); - } + + WebInspector.panels.storage.showResource(resource, message.line); + WebInspector.showPanel("storage"); }, _dispatchCallback: function(requestId, port, result) @@ -303,7 +332,7 @@ WebInspector.ExtensionServer.prototype = { if (!resource) response.push(this._status.E_NOTFOUND(id)); else - resource.getContent(onContentAvailable.bind(this, id)); + resource.requestContent(onContentAvailable.bind(this, id)); } if (response.length === ids.length) this._dispatchCallback(message.requestId, port, response); diff --git a/WebCore/inspector/front-end/FileSystemView.js b/WebCore/inspector/front-end/FileSystemView.js new file mode 100644 index 0000000..0c6636b --- /dev/null +++ b/WebCore/inspector/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.selectTabById("persistent"); + }, + + selectTemporaryFileSystemTab: function() + { + this._tabbedPane.selectTabById("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; diff --git a/WebCore/inspector/front-end/ImageView.js b/WebCore/inspector/front-end/ImageView.js index 7cff056..f70fad6 100644 --- a/WebCore/inspector/front-end/ImageView.js +++ b/WebCore/inspector/front-end/ImageView.js @@ -47,15 +47,9 @@ WebInspector.ImageView.prototype = { this._container.className = "image"; this.contentElement.appendChild(this._container); - this.imagePreviewElement = document.createElement("img"); - this.imagePreviewElement.addStyleClass("resource-image-view"); - this._container.appendChild(this.imagePreviewElement); - - function onResourceContent(element, content) - { - this.imagePreviewElement.setAttribute("src", this.resource.contentURL); - } - this.resource.getContent(onResourceContent.bind(this)); + var imagePreviewElement = document.createElement("img"); + imagePreviewElement.addStyleClass("resource-image-view"); + this._container.appendChild(imagePreviewElement); this._container = document.createElement("div"); this._container.className = "info"; @@ -69,18 +63,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; } } diff --git a/WebCore/inspector/front-end/Images/grayConnectorPoint.png b/WebCore/inspector/front-end/Images/grayConnectorPoint.png Binary files differdeleted file mode 100644 index fddc7ea..0000000 --- a/WebCore/inspector/front-end/Images/grayConnectorPoint.png +++ /dev/null diff --git a/WebCore/inspector/front-end/Images/resourcesSilhouette.png b/WebCore/inspector/front-end/Images/resourcesSilhouette.png Binary files differdeleted file mode 100644 index 9c8bb53..0000000 --- a/WebCore/inspector/front-end/Images/resourcesSilhouette.png +++ /dev/null diff --git a/WebCore/inspector/front-end/Images/whiteConnectorPoint.png b/WebCore/inspector/front-end/Images/whiteConnectorPoint.png Binary files differdeleted file mode 100644 index c8fb1cf..0000000 --- a/WebCore/inspector/front-end/Images/whiteConnectorPoint.png +++ /dev/null diff --git a/WebCore/inspector/front-end/InjectedScript.js b/WebCore/inspector/front-end/InjectedScript.js index 2d60f69..fff6680 100644 --- a/WebCore/inspector/front-end/InjectedScript.js +++ b/WebCore/inspector/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]; diff --git a/WebCore/inspector/front-end/NetworkPanel.js b/WebCore/inspector/front-end/NetworkPanel.js index c666e54..71433af 100644 --- a/WebCore/inspector/front-end/NetworkPanel.js +++ b/WebCore/inspector/front-end/NetworkPanel.js @@ -37,6 +37,7 @@ WebInspector.NetworkPanel = function() this._resources = []; this._resourcesById = {}; + this._resourcesByURL = {}; this._lastIdentifier = 0; this._staleResources = []; this._resourceGridNodes = {}; @@ -55,10 +56,10 @@ WebInspector.NetworkPanel = function() this._viewsContainerElement.className = "hidden"; this.element.appendChild(this._viewsContainerElement); - var closeButtonElement = document.createElement("button"); - closeButtonElement.className = "network-close-button"; - closeButtonElement.addEventListener("click", this._toggleGridMode.bind(this), false); - this._viewsContainerElement.appendChild(closeButtonElement); + this._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(); @@ -67,6 +68,9 @@ 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); this.calculator = new WebInspector.NetworkTransferTimeCalculator(); @@ -83,7 +87,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) @@ -103,11 +107,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) @@ -126,28 +132,26 @@ 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) { + 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"); + 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(); @@ -193,7 +197,7 @@ WebInspector.NetworkPanel.prototype = { 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"; @@ -427,9 +431,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) @@ -604,20 +606,16 @@ 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._largerResourcesButton = new WebInspector.StatusBarButton(WebInspector.UIString("Use small resource rows."), "network-larger-resources-status-bar-item"); - this._largerResourcesButton.toggled = WebInspector.applicationSettings.resourcesLargeRows; - if (!WebInspector.applicationSettings.resourcesLargeRows) - this._setLargerResources(WebInspector.applicationSettings.resourcesLargeRows); + this._largerResourcesButton.toggled = WebInspector.settings.resourcesLargeRows; this._largerResourcesButton.addEventListener("click", this._toggleLargerResources.bind(this), false); }, @@ -713,8 +711,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) { @@ -745,6 +743,20 @@ 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() @@ -760,6 +772,7 @@ WebInspector.NetworkPanel.prototype = { this._resources = []; this._resourcesById = {}; + this._resourcesByURL = {}; this._staleResources = []; this._resourceGridNodes = {}; @@ -772,6 +785,7 @@ WebInspector.NetworkPanel.prototype = { this._mainResourceDOMContentTime = -1; this._viewsContainerElement.removeChildren(); + this._viewsContainerElement.appendChild(this._closeButtonElement); this._resetSummaryBar(); }, @@ -780,17 +794,23 @@ WebInspector.NetworkPanel.prototype = { return this._resourcesById; }, - addResource: function(resource) + refreshResource: function(resource) { - this._resources.push(resource); if (!resource.identifier) resource.identifier = "network:" + this._lastIdentifier++; - this._resourcesById[resource.identifier] = resource; - this.refreshResource(resource); - }, - refreshResource: function(resource) - { + 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(); @@ -819,11 +839,12 @@ WebInspector.NetworkPanel.prototype = { canShowSourceLine: function(url, line) { - return false; + return !!this._resourcesByURL[url]; }, showSourceLine: function(url, line) { + this._showResource(this._resourcesByURL[url], line); }, _showResource: function(resource, line) @@ -870,8 +891,8 @@ WebInspector.NetworkPanel.prototype = { _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) @@ -888,6 +909,7 @@ WebInspector.NetworkPanel.prototype = { this._timelineGrid.element.removeStyleClass("small"); this._viewsContainerElement.removeStyleClass("small"); } + this._positionSummaryBar(); }, _getPopoverAnchor: function(element) @@ -996,6 +1018,7 @@ WebInspector.NetworkPanel.prototype = { this._viewsContainerElement.addStyleClass("hidden"); this.sidebarElement.style.right = 0; this.sidebarElement.style.removeProperty("width"); + this._summaryBarElement.style.removeProperty("width"); } if (this._briefGrid) { @@ -1467,7 +1490,7 @@ WebInspector.NetworkDataGridNode.prototype = { previewImage.src = this._resource.contentURL; } if (Preferences.useDataURLForResourceImageIcons) - this._resource.getContent(onResourceContent.bind(this)); + this._resource.requestContent(onResourceContent.bind(this)); else previewImage.src = this._resource.url; diff --git a/WebCore/inspector/front-end/Panel.js b/WebCore/inspector/front-end/Panel.js index ec9250c..4c42a60 100644 --- a/WebCore/inspector/front-end/Panel.js +++ b/WebCore/inspector/front-end/Panel.js @@ -34,7 +34,7 @@ WebInspector.Panel = function(name) this.element.addStyleClass(name); this._panelName = name; - WebInspector.applicationSettings.installApplicationSetting(this._sidebarWidthSettingName(), 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) diff --git a/WebCore/inspector/front-end/ProfilesPanel.js b/WebCore/inspector/front-end/ProfilesPanel.js index ca02f9e..0aa4174 100644 --- a/WebCore/inspector/front-end/ProfilesPanel.js +++ b/WebCore/inspector/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; }, diff --git a/WebCore/inspector/front-end/PropertiesSection.js b/WebCore/inspector/front-end/PropertiesSection.js index 1ca52ce..88cb1a2 100644 --- a/WebCore/inspector/front-end/PropertiesSection.js +++ b/WebCore/inspector/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; diff --git a/WebCore/inspector/front-end/PropertiesSidebarPane.js b/WebCore/inspector/front-end/PropertiesSidebarPane.js index 75d6a48..b9c212a 100644 --- a/WebCore/inspector/front-end/PropertiesSidebarPane.js +++ b/WebCore/inspector/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); } diff --git a/WebCore/inspector/front-end/RemoteObject.js b/WebCore/inspector/front-end/RemoteObject.js index 003d483..4d6736c 100644 --- a/WebCore/inspector/front-end/RemoteObject.js +++ b/WebCore/inspector/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; + } +} diff --git a/WebCore/inspector/front-end/Resource.js b/WebCore/inspector/front-end/Resource.js index 1a2ce96..24af165 100644 --- a/WebCore/inspector/front-end/Resource.js +++ b/WebCore/inspector/front-end/Resource.js @@ -25,7 +25,6 @@ * (INCLUDING 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; @@ -256,7 +255,7 @@ WebInspector.Resource.prototype = { this._checkWarnings(); this.dispatchEventToListeners("finished"); if (this._pendingContentCallbacks.length) - this._requestContent(); + this._innerRequestContent(); } }, @@ -288,6 +287,20 @@ WebInspector.Resource.prototype = { set cached(x) { this._cached = x; + if (x) + delete this._timing; + }, + + + get timing() + { + return this._timing; + }, + + set timing(x) + { + if (!this._cached) + this._timing = x; }, get mimeType() @@ -332,7 +345,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: @@ -603,12 +616,17 @@ WebInspector.Resource.prototype = { WebInspector.console.addMessage(msg); }, + get content() + { + return this._content; + }, + set content(content) { this._content = content; }, - getContent: function(callback) + requestContent: function(callback) { if (this._content) { callback(this._content, this._contentEncoded); @@ -616,7 +634,7 @@ WebInspector.Resource.prototype = { } this._pendingContentCallbacks.push(callback); if (this.finished) - this._requestContent(); + this._innerRequestContent(); }, get contentURL() @@ -629,7 +647,7 @@ WebInspector.Resource.prototype = { return "data:" + this.mimeType + (this._contentEncoded ? ";base64," : ",") + this._content; }, - _requestContent: function() + _innerRequestContent: function() { if (this._contentRequested) return; @@ -643,52 +661,10 @@ WebInspector.Resource.prototype = { for (var i = 0; i < callbacks.length; ++i) callbacks[i](this._content, this._contentEncoded); this._pendingContentCallbacks.length = 0; + delete this._contentRequested; } - WebInspector.ResourceManager.getContent(this, this._contentEncoded, onResourceContent.bind(this)); + 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; -} diff --git a/WebCore/inspector/front-end/ResourceManager.js b/WebCore/inspector/front-end/ResourceManager.js index 62273ee..bb34561 100644 --- a/WebCore/inspector/front-end/ResourceManager.js +++ b/WebCore/inspector/front-end/ResourceManager.js @@ -63,15 +63,11 @@ WebInspector.ResourceManager.prototype = { identifierForInitialRequest: function(identifier, url, loader) { var resource = this._createResource(identifier, url, loader); - if (loader.url === url) { - resource.isMainResource = true; - WebInspector.mainResource = resource; - } // It is important to bind resource url early (before scripts compile). this._bindResourceURL(resource); - WebInspector.panels.network.addResource(resource); + WebInspector.panels.network.refreshResource(resource); WebInspector.panels.audits.resourceStarted(resource); }, @@ -79,7 +75,8 @@ WebInspector.ResourceManager.prototype = { { var resource = new WebInspector.Resource(identifier, url); resource.loader = loader; - resource.documentURL = loader.url; + if (loader) + resource.documentURL = loader.url; this._resourcesById[identifier] = resource; return resource; @@ -104,7 +101,7 @@ WebInspector.ResourceManager.prototype = { resource.startTime = time; if (isRedirect) { - WebInspector.panels.network.addResource(resource); + WebInspector.panels.network.refreshResource(resource); WebInspector.panels.audits.resourceStarted(resource); } else WebInspector.panels.network.refreshResource(resource); @@ -228,9 +225,11 @@ WebInspector.ResourceManager.prototype = { 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.addResource(resource); + WebInspector.panels.network.refreshResource(resource); WebInspector.panels.audits.resourceStarted(resource); WebInspector.panels.audits.resourceFinished(resource); this._resourceTreeModel.addResourceToFrame(resource.loader.frameId, resource); @@ -251,12 +250,20 @@ WebInspector.ResourceManager.prototype = { resource.type = WebInspector.Resource.Type[type]; resource.content = sourceString; + WebInspector.panels.storage.refreshResource(resource); WebInspector.panels.network.refreshResource(resource); }, - didCommitLoadForFrame: function(parentFrameId, loader) + didCommitLoadForFrame: function(frame, loader) { - this._resourceTreeModel.didCommitLoadForFrame(parentFrameId, 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) @@ -266,11 +273,9 @@ WebInspector.ResourceManager.prototype = { didCreateWebSocket: function(identifier, requestURL) { - this.identifierForInitialRequest(identifier, requestURL); - var resource = this._resourcesById[identifier]; + var resource = this._createResource(identifier, requestURL); resource.type = WebInspector.Resource.Type.WebSocket; - - WebInspector.panels.network.addResource(resource); + WebInspector.panels.network.refreshResource(resource); }, willSendWebSocketHandshakeRequest: function(identifier, time, request) @@ -314,12 +319,12 @@ WebInspector.ResourceManager.prototype = { _processCachedResources: function(mainFramePayload) { - var mainResource = this._addFramesRecursively(null, mainFramePayload); + var mainResource = this._addFramesRecursively(mainFramePayload); WebInspector.mainResource = mainResource; mainResource.isMainResource = true; }, - _addFramesRecursively: function(parentFrameId, framePayload) + _addFramesRecursively: function(framePayload) { var frameResource = this._createResource(null, framePayload.resource.url, framePayload.resource.loader); this._updateResourceWithRequest(frameResource, framePayload.resource.request); @@ -328,11 +333,11 @@ WebInspector.ResourceManager.prototype = { frameResource.finished = true; this._bindResourceURL(frameResource); - this._resourceTreeModel.addOrUpdateFrame(parentFrameId, framePayload.id, frameResource.displayName); + this._resourceTreeModel.addOrUpdateFrame(framePayload); this._resourceTreeModel.addResourceToFrame(framePayload.id, frameResource); for (var i = 0; framePayload.children && i < framePayload.children.length; ++i) - this._addFramesRecursively(framePayload.id, framePayload.children[i]); + this._addFramesRecursively(framePayload.children[i]); if (!framePayload.subresources) return; @@ -469,13 +474,9 @@ WebInspector.ResourceManager.existingResourceViewForResource = function(resource return resource._resourcesView; } -WebInspector.ResourceManager.getContent = function(resource, base64Encode, callback) +WebInspector.ResourceManager.requestContent = function(resource, base64Encode, callback) { - // FIXME: eventually, cached resources will have no identifiers. - if (resource.loader) - InspectorBackend.resourceContent(resource.loader.frameId, resource.url, base64Encode, callback); - else - InspectorBackend.getResourceContent(resource.identifier, base64Encode, callback); + InspectorBackend.resourceContent(resource.loader.frameId, resource.url, base64Encode, callback); } WebInspector.ResourceTreeModel = function() @@ -485,29 +486,29 @@ WebInspector.ResourceTreeModel = function() } WebInspector.ResourceTreeModel.prototype = { - addOrUpdateFrame: function(parentFrameId, frameId, displayName) + addOrUpdateFrame: function(frame) { - WebInspector.panels.storage.addOrUpdateFrame(parentFrameId, frameId, displayName); - var subframes = this._subframes[parentFrameId]; + var tmpResource = new WebInspector.Resource(null, frame.url); + WebInspector.panels.storage.addOrUpdateFrame(frame.parentId, frame.id, frame.name, tmpResource.displayName); + var subframes = this._subframes[frame.parentId]; if (!subframes) { subframes = {}; - this._subframes[parentFrameId || 0] = subframes; + this._subframes[frame.parentId || 0] = subframes; } - subframes[frameId] = true; + subframes[frame.id] = true; }, - didCommitLoadForFrame: function(parentFrameId, loader) + didCommitLoadForFrame: function(frame, loader) { - // parentFrameId === 0 is when main frame navigation happens. - this._clearChildFramesAndResources(parentFrameId ? loader.frameId : 0, loader.loaderId); + // frame.parentId === 0 is when main frame navigation happens. + this._clearChildFramesAndResources(frame.parentId ? frame.id : 0, loader.loaderId); - var tmpResource = new WebInspector.Resource(null, loader.url); - this.addOrUpdateFrame(parentFrameId, loader.frameId, tmpResource.displayName); + this.addOrUpdateFrame(frame); - var resourcesForFrame = this._resourcesByFrameId[loader.frameId]; + var resourcesForFrame = this._resourcesByFrameId[frame.id]; for (var i = 0; resourcesForFrame && i < resourcesForFrame.length; ++i) { WebInspector.resourceManager._bindResourceURL(resourcesForFrame[i]); - WebInspector.panels.storage.addResourceToFrame(loader.frameId, resourcesForFrame[i]); + WebInspector.panels.storage.addResourceToFrame(frame.id, resourcesForFrame[i]); } }, diff --git a/WebCore/inspector/front-end/ResourceView.js b/WebCore/inspector/front-end/ResourceView.js index ffb229d..3ca7fcc 100644 --- a/WebCore/inspector/front-end/ResourceView.js +++ b/WebCore/inspector/front-end/ResourceView.js @@ -147,7 +147,7 @@ WebInspector.ResourceView.prototype = { _selectTab: function() { - var preferredTab = WebInspector.applicationSettings.resourceViewTab; + var preferredTab = WebInspector.settings.resourceViewTab; if (this._headersVisible && this._cookiesView && preferredTab === "cookies") this._selectCookiesTab(); else if (this._headersVisible && (!this.hasContentTab() || preferredTab === "headers")) @@ -159,14 +159,14 @@ WebInspector.ResourceView.prototype = { _selectHeadersTab: function(updatePrefs) { if (updatePrefs) - WebInspector.applicationSettings.resourceViewTab = "headers"; + WebInspector.settings.resourceViewTab = "headers"; this.tabbedPane.selectTabById("headers"); }, selectContentTab: function(updatePrefs) { if (updatePrefs) - WebInspector.applicationSettings.resourceViewTab = "content"; + WebInspector.settings.resourceViewTab = "content"; this._innerSelectContentTab(); }, @@ -179,7 +179,7 @@ WebInspector.ResourceView.prototype = { _selectCookiesTab: function(updatePrefs) { if (updatePrefs) - WebInspector.applicationSettings.resourceViewTab = "cookies"; + WebInspector.settings.resourceViewTab = "cookies"; this.tabbedPane.selectTabById("cookies"); this._cookiesView.resize(); }, diff --git a/WebCore/inspector/front-end/ResourcesPanel.js b/WebCore/inspector/front-end/ResourcesPanel.js deleted file mode 100644 index b35fc4b..0000000 --- a/WebCore/inspector/front-end/ResourcesPanel.js +++ /dev/null @@ -1,1938 +0,0 @@ -/* - * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. - * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org> - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions - * are met: - * - * 1. Redistributions of source code must retain the above copyright - * notice, this list of conditions and the following disclaimer. - * 2. Redistributions in binary form must 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.ResourcesPanel = function() -{ - WebInspector.Panel.call(this, "resources"); - this.resourceURLMap = {}; - this._items = []; - this._staleItems = []; - - this._createPanelEnabler(); - - this.viewsContainerElement = document.createElement("div"); - this.viewsContainerElement.id = "resource-views"; - this.element.appendChild(this.viewsContainerElement); - - this.createFilterPanel(); - this.createInterface(); - - this._createStatusbarButtons(); - this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), true); - - this.reset(); - this.filter(this.filterAllElement, false); - this.graphsTreeElement.children[0].select(); - this._resourceTrackingEnabled = false; - - this.sidebarElement.addEventListener("contextmenu", this._contextMenu.bind(this), true); -} - -WebInspector.ResourcesPanel.prototype = { - get toolbarItemLabel() - { - return WebInspector.UIString("Resources"); - }, - - get statusBarItems() - { - return [this.enableToggleButton.element, this.largerResourcesButton.element, this.sortingSelectElement]; - }, - - get categories() - { - return WebInspector.resourceCategories; - }, - - createItemTreeElement: function(item) - { - return new WebInspector.ResourceSidebarTreeElement(item); - }, - - createItemGraph: function(item) - { - return new WebInspector.ResourceGraph(item); - }, - - isCategoryVisible: function(categoryName) - { - return (this.itemsGraphsElement.hasStyleClass("filter-all") || this.itemsGraphsElement.hasStyleClass("filter-" + categoryName.toLowerCase())); - }, - - get items() - { - return this._items; - }, - - createInterface: function() - { - this.containerElement = document.createElement("div"); - this.containerElement.id = "resources-container"; - this.containerElement.addEventListener("scroll", this._updateDividersLabelBarPosition.bind(this), false); - this.element.appendChild(this.containerElement); - - this.createSidebar(this.containerElement, this.element); - this.sidebarElement.id = "resources-sidebar"; - this.populateSidebar(); - - this._containerContentElement = document.createElement("div"); - this._containerContentElement.id = "resources-container-content"; - this.containerElement.appendChild(this._containerContentElement); - - this.summaryBar = new WebInspector.SummaryBar(this.categories); - this.summaryBar.element.id = "resources-summary"; - this._containerContentElement.appendChild(this.summaryBar.element); - - this._timelineGrid = new WebInspector.TimelineGrid(); - this._containerContentElement.appendChild(this._timelineGrid.element); - this.itemsGraphsElement = this._timelineGrid.itemsGraphsElement; - }, - - createFilterPanel: function() - { - this.filterBarElement = document.createElement("div"); - this.filterBarElement.id = "resources-filter"; - this.filterBarElement.className = "scope-bar"; - this.element.appendChild(this.filterBarElement); - - function createFilterElement(category) - { - if (category === "all") - var label = WebInspector.UIString("All"); - else if (this.categories[category]) - var label = this.categories[category].title; - - var categoryElement = document.createElement("li"); - categoryElement.category = category; - categoryElement.addStyleClass(category); - categoryElement.appendChild(document.createTextNode(label)); - categoryElement.addEventListener("click", this._updateFilter.bind(this), false); - this.filterBarElement.appendChild(categoryElement); - - return categoryElement; - } - - this.filterAllElement = createFilterElement.call(this, "all"); - - // Add a divider - var dividerElement = document.createElement("div"); - dividerElement.addStyleClass("scope-bar-divider"); - this.filterBarElement.appendChild(dividerElement); - - for (var category in this.categories) - createFilterElement.call(this, category); - }, - - showCategory: function(category) - { - var filterClass = "filter-" + category.toLowerCase(); - this.itemsGraphsElement.addStyleClass(filterClass); - this.itemsTreeElement.childrenListElement.addStyleClass(filterClass); - }, - - hideCategory: function(category) - { - var filterClass = "filter-" + category.toLowerCase(); - this.itemsGraphsElement.removeStyleClass(filterClass); - this.itemsTreeElement.childrenListElement.removeStyleClass(filterClass); - }, - - filter: function(target, selectMultiple) - { - function unselectAll() - { - for (var i = 0; i < this.filterBarElement.childNodes.length; ++i) { - var child = this.filterBarElement.childNodes[i]; - if (!child.category) - continue; - - child.removeStyleClass("selected"); - this.hideCategory(child.category); - } - } - - if (target === this.filterAllElement) { - if (target.hasStyleClass("selected")) { - // We can't unselect All, so we break early here - return; - } - - // If All wasn't selected, and now is, unselect everything else. - unselectAll.call(this); - } else { - // Something other than All is being selected, so we want to unselect All. - if (this.filterAllElement.hasStyleClass("selected")) { - this.filterAllElement.removeStyleClass("selected"); - this.hideCategory("all"); - } - } - - if (!selectMultiple) { - // If multiple selection is off, we want to unselect everything else - // and just select ourselves. - unselectAll.call(this); - - target.addStyleClass("selected"); - this.showCategory(target.category); - return; - } - - if (target.hasStyleClass("selected")) { - // If selectMultiple is turned on, and we were selected, we just - // want to unselect ourselves. - target.removeStyleClass("selected"); - this.hideCategory(target.category); - } else { - // If selectMultiple is turned on, and we weren't selected, we just - // want to select ourselves. - target.addStyleClass("selected"); - this.showCategory(target.category); - } - }, - - _updateFilter: function(e) - { - var isMac = WebInspector.isMac(); - var selectMultiple = false; - if (isMac && e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) - selectMultiple = true; - if (!isMac && e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey) - selectMultiple = true; - - this.filter(e.target, selectMultiple); - - // When we are updating our filtering, scroll to the top so we don't end up - // in blank graph under all the resources. - this.containerElement.scrollTop = 0; - - var searchField = document.getElementById("search"); - WebInspector.doPerformSearch(searchField.value, WebInspector.shortSearchWasForcedByKeyEvent, false, true); - }, - - _updateDividersLabelBarPosition: function() - { - const scrollTop = this.containerElement.scrollTop; - const offsetHeight = this.summaryBar.element.offsetHeight; - const dividersTop = (scrollTop < offsetHeight ? offsetHeight : scrollTop); - this._timelineGrid.setScrollAndDividerTop(scrollTop, dividersTop); - }, - - get needsRefresh() - { - return this._needsRefresh; - }, - - set needsRefresh(x) - { - if (this._needsRefresh === x) - return; - - this._needsRefresh = x; - - if (x) { - if (this.visible && !("_refreshTimeout" in this)) - this._refreshTimeout = setTimeout(this.refresh.bind(this), 500); - } else { - if ("_refreshTimeout" in this) { - clearTimeout(this._refreshTimeout); - delete this._refreshTimeout; - } - } - }, - - refreshIfNeeded: function() - { - if (this.needsRefresh) - this.refresh(); - }, - - resize: function() - { - WebInspector.Panel.prototype.resize.call(this); - - this.updateGraphDividersIfNeeded(); - }, - - invalidateAllItems: function() - { - this._staleItems = this._items.slice(); - }, - - get calculator() - { - return this._calculator; - }, - - set calculator(x) - { - if (!x || this._calculator === x) - return; - - this._calculator = x; - this._calculator.reset(); - - this._staleItems = this._items.slice(); - this.refresh(); - }, - - addItem: function(item) - { - this._items.push(item); - this.refreshItem(item); - }, - - removeItem: function(item) - { - this._items.remove(item, true); - - if (item._itemsTreeElement) { - this.itemsTreeElement.removeChild(item._itemsTreeElement); - this.itemsGraphsElement.removeChild(item._itemsTreeElement._itemGraph.graphElement); - } - - delete item._itemsTreeElement; - this.adjustScrollPosition(); - }, - - refreshItem: function(item) - { - this._staleItems.push(item); - this.needsRefresh = true; - }, - - revealAndSelectItem: function(item) - { - if (item._itemsTreeElement) { - item._itemsTreeElement.reveal(); - item._itemsTreeElement.select(true); - } - }, - - sortItems: function(sortingFunction) - { - var sortedElements = [].concat(this.itemsTreeElement.children); - sortedElements.sort(sortingFunction); - - var sortedElementsLength = sortedElements.length; - for (var i = 0; i < sortedElementsLength; ++i) { - var treeElement = sortedElements[i]; - if (treeElement === this.itemsTreeElement.children[i]) - continue; - - var wasSelected = treeElement.selected; - this.itemsTreeElement.removeChild(treeElement); - this.itemsTreeElement.insertChild(treeElement, i); - if (wasSelected) - treeElement.select(true); - - var graphElement = treeElement._itemGraph.graphElement; - this.itemsGraphsElement.insertBefore(graphElement, this.itemsGraphsElement.children[i]); - } - }, - - adjustScrollPosition: function() - { - // Prevent the container from being scrolled off the end. - if ((this.containerElement.scrollTop + this.containerElement.offsetHeight) > this.sidebarElement.offsetHeight) - this.containerElement.scrollTop = (this.sidebarElement.offsetHeight - this.containerElement.offsetHeight); - }, - - addEventDivider: function(divider) - { - this._timelineGrid.addEventDivider(divider); - }, - - hideEventDividers: function() - { - this._timelineGrid.hideEventDividers(); - }, - - showEventDividers: function() - { - this._timelineGrid.showEventDividers(); - }, - - populateSidebar: function() - { - this.timeGraphItem = new WebInspector.SidebarTreeElement("resources-time-graph-sidebar-item", WebInspector.UIString("Time")); - this.timeGraphItem.onselect = this._graphSelected.bind(this); - - var transferTimeCalculator = new WebInspector.ResourceTransferTimeCalculator(); - var transferDurationCalculator = new WebInspector.ResourceTransferDurationCalculator(); - - this.timeGraphItem.sortingOptions = [ - { name: WebInspector.UIString("Sort by Start Time"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByAscendingStartTime, calculator: transferTimeCalculator, optionName: "startTime" }, - { name: WebInspector.UIString("Sort by Response Time"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByAscendingResponseReceivedTime, calculator: transferTimeCalculator, optionName: "responseTime" }, - { name: WebInspector.UIString("Sort by End Time"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByAscendingEndTime, calculator: transferTimeCalculator, optionName: "endTime" }, - { name: WebInspector.UIString("Sort by Duration"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingDuration, calculator: transferDurationCalculator, optionName: "duration" }, - { name: WebInspector.UIString("Sort by Latency"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingLatency, calculator: transferDurationCalculator, optionName: "latency" }, - ]; - - this.timeGraphItem.isBarOpaqueAtLeft = false; - this.timeGraphItem.selectedSortingOptionIndex = 1; - - this.sizeGraphItem = new WebInspector.SidebarTreeElement("resources-size-graph-sidebar-item", WebInspector.UIString("Size")); - this.sizeGraphItem.onselect = this._graphSelected.bind(this); - - var transferSizeCalculator = new WebInspector.ResourceTransferSizeCalculator(); - this.sizeGraphItem.sortingOptions = [ - { name: WebInspector.UIString("Sort by Transfer Size"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingTransferSize, calculator: transferSizeCalculator, optionName: "transferSize" }, - { name: WebInspector.UIString("Sort by Size"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingSize, calculator: transferSizeCalculator, optionName: "size" }, - ]; - - this.sizeGraphItem.isBarOpaqueAtLeft = true; - this.sizeGraphItem.selectedSortingOptionIndex = 0; - - this.graphsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("GRAPHS"), {}, true); - this.sidebarTree.appendChild(this.graphsTreeElement); - - this.graphsTreeElement.appendChild(this.timeGraphItem); - this.graphsTreeElement.appendChild(this.sizeGraphItem); - this.graphsTreeElement.expand(); - - this.itemsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("RESOURCES"), {}, true); - this.sidebarTree.appendChild(this.itemsTreeElement); - - this.itemsTreeElement.expand(); - }, - - get resourceTrackingEnabled() - { - return this._resourceTrackingEnabled; - }, - - _createPanelEnabler: function() - { - var panelEnablerHeading = WebInspector.UIString("You need to enable resource tracking to use this panel."); - var panelEnablerDisclaimer = WebInspector.UIString("Enabling resource tracking will reload the page and make page loading slower."); - var panelEnablerButton = WebInspector.UIString("Enable resource tracking"); - - this.panelEnablerView = new WebInspector.PanelEnablerView("resources", panelEnablerHeading, panelEnablerDisclaimer, panelEnablerButton); - this.panelEnablerView.addEventListener("enable clicked", this._enableResourceTracking, this); - - this.element.appendChild(this.panelEnablerView.element); - - this.enableToggleButton = new WebInspector.StatusBarButton("", "enable-toggle-status-bar-item"); - this.enableToggleButton.addEventListener("click", this.toggleResourceTracking.bind(this), false); - }, - - _createStatusbarButtons: function() - { - this.largerResourcesButton = new WebInspector.StatusBarButton(WebInspector.UIString("Use small resource rows."), "resources-larger-resources-status-bar-item"); - - this.largerResourcesButton.toggled = WebInspector.applicationSettings.resourcesLargeRows; - if (!WebInspector.applicationSettings.resourcesLargeRows) - this._setLargerResources(WebInspector.applicationSettings.resourcesLargeRows); - this._loadSortOptions(); - - this.largerResourcesButton.addEventListener("click", this._toggleLargerResources.bind(this), false); - this.sortingSelectElement = document.createElement("select"); - this.sortingSelectElement.className = "status-bar-item"; - this.sortingSelectElement.addEventListener("change", this._changeSortingFunction.bind(this), false); - }, - - _loadSortOptions: function() - { - var newOptions = WebInspector.applicationSettings.resourcesSortOptions; - if (!newOptions) - return; - - this._loadSortOptionForGraph(this.timeGraphItem, newOptions.timeOption || "responseTime"); - this._loadSortOptionForGraph(this.sizeGraphItem, newOptions.sizeOption || "transferSize"); - }, - - _loadSortOptionForGraph: function(graphItem, newOptionName) - { - var sortingOptions = graphItem.sortingOptions; - for (var i = 0; i < sortingOptions.length; ++i) { - if (sortingOptions[i].optionName === newOptionName) { - graphItem.selectedSortingOptionIndex = i; - // Propagate the option change down to the currently selected option. - if (this._lastSelectedGraphTreeElement === graphItem) { - this._lastSelectedGraphTreeElement = null; - this._graphSelected(graphItem); - } - } - } - }, - - get mainResourceLoadTime() - { - return this._mainResourceLoadTime || -1; - }, - - set mainResourceLoadTime(x) - { - if (this._mainResourceLoadTime === x) - return; - - this._mainResourceLoadTime = x; - - // Update the dividers to draw the new line - this.updateGraphDividersIfNeeded(true); - }, - - get mainResourceDOMContentTime() - { - return this._mainResourceDOMContentTime || -1; - }, - - set mainResourceDOMContentTime(x) - { - if (this._mainResourceDOMContentTime === x) - return; - - this._mainResourceDOMContentTime = x; - - this.updateGraphDividersIfNeeded(true); - }, - - show: function() - { - WebInspector.Panel.prototype.show.call(this); - - this._updateDividersLabelBarPosition(); - this.refreshIfNeeded(); - - var visibleView = this.visibleView; - if (this.visibleResource) { - this.visibleView.headersVisible = true; - 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; - } - }, - - get searchableViews() - { - var views = []; - - const visibleView = this.visibleView; - if (visibleView && visibleView.performSearch) - views.push(visibleView); - - var resourcesLength = this._resources.length; - for (var i = 0; i < resourcesLength; ++i) { - var resource = this._resources[i]; - if (!resource._itemsTreeElement || !resource._itemsTreeElement.selectable) - continue; - var resourceView = WebInspector.ResourceManager.resourceViewForResource(resource); - if (!resourceView.performSearch || resourceView === visibleView) - continue; - views.push(resourceView); - } - - return views; - }, - - get searchResultsSortFunction() - { - const resourceTreeElementSortFunction = this.sortingFunction; - - function sortFuction(a, b) - { - return resourceTreeElementSortFunction(a.resource._itemsTreeElement, b.resource._itemsTreeElement); - } - - return sortFuction; - }, - - searchMatchFound: function(view, matches) - { - view.resource._itemsTreeElement.searchMatches = matches; - }, - - searchCanceled: function(startingNewSearch) - { - WebInspector.Panel.prototype.searchCanceled.call(this, startingNewSearch); - - if (startingNewSearch || !this._resources) - return; - - for (var i = 0; i < this._resources.length; ++i) { - var resource = this._resources[i]; - if (resource._itemsTreeElement) - resource._itemsTreeElement.updateErrorsAndWarnings(); - } - }, - - performSearch: function(query) - { - for (var i = 0; i < this._resources.length; ++i) { - var resource = this._resources[i]; - if (resource._itemsTreeElement) - resource._itemsTreeElement.resetBubble(); - } - - WebInspector.Panel.prototype.performSearch.call(this, query); - }, - - get visibleView() - { - if (this.visibleResource) - return this.visibleResource._resourcesView; - return this._resourceTrackingEnabled ? null : this.panelEnablerView; - }, - - get sortingFunction() - { - return this._sortingFunction; - }, - - set sortingFunction(x) - { - this._sortingFunction = x; - this._sortResourcesIfNeeded(); - }, - - refresh: function() - { - this.needsRefresh = false; - - var staleItemsLength = this._staleItems.length; - - var boundariesChanged = false; - - for (var i = 0; i < staleItemsLength; ++i) { - var item = this._staleItems[i]; - if (!item._itemsTreeElement) { - // Create the timeline tree element and graph. - item._itemsTreeElement = this.createItemTreeElement(item); - item._itemsTreeElement._itemGraph = this.createItemGraph(item); - - this.itemsTreeElement.appendChild(item._itemsTreeElement); - this.itemsGraphsElement.appendChild(item._itemsTreeElement._itemGraph.graphElement); - } - - if (item._itemsTreeElement.refresh) - item._itemsTreeElement.refresh(); - - if (this.calculator.updateBoundaries(item)) - boundariesChanged = true; - } - - if (boundariesChanged) { - // The boundaries changed, so all item graphs are stale. - this._staleItems = this._items.slice(); - staleItemsLength = this._staleItems.length; - } - - - const isBarOpaqueAtLeft = this.sidebarTree.selectedTreeElement && this.sidebarTree.selectedTreeElement.isBarOpaqueAtLeft; - for (var i = 0; i < staleItemsLength; ++i) - this._staleItems[i]._itemsTreeElement._itemGraph.refresh(this.calculator, isBarOpaqueAtLeft); - - this._staleItems = []; - - this.updateGraphDividersIfNeeded(); - - this._sortResourcesIfNeeded(); - this._updateSummaryGraph(); - }, - - _updateSummaryGraph: function() - { - this.summaryBar.update(this._resources); - }, - - resourceTrackingWasEnabled: function() - { - this._resourceTrackingEnabled = true; - this.reset(); - this.restoreSidebarWidth(); - }, - - resourceTrackingWasDisabled: function() - { - this._resourceTrackingEnabled = false; - this.reset(); - }, - - reset: function() - { - this._popoverHelper.hidePopup(); - this.closeVisibleResource(); - - 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 - this.containerElement.scrollTop = 0; - - if (this._calculator) - this._calculator.reset(); - - if (this._items) { - var itemsLength = this._items.length; - for (var i = 0; i < itemsLength; ++i) { - var item = this._items[i]; - delete item._itemsTreeElement; - } - } - - this._items = []; - this._staleItems = []; - - this.itemsTreeElement.removeChildren(); - this.itemsGraphsElement.removeChildren(); - - this.updateGraphDividersIfNeeded(true); - // End reset timeline. - - this.mainResourceLoadTime = -1; - this.mainResourceDOMContentTime = -1; - - this.viewsContainerElement.removeChildren(); - - this.summaryBar.reset(); - - if (this._resourceTrackingEnabled) { - this.enableToggleButton.title = WebInspector.UIString("Resource tracking enabled. Click to disable."); - this.enableToggleButton.toggled = true; - this.largerResourcesButton.visible = true; - this.sortingSelectElement.removeStyleClass("hidden"); - this.panelEnablerView.visible = false; - } else { - this.enableToggleButton.title = WebInspector.UIString("Resource tracking disabled. Click to enable."); - this.enableToggleButton.toggled = false; - this.largerResourcesButton.visible = false; - this.sortingSelectElement.addStyleClass("hidden"); - this.panelEnablerView.visible = true; - } - this.resourceURLMap = {}; - }, - - addResource: function(resource) - { - this.resourceURLMap[resource.url] = resource; - this._resources.push(resource); - }, - - removeResource: function(resource) - { - if (this.visibleView === resource._resourcesView) - this.closeVisibleResource(); - - this.removeItem(resource); - - resource.warnings = 0; - resource.errors = 0; - - delete resource._resourcesView; - delete this.resourceURLMap[resource.url]; - }, - - addMessageToResource: function(resource, msg) - { - 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; - } - - if (!this.currentQuery && resource._itemsTreeElement) - resource._itemsTreeElement.updateErrorsAndWarnings(); - - var view = WebInspector.ResourceManager.resourceViewForResource(resource); - if (view.addMessage) - view.addMessage(msg); - }, - - clearMessages: function() - { - var resourcesLength = this._resources.length; - for (var i = 0; i < resourcesLength; ++i) { - var resource = this._resources[i]; - resource.warnings = 0; - resource.errors = 0; - - if (!this.currentQuery && resource._itemsTreeElement) - resource._itemsTreeElement.updateErrorsAndWarnings(); - - var view = resource._resourcesView; - if (!view || !view.clearMessages) - continue; - view.clearMessages(); - } - }, - - refreshResource: function(resource) - { - this._recreateViewForResourceIfNeeded(resource); - this.refreshItem(resource); - }, - - _recreateViewForResourceIfNeeded: function(resource) - { - if (!resource || !resource._resourcesView) - return; - - if (WebInspector.ResourceManager.resourceViewTypeMatchesResource(resource, resource._resourcesView)) - return; - var newView = WebInspector.ResourceManager.createResourceView(resource); - - if (!this.currentQuery && resource._itemsTreeElement) - resource._itemsTreeElement.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); - }, - - canShowSourceLine: function(url, line) - { - return this._resourceTrackingEnabled && !!WebInspector.resourceForURL(url); - }, - - showSourceLine: function(url, line) - { - this.showResource(WebInspector.resourceForURL(url), line); - }, - - showResource: function(resource, line) - { - if (!resource) - return; - - this._popoverHelper.hidePopup(); - - this.containerElement.addStyleClass("viewing-resource"); - - if (this.visibleResource && this.visibleResource._resourcesView) - this.visibleResource._resourcesView.hide(); - - var view = WebInspector.ResourceManager.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); - } - - this.revealAndSelectItem(resource); - - this.visibleResource = resource; - - this.updateSidebarWidth(); - }, - - showView: function(view) - { - if (!view) - return; - this.showResource(view.resource); - }, - - closeVisibleResource: function() - { - this.containerElement.removeStyleClass("viewing-resource"); - this._updateDividersLabelBarPosition(); - - if (this.visibleResource && this.visibleResource._resourcesView) - this.visibleResource._resourcesView.hide(); - delete this.visibleResource; - - if (this._lastSelectedGraphTreeElement) - this._lastSelectedGraphTreeElement.select(true); - - this.updateSidebarWidth(); - }, - - _sortResourcesIfNeeded: function() - { - this.sortItems(this.sortingFunction); - }, - - updateGraphDividersIfNeeded: function(force) - { - var proceed = true; - if (!this.visible) { - this.needsRefresh = true; - proceed = false; - } else - proceed = this._timelineGrid.updateDividers(force, this.calculator); - - if (!proceed) - return; - - if (this.calculator.startAtZero || !this.calculator.computePercentageFromEventTime) { - // If our current sorting method starts at zero, that means it shows all - // resources starting at the same point, and so onLoad event and DOMContent - // event lines really wouldn't make much sense here, so don't render them. - // Additionally, if the calculator doesn't have the computePercentageFromEventTime - // function defined, we are probably sorting by size, and event times aren't relevant - // in this case. - return; - } - - this._timelineGrid.removeEventDividers(); - if (this.mainResourceLoadTime !== -1) { - var percent = this.calculator.computePercentageFromEventTime(this.mainResourceLoadTime); - - var loadDivider = document.createElement("div"); - loadDivider.className = "resources-event-divider resources-red-divider"; - - var loadDividerPadding = document.createElement("div"); - loadDividerPadding.className = "resources-event-divider-padding"; - loadDividerPadding.style.left = percent + "%"; - loadDividerPadding.title = WebInspector.UIString("Load event fired"); - loadDividerPadding.appendChild(loadDivider); - - this.addEventDivider(loadDividerPadding); - } - - if (this.mainResourceDOMContentTime !== -1) { - var percent = this.calculator.computePercentageFromEventTime(this.mainResourceDOMContentTime); - - var domContentDivider = document.createElement("div"); - domContentDivider.className = "resources-event-divider resources-blue-divider"; - - var domContentDividerPadding = document.createElement("div"); - domContentDividerPadding.className = "resources-event-divider-padding"; - domContentDividerPadding.style.left = percent + "%"; - domContentDividerPadding.title = WebInspector.UIString("DOMContent event fired"); - domContentDividerPadding.appendChild(domContentDivider); - - this.addEventDivider(domContentDividerPadding); - } - }, - - _graphSelected: function(treeElement) - { - if (this._lastSelectedGraphTreeElement) - this._lastSelectedGraphTreeElement.selectedSortingOptionIndex = this.sortingSelectElement.selectedIndex; - - this._lastSelectedGraphTreeElement = treeElement; - - this.sortingSelectElement.removeChildren(); - for (var i = 0; i < treeElement.sortingOptions.length; ++i) { - var sortingOption = treeElement.sortingOptions[i]; - var option = document.createElement("option"); - option.label = sortingOption.name; - option.sortingFunction = sortingOption.sortingFunction; - option.calculator = sortingOption.calculator; - option.optionName = sortingOption.optionName; - this.sortingSelectElement.appendChild(option); - } - - this.sortingSelectElement.selectedIndex = treeElement.selectedSortingOptionIndex; - this._doChangeSortingFunction(); - - this.closeVisibleResource(); - this.containerElement.scrollTop = 0; - - if (treeElement === this.sizeGraphItem) - this.hideEventDividers(); - else - this.showEventDividers(); - }, - - _toggleLargerResources: function() - { - if (!this.itemsTreeElement._childrenListNode) - return; - - WebInspector.applicationSettings.resourcesLargeRows = !WebInspector.applicationSettings.resourcesLargeRows; - this._setLargerResources(this.itemsTreeElement.smallChildren); - }, - - _setLargerResources: function(enabled) - { - this.largerResourcesButton.toggled = enabled; - this.itemsTreeElement.smallChildren = !enabled; - if (!enabled) { - this.itemsGraphsElement.addStyleClass("small"); - this.largerResourcesButton.title = WebInspector.UIString("Use large resource rows."); - this.adjustScrollPosition(); - } else { - this.itemsGraphsElement.removeStyleClass("small"); - this.largerResourcesButton.title = WebInspector.UIString("Use small resource rows."); - } - }, - - _changeSortingFunction: function() - { - this._doChangeSortingFunction(); - WebInspector.applicationSettings.resourcesSortOptions = {timeOption: this._selectedOptionNameForGraph(this.timeGraphItem), sizeOption: this._selectedOptionNameForGraph(this.sizeGraphItem)}; - }, - - _selectedOptionNameForGraph: function(graphItem) - { - return graphItem.sortingOptions[graphItem.selectedSortingOptionIndex].optionName; - }, - - _doChangeSortingFunction: function() - { - var selectedIndex = this.sortingSelectElement.selectedIndex; - if (this._lastSelectedGraphTreeElement) - this._lastSelectedGraphTreeElement.selectedSortingOptionIndex = selectedIndex; - var selectedOption = this.sortingSelectElement[selectedIndex]; - this.sortingFunction = selectedOption.sortingFunction; - this.calculator = this.summaryBar.calculator = selectedOption.calculator; - }, - - setSidebarWidth: function(width) - { - if (this.visibleResource) { - this.containerElement.style.width = width + "px"; - this.sidebarElement.style.removeProperty("width"); - } else { - this.sidebarElement.style.width = width + "px"; - this.containerElement.style.removeProperty("width"); - } - - this.sidebarResizeElement.style.left = (width - 3) + "px"; - }, - - updateMainViewWidth: function(width) - { - this.viewsContainerElement.style.left = width + "px"; - this._containerContentElement.style.left = width + "px"; - this.resize(); - }, - - _enableResourceTracking: function() - { - if (this._resourceTrackingEnabled) - return; - this.toggleResourceTracking(this.panelEnablerView.alwaysEnabled); - }, - - toggleResourceTracking: function(optionalAlways) - { - function callback(newState) { - if (newState) - WebInspector.panels.resources.resourceTrackingWasEnabled(); - else - WebInspector.panels.resources.resourceTrackingWasDisabled(); - } - - if (this._resourceTrackingEnabled) { - this.largerResourcesButton.visible = false; - this.sortingSelectElement.visible = false; - WebInspector.resources = {}; - this.resourceURLMap = {}; - InspectorBackend.setResourceTrackingEnabled(false, true, callback); - } else { - this.largerResourcesButton.visible = true; - this.sortingSelectElement.visible = true; - InspectorBackend.setResourceTrackingEnabled(true, !!optionalAlways, callback); - } - }, - - get _resources() - { - return this.items; - }, - - elementsToRestoreScrollPositionsFor: function() - { - return [ this.containerElement ]; - }, - - _getPopoverAnchor: function(element) - { - var anchor = element.enclosingNodeOrSelfWithClass("resources-graph-bar") || element.enclosingNodeOrSelfWithClass("resources-graph-label"); - if (!anchor) - return null; - var resource = anchor.parentElement.resource; - return resource && resource.timing ? anchor : null; - }, - - _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 = "resource-timing-row"; - td.appendChild(row); - - var bar = document.createElement("span"); - bar.className = "resource-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 = "resource-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 popover = new WebInspector.Popover(tableElement); - popover.show(anchor); - return popover; - }, - - hide: function() - { - WebInspector.Panel.prototype.hide.call(this); - this._popoverHelper.hidePopup(); - }, - - _contextMenu: function(event) - { - var contextMenu = new WebInspector.ContextMenu(); - var resourceTreeItem = event.target.enclosingNodeOrSelfWithClass("resource-sidebar-tree-item"); - var resource; - if (resourceTreeItem && resourceTreeItem.treeElement) - resource = resourceTreeItem.treeElement.representedObject; - - var needSeparator = false; - // createObjectURL is enabled conditionally, do not expose resource export if it's not available. - if (typeof window.createObjectURL === "function" && Preferences.resourceExportEnabled) { - if (resource) - contextMenu.appendItem(WebInspector.UIString("Export to HAR"), this._exportResource.bind(this, resource)); - contextMenu.appendItem(WebInspector.UIString("Export all to HAR"), this._exportAll.bind(this)); - needSeparator = true; - } - - if (resource && resource.category === WebInspector.resourceCategories.xhr) { - if (needSeparator) - contextMenu.appendSeparator(); - contextMenu.appendItem(WebInspector.UIString("Set XHR Breakpoint"), WebInspector.breakpointManager.createXHRBreakpoint.bind(WebInspector.breakpointManager, resource.url)); - } - - contextMenu.show(event); - }, - - _exportAll: function() - { - var harArchive = { - log: (new WebInspector.HARLog()).build() - } - offerFileForDownload(JSON.stringify(harArchive)); - }, - - _exportResource: function(resource) - { - var har = (new WebInspector.HAREntry(resource)).build(); - offerFileForDownload(JSON.stringify(har)); - } -} - -WebInspector.ResourcesPanel.prototype.__proto__ = WebInspector.Panel.prototype; - -WebInspector.ResourceBaseCalculator = function() -{ -} - -WebInspector.ResourceBaseCalculator.prototype = { - computeSummaryValues: function(items) - { - var total = 0; - var categoryValues = {}; - - var itemsLength = items.length; - for (var i = 0; i < itemsLength; ++i) { - var item = items[i]; - var value = this._value(item); - if (typeof value === "undefined") - continue; - if (!(item.category.name in categoryValues)) - categoryValues[item.category.name] = 0; - categoryValues[item.category.name] += value; - total += value; - } - - return {categoryValues: categoryValues, total: total}; - }, - - computeBarGraphPercentages: function(item) - { - return {start: 0, middle: 0, end: (this._value(item) / this.boundarySpan) * 100}; - }, - - computeBarGraphLabels: function(item) - { - const label = this.formatValue(this._value(item)); - return {left: label, right: label, tooltip: label}; - }, - - get boundarySpan() - { - return this.maximumBoundary - this.minimumBoundary; - }, - - updateBoundaries: function(item) - { - this.minimumBoundary = 0; - - var value = this._value(item); - if (typeof this.maximumBoundary === "undefined" || value > this.maximumBoundary) { - this.maximumBoundary = value; - return true; - } - return false; - }, - - reset: function() - { - delete this.minimumBoundary; - delete this.maximumBoundary; - }, - - _value: function(item) - { - return 0; - }, - - formatValue: function(value) - { - return value.toString(); - } -} - -WebInspector.ResourceTimeCalculator = function(startAtZero) -{ - WebInspector.ResourceBaseCalculator.call(this); - this.startAtZero = startAtZero; -} - -WebInspector.ResourceTimeCalculator.prototype = { - computeSummaryValues: function(resources) - { - var resourcesByCategory = {}; - var resourcesLength = resources.length; - for (var i = 0; i < resourcesLength; ++i) { - var resource = resources[i]; - if (!(resource.category.name in resourcesByCategory)) - resourcesByCategory[resource.category.name] = []; - resourcesByCategory[resource.category.name].push(resource); - } - - var earliestStart; - var latestEnd; - var categoryValues = {}; - for (var category in resourcesByCategory) { - resourcesByCategory[category].sort(WebInspector.Resource.CompareByTime); - categoryValues[category] = 0; - - var segment = {start: -1, end: -1}; - - var categoryResources = resourcesByCategory[category]; - var resourcesLength = categoryResources.length; - for (var i = 0; i < resourcesLength; ++i) { - var resource = categoryResources[i]; - if (resource.startTime === -1 || resource.endTime === -1) - continue; - - if (typeof earliestStart === "undefined") - earliestStart = resource.startTime; - else - earliestStart = Math.min(earliestStart, resource.startTime); - - if (typeof latestEnd === "undefined") - latestEnd = resource.endTime; - else - latestEnd = Math.max(latestEnd, resource.endTime); - - if (resource.startTime <= segment.end) { - segment.end = Math.max(segment.end, resource.endTime); - continue; - } - - categoryValues[category] += segment.end - segment.start; - - segment.start = resource.startTime; - segment.end = resource.endTime; - } - - // Add the last segment - categoryValues[category] += segment.end - segment.start; - } - - return {categoryValues: categoryValues, total: latestEnd - earliestStart}; - }, - - computeBarGraphPercentages: function(resource) - { - if (resource.startTime !== -1) - var start = ((resource.startTime - this.minimumBoundary) / this.boundarySpan) * 100; - else - var start = 0; - - if (resource.responseReceivedTime !== -1) - var middle = ((resource.responseReceivedTime - this.minimumBoundary) / this.boundarySpan) * 100; - else - var middle = (this.startAtZero ? start : 100); - - if (resource.endTime !== -1) - var end = ((resource.endTime - this.minimumBoundary) / this.boundarySpan) * 100; - else - var end = (this.startAtZero ? middle : 100); - - if (this.startAtZero) { - end -= start; - middle -= start; - start = 0; - } - - return {start: start, middle: middle, end: end}; - }, - - computePercentageFromEventTime: function(eventTime) - { - // This function computes a percentage in terms of the total loading time - // of a specific event. If startAtZero is set, then this is useless, and we - // want to return 0. - if (eventTime !== -1 && !this.startAtZero) - return ((eventTime - this.minimumBoundary) / this.boundarySpan) * 100; - - return 0; - }, - - computeBarGraphLabels: function(resource) - { - var rightLabel = ""; - if (resource.responseReceivedTime !== -1 && resource.endTime !== -1) - rightLabel = this.formatValue(resource.endTime - resource.responseReceivedTime); - - var hasLatency = resource.latency > 0; - if (hasLatency) - var leftLabel = this.formatValue(resource.latency); - else - var leftLabel = rightLabel; - - if (resource.timing) - return {left: leftLabel, right: rightLabel}; - - if (hasLatency && rightLabel) { - var total = this.formatValue(resource.duration); - var tooltip = WebInspector.UIString("%s latency, %s download (%s total)", leftLabel, rightLabel, total); - } else if (hasLatency) - var tooltip = WebInspector.UIString("%s latency", leftLabel); - else if (rightLabel) - var tooltip = WebInspector.UIString("%s download", rightLabel); - - if (resource.cached) - tooltip = WebInspector.UIString("%s (from cache)", tooltip); - return {left: leftLabel, right: rightLabel, tooltip: tooltip}; - }, - - updateBoundaries: function(resource) - { - var didChange = false; - - var lowerBound; - if (this.startAtZero) - lowerBound = 0; - else - lowerBound = this._lowerBound(resource); - - if (lowerBound !== -1 && (typeof this.minimumBoundary === "undefined" || lowerBound < this.minimumBoundary)) { - this.minimumBoundary = lowerBound; - didChange = true; - } - - var upperBound = this._upperBound(resource); - if (upperBound !== -1 && (typeof this.maximumBoundary === "undefined" || upperBound > this.maximumBoundary)) { - this.maximumBoundary = upperBound; - didChange = true; - } - - return didChange; - }, - - formatValue: function(value) - { - return Number.secondsToString(value, WebInspector.UIString); - }, - - _lowerBound: function(resource) - { - return 0; - }, - - _upperBound: function(resource) - { - return 0; - } -} - -WebInspector.ResourceTimeCalculator.prototype.__proto__ = WebInspector.ResourceBaseCalculator.prototype; - -WebInspector.ResourceTransferTimeCalculator = function() -{ - WebInspector.ResourceTimeCalculator.call(this, false); -} - -WebInspector.ResourceTransferTimeCalculator.prototype = { - formatValue: function(value) - { - return Number.secondsToString(value, WebInspector.UIString); - }, - - _lowerBound: function(resource) - { - return resource.startTime; - }, - - _upperBound: function(resource) - { - return resource.endTime; - } -} - -WebInspector.ResourceTransferTimeCalculator.prototype.__proto__ = WebInspector.ResourceTimeCalculator.prototype; - -WebInspector.ResourceTransferDurationCalculator = function() -{ - WebInspector.ResourceTimeCalculator.call(this, true); -} - -WebInspector.ResourceTransferDurationCalculator.prototype = { - formatValue: function(value) - { - return Number.secondsToString(value, WebInspector.UIString); - }, - - _upperBound: function(resource) - { - return resource.duration; - } -} - -WebInspector.ResourceTransferDurationCalculator.prototype.__proto__ = WebInspector.ResourceTimeCalculator.prototype; - -WebInspector.ResourceTransferSizeCalculator = function() -{ - WebInspector.ResourceBaseCalculator.call(this); -} - -WebInspector.ResourceTransferSizeCalculator.prototype = { - computeBarGraphLabels: function(resource) - { - var networkBytes = this._networkBytes(resource); - var resourceBytes = this._value(resource); - if (networkBytes && networkBytes !== resourceBytes) { - // Transferred size is not the same as reported resource length. - var networkBytesString = this.formatValue(networkBytes); - var left = networkBytesString; - var right = this.formatValue(resourceBytes); - var tooltip = right ? WebInspector.UIString("%s (%s transferred)", right, networkBytesString) : right; - } else { - var left = this.formatValue(resourceBytes); - var right = left; - var tooltip = left; - } - if (resource.cached) - tooltip = WebInspector.UIString("%s (from cache)", tooltip); - return {left: left, right: right, tooltip: tooltip}; - }, - - computeBarGraphPercentages: function(item) - { - const resourceBytesAsPercent = (this._value(item) / this.boundarySpan) * 100; - const networkBytesAsPercent = this._networkBytes(item) ? (this._networkBytes(item) / this.boundarySpan) * 100 : resourceBytesAsPercent; - return {start: 0, middle: networkBytesAsPercent, end: resourceBytesAsPercent}; - }, - - _value: function(resource) - { - return resource.resourceSize; - }, - - _networkBytes: function(resource) - { - return resource.transferSize; - }, - - formatValue: function(value) - { - return Number.bytesToString(value, WebInspector.UIString); - } -} - -WebInspector.ResourceTransferSizeCalculator.prototype.__proto__ = WebInspector.ResourceBaseCalculator.prototype; - -WebInspector.ResourceSidebarTreeElement = function(resource) -{ - this.resource = resource; - - this.createIconElement(); - - WebInspector.SidebarTreeElement.call(this, "resource-sidebar-tree-item", "", "", resource); - - this.refreshTitles(); -} - -WebInspector.ResourceSidebarTreeElement.prototype = { - onattach: function() - { - WebInspector.SidebarTreeElement.prototype.onattach.call(this); - - this._listItemNode.addStyleClass("resources-category-" + this.resource.category.name); - this._listItemNode.draggable = true; - - // FIXME: should actually add handler to parent, to be resolved via - // https://bugs.webkit.org/show_bug.cgi?id=30227 - this._listItemNode.addEventListener("dragstart", this.ondragstart.bind(this), false); - this.updateErrorsAndWarnings(); - }, - - onselect: function() - { - WebInspector.panels.resources.showResource(this.resource); - }, - - ondblclick: function(event) - { - InspectorBackend.openInInspectedWindow(this.resource.url); - }, - - ondragstart: function(event) { - event.dataTransfer.setData("text/plain", this.resource.url); - event.dataTransfer.setData("text/uri-list", this.resource.url + "\r\n"); - event.dataTransfer.effectAllowed = "copy"; - return true; - }, - - get mainTitle() - { - return this.resource.displayName; - }, - - set mainTitle(x) - { - // Do nothing. - }, - - get subtitle() - { - var subtitle = this.resource.displayDomain; - - if (this.resource.path && this.resource.lastPathComponent) { - var lastPathComponentIndex = this.resource.path.lastIndexOf("/" + this.resource.lastPathComponent); - if (lastPathComponentIndex != -1) - subtitle += this.resource.path.substring(0, lastPathComponentIndex); - } - - return subtitle; - }, - - set subtitle(x) - { - // Do nothing. - }, - - get selectable() - { - return WebInspector.panels.resources.isCategoryVisible(this.resource.category.name); - }, - - createIconElement: function() - { - var previousIconElement = this.iconElement; - - if (this.resource.category === WebInspector.resourceCategories.images) { - var previewImage = document.createElement("img"); - previewImage.className = "image-resource-icon-preview"; - - function onResourceContent() - { - previewImage.src = this.resource.contentURL; - } - if (Preferences.useDataURLForResourceImageIcons) - this.resource.getContent(onResourceContent.bind(this)); - else - previewImage.src = this.resource.url; - - this.iconElement = document.createElement("div"); - this.iconElement.className = "icon"; - this.iconElement.appendChild(previewImage); - } else { - this.iconElement = document.createElement("img"); - this.iconElement.className = "icon"; - } - - if (previousIconElement) - previousIconElement.parentNode.replaceChild(this.iconElement, previousIconElement); - }, - - refresh: function() - { - this.refreshTitles(); - - if (!this._listItemNode.hasStyleClass("resources-category-" + this.resource.category.name)) { - this._listItemNode.removeMatchingStyleClasses("resources-category-\\w+"); - this._listItemNode.addStyleClass("resources-category-" + this.resource.category.name); - - this.createIconElement(); - } - - this.tooltip = this.resource.url; - }, - - resetBubble: function() - { - this.bubbleText = ""; - this.bubbleElement.removeStyleClass("search-matches"); - this.bubbleElement.removeStyleClass("warning"); - this.bubbleElement.removeStyleClass("error"); - }, - - set searchMatches(matches) - { - this.resetBubble(); - - if (!matches) - return; - - this.bubbleText = matches; - this.bubbleElement.addStyleClass("search-matches"); - }, - - updateErrorsAndWarnings: function() - { - this.resetBubble(); - - if (this.resource.warnings || this.resource.errors) - this.bubbleText = (this.resource.warnings + this.resource.errors); - - if (this.resource.warnings) - this.bubbleElement.addStyleClass("warning"); - - if (this.resource.errors) - this.bubbleElement.addStyleClass("error"); - } -} - -WebInspector.ResourceSidebarTreeElement.CompareByAscendingStartTime = function(a, b) -{ - return WebInspector.Resource.CompareByStartTime(a.resource, b.resource) - || WebInspector.Resource.CompareByEndTime(a.resource, b.resource) - || WebInspector.Resource.CompareByResponseReceivedTime(a.resource, b.resource); -} - -WebInspector.ResourceSidebarTreeElement.CompareByAscendingResponseReceivedTime = function(a, b) -{ - return WebInspector.Resource.CompareByResponseReceivedTime(a.resource, b.resource) - || WebInspector.Resource.CompareByStartTime(a.resource, b.resource) - || WebInspector.Resource.CompareByEndTime(a.resource, b.resource); -} - -WebInspector.ResourceSidebarTreeElement.CompareByAscendingEndTime = function(a, b) -{ - return WebInspector.Resource.CompareByEndTime(a.resource, b.resource) - || WebInspector.Resource.CompareByStartTime(a.resource, b.resource) - || WebInspector.Resource.CompareByResponseReceivedTime(a.resource, b.resource); -} - -WebInspector.ResourceSidebarTreeElement.CompareByDescendingDuration = function(a, b) -{ - return -1 * WebInspector.Resource.CompareByDuration(a.resource, b.resource); -} - -WebInspector.ResourceSidebarTreeElement.CompareByDescendingLatency = function(a, b) -{ - return -1 * WebInspector.Resource.CompareByLatency(a.resource, b.resource); -} - -WebInspector.ResourceSidebarTreeElement.CompareByDescendingSize = function(a, b) -{ - return -1 * WebInspector.Resource.CompareBySize(a.resource, b.resource); -} - -WebInspector.ResourceSidebarTreeElement.CompareByDescendingTransferSize = function(a, b) -{ - return -1 * WebInspector.Resource.CompareByTransferSize(a.resource, b.resource); -} - -WebInspector.ResourceSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype; - -WebInspector.ResourceGraph = function(resource) -{ - this.resource = resource; - - this._graphElement = document.createElement("div"); - this._graphElement.className = "resources-graph-side"; - this._graphElement.addEventListener("mouseover", this.refreshLabelPositions.bind(this), false); - - if (this.resource.cached) - this._graphElement.addStyleClass("resource-cached"); - - this._barAreaElement = document.createElement("div"); - this._barAreaElement.className = "resources-graph-bar-area hidden"; - this._barAreaElement.resource = resource; - this._graphElement.appendChild(this._barAreaElement); - - this._barLeftElement = document.createElement("div"); - this._barLeftElement.className = "resources-graph-bar waiting"; - this._barAreaElement.appendChild(this._barLeftElement); - - this._barRightElement = document.createElement("div"); - this._barRightElement.className = "resources-graph-bar"; - this._barAreaElement.appendChild(this._barRightElement); - - this._labelLeftElement = document.createElement("div"); - this._labelLeftElement.className = "resources-graph-label waiting"; - this._barAreaElement.appendChild(this._labelLeftElement); - - this._labelRightElement = document.createElement("div"); - this._labelRightElement.className = "resources-graph-label"; - this._barAreaElement.appendChild(this._labelRightElement); - - this._graphElement.addStyleClass("resources-category-" + resource.category.name); -} - -WebInspector.ResourceGraph.prototype = { - get graphElement() - { - return this._graphElement; - }, - - refreshLabelPositions: function() - { - this._labelLeftElement.style.removeProperty("left"); - this._labelLeftElement.style.removeProperty("right"); - this._labelLeftElement.removeStyleClass("before"); - this._labelLeftElement.removeStyleClass("hidden"); - - this._labelRightElement.style.removeProperty("left"); - this._labelRightElement.style.removeProperty("right"); - this._labelRightElement.removeStyleClass("after"); - this._labelRightElement.removeStyleClass("hidden"); - - const labelPadding = 10; - const barRightElementOffsetWidth = this._barRightElement.offsetWidth; - const barLeftElementOffsetWidth = this._barLeftElement.offsetWidth; - - if (this._isBarOpaqueAtLeft) { - var leftBarWidth = barLeftElementOffsetWidth - labelPadding; - var rightBarWidth = (barRightElementOffsetWidth - barLeftElementOffsetWidth) - labelPadding; - } else { - var leftBarWidth = (barLeftElementOffsetWidth - barRightElementOffsetWidth) - labelPadding; - var rightBarWidth = barRightElementOffsetWidth - labelPadding; - } - - const labelLeftElementOffsetWidth = this._labelLeftElement.offsetWidth; - const labelRightElementOffsetWidth = this._labelRightElement.offsetWidth; - - const labelBefore = (labelLeftElementOffsetWidth > leftBarWidth); - const labelAfter = (labelRightElementOffsetWidth > rightBarWidth); - const graphElementOffsetWidth = this._graphElement.offsetWidth; - - if (labelBefore && (graphElementOffsetWidth * (this._percentages.start / 100)) < (labelLeftElementOffsetWidth + 10)) - var leftHidden = true; - - if (labelAfter && (graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < (labelRightElementOffsetWidth + 10)) - var rightHidden = true; - - if (barLeftElementOffsetWidth == barRightElementOffsetWidth) { - // The left/right label data are the same, so a before/after label can be replaced by an on-bar label. - if (labelBefore && !labelAfter) - leftHidden = true; - else if (labelAfter && !labelBefore) - rightHidden = true; - } - - if (labelBefore) { - if (leftHidden) - this._labelLeftElement.addStyleClass("hidden"); - this._labelLeftElement.style.setProperty("right", (100 - this._percentages.start) + "%"); - this._labelLeftElement.addStyleClass("before"); - } else { - this._labelLeftElement.style.setProperty("left", this._percentages.start + "%"); - this._labelLeftElement.style.setProperty("right", (100 - this._percentages.middle) + "%"); - } - - if (labelAfter) { - if (rightHidden) - this._labelRightElement.addStyleClass("hidden"); - this._labelRightElement.style.setProperty("left", this._percentages.end + "%"); - this._labelRightElement.addStyleClass("after"); - } else { - this._labelRightElement.style.setProperty("left", this._percentages.middle + "%"); - this._labelRightElement.style.setProperty("right", (100 - this._percentages.end) + "%"); - } - }, - - refresh: function(calculator, isBarOpaqueAtLeft) - { - var percentages = calculator.computeBarGraphPercentages(this.resource); - var labels = calculator.computeBarGraphLabels(this.resource); - - this._percentages = percentages; - - this._barAreaElement.removeStyleClass("hidden"); - - if (!this._graphElement.hasStyleClass("resources-category-" + this.resource.category.name)) { - this._graphElement.removeMatchingStyleClasses("resources-category-\\w+"); - this._graphElement.addStyleClass("resources-category-" + this.resource.category.name); - } - - this._barLeftElement.style.setProperty("left", percentages.start + "%"); - this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%"); - - if (!isBarOpaqueAtLeft) { - this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%"); - this._barRightElement.style.setProperty("left", percentages.middle + "%"); - - if (this._isBarOpaqueAtLeft != isBarOpaqueAtLeft) { - this._barLeftElement.addStyleClass("waiting"); - this._barRightElement.removeStyleClass("waiting-right"); - this._labelLeftElement.addStyleClass("waiting"); - this._labelRightElement.removeStyleClass("waiting-right"); - } - } else { - this._barLeftElement.style.setProperty("right", (100 - percentages.middle) + "%"); - this._barRightElement.style.setProperty("left", percentages.start + "%"); - - if (this._isBarOpaqueAtLeft != isBarOpaqueAtLeft) { - this._barLeftElement.removeStyleClass("waiting"); - this._barRightElement.addStyleClass("waiting-right"); - this._labelLeftElement.removeStyleClass("waiting"); - this._labelRightElement.addStyleClass("waiting-right"); - } - } - - this._isBarOpaqueAtLeft = isBarOpaqueAtLeft; - - this._labelLeftElement.textContent = labels.left; - this._labelRightElement.textContent = labels.right; - - var tooltip = (labels.tooltip || ""); - this._barLeftElement.title = tooltip; - this._labelLeftElement.title = tooltip; - this._labelRightElement.title = tooltip; - this._barRightElement.title = tooltip; - - if (this.resource.cached && !this._graphElement.hasStyleClass("resource-cached")) - this._graphElement.addStyleClass("resource-cached"); - } -} diff --git a/WebCore/inspector/front-end/ScriptsPanel.js b/WebCore/inspector/front-end/ScriptsPanel.js index 8125c1e..66260f9 100644 --- a/WebCore/inspector/front-end/ScriptsPanel.js +++ b/WebCore/inspector/front-end/ScriptsPanel.js @@ -376,7 +376,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,8 +385,8 @@ WebInspector.ScriptsPanel.prototype = { this._updateDebuggerButtons(); - this.sidebarPanes.callstack.update(details.callFrames, this._sourceIDMap); - this.sidebarPanes.callstack.selectedCallFrame = details.callFrames[0]; + this.sidebarPanes.callstack.update(callFrames, this._sourceIDMap); + this.sidebarPanes.callstack.selectedCallFrame = callFrames[0]; WebInspector.currentPanel = this; window.focus(); @@ -608,7 +608,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; @@ -702,16 +702,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) diff --git a/WebCore/inspector/front-end/Settings.js b/WebCore/inspector/front-end/Settings.js index 3fb81f5..4fd0c83 100644 --- a/WebCore/inspector/front-end/Settings.js +++ b/WebCore/inspector/front-end/Settings.js @@ -45,7 +45,7 @@ var Preferences = { onlineDetectionEnabled: true, nativeInstrumentationEnabled: false, resourceExportEnabled: false, - networkPanelEnabled: false, + fileSystemEnabled: false, useDataURLForResourceImageIcons: true } @@ -64,11 +64,15 @@ WebInspector.Settings = function() this.installApplicationSetting("lastActivePanel", "elements"); this.installProjectSetting("breakpoints", {}); + this.installProjectSetting("nativeBreakpoints", []); } WebInspector.Settings.prototype = { installApplicationSetting: function(key, defaultValue) { + if (key in this) + return; + this.__defineGetter__(key, this._get.bind(this, key, defaultValue)); this.__defineSetter__(key, this._set.bind(this, key)); }, @@ -79,6 +83,14 @@ WebInspector.Settings.prototype = { this.__defineSetter__(key, this._setProjectSetting.bind(this, key)); }, + inspectedURLChanged: function(url) + { + var fragmentIndex = url.indexOf("#"); + if (fragmentIndex !== -1) + url = url.substring(0, fragmentIndex); + this._inspectedURL = url; + }, + _get: function(key, defaultValue) { if (key in window.localStorage) { @@ -108,11 +120,7 @@ WebInspector.Settings.prototype = { _formatProjectKey: function(key) { - var url = this._mainResourceURL; - var fragmentIndex = url.indexOf("#"); - if (fragmentIndex !== -1) - url = url.substring(0, fragmentIndex); - return key + "." + url; + return key + ":" + this._inspectedURL; } } diff --git a/WebCore/inspector/front-end/SourceView.js b/WebCore/inspector/front-end/SourceView.js index bfdc058..c7a35f7 100644 --- a/WebCore/inspector/front-end/SourceView.js +++ b/WebCore/inspector/front-end/SourceView.js @@ -84,7 +84,7 @@ WebInspector.SourceView.prototype = { this.attach(); delete this._frameNeedsSetup; - this.resource.getContent(this._contentLoaded.bind(this)); + this.resource.requestContent(this._contentLoaded.bind(this)); }, hasContentTab: function() diff --git a/WebCore/inspector/front-end/StoragePanel.js b/WebCore/inspector/front-end/StoragePanel.js index 2fa54c2..eb4eabb 100644 --- a/WebCore/inspector/front-end/StoragePanel.js +++ b/WebCore/inspector/front-end/StoragePanel.js @@ -31,37 +31,37 @@ WebInspector.StoragePanel = function(database) { WebInspector.Panel.call(this, "storage"); + WebInspector.settings.installApplicationSetting("resourcesLastSelectedItem", {}); + this.createSidebar(); this.sidebarElement.addStyleClass("outline-disclosure filter-all children small"); this.sidebarTreeElement.removeStyleClass("sidebar-tree"); - if (Preferences.networkPanelEnabled) { - this.resourcesListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Frames"), "frame-storage-tree-item"); - this.sidebarTree.appendChild(this.resourcesListTreeElement); - this.resourcesListTreeElement.expand(); - this._treeElementForFrameId = {}; - } + this.resourcesListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Frames"), "Frames", "frame-storage-tree-item"); + this.sidebarTree.appendChild(this.resourcesListTreeElement); + this._treeElementForFrameId = {}; - this.databasesListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Databases"), "database-storage-tree-item"); + this.databasesListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Databases"), "Databases", "database-storage-tree-item"); this.sidebarTree.appendChild(this.databasesListTreeElement); - this.databasesListTreeElement.expand(); - this.localStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Local Storage"), "domstorage-storage-tree-item local-storage"); + this.localStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Local Storage"), "LocalStorage", "domstorage-storage-tree-item local-storage"); this.sidebarTree.appendChild(this.localStorageListTreeElement); - this.localStorageListTreeElement.expand(); - this.sessionStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Session Storage"), "domstorage-storage-tree-item session-storage"); + this.sessionStorageListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Session Storage"), "SessionStorage", "domstorage-storage-tree-item session-storage"); this.sidebarTree.appendChild(this.sessionStorageListTreeElement); - this.sessionStorageListTreeElement.expand(); - this.cookieListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Cookies"), "cookie-storage-tree-item"); + this.cookieListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Cookies"), "Cookies", "cookie-storage-tree-item"); this.sidebarTree.appendChild(this.cookieListTreeElement); - this.cookieListTreeElement.expand(); - - this.applicationCacheListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Application Cache"), "application-cache-storage-tree-item"); + + this.applicationCacheListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("Application Cache"), "ApplicationCache", "application-cache-storage-tree-item"); this.sidebarTree.appendChild(this.applicationCacheListTreeElement); - this.applicationCacheListTreeElement.expand(); + if (Preferences.fileSystemEnabled) { + this.fileSystemListTreeElement = new WebInspector.StorageCategoryTreeElement(this, WebInspector.UIString("File System"), "FileSystem", "file-system-storage-tree-item"); + this.sidebarTree.appendChild(this.fileSystemListTreeElement); + this.fileSystemListTreeElement.expand(); + } + this.storageViews = document.createElement("div"); this.storageViews.id = "storage-views"; this.element.appendChild(this.storageViews); @@ -72,12 +72,17 @@ WebInspector.StoragePanel = function(database) this._databases = []; this._domStorage = []; this._cookieViews = {}; + this._origins = {}; + this._domains = {}; + + this.sidebarElement.addEventListener("mousemove", this._onmousemove.bind(this), false); + this.sidebarElement.addEventListener("mouseout", this._onmouseout.bind(this), false); } WebInspector.StoragePanel.prototype = { get toolbarItemLabel() { - return Preferences.networkPanelEnabled ? WebInspector.UIString("Resources") : WebInspector.UIString("Storage"); + return WebInspector.UIString("Resources"); }, get statusBarItems() @@ -85,8 +90,48 @@ WebInspector.StoragePanel.prototype = { return [this.storageViewStatusBarItemsContainer]; }, + elementsToRestoreScrollPositionsFor: function() + { + return [this.sidebarElement]; + }, + + show: function() + { + WebInspector.Panel.prototype.show.call(this); + + if (this.visibleView instanceof WebInspector.ResourceView) { + // SourceViews are shared between the panels. + this.visibleView.headersVisible = false; + this.visibleView.show(this.storageViews); + } + + if (this._initializedDefaultSelection) + return; + + this._initializedDefaultSelection = true; + var itemURL = WebInspector.settings.resourcesLastSelectedItem; + if (itemURL) { + for (var treeElement = this.sidebarTree.children[0]; treeElement; treeElement = treeElement.traverseNextTreeElement(false, this.sidebarTree, true)) { + if (treeElement.itemURL === itemURL) { + treeElement.select(); + treeElement.reveal(); + return; + } + } + } + this._initDefaultSelection(); + }, + + _initDefaultSelection: function() + { + if (WebInspector.mainResource && this.resourcesListTreeElement && this.resourcesListTreeElement.expanded) + this.showResource(WebInspector.mainResource); + }, + reset: function() { + this._origins = {}; + this._domains = {}; for (var i = 0; i < this._databases.length; ++i) { var database = this._databases[i]; delete database._tableViews; @@ -102,7 +147,9 @@ WebInspector.StoragePanel.prototype = { this._domStorage = []; this._cookieViews = {}; - + + this._fileSystemView = null; + this._applicationCacheView = null; delete this._cachedApplicationCacheViewStatus; @@ -111,7 +158,8 @@ WebInspector.StoragePanel.prototype = { this.sessionStorageListTreeElement.removeChildren(); this.cookieListTreeElement.removeChildren(); this.applicationCacheListTreeElement.removeChildren(); - + if (Preferences.fileSystemEnabled) + this.fileSystemListTreeElement.removeChildren(); this.storageViews.removeChildren(); this.storageViewStatusBarItemsContainer.removeChildren(); @@ -120,11 +168,11 @@ WebInspector.StoragePanel.prototype = { this.sidebarTree.selectedTreeElement.deselect(); }, - addOrUpdateFrame: function(parentFrameId, frameId, displayName) + addOrUpdateFrame: function(parentFrameId, frameId, title, subtitle) { var frameTreeElement = this._treeElementForFrameId[frameId]; if (frameTreeElement) { - frameTreeElement.displayName = displayName; + frameTreeElement.setTitles(title, subtitle); return; } @@ -134,7 +182,7 @@ WebInspector.StoragePanel.prototype = { return; } - var frameTreeElement = new WebInspector.FrameTreeElement(this, frameId, displayName); + var frameTreeElement = new WebInspector.FrameTreeElement(this, frameId, title, subtitle); this._treeElementForFrameId[frameId] = frameTreeElement; // Insert in the alphabetical order, first frames, then resources. @@ -145,7 +193,7 @@ WebInspector.StoragePanel.prototype = { parentTreeElement.insertChild(frameTreeElement, i); return; } - if (child.displayName.localeCompare(frameTreeElement.displayName) > 0) { + if (child.nameForSorting.localeCompare(frameTreeElement.nameForSorting) > 0) { parentTreeElement.insertChild(frameTreeElement, i); return; } @@ -165,6 +213,11 @@ WebInspector.StoragePanel.prototype = { addResourceToFrame: function(frameId, resource) { + this.addDocumentURL(resource.documentURL); + + if (resource.statusCode >= 301 && resource.statusCode <= 303) + return; + var frameTreeElement = this._treeElementForFrameId[frameId]; if (!frameTreeElement) { // This is a frame's main resource, it will be retained @@ -197,6 +250,16 @@ WebInspector.StoragePanel.prototype = { frameTreeElement.removeChildren(); }, + refreshResource: function(resource) + { + // FIXME: do not add XHR in the first place based on the native instrumentation. + if (resource.type === WebInspector.Resource.Type.XHR) { + var resourceTreeElement = this._findTreeElementForResource(resource); + if (resourceTreeElement) + resourceTreeElement.parent.removeChild(resourceTreeElement); + } + }, + addDatabase: function(database) { this._databases.push(database); @@ -205,11 +268,33 @@ WebInspector.StoragePanel.prototype = { database._databasesTreeElement = databaseTreeElement; this.databasesListTreeElement.appendChild(databaseTreeElement); }, - - addCookieDomain: function(domain) + + addDocumentURL: function(url) { - var cookieDomainTreeElement = new WebInspector.CookieTreeElement(this, domain); - this.cookieListTreeElement.appendChild(cookieDomainTreeElement); + var parsedURL = url.asParsedURL(); + if (!parsedURL) + return; + + var domain = parsedURL.host; + if (!this._domains[domain]) { + this._domains[domain] = true; + + var cookieDomainTreeElement = new WebInspector.CookieTreeElement(this, domain); + this.cookieListTreeElement.appendChild(cookieDomainTreeElement); + + var applicationCacheTreeElement = new WebInspector.ApplicationCacheTreeElement(this, domain); + this.applicationCacheListTreeElement.appendChild(applicationCacheTreeElement); + } + + if (Preferences.fileSystemEnabled) { + // FIXME: This should match the SecurityOrigin::toString(), add a test for this. + var securityOrigin = parsedURL.scheme + "://" + parsedURL.host + (parsedURL.port ? (":" + parsedURL.port) : ""); + if (!this._origins[securityOrigin]) { + this._origins[securityOrigin] = true; + var fileSystemTreeElement = new WebInspector.FileSystemTreeElement(this, securityOrigin); + this.fileSystemListTreeElement.appendChild(fileSystemTreeElement); + } + } }, addDOMStorage: function(domStorage) @@ -223,12 +308,6 @@ WebInspector.StoragePanel.prototype = { this.sessionStorageListTreeElement.appendChild(domStorageTreeElement); }, - addApplicationCache: function(domain) - { - var applicationCacheTreeElement = new WebInspector.ApplicationCacheTreeElement(this, domain); - this.applicationCacheListTreeElement.appendChild(applicationCacheTreeElement); - }, - selectDatabase: function(databaseId) { var database; @@ -258,6 +337,15 @@ WebInspector.StoragePanel.prototype = { showSourceLine: function(url, line) { + var resource = WebInspector.resourceManager.resourceForURL(url); + if (resource.type === WebInspector.Resource.Type.XHR) { + // Show XHRs in the network panel only. + if (WebInspector.panels.network && WebInspector.panels.network.canShowSourceLine(url, line)) { + WebInspector.currentPanel = WebInspector.panels.network; + WebInspector.panels.network.showSourceLine(url, line); + } + return; + } this.showResource(WebInspector.resourceManager.resourceForURL(url), line); }, @@ -291,7 +379,7 @@ WebInspector.StoragePanel.prototype = { { if (!database) return; - + var view; if (tableName) { if (!("_tableViews" in database)) @@ -352,6 +440,12 @@ WebInspector.StoragePanel.prototype = { this._applicationCacheView.updateStatus(this._cachedApplicationCacheViewStatus); }, + showFileSystem: function(treeElement, origin) + { + this._fileSystemView = new WebInspector.FileSystemView(treeElement, origin); + this._innerShowView(this._fileSystemView); + }, + showCategoryView: function(categoryName) { if (!this._categoryView) @@ -500,6 +594,24 @@ WebInspector.StoragePanel.prototype = { this._applicationCacheView.updateStatus(status); }, + updateFileSystemPath: function(root, type, origin) + { + if (this._fileSystemView && this._fileSystemView === this.visibleView) + this._fileSystemView.updateFileSystemPath(root, type, origin); + }, + + updateFileSystemError: function(type, origin) + { + if (this._fileSystemView && this._fileSystemView === this.visibleView) + this._fileSystemView.updateFileSystemError(type, origin); + }, + + setFileSystemDisabled: function() + { + if (this._fileSystemView && this._fileSystemView === this.visibleView) + this._fileSystemView.setFileSystemDisabled(); + }, + updateNetworkState: function(isNowOnline) { if (this._applicationCacheView && this._applicationCacheView === this.visibleView) @@ -536,9 +648,6 @@ WebInspector.StoragePanel.prototype = { { var views = []; - if (!Preferences.networkPanelEnabled) - return views; - const visibleView = this.visibleView; if (visibleView instanceof WebInspector.ResourceView && visibleView.performSearch) views.push(visibleView); @@ -576,13 +685,13 @@ WebInspector.StoragePanel.prototype = { { function isAncestor(ancestor, object) { - console.error("There should be no calls to isAncestor, but there was one for ", object); + // Redirects, XHRs do not belong to the tree, it is fine to silently return false here. return false; } function getParent(object) { - console.error("There should be no calls to getParent, but there was one for ", object); + // Redirects, XHRs do not belong to the tree, it is fine to silently return false here. return null; } @@ -617,6 +726,39 @@ WebInspector.StoragePanel.prototype = { { if (view) this.showResource(view.resource); + }, + + _onmousemove: function(event) + { + var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY); + if (!nodeUnderMouse) + return; + + var listNode = nodeUnderMouse.enclosingNodeOrSelfWithNodeName("li"); + if (!listNode) + return; + + var element = listNode.treeElement; + if (this._previousHoveredElement === element) + return; + + if (this._previousHoveredElement) { + this._previousHoveredElement.hovered = false; + delete this._previousHoveredElement; + } + + if (element instanceof WebInspector.FrameTreeElement) { + this._previousHoveredElement = element; + element.hovered = true; + } + }, + + _onmouseout: function(event) + { + if (this._previousHoveredElement) { + this._previousHoveredElement.hovered = false; + delete this._previousHoveredElement; + } } } @@ -650,12 +792,24 @@ WebInspector.BaseStorageTreeElement.prototype = { this.listItemElement.appendChild(this.titleElement); }, + onselect: function() + { + var itemURL = this.itemURL; + if (itemURL) + WebInspector.settings.resourcesLastSelectedItem = itemURL; + }, + onreveal: function() { if (this.listItemElement) this.listItemElement.scrollIntoViewIfNeeded(false); }, + get titleText() + { + return this._titleText; + }, + set titleText(titleText) { this._titleText = titleText; @@ -675,42 +829,109 @@ WebInspector.BaseStorageTreeElement.prototype = { WebInspector.BaseStorageTreeElement.prototype.__proto__ = TreeElement.prototype; -WebInspector.StorageCategoryTreeElement = function(storagePanel, categoryName, iconClass) +WebInspector.StorageCategoryTreeElement = function(storagePanel, categoryName, settingsKey, iconClass) { WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, categoryName, iconClass, true); + this._expandedSettingKey = "resources" + settingsKey + "Expanded"; + WebInspector.settings.installApplicationSetting(this._expandedSettingKey, settingsKey === "Frames"); this._categoryName = categoryName; } WebInspector.StorageCategoryTreeElement.prototype = { + get itemURL() + { + return "category://" + this._categoryName; + }, + onselect: function() { + WebInspector.BaseStorageTreeElement.prototype.onselect.call(this); this._storagePanel.showCategoryView(this._categoryName); + }, + + onattach: function() + { + WebInspector.BaseStorageTreeElement.prototype.onattach.call(this); + if (WebInspector.settings[this._expandedSettingKey]) + this.expand(); + }, + + onexpand: function() + { + WebInspector.settings[this._expandedSettingKey] = true; + }, + + oncollapse: function() + { + WebInspector.settings[this._expandedSettingKey] = false; } } WebInspector.StorageCategoryTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype; -WebInspector.FrameTreeElement = function(storagePanel, frameId, displayName) +WebInspector.FrameTreeElement = function(storagePanel, frameId, title, subtitle) { - WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, displayName, "frame-storage-tree-item"); + WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, "", "frame-storage-tree-item"); this._frameId = frameId; - this._displayName = displayName; + this.setTitles(title, subtitle); } WebInspector.FrameTreeElement.prototype = { + get itemURL() + { + return "frame://" + encodeURI(this._displayName); + }, + + onattach: function() + { + WebInspector.BaseStorageTreeElement.prototype.onattach.call(this); + if (this._titleToSetOnAttach || this._subtitleToSetOnAttach) { + this.setTitles(this._titleToSetOnAttach, this._subtitleToSetOnAttach); + delete this._titleToSetOnAttach; + delete this._subtitleToSetOnAttach; + } + }, + onselect: function() { + WebInspector.BaseStorageTreeElement.prototype.onselect.call(this); this._storagePanel.showCategoryView(this._displayName); + + this.listItemElement.removeStyleClass("hovered"); + InspectorBackend.hideFrameHighlight(); }, - get displayName() + get nameForSorting() { - return this._displayName; + return this._nameForSorting; }, - set displayName(displayName) + setTitles: function(title, subtitle) + { + this._nameForSorting = (title ? title : "") + (subtitle ? subtitle : ""); + if (this.parent) { + if (title) + this.titleElement.textContent = title; + if (subtitle) { + var subtitleElement = document.createElement("span"); + subtitleElement.className = "base-storage-tree-element-subtitle"; + subtitleElement.textContent = "(" + subtitle + ")"; + this.titleElement.appendChild(subtitleElement); + } + } else { + this._titleToSetOnAttach = title; + this._subtitleToSetOnAttach = subtitle; + } + }, + + set hovered(hovered) { - this._displayName = displayName; - this.titleText = displayName; + if (hovered) { + this.listItemElement.addStyleClass("hovered"); + InspectorBackend.highlightFrame(this._frameId); + } else { + this.listItemElement.removeStyleClass("hovered"); + InspectorBackend.hideFrameHighlight(); + } } } WebInspector.FrameTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype; @@ -724,8 +945,14 @@ WebInspector.FrameResourceTreeElement = function(storagePanel, resource) } WebInspector.FrameResourceTreeElement.prototype = { + get itemURL() + { + return this._resource.url; + }, + onselect: function() { + WebInspector.BaseStorageTreeElement.prototype.onselect.call(this); this._storagePanel._showResourceView(this._resource); }, @@ -836,8 +1063,14 @@ WebInspector.DatabaseTreeElement = function(storagePanel, database) } WebInspector.DatabaseTreeElement.prototype = { + get itemURL() + { + return "database://" + encodeURI(this._database.name); + }, + onselect: function() { + WebInspector.BaseStorageTreeElement.prototype.onselect.call(this); this._storagePanel.showDatabase(this._database); }, @@ -872,8 +1105,14 @@ WebInspector.DatabaseTableTreeElement = function(storagePanel, database, tableNa } WebInspector.DatabaseTableTreeElement.prototype = { + get itemURL() + { + return "database://" + encodeURI(this._database.name) + "/" + encodeURI(this._tableName); + }, + onselect: function() { + WebInspector.BaseStorageTreeElement.prototype.onselect.call(this); this._storagePanel.showDatabase(this._database, this._tableName); } } @@ -886,8 +1125,14 @@ WebInspector.DOMStorageTreeElement = function(storagePanel, domStorage, classNam } WebInspector.DOMStorageTreeElement.prototype = { + get itemURL() + { + return "storage://" + this._domStorage.domain + "/" + (this._domStorage.isLocalStorage ? "local" : "session"); + }, + onselect: function() { + WebInspector.BaseStorageTreeElement.prototype.onselect.call(this); this._storagePanel.showDOMStorage(this._domStorage); } } @@ -900,8 +1145,14 @@ WebInspector.CookieTreeElement = function(storagePanel, cookieDomain) } WebInspector.CookieTreeElement.prototype = { + get itemURL() + { + return "cookies://" + this._cookieDomain; + }, + onselect: function() { + WebInspector.BaseStorageTreeElement.prototype.onselect.call(this); this._storagePanel.showCookies(this, this._cookieDomain); } } @@ -914,13 +1165,40 @@ WebInspector.ApplicationCacheTreeElement = function(storagePanel, appcacheDomain } WebInspector.ApplicationCacheTreeElement.prototype = { + get itemURL() + { + return "appcache://" + this._appcacheDomain; + }, + onselect: function() { + WebInspector.BaseStorageTreeElement.prototype.onselect.call(this); this._storagePanel.showApplicationCache(this, this._appcacheDomain); } } WebInspector.ApplicationCacheTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype; +WebInspector.FileSystemTreeElement = function(storagePanel, origin) +{ + WebInspector.BaseStorageTreeElement.call(this, storagePanel, null, origin, "file-system-storage-tree-item"); + this._origin = origin; +} + +WebInspector.FileSystemTreeElement.prototype = { + get itemURL() + { + return "file-system://" + encodeURI(this._origin); + }, + + onselect: function() + { + WebInspector.BaseStorageTreeElement.prototype.onselect.call(this); + this._storagePanel.showFileSystem(this, this._origin); + } +} + +WebInspector.FileSystemTreeElement.prototype.__proto__ = WebInspector.BaseStorageTreeElement.prototype; + WebInspector.StorageCategoryView = function() { WebInspector.View.call(this); diff --git a/WebCore/inspector/front-end/StylesSidebarPane.js b/WebCore/inspector/front-end/StylesSidebarPane.js index cc97520..6d1b541 100644 --- a/WebCore/inspector/front-end/StylesSidebarPane.js +++ b/WebCore/inspector/front-end/StylesSidebarPane.js @@ -60,7 +60,7 @@ WebInspector.StylesSidebarPane = function(computedStylePane) this.settingsSelectElement.addEventListener("click", function(event) { event.stopPropagation() }, false); this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false); - var format = WebInspector.applicationSettings.colorFormat; + var format = WebInspector.settings.colorFormat; if (format === "hex") this.settingsSelectElement[0].selected = true; else if (format === "rgb") @@ -465,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; } @@ -477,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]; @@ -562,15 +562,15 @@ WebInspector.ComputedStyleSidebarPane = function() var showInheritedCheckbox = new WebInspector.Checkbox(WebInspector.UIString("Show inherited"), "sidebar-pane-subtitle"); this.titleElement.appendChild(showInheritedCheckbox.element); - if (WebInspector.applicationSettings.showInheritedComputedStyleProperties) { + if (WebInspector.settings.showInheritedComputedStyleProperties) { this.bodyElement.addStyleClass("show-inherited"); showInheritedCheckbox.checked = true; } 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"); @@ -1010,8 +1010,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) { @@ -1200,9 +1201,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"); diff --git a/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js b/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js index 11b0e03..44063a3 100644 --- a/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js +++ b/WebCore/inspector/front-end/WatchExpressionsSidebarPane.js @@ -39,7 +39,7 @@ WebInspector.WatchExpressionsSidebarPane.prototype = { { 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; } } diff --git a/WebCore/inspector/front-end/WebKit.qrc b/WebCore/inspector/front-end/WebKit.qrc index 481f8b3..ebdd4f6 100644 --- a/WebCore/inspector/front-end/WebKit.qrc +++ b/WebCore/inspector/front-end/WebKit.qrc @@ -41,6 +41,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> @@ -70,7 +71,6 @@ <file>Resource.js</file> <file>ResourceCategory.js</file> <file>ResourceManager.js</file> - <file>ResourcesPanel.js</file> <file>ResourceView.js</file> <file>ScopeChainSidebarPane.js</file> <file>Script.js</file> @@ -167,7 +167,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> @@ -198,7 +197,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> @@ -273,7 +271,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> diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css index 429e749..b26b748 100644 --- a/WebCore/inspector/front-end/inspector.css +++ b/WebCore/inspector/front-end/inspector.css @@ -508,7 +508,7 @@ body.drawer-visible #drawer { } .monospace { - font-size: 10px; + font-size: 10px !important; font-family: monospace; } @@ -519,17 +519,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; } @@ -1176,7 +1176,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; } @@ -1311,26 +1311,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; } -.event-bar:first-child { - margin-top: 1px; +.events-pane .section:not(:nth-of-type(1)) { + border-top: 1px solid rgb(191, 191, 191); } -.event-bar:nth-last-of-type(1) .header { - border-bottom: 1px solid rgb(163, 163, 163); +.event-bar:first-child { + margin-top: 1px; } .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; @@ -1339,22 +1334,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 { @@ -1371,10 +1367,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; } @@ -1389,6 +1383,7 @@ body.inactive .placard.selected { .section.expanded .properties, .event-bar.expanded .event-properties { display: block; + padding-left: 16px; } .section.no-affect .properties li { @@ -1401,7 +1396,7 @@ body.inactive .placard.selected { .properties-tree { margin: 0; - padding: 2px 6px 3px; + padding: 0 6px 2px; list-style: none; min-height: 18px; } @@ -1453,19 +1448,23 @@ body.inactive .placard.selected { } .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 { @@ -1478,38 +1477,21 @@ body.inactive .placard.selected { .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); + 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; } @@ -1519,7 +1501,7 @@ body.inactive .placard.selected { .event-bars .event-bar .header::before { position: absolute; - top: 4px; + top: 2px; left: 7px; width: 8px; height: 8px; @@ -1744,11 +1726,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 { @@ -1932,6 +1915,11 @@ body.inactive .sidebar { content: url(Images/applicationCache.png); } +/* FIXME: Make separate png for file-system */ +.file-system-storage-tree-item .icon { + content: url(Images/applicationCache.png); +} + #storage-views { position: absolute; top: 0; @@ -1963,18 +1951,18 @@ body.inactive .sidebar { font-weight: bold; } -.storage.panel .sidebar li .selection { +.storage.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; } -.storage.panel .sidebar :focus li .selection { +.storage.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 .storage.panel .sidebar li .selection { +body.inactive .storage.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); } @@ -1993,6 +1981,16 @@ body.inactive .storage.panel .sidebar li .selection { 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; +} + .storage.panel .status { float: right; height: 16px; @@ -2494,10 +2492,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); } @@ -2677,8 +2671,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; - height: 18px; + padding: 3px 7px 2px; + height: 21px; border: 1px solid transparent; border-bottom: none; } @@ -4095,7 +4089,7 @@ button.enable-toggle-status-bar-item .glyph { } ol.breakpoint-list { - -webkit-padding-start: 2px; + -webkit-padding-start: 0; list-style: none; margin: 0; } @@ -4104,9 +4098,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 { @@ -4128,8 +4121,8 @@ ol.breakpoint-list { margin: 2px 0 0px 20px; } -.breakpoint-list .breakpoint-hit { - background-color: yellow; +.pane .breakpoint-hit { + background-color: rgb(255, 255, 194); } .webkit-html-js-node, .webkit-html-css-node { @@ -4391,3 +4384,11 @@ a.worker-item:hover { text-decoration: underline; cursor: pointer; } + +.cursor-pointer { + cursor: pointer; +} + +.cursor-auto { + cursor: auto; +}
\ No newline at end of file diff --git a/WebCore/inspector/front-end/inspector.html b/WebCore/inspector/front-end/inspector.html index 96d0cfe..c681531 100644 --- a/WebCore/inspector/front-end/inspector.html +++ b/WebCore/inspector/front-end/inspector.html @@ -69,6 +69,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. <script type="text/javascript" src="DataGrid.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,7 +96,6 @@ 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> diff --git a/WebCore/inspector/front-end/inspector.js b/WebCore/inspector/front-end/inspector.js index f5a70c8..8323cad 100644 --- a/WebCore/inspector/front-end/inspector.js +++ b/WebCore/inspector/front-end/inspector.js @@ -50,8 +50,6 @@ var WebInspector = { resources: {}, - cookieDomains: {}, - applicationCacheDomains: {}, missingLocalizedStrings: {}, pendingDispatches: 0, @@ -181,7 +179,7 @@ var WebInspector = { for (var panelName in WebInspector.panels) { if (WebInspector.panels[panelName] === x) { - WebInspector.applicationSettings.lastActivePanel = panelName; + WebInspector.settings.lastActivePanel = panelName; this._panelHistory.setPanel(panelName); } } @@ -192,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; @@ -203,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; @@ -214,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; @@ -226,15 +224,9 @@ var WebInspector = { if (hiddenPanels.indexOf("elements") === -1) this.panels.elements = new WebInspector.ElementsPanel(); - if (Preferences.networkPanelEnabled) { - if (hiddenPanels.indexOf("storage") === -1 && hiddenPanels.indexOf("databases") === -1) - this.panels.storage = new WebInspector.StoragePanel(); - if (hiddenPanels.indexOf("network") === -1) - this.panels.network = new WebInspector.NetworkPanel(); - } else if (hiddenPanels.indexOf("resources") === -1) - this.panels.resources = new WebInspector.ResourcesPanel(); - - if (Preferences.networkPanelEnabled && hiddenPanels.indexOf("network") === -1) + if (hiddenPanels.indexOf("storage") === -1 && hiddenPanels.indexOf("databases") === -1) + this.panels.storage = new WebInspector.StoragePanel(); + if (hiddenPanels.indexOf("network") === -1) this.panels.network = new WebInspector.NetworkPanel(); if (hiddenPanels.indexOf("scripts") === -1) this.panels.scripts = new WebInspector.ScriptsPanel(); @@ -246,12 +238,6 @@ var WebInspector = { if (Preferences.heapProfilerPresent) this.panels.profiles.registerProfileType(new WebInspector.HeapSnapshotProfileType()); } - - if (!Preferences.networkPanelEnabled) { - if (hiddenPanels.indexOf("storage") === -1 && hiddenPanels.indexOf("databases") === -1) - this.panels.storage = new WebInspector.StoragePanel(); - } - if (hiddenPanels.indexOf("audits") === -1) this.panels.audits = new WebInspector.AuditsPanel(); if (hiddenPanels.indexOf("console") === -1) @@ -455,29 +441,17 @@ var WebInspector = { get networkResources() { - if (Preferences.networkPanelEnabled) - return this.panels.network.resources; - else - return this.resources; + return this.panels.network.resources; }, forAllResources: function(callback) { - if (Preferences.networkPanelEnabled) - WebInspector.resourceManager.forAllResources(callback); - else { - for (var id in this.resources) { - if (callback(this.resources[id])) - return; - } - } + WebInspector.resourceManager.forAllResources(callback); }, resourceForURL: function(url) { - if (Preferences.networkPanelEnabled) - return this.resourceManager.resourceForURL(url); - return this.panels.resources.resourceURLMap[url]; + return this.resourceManager.resourceForURL(url); } } @@ -530,7 +504,7 @@ WebInspector.doLoadedDone = function() document.body.addStyleClass("port-" + port); InspectorFrontendHost.loaded(); - WebInspector.applicationSettings = new WebInspector.Settings(); + WebInspector.settings = new WebInspector.Settings(); this._registerShortcuts(); @@ -544,8 +518,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; - if (Preferences.networkPanelEnabled) - this.resourceManager = new WebInspector.ResourceManager(); + this.resourceManager = new WebInspector.ResourceManager(); this.domAgent = new WebInspector.DOMAgent(); this.resourceCategories = { @@ -555,7 +528,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)") }; @@ -573,10 +546,9 @@ WebInspector.doLoadedDone = function() for (var panelName in this.panels) previousToolbarItem = WebInspector.addPanelToolbarIcon(toolbarElement, this.panels[panelName], previousToolbarItem); - if (Preferences.networkPanelEnabled) { - this.panels.storage._toolbarItem.removeStyleClass("storage"); - this.panels.storage._toolbarItem.addStyleClass("resources"); - } + // FIXME: fix this once renamed StoragePanel.js to ResourcesPanel.js + this.panels.storage._toolbarItem.removeStyleClass("storage"); + this.panels.storage._toolbarItem.addStyleClass("resources"); this.Tips = { ResourceNotCompressed: {id: 0, message: WebInspector.UIString("You could save bandwidth by having your web server compress this transfer with gzip or zlib.")} @@ -630,19 +602,13 @@ WebInspector.doLoadedDone = function() WebInspector.monitoringXHREnabled = inspectorState.monitoringXHREnabled; if ("pauseOnExceptionsState" in inspectorState) WebInspector.panels.scripts.updatePauseOnExceptionsState(inspectorState.pauseOnExceptionsState); - if (WebInspector.panels.resources) { - if (inspectorState.resourceTrackingEnabled) - WebInspector.panels.resources.resourceTrackingWasEnabled(); - else - WebInspector.panels.resources.resourceTrackingWasDisabled(); - } } InspectorBackend.getInspectorState(populateInspectorState); function onPopulateScriptObjects() { if (!WebInspector.currentPanel) - WebInspector.showPanel(WebInspector.applicationSettings.lastActivePanel); + WebInspector.showPanel(WebInspector.settings.lastActivePanel); } InspectorBackend.populateScriptObjects(onPopulateScriptObjects); @@ -844,13 +810,8 @@ WebInspector.openResource = function(resourceURL, inResourcesPanel) { var resource = WebInspector.resourceForURL(resourceURL); if (inResourcesPanel && resource) { - if (Preferences.networkPanelEnabled) { - WebInspector.panels.storage.showResource(resource); - WebInspector.showPanel("storage"); - } else { - WebInspector.panels.resources.showResource(resource); - WebInspector.showPanel("resources"); - } + WebInspector.panels.storage.showResource(resource); + WebInspector.showPanel("storage"); } else InspectorBackend.openInInspectedWindow(resource ? resource.url : resourceURL); } @@ -1245,6 +1206,10 @@ WebInspector.showChanges = function() WebInspector.showPanel = function(panel) { + // FIXME: fix this once renamed StoragePanel.js to ResourcesPanel.js + if (panel === "resources") + panel = "storage"; + if (!(panel in this.panels)) panel = "elements"; this.currentPanel = this.panels[panel]; @@ -1267,85 +1232,8 @@ WebInspector.selectDOMStorage = function(o) WebInspector.panels.storage.selectDOMStorage(o); } -WebInspector.updateResource = function(payload) -{ - if (Preferences.networkPanelEnabled) - return; - - var identifier = payload.id; - var resource = this.resources[identifier]; - if (!resource) { - resource = new WebInspector.Resource(identifier, payload.url); - this.resources[identifier] = resource; - this.panels.resources.addResource(resource); - this.panels.audits.resourceStarted(resource); - } - - if (payload.didRequestChange) { - 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 parsedURL = payload.documentURL.asParsedURL(); - if (parsedURL) { - this._addCookieDomain(parsedURL.host); - this._addAppCacheDomain(parsedURL.host); - } - } - - 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.localizedFailDescription = payload.localizedFailDescription; - 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; - } - this.panels.resources.refreshResource(resource); -} - WebInspector.domContentEventFired = function(time) { - if (this.panels.resources) - this.panels.resources.mainResourceDOMContentTime = time; this.panels.audits.mainResourceDOMContentTime = time; if (this.panels.network) this.panels.network.mainResourceDOMContentTime = time; @@ -1354,29 +1242,12 @@ WebInspector.domContentEventFired = function(time) WebInspector.loadEventFired = function(time) { - if (this.panels.resources) - this.panels.resources.mainResourceLoadTime = time; this.panels.audits.mainResourceLoadTime = time; if (this.panels.network) this.panels.network.mainResourceLoadTime = time; this.mainResourceLoadTime = time; } -WebInspector.removeResource = function(identifier) -{ - if (Preferences.networkPanelEnabled) - return; - - var resource = this.resources[identifier]; - if (!resource) - return; - - delete this.resources[identifier]; - - if (this.panels.resources) - this.panels.resources.removeResource(resource); -} - WebInspector.addDatabase = function(payload) { if (!this.panels.storage) @@ -1389,30 +1260,6 @@ WebInspector.addDatabase = function(payload) 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); -} - WebInspector.addDOMStorage = function(payload) { if (!this.panels.storage) @@ -1434,6 +1281,21 @@ WebInspector.updateApplicationCacheStatus = function(status) this.panels.storage.updateApplicationCacheStatus(status); } +WebInspector.didGetFileSystemPath = function(root, type, origin) +{ + this.panels.storage.updateFileSystemPath(root, type, origin); +} + +WebInspector.didGetFileSystemError = function(type, origin) +{ + this.panels.storage.updateFileSystemError(type, origin); +} + +WebInspector.didGetFileSystemDisabled = function() +{ + this.panels.storage.setFileSystemDisabled(); +} + WebInspector.updateNetworkState = function(isNowOnline) { this.panels.storage.updateNetworkState(isNowOnline); @@ -1491,7 +1353,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(); } @@ -1513,15 +1375,12 @@ WebInspector.reset = function() } this.resources = {}; - this.cookieDomains = {}; - this.applicationCacheDomains = {}; this.highlightDOMNode(0); - if (!Preferences.networkPanelEnabled) - delete this.mainResource; - this.console.clearMessages(); this.extensionServer.notifyInspectorReset(); + + this.breakpointManager.restoreBreakpoints(); } WebInspector.resetProfilesPanel = function() @@ -1538,7 +1397,12 @@ WebInspector.bringToFront = function() WebInspector.inspectedURLChanged = function(url) { InspectorFrontendHost.inspectedURLChanged(url); + this.settings.inspectedURLChanged(url); this.extensionServer.notifyInspectedURLChanged(); + if (!this._breakpointsRestored) { + this.breakpointManager.restoreBreakpoints(); + this._breakpointsRestored = true; + } } WebInspector.didCommitLoad = function() @@ -1669,7 +1533,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, @@ -1678,7 +1542,6 @@ WebInspector.setRecordingProfile = function(isProfiling) isTemporary: true }; } - this._previousIsProfiling = isProfiling; if (isProfiling) this.panels.profiles.addProfileHeader(this._temporaryRecordingProfile); else @@ -1749,13 +1612,14 @@ WebInspector.displayNameForURL = function(url) WebInspector._choosePanelToShowSourceLine = function(url, line, preferredPanel) { preferredPanel = preferredPanel || "resources"; - if (Preferences.networkPanelEnabled && preferredPanel === "resources") + // FIXME: remove this once StoragePanel renamed to ResourcesPanel + if (preferredPanel === "resources") preferredPanel = "storage"; var panel = this.panels[preferredPanel]; if (panel && panel.canShowSourceLine(url, line)) return panel; - panel = Preferences.networkPanelEnabled ? this.panels.storage : this.panels.resources; + panel = this.panels.storage; return panel.canShowSourceLine(url, line) ? panel : null; } @@ -1777,6 +1641,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); @@ -1794,8 +1659,17 @@ WebInspector.linkifyStringAsFragment = function(string) title = WebInspector.panels.profiles.displayTitleForProfileLink(profileStringMatches[2], profileStringMatches[1]); var realURL = (linkString.indexOf("www.") === 0 ? "http://" + linkString : linkString); + var lineColumnMatch = lineColumnRegEx.exec(realURL); + if (lineColumnMatch) + realURL = realURL.substring(0, realURL.length - lineColumnMatch[0].length); + var hasResourceWithURL = !!WebInspector.resourceForURL(realURL); - container.appendChild(WebInspector.linkifyURLAsNode(realURL, title, null, hasResourceWithURL)); + 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); } diff --git a/WebCore/inspector/front-end/networkPanel.css b/WebCore/inspector/front-end/networkPanel.css index 215681f..1e0e813 100644 --- a/WebCore/inspector/front-end/networkPanel.css +++ b/WebCore/inspector/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,17 +12,17 @@ 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); @@ -30,34 +30,34 @@ vertical-align: middle; } -.network.panel .data-grid.small td { +.network-sidebar .data-grid.small td { height: 17px; } -.network.panel .data-grid th { +.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; @@ -66,32 +66,32 @@ font-weight: bold; } -.network.panel .data-grid tr.filler { +.network-sidebar .data-grid tr.filler { background-color: white; } -.network.panel .data-grid td.name-column { +.network-sidebar .data-grid td.name-column { font-weight: bold; } -.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.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; } @@ -104,66 +104,66 @@ color: grey; } -.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; @@ -171,12 +171,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; @@ -189,7 +189,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; @@ -407,7 +407,7 @@ z-index: 300; } -.network.panel .network-timeline-grid.small .network-event-divider { +.network-sidebar .network-timeline-grid.small .network-event-divider { top: 23px; } @@ -419,40 +419,40 @@ background-color: rgba(0, 0, 255, 0.5); } -.network.panel .resources-dividers { +.network-sidebar .resources-dividers { z-index: 0; } -.network.panel .resources-dividers-label-bar { +.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; } @@ -487,10 +487,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 { @@ -505,14 +507,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; } @@ -544,7 +546,7 @@ left: 0; } -.network-close-button { +#network-close-button { position: absolute; width: 14px; height: 14px; @@ -552,21 +554,39 @@ background-position: 0 0; background-color: transparent; border: 0 none transparent; - top: 4px; - right: 5px; + top: 8px; + left: 5px; z-index: 10; + display: none; +} + +#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 .data-grid.full-grid-mode .viewer-column { +.network.panel.viewing-resource #network-close-button { + display: block; +} + + +.network-sidebar .data-grid.full-grid-mode .viewer-column { 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-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; } @@ -574,12 +594,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; } @@ -595,7 +615,7 @@ display: none; } -.network.panel.viewing-resource .data-grid-resizer { +.network.panel.viewing-resource .network-sidebar .data-grid-resizer { display: none; } @@ -604,19 +624,17 @@ padding-top: 5px; } -#network-views .resource-view.headers-visible .resource-view-content { - top: 31px; -} - -#network-views.small .resource-view.headers-visible .resource-view-content { - top: 23px; -} - -#network-views .resource-view-headers { +#network-views .resource-view-headers, +#network-views .resource-view-content, +#network-views .resource-view-cookies +{ top: 31px; } -#network-views.small .resource-view-headers { +#network-views.small .resource-view-headers, +#network-views.small .resource-view-content, +#network-views.small .resource-view-cookies +{ top: 23px; } @@ -627,12 +645,13 @@ #network-views .resource-view .tabbed-pane-header { height: 31px; - padding-top: 11px; + padding-top: 8px; + padding-left: 25px; } #network-views.small .resource-view .tabbed-pane-header { height: 23px; - padding-top: 3px; + padding-top: 0; } .network.panel.viewing-resource .data-grid .data-container { |
