diff options
Diffstat (limited to 'WebCore/inspector/front-end')
32 files changed, 906 insertions, 708 deletions
diff --git a/WebCore/inspector/front-end/AuditResultView.js b/WebCore/inspector/front-end/AuditResultView.js index 2636463..5771684 100644 --- a/WebCore/inspector/front-end/AuditResultView.js +++ b/WebCore/inspector/front-end/AuditResultView.js @@ -89,7 +89,8 @@ WebInspector.AuditCategoryResultPane.prototype = { title = String.sprintf("%s (%d)", title, result.violationCount); } - var treeElement = new TreeElement(title, null, !!result.children); + var treeElement = new TreeElement(null, null, !!result.children); + treeElement.titleHTML = title; parentTreeElement.appendChild(treeElement); if (result.className) diff --git a/WebCore/inspector/front-end/AuditRules.js b/WebCore/inspector/front-end/AuditRules.js index 515ce8e..b78bc96 100644 --- a/WebCore/inspector/front-end/AuditRules.js +++ b/WebCore/inspector/front-end/AuditRules.js @@ -277,6 +277,7 @@ WebInspector.AuditRules.UnusedCssRule.prototype = { doRun: function(resources, result, callback) { var self = this; + function evalCallback(styleSheets) { if (!styleSheets.length) return callback(null); @@ -287,11 +288,11 @@ WebInspector.AuditRules.UnusedCssRule.prototype = { for (var i = 0; i < styleSheets.length; ++i) { var styleSheet = styleSheets[i]; for (var curRule = 0; curRule < styleSheet.rules.length; ++curRule) { - var rule = styleSheet.rules[curRule]; - if (rule.selectorText.match(pseudoSelectorRegexp)) + var selectorText = styleSheet.rules[curRule].selectorText; + if (selectorText.match(pseudoSelectorRegexp) || testedSelectors[selectorText]) continue; - selectors.push(rule.selectorText); - testedSelectors[rule.selectorText] = 1; + selectors.push(selectorText); + testedSelectors[selectorText] = 1; } } @@ -309,8 +310,10 @@ WebInspector.AuditRules.UnusedCssRule.prototype = { var unusedRules = []; for (var curRule = 0; curRule < styleSheet.rules.length; ++curRule) { var rule = styleSheet.rules[curRule]; - // FIXME: replace this by an exact computation once source ranges are available - var textLength = rule.style.cssText ? rule.style.cssText.length + rule.selectorText.length : 0; + // Exact computation whenever source ranges are available. + var textLength = (rule.selectorRange && rule.style.properties.endOffset) ? rule.style.properties.endOffset - rule.selectorRange.start + 1 : 0; + if (!textLength && rule.style.cssText) + textLength = rule.style.cssText.length + rule.selectorText.length; stylesheetSize += textLength; if (!testedSelectors[rule.selectorText] || foundSelectors[rule.selectorText]) continue; @@ -327,7 +330,7 @@ WebInspector.AuditRules.UnusedCssRule.prototype = { var pctUnused = Math.round(100 * unusedStylesheetSize / stylesheetSize); if (!summary) summary = result.addChild("", true); - var entry = summary.addChild(String.sprintf("%s: %d%% (estimated) is not used by the current page.", url, pctUnused)); + var entry = summary.addChild(String.sprintf("%s: %s (%d%%) is not used by the current page.", url, Number.bytesToString(unusedStylesheetSize), pctUnused)); for (var j = 0; j < unusedRules.length; ++j) entry.addSnippet(unusedRules[j]); @@ -339,7 +342,7 @@ WebInspector.AuditRules.UnusedCssRule.prototype = { return callback(null); var totalUnusedPercent = Math.round(100 * totalUnusedStylesheetSize / totalStylesheetSize); - summary.value = String.sprintf("%d%% of CSS (estimated) is not used by the current page.", totalUnusedPercent); + summary.value = String.sprintf("%s (%d%%) of CSS is not used by the current page.", Number.bytesToString(totalUnusedStylesheetSize), totalUnusedPercent); callback(result); } @@ -349,11 +352,10 @@ WebInspector.AuditRules.UnusedCssRule.prototype = { var result = {}; for (var i = 0; i < selectorArray.length; ++i) { try { - var nodes = document.querySelectorAll(selectorArray[i]); - if (nodes && nodes.length) + if (document.querySelector(selectorArray[i])) result[selectorArray[i]] = true; } catch(e) { - // ignore and mark as unused + // Ignore and mark as unused. } } return result; @@ -362,16 +364,24 @@ WebInspector.AuditRules.UnusedCssRule.prototype = { WebInspector.AuditRules.evaluateInTargetWindow(routine, [selectors], selectorsCallback.bind(null, callback, styleSheets, testedSelectors)); } - function routine() + function styleSheetCallback(styleSheets, continuation, styleSheet) { - var styleSheets = document.styleSheets; - if (!styleSheets) - return false; + if (styleSheet) + styleSheets.push(styleSheet); + if (continuation) + continuation(styleSheets); + } - return routineResult; + function allStylesCallback(styleSheetIds) + { + if (!styleSheetIds || !styleSheetIds.length) + return evalCallback([]); + var styleSheets = []; + for (var i = 0; i < styleSheetIds.length; ++i) + WebInspector.CSSStyleSheet.createForId(styleSheetIds[i], styleSheetCallback.bind(null, styleSheets, i == styleSheetIds.length - 1 ? evalCallback : null)); } - InspectorBackend.getAllStyles(evalCallback); + InspectorBackend.getAllStyles2(allStylesCallback); } } @@ -658,7 +668,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = { if (completeSrc) src = completeSrc; - const computedStyle = WebInspector.CSSStyleDeclaration.parsePayload(styles.computedStyle); + const computedStyle = styles.computedStyle; if (computedStyle.getPropertyValue("position") === "absolute") { if (!context.imagesLeft) doneCallback(context); @@ -669,7 +679,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = { var heightFound = "height" in styles.styleAttributes; for (var i = styles.matchedCSSRules.length - 1; i >= 0 && !(widthFound && heightFound); --i) { - var style = WebInspector.CSSRule.parsePayload(styles.matchedCSSRules[i]).style; + var style = styles.matchedCSSRules[i].style; if (style.getPropertyValue("width") !== "") widthFound = true; if (style.getPropertyValue("height") !== "") @@ -693,7 +703,7 @@ WebInspector.AuditRules.ImageDimensionsRule.prototype = { return callback(null); var context = {imagesLeft: imageIds.length, urlToNoDimensionCount: {}}; for (var i = imageIds.length - 1; i >= 0; --i) - InspectorBackend.getStyles(imageIds[i], true, imageStylesReady.bind(this, imageIds[i], context)); + WebInspector.cssModel.getStylesAsync(imageIds[i], imageStylesReady.bind(this, imageIds[i], context)); } function pushImageNodes() diff --git a/WebCore/inspector/front-end/BreakpointManager.js b/WebCore/inspector/front-end/BreakpointManager.js index 221a777..3d51092 100644 --- a/WebCore/inspector/front-end/BreakpointManager.js +++ b/WebCore/inspector/front-end/BreakpointManager.js @@ -230,10 +230,17 @@ WebInspector.BreakpointManager.prototype = { debuggerPaused: function(details) { - if (details.eventType !== WebInspector.DebuggerEventTypes.NativeBreakpoint) + if (details.eventType === WebInspector.DebuggerEventTypes.JavaScriptPause) return; - var breakpoint = this._breakpoints[details.eventData.breakpointId]; + if (details.eventData && details.eventData.breakpointId) + var breakpointId = details.eventData.breakpointId; + else if (details.callFrames && details.callFrames.length) + var breakpointId = WebInspector.Breakpoint.jsBreakpointId(details.callFrames[0].sourceID, details.callFrames[0].line); + else + return; + + var breakpoint = this._breakpoints[breakpointId]; if (!breakpoint) return; @@ -323,6 +330,11 @@ WebInspector.Breakpoint = function(breakpointManager, sourceID, url, line, enabl this._breakpointManager = breakpointManager; } +WebInspector.Breakpoint.jsBreakpointId = function(sourceID, line) +{ + return sourceID + ":" + line; +} + WebInspector.Breakpoint.prototype = { get enabled() { @@ -352,7 +364,7 @@ WebInspector.Breakpoint.prototype = { get id() { - return this.sourceID + ":" + this.line; + return WebInspector.Breakpoint.jsBreakpointId(this.sourceID, this.line); }, get condition() diff --git a/WebCore/inspector/front-end/BreakpointsSidebarPane.js b/WebCore/inspector/front-end/BreakpointsSidebarPane.js index f010330..47194da 100644 --- a/WebCore/inspector/front-end/BreakpointsSidebarPane.js +++ b/WebCore/inspector/front-end/BreakpointsSidebarPane.js @@ -259,9 +259,16 @@ WebInspector.EventListenerBreakpointsSidebarPane = function() WebInspector.breakpointManager.addEventListener("event-listener-breakpoint-added", this._breakpointAdded, this); this._breakpointItems = {}; + this._createCategory("Keyboard", "listener", ["keydown", "keyup", "keypress", "textInput"]); this._createCategory("Mouse", "listener", ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "mousewheel"]); - this._createCategory("Keyboard", "listener", ["keydown", "keypress", "keyup"]); - this._createCategory("HTML frame/object", "listener", ["load", "error", "resize", "scroll"]); + // FIXME: uncomment following once inspector stops being drop targer in major ports. + // Otherwise, inspector page reacts on drop event and tries to load the event data. + // this._createCategory("Drag", "listener", ["drag", "drop", "dragstart", "dragend", "dragenter", "dragleave", "dragover"]); + this._createCategory("Control", "listener", ["resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"]); + this._createCategory("Clipboard", "listener", ["copy", "cut", "paste", "beforecopy", "beforecut", "beforepaste"]); + this._createCategory("Load", "listener", ["load", "unload", "abort", "error"]); + this._createCategory("DOM Mutation", "listener", ["DOMActivate", "DOMFocusIn", "DOMFocusOut", "DOMAttrModified", "DOMCharacterDataModified", "DOMNodeInserted", "DOMNodeInsertedIntoDocument", "DOMNodeRemoved", "DOMNodeRemovedFromDocument", "DOMSubtreeModified", "DOMContentLoaded"]); + this._createCategory("Device", "listener", ["deviceorientation", "devicemotion"]); this._createCategory("Timer", "instrumentation", ["setTimer", "clearTimer", "timerFired"]); } @@ -285,6 +292,9 @@ WebInspector.EventListenerBreakpointsSidebarPane.prototype = { var title = WebInspector.EventListenerBreakpoint.eventNameForUI(eventName); breakpointItem.element = new TreeElement(title); categoryItem.element.appendChild(breakpointItem.element); + var hitMarker = document.createElement("div"); + hitMarker.className = "breakpoint-hit-marker"; + breakpointItem.element.listItemElement.appendChild(hitMarker); breakpointItem.element.listItemElement.addStyleClass("source-code"); breakpointItem.element.selectable = true; diff --git a/WebCore/inspector/front-end/CSSStyleModel.js b/WebCore/inspector/front-end/CSSStyleModel.js index 542a3b3..c3429fd 100644 --- a/WebCore/inspector/front-end/CSSStyleModel.js +++ b/WebCore/inspector/front-end/CSSStyleModel.js @@ -83,7 +83,7 @@ WebInspector.CSSStyleModel.prototype = { userCallback(result); } - InspectorBackend.getStyles(nodeId, false, callback.bind(null, userCallback)); + InspectorBackend.getStylesForNode2(nodeId, callback.bind(null, userCallback)); }, getComputedStyleAsync: function(nodeId, userCallback) @@ -96,7 +96,7 @@ WebInspector.CSSStyleModel.prototype = { userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload)); } - InspectorBackend.getComputedStyle(nodeId, callback.bind(null, userCallback)); + InspectorBackend.getComputedStyleForNode2(nodeId, callback.bind(null, userCallback)); }, getInlineStyleAsync: function(nodeId, userCallback) @@ -109,41 +109,418 @@ WebInspector.CSSStyleModel.prototype = { userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload)); } - InspectorBackend.getInlineStyle(nodeId, callback.bind(null, userCallback)); + InspectorBackend.getInlineStyleForNode2(nodeId, callback.bind(null, userCallback)); }, - setRuleSelector: function(ruleId, newContent, nodeId, successCallback, failureCallback) + setRuleSelector: function(ruleId, nodeId, newSelector, successCallback, failureCallback) { - function callback(newRulePayload, doesAffectSelectedNode) + function checkAffectsCallback(nodeId, successCallback, rulePayload, selectedNodeIds) { - if (!newRulePayload) + var doesAffectSelectedNode = (selectedNodeIds.indexOf(nodeId) >= 0); + successCallback(WebInspector.CSSRule.parsePayload(rulePayload), doesAffectSelectedNode); + } + + function callback(nodeId, successCallback, failureCallback, newSelector, rulePayload) + { + if (!rulePayload) failureCallback(); else - successCallback(WebInspector.CSSRule.parsePayload(newRulePayload), doesAffectSelectedNode); + InspectorBackend.querySelectorAll(nodeId, newSelector, checkAffectsCallback.bind(null, nodeId, successCallback, rulePayload)); } - InspectorBackend.setRuleSelector(ruleId, newContent, nodeId, callback); + InspectorBackend.setRuleSelector2(ruleId, newSelector, callback.bind(null, nodeId, successCallback, failureCallback)); }, - addRule: function(nodeId, newContent, successCallback, failureCallback) + addRule: function(nodeId, selector, successCallback, failureCallback) { - function callback(rule, doesAffectSelectedNode) + function checkAffectsCallback(nodeId, successCallback, rulePayload, selectedNodeIds) + { + var doesAffectSelectedNode = (selectedNodeIds.indexOf(nodeId) >= 0); + successCallback(WebInspector.CSSRule.parsePayload(rulePayload), doesAffectSelectedNode); + } + + function callback(successCallback, failureCallback, selector, rulePayload) { - if (!rule) { + if (!rulePayload) { // Invalid syntax for a selector failureCallback(); + } else + InspectorBackend.querySelectorAll(nodeId, selector, checkAffectsCallback.bind(null, nodeId, successCallback, rulePayload)); + } + + InspectorBackend.addRule2(nodeId, selector, callback.bind(null, successCallback, failureCallback, selector)); + } +} + +WebInspector.CSSStyleDeclaration = function(payload) +{ + this.id = payload.styleId; + this.properties = payload.properties; + this._shorthandValues = payload.shorthandValues; + this._livePropertyMap = {}; // LIVE properties (source-based or style-based) : { name -> CSSProperty } + this._allProperties = []; // ALL properties: [ CSSProperty ] + this._longhandProperties = {}; // shorthandName -> [ CSSProperty ] + this.__disabledProperties = {}; // DISABLED properties: { index -> CSSProperty } + var payloadPropertyCount = payload.cssProperties.length; + + var propertyIndex = 0; + for (var i = 0; i < payloadPropertyCount; ++i) { + var property = new WebInspector.CSSProperty.parsePayload(this, i, payload.cssProperties[i]); + this._allProperties.push(property); + if (property.disabled) + this.__disabledProperties[i] = property; + if (!property.active && !property.styleBased) + continue; + var name = property.name; + this[propertyIndex] = name; + this._livePropertyMap[name] = property; + + // Index longhand properties. + if (property.shorthand) { // only for parsed + var longhands = this._longhandProperties[property.shorthand]; + if (!longhands) { + longhands = []; + this._longhandProperties[property.shorthand] = longhands; + } + longhands.push(property); + } + ++propertyIndex; + } + this.length = propertyIndex; + if ("cssText" in payload) + this.cssText = payload.cssText; +} + +WebInspector.CSSStyleDeclaration.parsePayload = function(payload) +{ + return new WebInspector.CSSStyleDeclaration(payload); +} + +WebInspector.CSSStyleDeclaration.prototype = { + get allProperties() + { + return this._allProperties; + }, + + getLiveProperty: function(name) + { + return this._livePropertyMap[name]; + }, + + getPropertyValue: function(name) + { + var property = this._livePropertyMap[name]; + return property ? property.value : ""; + }, + + getPropertyPriority: function(name) + { + var property = this._livePropertyMap[name]; + return property ? property.priority : ""; + }, + + getPropertyShorthand: function(name) + { + var property = this._livePropertyMap[name]; + return property ? property.shorthand : ""; + }, + + isPropertyImplicit: function(name) + { + var property = this._livePropertyMap[name]; + return property ? property.implicit : ""; + }, + + styleTextWithShorthands: function() + { + var cssText = ""; + var foundProperties = {}; + for (var i = 0; i < this.length; ++i) { + var individualProperty = this[i]; + var shorthandProperty = this.getPropertyShorthand(individualProperty); + var propertyName = (shorthandProperty || individualProperty); + + if (propertyName in foundProperties) + continue; + + if (shorthandProperty) { + var value = this.getShorthandValue(shorthandProperty); + var priority = this.getShorthandPriority(shorthandProperty); } else { - var styleRule = WebInspector.CSSRule.parsePayload(rule); - styleRule.rule = rule; - successCallback(styleRule, doesAffectSelectedNode); + var value = this.getPropertyValue(individualProperty); + var priority = this.getPropertyPriority(individualProperty); } + + foundProperties[propertyName] = true; + + cssText += propertyName + ": " + value; + if (priority) + cssText += " !" + priority; + cssText += "; "; + } + + return cssText; + }, + + getLonghandProperties: function(name) + { + return this._longhandProperties[name] || []; + }, + + getShorthandValue: function(shorthandProperty) + { + var property = this.getLiveProperty(shorthandProperty); + return property ? property.value : this._shorthandValues[shorthandProperty]; + }, + + getShorthandPriority: function(shorthandProperty) + { + var priority = this.getPropertyPriority(shorthandProperty); + if (priority) + return priority; + + var longhands = this._longhandProperties[shorthandProperty]; + return longhands ? this.getPropertyPriority(longhands[0]) : null; + }, + + propertyAt: function(index) + { + return (index < this.allProperties.length) ? this.allProperties[index] : null; + }, + + pastLastSourcePropertyIndex: function() + { + for (var i = this.allProperties.length - 1; i >= 0; --i) { + var property = this.allProperties[i]; + if (property.active || property.disabled) + return i + 1; } + return 0; + }, - InspectorBackend.addRule(newContent, nodeId, callback); + newBlankProperty: function() + { + return new WebInspector.CSSProperty(this, this.pastLastSourcePropertyIndex(), "", "", "", "active", true, false, false, ""); }, - setCSSText: function(styleId, cssText) + insertPropertyAt: function(index, name, value, userCallback) + { + function callback(userCallback, payload) + { + if (!userCallback) + return; + + if (!payload) + userCallback(null); + else + userCallback(WebInspector.CSSStyleDeclaration.parsePayload(payload)); + } + + InspectorBackend.setPropertyText2(this.id, index, name + ": " + value + ";", false, callback.bind(null, userCallback)); + }, + + appendProperty: function(name, value, userCallback) + { + this.insertPropertyAt(this.allProperties.length, name, value, userCallback); + } +} + +WebInspector.CSSRule = function(payload) +{ + this.id = payload.ruleId; + this.selectorText = payload.selectorText; + this.sourceLine = payload.sourceLine; + this.sourceURL = payload.sourceURL; + this.origin = payload.origin; + this.style = WebInspector.CSSStyleDeclaration.parsePayload(payload.style); + this.style.parentRule = this; + this.selectorRange = payload.selectorRange; +} + +WebInspector.CSSRule.parsePayload = function(payload) +{ + return new WebInspector.CSSRule(payload); +} + +WebInspector.CSSRule.prototype = { + get isUserAgent() { - InspectorBackend.setStyleText(styleId, cssText); + return this.origin === "user-agent"; + }, + + get isUser() + { + return this.origin === "user"; + }, + + get isViaInspector() + { + return this.origin === "inspector"; + }, + + get isRegular() + { + return this.origin === ""; + } +} + +WebInspector.CSSProperty = function(ownerStyle, index, name, value, priority, status, parsedOk, implicit, shorthand, text) +{ + this.ownerStyle = ownerStyle; + this.index = index; + this.name = name; + this.value = value; + this.priority = priority; + this.status = status; + this.parsedOk = parsedOk; + this.implicit = implicit; + this.shorthand = shorthand; + this.text = text; +} + +WebInspector.CSSProperty.parsePayload = function(ownerStyle, index, payload) +{ + var result = new WebInspector.CSSProperty( + ownerStyle, index, payload.name, payload.value, payload.priority, payload.status, payload.parsedOk, payload.implicit, payload.shorthandName, payload.text); + return result; +} + +WebInspector.CSSProperty.prototype = { + get propertyText() + { + if (this.text !== undefined) + return this.text; + + if (this.name === "") + return ""; + return this.name + ": " + this.value + (this.priority ? " !" + this.priority : "") + ";"; + }, + + get isLive() + { + return this.active || this.styleBased; + }, + + get active() + { + return this.status === "active"; + }, + + get styleBased() + { + return this.status === "style"; + }, + + get inactive() + { + return this.status === "inactive"; + }, + + get disabled() + { + return this.status === "disabled"; + }, + + // Replaces "propertyName: propertyValue [!important];" in the stylesheet by an arbitrary propertyText. + setText: function(propertyText, userCallback) + { + function callback(userCallback, stylePayload) + { + if (stylePayload) + this.text = propertyText; + + if (!userCallback) + return; + if (!stylePayload) + userCallback(null); + else { + var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload); + userCallback(style); + } + } + + if (!this.ownerStyle) + throw "No ownerStyle for property"; + + // An index past all the properties adds a new property to the style. + InspectorBackend.setPropertyText2(this.ownerStyle.id, this.index, propertyText, this.index < this.ownerStyle.pastLastSourcePropertyIndex(), callback.bind(this, userCallback)); + }, + + setValue: function(newValue, userCallback) + { + var text = this.name + ": " + newValue + (this.priority ? " !" + this.priority : "") + ";" + this.setText(text, userCallback); + }, + + setDisabled: function(disabled, userCallback) + { + if (!this.ownerStyle && userCallback) + userCallback(null); + if (disabled === this.disabled && userCallback) + userCallback(this.ownerStyle); + + function callback(userCallback, stylePayload) + { + if (!userCallback) + return; + if (!stylePayload) + userCallback(null); + else { + var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload); + userCallback(style); + } + } + + InspectorBackend.toggleProperty2(this.ownerStyle.id, this.index, disabled, callback.bind(this, userCallback)); + } +} + +WebInspector.CSSStyleSheet = function(payload) +{ + this.id = payload.styleSheetId; + this.sourceURL = payload.sourceURL; + this.title = payload.title; + this.disabled = payload.disabled; + this.rules = []; + this.styles = {}; + for (var i = 0; i < payload.rules.length; ++i) { + var rule = WebInspector.CSSRule.parsePayload(payload.rules[i]); + this.rules.push(rule); + if (rule.style) + this.styles[rule.style.id] = rule.style; + } + if ("text" in payload) + this._text = payload.text; +} + +WebInspector.CSSStyleSheet.createForId = function(styleSheetId, userCallback) +{ + function callback(userCallback, styleSheetPayload) + { + if (!styleSheetPayload) + userCallback(null); + else + userCallback(new WebInspector.CSSStyleSheet(styleSheetPayload)); + } + InspectorBackend.getStyleSheet2(styleSheetId, callback.bind(this, userCallback)); +} + +WebInspector.CSSStyleSheet.prototype = { + getText: function() + { + return this._text; + }, + + setText: function(newText, userCallback) + { + function callback(userCallback, styleSheetPayload) + { + if (!styleSheetPayload) + userCallback(null); + else + userCallback(new WebInspector.CSSStyleSheet(styleSheetPayload)); + } + + InspectorBackend.setStyleSheetText2(this.id, newText, callback.bind(this, userCallback)); } } diff --git a/WebCore/inspector/front-end/CallStackSidebarPane.js b/WebCore/inspector/front-end/CallStackSidebarPane.js index 08c1942..b2e6a5c 100644 --- a/WebCore/inspector/front-end/CallStackSidebarPane.js +++ b/WebCore/inspector/front-end/CallStackSidebarPane.js @@ -173,11 +173,12 @@ WebInspector.CallStackSidebarPane.prototype = { _breakpointHit: function(event) { var breakpoint = event.data.breakpoint; - - var statusMessageElement = document.createElement("div"); - statusMessageElement.className = "info"; - breakpoint.populateStatusMessageElement(statusMessageElement, event.data.eventData); - this.bodyElement.appendChild(statusMessageElement); + if (breakpoint.populateStatusMessageElement) { + var statusMessageElement = document.createElement("div"); + statusMessageElement.className = "info"; + breakpoint.populateStatusMessageElement(statusMessageElement, event.data.eventData); + this.bodyElement.appendChild(statusMessageElement); + } } } diff --git a/WebCore/inspector/front-end/DOMAgent.js b/WebCore/inspector/front-end/DOMAgent.js index 470e775..37bf549 100644 --- a/WebCore/inspector/front-end/DOMAgent.js +++ b/WebCore/inspector/front-end/DOMAgent.js @@ -524,296 +524,6 @@ WebInspector.EventListeners.getEventListenersForNodeAsync = function(node, callb InspectorBackend.getEventListenersForNode(node.id, callback); } -WebInspector.CSSStyleDeclaration = function(payload) -{ - this.id = payload.styleId; - this.properties = payload.properties; - this._shorthandValues = payload.shorthandValues; - this._livePropertyMap = {}; // LIVE properties (source-based or style-based) : { name -> CSSProperty } - this._allProperties = []; // ALL properties: [ CSSProperty ] - this._longhandProperties = {}; // shorthandName -> [ CSSProperty ] - this.__disabledProperties = {}; // DISABLED properties: { index -> CSSProperty } - var payloadPropertyCount = payload.cssProperties.length; - - var propertyIndex = 0; - for (var i = 0; i < payloadPropertyCount; ++i) { - var property = new WebInspector.CSSProperty.parsePayload(this, i, payload.cssProperties[i]); - this._allProperties.push(property); - if (property.disabled) - this.__disabledProperties[i] = property; - if (!property.active && !property.styleBased) - continue; - var name = property.name; - this[propertyIndex] = name; - this._livePropertyMap[name] = property; - - // Index longhand properties. - if (property.shorthand) { // only for parsed - var longhands = this._longhandProperties[property.shorthand]; - if (!longhands) { - longhands = []; - this._longhandProperties[property.shorthand] = longhands; - } - longhands.push(property); - } - ++propertyIndex; - } - this.length = propertyIndex; -} - -WebInspector.CSSStyleDeclaration.parsePayload = function(payload) -{ - return new WebInspector.CSSStyleDeclaration(payload); -} - -WebInspector.CSSStyleDeclaration.prototype = { - get allProperties() - { - return this._allProperties; - }, - - getLiveProperty: function(name) - { - return this._livePropertyMap[name]; - }, - - getPropertyValue: function(name) - { - var property = this._livePropertyMap[name]; - return property ? property.value : ""; - }, - - getPropertyPriority: function(name) - { - var property = this._livePropertyMap[name]; - return property ? property.priority : ""; - }, - - getPropertyShorthand: function(name) - { - var property = this._livePropertyMap[name]; - return property ? property.shorthand : ""; - }, - - isPropertyImplicit: function(name) - { - var property = this._livePropertyMap[name]; - return property ? property.implicit : ""; - }, - - styleTextWithShorthands: function() - { - var cssText = ""; - var foundProperties = {}; - for (var i = 0; i < this.length; ++i) { - var individualProperty = this[i]; - var shorthandProperty = this.getPropertyShorthand(individualProperty); - var propertyName = (shorthandProperty || individualProperty); - - if (propertyName in foundProperties) - continue; - - if (shorthandProperty) { - var value = this.getShorthandValue(shorthandProperty); - var priority = this.getShorthandPriority(shorthandProperty); - } else { - var value = this.getPropertyValue(individualProperty); - var priority = this.getPropertyPriority(individualProperty); - } - - foundProperties[propertyName] = true; - - cssText += propertyName + ": " + value; - if (priority) - cssText += " !" + priority; - cssText += "; "; - } - - return cssText; - }, - - getLonghandProperties: function(name) - { - return this._longhandProperties[name] || []; - }, - - getShorthandValue: function(shorthandProperty) - { - var property = this.getLiveProperty(shorthandProperty); - return property ? property.value : this._shorthandValues[shorthandProperty]; - }, - - getShorthandPriority: function(shorthandProperty) - { - var priority = this.getPropertyPriority(shorthandProperty); - if (priority) - return priority; - - var longhands = this._longhandProperties[shorthandProperty]; - return longhands ? this.getPropertyPriority(longhands[0]) : null; - }, - - appendProperty: function(propertyName, propertyValue, userCallback) - { - function setPropertyCallback(userCallback, success, stylePayload) - { - if (!success) - userCallback(null); - else - userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload)); - } - - // FIXME(apavlov): this should be migrated to the new InspectorCSSAgent API once it is enabled. - InspectorBackend.applyStyleText(this.id, propertyName + ": " + propertyValue + ";", propertyName, setPropertyCallback.bind(this, userCallback)); - }, - - propertyAt: function(index) - { - return (index < this.allProperties.length) ? this.allProperties[index] : null; - } -} - -WebInspector.CSSRule = function(payload) -{ - this.id = payload.ruleId; - this.selectorText = payload.selectorText; - this.sourceLine = payload.sourceLine; - this.sourceURL = payload.sourceURL; - this.origin = payload.origin; - this.style = WebInspector.CSSStyleDeclaration.parsePayload(payload.style); - this.style.parentRule = this; -} - -WebInspector.CSSRule.parsePayload = function(payload) -{ - return new WebInspector.CSSRule(payload); -} - -WebInspector.CSSRule.prototype = { - get isUserAgent() - { - return this.origin === "user-agent"; - }, - - get isUser() - { - return this.origin === "user"; - }, - - get isViaInspector() - { - return this.origin === "inspector"; - }, - - get isRegular() - { - return this.origin === ""; - } -} - -WebInspector.CSSProperty = function(ownerStyle, index, name, value, priority, status, parsedOk, implicit, shorthand, text) -{ - this.ownerStyle = ownerStyle; - this.index = index; - this.name = name; - this.value = value; - this.priority = priority; - this.status = status; - this.parsedOk = parsedOk; - this.implicit = implicit; - this.shorthand = shorthand; - this.text = text; -} - -WebInspector.CSSProperty.parsePayload = function(ownerStyle, index, payload) -{ - var result = new WebInspector.CSSProperty( - ownerStyle, index, payload.name, payload.value, payload.priority, payload.status, payload.parsedOk, payload.implicit, payload.shorthandName, payload.text); - return result; -} - -WebInspector.CSSProperty.prototype = { - get propertyText() - { - if (this.text !== undefined) - return this.text; - - return this.name + ": " + this.value + (this.priority ? " !" + this.priority : "") + ";"; - }, - - get isLive() - { - return this.active || this.styleBased; - }, - - get active() - { - return this.status === "active"; - }, - - get styleBased() - { - return this.status === "style"; - }, - - get inactive() - { - return this.status === "inactive"; - }, - - get disabled() - { - return this.status === "disabled"; - }, - - // Replaces "propertyName: propertyValue [!important];" in the stylesheet by an arbitrary propertyText. - setText: function(propertyText, userCallback) - { - function callback(userCallback, success, stylePayload) - { - if (!userCallback) - return; - if (!success) - userCallback(null); - else { - var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload); - userCallback(style); - } - } - - if (!this.ownerStyle) - throw "No ownerStyle for property"; - InspectorBackend.applyStyleText(this.ownerStyle.id, propertyText, this.name, callback.bind(this, userCallback)); - }, - - setValue: function(newValue, userCallback) - { - var text = this.name + ": " + newValue + (this.priority ? " !" + this.priority : "") + ";" - this.setText(text, userCallback); - }, - - setDisabled: function(disabled, userCallback) - { - if (!this.ownerStyle && userCallback) - userCallback(null); - if (disabled === this.disabled && userCallback) - userCallback(this.ownerStyle); - - function callback(userCallback, stylePayload) - { - if (!userCallback) - return; - if (!stylePayload) - userCallback(null); - else { - var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload); - userCallback(style); - } - } - InspectorBackend.toggleStyleEnabled(this.ownerStyle.id, this.name, disabled, callback.bind(this, userCallback)); - } -} - WebInspector.attributesUpdated = function() { this.domAgent._attributesUpdated.apply(this.domAgent, arguments); diff --git a/WebCore/inspector/front-end/DatabaseQueryView.js b/WebCore/inspector/front-end/DatabaseQueryView.js index a179eaa..111246f 100644 --- a/WebCore/inspector/front-end/DatabaseQueryView.js +++ b/WebCore/inspector/front-end/DatabaseQueryView.js @@ -139,7 +139,7 @@ WebInspector.DatabaseQueryView.prototype = { _queryFinished: function(query, columnNames, values) { - var dataGrid = WebInspector.panels.storage.dataGridForResult(columnNames, values); + var dataGrid = WebInspector.panels.resources.dataGridForResult(columnNames, values); var trimmedQuery = query.trim(); if (dataGrid) { @@ -149,7 +149,7 @@ WebInspector.DatabaseQueryView.prototype = { } if (trimmedQuery.match(/^create /i) || trimmedQuery.match(/^drop table /i)) - WebInspector.panels.storage.updateDatabaseTables(this.database); + WebInspector.panels.resources.updateDatabaseTables(this.database); }, _queryError: function(query, error) diff --git a/WebCore/inspector/front-end/DatabaseTableView.js b/WebCore/inspector/front-end/DatabaseTableView.js index b234b9a..1a886ff 100644 --- a/WebCore/inspector/front-end/DatabaseTableView.js +++ b/WebCore/inspector/front-end/DatabaseTableView.js @@ -58,7 +58,7 @@ WebInspector.DatabaseTableView.prototype = { { this.element.removeChildren(); - var dataGrid = WebInspector.panels.storage.dataGridForResult(columnNames, values); + var dataGrid = WebInspector.panels.resources.dataGridForResult(columnNames, values); if (!dataGrid) { var emptyMsgElement = document.createElement("div"); emptyMsgElement.className = "storage-empty-view"; diff --git a/WebCore/inspector/front-end/ElementsTreeOutline.js b/WebCore/inspector/front-end/ElementsTreeOutline.js index 4404051..f893ca0 100644 --- a/WebCore/inspector/front-end/ElementsTreeOutline.js +++ b/WebCore/inspector/front-end/ElementsTreeOutline.js @@ -265,21 +265,28 @@ WebInspector.ElementsTreeOutline.prototype = { return; var contextMenu = new WebInspector.ContextMenu(); - - var href = event.target.enclosingNodeOrSelfWithClass("webkit-html-resource-link") || event.target.enclosingNodeOrSelfWithClass("webkit-html-external-link"); - var tag = event.target.enclosingNodeOrSelfWithClass("webkit-html-tag"); - var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node"); - var needSeparator; - if (href) - needSeparator = WebInspector.panels.elements.populateHrefContextMenu(contextMenu, event, href); - if (tag && listItem.treeElement._populateTagContextMenu) { - if (needSeparator) - contextMenu.appendSeparator(); - listItem.treeElement._populateTagContextMenu(contextMenu, event); - } else if (textNode && listItem.treeElement._populateTextContextMenu) { - if (needSeparator) - contextMenu.appendSeparator(); - listItem.treeElement._populateTextContextMenu(contextMenu, textNode); + if (this.showInElementsPanelEnabled) { + function focusElement() + { + WebInspector.panels.elements.focusedDOMNode = listItem.treeElement.representedObject; + } + contextMenu.appendItem(WebInspector.UIString("Reveal in Elements Panel"), focusElement.bind(this)); + } else { + var href = event.target.enclosingNodeOrSelfWithClass("webkit-html-resource-link") || event.target.enclosingNodeOrSelfWithClass("webkit-html-external-link"); + var tag = event.target.enclosingNodeOrSelfWithClass("webkit-html-tag"); + var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node"); + var needSeparator; + if (href) + needSeparator = WebInspector.panels.elements.populateHrefContextMenu(contextMenu, event, href); + if (tag && listItem.treeElement._populateTagContextMenu) { + if (needSeparator) + contextMenu.appendSeparator(); + listItem.treeElement._populateTagContextMenu(contextMenu, event); + } else if (textNode && listItem.treeElement._populateTextContextMenu) { + if (needSeparator) + contextMenu.appendSeparator(); + listItem.treeElement._populateTextContextMenu(contextMenu, textNode); + } } contextMenu.show(event); } @@ -593,8 +600,8 @@ WebInspector.ElementsTreeElement.prototype = { if (childNodeCount > this.expandedChildCount) { var targetButtonIndex = expandedChildCount; if (!this.expandAllButtonElement) { - var title = "<button class=\"show-all-nodes\" value=\"\" />"; - var item = new TreeElement(title, null, false); + var item = new TreeElement(null, null, false); + item.titleHTML = "<button class=\"show-all-nodes\" value=\"\" />"; item.selectable = false; item.expandAllButton = true; this.insertChild(item, targetButtonIndex); @@ -1175,8 +1182,7 @@ WebInspector.ElementsTreeElement.prototype = { if (this._editing) return; - var title = this._nodeTitleInfo(WebInspector.linkifyURL).title; - this.title = "<span class=\"highlight\">" + title + "</span>"; + this.titleHTML = "<span class=\"highlight\">" + this._nodeTitleInfo(WebInspector.linkifyURL).titleHTML + "</span>"; delete this.selectionElement; this.updateSelection(); this._preventFollowingLinksOnDoubleClick(); @@ -1226,53 +1232,54 @@ WebInspector.ElementsTreeElement.prototype = { _nodeTitleInfo: function(linkify) { var node = this.representedObject; - var info = {title: "", hasChildren: this.hasChildren}; + var info = {titleHTML: "", hasChildren: this.hasChildren}; switch (node.nodeType) { case Node.DOCUMENT_NODE: - info.title = "Document"; + info.titleHTML = "Document"; break; case Node.DOCUMENT_FRAGMENT_NODE: - info.title = "Document Fragment"; + info.titleHTML = "Document Fragment"; break; case Node.ATTRIBUTE_NODE: var value = node.value || "\u200B"; // Zero width space to force showing an empty value. - info.title = this._attributeHTML(node.name, value); + info.titleHTML = this._attributeHTML(node.name, value); break; case Node.ELEMENT_NODE: var tagName = this.treeOutline.nodeNameToCorrectCase(node.nodeName).escapeHTML(); if (this._elementCloseTag) { - info.title = this._tagHTML(tagName, true, true); + info.titleHTML = this._tagHTML(tagName, true, true); info.hasChildren = false; break; } - info.title = this._tagHTML(tagName, false, false, linkify); + var titleHTML = this._tagHTML(tagName, false, false, linkify); var textChild = onlyTextChild.call(node); var showInlineText = textChild && textChild.textContent.length < Preferences.maxInlineTextChildLength; if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WebInspector.ElementsTreeElement.ForbiddenClosingTagElements[tagName]))) { if (this.hasChildren) - info.title += "<span class=\"webkit-html-text-node\">…</span>​"; - info.title += this._tagHTML(tagName, true, false); + titleHTML += "<span class=\"webkit-html-text-node\">…</span>​"; + titleHTML += this._tagHTML(tagName, true, false); } // If this element only has a single child that is a text node, // just show that text and the closing tag inline rather than // create a subtree for them if (showInlineText) { - info.title += "<span class=\"webkit-html-text-node\">" + textChild.nodeValue.escapeHTML() + "</span>​" + this._tagHTML(tagName, true, false); + titleHTML += "<span class=\"webkit-html-text-node\">" + textChild.nodeValue.escapeHTML() + "</span>​" + this._tagHTML(tagName, true, false); info.hasChildren = false; } + info.titleHTML = titleHTML; break; case Node.TEXT_NODE: if (isNodeWhitespace.call(node)) - info.title = "(whitespace)"; + info.titleHTML = "(whitespace)"; else { if (node.parentNode && node.parentNode.nodeName.toLowerCase() === "script") { var newNode = document.createElement("span"); @@ -1281,7 +1288,7 @@ WebInspector.ElementsTreeElement.prototype = { var javascriptSyntaxHighlighter = new WebInspector.DOMSyntaxHighlighter("text/javascript"); javascriptSyntaxHighlighter.syntaxHighlightNode(newNode); - info.title = "<span class=\"webkit-html-text-node webkit-html-js-node\">" + newNode.innerHTML.replace(/^[\n\r]*/, "").replace(/\s*$/, "") + "</span>"; + info.titleHTML = "<span class=\"webkit-html-text-node webkit-html-js-node\">" + newNode.innerHTML.replace(/^[\n\r]*/, "").replace(/\s*$/, "") + "</span>"; } else if (node.parentNode && node.parentNode.nodeName.toLowerCase() === "style") { var newNode = document.createElement("span"); newNode.textContent = node.textContent; @@ -1289,35 +1296,35 @@ WebInspector.ElementsTreeElement.prototype = { var cssSyntaxHighlighter = new WebInspector.DOMSyntaxHighlighter("text/css"); cssSyntaxHighlighter.syntaxHighlightNode(newNode); - info.title = "<span class=\"webkit-html-text-node webkit-html-css-node\">" + newNode.innerHTML.replace(/^[\n\r]*/, "").replace(/\s*$/, "") + "</span>"; - } else { - info.title = "\"<span class=\"webkit-html-text-node\">" + node.nodeValue.escapeHTML() + "</span>\""; - } + info.titleHTML = "<span class=\"webkit-html-text-node webkit-html-css-node\">" + newNode.innerHTML.replace(/^[\n\r]*/, "").replace(/\s*$/, "") + "</span>"; + } else + info.titleHTML = "\"<span class=\"webkit-html-text-node\">" + node.nodeValue.escapeHTML() + "</span>\""; } break; case Node.COMMENT_NODE: - info.title = "<span class=\"webkit-html-comment\"><!--" + node.nodeValue.escapeHTML() + "--></span>"; + info.titleHTML = "<span class=\"webkit-html-comment\"><!--" + node.nodeValue.escapeHTML() + "--></span>"; break; case Node.DOCUMENT_TYPE_NODE: - info.title = "<span class=\"webkit-html-doctype\"><!DOCTYPE " + node.nodeName; + var titleHTML = "<span class=\"webkit-html-doctype\"><!DOCTYPE " + node.nodeName; if (node.publicId) { - info.title += " PUBLIC \"" + node.publicId + "\""; + titleHTML += " PUBLIC \"" + node.publicId + "\""; if (node.systemId) - info.title += " \"" + node.systemId + "\""; + titleHTML += " \"" + node.systemId + "\""; } else if (node.systemId) - info.title += " SYSTEM \"" + node.systemId + "\""; + titleHTML += " SYSTEM \"" + node.systemId + "\""; if (node.internalSubset) - info.title += " [" + node.internalSubset + "]"; - info.title += "></span>"; + titleHTML += " [" + node.internalSubset + "]"; + titleHTML += "></span>"; + info.titleHTML = titleHTML; break; case Node.CDATA_SECTION_NODE: - info.title = "<span class=\"webkit-html-text-node\"><![CDATA[" + node.nodeValue.escapeHTML() + "]]></span>"; + info.titleHTML = "<span class=\"webkit-html-text-node\"><![CDATA[" + node.nodeValue.escapeHTML() + "]]></span>"; break; default: - info.title = this.treeOutline.nodeNameToCorrectCase(node.nodeName).collapseWhitespace().escapeHTML(); + info.titleHTML = this.treeOutline.nodeNameToCorrectCase(node.nodeName).collapseWhitespace().escapeHTML(); } return info; diff --git a/WebCore/inspector/front-end/ExtensionAPI.js b/WebCore/inspector/front-end/ExtensionAPI.js index 7d6d76c..e526cf5 100644 --- a/WebCore/inspector/front-end/ExtensionAPI.js +++ b/WebCore/inspector/front-end/ExtensionAPI.js @@ -85,13 +85,6 @@ EventSinkImpl.prototype = { } } -function EventSink(type, customDispatch) -{ - var impl = new EventSinkImpl(type, customDispatch); - this.addListener = bind(impl.addListener, impl); - this.removeListener = bind(impl.removeListener, impl); -} - function InspectorExtensionAPI() { this.audits = new Audits(); @@ -183,6 +176,7 @@ Panels.prototype = { function PanelImpl(id) { this._id = id; + this.onSelectionChanged = new EventSink("panel-objectSelected-" + id); } PanelImpl.prototype = { @@ -213,25 +207,12 @@ PanelImpl.prototype = { } } -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); -} - function ExtensionPanel(id) { Panel.call(this, id); this.onSearch = new EventSink("panel-search-" + id); } -ExtensionPanel.prototype = { -} - -ExtensionPanel.prototype.__proto__ = Panel.prototype; - function ExtensionSidebarPaneImpl(id) { this._id = id; @@ -249,17 +230,10 @@ ExtensionSidebarPaneImpl.prototype = { } } -function ExtensionSidebarPane(id, impl) -{ - 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); + this.onUpdated = new EventSink("watch-sidebar-updated-" + id); } WatchExpressionSidebarPaneImpl.prototype = { @@ -274,13 +248,12 @@ WatchExpressionSidebarPaneImpl.prototype = { } } +WatchExpressionSidebarPaneImpl.prototype.__proto__ = ExtensionSidebarPaneImpl.prototype; + 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() @@ -296,7 +269,7 @@ Audits.prototype = { } } -function AuditCategory(id) +function AuditCategoryImpl(id) { function customDispatch(request) { @@ -308,22 +281,13 @@ function AuditCategory(id) auditResult.done(); } } - var impl = new AuditCategoryImpl(id); + this._id = id; this.onAuditStarted = new EventSink("audit-started-" + id, customDispatch); } -function AuditCategoryImpl(id) +function AuditResultImpl(id) { this._id = id; -} - -function AuditResult(id) -{ - var impl = new AuditResultImpl(id); - - this.addResult = bind(impl.addResult, impl); - this.createResult = bind(impl.createResult, impl); - this.done = bind(impl.done, impl); var formatterTypes = [ "url", @@ -331,19 +295,7 @@ function AuditResult(id) "text" ]; for (var i = 0; i < formatterTypes.length; ++i) - this[formatterTypes[i]] = bind(impl._nodeFactory, null, formatterTypes[i]); -} - -AuditResult.prototype = { - get Severity() - { - return private.audits.Severity; - } -} - -function AuditResultImpl(id) -{ - this._id = id; + this[formatterTypes[i]] = bind(this._nodeFactory, null, formatterTypes[i]); } AuditResultImpl.prototype = { @@ -376,6 +328,11 @@ AuditResultImpl.prototype = { extensionServer.sendRequest({ command: "stopAuditCategoryRun", resultId: this._id }); }, + get Severity() + { + return private.audits.Severity; + }, + _nodeFactory: function(type) { return { @@ -503,6 +460,34 @@ function bind(func, thisObject) return function() { return func.apply(thisObject, args.concat(Array.prototype.slice.call(arguments, 0))); }; } +function populateInterfaceClass(interface, implementation) +{ + for (var member in implementation) { + if (member.charAt(0) === "_") + continue; + var value = implementation[member]; + interface[member] = typeof value === "function" ? bind(value, implementation) + : interface[member] = implementation[member]; + } +} + +function declareInterfaceClass(implConstructor) +{ + return function() + { + var impl = { __proto__: implConstructor.prototype }; + implConstructor.apply(impl, arguments); + populateInterfaceClass(this, impl); + } +} + +var EventSink = declareInterfaceClass(EventSinkImpl); +var Panel = declareInterfaceClass(PanelImpl); +var ExtensionSidebarPane = declareInterfaceClass(ExtensionSidebarPaneImpl); +var WatchExpressionSidebarPane = declareInterfaceClass(WatchExpressionSidebarPaneImpl); +var AuditCategory = declareInterfaceClass(AuditCategoryImpl); +var AuditResult = declareInterfaceClass(AuditResultImpl); + var extensionServer = new ExtensionServerClient(); webInspector = new InspectorExtensionAPI(); diff --git a/WebCore/inspector/front-end/ExtensionServer.js b/WebCore/inspector/front-end/ExtensionServer.js index 6ffa33a..7229785 100644 --- a/WebCore/inspector/front-end/ExtensionServer.js +++ b/WebCore/inspector/front-end/ExtensionServer.js @@ -277,8 +277,8 @@ WebInspector.ExtensionServer.prototype = { if (!resource) return this._status.E_NOTFOUND(typeof id + ": " + id); - WebInspector.panels.storage.showResource(resource, message.line); - WebInspector.showPanel("storage"); + WebInspector.panels.resources.showResource(resource, message.line); + WebInspector.showPanel("resources"); }, _dispatchCallback: function(requestId, port, result) diff --git a/WebCore/inspector/front-end/Images/auditsIcon.png b/WebCore/inspector/front-end/Images/auditsIcon.png Binary files differindex 8d1f752..ebeafdc 100644 --- a/WebCore/inspector/front-end/Images/auditsIcon.png +++ b/WebCore/inspector/front-end/Images/auditsIcon.png diff --git a/WebCore/inspector/front-end/Images/storageIcon.png b/WebCore/inspector/front-end/Images/storageIcon.png Binary files differdeleted file mode 100644 index 79c7bb3..0000000 --- a/WebCore/inspector/front-end/Images/storageIcon.png +++ /dev/null diff --git a/WebCore/inspector/front-end/NetworkPanel.js b/WebCore/inspector/front-end/NetworkPanel.js index 71433af..a695167 100644 --- a/WebCore/inspector/front-end/NetworkPanel.js +++ b/WebCore/inspector/front-end/NetworkPanel.js @@ -392,7 +392,7 @@ WebInspector.NetworkPanel.prototype = { var maxTime = -1; for (var i = 0; i < this._resources.length; ++i) { var resource = this._resources[i]; - transferSize += resource.cached ? 0 : resource.transferSize; + transferSize += (resource.cached || !resource.transferSize) ? 0 : resource.transferSize; if (resource.isMainResource) baseTime = resource.startTime; if (resource.endTime > maxTime) @@ -864,7 +864,7 @@ WebInspector.NetworkPanel.prototype = { view.show(this._viewsContainerElement); if (line) { - view.selectContentTab(true); + view.selectContentTab(); if (view.revealLine) view.revealLine(line); if (view.highlightLine) diff --git a/WebCore/inspector/front-end/ObjectPropertiesSection.js b/WebCore/inspector/front-end/ObjectPropertiesSection.js index 015039c..e13e5eb 100644 --- a/WebCore/inspector/front-end/ObjectPropertiesSection.js +++ b/WebCore/inspector/front-end/ObjectPropertiesSection.js @@ -76,7 +76,8 @@ WebInspector.ObjectPropertiesSection.prototype = { if (!this.propertiesTreeOutline.children.length) { var title = "<div class=\"info\">" + this.emptyPlaceholder + "</div>"; - var infoElement = new TreeElement(title, null, false); + var infoElement = new TreeElement(null, null, false); + infoElement.titleHTML = title; this.propertiesTreeOutline.appendChild(infoElement); } this.propertiesForTest = properties; @@ -186,6 +187,8 @@ WebInspector.ObjectPropertyTreeElement.prototype = { this.valueElement.addStyleClass("error"); if (this.property.value.type) this.valueElement.addStyleClass("console-formatted-" + this.property.value.type); + if (this.property.value.type === "node") + this.valueElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true); this.listItemElement.removeChildren(); @@ -195,6 +198,24 @@ WebInspector.ObjectPropertyTreeElement.prototype = { this.hasChildren = this.property.value.hasChildren; }, + _contextMenuEventFired: function() + { + function selectNode(nodeId) + { + if (nodeId) + WebInspector.panels.elements.focusedDOMNode = WebInspector.domAgent.nodeForId(nodeId); + } + + function revealElement() + { + this.property.value.pushNodeToFrontend(selectNode); + } + + var contextMenu = new WebInspector.ContextMenu(); + contextMenu.appendItem(WebInspector.UIString("Reveal in Elements Panel"), revealElement.bind(this)); + contextMenu.show(event); + }, + updateSiblings: function() { if (this.parent.root) diff --git a/WebCore/inspector/front-end/ResourceManager.js b/WebCore/inspector/front-end/ResourceManager.js index bb34561..223e435 100644 --- a/WebCore/inspector/front-end/ResourceManager.js +++ b/WebCore/inspector/front-end/ResourceManager.js @@ -250,7 +250,7 @@ WebInspector.ResourceManager.prototype = { resource.type = WebInspector.Resource.Type[type]; resource.content = sourceString; - WebInspector.panels.storage.refreshResource(resource); + WebInspector.panels.resources.refreshResource(resource); WebInspector.panels.network.refreshResource(resource); }, @@ -404,7 +404,7 @@ WebInspector.ResourceManager.prototype = { else if (resourceForURL instanceof Array) resourceForURL.push(resource); else - this._resourcesByURL[resource.url] = [resourceForURL]; + this._resourcesByURL[resource.url] = [resourceForURL, resource]; }, _unbindResourceURL: function(resource) @@ -489,7 +489,7 @@ WebInspector.ResourceTreeModel.prototype = { addOrUpdateFrame: function(frame) { var tmpResource = new WebInspector.Resource(null, frame.url); - WebInspector.panels.storage.addOrUpdateFrame(frame.parentId, frame.id, frame.name, tmpResource.displayName); + WebInspector.panels.resources.addOrUpdateFrame(frame.parentId, frame.id, frame.name, tmpResource.displayName); var subframes = this._subframes[frame.parentId]; if (!subframes) { subframes = {}; @@ -508,19 +508,19 @@ WebInspector.ResourceTreeModel.prototype = { var resourcesForFrame = this._resourcesByFrameId[frame.id]; for (var i = 0; resourcesForFrame && i < resourcesForFrame.length; ++i) { WebInspector.resourceManager._bindResourceURL(resourcesForFrame[i]); - WebInspector.panels.storage.addResourceToFrame(frame.id, resourcesForFrame[i]); + WebInspector.panels.resources.addResourceToFrame(frame.id, resourcesForFrame[i]); } }, frameDetachedFromParent: function(frameId) { this._clearChildFramesAndResources(frameId, 0); - WebInspector.panels.storage.removeFrame(frameId); + WebInspector.panels.resources.removeFrame(frameId); }, _clearChildFramesAndResources: function(frameId, loaderId) { - WebInspector.panels.storage.removeResourcesFromFrame(frameId); + WebInspector.panels.resources.removeResourcesFromFrame(frameId); this._clearResources(frameId, loaderId); var subframes = this._subframes[frameId]; @@ -528,7 +528,7 @@ WebInspector.ResourceTreeModel.prototype = { return; for (var childFrameId in subframes) { - WebInspector.panels.storage.removeFrame(childFrameId); + WebInspector.panels.resources.removeFrame(childFrameId); this._clearChildFramesAndResources(childFrameId, loaderId); } delete this._subframes[frameId]; @@ -543,7 +543,7 @@ WebInspector.ResourceTreeModel.prototype = { } resourcesForFrame.push(resource); - WebInspector.panels.storage.addResourceToFrame(frameId, resource); + WebInspector.panels.resources.addResourceToFrame(frameId, resource); }, _clearResources: function(frameId, loaderToPreserveId) diff --git a/WebCore/inspector/front-end/ResourceView.js b/WebCore/inspector/front-end/ResourceView.js index 3ca7fcc..19e3052 100644 --- a/WebCore/inspector/front-end/ResourceView.js +++ b/WebCore/inspector/front-end/ResourceView.js @@ -39,12 +39,12 @@ WebInspector.ResourceView = function(resource) this.headersElement = document.createElement("div"); this.headersElement.className = "resource-view-headers"; - this.tabbedPane.appendTab("headers", WebInspector.UIString("Headers"), this.headersElement, this._selectHeadersTab.bind(this, true)); + this.tabbedPane.appendTab("headers", WebInspector.UIString("Headers"), this.headersElement, this._selectTab.bind(this, "headers")); if (this.hasContentTab()) { this.contentElement = document.createElement("div"); this.contentElement.className = "resource-view-content"; - this.tabbedPane.appendTab("content", WebInspector.UIString("Content"), this.contentElement, this.selectContentTab.bind(this, true)); + this.tabbedPane.appendTab("content", WebInspector.UIString("Content"), this.contentElement, this._selectTab.bind(this, "content")); } this.headersListElement = document.createElement("ol"); @@ -145,29 +145,26 @@ WebInspector.ResourceView.prototype = { this._cookiesView.resize(); }, - _selectTab: function() + selectContentTab: function() { - var preferredTab = WebInspector.settings.resourceViewTab; - if (this._headersVisible && this._cookiesView && preferredTab === "cookies") - this._selectCookiesTab(); - else if (this._headersVisible && (!this.hasContentTab() || preferredTab === "headers")) - this._selectHeadersTab(); - else - this._innerSelectContentTab(); + this._selectTab("content"); }, - _selectHeadersTab: function(updatePrefs) + _selectTab: function(tab) { - if (updatePrefs) - WebInspector.settings.resourceViewTab = "headers"; - this.tabbedPane.selectTabById("headers"); - }, - - selectContentTab: function(updatePrefs) - { - if (updatePrefs) - WebInspector.settings.resourceViewTab = "content"; - this._innerSelectContentTab(); + if (tab) + WebInspector.settings.resourceViewTab = tab; + else { + var preferredTab = WebInspector.settings.resourceViewTab; + tab = "content"; + + // Honor user tab preference (if we can). Fallback to content if headers not visible, headers otherwise. + if (this._headersVisible) + tab = this.tabbedPane.hasTab(preferredTab) ? preferredTab : "headers"; + } + this.tabbedPane.selectTabById(tab); + if (tab === "content" && this.hasContentTab()) + this.contentTabSelected(); }, hasContentTab: function() @@ -176,25 +173,9 @@ WebInspector.ResourceView.prototype = { return false; }, - _selectCookiesTab: function(updatePrefs) - { - if (updatePrefs) - WebInspector.settings.resourceViewTab = "cookies"; - this.tabbedPane.selectTabById("cookies"); - this._cookiesView.resize(); - }, - - _innerSelectContentTab: function() - { - this.tabbedPane.selectTabById("content"); - this.resize(); - if (this.hasContentTab()) - this.contentTabSelected(); - }, - _refreshURL: function() { - this.urlTreeElement.title = "<div class=\"header-name\">" + WebInspector.UIString("Request URL") + ":</div>" + + this.urlTreeElement.titleHTML = "<div class=\"header-name\">" + WebInspector.UIString("Request URL") + ":</div>" + "<div class=\"header-value source-code\">" + this.resource.url.escapeHTML() + "</div>"; }, @@ -230,7 +211,8 @@ WebInspector.ResourceView.prototype = { this.requestPayloadTreeElement.removeChildren(); var title = "<div class=\"raw-form-data header-value source-code\">" + formData.escapeHTML() + "</div>"; - var parmTreeElement = new TreeElement(title, null, false); + var parmTreeElement = new TreeElement(null, null, false); + parmTreeElement.titleHTML = title; parmTreeElement.selectable = false; this.requestPayloadTreeElement.appendChild(parmTreeElement); }, @@ -239,7 +221,7 @@ WebInspector.ResourceView.prototype = { { parmsTreeElement.removeChildren(); - parmsTreeElement.title = title + "<span class=\"header-count\">" + WebInspector.UIString(" (%d)", parms.length) + "</span>"; + parmsTreeElement.titleHTML = title + "<span class=\"header-count\">" + WebInspector.UIString(" (%d)", parms.length) + "</span>"; for (var i = 0; i < parms.length; ++i) { var name = parms[i].name; @@ -265,7 +247,8 @@ WebInspector.ResourceView.prototype = { var title = "<div class=\"header-name\">" + name.escapeHTML() + ":</div>"; title += "<div class=\"header-value source-code\">" + valueEscaped + "</div>"; - var parmTreeElement = new TreeElement(title, null, false); + var parmTreeElement = new TreeElement(null, null, false); + parmTreeElement.titleHTML = title; parmTreeElement.selectable = false; parmTreeElement.tooltip = this._decodeHover; parmTreeElement.ondblclick = this._toggleURLdecoding.bind(this); @@ -328,10 +311,10 @@ WebInspector.ResourceView.prototype = { var statusTextEscaped = this.resource.statusCode + " " + this.resource.statusText.escapeHTML(); statusCodeImage = "<img class=\"resource-status-image\" src=\"" + statusImageSource + "\" title=\"" + statusTextEscaped + "\">"; - requestMethodElement.title = "<div class=\"header-name\">" + WebInspector.UIString("Request Method") + ":</div>" + + requestMethodElement.titleHTML = "<div class=\"header-name\">" + WebInspector.UIString("Request Method") + ":</div>" + "<div class=\"header-value source-code\">" + this.resource.requestMethod + "</div>"; - statusCodeElement.title = "<div class=\"header-name\">" + WebInspector.UIString("Status Code") + ":</div>" + + statusCodeElement.titleHTML = "<div class=\"header-name\">" + WebInspector.UIString("Status Code") + ":</div>" + statusCodeImage + "<div class=\"header-value source-code\">" + statusTextEscaped + "</div>"; } }, @@ -341,7 +324,7 @@ WebInspector.ResourceView.prototype = { headersTreeElement.removeChildren(); var length = headers.length; - headersTreeElement.title = title.escapeHTML() + "<span class=\"header-count\">" + WebInspector.UIString(" (%d)", length) + "</span>"; + headersTreeElement.titleHTML = title.escapeHTML() + "<span class=\"header-count\">" + WebInspector.UIString(" (%d)", length) + "</span>"; headersTreeElement.hidden = !length; var length = headers.length; @@ -349,7 +332,8 @@ WebInspector.ResourceView.prototype = { var title = "<div class=\"header-name\">" + headers[i].header.escapeHTML() + ":</div>"; title += "<div class=\"header-value source-code\">" + headers[i].value.escapeHTML() + "</div>" - var headerTreeElement = new TreeElement(title, null, false); + var headerTreeElement = new TreeElement(null, null, false); + headerTreeElement.titleHTML = title; headerTreeElement.selectable = false; headersTreeElement.appendChild(headerTreeElement); } @@ -358,7 +342,8 @@ WebInspector.ResourceView.prototype = { var title = "<div class=\"header-name\">" + additionalRow.header.escapeHTML() + ":</div>"; title += "<div class=\"header-value source-code\">" + additionalRow.value.escapeHTML() + "</div>" - var headerTreeElement = new TreeElement(title, null, false); + var headerTreeElement = new TreeElement(null, null, false); + headerTreeElement.titleHTML = title; headerTreeElement.selectable = false; headersTreeElement.appendChild(headerTreeElement); } @@ -370,7 +355,7 @@ WebInspector.ResourceView.prototype = { if (!this.resource.requestCookies && !this.resource.responseCookies) return; this._cookiesView = new WebInspector.ResourceCookiesTab(); - this.tabbedPane.appendTab("cookies", WebInspector.UIString("Cookies"), this._cookiesView.element, this._selectCookiesTab.bind(this, true)); + this.tabbedPane.appendTab("cookies", WebInspector.UIString("Cookies"), this._cookiesView, this._selectTab.bind(this, "cookies")); } this._cookiesView.requestCookies = this.resource.requestCookies; this._cookiesView.responseCookies = this.resource.responseCookies; @@ -391,6 +376,12 @@ WebInspector.ResourceCookiesTab = function() } WebInspector.ResourceCookiesTab.prototype = { + show: function(parentElement) + { + WebInspector.CookiesTable.prototype.show.call(this, parentElement); + this.resize(); + }, + set requestCookies(cookies) { if (this._requestCookies === cookies) diff --git a/WebCore/inspector/front-end/StoragePanel.js b/WebCore/inspector/front-end/ResourcesPanel.js index eb4eabb..5285dae 100644 --- a/WebCore/inspector/front-end/StoragePanel.js +++ b/WebCore/inspector/front-end/ResourcesPanel.js @@ -27,9 +27,9 @@ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ -WebInspector.StoragePanel = function(database) +WebInspector.ResourcesPanel = function(database) { - WebInspector.Panel.call(this, "storage"); + WebInspector.Panel.call(this, "resources"); WebInspector.settings.installApplicationSetting("resourcesLastSelectedItem", {}); @@ -79,7 +79,7 @@ WebInspector.StoragePanel = function(database) this.sidebarElement.addEventListener("mouseout", this._onmouseout.bind(this), false); } -WebInspector.StoragePanel.prototype = { +WebInspector.ResourcesPanel.prototype = { get toolbarItemLabel() { return WebInspector.UIString("Resources"); @@ -193,7 +193,7 @@ WebInspector.StoragePanel.prototype = { parentTreeElement.insertChild(frameTreeElement, i); return; } - if (child.nameForSorting.localeCompare(frameTreeElement.nameForSorting) > 0) { + if (child.displayName.localeCompare(frameTreeElement.displayName) > 0) { parentTreeElement.insertChild(frameTreeElement, i); return; } @@ -359,7 +359,7 @@ WebInspector.StoragePanel.prototype = { if (line) { var view = WebInspector.ResourceManager.resourceViewForResource(resource); - view.selectContentTab(true); + view.selectContentTab(); if (view.revealLine) view.revealLine(line); if (view.highlightLine) @@ -762,7 +762,7 @@ WebInspector.StoragePanel.prototype = { } } -WebInspector.StoragePanel.prototype.__proto__ = WebInspector.Panel.prototype; +WebInspector.ResourcesPanel.prototype.__proto__ = WebInspector.Panel.prototype; WebInspector.BaseStorageTreeElement = function(storagePanel, representedObject, title, iconClass, hasChildren) { @@ -900,21 +900,24 @@ WebInspector.FrameTreeElement.prototype = { InspectorBackend.hideFrameHighlight(); }, - get nameForSorting() + get displayName() { - return this._nameForSorting; + return this._displayName; }, setTitles: function(title, subtitle) { - this._nameForSorting = (title ? title : "") + (subtitle ? subtitle : ""); + this._displayName = ""; if (this.parent) { - if (title) + if (title) { this.titleElement.textContent = title; + this._displayName = title; + } if (subtitle) { var subtitleElement = document.createElement("span"); subtitleElement.className = "base-storage-tree-element-subtitle"; subtitleElement.textContent = "(" + subtitle + ")"; + this._displayName += " (" + subtitle + ")"; this.titleElement.appendChild(subtitleElement); } } else { diff --git a/WebCore/inspector/front-end/ScriptsPanel.js b/WebCore/inspector/front-end/ScriptsPanel.js index 66260f9..32c7f21 100644 --- a/WebCore/inspector/front-end/ScriptsPanel.js +++ b/WebCore/inspector/front-end/ScriptsPanel.js @@ -135,8 +135,8 @@ WebInspector.ScriptsPanel = function() if (Preferences.nativeInstrumentationEnabled) { this.sidebarPanes.domBreakpoints = WebInspector.createDOMBreakpointsSidebarPane(); this.sidebarPanes.xhrBreakpoints = WebInspector.createXHRBreakpointsSidebarPane(); + this.sidebarPanes.eventListenerBreakpoints = new WebInspector.EventListenerBreakpointsSidebarPane(); } - this.sidebarPanes.eventListenerBreakpoints = new WebInspector.EventListenerBreakpointsSidebarPane(); this.sidebarPanes.workers = new WebInspector.WorkersSidebarPane(); @@ -462,8 +462,8 @@ WebInspector.ScriptsPanel.prototype = { if (Preferences.nativeInstrumentationEnabled) { this.sidebarPanes.domBreakpoints.reset(); this.sidebarPanes.xhrBreakpoints.reset(); + this.sidebarPanes.eventListenerBreakpoints.reset(); } - this.sidebarPanes.eventListenerBreakpoints.reset(); this.sidebarPanes.workers.reset(); } }, diff --git a/WebCore/inspector/front-end/Settings.js b/WebCore/inspector/front-end/Settings.js index 4fd0c83..1acc2e0 100644 --- a/WebCore/inspector/front-end/Settings.js +++ b/WebCore/inspector/front-end/Settings.js @@ -46,7 +46,8 @@ var Preferences = { nativeInstrumentationEnabled: false, resourceExportEnabled: false, fileSystemEnabled: false, - useDataURLForResourceImageIcons: true + useDataURLForResourceImageIcons: true, + debugMode: false } WebInspector.Settings = function() diff --git a/WebCore/inspector/front-end/StylesSidebarPane.js b/WebCore/inspector/front-end/StylesSidebarPane.js index 6d1b541..1ad0ece 100644 --- a/WebCore/inspector/front-end/StylesSidebarPane.js +++ b/WebCore/inspector/front-end/StylesSidebarPane.js @@ -589,6 +589,8 @@ WebInspector.StylePropertiesSection = function(styleRule, editable, isInherited, this._selectorElement = document.createElement("span"); this._selectorElement.textContent = styleRule.selectorText; this.titleElement.appendChild(this._selectorElement); + if (Preferences.debugMode) + this._selectorElement.addEventListener("click", this._debugShowStyle.bind(this), false); var openBrace = document.createElement("span"); openBrace.textContent = " {"; @@ -719,11 +721,6 @@ WebInspector.StylePropertiesSection.prototype = { onpopulate: function() { - function sorter(a, b) - { - return a.name.localeCompare(b.name); - } - var style = this.styleRule.style; var handledProperties = {}; @@ -734,8 +731,6 @@ WebInspector.StylePropertiesSection.prototype = { for (var i = 0; i < allProperties.length; ++i) this.uniqueProperties.push(allProperties[i]); - this.uniqueProperties.sort(sorter); - // Collect all shorthand names. for (var i = 0; i < this.uniqueProperties.length; ++i) { var property = this.uniqueProperties[i]; @@ -745,6 +740,7 @@ WebInspector.StylePropertiesSection.prototype = { shorthandNames[property.shorthand] = true; } + // Collect all shorthand names. for (var i = 0; i < this.uniqueProperties.length; ++i) { var property = this.uniqueProperties[i]; var disabled = property.disabled; @@ -783,10 +779,10 @@ WebInspector.StylePropertiesSection.prototype = { return null; }, - addNewBlankProperty: function() + addNewBlankProperty: function(optionalIndex) { var style = this.styleRule.style; - var property = new WebInspector.CSSProperty(style, style.allProperties.length, "", "", "", "style", true, false, false, undefined); + var property = style.newBlankProperty(); var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, property, false, false, false); this.propertiesTreeOutline.appendChild(item); item.listItemElement.textContent = ""; @@ -794,6 +790,39 @@ WebInspector.StylePropertiesSection.prototype = { return item; }, + _debugShowStyle: function(anchor) + { + var boundHandler; + function removeStyleBox(element, event) + { + if (event.target === element) { + event.stopPropagation(); + return; + } + document.body.removeChild(element); + document.getElementById("main").removeEventListener("mousedown", boundHandler, true); + } + + if (!event.shiftKey) + return; + + var container = document.createElement("div"); + var element = document.createElement("span"); + container.appendChild(element); + element.style.background = "yellow"; + element.style.display = "inline-block"; + container.style.cssText = "z-index: 2000000; position: absolute; top: 50px; left: 50px; white-space: pre; overflow: auto; background: white; font-family: monospace; font-size: 12px; border: 1px solid black; opacity: 0.85; -webkit-user-select: text; padding: 2px;"; + container.style.width = (document.body.offsetWidth - 100) + "px"; + container.style.height = (document.body.offsetHeight - 100) + "px"; + document.body.appendChild(container); + if (this.rule) + element.textContent = this.rule.selectorText + " {" + ((this.styleRule.style.cssText !== undefined) ? this.styleRule.style.cssText : "<no cssText>") + "}"; + else + element.textContent = this.styleRule.style.cssText; + boundHandler = removeStyleBox.bind(null, container); + document.getElementById("main").addEventListener("mousedown", boundHandler, true); + }, + _handleEmptySpaceDoubleClick: function(event) { if (event.target.hasStyleClass("header")) { @@ -885,7 +914,8 @@ WebInspector.StylePropertiesSection.prototype = { moveToNextIfNeeded.call(self); } - WebInspector.cssModel.setRuleSelector(this.rule.id, newContent, this.pane.node.id, successCallback, moveToNextIfNeeded.bind(this)); + var focusedNode = WebInspector.panels.elements.focusedDOMNode; + WebInspector.cssModel.setRuleSelector(this.rule.id, focusedNode ? focusedNode.id : 0, newContent, successCallback, moveToNextIfNeeded.bind(this)); }, editingSelectorCancelled: function() @@ -977,7 +1007,8 @@ WebInspector.ComputedStylePropertiesSection.prototype = { var value = property.value; var title = "<span style='color: gray'>" + selectorText + "</span> - " + value; var subtitle = " <span style='float:right'>" + section.subtitleElement.innerHTML + "</span>"; - var childElement = new TreeElement(title + subtitle, null, false); + var childElement = new TreeElement(null, null, false); + childElement.titleHTML = title + subtitle; treeElement.appendChild(childElement); if (section.isPropertyOverloaded(property.name)) childElement.listItemElement.addStyleClass("overloaded"); @@ -1093,21 +1124,39 @@ WebInspector.StylePropertyTreeElement.prototype = { get name() { - return this.property.name; + if (!this.disabled || !this.property.text) + return this.property.name; + + var text = this.property.text; + var index = text.indexOf(":"); + if (index < 1) + return this.property.name; + + return text.substring(0, index).trim(); }, get priority() { if (this.disabled) - return this.property.priority; - return (this.shorthand ? this.style.getShorthandPriority(this.name) : this.property.priority); + return ""; // rely upon raw text to render it in the value field + return this.property.priority; }, get value() { - if (this.disabled) + if (!this.disabled || !this.property.text) + return this.property.value; + + var match = this.property.text.match(/(.*);\s*/); + if (!match || !match[1]) + return this.property.value; + + var text = match[1]; + var index = text.indexOf(":"); + if (index < 1) return this.property.value; - return (this.shorthand ? this.style.getShorthandValue(this.name) : this.property.value); + + return text.substring(index + 1).trim(); }, get parsedOk() @@ -1301,6 +1350,11 @@ WebInspector.StylePropertyTreeElement.prototype = { this.listItemElement.appendChild(document.createTextNode(";")); + if (!this.parsedOk) + this.listItemElement.addStyleClass("not-parsed-ok"); + if (this.property.inactive) + this.listItemElement.addStyleClass("inactive"); + this.tooltip = this.property.propertyText; }, @@ -1347,6 +1401,7 @@ WebInspector.StylePropertyTreeElement.prototype = { else this.listItemElement.removeStyleClass("implicit"); + this.selectable = !this.inherited; if (this.inherited) this.listItemElement.addStyleClass("inherited"); else @@ -1477,6 +1532,28 @@ WebInspector.StylePropertyTreeElement.prototype = { if (selectionRange.commonAncestorContainer !== this.listItemElement && !selectionRange.commonAncestorContainer.isDescendant(this.listItemElement)) return; + // If there are several properties in the text, do not handle increments/decrements. + var text = event.target.textContent.trim(); + var openQuote; + var wasEscape = false; + // Exclude the last character from the check since it is allowed to be ";". + for (var i = 0; i < text.length - 1; ++i) { + var ch = text.charAt(i); + if (ch === "\\") { + wasEscape = true; + continue; + } + if (ch === ";" && !openQuote) + return; // Do not handle name/value shifts if the property is compound. + if ((ch === "'" || ch === "\"") && !wasEscape) { + if (!openQuote) + openQuote = ch; + else if (ch === openQuote) + openQuote = null; + } + wasEscape = false; + } + const styleValueDelimeters = " \t\n\"':;,/()"; var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, styleValueDelimeters, this.listItemElement); var wordString = wordRange.toString(); @@ -1554,16 +1631,11 @@ WebInspector.StylePropertyTreeElement.prototype = { event.preventDefault(); - if (!this.originalCSSText) { + if (!("originalPropertyText" in this)) { // Remember the rule's original CSS text, so it can be restored // if the editing is canceled and before each apply. - this.originalCSSText = this.style.styleTextWithShorthands(); - } else { - // Restore the original CSS text before applying user changes. This is needed to prevent - // new properties from sticking around if the user adds one, then removes it. - WebInspector.cssModel.setCSSText(this.style.id, this.originalCSSText); + this.originalPropertyText = this.property.propertyText; } - this.applyStyleText(this.listItemElement.textContent); }, @@ -1574,23 +1646,19 @@ WebInspector.StylePropertyTreeElement.prototype = { this.expand(); this.listItemElement.removeEventListener("keydown", context.keyDownListener, false); this.listItemElement.removeEventListener("keypress", context.keyPressListener, false); - delete this.originalCSSText; + delete this.originalPropertyText; }, editingCancelled: function(element, context) { - if (this._newProperty) - this.treeOutline.removeChild(this); - else if (this.originalCSSText) { - WebInspector.cssModel.setCSSText(this.style.id, this.originalCSSText); - - if (this.treeOutline.section && this.treeOutline.section.pane) - this.treeOutline.section.pane.dispatchEventToListeners("style edited"); - - this.updateAll(); - } else - this.updateTitle(); - + if ("originalPropertyText" in this) + this.applyStyleText(this.originalPropertyText, true); + else { + if (this._newProperty) + this.treeOutline.removeChild(this); + else + this.updateTitle(); + } this.editingEnded(context); }, @@ -1600,7 +1668,11 @@ WebInspector.StylePropertyTreeElement.prototype = { // Determine where to move to before making changes var newProperty, moveToPropertyName, moveToSelector; - var moveTo = (moveDirection === "forward" ? this.nextSibling : this.previousSibling); + var moveTo = this; + do { + moveTo = (moveDirection === "forward" ? moveTo.nextSibling : moveTo.previousSibling); + } while(moveTo && !moveTo.selectable); + if (moveTo) moveToPropertyName = moveTo.name; else if (moveDirection === "forward") @@ -1630,6 +1702,8 @@ WebInspector.StylePropertyTreeElement.prototype = { // User has made a change then tabbed, wiping all the original treeElements, // recalculate the new treeElement for the same property we were going to edit next + // FIXME(apavlov): this will not work for multiple same-named properties in a style + // (the first one will always be returned). if (moveTo && !moveTo.parent) { var treeElement = section.findTreeElementWithName(moveToPropertyName); if (treeElement) @@ -1663,9 +1737,8 @@ WebInspector.StylePropertyTreeElement.prototype = { this.parent.removeChild(this); section.afterUpdate(); return; - } else { + } else delete section._afterUpdate; - } } function callback(newStyle) @@ -1683,13 +1756,9 @@ WebInspector.StylePropertyTreeElement.prototype = { return; } - if (!styleTextLength) { - // Do remove ourselves from UI when the property removal is confirmed. - this.parent.removeChild(this); - } else { - this.style = newStyle; - this._styleRule.style = this.style; - } + this.style = newStyle; + this.property = newStyle.propertyAt(this.property.index); + this._styleRule.style = this.style; if (section && section.pane) section.pane.dispatchEventToListeners("style edited"); @@ -1698,6 +1767,10 @@ WebInspector.StylePropertyTreeElement.prototype = { this.updateAll(true); } + // Append a ";" if the new text does not end in ";". + // FIXME: this does not handle trailing comments. + if (styleText.length && !/;\s*$/.test(styleText)) + styleText += ";"; this.property.setText(styleText, callback.bind(this)); } } diff --git a/WebCore/inspector/front-end/TabbedPane.js b/WebCore/inspector/front-end/TabbedPane.js index dec3a0b..1ed9725 100644 --- a/WebCore/inspector/front-end/TabbedPane.js +++ b/WebCore/inspector/front-end/TabbedPane.js @@ -31,51 +31,63 @@ WebInspector.TabbedPane = function(element) { this.element = element || document.createElement("div"); - - this.tabsElement = document.createElement("div"); - this.tabsElement.className = "tabbed-pane-header"; - this.element.appendChild(this.tabsElement); + this.element.addStyleClass("tabbed-pane"); + this.tabsElement = this.element.createChild("div", "tabbed-pane-header"); + this.contentElement = this.element.createChild("div", "tabbed-pane-content"); this._tabObjects = {}; } WebInspector.TabbedPane.prototype = { - appendTab: function(id, tabTitle, contentElement, tabClickListener) + appendTab: function(id, tabTitle, content, tabClickListener) { var tabElement = document.createElement("li"); tabElement.textContent = tabTitle; tabElement.addEventListener("click", tabClickListener, false); this.tabsElement.appendChild(tabElement); - this.element.appendChild(contentElement); - this._tabObjects[id] = {tab: tabElement, content: contentElement}; + var tabObject = { tab: tabElement }; + if (content instanceof HTMLElement) { + tabObject.element = content; + this.contentElement.appendChild(content); + } + else { + this.contentElement.appendChild(content.element); + tabObject.view = content; + } + this._tabObjects[id] = tabObject; + }, + + hasTab: function(tabId) + { + return tabId in this._tabObjects; }, - - tabObjectForId: function(id) + + selectTabById: function(tabId) { - return this._tabObjects[id]; + for (var id in this._tabObjects) { + if (id === tabId) + this._showTab(this._tabObjects[id]); + else + this._hideTab(this._tabObjects[id]); + } + return this.hasTab(tabId); }, - hideTab: function(id) + _showTab: function(tabObject) { - var tabObject = this._tabObjects[id]; - if (tabObject) - tabObject.tab.addStyleClass("hidden"); + tabObject.tab.addStyleClass("selected"); + if (tabObject.element) + tabObject.element.removeStyleClass("hidden"); + else + tabObject.view.visible = true; }, - selectTabById: function(selectId) + _hideTab: function(tabObject) { - var selected = false; - for (var id in this._tabObjects) { - var tabObject = this._tabObjects[id]; - if (id === selectId) { - selected = true; - tabObject.tab.addStyleClass("selected"); - tabObject.content.removeStyleClass("hidden"); - } else { - tabObject.tab.removeStyleClass("selected"); - tabObject.content.addStyleClass("hidden"); - } - } - return selected; + tabObject.tab.removeStyleClass("selected"); + if (tabObject.element) + tabObject.element.addStyleClass("hidden"); + else + tabObject.view.visible = false; } } diff --git a/WebCore/inspector/front-end/TextPrompt.js b/WebCore/inspector/front-end/TextPrompt.js index b6bcd52..e9a73fe 100644 --- a/WebCore/inspector/front-end/TextPrompt.js +++ b/WebCore/inspector/front-end/TextPrompt.js @@ -100,22 +100,6 @@ WebInspector.TextPrompt.prototype = { } defaultAction.call(this); break; - case "U+0041": // Ctrl+A = Move caret to the start of prompt on non-Mac. - if (!WebInspector.isMac() && event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) { - handled = true; - this._moveCaretToStartOfPrompt(); - break; - } - defaultAction.call(this); - break; - case "U+0045": // Ctrl+E = Move caret to the end of prompt on non-Mac. - if (!WebInspector.isMac() && event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) { - handled = true; - this.moveCaretToEndOfPrompt(); - break; - } - defaultAction.call(this); - break; default: defaultAction.call(this); break; @@ -379,18 +363,6 @@ WebInspector.TextPrompt.prototype = { return true; }, - _moveCaretToStartOfPrompt: function() - { - var selection = window.getSelection(); - var selectionRange = document.createRange(); - - selectionRange.setStart(this.element, 0); - selectionRange.setEnd(this.element, 0); - - selection.removeAllRanges(); - selection.addRange(selectionRange); - }, - moveCaretToEndOfPrompt: function() { var selection = window.getSelection(); diff --git a/WebCore/inspector/front-end/WebKit.qrc b/WebCore/inspector/front-end/WebKit.qrc index ebdd4f6..2b87bcc 100644 --- a/WebCore/inspector/front-end/WebKit.qrc +++ b/WebCore/inspector/front-end/WebKit.qrc @@ -72,6 +72,7 @@ <file>ResourceCategory.js</file> <file>ResourceManager.js</file> <file>ResourceView.js</file> + <file>ResourcesPanel.js</file> <file>ScopeChainSidebarPane.js</file> <file>Script.js</file> <file>ScriptsPanel.js</file> @@ -88,7 +89,6 @@ <file>SourceTokenizer.js</file> <file>SourceView.js</file> <file>StatusBarButton.js</file> - <file>StoragePanel.js</file> <file>StylesSidebarPane.js</file> <file>SummaryBar.js</file> <file>TabbedPane.js</file> @@ -222,7 +222,6 @@ <file>Images/statusbarMenuButtonSelected.png</file> <file>Images/statusbarResizerHorizontal.png</file> <file>Images/statusbarResizerVertical.png</file> - <file>Images/storageIcon.png</file> <file>Images/successGreenDot.png</file> <file>Images/thumbActiveHoriz.png</file> <file>Images/thumbActiveVert.png</file> diff --git a/WebCore/inspector/front-end/WorkersSidebarPane.js b/WebCore/inspector/front-end/WorkersSidebarPane.js index 7d6a00f..177cd15 100644 --- a/WebCore/inspector/front-end/WorkersSidebarPane.js +++ b/WebCore/inspector/front-end/WorkersSidebarPane.js @@ -59,7 +59,8 @@ WebInspector.WorkersSidebarPane.prototype = { this._workers[id] = worker; var title = WebInspector.linkifyURL(url, WebInspector.displayNameForURL(url), "worker-item", true, url); - var treeElement = new TreeElement(title, worker, false); + var treeElement = new TreeElement(null, worker, false); + treeElement.titleHTML = title; this._treeOutline.appendChild(treeElement); }, diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css index b26b748..29f2385 100644 --- a/WebCore/inspector/front-end/inspector.css +++ b/WebCore/inspector/front-end/inspector.css @@ -219,10 +219,6 @@ body.attached #search-results-matches { background-image: url(Images/timelineIcon.png); } -.toolbar-item.storage .toolbar-icon { - background-image: url(Images/storageIcon.png); -} - .toolbar-item.profiles .toolbar-icon { background-image: url(Images/profilesIcon.png); } @@ -813,16 +809,12 @@ body.platform-linux .monospace, body.platform-linux .source-code { } .resource-view.visible { - display: block; + display: -webkit-box; } .resource-view .tabbed-pane-header { display: none; - position: absolute; height: 20px; - top: 0; - left: 0; - right: 0; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(236, 236, 236)), to(rgb(217, 217, 217))); border-bottom: 1px solid rgb(163, 163, 163); } @@ -847,10 +839,6 @@ body.platform-linux .monospace, body.platform-linux .source-code { overflow: auto; } -.resource-view.headers-visible .resource-view-headers { - top: 20px; -} - .resource-view-headers .outline-disclosure .parent { -webkit-user-select: none; font-weight: bold; @@ -894,11 +882,8 @@ body.platform-linux .monospace, body.platform-linux .source-code { overflow: auto; } -.resource-view.headers-visible .resource-view-content { - top: 20px; -} - -.resource-view .resource-view-cookies { +.resource-view-cookies { + display: none; position: absolute; top: 0; right: 0; @@ -906,10 +891,11 @@ body.platform-linux .monospace, body.platform-linux .source-code { bottom: 0; overflow: auto; padding: 12px; + height: 100%; } -.resource-view.headers-visible .resource-view-cookies { - top: 20px; +.resource-view-cookies.visible { + display: block; } .resource-view-cookies.table .data-grid { @@ -1033,7 +1019,6 @@ body.platform-linux .monospace, body.platform-linux .source-code { right: 0; bottom: 0; width: 325px; - background-color: rgb(245, 245, 245); border-left: 1px solid rgb(64%, 64%, 64%); cursor: default; overflow: auto; @@ -1477,7 +1462,7 @@ body.inactive .placard.selected { .event-bar { position: relative; - left: 10px; + margin-left: 10px; } .event-bars .event-bar .header { @@ -1716,7 +1701,6 @@ li.editing .swatch, li.editing .enabled-button, li.editing-sub-part .delete-but .pane > .body { position: relative; display: none; - background-color: white; overflow-y: auto; overflow-x: hidden; } @@ -1759,9 +1743,9 @@ li.editing .swatch, li.editing .enabled-button, li.editing-sub-part .delete-but } .sidebar-pane-subtitle { - float: right; + position: absolute; + right: 0; font-weight: normal; - overflow: hidden; } body.platform-windows .sidebar-pane-subtitle { @@ -1928,52 +1912,52 @@ body.inactive .sidebar { bottom: 0; } -.storage.panel .sidebar { +.resources.panel .sidebar { padding-left: 0; z-index: 10; } -.storage.panel .sidebar li { +.resources.panel .sidebar li { height: 17px; white-space: nowrap; text-indent: 0; margin-left: -2px; } -.storage.panel .sidebar li.parent { +.resources.panel .sidebar li.parent { text-indent: 0; margin-left: -12px; } -.storage.panel .sidebar li.selected { +.resources.panel .sidebar li.selected { color: white; text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0; font-weight: bold; } -.storage.panel .sidebar li.selected .selection { +.resources.panel .sidebar li.selected .selection { background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177))); border-top: 1px solid #979797; height: 17px; } -.storage.panel .sidebar :focus li.selected .selection { +.resources.panel .sidebar :focus li.selected .selection { background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170))); border-top: 1px solid rgb(68, 128, 200); } -body.inactive .storage.panel .sidebar li.selected .selection { +body.inactive .resources.panel .sidebar li.selected .selection { background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138))); border-top: 1px solid rgb(151, 151, 151); } -.storage.panel .sidebar .icon { +.resources.panel .sidebar .icon { width: 16px; height: 16px; float: left; } -.storage.panel .base-storage-tree-element-title { +.resources.panel .base-storage-tree-element-title { overflow: hidden; position: relative; text-overflow: ellipsis; @@ -1991,7 +1975,7 @@ li.selected .base-storage-tree-element-subtitle { text-shadow: none; } -.storage.panel .status { +.resources.panel .status { float: right; height: 16px; margin-top: 1px; @@ -1999,7 +1983,7 @@ li.selected .base-storage-tree-element-subtitle { line-height: 1em; } -.storage.panel li .status .bubble { +.resources.panel li .status .bubble { height: 13px; padding-top: 0; } @@ -2632,7 +2616,6 @@ button.enable-toggle-status-bar-item.toggled-on .glyph { right: 0; bottom: 0; width: 225px; - background-color: rgb(245, 245, 245); border-left: 1px solid rgb(64%, 64%, 64%); cursor: default; overflow: auto; @@ -2656,6 +2639,16 @@ button.enable-toggle-status-bar-item.toggled-on .glyph { margin-top: 1px; } +.tabbed-pane { + -webkit-box-orient: vertical; + height: 100%; +} + +.tabbed-pane-content { + -webkit-box-flex: 1; + position: relative; +} + .tabbed-pane-header { height: 23px; padding: 0 10px; @@ -4125,6 +4118,16 @@ ol.breakpoint-list { background-color: rgb(255, 255, 194); } +li.breakpoint-hit .breakpoint-hit-marker { + background-color: rgb(255, 255, 194); + height: 18px; + left: 0px; + margin-top: -16px; + position: absolute; + right: 0px; + z-index: -1; +} + .webkit-html-js-node, .webkit-html-css-node { white-space: pre; } @@ -4219,6 +4222,7 @@ a.worker-item { cursor: pointer; text-decoration: none; } + .styles-section { padding: 2px 2px 4px 4px; min-height: 18px; @@ -4236,6 +4240,28 @@ a.worker-item { background-color: rgb(240, 240, 240); } +.styles-section .properties li.not-parsed-ok { + margin-left: 0px; +} + +.styles-section .properties li.not-parsed-ok::before { + content: url(Images/warningIcon.png); + opacity: 0.75; + float: left; + width: 8px; + height: 8px; + margin-top: 0; + padding-right: 5px; + vertical-align: sub; + -webkit-user-select: none; + cursor: default; +} + +.styles-section .properties .inactive { + opacity: 0.75; + background-color: rgb(212, 212, 212); +} + .styles-section .header { white-space: nowrap; -webkit-background-origin: padding; @@ -4391,4 +4417,4 @@ a.worker-item:hover { .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 c681531..e0c72e9 100644 --- a/WebCore/inspector/front-end/inspector.html +++ b/WebCore/inspector/front-end/inspector.html @@ -98,7 +98,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. <script type="text/javascript" src="NetworkPanel.js"></script> <script type="text/javascript" src="InjectedFakeWorker.js"></script> <script type="text/javascript" src="ScriptsPanel.js"></script> - <script type="text/javascript" src="StoragePanel.js"></script> + <script type="text/javascript" src="ResourcesPanel.js"></script> <script type="text/javascript" src="ProfilesPanel.js"></script> <script type="text/javascript" src="ConsolePanel.js"></script> <script type="text/javascript" src="ExtensionAPI.js"></script> diff --git a/WebCore/inspector/front-end/inspector.js b/WebCore/inspector/front-end/inspector.js index 8323cad..33b370a 100644 --- a/WebCore/inspector/front-end/inspector.js +++ b/WebCore/inspector/front-end/inspector.js @@ -223,9 +223,8 @@ var WebInspector = { var hiddenPanels = (InspectorFrontendHost.hiddenPanels() || "").split(','); if (hiddenPanels.indexOf("elements") === -1) this.panels.elements = new WebInspector.ElementsPanel(); - - if (hiddenPanels.indexOf("storage") === -1 && hiddenPanels.indexOf("databases") === -1) - this.panels.storage = new WebInspector.StoragePanel(); + if (hiddenPanels.indexOf("resources") === -1) + this.panels.resources = new WebInspector.ResourcesPanel(); if (hiddenPanels.indexOf("network") === -1) this.panels.network = new WebInspector.NetworkPanel(); if (hiddenPanels.indexOf("scripts") === -1) @@ -546,10 +545,6 @@ WebInspector.doLoadedDone = function() for (var panelName in this.panels) previousToolbarItem = WebInspector.addPanelToolbarIcon(toolbarElement, this.panels[panelName], previousToolbarItem); - // 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.")} }; @@ -642,11 +637,11 @@ var windowLoaded = function() } else WebInspector.loaded(); - window.removeEventListener("load", windowLoaded, false); + window.removeEventListener("DOMContentLoaded", windowLoaded, false); delete windowLoaded; }; -window.addEventListener("load", windowLoaded, false); +window.addEventListener("DOMContentLoaded", windowLoaded, false); WebInspector.dispatch = function(message) { // We'd like to enforce asynchronous interaction between the inspector controller and the frontend. @@ -810,8 +805,8 @@ WebInspector.openResource = function(resourceURL, inResourcesPanel) { var resource = WebInspector.resourceForURL(resourceURL); if (inResourcesPanel && resource) { - WebInspector.panels.storage.showResource(resource); - WebInspector.showPanel("storage"); + WebInspector.panels.resources.showResource(resource); + WebInspector.showPanel("resources"); } else InspectorBackend.openInInspectedWindow(resource ? resource.url : resourceURL); } @@ -1206,10 +1201,6 @@ 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]; @@ -1217,8 +1208,8 @@ WebInspector.showPanel = function(panel) WebInspector.selectDatabase = function(o) { - WebInspector.showPanel("storage"); - WebInspector.panels.storage.selectDatabase(o); + WebInspector.showPanel("resources"); + WebInspector.panels.resources.selectDatabase(o); } WebInspector.consoleMessagesCleared = function() @@ -1228,8 +1219,8 @@ WebInspector.consoleMessagesCleared = function() WebInspector.selectDOMStorage = function(o) { - WebInspector.showPanel("storage"); - WebInspector.panels.storage.selectDOMStorage(o); + WebInspector.showPanel("resources"); + WebInspector.panels.resources.selectDOMStorage(o); } WebInspector.domContentEventFired = function(time) @@ -1250,55 +1241,55 @@ WebInspector.loadEventFired = function(time) WebInspector.addDatabase = function(payload) { - if (!this.panels.storage) + if (!this.panels.resources) return; var database = new WebInspector.Database( payload.id, payload.domain, payload.name, payload.version); - this.panels.storage.addDatabase(database); + this.panels.resources.addDatabase(database); } WebInspector.addDOMStorage = function(payload) { - if (!this.panels.storage) + if (!this.panels.resources) return; var domStorage = new WebInspector.DOMStorage( payload.id, payload.host, payload.isLocalStorage); - this.panels.storage.addDOMStorage(domStorage); + this.panels.resources.addDOMStorage(domStorage); } WebInspector.updateDOMStorage = function(storageId) { - this.panels.storage.updateDOMStorage(storageId); + this.panels.resources.updateDOMStorage(storageId); } WebInspector.updateApplicationCacheStatus = function(status) { - this.panels.storage.updateApplicationCacheStatus(status); + this.panels.resources.updateApplicationCacheStatus(status); } WebInspector.didGetFileSystemPath = function(root, type, origin) { - this.panels.storage.updateFileSystemPath(root, type, origin); + this.panels.resources.updateFileSystemPath(root, type, origin); } WebInspector.didGetFileSystemError = function(type, origin) { - this.panels.storage.updateFileSystemError(type, origin); + this.panels.resources.updateFileSystemError(type, origin); } WebInspector.didGetFileSystemDisabled = function() { - this.panels.storage.setFileSystemDisabled(); + this.panels.resources.setFileSystemDisabled(); } WebInspector.updateNetworkState = function(isNowOnline) { - this.panels.storage.updateNetworkState(isNowOnline); + this.panels.resources.updateNetworkState(isNowOnline); } WebInspector.searchingForNodeWasEnabled = function() @@ -1612,14 +1603,11 @@ WebInspector.displayNameForURL = function(url) WebInspector._choosePanelToShowSourceLine = function(url, line, preferredPanel) { preferredPanel = 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 = this.panels.storage; + panel = this.panels.resources; return panel.canShowSourceLine(url, line) ? panel : null; } diff --git a/WebCore/inspector/front-end/networkPanel.css b/WebCore/inspector/front-end/networkPanel.css index 1e0e813..6b6aebe 100644 --- a/WebCore/inspector/front-end/networkPanel.css +++ b/WebCore/inspector/front-end/networkPanel.css @@ -624,20 +624,6 @@ padding-top: 5px; } -#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-content, -#network-views.small .resource-view-cookies -{ - top: 23px; -} - .network.panel:not(.viewing-resource) .data-grid tr.selected { background-color: transparent; color: black; diff --git a/WebCore/inspector/front-end/textViewer.css b/WebCore/inspector/front-end/textViewer.css index a24a75c..8a96b1f 100644 --- a/WebCore/inspector/front-end/textViewer.css +++ b/WebCore/inspector/front-end/textViewer.css @@ -25,8 +25,6 @@ margin: 6px 25px; padding: 0 7px 1px; z-index:20; - max-width: 80%; - } .webkit-html-warning-message { diff --git a/WebCore/inspector/front-end/treeoutline.js b/WebCore/inspector/front-end/treeoutline.js index e2f879c..a1e052f 100644 --- a/WebCore/inspector/front-end/treeoutline.js +++ b/WebCore/inspector/front-end/treeoutline.js @@ -485,6 +485,15 @@ TreeElement.prototype = { this._setListItemNodeContent(); }, + get titleHTML() { + return this._titleHTML; + }, + + set titleHTML(x) { + this._titleHTML = x; + this._setListItemNodeContent(); + }, + get tooltip() { return this._tooltip; }, @@ -553,8 +562,13 @@ TreeElement.prototype = { { if (!this._listItemNode) return; - if (!this._title || typeof this._title === "string") - this._listItemNode.innerHTML = this._title; + + if (!this._titleHTML && !this._title) + this._listItemNode.removeChildren(); + else if (typeof this._titleHTML === "string") + this._listItemNode.innerHTML = this._titleHTML; + else if (typeof this._title === "string") + this._listItemNode.textContent = this._title; else { this._listItemNode.removeChildren(); if (this._title.parentNode) |
