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

9 files changed, 287 insertions, 354 deletions

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<Element*>(node);
-  result.Set(L"inlineStyle",
-      BuildValueForStyle(*element->style()));
-
-  DOMWindow* window = element->document()->defaultView();
-  result.Set(L"computedStyle",
-      BuildValueForStyle(*window->getComputedStyle(element, "")));
-
-  RefPtr<CSSRuleList> 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<ListValue> value(new ListValue());
   int id = Bind(node);
@@ -564,83 +526,6 @@ ListValue* DomAgentImpl::BuildValueForElementChildren(
   return children.release();
 }
 
-ListValue* DomAgentImpl::BuildValueForCSSRules(CSSRuleList& matched) {
-  OwnPtr<ListValue> description_list(new ListValue());
-  for (unsigned i = 0; i < matched.length(); ++i) {
-    if (!matched.item(i)->isStyleRule()) {
-      continue;
-    }
-    CSSStyleRule* rule = static_cast<CSSStyleRule*>(matched.item(i));
-    OwnPtr<DictionaryValue> 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<DictionaryValue> 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<ListValue> 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<CSSPropertyID>(shorthand_id));
-
-    OwnPtr<ListValue> 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.<string>} 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.<object>} 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.<string>} 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<Object>} 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.<string>} 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.<string>} 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<Object>} 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);
 };