diff options
Diffstat (limited to 'WebCore/inspector/front-end')
24 files changed, 686 insertions, 509 deletions
diff --git a/WebCore/inspector/front-end/BreakpointManager.js b/WebCore/inspector/front-end/BreakpointManager.js index 21fa6a4..824bc31 100644 --- a/WebCore/inspector/front-end/BreakpointManager.js +++ b/WebCore/inspector/front-end/BreakpointManager.js @@ -50,22 +50,16 @@ WebInspector.BreakpointManager.prototype = { } }, - setBreakpoint: function(sourceID, sourceURL, line, enabled, condition) + setBreakpoint: function(sourceID, url, line, enabled, condition) { - var breakpoint = this._setBreakpoint(sourceID, sourceURL, line, enabled, condition); + var breakpoint = this._setBreakpoint(sourceID, url, line, enabled, condition); if (breakpoint) this._setBreakpointOnBackend(breakpoint); }, - restoredBreakpoint: function(sourceID, sourceURL, line, enabled, condition) + restoredBreakpoint: function(sourceID, url, line, enabled, condition) { - this._setBreakpoint(sourceID, sourceURL, line, enabled, condition); - }, - - removeBreakpoint: function(breakpoint) - { - if (this._removeBreakpoint(breakpoint)) - InspectorBackend.removeBreakpoint(breakpoint.sourceID, breakpoint.line); + this._setBreakpoint(sourceID, url, line, enabled, condition); }, breakpointsForSourceID: function(sourceID) @@ -94,27 +88,22 @@ WebInspector.BreakpointManager.prototype = { delete this._oneTimeBreakpoint; }, - _setBreakpoint: function(sourceID, sourceURL, line, enabled, condition) + _setBreakpoint: function(sourceID, url, line, enabled, condition) { - var breakpoint = new WebInspector.Breakpoint(this, sourceID, sourceURL, line, enabled, condition); + var breakpoint = new WebInspector.Breakpoint(this, sourceID, url, line, enabled, condition); if (this._breakpoints[breakpoint.id]) return; if (this._oneTimeBreakpoint && (this._oneTimeBreakpoint.id == breakpoint.id)) delete this._oneTimeBreakpoint; this._breakpoints[breakpoint.id] = breakpoint; + breakpoint.addEventListener("removed", this._breakpointRemoved, this); this.dispatchEventToListeners("breakpoint-added", breakpoint); return breakpoint; }, - _removeBreakpoint: function(breakpoint) + _breakpointRemoved: function(event) { - if (!(breakpoint.id in this._breakpoints)) - return false; - breakpoint.removeAllListeners(); - delete breakpoint._breakpointManager; - delete this._breakpoints[breakpoint.id]; - this.dispatchEventToListeners("breakpoint-removed", breakpoint); - return true; + delete this._breakpoints[event.target.id]; }, _setBreakpointOnBackend: function(breakpoint, isOneTime) @@ -129,9 +118,9 @@ WebInspector.BreakpointManager.prototype = { else delete this._oneTimeBreakpoint; } else { - this._removeBreakpoint(breakpoint); + breakpoint.remove(); if (success) - this._setBreakpoint(breakpoint.sourceID, breakpoint.sourceURL, line, breakpoint.enabled, breakpoint.condition); + this._setBreakpoint(breakpoint.sourceID, breakpoint.url, line, breakpoint.enabled, breakpoint.condition); } } var callbackId = WebInspector.Callback.wrap(didSetBreakpoint.bind(this)); @@ -141,9 +130,9 @@ WebInspector.BreakpointManager.prototype = { WebInspector.BreakpointManager.prototype.__proto__ = WebInspector.Object.prototype; -WebInspector.Breakpoint = function(breakpointManager, sourceID, sourceURL, line, enabled, condition) +WebInspector.Breakpoint = function(breakpointManager, sourceID, url, line, enabled, condition) { - this.url = sourceURL; + this.url = url; this.line = line; this.sourceID = sourceID; this._enabled = enabled; @@ -165,10 +154,7 @@ WebInspector.Breakpoint.prototype = { this._enabled = x; this._breakpointManager._setBreakpointOnBackend(this); - if (this._enabled) - this.dispatchEventToListeners("enabled"); - else - this.dispatchEventToListeners("disabled"); + this.dispatchEventToListeners("enable-changed"); }, get sourceText() @@ -182,12 +168,6 @@ WebInspector.Breakpoint.prototype = { this.dispatchEventToListeners("text-changed"); }, - get label() - { - var displayName = (this.url ? WebInspector.displayNameForURL(this.url) : WebInspector.UIString("(program)")); - return displayName + ":" + this.line; - }, - get id() { return this.sourceID + ":" + this.line; @@ -208,8 +188,15 @@ WebInspector.Breakpoint.prototype = { if (this.enabled) this._breakpointManager._setBreakpointOnBackend(this); this.dispatchEventToListeners("condition-changed"); + }, + + remove: function() + { + InspectorBackend.removeBreakpoint(this.sourceID, this.line); + this.dispatchEventToListeners("removed"); + this.removeAllListeners(); + delete this._breakpointManager; } } WebInspector.Breakpoint.prototype.__proto__ = WebInspector.Object.prototype; - diff --git a/WebCore/inspector/front-end/BreakpointsSidebarPane.js b/WebCore/inspector/front-end/BreakpointsSidebarPane.js index a4daa2d..ccf45b6 100644 --- a/WebCore/inspector/front-end/BreakpointsSidebarPane.js +++ b/WebCore/inspector/front-end/BreakpointsSidebarPane.js @@ -23,9 +23,9 @@ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ -WebInspector.BreakpointsSidebarPane = function() +WebInspector.BreakpointsSidebarPane = function(title) { - WebInspector.SidebarPane.call(this, WebInspector.UIString("Breakpoints")); + WebInspector.SidebarPane.call(this, title); this.listElement = document.createElement("ol"); this.listElement.className = "breakpoint-list"; @@ -35,9 +35,6 @@ WebInspector.BreakpointsSidebarPane = function() this.emptyElement.textContent = WebInspector.UIString("No Breakpoints"); this.bodyElement.appendChild(this.emptyElement); - - WebInspector.breakpointManager.addEventListener("breakpoint-added", this._breakpointAdded, this); - WebInspector.breakpointManager.addEventListener("breakpoint-removed", this._breakpointRemoved, this); } WebInspector.BreakpointsSidebarPane.prototype = { @@ -50,15 +47,25 @@ WebInspector.BreakpointsSidebarPane.prototype = { } }, - _breakpointAdded: function(event) + addBreakpoint: function(breakpointItem) { - var breakpoint = event.data; + breakpointItem.addEventListener("removed", this._breakpointRemoved, this); + + var element = breakpointItem.element(); + element._breakpointItem = breakpointItem; - breakpoint.addEventListener("enabled", this._breakpointEnableChanged, this); - breakpoint.addEventListener("disabled", this._breakpointEnableChanged, this); - breakpoint.addEventListener("text-changed", this._breakpointTextChanged, this); + var currentElement = this.listElement.firstChild; + while (currentElement) { + if (currentElement._breakpointItem.compareTo(element._breakpointItem) > 0) { + this.listElement.insertBefore(element, currentElement); + break; + } + currentElement = currentElement.nextSibling; + } + if (!currentElement) + this.listElement.appendChild(element); - this._appendBreakpointElement(breakpoint); + element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this, breakpointItem), true); if (this.emptyElement.parentElement) { this.bodyElement.removeChild(this.emptyElement); @@ -66,88 +73,136 @@ WebInspector.BreakpointsSidebarPane.prototype = { } }, - _appendBreakpointElement: function(breakpoint) + _breakpointRemoved: function(event) { - function checkboxClicked(event) - { - breakpoint.enabled = !breakpoint.enabled; - - // without this, we'd switch to the source of the clicked breakpoint - event.stopPropagation(); + this.listElement.removeChild(event.target.element()); + if (!this.listElement.firstChild) { + this.bodyElement.removeChild(this.listElement); + this.bodyElement.appendChild(this.emptyElement); } + }, - function breakpointClicked() - { - WebInspector.panels.scripts.showSourceLine(breakpoint.url, breakpoint.line); - } + _contextMenuEventFired: function(breakpointItem, event) + { + var contextMenu = new WebInspector.ContextMenu(); + contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), breakpointItem.remove.bind(breakpointItem)); + contextMenu.show(event); + } +} - var breakpointElement = document.createElement("li"); - breakpoint._breakpointListElement = breakpointElement; - breakpointElement._breakpointObject = breakpoint; - breakpointElement.addEventListener("click", breakpointClicked, false); +WebInspector.BreakpointsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype; - var checkboxElement = document.createElement("input"); - checkboxElement.className = "checkbox-elem"; - checkboxElement.type = "checkbox"; - checkboxElement.checked = breakpoint.enabled; - checkboxElement.addEventListener("click", checkboxClicked, false); - breakpointElement.appendChild(checkboxElement); +WebInspector.BreakpointItem = function(breakpoint) +{ + this._breakpoint = breakpoint; - var labelElement = document.createTextNode(breakpoint.label); - breakpointElement.appendChild(labelElement); + this._element = document.createElement("li"); - var sourceTextElement = document.createElement("div"); - sourceTextElement.textContent = breakpoint.sourceText; - sourceTextElement.className = "source-text monospace"; - breakpointElement.appendChild(sourceTextElement); + var checkboxElement = document.createElement("input"); + checkboxElement.className = "checkbox-elem"; + checkboxElement.type = "checkbox"; + checkboxElement.checked = this._breakpoint.enabled; + checkboxElement.addEventListener("click", this._checkboxClicked.bind(this), false); + this._element.appendChild(checkboxElement); - var currentElement = this.listElement.firstChild; - while (currentElement) { - var currentBreak = currentElement._breakpointObject; - if (currentBreak.url > breakpoint.url) { - this.listElement.insertBefore(breakpointElement, currentElement); - return; - } else if (currentBreak.url == breakpoint.url && currentBreak.line > breakpoint.line) { - this.listElement.insertBefore(breakpointElement, currentElement); - return; - } - currentElement = currentElement.nextSibling; - } - this.listElement.appendChild(breakpointElement); + this._breakpoint.addEventListener("enable-changed", this._enableChanged, this); + this._breakpoint.addEventListener("removed", this._removed, this); +} + +WebInspector.BreakpointItem.prototype = { + element: function() + { + return this._element; }, - _breakpointRemoved: function(event) + remove: function() { - var breakpoint = event.data; + this._breakpoint.remove(); + }, - breakpoint.removeEventListener("enabled", null, this); - breakpoint.removeEventListener("disabled", null, this); - breakpoint.removeEventListener("text-changed", null, this); + _checkboxClicked: function(event) + { + this._breakpoint.enabled = !this._breakpoint.enabled; - var element = breakpoint._breakpointListElement; - element.parentElement.removeChild(element); + // without this, we'd switch to the source of the clicked breakpoint + event.stopPropagation(); + }, - if (!this.listElement.firstChild) { - this.bodyElement.removeChild(this.listElement); - this.bodyElement.appendChild(this.emptyElement); - } + _enableChanged: function() + { + var checkbox = this._element.firstChild; + checkbox.checked = this._breakpoint.enabled; }, - _breakpointEnableChanged: function(event) + _removed: function() + { + this.dispatchEventToListeners("removed"); + } +} + +WebInspector.BreakpointItem.prototype.__proto__ = WebInspector.Object.prototype; + +WebInspector.JSBreakpointItem = function(breakpoint) +{ + WebInspector.BreakpointItem.call(this, breakpoint); + + this._element.addEventListener("click", this._breakpointClicked.bind(this), false); + + 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 = { + compareTo: function(other) { - var breakpoint = event.target; + if (this._breakpoint.url != other._breakpoint.url) + return this._breakpoint.url < other._breakpoint.url ? -1 : 1; + if (this._breakpoint.line != other._breakpoint.line) + return this._breakpoint.line < other._breakpoint.line ? -1 : 1; + return 0; + }, - var checkbox = breakpoint._breakpointListElement.firstChild; - checkbox.checked = breakpoint.enabled; + _breakpointClicked: function() + { + WebInspector.panels.scripts.showSourceLine(this._breakpoint.url, this._breakpoint.line); }, - _breakpointTextChanged: function(event) + _textChanged: function() { - var breakpoint = event.target; + var sourceTextElement = this._element.firstChild.nextSibling.nextSibling; + sourceTextElement.textContent = this._breakpoint.sourceText; + } +} + +WebInspector.JSBreakpointItem.prototype.__proto__ = WebInspector.BreakpointItem.prototype; - var sourceTextElement = breakpoint._breakpointListElement.firstChild.nextSibling.nextSibling; - sourceTextElement.textContent = breakpoint.sourceText; +WebInspector.DOMBreakpointItem = function(breakpoint) +{ + WebInspector.BreakpointItem.call(this, breakpoint); + + var link = WebInspector.panels.elements.linkifyNodeReference(this._breakpoint.node); + this._element.appendChild(link); + + var type = WebInspector.DOMBreakpoint.Labels[this._breakpoint.type]; + var typeElement = document.createTextNode(" - " + type); + this._element.appendChild(typeElement); +} + +WebInspector.DOMBreakpointItem.prototype = { + compareTo: function(other) + { + if (this._breakpoint.type != other._breakpoint.type) + return this._breakpoint.type < other._breakpoint.type ? -1 : 1; + return 0; } } -WebInspector.BreakpointsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype; +WebInspector.DOMBreakpointItem.prototype.__proto__ = WebInspector.BreakpointItem.prototype; diff --git a/WebCore/inspector/front-end/CSSCompletions.js b/WebCore/inspector/front-end/CSSCompletions.js index 5485464..9480467 100644 --- a/WebCore/inspector/front-end/CSSCompletions.js +++ b/WebCore/inspector/front-end/CSSCompletions.js @@ -1,27 +1,4 @@ -WebInspector.CSSCompletions = (function() { - var used = {}; - var properties = []; - var style = document.documentElement.style; - var list = document.defaultView.getComputedStyle(document.documentElement, ""); - var length = list.length; - for (var i = 0; i < length; ++i) - used[properties[i] = list[i]] = true; - - for (var i = 0, end = length; i < length; ++i) { - var propertyWords = properties[i].split("-"); - var j = propertyWords.length; - while (--j) { - propertyWords.pop(); - var shorthand = propertyWords.join("-"); - if (!(shorthand in used) && style[shorthand] !== undefined) { - used[shorthand] = true; - properties[end++] = shorthand; - } - } - } - - return properties.sort(); -})(); +WebInspector.CSSCompletions = []; WebInspector.CSSCompletions.startsWith = function(prefix) { @@ -45,6 +22,8 @@ WebInspector.CSSCompletions._firstIndexOfPrefix = function(prefix) { if (!prefix) return -1; + if (!this.length) + return -1; var maxIndex = this.length - 1; var minIndex = 0; @@ -100,3 +79,10 @@ WebInspector.CSSCompletions._closest = function(str, prefix, shift) j = (j + propertiesWithPrefix.length + shift) % propertiesWithPrefix.length; return propertiesWithPrefix[j]; } + +WebInspector.CSSCompletions._load = function(properties) +{ + for (var i = 0; i < properties.length; ++i) + WebInspector.CSSCompletions.push(properties[i]); + WebInspector.CSSCompletions.sort(); +} diff --git a/WebCore/inspector/front-end/Callback.js b/WebCore/inspector/front-end/Callback.js index d8163fe..0621fd1 100644 --- a/WebCore/inspector/front-end/Callback.js +++ b/WebCore/inspector/front-end/Callback.js @@ -42,9 +42,8 @@ WebInspector.Callback.prototype = { return callbackId; }, - processResponse: function(callbackId, opt_vararg) + processResponse: function(callbackId, args) { - var args = Array.prototype.slice.call(arguments, 1); var callback = this._callbacks[callbackId]; callback.apply(null, args); delete this._callbacks[callbackId]; diff --git a/WebCore/inspector/front-end/ConsoleView.js b/WebCore/inspector/front-end/ConsoleView.js index 474c362..9785cd0 100644 --- a/WebCore/inspector/front-end/ConsoleView.js +++ b/WebCore/inspector/front-end/ConsoleView.js @@ -401,9 +401,9 @@ WebInspector.ConsoleView.prototype = { var contextMenu = new WebInspector.ContextMenu(); if (!WebInspector.monitoringXHREnabled) - contextMenu.appendItem(WebInspector.UIString("Enable XMLHttpRequest logging"), InspectorBackend.enableMonitoringXHR.bind(InspectorBackend)); + contextMenu.appendCheckboxItem(WebInspector.UIString("XMLHttpRequest logging"), InspectorBackend.enableMonitoringXHR.bind(InspectorBackend), false); else - contextMenu.appendItem(WebInspector.UIString("Disable XMLHttpRequest logging"), InspectorBackend.disableMonitoringXHR.bind(InspectorBackend)); + contextMenu.appendCheckboxItem(WebInspector.UIString("XMLHttpRequest logging"), InspectorBackend.disableMonitoringXHR.bind(InspectorBackend), true); contextMenu.appendItem(WebInspector.UIString("Clear Console"), this.requestClearMessages.bind(this)); contextMenu.show(event); }, diff --git a/WebCore/inspector/front-end/ContextMenu.js b/WebCore/inspector/front-end/ContextMenu.js index 3cdb152..47045a2 100644 --- a/WebCore/inspector/front-end/ContextMenu.js +++ b/WebCore/inspector/front-end/ContextMenu.js @@ -46,10 +46,17 @@ WebInspector.ContextMenu.prototype = { } }, - appendItem: function(label, handler) + appendItem: function(label, handler, disabled) { var id = this._items.length; - this._items.push({id: id, label: label}); + this._items.push({type: "item", id: id, label: label, enabled: !disabled}); + this._handlers[id] = handler; + }, + + appendCheckboxItem: function(label, handler, checked, disabled) + { + var id = this._items.length; + this._items.push({type: "checkbox", id: id, label: label, checked: !!checked, enabled: !disabled}); this._handlers[id] = handler; }, @@ -60,7 +67,7 @@ WebInspector.ContextMenu.prototype = { return; if (!("id" in this._items[this._items.length - 1])) return; - this._items.push({}); + this._items.push({type: "separator"}); }, _itemSelected: function(id) diff --git a/WebCore/inspector/front-end/DOMAgent.js b/WebCore/inspector/front-end/DOMAgent.js index 57422f6..0d79d51 100644 --- a/WebCore/inspector/front-end/DOMAgent.js +++ b/WebCore/inspector/front-end/DOMAgent.js @@ -677,3 +677,94 @@ WebInspector.childNodeRemoved = function() this.domAgent._childNodeRemoved.apply(this.domAgent, arguments); } +WebInspector.DOMBreakpointManager = function() +{ + this._breakpoints = {}; +} + +WebInspector.DOMBreakpointManager.prototype = { + setBreakpoint: function(node, type) + { + if (!(node.id in this._breakpoints)) + this._breakpoints[node.id] = {}; + else if (type in this._breakpoints[node.id]) + return; + + var breakpoint = new WebInspector.DOMBreakpoint(node, type); + this._breakpoints[node.id][type] = breakpoint; + breakpoint.addEventListener("removed", this._breakpointRemoved, this); + + this.dispatchEventToListeners("dom-breakpoint-added", breakpoint); + }, + + removeBreakpointsForNode: function(node) + { + var nodeBreakpoints = this._breakpoints[node.id]; + for (var type in nodeBreakpoints) + nodeBreakpoints[type].remove(); + }, + + _breakpointRemoved: function(event) + { + var breakpoint = event.target; + + var nodeBreakpoints = this._breakpoints[breakpoint.node.id]; + delete nodeBreakpoints[breakpoint.type]; + for (var type in nodeBreakpoints) + return; + delete this._breakpoints[breakpoint.node.id]; + } +} + +WebInspector.DOMBreakpointManager.prototype.__proto__ = WebInspector.Object.prototype; + +WebInspector.DOMBreakpoint = function(node, type) +{ + this.node = node; + this.type = type; + this._enabled = true; + + InspectorBackend.setDOMBreakpoint(this.node.id, this.type); +} + +WebInspector.DOMBreakpoint.Types = { + SubtreeModified: 0, + AttributeModified: 1, + NodeRemoved: 2 +}; + +WebInspector.DOMBreakpoint.Labels = {}; +WebInspector.DOMBreakpoint.Labels[WebInspector.DOMBreakpoint.Types.SubtreeModified] = WebInspector.UIString("Subtree Modified"); +WebInspector.DOMBreakpoint.Labels[WebInspector.DOMBreakpoint.Types.AttributeModified] = WebInspector.UIString("Attribute Modified"); +WebInspector.DOMBreakpoint.Labels[WebInspector.DOMBreakpoint.Types.NodeRemoved] = WebInspector.UIString("Node Removed"); + +WebInspector.DOMBreakpoint.prototype = { + get enabled() + { + return this._enabled; + }, + + set enabled(enabled) + { + if (this._enabled === enabled) + return; + + this._enabled = enabled; + if (this._enabled) + InspectorBackend.setDOMBreakpoint(this.node.id, this.type); + else + InspectorBackend.removeDOMBreakpoint(this.node.id, this.type); + + this.dispatchEventToListeners("enable-changed"); + }, + + remove: function() + { + if (this._enabled) + InspectorBackend.removeDOMBreakpoint(this.node.id, this.type); + this.dispatchEventToListeners("removed"); + } +} + +WebInspector.DOMBreakpoint.prototype.__proto__ = WebInspector.Object.prototype; + diff --git a/WebCore/inspector/front-end/ElementsPanel.js b/WebCore/inspector/front-end/ElementsPanel.js index 0296737..f18299a 100644 --- a/WebCore/inspector/front-end/ElementsPanel.js +++ b/WebCore/inspector/front-end/ElementsPanel.js @@ -74,6 +74,8 @@ WebInspector.ElementsPanel = function() this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle); this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane(); this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane(); + if (Preferences.domBreakpointsEnabled) + this.sidebarPanes.domBreakpoints = WebInspector.createDOMBreakpointsSidebarPane(); this.sidebarPanes.eventListeners = new WebInspector.EventListenersSidebarPane(); this.sidebarPanes.styles.onexpand = this.updateStyles.bind(this); @@ -90,11 +92,8 @@ WebInspector.ElementsPanel = function() this.sidebarElement = document.createElement("div"); this.sidebarElement.id = "elements-sidebar"; - this.sidebarElement.appendChild(this.sidebarPanes.computedStyle.element); - this.sidebarElement.appendChild(this.sidebarPanes.styles.element); - this.sidebarElement.appendChild(this.sidebarPanes.metrics.element); - this.sidebarElement.appendChild(this.sidebarPanes.properties.element); - this.sidebarElement.appendChild(this.sidebarPanes.eventListeners.element); + for (var pane in this.sidebarPanes) + this.sidebarElement.appendChild(this.sidebarPanes[pane].element); this.sidebarResizeElement = document.createElement("div"); this.sidebarResizeElement.className = "sidebar-resizer-vertical"; @@ -179,6 +178,9 @@ WebInspector.ElementsPanel.prototype = { this.recentlyModifiedNodes = []; delete this.currentQuery; + + if (Preferences.domBreakpointsEnabled) + this.sidebarPanes.domBreakpoints.reset(); }, setDocument: function(inspectedRootDocument) diff --git a/WebCore/inspector/front-end/ElementsTreeOutline.js b/WebCore/inspector/front-end/ElementsTreeOutline.js index c7d39f1..7f48161 100644 --- a/WebCore/inspector/front-end/ElementsTreeOutline.js +++ b/WebCore/inspector/front-end/ElementsTreeOutline.js @@ -402,7 +402,7 @@ WebInspector.ElementsTreeElement.prototype = { var node = this.representedObject; if (!node.nodeName || node.nodeName.toLowerCase() !== "img") return; - + function setTooltip(properties) { if (!properties) @@ -761,6 +761,21 @@ WebInspector.ElementsTreeElement.prototype = { contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), this._editAsHTML.bind(this)); contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this)); contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this)); + + if (Preferences.domBreakpointsEnabled) { + // Add debbuging-related actions + contextMenu.appendSeparator(); + + contextMenu.appendItem(WebInspector.UIString("Stop on Subtree Modifications"), + WebInspector.domBreakpointManager.setBreakpoint.bind(WebInspector.domBreakpointManager, this.representedObject, WebInspector.DOMBreakpoint.Types.SubtreeModified)); + contextMenu.appendItem(WebInspector.UIString("Stop on Attributes Modifications"), + WebInspector.domBreakpointManager.setBreakpoint.bind(WebInspector.domBreakpointManager, this.representedObject, WebInspector.DOMBreakpoint.Types.AttributeModified)); + contextMenu.appendItem(WebInspector.UIString("Stop on Node Removal"), + WebInspector.domBreakpointManager.setBreakpoint.bind(WebInspector.domBreakpointManager, this.representedObject, WebInspector.DOMBreakpoint.Types.NodeRemoved)); + + contextMenu.appendItem(WebInspector.UIString("Remove Breakpoints"), + WebInspector.domBreakpointManager.removeBreakpointsForNode.bind(WebInspector.domBreakpointManager, this.representedObject)); + } }, _populateTextContextMenu: function(contextMenu, textNode) diff --git a/WebCore/inspector/front-end/ExtensionAPI.js b/WebCore/inspector/front-end/ExtensionAPI.js index 476a463..a89dcf1 100644 --- a/WebCore/inspector/front-end/ExtensionAPI.js +++ b/WebCore/inspector/front-end/ExtensionAPI.js @@ -160,7 +160,6 @@ Panels.prototype = { function PanelImpl(id) { this._id = id; - this.onSelectionChanged = new EventSink("panel-objectSelected-" + id); } PanelImpl.prototype = { @@ -182,6 +181,7 @@ function Panel(id) { var impl = new PanelImpl(id); this.createSidebarPane = bind(impl.createSidebarPane, impl); + this.onSelectionChanged = new EventSink("panel-objectSelected-" + id); } function ExtensionPanel(id) diff --git a/WebCore/inspector/front-end/Panel.js b/WebCore/inspector/front-end/Panel.js index 2fa0d34..8cbdebb 100644 --- a/WebCore/inspector/front-end/Panel.js +++ b/WebCore/inspector/front-end/Panel.js @@ -116,7 +116,7 @@ WebInspector.Panel.prototype = { document.getElementById("main-panels").appendChild(this.element); }, - searchCanceled: function(startingNewSearch) + searchCanceled: function() { if (this._searchResults) { for (var i = 0; i < this._searchResults.length; ++i) { @@ -238,11 +238,9 @@ WebInspector.Panel.prototype = { var currentView = this._searchResults[this._currentSearchResultIndex]; if (currentView.showingLastSearchResult()) { - if (this.searchIteratesOverViews()) { - if (++this._currentSearchResultIndex >= this._searchResults.length) - this._currentSearchResultIndex = 0; - currentView = this._searchResults[this._currentSearchResultIndex]; - } + if (++this._currentSearchResultIndex >= this._searchResults.length) + this._currentSearchResultIndex = 0; + currentView = this._searchResults[this._currentSearchResultIndex]; showFirstResult = true; } @@ -273,11 +271,9 @@ WebInspector.Panel.prototype = { var currentView = this._searchResults[this._currentSearchResultIndex]; if (currentView.showingFirstSearchResult()) { - if (this.searchIteratesOverViews()) { - if (--this._currentSearchResultIndex < 0) - this._currentSearchResultIndex = (this._searchResults.length - 1); - currentView = this._searchResults[this._currentSearchResultIndex]; - } + if (--this._currentSearchResultIndex < 0) + this._currentSearchResultIndex = (this._searchResults.length - 1); + currentView = this._searchResults[this._currentSearchResultIndex]; showLastResult = true; } @@ -409,11 +405,6 @@ WebInspector.Panel.prototype = { return false; }, - searchIteratesOverViews: function() - { - return false; - }, - elementsToRestoreScrollPositionsFor: function() { return []; diff --git a/WebCore/inspector/front-end/ProfilesPanel.js b/WebCore/inspector/front-end/ProfilesPanel.js index e5877d9..e18274c 100644 --- a/WebCore/inspector/front-end/ProfilesPanel.js +++ b/WebCore/inspector/front-end/ProfilesPanel.js @@ -158,26 +158,20 @@ WebInspector.ProfilesPanel.prototype = { show: function() { WebInspector.Panel.prototype.show.call(this); - if (this._shouldPopulateProfiles) + if (!this._profilesWereRequested) this._populateProfiles(); }, - populateInterface: function() - { - this._reset(); - if (this.visible) - this._populateProfiles(); - else - this._shouldPopulateProfiles = true; - }, - profilerWasEnabled: function() { if (this._profilerEnabled) return; this._profilerEnabled = true; - this.populateInterface(); + + this._reset(); + if (this.visible) + this._populateProfiles(); }, profilerWasDisabled: function() @@ -207,6 +201,7 @@ WebInspector.ProfilesPanel.prototype = { this._profilesIdMap = {}; this._profileGroups = {}; this._profileGroupsForLinks = {} + this._profilesWereRequested = false; this.sidebarTreeElement.removeStyleClass("some-expandable"); @@ -532,7 +527,7 @@ WebInspector.ProfilesPanel.prototype = { var callId = WebInspector.Callback.wrap(populateCallback); InspectorBackend.getProfileHeaders(callId); - delete this._shouldPopulateProfiles; + this._profilesWereRequested = true; }, updateMainViewWidth: function(width) diff --git a/WebCore/inspector/front-end/ResourcesPanel.js b/WebCore/inspector/front-end/ResourcesPanel.js index 01eefc7..ff0d1ab 100644 --- a/WebCore/inspector/front-end/ResourcesPanel.js +++ b/WebCore/inspector/front-end/ResourcesPanel.js @@ -769,11 +769,6 @@ WebInspector.ResourcesPanel.prototype = { return this.items; }, - searchIteratesOverViews: function() - { - return true; - }, - elementsToRestoreScrollPositionsFor: function() { return [ this.containerElement ]; diff --git a/WebCore/inspector/front-end/ScriptView.js b/WebCore/inspector/front-end/ScriptView.js index 5598577..74dc30a 100644 --- a/WebCore/inspector/front-end/ScriptView.js +++ b/WebCore/inspector/front-end/ScriptView.js @@ -34,7 +34,7 @@ WebInspector.ScriptView = function(script) this._frameNeedsSetup = true; this._sourceFrameSetup = false; var canEditScripts = WebInspector.panels.scripts.canEditScripts(); - this.sourceFrame = new WebInspector.SourceFrame(this.element, this._addBreakpoint.bind(this), this._removeBreakpoint.bind(this), canEditScripts ? this._editLine.bind(this) : null, this._continueToLine.bind(this)); + this.sourceFrame = new WebInspector.SourceFrame(this.element, this._addBreakpoint.bind(this), canEditScripts ? this._editLine.bind(this) : null, this._continueToLine.bind(this)); } WebInspector.ScriptView.prototype = { @@ -129,7 +129,6 @@ WebInspector.ScriptView.prototype = { showingFirstSearchResult: WebInspector.SourceView.prototype.showingFirstSearchResult, showingLastSearchResult: WebInspector.SourceView.prototype.showingLastSearchResult, _jumpToSearchResult: WebInspector.SourceView.prototype._jumpToSearchResult, - _removeBreakpoint: WebInspector.SourceView.prototype._removeBreakpoint, _editLine: WebInspector.SourceView.prototype._editLine, resize: WebInspector.SourceView.prototype.resize } diff --git a/WebCore/inspector/front-end/ScriptsPanel.js b/WebCore/inspector/front-end/ScriptsPanel.js index 8675f79..7521ea9 100644 --- a/WebCore/inspector/front-end/ScriptsPanel.js +++ b/WebCore/inspector/front-end/ScriptsPanel.js @@ -132,7 +132,9 @@ WebInspector.ScriptsPanel = function() this.sidebarPanes.watchExpressions = new WebInspector.WatchExpressionsSidebarPane(); this.sidebarPanes.callstack = new WebInspector.CallStackSidebarPane(); this.sidebarPanes.scopechain = new WebInspector.ScopeChainSidebarPane(); - this.sidebarPanes.breakpoints = new WebInspector.BreakpointsSidebarPane(); + this.sidebarPanes.jsBreakpoints = WebInspector.createJSBreakpointsSidebarPane(); + if (Preferences.domBreakpointsEnabled) + this.sidebarPanes.domBreakpoints = WebInspector.createDOMBreakpointsSidebarPane(); this.sidebarPanes.workers = new WebInspector.WorkersSidebarPane(); for (var pane in this.sidebarPanes) @@ -142,7 +144,9 @@ WebInspector.ScriptsPanel = function() this.sidebarPanes.callstack.addEventListener("call frame selected", this._callFrameSelected, this); this.sidebarPanes.scopechain.expanded = true; - this.sidebarPanes.breakpoints.expanded = true; + this.sidebarPanes.jsBreakpoints.expanded = true; + if (Preferences.domBreakpointsEnabled) + this.sidebarPanes.domBreakpoints.expanded = true; var panelEnablerHeading = WebInspector.UIString("You need to enable debugging before you can use the Scripts panel."); var panelEnablerDisclaimer = WebInspector.UIString("Enabling debugging will make scripts run slower."); @@ -171,7 +175,6 @@ WebInspector.ScriptsPanel = function() this._debuggerEnabled = Preferences.debuggerAlwaysEnabled; WebInspector.breakpointManager.addEventListener("breakpoint-added", this._breakpointAdded, this); - WebInspector.breakpointManager.addEventListener("breakpoint-removed", this._breakpointRemoved, this); this.reset(); } @@ -227,11 +230,6 @@ WebInspector.ScriptsPanel.prototype = { WebInspector.Panel.prototype.hide.call(this); }, - get searchableViews() - { - return [ this.visibleView ]; - }, - get breakpointsActivated() { return this.toggleBreakpointsButton.toggled; @@ -312,26 +310,6 @@ WebInspector.ScriptsPanel.prototype = { sourceFrame.addBreakpoint(breakpoint); }, - _breakpointRemoved: function(event) - { - var breakpoint = event.data; - - var sourceFrame; - if (breakpoint.url) { - var resource = WebInspector.resourceURLMap[breakpoint.url]; - if (resource && resource.finished) - sourceFrame = this._sourceFrameForScriptOrResource(resource); - } - - if (breakpoint.sourceID && !sourceFrame) { - var object = this._sourceIDMap[breakpoint.sourceID] - sourceFrame = this._sourceFrameForScriptOrResource(object); - } - - if (sourceFrame) - sourceFrame.removeBreakpoint(breakpoint); - }, - canEditScripts: function() { return Preferences.canEditScriptSource; @@ -345,7 +323,7 @@ WebInspector.ScriptsPanel.prototype = { // Need to clear breakpoints and re-create them later when editing source. var breakpoints = WebInspector.breakpointManager.breakpointsForSourceID(sourceID); for (var i = 0; i < breakpoints.length; ++i) - WebInspector.breakpointManager.removeBreakpoint(breakpoints[i]); + breakpoints[i].remove(); function mycallback(success, newBodyOrErrorMessage, callFrames) { @@ -494,7 +472,9 @@ WebInspector.ScriptsPanel.prototype = { this.sidebarPanes.watchExpressions.refreshExpressions(); if (!preserveItems) { - this.sidebarPanes.breakpoints.reset(); + this.sidebarPanes.jsBreakpoints.reset(); + if (Preferences.domBreakpointsEnabled) + this.sidebarPanes.domBreakpoints.reset(); this.sidebarPanes.workers.reset(); } }, @@ -1029,6 +1009,74 @@ WebInspector.ScriptsPanel.prototype = { section.addAlternateKeys([ shortcut1.name, shortcut2.name ], WebInspector.UIString("Step out")); this.sidebarPanes.callstack.registerShortcuts(section); + }, + + searchCanceled: function() + { + WebInspector.updateSearchMatchesCount(0, this); + + if (this._searchView) + this._searchView.searchCanceled(); + + delete this._searchView; + delete this._searchQuery; + }, + + performSearch: function(query) + { + if (!this.visibleView) + return; + + // Call searchCanceled since it will reset everything we need before doing a new search. + this.searchCanceled(); + + this._searchView = this.visibleView; + this._searchQuery = query; + + function finishedCallback(view, searchMatches) + { + if (!searchMatches) + return; + + WebInspector.updateSearchMatchesCount(searchMatches, this); + view.jumpToFirstSearchResult(); + } + + this._searchView.performSearch(query, finishedCallback.bind(this)); + }, + + jumpToNextSearchResult: function() + { + if (!this._searchView) + return; + + if (this._searchView !== this.visibleView) { + this.performSearch(this._searchQuery); + return; + } + + if (this._searchView.showingLastSearchResult()) + this._searchView.jumpToFirstSearchResult(); + else + this._searchView.jumpToNextSearchResult(); + }, + + jumpToPreviousSearchResult: function() + { + if (!this._searchView) + return; + + if (this._searchView !== this.visibleView) { + this.performSearch(this._searchQuery); + if (this._searchView) + this._searchView.jumpToLastSearchResult(); + return; + } + + if (this._searchView.showingFirstSearchResult()) + this._searchView.jumpToLastSearchResult(); + else + this._searchView.jumpToPreviousSearchResult(); } } diff --git a/WebCore/inspector/front-end/Section.js b/WebCore/inspector/front-end/Section.js index 913d495..a186d43 100644 --- a/WebCore/inspector/front-end/Section.js +++ b/WebCore/inspector/front-end/Section.js @@ -82,21 +82,18 @@ WebInspector.Section.prototype = { if (this._subtitle === x) return; this._subtitle = x; - this.subtitleElement.setAttribute("data-uncopyable", x); + this.subtitleElement.textContent = x; }, - get subtitleAsText() - { - var result = ""; - var data = this.subtitleElement.getAttribute("data-uncopyable"); - if (data) - result += data; - var child = this.subtitleElement.querySelector("[data-uncopyable]"); - if (child) { - var linkData = child.getAttribute("data-uncopyable"); - if (linkData) - result += linkData; - } + get subtitleAsTextForTest()
+ {
+ var result = this.subtitleElement.textContent;
+ var child = this.subtitleElement.querySelector("[data-uncopyable]");
+ if (child) {
+ var linkData = child.getAttribute("data-uncopyable");
+ if (linkData)
+ result += linkData;
+ }
return result; }, diff --git a/WebCore/inspector/front-end/Settings.js b/WebCore/inspector/front-end/Settings.js index c84ba79..33a1b91 100644 --- a/WebCore/inspector/front-end/Settings.js +++ b/WebCore/inspector/front-end/Settings.js @@ -43,36 +43,48 @@ var Preferences = { debuggerAlwaysEnabled: false, profilerAlwaysEnabled: false, auditsPanelEnabled: true, - onlineDetectionEnabled: true + onlineDetectionEnabled: true, + domBreakpointsEnabled: false } -WebInspector.populateApplicationSettings = function(settingsString) +WebInspector.Settings = function(sessionScope) { - WebInspector.applicationSettings._load(settingsString); - WebInspector.applicationSettings.installSetting("eventListenersFilter", "event-listeners-filter", "all"); - WebInspector.applicationSettings.installSetting("colorFormat", "color-format", "hex"); - WebInspector.applicationSettings.installSetting("resourcesLargeRows", "resources-large-rows", true); - WebInspector.applicationSettings.installSetting("watchExpressions", "watch-expressions", []); - WebInspector.applicationSettings.installSetting("lastViewedScriptFile", "last-viewed-script-file"); - WebInspector.applicationSettings.installSetting("showInheritedComputedStyleProperties", "show-inherited-computed-style-properties", false); - WebInspector.applicationSettings.installSetting("showUserAgentStyles", "show-user-agent-styles", true); - WebInspector.applicationSettings.installSetting("resourceViewTab", "resource-view-tab", "content"); - WebInspector.applicationSettings.installSetting("consoleHistory", "console-history", []); - WebInspector.applicationSettings.installSetting("resourcesSortOptions", "resources-sort-options", {timeOption: "responseTime", sizeOption: "transferSize"}); - - WebInspector.applicationSettings.dispatchEventToListeners("loaded"); + this._sessionScope = sessionScope; + this._store = {}; } -WebInspector.populateSessionSettings = function(settingsString) +WebInspector.Settings.initialize = function() { - WebInspector.sessionSettings._load(settingsString); - WebInspector.sessionSettings.dispatchEventToListeners("loaded"); -} + WebInspector.applicationSettings = new WebInspector.Settings(false); + WebInspector.sessionSettings = new WebInspector.Settings(true); -WebInspector.Settings = function(sessionScope) -{ - this._sessionScope = sessionScope; - this._store = {}; + function populateApplicationSettings(settingsString) + { + WebInspector.applicationSettings._load(settingsString); + WebInspector.applicationSettings.installSetting("eventListenersFilter", "event-listeners-filter", "all"); + WebInspector.applicationSettings.installSetting("colorFormat", "color-format", "hex"); + WebInspector.applicationSettings.installSetting("resourcesLargeRows", "resources-large-rows", true); + WebInspector.applicationSettings.installSetting("watchExpressions", "watch-expressions", []); + WebInspector.applicationSettings.installSetting("lastViewedScriptFile", "last-viewed-script-file"); + WebInspector.applicationSettings.installSetting("showInheritedComputedStyleProperties", "show-inherited-computed-style-properties", false); + WebInspector.applicationSettings.installSetting("showUserAgentStyles", "show-user-agent-styles", true); + WebInspector.applicationSettings.installSetting("resourceViewTab", "resource-view-tab", "content"); + WebInspector.applicationSettings.installSetting("consoleHistory", "console-history", []); + WebInspector.applicationSettings.installSetting("resourcesSortOptions", "resources-sort-options", {timeOption: "responseTime", sizeOption: "transferSize"}); + + WebInspector.applicationSettings.dispatchEventToListeners("loaded"); + } + + function populateSessionSettings(settingsString) + { + WebInspector.sessionSettings._load(settingsString); + WebInspector.sessionSettings.dispatchEventToListeners("loaded"); + } + + InspectorBackend.getSettings(WebInspector.Callback.wrap(function(settings) { + populateApplicationSettings(settings.application); + populateSessionSettings(settings.session); + })); } WebInspector.Settings.prototype = { diff --git a/WebCore/inspector/front-end/SourceCSSTokenizer.js b/WebCore/inspector/front-end/SourceCSSTokenizer.js index 2179982..82149e0 100644 --- a/WebCore/inspector/front-end/SourceCSSTokenizer.js +++ b/WebCore/inspector/front-end/SourceCSSTokenizer.js @@ -45,60 +45,8 @@ WebInspector.SourceCSSTokenizer = function() { WebInspector.SourceTokenizer.call(this); - this._propertyKeywords = [ - "background", "background-attachment", "background-clip", "background-color", "background-image", - "background-origin", "background-position", "background-position-x", "background-position-y", - "background-repeat", "background-repeat-x", "background-repeat-y", "background-size", "border", - "border-bottom", "border-bottom-color", "border-bottom-left-radius", "border-bottom-right-radius", - "border-bottom-style", "border-bottom-width", "border-collapse", "border-color", "border-left", - "border-left-color", "border-left-style", "border-left-width", "border-radius", "border-right", - "border-right-color", "border-right-style", "border-right-width", "border-spacing", "border-style", - "border-top", "border-top-color", "border-top-left-radius", "border-top-right-radius", "border-top-style", - "border-top-width", "border-width", "bottom", "caption-side", "clear", "clip", "color", "content", - "counter-increment", "counter-reset", "cursor", "direction", "display", "empty-cells", "float", - "font", "font-family", "font-size", "font-stretch", "font-style", "font-variant", "font-weight", - "height", "left", "letter-spacing", "line-height", "list-style", "list-style-image", "list-style-position", - "list-style-type", "margin", "margin-bottom", "margin-left", "margin-right", "margin-top", "max-height", - "max-width", "min-height", "min-width", "opacity", "orphans", "outline", "outline-color", "outline-offset", - "outline-style", "outline-width", "overflow", "overflow-x", "overflow-y", "padding", "padding-bottom", - "padding-left", "padding-right", "padding-top", "page", "page-break-after", "page-break-before", - "page-break-inside", "pointer-events", "position", "quotes", "resize", "right", "size", "src", - "table-layout", "text-align", "text-decoration", "text-indent", "text-line-through", "text-line-through-color", - "text-line-through-mode", "text-line-through-style", "text-line-through-width", "text-overflow", "text-overline", - "text-overline-color", "text-overline-mode", "text-overline-style", "text-overline-width", "text-rendering", - "text-shadow", "text-transform", "text-underline", "text-underline-color", "text-underline-mode", - "text-underline-style", "text-underline-width", "top", "unicode-bidi", "unicode-range", "vertical-align", - "visibility", "white-space", "widows", "width", "word-break", "word-spacing", "word-wrap", "z-index", "zoom", - "-webkit-animation", "-webkit-animation-delay", "-webkit-animation-direction", "-webkit-animation-duration", - "-webkit-animation-iteration-count", "-webkit-animation-name", "-webkit-animation-play-state", - "-webkit-animation-timing-function", "-webkit-appearance", "-webkit-backface-visibility", - "-webkit-background-clip", "-webkit-background-composite", "-webkit-background-origin", "-webkit-background-size", - "-webkit-binding", "-webkit-border-end", "-webkit-border-end-color", "-webkit-border-end-style", "-webkit-border-end-width", - "-webkit-border-fit", "-webkit-border-horizontal-spacing", "-webkit-border-image", - "-webkit-border-radius", "-webkit-border-start", "-webkit-border-start-color", "-webkit-border-start-style", - "-webkit-border-start-width","-webkit-border-vertical-spacing", "-webkit-box-align", "-webkit-box-direction", - "-webkit-box-flex", "-webkit-box-flex-group", "-webkit-box-lines", "-webkit-box-ordinal-group", - "-webkit-box-orient", "-webkit-box-pack", "-webkit-box-reflect", "-webkit-box-shadow", "-webkit-box-sizing", - "-webkit-column-break-after", "-webkit-column-break-before", "-webkit-column-break-inside", "-webkit-column-count", - "-webkit-column-gap", "-webkit-column-rule", "-webkit-column-rule-color", "-webkit-column-rule-style", - "-webkit-column-rule-width", "-webkit-column-width", "-webkit-columns", "-webkit-font-size-delta", - "-webkit-font-smoothing", "-webkit-highlight", "-webkit-line-break", "-webkit-line-clamp", - "-webkit-margin-bottom-collapse", "-webkit-margin-collapse", "-webkit-margin-end", "-webkit-margin-start", "-webkit-margin-top-collapse", - "-webkit-marquee", "-webkit-marquee-direction", "-webkit-marquee-increment", "-webkit-marquee-repetition", - "-webkit-marquee-speed", "-webkit-marquee-style", "-webkit-mask", "-webkit-mask-attachment", - "-webkit-mask-box-image", "-webkit-mask-clip", "-webkit-mask-composite", "-webkit-mask-image", - "-webkit-mask-origin", "-webkit-mask-position", "-webkit-mask-position-x", "-webkit-mask-position-y", - "-webkit-mask-repeat", "-webkit-mask-repeat-x", "-webkit-mask-repeat-y", "-webkit-mask-size", - "-webkit-match-nearest-mail-blockquote-color", "-webkit-nbsp-mode", "-webkit-padding-end", "-webkit-padding-start", - "-webkit-perspective", "-webkit-perspective-origin", "-webkit-perspective-origin-x", "-webkit-perspective-origin-y", - "-webkit-rtl-ordering", "-webkit-text-decorations-in-effect", "-webkit-text-fill-color", "-webkit-text-security", - "-webkit-text-size-adjust", "-webkit-text-stroke", "-webkit-text-stroke-color", "-webkit-text-stroke-width", - "-webkit-transform", "-webkit-transform-origin", "-webkit-transform-origin-x", "-webkit-transform-origin-y", - "-webkit-transform-origin-z", "-webkit-transform-style", "-webkit-transition", "-webkit-transition-delay", - "-webkit-transition-duration", "-webkit-transition-property", "-webkit-transition-timing-function", - "-webkit-user-drag", "-webkit-user-modify", "-webkit-user-select", "-webkit-variable-declaration-block" - ].keySet(); - + this._propertyKeywords = WebInspector.CSSCompletions.keySet(); + this._valueKeywords = [ "above", "absolute", "activeborder", "activecaption", "afar", "after-white-space", "ahead", "alias", "all", "all-scroll", "alternate", "always","amharic", "amharic-abegede", "antialiased", "appworkspace", "aqua", "arabic-indic", "armenian", diff --git a/WebCore/inspector/front-end/SourceCSSTokenizer.re2js b/WebCore/inspector/front-end/SourceCSSTokenizer.re2js index 6ba9f60..b4d3eef 100644 --- a/WebCore/inspector/front-end/SourceCSSTokenizer.re2js +++ b/WebCore/inspector/front-end/SourceCSSTokenizer.re2js @@ -44,58 +44,8 @@ WebInspector.SourceCSSTokenizer = function() { WebInspector.SourceTokenizer.call(this); - this._propertyKeywords = [ - "background", "background-attachment", "background-clip", "background-color", "background-image", - "background-origin", "background-position", "background-position-x", "background-position-y", - "background-repeat", "background-repeat-x", "background-repeat-y", "background-size", "border", - "border-bottom", "border-bottom-color", "border-bottom-left-radius", "border-bottom-right-radius", - "border-bottom-style", "border-bottom-width", "border-collapse", "border-color", "border-left", - "border-left-color", "border-left-style", "border-left-width", "border-radius", "border-right", - "border-right-color", "border-right-style", "border-right-width", "border-spacing", "border-style", - "border-top", "border-top-color", "border-top-left-radius", "border-top-right-radius", "border-top-style", - "border-top-width", "border-width", "bottom", "caption-side", "clear", "clip", "color", "content", - "counter-increment", "counter-reset", "cursor", "direction", "display", "empty-cells", "float", - "font", "font-family", "font-size", "font-stretch", "font-style", "font-variant", "font-weight", - "height", "left", "letter-spacing", "line-height", "list-style", "list-style-image", "list-style-position", - "list-style-type", "margin", "margin-bottom", "margin-left", "margin-right", "margin-top", "max-height", - "max-width", "min-height", "min-width", "opacity", "orphans", "outline", "outline-color", "outline-offset", - "outline-style", "outline-width", "overflow", "overflow-x", "overflow-y", "padding", "padding-bottom", - "padding-left", "padding-right", "padding-top", "page", "page-break-after", "page-break-before", - "page-break-inside", "pointer-events", "position", "quotes", "resize", "right", "size", "src", - "table-layout", "text-align", "text-decoration", "text-indent", "text-line-through", "text-line-through-color", - "text-line-through-mode", "text-line-through-style", "text-line-through-width", "text-overflow", "text-overline", - "text-overline-color", "text-overline-mode", "text-overline-style", "text-overline-width", "text-rendering", - "text-shadow", "text-transform", "text-underline", "text-underline-color", "text-underline-mode", - "text-underline-style", "text-underline-width", "top", "unicode-bidi", "unicode-range", "vertical-align", - "visibility", "white-space", "widows", "width", "word-break", "word-spacing", "word-wrap", "z-index", "zoom", - "-webkit-animation", "-webkit-animation-delay", "-webkit-animation-direction", "-webkit-animation-duration", - "-webkit-animation-iteration-count", "-webkit-animation-name", "-webkit-animation-play-state", - "-webkit-animation-timing-function", "-webkit-appearance", "-webkit-backface-visibility", - "-webkit-background-clip", "-webkit-background-composite", "-webkit-background-origin", "-webkit-background-size", - "-webkit-binding", "-webkit-border-fit", "-webkit-border-horizontal-spacing", "-webkit-border-image", - "-webkit-border-radius", "-webkit-border-vertical-spacing", "-webkit-box-align", "-webkit-box-direction", - "-webkit-box-flex", "-webkit-box-flex-group", "-webkit-box-lines", "-webkit-box-ordinal-group", - "-webkit-box-orient", "-webkit-box-pack", "-webkit-box-reflect", "-webkit-box-shadow", "-webkit-box-sizing", - "-webkit-column-break-after", "-webkit-column-break-before", "-webkit-column-break-inside", "-webkit-column-count", - "-webkit-column-gap", "-webkit-column-rule", "-webkit-column-rule-color", "-webkit-column-rule-style", - "-webkit-column-rule-width", "-webkit-column-width", "-webkit-columns", "-webkit-font-size-delta", - "-webkit-font-smoothing", "-webkit-highlight", "-webkit-line-break", "-webkit-line-clamp", - "-webkit-margin-bottom-collapse", "-webkit-margin-collapse", "-webkit-margin-start", "-webkit-margin-top-collapse", - "-webkit-marquee", "-webkit-marquee-direction", "-webkit-marquee-increment", "-webkit-marquee-repetition", - "-webkit-marquee-speed", "-webkit-marquee-style", "-webkit-mask", "-webkit-mask-attachment", - "-webkit-mask-box-image", "-webkit-mask-clip", "-webkit-mask-composite", "-webkit-mask-image", - "-webkit-mask-origin", "-webkit-mask-position", "-webkit-mask-position-x", "-webkit-mask-position-y", - "-webkit-mask-repeat", "-webkit-mask-repeat-x", "-webkit-mask-repeat-y", "-webkit-mask-size", - "-webkit-match-nearest-mail-blockquote-color", "-webkit-nbsp-mode", "-webkit-padding-start", - "-webkit-perspective", "-webkit-perspective-origin", "-webkit-perspective-origin-x", "-webkit-perspective-origin-y", - "-webkit-rtl-ordering", "-webkit-text-decorations-in-effect", "-webkit-text-fill-color", "-webkit-text-security", - "-webkit-text-size-adjust", "-webkit-text-stroke", "-webkit-text-stroke-color", "-webkit-text-stroke-width", - "-webkit-transform", "-webkit-transform-origin", "-webkit-transform-origin-x", "-webkit-transform-origin-y", - "-webkit-transform-origin-z", "-webkit-transform-style", "-webkit-transition", "-webkit-transition-delay", - "-webkit-transition-duration", "-webkit-transition-property", "-webkit-transition-timing-function", - "-webkit-user-drag", "-webkit-user-modify", "-webkit-user-select", "-webkit-variable-declaration-block" - ].keySet(); - + this._propertyKeywords = WebInspector.CSSCompletions.keySet(); + this._valueKeywords = [ "above", "absolute", "activeborder", "activecaption", "afar", "after-white-space", "ahead", "alias", "all", "all-scroll", "alternate", "always","amharic", "amharic-abegede", "antialiased", "appworkspace", "aqua", "arabic-indic", "armenian", diff --git a/WebCore/inspector/front-end/SourceFrame.js b/WebCore/inspector/front-end/SourceFrame.js index 01a8ec2..16b8e8d 100644 --- a/WebCore/inspector/front-end/SourceFrame.js +++ b/WebCore/inspector/front-end/SourceFrame.js @@ -28,7 +28,7 @@ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ -WebInspector.SourceFrame = function(parentElement, addBreakpointDelegate, removeBreakpointDelegate, editDelegate, continueToHereDelegate) +WebInspector.SourceFrame = function(parentElement, addBreakpointDelegate, editDelegate, continueToHereDelegate) { this._parentElement = parentElement; @@ -44,7 +44,6 @@ WebInspector.SourceFrame = function(parentElement, addBreakpointDelegate, remove this._continueToHereDelegate = continueToHereDelegate; this._addBreakpointDelegate = addBreakpointDelegate; - this._removeBreakpointDelegate = removeBreakpointDelegate; this._editDelegate = editDelegate; this._popoverObjectGroup = "popover"; } @@ -55,7 +54,7 @@ WebInspector.SourceFrame.prototype = { { this._visible = visible; this._createViewerIfNeeded(); - + if (visible) { if (this._textViewer && this._scrollTop) this._textViewer.element.scrollTop = this._scrollTop; @@ -99,19 +98,16 @@ WebInspector.SourceFrame.prototype = { addBreakpoint: function(breakpoint) { this.breakpoints.push(breakpoint); - breakpoint.addEventListener("enabled", this._breakpointChanged, this); - breakpoint.addEventListener("disabled", this._breakpointChanged, this); - breakpoint.addEventListener("condition-changed", this._breakpointChanged, this); + breakpoint.addEventListener("removed", this._breakpointRemoved, this); if (this._textViewer) this._addBreakpointToSource(breakpoint); }, - removeBreakpoint: function(breakpoint) + _breakpointRemoved: function(event) { + var breakpoint = event.target; + this.breakpoints.remove(breakpoint); - breakpoint.removeEventListener("enabled", null, this); - breakpoint.removeEventListener("disabled", null, this); - breakpoint.removeEventListener("condition-changed", null, this); if (this._textViewer) this._removeBreakpointFromSource(breakpoint); }, @@ -384,6 +380,9 @@ WebInspector.SourceFrame.prototype = { _addBreakpointToSource: function(breakpoint) { + breakpoint.addEventListener("enable-changed", this._breakpointChanged, this); + breakpoint.addEventListener("condition-changed", this._breakpointChanged, this); + var lineNumber = breakpoint.line - 1; if (lineNumber >= this._textModel.linesCount) return; @@ -402,6 +401,9 @@ WebInspector.SourceFrame.prototype = { _removeBreakpointFromSource: function(breakpoint) { + breakpoint.removeEventListener("enable-changed", null, this); + breakpoint.removeEventListener("condition-changed", null, this); + var lineNumber = breakpoint.line - 1; this._textViewer.beginUpdates(); this._textModel.removeAttribute(lineNumber, "breakpoint"); @@ -431,7 +433,7 @@ WebInspector.SourceFrame.prototype = { // This row doesn't have a breakpoint: We want to show Add Breakpoint and Add and Edit Breakpoint. contextMenu.appendItem(WebInspector.UIString("Add Breakpoint"), this._addBreakpointDelegate.bind(this, lineNumber + 1)); - function addConditionalBreakpoint() + function addConditionalBreakpoint() { this._addBreakpointDelegate(lineNumber + 1); var breakpoint = this._textModel.getAttribute(lineNumber, "breakpoint"); @@ -442,7 +444,7 @@ WebInspector.SourceFrame.prototype = { contextMenu.appendItem(WebInspector.UIString("Add Conditional Breakpoint…"), addConditionalBreakpoint.bind(this)); } else { // This row has a breakpoint, we want to show edit and remove breakpoint, and either disable or enable. - contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), this._removeBreakpointDelegate.bind(this, breakpoint)); + contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), breakpoint.remove.bind(breakpoint)); contextMenu.appendItem(WebInspector.UIString("Edit Breakpoint…"), this._editBreakpointCondition.bind(this, breakpoint)); if (breakpoint.enabled) contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), function() { breakpoint.enabled = false; }); @@ -475,7 +477,7 @@ WebInspector.SourceFrame.prototype = { if (event.shiftKey) breakpoint.enabled = !breakpoint.enabled; else - this._removeBreakpointDelegate(breakpoint); + breakpoint.remove(); } else this._addBreakpointDelegate(lineNumber + 1); event.preventDefault(); diff --git a/WebCore/inspector/front-end/SourceView.js b/WebCore/inspector/front-end/SourceView.js index 4d03ecd..240dca1 100644 --- a/WebCore/inspector/front-end/SourceView.js +++ b/WebCore/inspector/front-end/SourceView.js @@ -33,7 +33,7 @@ WebInspector.SourceView = function(resource) this.element.addStyleClass("source"); var canEditScripts = WebInspector.panels.scripts && WebInspector.panels.scripts.canEditScripts() && resource.type === WebInspector.Resource.Type.Script; - this.sourceFrame = new WebInspector.SourceFrame(this.contentElement, this._addBreakpoint.bind(this), this._removeBreakpoint.bind(this), canEditScripts ? this._editLine.bind(this) : null, this._continueToLine.bind(this)); + this.sourceFrame = new WebInspector.SourceFrame(this.contentElement, this._addBreakpoint.bind(this), canEditScripts ? this._editLine.bind(this) : null, this._continueToLine.bind(this)); resource.addEventListener("finished", this._resourceLoadingFinished, this); this._frameNeedsSetup = true; } @@ -132,11 +132,6 @@ WebInspector.SourceView.prototype = { WebInspector.panels.scripts.toggleBreakpointsClicked(); }, - _removeBreakpoint: function(breakpoint) - { - WebInspector.breakpointManager.removeBreakpoint(breakpoint); - }, - _editLine: function(line, newContent, cancelEditingCallback) { var lines = []; @@ -213,7 +208,7 @@ WebInspector.SourceView.prototype = { this.localContentElement = document.createElement("div"); this.localContentElement.className = "resource-view-content"; this.tabbedPane.appendTab("local", WebInspector.UIString("Local"), this.localContentElement, this.selectLocalContentTab.bind(this)); - this.localSourceFrame = new WebInspector.SourceFrame(this.localContentElement, this._addBreakpoint.bind(this), this._removeBreakpoint.bind(this), null, this._continueToLine.bind(this)); + this.localSourceFrame = new WebInspector.SourceFrame(this.localContentElement, this._addBreakpoint.bind(this), null, this._continueToLine.bind(this)); } this.localSourceFrame.setContent(mimeType, content, ""); }, diff --git a/WebCore/inspector/front-end/StylesSidebarPane.js b/WebCore/inspector/front-end/StylesSidebarPane.js index 5f5a5ad..1dddde7 100644 --- a/WebCore/inspector/front-end/StylesSidebarPane.js +++ b/WebCore/inspector/front-end/StylesSidebarPane.js @@ -143,7 +143,7 @@ WebInspector.StylesSidebarPane.prototype = { { if (computedStyle) this._refreshUpdate(node, computedStyle, editedSection); - }; + } if (refresh) WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this)); @@ -160,17 +160,23 @@ WebInspector.StylesSidebarPane.prototype = { this._markUsedProperties(styleRules, usedProperties, disabledComputedProperties); this._refreshSectionsForStyleRules(styleRules, usedProperties, disabledComputedProperties, editedSection); } + // Trace the computed style. + this.sections[0][0].rebuildComputedTrace(this.sections[0]); }, _rebuildUpdate: function(node, styles) { this.bodyElement.removeChildren(); this._computedStylePane.bodyElement.removeChildren(); + var styleRules = this._rebuildStyleRules(node, styles); var usedProperties = {}; var disabledComputedProperties = {}; this._markUsedProperties(styleRules, usedProperties, disabledComputedProperties); this.sections[0] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, disabledComputedProperties, 0); + var anchorElement = this.sections[0].inheritedPropertiesSeparatorElement; + // Trace the computed style. + this.sections[0][0].rebuildComputedTrace(this.sections[0]); for (var i = 0; i < styles.pseudoElements.length; ++i) { var pseudoElementCSSRules = styles.pseudoElements[i]; @@ -189,7 +195,7 @@ WebInspector.StylesSidebarPane.prototype = { usedProperties = {}; disabledComputedProperties = {}; this._markUsedProperties(styleRules, usedProperties, disabledComputedProperties); - this.sections[pseudoId] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, disabledComputedProperties, pseudoId); + this.sections[pseudoId] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, disabledComputedProperties, pseudoId, anchorElement); } }, @@ -221,7 +227,6 @@ WebInspector.StylesSidebarPane.prototype = { var styleAttributes = {}; for (var name in styles.styleAttributes) { var attrStyle = { style: new WebInspector.CSSStyleDeclaration(styles.styleAttributes[name]), editable: false }; - attrStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", name); attrStyle.selectorText = WebInspector.panels.elements.treeOutline.nodeNameToCorrectCase(node.nodeName) + "[" + name; if (node.getAttribute(name)) attrStyle.selectorText += "=" + node.getAttribute(name); @@ -232,7 +237,6 @@ WebInspector.StylesSidebarPane.prototype = { // Show element's Style Attributes if (styles.inlineStyle && node.nodeType === Node.ELEMENT_NODE) { var inlineStyle = { selectorText: "element.style", style: new WebInspector.CSSStyleDeclaration(styles.inlineStyle), isAttribute: true }; - inlineStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", "style"); styleRules.push(inlineStyle); } @@ -244,17 +248,6 @@ WebInspector.StylesSidebarPane.prototype = { styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule }); } - // Collect used properties first in order to identify inherited ones. - var userPropertyNames = {}; - for (var i = 0; i < styleRules.length; ++i) { - var styleRule = styleRules[i]; - if (styleRule.computedStyle || styleRule.isStyleSeparator) - continue; - var style = styleRule.style; - for (var j = 0; j < style.length; ++j) - userPropertyNames[style[j]] = true; - } - // Walk the node structure and identify styles with inherited properties. var parentStyles = styles.parent; var parentNode = node.parentNode; @@ -271,7 +264,6 @@ WebInspector.StylesSidebarPane.prototype = { if (parentStyles.inlineStyle) { if (this._containsInherited(parentStyles.inlineStyle)) { var inlineStyle = { selectorText: WebInspector.UIString("Style Attribute"), style: new WebInspector.CSSStyleDeclaration(parentStyles.inlineStyle), isAttribute: true, isInherited: true }; - inlineStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", "style"); if (!separatorInserted) { insertInheritedNodeSeparator(parentNode); separatorInserted = true; @@ -395,14 +387,18 @@ WebInspector.StylesSidebarPane.prototype = { for (var i = 0; i < styleRules.length; ++i) { var styleRule = styleRules[i]; var section = styleRule.section; - if (styleRule.computedStyle) - section.disabledComputedProperties = disabledComputedProperties; - section._usedProperties = (styleRule.usedProperties || usedProperties); - section.update((section === editedSection) || styleRule.computedStyle); + if (styleRule.computedStyle) { + section._disabledComputedProperties = disabledComputedProperties; + section._usedProperties = usedProperties; + section.update(); + } else { + section._usedProperties = styleRule.usedProperties; + section.update(section === editedSection); + } } }, - _rebuildSectionsForStyleRules: function(styleRules, usedProperties, disabledComputedProperties, pseudoId) + _rebuildSectionsForStyleRules: function(styleRules, usedProperties, disabledComputedProperties, pseudoId, anchorElement) { // Make a property section for each style rule. var sections = []; @@ -416,6 +412,8 @@ WebInspector.StylesSidebarPane.prototype = { var link = WebInspector.panels.elements.linkifyNodeReference(styleRule.node); separatorElement.appendChild(document.createTextNode(WebInspector.UIString("Inherited from") + " ")); separatorElement.appendChild(link); + if (!sections.inheritedPropertiesSeparatorElement) + sections.inheritedPropertiesSeparatorElement = separatorElement; } else if ("pseudoId" in styleRule) { var pseudoName = WebInspector.StylesSidebarPane.PseudoIdNames[styleRule.pseudoId]; if (pseudoName) @@ -424,7 +422,7 @@ WebInspector.StylesSidebarPane.prototype = { separatorElement.textContent = WebInspector.UIString("Pseudo element"); } else separatorElement.textContent = styleRule.text; - this.bodyElement.appendChild(separatorElement); + this.bodyElement.insertBefore(separatorElement, anchorElement); lastWasSeparator = true; continue; } @@ -435,9 +433,10 @@ WebInspector.StylesSidebarPane.prototype = { if (typeof editable === "undefined") editable = true; - var section = new WebInspector.StylePropertiesSection(styleRule, styleRule.subtitle, styleRule.computedStyle, (styleRule.usedProperties || usedProperties), editable, styleRule.isInherited, lastWasSeparator); if (computedStyle) - section.disabledComputedProperties = disabledComputedProperties; + var section = new WebInspector.ComputedStylePropertiesSection(styleRule, usedProperties, disabledComputedProperties, styleRules); + else + var section = new WebInspector.StylePropertiesSection(styleRule, editable, styleRule.isInherited, lastWasSeparator); section.pane = this; section.expanded = true; @@ -445,7 +444,7 @@ WebInspector.StylesSidebarPane.prototype = { this._computedStylePane.bodyElement.appendChild(section.element); lastWasSeparator = true; } else { - this.bodyElement.appendChild(section.element); + this.bodyElement.insertBefore(section.element, anchorElement); lastWasSeparator = false; } sections.push(section); @@ -603,7 +602,7 @@ WebInspector.ComputedStyleSidebarPane = function() WebInspector.ComputedStyleSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype; -WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, usedProperties, editable, isInherited, isFirstSection) +WebInspector.StylePropertiesSection = function(styleRule, editable, isInherited, isFirstSection) { WebInspector.PropertiesSection.call(this, ""); this.element.className = "styles-section monospace" + (isFirstSection ? " first-styles-section" : ""); @@ -612,23 +611,20 @@ WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyl this._selectorElement.textContent = styleRule.selectorText; this.titleElement.appendChild(this._selectorElement); - if (!computedStyle) { - var openBrace = document.createElement("span"); - openBrace.textContent = " {"; - this.titleElement.appendChild(openBrace); + var openBrace = document.createElement("span"); + openBrace.textContent = " {"; + this.titleElement.appendChild(openBrace); - var closeBrace = document.createElement("div"); - closeBrace.textContent = "}"; - this.element.appendChild(closeBrace); - } + var closeBrace = document.createElement("div"); + closeBrace.textContent = "}"; + this.element.appendChild(closeBrace); this._selectorElement.addEventListener("dblclick", this._handleSelectorDoubleClick.bind(this), false); this.element.addEventListener("dblclick", this._handleEmptySpaceDoubleClick.bind(this), false); this.styleRule = styleRule; this.rule = this.styleRule.rule; - this.computedStyle = computedStyle; - this.editable = (editable && !computedStyle); + this.editable = editable; this.isInherited = isInherited; // Prevent editing the user agent and user rules. @@ -639,58 +635,45 @@ WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyl if (isUserAgent || isUser) this.editable = false; - this._usedProperties = usedProperties; + this._usedProperties = styleRule.usedProperties; if (this.rule) this.titleElement.addStyleClass("styles-selector"); - if (computedStyle) { - this.element.addStyleClass("computed-style"); - this.headerElement.addStyleClass("hidden"); - } else { - if (!subtitle) { - function linkifyUncopyable(url, line) - { - var link = WebInspector.linkifyResourceAsNode(url, "resources", line + 1); - link.setAttribute("data-uncopyable", link.textContent); - link.textContent = ""; - return link; - } - - if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.href) - this.subtitleElement.appendChild(linkifyUncopyable(this.styleRule.parentStyleSheet.href, this.rule.sourceLine)); - else if (isUserAgent) - subtitle = WebInspector.UIString("user agent stylesheet"); - else if (isUser) - subtitle = WebInspector.UIString("user stylesheet"); - else if (isViaInspector) - subtitle = WebInspector.UIString("via inspector"); - else - this.subtitleElement.appendChild(linkifyUncopyable(this.rule.documentURL, this.rule.sourceLine)); - } - if (isInherited) - this.element.addStyleClass("show-inherited"); // This one is related to inherited rules, not compted style. - if (subtitle) - this.subtitle = subtitle; + function linkifyUncopyable(url, line) + { + var link = WebInspector.linkifyResourceAsNode(url, "resources", line + 1); + link.setAttribute("data-uncopyable", link.textContent); + link.textContent = ""; + return link; } + var subtitle = ""; + if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.href) + this.subtitleElement.appendChild(linkifyUncopyable(this.styleRule.parentStyleSheet.href, this.rule.sourceLine)); + else if (isUserAgent) + subtitle = WebInspector.UIString("user agent stylesheet"); + else if (isUser) + subtitle = WebInspector.UIString("user stylesheet"); + else if (isViaInspector) + subtitle = WebInspector.UIString("via inspector"); + else if (this.rule && this.rule.documentURL) + this.subtitleElement.appendChild(linkifyUncopyable(this.rule.documentURL, this.rule.sourceLine)); + + if (isInherited) + this.element.addStyleClass("show-inherited"); // This one is related to inherited rules, not compted style. + if (subtitle) + this.subtitle = subtitle; + this.identifier = styleRule.selectorText; if (this.subtitle) this.identifier += ":" + this.subtitle; + + if (!this.editable) + this.element.addStyleClass("read-only"); } WebInspector.StylePropertiesSection.prototype = { - get usedProperties() - { - return this._usedProperties || {}; - }, - - set usedProperties(x) - { - this._usedProperties = x; - this.update(); - }, - collapse: function(dontRememberState) { // Overriding with empty body. @@ -703,17 +686,12 @@ WebInspector.StylePropertiesSection.prototype = { // Render truly inherited properties with black, i.e. return them as non-inherited. return !(property in WebInspector.StylesSidebarPane.InheritedProperties); } - - if (!this.computedStyle || !this._usedProperties || this.noAffect) - return false; - // These properties should always show for Computed Style. - var alwaysShowComputedProperties = { "display": true, "height": true, "width": true }; - return !(property in this.usedProperties) && !(property in alwaysShowComputedProperties) && !(property in this.disabledComputedProperties); + return false; }, isPropertyOverloaded: function(property, shorthand) { - if (this.computedStyle || !this._usedProperties || this.noAffect) + if (!this._usedProperties || this.noAffect) return false; if (this.isInherited && !(property in WebInspector.StylesSidebarPane.InheritedProperties)) { @@ -721,7 +699,7 @@ WebInspector.StylePropertiesSection.prototype = { return false; } - var used = (property in this.usedProperties); + var used = (property in this._usedProperties); if (used || !shorthand) return !used; @@ -730,16 +708,23 @@ WebInspector.StylePropertiesSection.prototype = { var longhandProperties = this.styleRule.style.getLonghandProperties(property); for (var j = 0; j < longhandProperties.length; ++j) { var individualProperty = longhandProperties[j]; - if (individualProperty in this.usedProperties) + if (individualProperty in this._usedProperties) return false; } return true; }, + isPropertyDisabled: function(property) + { + if (!this.styleRule.style.__disabledPropertyValues) + return false; + return property in this.styleRule.style.__disabledPropertyValues; + }, + update: function(full) { - if (full || this.computedStyle) { + if (full) { this.propertiesTreeOutline.removeChildren(); this.populated = false; } else { @@ -749,7 +734,6 @@ WebInspector.StylePropertiesSection.prototype = { child = child.traverseNextTreeElement(false, null, true); } } - this.afterUpdate(); }, @@ -768,21 +752,18 @@ WebInspector.StylePropertiesSection.prototype = { var foundShorthands = {}; var disabledProperties = style.__disabledPropertyValues || {}; - var uniqueProperties = []; + this.uniqueProperties = []; for (var i = 0; i < style.length; ++i) - uniqueProperties.push(style[i]); + this.uniqueProperties.push(style[i]); for (var name in disabledProperties) - uniqueProperties.push(name); + this.uniqueProperties.push(name); - uniqueProperties.sort(); + this.uniqueProperties.sort(); - for (var i = 0; i < uniqueProperties.length; ++i) { - var name = uniqueProperties[i]; + for (var i = 0; i < this.uniqueProperties.length; ++i) { + var name = this.uniqueProperties[i]; var disabled = name in disabledProperties; - if (!disabled && this.disabledComputedProperties && !(name in this.usedProperties) && name in this.disabledComputedProperties) - disabled = true; - var shorthand = !disabled ? style.getPropertyShorthand(name) : null; if (shorthand && shorthand in foundShorthands) @@ -924,10 +905,102 @@ WebInspector.StylePropertiesSection.prototype = { WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype; -WebInspector.BlankStylePropertiesSection = function(defaultSelectorText) +WebInspector.ComputedStylePropertiesSection = function(styleRule, usedProperties, disabledComputedProperties) { - WebInspector.StylePropertiesSection.call(this, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, "", false, {}, false); + WebInspector.PropertiesSection.call(this, ""); + this.headerElement.addStyleClass("hidden"); + this.element.className = "styles-section monospace first-styles-section read-only computed-style"; + this.styleRule = styleRule; + this._usedProperties = usedProperties; + this._disabledComputedProperties = disabledComputedProperties; + this._alwaysShowComputedProperties = { "display": true, "height": true, "width": true }; + this.computedStyle = true; + this._propertyTreeElements = {}; + this._expandedPropertyNames = {}; +} + +WebInspector.ComputedStylePropertiesSection.prototype = { + collapse: function(dontRememberState) + { + // Overriding with empty body. + }, + + _isPropertyInherited: function(property) + { + return !(property in this._usedProperties) && !(property in this._alwaysShowComputedProperties) && !(property in this._disabledComputedProperties); + }, + + update: function() + { + this._expandedPropertyNames = {}; + for (var name in this._propertyTreeElements) { + if (this._propertyTreeElements[name].expanded) + this._expandedPropertyNames[name] = true; + } + this._propertyTreeElements = {}; + this.propertiesTreeOutline.removeChildren(); + this.populated = false; + }, + + onpopulate: function() + { + var style = this.styleRule.style; + var uniqueProperties = []; + for (var i = 0; i < style.length; ++i) + uniqueProperties.push(style[i]); + uniqueProperties.sort(); + this._propertyTreeElements = {}; + for (var i = 0; i < uniqueProperties.length; ++i) { + var name = uniqueProperties[i]; + var inherited = this._isPropertyInherited(name); + var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, name, false, inherited, false, false); + this.propertiesTreeOutline.appendChild(item); + this._propertyTreeElements[name] = item; + } + }, + + rebuildComputedTrace: function(sections) + { + for (var i = 0; i < sections.length; ++i) { + var section = sections[i]; + if (section.computedStyle || section instanceof WebInspector.BlankStylePropertiesSection) + continue; + + for (var j = 0; j < section.uniqueProperties.length; ++j) { + var name = section.uniqueProperties[j]; + if (section.isPropertyDisabled(name)) + continue; + if (section.isInherited && !(name in WebInspector.StylesSidebarPane.InheritedProperties)) + continue; + + var treeElement = this._propertyTreeElements[name]; + if (treeElement) { + var selectorText = section.styleRule.selectorText; + var value = section.styleRule.style.getPropertyValue(name); + var title = "<span style='color: gray'>" + selectorText + "</span> - " + value; + var subtitle = " <span style='float:right'>" + section.subtitleElement.innerHTML + "</span>"; + var childElement = new TreeElement(title + subtitle, null, false); + treeElement.appendChild(childElement); + if (section.isPropertyOverloaded(name)) + childElement.listItemElement.addStyleClass("overloaded"); + } + } + } + + // Restore expanded state after update. + for (var name in this._expandedPropertyNames) { + if (name in this._propertyTreeElements) + this._propertyTreeElements[name].expand(); + } + } +} + +WebInspector.ComputedStylePropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype; + +WebInspector.BlankStylePropertiesSection = function(defaultSelectorText) +{ + WebInspector.StylePropertiesSection.call(this, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false, false); this.element.addStyleClass("blank-section"); } @@ -966,13 +1039,9 @@ WebInspector.BlankStylePropertiesSection.prototype = { makeNormal: function(styleRule) { this.element.removeStyleClass("blank-section"); - this.styleRule = styleRule; this.rule = styleRule.rule; - this.computedStyle = false; - this.editable = true; this.identifier = styleRule.selectorText + ":via inspector"; - this.__proto__ = WebInspector.StylePropertiesSection.prototype; } } diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css index 8c4a2ea..4319816 100644 --- a/WebCore/inspector/front-end/inspector.css +++ b/WebCore/inspector/front-end/inspector.css @@ -4079,6 +4079,10 @@ a.worker-item { border-top: 1px solid rgb(191, 191, 191); } +.styles-section.read-only { + background-color: rgb(240, 240, 240); +} + .styles-section .header { white-space: nowrap; -webkit-background-origin: padding; @@ -4103,7 +4107,7 @@ a.worker-item { color: inherit; } -.styles-section .subtitle::before, .styles-section .subtitle a::before { +.styles-section a::before { content: attr(data-uncopyable); } diff --git a/WebCore/inspector/front-end/inspector.js b/WebCore/inspector/front-end/inspector.js index fa57916..db89e20 100644 --- a/WebCore/inspector/front-end/inspector.js +++ b/WebCore/inspector/front-end/inspector.js @@ -197,6 +197,28 @@ var WebInspector = { } }, + createJSBreakpointsSidebarPane: function() + { + var pane = new WebInspector.BreakpointsSidebarPane(WebInspector.UIString("Breakpoints")); + function breakpointAdded(event) + { + pane.addBreakpoint(new WebInspector.JSBreakpointItem(event.data)); + } + WebInspector.breakpointManager.addEventListener("breakpoint-added", breakpointAdded); + return pane; + }, + + createDOMBreakpointsSidebarPane: function() + { + var pane = new WebInspector.BreakpointsSidebarPane(WebInspector.UIString("DOM Breakpoints")); + function breakpointAdded(event) + { + pane.addBreakpoint(new WebInspector.DOMBreakpointItem(event.data)); + } + WebInspector.domBreakpointManager.addEventListener("dom-breakpoint-added", breakpointAdded); + return pane; + }, + _createPanels: function() { var hiddenPanels = (InspectorFrontendHost.hiddenPanels() || "").split(','); @@ -469,8 +491,9 @@ WebInspector.doLoadedDone = function() var port = WebInspector.port; document.body.addStyleClass("port-" + port); - this.applicationSettings = new WebInspector.Settings(false); - this.sessionSettings = new WebInspector.Settings(true); + InspectorFrontendHost.loaded(); + WebInspector.Settings.initialize(); + this._registerShortcuts(); // set order of some sections explicitly @@ -496,6 +519,7 @@ WebInspector.doLoadedDone = function() }; this.breakpointManager = new WebInspector.BreakpointManager(); + this.domBreakpointManager = new WebInspector.DOMBreakpointManager(); this.cssModel = new WebInspector.CSSStyleModel(); this.panels = {}; @@ -556,7 +580,10 @@ WebInspector.doLoadedDone = function() this.extensionServer.initExtensions(); - InspectorFrontendHost.loaded(); + InspectorBackend.populateScriptObjects(); + + // As a DOMAgent method, this needs to happen after the frontend has loaded and the agent is available. + InspectorBackend.getSupportedCSSProperties(WebInspector.Callback.wrap(WebInspector.CSSCompletions._load)); } WebInspector.addPanelToolbarIcon = function(toolbarElement, panel, previousToolbarItem) @@ -589,20 +616,12 @@ var windowLoaded = function() window.addEventListener("load", windowLoaded, false); -WebInspector.dispatch = function() { - var methodName = arguments[0]; - var parameters = Array.prototype.slice.call(arguments, 1); - +WebInspector.dispatch = function(message) { // We'd like to enforce asynchronous interaction between the inspector controller and the frontend. // This is important to LayoutTests. function delayDispatch() { - if (!(methodName in WebInspector)) { - console.error("Attempted to dispatch unimplemented WebInspector method: %s", methodName); - return; - } - - WebInspector[methodName].apply(WebInspector, parameters); + WebInspector_syncDispatch(message); WebInspector.pendingDispatches--; } WebInspector.pendingDispatches++; @@ -612,21 +631,41 @@ WebInspector.dispatch = function() { // This function is purposely put into the global scope for easy access. WebInspector_syncDispatch = function(message) { - var args = JSON.parse(message); - var methodName = args[0]; - var parameters = args.slice(1); - WebInspector[methodName].apply(WebInspector, parameters); + var messageObject = (typeof message === "string") ? JSON.parse(message) : message; + if (messageObject.type === "response" && !messageObject.success) { + WebInspector.removeResponseCallbackEntry(messageObject.seq) + WebInspector.reportProtocolError(messageObject); + return; + } + + var arguments = []; + if (messageObject.data) + for (var key in messageObject.data) + arguments.push(messageObject.data[key]); + + if (messageObject.type === "event") { + if (!messageObject.event in WebInspector) { + console.error("Attempted to dispatch unimplemented WebInspector method: %s", messageObject.event); + return; + } + WebInspector[messageObject.event].apply(WebInspector, arguments); + } + + if (messageObject.type === "response") + WebInspector.processResponse(messageObject.seq, arguments); } -WebInspector.dispatchMessageFromBackend = function(arguments) +WebInspector.dispatchMessageFromBackend = function(messageObject) { - WebInspector.dispatch.apply(this, arguments); + WebInspector.dispatch(messageObject); } -WebInspector.reportProtocolError = function(callId, methodName, errorText) +WebInspector.reportProtocolError = function(messageObject) { - WebInspector.log("InspectorBackend." + methodName + " failed with error text: '" + errorText + "'"); - WebInspector.removeResponseCallbackEntry(callId); + console.error("Error: InspectorBackend." + messageObject.command + " failed."); + for (var error in messageObject.errors) + console.error(" " + error); + WebInspector.removeResponseCallbackEntry(messageObject.seq); } WebInspector.windowResize = function(event) @@ -702,13 +741,13 @@ WebInspector.documentClick = function(event) function followLink() { // FIXME: support webkit-html-external-link links here. - if (WebInspector.canShowSourceLine(anchor.href, anchor.lineNumber, anchor.preferredPanel)) { + if (WebInspector.canShowSourceLine(anchor.href, anchor.getAttribute("line_number"), anchor.getAttribute("preferred_panel"))) { if (anchor.hasStyleClass("webkit-html-external-link")) { anchor.removeStyleClass("webkit-html-external-link"); anchor.addStyleClass("webkit-html-resource-link"); } - WebInspector.showSourceLine(anchor.href, anchor.lineNumber, anchor.preferredPanel); + WebInspector.showSourceLine(anchor.href, anchor.getAttribute("line_number"), anchor.getAttribute("preferred_panel")); return; } @@ -1412,15 +1451,6 @@ WebInspector.resumedScript = function() this.panels.scripts.debuggerResumed(); } -WebInspector.populateInterface = function() -{ - for (var panelName in this.panels) { - var panel = this.panels[panelName]; - if ("populateInterface" in panel) - panel.populateInterface(); - } -} - WebInspector.reset = function() { for (var panelName in this.panels) { @@ -1788,8 +1818,8 @@ WebInspector.linkifyResourceAsNode = function(url, preferredPanel, lineNumber, c if (lineNumber) linkText += ":" + lineNumber; var node = WebInspector.linkifyURLAsNode(url, linkText, classes, false, tooltipText); - node.lineNumber = lineNumber; - node.preferredPanel = preferredPanel; + node.setAttribute("line_number", lineNumber); + node.setAttribute("preferred_panel", preferredPanel); return node; } |