From fe7bad5497021cf0f3c20f2daf4c3ddb24ffda73 Mon Sep 17 00:00:00 2001 From: "pfeldman@chromium.org" Date: Fri, 10 Apr 2009 11:20:05 +0000 Subject: DevTools: Migrate CSS functionality to javascript. Review URL: http://codereview.chromium.org/62188 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@13500 0039d316-1c4b-4281-b951-d872f2087c98 --- webkit/glue/devtools/dom_agent.h | 7 - webkit/glue/devtools/dom_agent_impl.cc | 115 ---------- webkit/glue/devtools/dom_agent_impl.h | 9 - webkit/glue/devtools/js/devtools.js | 103 ++++----- webkit/glue/devtools/js/devtools_host_stub.js | 56 +++-- webkit/glue/devtools/js/dom_agent.js | 106 +++++---- webkit/glue/devtools/js/inject.js | 237 ++++++++++++++------- webkit/glue/devtools/js/inspector_controller.js | 4 +- .../glue/devtools/js/inspector_controller_impl.js | 4 +- 9 files changed, 287 insertions(+), 354 deletions(-) (limited to 'webkit') diff --git a/webkit/glue/devtools/dom_agent.h b/webkit/glue/devtools/dom_agent.h index 690a194..205e4d9 100644 --- a/webkit/glue/devtools/dom_agent.h +++ b/webkit/glue/devtools/dom_agent.h @@ -33,10 +33,6 @@ /* Perform search. */ \ METHOD2(PerformSearch, int /* call_id */, String /* query */) \ \ - /* Requests that the element's style information is sent to the client. */ \ - METHOD3(GetNodeStyles, int /* call_id */, int /* id */,\ - bool /* author_only */) \ - \ /* Tells dom agent that the client has lost all of the dom-related information and is no longer interested in the notifications related to the nodes issued earlier. */ \ @@ -52,9 +48,6 @@ DEFINE_RPC_CLASS(DomAgent, DOM_AGENT_STRUCT) /* Perform search. */ \ METHOD2(DidPerformSearch, int /* call_id */, Value /* results */) \ \ - /* Response to GetNodeStyles. */ \ - METHOD2(DidGetNodeStyles, int /* call_id */, Value /* styles */) \ - \ /* Ack for the Set/RemoveAttribute, SetTextNodeValue. */ \ METHOD2(DidApplyDomChange, int /* call_id */, bool /* success */) \ \ diff --git a/webkit/glue/devtools/dom_agent_impl.cc b/webkit/glue/devtools/dom_agent_impl.cc index c63764e..d7955d6 100644 --- a/webkit/glue/devtools/dom_agent_impl.cc +++ b/webkit/glue/devtools/dom_agent_impl.cc @@ -5,13 +5,6 @@ #include "config.h" #include "AtomicString.h" -#include "CSSComputedStyleDeclaration.h" -#include "CSSParser.h" -#include "CSSPropertyNames.h" -#include "CSSRule.h" -#include "CSSRuleList.h" -#include "CSSStyleRule.h" -#include "CSSStyleSheet.h" #include "DOMWindow.h" #include "Document.h" #include "Event.h" @@ -446,37 +439,6 @@ void DomAgentImpl::PerformSearch(int call_id, const String& query) { delegate_->DidPerformSearch(call_id, list); } -void DomAgentImpl::GetNodeStyles(int call_id, - int element_id, - bool author_only) { - DictionaryValue result; - - Node* node = GetNodeForId(element_id); - DCHECK(!node || node->nodeType() == Node::ELEMENT_NODE); - if (!node) { - delegate_->DidGetNodeStyles(call_id, result); - return; - } - - Element* element = static_cast(node); - result.Set(L"inlineStyle", - BuildValueForStyle(*element->style())); - - DOMWindow* window = element->document()->defaultView(); - result.Set(L"computedStyle", - BuildValueForStyle(*window->getComputedStyle(element, ""))); - - RefPtr rule_list = window->getMatchedCSSRules(element, "", - author_only); - if (rule_list) { - result.Set(L"matchedCSSRules", BuildValueForCSSRules(*rule_list)); - } - result.Set(L"styleAttributes", - BuildValueForAttributeStyles(*element->attributes())); - - delegate_->DidGetNodeStyles(call_id, result); -} - ListValue* DomAgentImpl::BuildValueForNode(Node* node, int depth) { OwnPtr value(new ListValue()); int id = Bind(node); @@ -564,83 +526,6 @@ ListValue* DomAgentImpl::BuildValueForElementChildren( return children.release(); } -ListValue* DomAgentImpl::BuildValueForCSSRules(CSSRuleList& matched) { - OwnPtr description_list(new ListValue()); - for (unsigned i = 0; i < matched.length(); ++i) { - if (!matched.item(i)->isStyleRule()) { - continue; - } - CSSStyleRule* rule = static_cast(matched.item(i)); - OwnPtr description(new DictionaryValue()); - - description->SetString(L"selector", - webkit_glue::StringToStdString(rule->selectorText())); - - CSSMutableStyleDeclaration* style = rule->style(); - if (style) { - description->Set(L"style", BuildValueForStyle(*style)); - } - - CSSStyleSheet* parent_style_sheet = rule->parentStyleSheet(); - if (parent_style_sheet) { - description->SetString(L"parentStyleSheetHref", - webkit_glue::StringToStdString(parent_style_sheet->href())); - - Node* owner_node = parent_style_sheet->ownerNode(); - if (owner_node) { - description->SetString(L"parentStyleSheetOwnerNodeName", - webkit_glue::StringToStdString(owner_node->nodeName())); - } - } - description_list->Append(description.release()); - } - return description_list.release(); -} - -DictionaryValue* DomAgentImpl::BuildValueForAttributeStyles( - const NamedNodeMap& attributes) { - OwnPtr description(new DictionaryValue()); - for (size_t i = 0; i < attributes.length(); ++i) { - Attribute* attr = attributes.attributeItem(i); - - if (CSSStyleDeclaration* style = attr->style()) { - std::wstring name = - webkit_glue::StringToStdWString(attr->name().toString()); - - description->Set(name, BuildValueForStyle(*style)); - } - } - return description.release(); -} - -ListValue* DomAgentImpl::BuildValueForStyle(const CSSStyleDeclaration& style) { - OwnPtr prop_list(new ListValue); - for (int i = 0; i != style.length(); ++i) { - String name = style.item(i); - int id = cssPropertyID(name); - - bool important = style.getPropertyPriority(id); - bool implicit = style.isPropertyImplicit(id); - int shorthand_id = style.getPropertyShorthand(id); - String shorthand = - getPropertyName(static_cast(shorthand_id)); - - OwnPtr prop(new ListValue); - prop->Append(Value::CreateStringValue( - webkit_glue::StringToStdWString(name))); - prop->Append(Value::CreateBooleanValue(important)); - prop->Append(Value::CreateBooleanValue(implicit)); - prop->Append(Value::CreateStringValue( - webkit_glue::StringToStdWString(shorthand))); - prop->Append(Value::CreateStringValue( - webkit_glue::StringToStdWString(style.getPropertyValue(id)))); - - prop_list->Append(prop.release()); - } - - return prop_list.release(); -} - Node* DomAgentImpl::InnerFirstChild(Node* node) { if (node->isFrameOwnerElement()) { HTMLFrameOwnerElement* frame_owner = diff --git a/webkit/glue/devtools/dom_agent_impl.h b/webkit/glue/devtools/dom_agent_impl.h index 2751ecb..3d88e3e 100644 --- a/webkit/glue/devtools/dom_agent_impl.h +++ b/webkit/glue/devtools/dom_agent_impl.h @@ -16,7 +16,6 @@ #include "webkit/glue/devtools/dom_agent.h" namespace WebCore { -class CSSRuleList; class Document; class Element; class Event; @@ -51,7 +50,6 @@ class DomAgentImpl : public DomAgent { int element_id, const WebCore::String& value); void PerformSearch(int call_id, const String& query); - void GetNodeStyles(int call_id, int id, bool author_only); void DiscardBindings(); // Initializes dom agent with the given document. @@ -121,13 +119,6 @@ class DomAgentImpl : public DomAgent { WebCore::Element* element, int depth); - // Serializes CSS rule list into the list value. - static ListValue* BuildValueForCSSRules(WebCore::CSSRuleList& matched); - - // Serializes attribute styles into the dictionary value. - static DictionaryValue* BuildValueForAttributeStyles( - const WebCore::NamedNodeMap& attributes); - // Serializes CSSStyleDeclaration into a list of properties // where aeach property represented as an array as an // [name, important, implicit, shorthand, value] diff --git a/webkit/glue/devtools/js/devtools.js b/webkit/glue/devtools/js/devtools.js index 9e14e6f..715e611 100644 --- a/webkit/glue/devtools/js/devtools.js +++ b/webkit/glue/devtools/js/devtools.js @@ -55,36 +55,6 @@ devtools.ToolsAgent.prototype.evaluateJavaScript = function(script, callback) { /** - * Returns all properties of the given node. - * @param {devtools.DomNode} node Node to get properties for. - * @param {Array.} path Path to the object. - * @param {number} protoDepth Depth to the exact proto level. - * @param {function(string):undefined} callback Function to call with the - * result. - */ -devtools.ToolsAgent.prototype.getNodePropertiesAsync = function(nodeId, - path, protoDepth, callback) { - var callbackId = devtools.Callback.wrap(callback); - RemoteToolsAgent.ExecuteUtilityFunction(callbackId, - 'devtools$$getProperties', nodeId, - goog.json.serialize([path, protoDepth])); -}; - - -/** - * Returns prototype chain for a given node. - * @param {devtools.DomNode} node Node to get prototypes for. - * @param {Function} callback. - */ -devtools.ToolsAgent.prototype.getNodePrototypesAsync = function(nodeId, - callback) { - var callbackId = devtools.Callback.wrap(callback); - RemoteToolsAgent.ExecuteUtilityFunction(callbackId, - 'devtools$$getPrototypes', nodeId, ''); -}; - - -/** * @return {devtools.DebuggerAgent} Debugger agent instance. */ devtools.ToolsAgent.prototype.getDebuggerAgent = function() { @@ -142,7 +112,7 @@ devtools.ToolsAgent.prototype.addMessageToConsole = function(message, source, var console = WebInspector.console; if (console) { console.addMessage(new WebInspector.ConsoleMessage( - "", undefined, line, source, undefined, 1, message)); + '', undefined, line, source, undefined, 1, message)); } }; @@ -165,7 +135,7 @@ function debugPrint(text) { var console = WebInspector.console; if (console) { console.addMessage(new WebInspector.ConsoleMessage( - "", undefined, 1, "", undefined, 1, text)); + '', undefined, 1, '', undefined, 1, text)); } else { alert(text); } @@ -310,13 +280,22 @@ WebInspector.ElementsPanel.prototype.updateStyles = function(forceUpdate) { node = node.parentNode; if (node && node.nodeType == Node.ELEMENT_NODE) { - var callback = function() { + var callback = function(stylesStr) { + var styles = goog.json.parse(stylesStr); + if (!styles.computedStyle) { + return; + } + node.setStyles(styles.computedStyle, styles.inlineStyle, + styles.styleAttributes, styles.matchedCSSRules); stylesSidebarPane.update(node, null, forceUpdate); stylesSidebarPane.needsUpdate = false; + node.clearStyles(); }; - devtools.tools.getDomAgent().getNodeStylesAsync(node, - !Preferences.showUserAgentStyles, callback); + devtools.tools.getDomAgent().getNodeStylesAsync( + node, + !Preferences.showUserAgentStyles, + callback); } else { stylesSidebarPane.update(null, null, forceUpdate); stylesSidebarPane.needsUpdate = false; @@ -339,19 +318,21 @@ WebInspector.PropertiesSidebarPane.prototype.update = function(object) { var self = this; - devtools.tools.getNodePrototypesAsync(object.id_, function(json) { - // Get array of prototype user-friendly names. - var prototypes = goog.json.parse(json); - for (var i = 0; i < prototypes.length; ++i) { - var prototype = {}; - prototype.id_ = object.id_; - prototype.protoDepth_ = i; - var section = new WebInspector.SidebarObjectPropertiesSection(prototype, - prototypes[i]); - self.sections.push(section); - body.appendChild(section.element); - } - }); + devtools.tools.getDomAgent().getNodePrototypesAsync(object.id_, + function(json) { + // Get array of prototype user-friendly names. + var prototypes = goog.json.parse(json); + for (var i = 0; i < prototypes.length; ++i) { + var prototype = {}; + prototype.id_ = object.id_; + prototype.protoDepth_ = i; + var section = new WebInspector.SidebarObjectPropertiesSection( + prototype, + prototypes[i]); + self.sections.push(section); + body.appendChild(section.element); + } + }); }; @@ -377,7 +358,7 @@ WebInspector.SidebarObjectPropertiesSection.prototype.onpopulate = function() { var nodeId = this.object.id_; var protoDepth = this.object.protoDepth_; var path = []; - devtools.tools.getNodePropertiesAsync(nodeId, path, protoDepth, + devtools.tools.getDomAgent().getNodePropertiesAsync(nodeId, path, protoDepth, goog.partial(WebInspector.didGetNodePropertiesAsync_, this.propertiesTreeOutline, this.treeElementConstructor, @@ -392,7 +373,8 @@ WebInspector.SidebarObjectPropertiesSection.prototype.onpopulate = function() { */ WebInspector.SidebarObjectPropertyTreeElement = function(parentObject, propertyName) { - WebInspector.ObjectPropertyTreeElement.call(this, parentObject, propertyName); + WebInspector.ObjectPropertyTreeElement.call(this, parentObject, + propertyName); }; goog.inherits(WebInspector.SidebarObjectPropertyTreeElement, WebInspector.ObjectPropertyTreeElement); @@ -406,11 +388,12 @@ WebInspector.SidebarObjectPropertyTreeElement.prototype.onpopulate = var nodeId = this.parentObject.devtools$$nodeId_; var path = this.parentObject.devtools$$path_.slice(0); path.push(this.propertyName); - devtools.tools.getNodePropertiesAsync(nodeId, path, -1, goog.partial( - WebInspector.didGetNodePropertiesAsync_, - this, - this.treeOutline.section.treeElementConstructor, - nodeId, path)); + devtools.tools.getDomAgent().getNodePropertiesAsync(nodeId, path, -1, + goog.partial( + WebInspector.didGetNodePropertiesAsync_, + this, + this.treeOutline.section.treeElementConstructor, + nodeId, path)); }; @@ -437,7 +420,7 @@ WebInspector.SourceView.prototype.setupSourceFrameIfNeeded = function() { element)) { delete self._frameNeedsSetup; if (resource.type === WebInspector.Resource.Type.Script) { - self.sourceFrame.addEventListener("syntax highlighting complete", + self.sourceFrame.addEventListener('syntax highlighting complete', self._syntaxHighlightingComplete, self); self.sourceFrame.syntaxHighlightJavascript(); } @@ -511,9 +494,9 @@ WebInspector.ScopeChainSidebarPane.prototype.update = function(callFrame) { this.callFrame = callFrame; if (!callFrame) { - var infoElement = document.createElement("div"); - infoElement.className = "info"; - infoElement.textContent = WebInspector.UIString("Not Paused"); + var infoElement = document.createElement('div'); + infoElement.className = 'info'; + infoElement.textContent = WebInspector.UIString('Not Paused'); this.bodyElement.appendChild(infoElement); return; } @@ -523,7 +506,7 @@ WebInspector.ScopeChainSidebarPane.prototype.update = function(callFrame) { } var scopeObject = callFrame.localScope; - var title = WebInspector.UIString("Local"); + var title = WebInspector.UIString('Local'); var subtitle = Object.describe(scopeObject, true); var emptyPlaceholder = null; var extraProperties = null; diff --git a/webkit/glue/devtools/js/devtools_host_stub.js b/webkit/glue/devtools/js/devtools_host_stub.js index 347847e..89885d5 100644 --- a/webkit/glue/devtools/js/devtools_host_stub.js +++ b/webkit/glue/devtools/js/devtools_host_stub.js @@ -37,9 +37,9 @@ RemoteDomAgentStub.sendDocumentElement_ = function() { RemoteDomAgent.SetDocumentElement([ 1, // id 1, // type = Node.ELEMENT_NODE, - "HTML", // nodeName - "", // nodeValue - ["foo","bar"], // attributes + 'HTML', // nodeName + '', // nodeValue + ['foo','bar'], // attributes 2, // childNodeCount ]); }; @@ -52,16 +52,16 @@ RemoteDomAgentStub.sendChildNodes_ = function(id) { [ 2, // id 1, // type = Node.ELEMENT_NODE, - "DIV", // nodeName - "", // nodeValue - ["foo","bar"], // attributes + 'DIV', // nodeName + '', // nodeValue + ['foo','bar'], // attributes 1, // childNodeCount ], [ 3, // id 3, // type = Node.TEXT_NODE, - "", // nodeName - "Text", // nodeValue + '', // nodeName + 'Text', // nodeValue ] ]); } else if (id == 2) { @@ -70,9 +70,9 @@ RemoteDomAgentStub.sendChildNodes_ = function(id) { [ 4, // id 1, // type = Node.ELEMENT_NODE, - "span", // nodeName - "", // nodeValue - ["foo","bar"], // attributes + 'span', // nodeName + '', // nodeValue + ['foo','bar'], // attributes 0, // childNodeCount ] ]); @@ -127,25 +127,6 @@ RemoteDomAgentStub.prototype.DiscardBindings = function() { }; -RemoteDomAgentStub.prototype.GetNodeStyles = function(callId, id, authorOnly) { - var prop = function(name, value) { - return [name, false, false, '', value]; - }; - - var styles = { - computedStyle: [prop('display', 'none')], - inlineStyle: [prop('display', 'none')], - styleAttributes: {attr: [prop('display', 'none')]}, - matchedCSSRules: [{selector: 'S', style: [prop('display', 'none')], - parentStyleSheetHref: 'http://localhost', - parentStyleSheetOwnerNodeName: 'DIV'}] - }; - setTimeout(function() { - RemoteDomAgent.DidGetNodeStyles(callId, styles); - }, 0); -}; - - /** * @constructor */ @@ -189,6 +170,21 @@ RemoteToolsAgentStub.prototype.ExecuteUtilityFunction = function(callId, 'date', 'date_key', new Date() ]; } else if (functionName == 'devtools$$getPrototypes') { result = ['Proto1', 'Proto2', 'Proto3']; + } else if (functionName == 'devtools$$getStyles') { + result = { + 'computedStyle' : [['display', false, false, '', 'none']], + 'inlineStyle' : [['display', false, false, '', 'none']], + 'styleAttributes' : { + attr: [['display', false, false, '', 'none']] + }, + 'matchedCSSRules' : [ + { 'selector' : 'S', + 'style' : [['display', false, false, '', 'none']], + 'parentStyleSheetHref' : 'http://localhost', + 'parentStyleSheetOwnerNodeName' : 'DIV' + } + ] + }; } else { alert('Unexpected utility function:' + functionName); } diff --git a/webkit/glue/devtools/js/dom_agent.js b/webkit/glue/devtools/js/dom_agent.js index 0dbac35..ce7740e 100644 --- a/webkit/glue/devtools/js/dom_agent.js +++ b/webkit/glue/devtools/js/dom_agent.js @@ -222,8 +222,8 @@ devtools.DomNode.prototype.setAttribute = function(name, value) { */ devtools.DomNode.prototype.addAttribute_ = function(name, value) { var attr = { - "name": name, - "value": value, + 'name': name, + 'value': value, node_: this, /* Must be called after node.setStyles_. */ get style() { @@ -258,7 +258,7 @@ devtools.DomNode.prototype.removeAttribute = function(name) { * Returns inline style (if styles has loaded). Must be called after * node.setStyles_. */ -devtools.DomNode.prototype.__defineGetter__("style", function() { +devtools.DomNode.prototype.__defineGetter__('style', function() { return this.styles_.inlineStyle; }); @@ -275,11 +275,11 @@ devtools.DomNode.prototype.__defineGetter__("style", function() { * @param {Object} styleAttributes represents 'style' property * of attributes. * @param {Array.} matchedCSSRules represents result of the - * getMatchedCSSRules(node, "", authorOnly). Each elemet consists of: + * getMatchedCSSRules(node, '', authorOnly). Each elemet consists of: * selector, rule.style.cssText[, rule.parentStyleSheet.href * [, rule.parentStyleSheet.ownerNode.nodeName]]. */ -devtools.DomNode.prototype.setStyles_ = function(computedStyle, inlineStyle, +devtools.DomNode.prototype.setStyles = function(computedStyle, inlineStyle, styleAttributes, matchedCSSRules) { var styles = {}; styles.computedStyle = this.makeStyle_(computedStyle); @@ -307,8 +307,11 @@ devtools.DomNode.prototype.setStyles_ = function(computedStyle, inlineStyle, } } - styles.matchedCSSRules.push({selectorText: selector, "style": style, - "parentStyleSheet": parentStyleSheet}); + styles.matchedCSSRules.push({ + 'selectorText': selector, + 'style': style, + 'parentStyleSheet': parentStyleSheet + }); } this.styles_ = styles; @@ -331,7 +334,7 @@ devtools.DomNode.prototype.makeStyle_ = function(payload) { * resources when styles are not going to be used. * @see setStyles_. */ -devtools.DomNode.prototype.clearStyles_ = function() { +devtools.DomNode.prototype.clearStyles = function() { this.styles_ = null; }; @@ -347,8 +350,8 @@ devtools.DomDocument = function(domAgent, defaultView) { [ 0, // id 9, // type = Node.DOCUMENT_NODE, - "", // nodeName - "", // nodeValue + '', // nodeName + '', // nodeValue [], // attributes 0, // childNodeCount ]); @@ -425,7 +428,7 @@ devtools.DomWindow = function(domAgent) { /** * Represents DOM Node class. */ -devtools.DomWindow.prototype.__defineGetter__("Node", function() { +devtools.DomWindow.prototype.__defineGetter__('Node', function() { return devtools.DomNode; }); @@ -433,7 +436,7 @@ devtools.DomWindow.prototype.__defineGetter__("Node", function() { * Represents DOM Element class. * @constructor */ -devtools.DomWindow.prototype.__defineGetter__("Element", function() { +devtools.DomWindow.prototype.__defineGetter__('Element', function() { return devtools.DomNode; }); @@ -483,8 +486,6 @@ devtools.DomAgent = function() { devtools.Callback.processCallback; RemoteDomAgent.DidApplyDomChange = devtools.Callback.processCallback; - RemoteDomAgent.DidGetNodeStyles = - devtools.Callback.processCallback; RemoteDomAgent.DidRemoveAttribute = devtools.Callback.processCallback; RemoteDomAgent.DidSetTextNodeValue = @@ -738,7 +739,7 @@ devtools.DomAgent.prototype.childNodeInserted = function( var node = parent.insertChild_(prev, payload); this.idToDomNode_[node.id_] = node; var event = { target : node, relatedNode : parent }; - this.getDocument().fireDomEvent_("DOMNodeInserted", event); + this.getDocument().fireDomEvent_('DOMNodeInserted', event); }; @@ -752,7 +753,7 @@ devtools.DomAgent.prototype.childNodeRemoved = function( var node = this.idToDomNode_[nodeId]; parent.removeChild_(node); var event = { target : node, relatedNode : parent }; - this.getDocument().fireDomEvent_("DOMNodeRemoved", event); + this.getDocument().fireDomEvent_('DOMNodeRemoved', event); delete this.idToDomNode_[nodeId]; }; @@ -827,49 +828,60 @@ devtools.DomAgent.prototype.getSearchResultNode = function(index) { /** - * Asyncronously requests all the information about styles for the node. - * @param {devtools.DomNode} node to get styles for. - * @param {boolean} authorOnly is a parameter for getMatchedCSSRules - * @param {function()} callback invoked while the node filled up with styles + * Returns all properties of the given node. + * @param {number} nodeId Node to get properties for. + * @param {Array.} path Path to the object. + * @param {number} protoDepth Depth to the exact proto level. + * @param {function(string):undefined} callback Function to call with the + * result. */ -devtools.DomAgent.prototype.getNodeStylesAsync = function(node, - authorOnly, - callback) { - RemoteDomAgent.GetNodeStyles( - devtools.Callback.wrap( - goog.bind(this.getNodeStylesCallback_, this, node, callback)), - node.id_, authorOnly); +devtools.DomAgent.prototype.getNodePropertiesAsync = function(nodeId, + path, protoDepth, callback) { + var callbackId = devtools.Callback.wrap(callback); + RemoteToolsAgent.ExecuteUtilityFunction(callbackId, + 'devtools$$getProperties', nodeId, + goog.json.serialize([path, protoDepth])); }; /** - * Accepts results of RemoteDomAgent.GetNodeStyles - * @param {devtools.DomNode} node of the reveived styles. - * @param {function()} callback to notify the getNodeStylesAsync caller. - * @param {object} styles is structure representing all the styles. + * Returns prototype chain for a given node. + * @param {number} nodeId Node to get prototypes for. + * @param {Function} callback. */ -devtools.DomAgent.prototype.getNodeStylesCallback_ = function(node, - callback, styles) { - - if (styles.computedStyle) { - node.setStyles_(styles.computedStyle, styles.inlineStyle, - styles.styleAttributes, styles.matchedCSSRules); - } - - callback(); - - node.clearStyles_(); +devtools.DomAgent.prototype.getNodePrototypesAsync = function(nodeId, + callback) { + var callbackId = devtools.Callback.wrap(callback); + RemoteToolsAgent.ExecuteUtilityFunction(callbackId, + 'devtools$$getPrototypes', nodeId, ''); +}; + + +/** + * Returns styles for given node. + * @param {devtools.DomNode} node Node to get prototypes for. + * @param {boolean} authorOnly Returns only author styles if true. + * @param {Function} callback. + */ +devtools.DomAgent.prototype.getNodeStylesAsync = function(node, + authorOnly, callback) { + var callbackId = devtools.Callback.wrap(callback); + RemoteToolsAgent.ExecuteUtilityFunction(callbackId, + 'devtools$$getStyles', + node.id_, + goog.json.serialize(authorOnly)); }; /** * Represents remote CSSStyleDeclaration for using in StyleSidebarPane. - * @param {Array} payload built by DomAgentImpl::BuildValueForStyle. + * @param {Array} payload built by devtools$$getStyle from the injected + * js. * @consctuctor */ devtools.CSSStyleDeclaration = function(payload) { this.length = payload.length; - this.important_ = {}; + this.priority_ = {}; this.implicit_ = {}; this.shorthand_ = {}; this.value_ = {}; @@ -878,7 +890,7 @@ devtools.CSSStyleDeclaration = function(payload) { var p = payload[i]; var name = p[0]; - this.important_[name] = p[1]; + this.priority_[name] = p[1]; this.implicit_[name] = p[2]; this.shorthand_[name] = p[3]; this.value_[name] = p[4]; @@ -902,7 +914,7 @@ devtools.CSSStyleDeclaration.prototype.getPropertyValue = function(name) { * @return {string} 'important' | ''. */ devtools.CSSStyleDeclaration.prototype.getPropertyPriority = function(name) { - return this.important_[name] ? 'important' : ''; + return this.priority_[name] || ''; }; @@ -920,7 +932,7 @@ devtools.CSSStyleDeclaration.prototype.getPropertyShorthand = function(name) { * @return {boolean} */ devtools.CSSStyleDeclaration.prototype.isPropertyImplicit = function(name) { - return Boolean(this.implicit_[name]); + return !!this.implicit_[name]; }; diff --git a/webkit/glue/devtools/js/inject.js b/webkit/glue/devtools/js/inject.js index 4e97462..5cbb1a8 100644 --- a/webkit/glue/devtools/js/inject.js +++ b/webkit/glue/devtools/js/inject.js @@ -1,82 +1,155 @@ -// Copyright (c) 2009 The Chromium Authors. All rights reserved. -// Use of this source code is governed by a BSD-style license that can be -// found in the LICENSE file. - -/** - * @fileoverview Javascript that is being injected into the inspectable page - * while debugging. - */ -goog.require('goog.json'); - -/** - * Returns JSON-serialized array of properties for a given node - * on a given path. - * @param {Node} node Node to get property value for. - * @param {string} args JSON-serialized [{Array.} Path to the - * nested object, {number} Depth to the actual proto to inspect]. - * @return {string} JSON-serialized array where each property is represented - * by the tree entryies [{string} type, {string} name, {Object} value]. - */ -function devtools$$getProperties(node, args) { - // Parse parameters. - var parsedArgs = goog.json.parse(args); - var path = parsedArgs[0]; - var protoDepth = parsedArgs[1]; - - var result = []; - var obj = node; - - // Follow the path. - for (var i = 0; obj && i < path.length; ++i) { - obj = obj[path[i]]; - } - - if (!obj) { - return '[]'; - } - - // Get to the necessary proto layer. - for (var i = 0; obj && i < protoDepth; ++i) { - obj = obj.__proto__; - } - - if (!obj) { - return '[]'; - } - - // Go over properties, prepare results. - for (var name in obj) { - if (protoDepth != -1 && 'hasOwnProperty' in obj && - !obj.hasOwnProperty(name)) { - continue; - } - var type = typeof obj[name]; - result.push(type); - result.push(name); - if (type == 'string') { - var str = obj[name]; - result.push(str.length > 99 ? str.substr(0, 99) + '...' : str); - } else if (type != 'object' && type != 'array' && - type != 'function') { - result.push(obj[name]); - } else { - result.push(undefined); - } - } - return goog.json.serialize(result); -} - - -/** - * Returns JSON-serialized array of prototypes for a given node. - * @param {Node} node Node to get prorotypes for. - * @return {string} JSON-serialized array where each item is a proto name. - */ -function devtools$$getPrototypes(node, args) { - var result = []; - for (var prototype = node; prototype; prototype = prototype.__proto__) { - var description = Object.prototype.toString.call(prototype); - result.push(description.replace(/^\[object (.*)\]$/i, '$1')); - } - return goog.json.serialize(result); -} +// Copyright (c) 2009 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +/** + * @fileoverview Javascript that is being injected into the inspectable page + * while debugging. + */ +goog.require('goog.json'); + +/** + * Returns JSON-serialized array of properties for a given node + * on a given path. + * @param {Node} node Node to get property value for. + * @param {string} args JSON-serialized {Array.} Path to the + * nested object, {number} Depth to the actual proto to inspect]. + * @return {string} JSON-serialized array where each property is represented + * by the tree entryies [{string} type, {string} name, {Object} value]. + */ +function devtools$$getProperties(node, args) { + // Parse parameters. + var parsedArgs = goog.json.parse(args); + var path = parsedArgs[0]; + var protoDepth = parsedArgs[1]; + + var result = []; + var obj = node; + + // Follow the path. + for (var i = 0; obj && i < path.length; ++i) { + obj = obj[path[i]]; + } + + if (!obj) { + return '[]'; + } + + // Get to the necessary proto layer. + for (var i = 0; obj && i < protoDepth; ++i) { + obj = obj.__proto__; + } + + if (!obj) { + return '[]'; + } + + // Go over properties, prepare results. + for (var name in obj) { + if (protoDepth != -1 && 'hasOwnProperty' in obj && + !obj.hasOwnProperty(name)) { + continue; + } + var type = typeof obj[name]; + result.push(type); + result.push(name); + if (type == 'string') { + var str = obj[name]; + result.push(str.length > 99 ? str.substr(0, 99) + '...' : str); + } else if (type != 'object' && type != 'array' && + type != 'function') { + result.push(obj[name]); + } else { + result.push(undefined); + } + } + return goog.json.serialize(result); +} + + +/** + * Returns JSON-serialized array of prototypes for a given node. + * @param {Node} node Node to get prorotypes for. + * @return {string} JSON-serialized array where each item is a proto name. + */ +function devtools$$getPrototypes(node, args) { + var result = []; + for (var prototype = node; prototype; prototype = prototype.__proto__) { + var description = Object.prototype.toString.call(prototype); + result.push(description.replace(/^\[object (.*)\]$/i, '$1')); + } + return goog.json.serialize(result); +} + + +/** + * Returns JSON-serialized style information that is used in devtools.js. + * @param {Node} node Node to get prorotypes for. + * @param {string} args JSON-serialized boolean authorOnly that determines + * whether only author styles need to be added. + * @return {string} JSON-serialized style collection descriptor. + */ +function devtools$$getStyles(node, args) { + var authorOnly = goog.json.parse(args); + if (!node.nodeType == Node.ELEMENT_NODE) { + return '{}'; + } + var matchedRules = window.getMatchedCSSRules(node, '', authorOnly); + var matchedCSSRulesObj = []; + for (var i = 0; matchedRules && i < matchedRules.length; ++i) { + var rule = matchedRules[i]; + var style = devtools$$serializeStyle_(rule.style); + var parentStyleSheetHref = (rule.parentStyleSheet ? + rule.parentStyleSheet.href : undefined); + var parentStyleSheetOwnerNodeName; + if (rule.parentStyleSheet && rule.parentStyleSheet.ownerNode) { + parentStyleSheetOwnerNodeName = rule.parentStyleSheet.ownerNode.name; + } + matchedCSSRulesObj.push({ + 'selector' : rule.selectorText, + 'style' : style, + 'parentStyleSheetHref' : parentStyleSheetHref, + 'parentStyleSheetOwnerNodeName' : parentStyleSheetOwnerNodeName + }); + } + + var attributeStyles = {}; + var attributes = node.attributes; + for (var i = 0; attributes && i < attributes.length; ++i) { + if (attributes[i].style) { + attributeStyles[attributes[i].name] = + devtools$$serializeStyle_(attributes[i].style); + } + } + + var result = { + 'inlineStyle' : devtools$$serializeStyle_(node.style), + 'computedStyle' : devtools$$serializeStyle_( + window.getComputedStyle(node, '')), + 'matchedCSSRules' : matchedCSSRulesObj, + 'styleAttributes' : attributeStyles + }; + return goog.json.serialize(result); +} + + +/** + * Converts given style into serializable object. + * @param {CSSStyleDeclaration} style Style to serialize. + * @return {Array} Serializable object. + * @private + */ +function devtools$$serializeStyle_(style) { + var result = []; + for (var i = 0; style && i < style.length; ++i) { + var name = style[i]; + result.push([ + name, + style.getPropertyPriority(name), + style.isPropertyImplicit(name), + style.getPropertyShorthand(name), + style.getPropertyValue(name) + ]); + } + return result; +} diff --git a/webkit/glue/devtools/js/inspector_controller.js b/webkit/glue/devtools/js/inspector_controller.js index 578be7f..aa01772 100644 --- a/webkit/glue/devtools/js/inspector_controller.js +++ b/webkit/glue/devtools/js/inspector_controller.js @@ -67,7 +67,7 @@ devtools.InspectorController.prototype.isWindowVisible = function() { * @return {string} Platform identifier. */ devtools.InspectorController.prototype.platform = function() { - return "windows"; + return 'windows'; }; @@ -231,7 +231,7 @@ devtools.InspectorController.prototype.windowUnloading = function() { * @return {string} Identifiers of the panels that should be hidden. */ devtools.InspectorController.prototype.hiddenPanels = function() { - return ""; + return ''; }; diff --git a/webkit/glue/devtools/js/inspector_controller_impl.js b/webkit/glue/devtools/js/inspector_controller_impl.js index e6fa74d..8a6ae3b 100644 --- a/webkit/glue/devtools/js/inspector_controller_impl.js +++ b/webkit/glue/devtools/js/inspector_controller_impl.js @@ -29,7 +29,7 @@ devtools.InspectorController.prototype.clearMessages = function() { * {@inheritDoc}. */ devtools.InspectorControllerImpl.prototype.hiddenPanels = function() { - return "profiles,databases"; + return 'profiles,databases'; }; @@ -39,7 +39,7 @@ devtools.InspectorControllerImpl.prototype.hiddenPanels = function() { devtools.InspectorControllerImpl.prototype.addSourceToFrame = function(mimeType, source, element) { if (!element.id) { - element.id = "f" + this.frame_element_id_++; + element.id = 'f' + this.frame_element_id_++; } return DevToolsHost.addSourceToFrame(mimeType, source, element.id); }; -- cgit v1.1