DevTools: Implement styles toggle:...

webkit/glue/devtools/js/dom_agent.js

 // 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 Dom and DomNode are used to represent remote DOM in the
  * web inspector.
  */
 goog.provide('devtools.DomAgent');
 goog.provide('devtools.DomDocument');
@@ skipping 38 matching lines @@
   }
 
   this.childNodesCount_ = payload[devtools.PayloadIndex.HAS_CHILDREN];
   this.children = null;
 
   this.nextSibling = null;
   this.prevSibling = null;
   this.firstChild = null;
   this.parentNode = null;
 
-  this.styles_ = null;
   this.disabledStyleProperties_ = {};
 
   if (payload.length > devtools.PayloadIndex.CHILD_NODES) {
     // Has children payloads
     this.setChildrenPayload_(
         payload[devtools.PayloadIndex.CHILD_NODES]);
   }
+
+  this.computedStyle_ = null;
+  this.style = null;
+  this.matchedCSSRules_ = [];
 };
 
 
 /**
  * Overrides for getters and setters.
  */
 devtools.DomNode.prototype = {
   get nodeValue() {
     return this.nodeValue_;
   },
@@ skipping 138 matching lines @@
 };
 
 
 /**
  * Creates an attribute-like object and adds it to the object.
  * @param {string} name Attribute name to set value for.
  * @param {string} value Attribute value to set.
  */
 devtools.DomNode.prototype.addAttribute_ = function(name, value) {  
   var attr = {
-      'name': name,
-      'value': value,
-      node_: this,
-       /* Must be called after node.setStyles_. */
-      get style() {
-        return this.node_.styles_.attributes[this.name];
-      }
+    'name': name,
+    'value': value,
+    node_: this
   };
     
   this.attributesMap_[name] = attr;
   this.attributes.push(attr);
 };
 
 
 /**
  * Sends 'remove attribute' command to the remote agent.
  * @param {string} name Attribute name to set value for.
  */
 devtools.DomNode.prototype.removeAttribute = function(name) {
   var self = this;
   this.ownerDocument.domAgent_.removeAttributeAsync(this, name, function() {
     delete self.attributesMap_[name];
     for (var i = 0;  i < self.attributes.length; ++i) {
       if (self.attributes[i].name == name) {
         self.attributes.splice(i, 1);
         break;
       }
     }
   });
 };
 
 
 /**
- * Returns inline style (if styles has loaded). Must be called after
- * node.setStyles_.
- */
-devtools.DomNode.prototype.__defineGetter__('style', function() {
-  return this.styles_.inlineStyle;
-});
-
-
-/**
  * Makes available the following methods and properties:
  * - node.style property
  * - node.document.defaultView.getComputedStyles(node)
  * - node.document.defaultView.getMatchedCSSRules(node, ...)
  * - style attribute of node's attributes
  * @param {string} computedStyle is a cssText of result of getComputedStyle().
  * @param {string} inlineStyle is a style.cssText (defined in the STYLE
  *     attribute).
  * @param {Object} styleAttributes represents 'style' property
  *     of attributes.
  * @param {Array.<object>} matchedCSSRules represents result of the
  *     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,
      styleAttributes, matchedCSSRules) {
-  var styles = {};
-  styles.computedStyle = this.makeStyle_(computedStyle);
-  styles.inlineStyle = this.makeStyle_(inlineStyle);
+  this.computedStyle_ = this.makeStyle_(computedStyle);
+  this.style = this.makeStyle_(inlineStyle);
 
-  styles.attributes = {};
   for (var name in styleAttributes) {
-    var style = this.makeStyle_(styleAttributes[name]);
-    styles.attributes[name] = style;
+    if (this.attributesMap_[name]) {
+      this.attributesMap_[name].style =
+          this.makeStyle_(styleAttributes[name]);
+    }
   }
 
-  styles.matchedCSSRules = [];
+  this.matchedCSSRules_ = [];
   for (var i = 0; i < matchedCSSRules.length; i++) {
     var descr = matchedCSSRules[i];
-    var selector = descr.selector;
-    var style = this.makeStyle_(descr.style);
 
-    var parentStyleSheet = undefined;
-    if (descr.parentStyleSheetHref) {
-      parentStyleSheet = {href: descr.parentStyleSheetHref};
+    var rule = {};
+    rule.selectorText = descr['selector'];
+    rule.style = this.makeStyle_(descr['style']);
 
-      if (descr.parentStyleSheetOwnerNodeName) {
-        parentStyleSheet.ownerNode =
-            {nodeName: descr.parentStyleSheetOwnerNodeName};
+    if (descr['parentStyleSheet']) {
+      var parentStyleMock = {};
+      parentStyleMock.href = descr['parentStyleSheet']['href'];
+      var nodeName = descr['parentStyleSheet']['ownerNodeName'];
+      if (nodeName) {
+        parentStyleMock.ownerNode = {
+          'nodeName': nodeName
+        };
       }
+      rule.parentStyleSheet = parentStyleMock;
     }
-    
-    styles.matchedCSSRules.push({
-      'selectorText': selector,
-      'style': style,
-      'parentStyleSheet': parentStyleSheet
-    });
+    this.matchedCSSRules_.push(rule);
   }
-  
-  this.styles_ = styles;
 };
 
 
 /**
  * Creates a style declaration.
  * @param {payload} payload
  * @return {devtools.CSSStyleDeclaration:undefined}
  * @see devtools.CSSStyleDeclaration
  */
 devtools.DomNode.prototype.makeStyle_ = function(payload) {
-  return payload && new devtools.CSSStyleDeclaration(payload);
+  var style = new devtools.CSSStyleDeclaration(payload);
+  style.nodeId_ = this.id_;
+  return style;
 };
 
 
 /**
  * Remove references to the style information to release
  * resources when styles are not going to be used.
- * @see setStyles_.
+ * @see setStyles.
  */
 devtools.DomNode.prototype.clearStyles = function() {
-  this.styles_ = null;
+  this.computedStyle = null;
+  this.style = null;
+  for (var name in this.attributesMap_) {
+    this.attributesMap_[name].style = null;
+  }
+  this.matchedCSSRules_ = null;
 };
 
 
 /**
  * Remote Dom document abstraction.
  * @param {devtools.DomAgent} domAgent owner agent.
  * @param {devtools.DomWindow} defaultView owner window.
  * @constructor.
  */
 devtools.DomDocument = function(domAgent, defaultView) {
@@ skipping 94 matching lines @@
 
 /**
  * See usages in ScopeChainSidebarPane.js where it's called as
  * constructor.
  */
 devtools.DomWindow.prototype.Object = function() {
 };
 
 
 /**
- * Simulates the DOM interface for styles. Must be called after
- * node.setStyles_.
+ * Simulates the DOM interface for styles.
  * @param {devtools.DomNode} node
  * @return {CSSStyleDescription}
  */
 devtools.DomWindow.prototype.getComputedStyle = function(node) {
-  return node.styles_.computedStyle;
+  return node.computedStyle_;
 };
 
 
 /**
- * Simulates the DOM interface for styles. Must be called after
- * node.setStyles_.
+ * Simulates the DOM interface for styles.
  * @param {devtools.DomNode} nodeStyles
  * @param {string} pseudoElement assumed to be empty string.
  * @param {boolean} authorOnly assumed to be equal to authorOnly argument of
  *     getNodeStylesAsync.
  * @return {CSSStyleDescription}
  */
 devtools.DomWindow.prototype.getMatchedCSSRules = function(node,
     pseudoElement, authorOnly) {
-  return node.styles_.matchedCSSRules;
+  return node.matchedCSSRules_;
 };
 
 
 /**
  * Creates DomAgent Js representation.
  * @constructor
  */
 devtools.DomAgent = function() {
   RemoteDomAgent.DidGetChildNodes =
       devtools.Callback.processCallback;
@@ skipping 345 matching lines @@
 /**
  * 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.getNodePropertiesAsync = function(nodeId,
     path, protoDepth, callback) {
-  var callbackId = devtools.Callback.wrap(callback);
+  var mycallback =
+      goog.bind(this.utilityFunctionCallbackWrapper_, this, callback);
+  var callbackId = devtools.Callback.wrap(mycallback);
   RemoteToolsAgent.ExecuteUtilityFunction(callbackId,
-      'devtools$$getProperties', nodeId,
+      'getProperties', nodeId,
       goog.json.serialize([path, protoDepth]));
 };
 
 
 /**
  * Returns prototype chain for a given node.
  * @param {number} nodeId Node to get prototypes for.
  * @param {Function} callback.
  */
 devtools.DomAgent.prototype.getNodePrototypesAsync = function(nodeId,
     callback) {
-  var callbackId = devtools.Callback.wrap(callback);
+  var mycallback =
+      goog.bind(this.utilityFunctionCallbackWrapper_, this, callback);
+  var callbackId = devtools.Callback.wrap(mycallback);
   RemoteToolsAgent.ExecuteUtilityFunction(callbackId,
-      'devtools$$getPrototypes', nodeId, '');
+      '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);
+  var mycallback =
+      goog.bind(this.utilityFunctionCallbackWrapper_, this, callback);
+  var callbackId = devtools.Callback.wrap(mycallback);
   RemoteToolsAgent.ExecuteUtilityFunction(callbackId,
-      'devtools$$getStyles',
+      'getStyles',
       node.id_,
-      goog.json.serialize(authorOnly));
+      goog.json.serialize([authorOnly]));
+};
+
+
+/**
+ * Toggles style with given id on/off.
+ * @param {devtools.CSSStyleDeclaration} style Style to toggle.
+ * @param {boolean} enabled True if style should be enabled.
+ * @param {string} name Style name.
+ * @param {Function} callback.
+ */
+devtools.DomAgent.prototype.toggleNodeStyleAsync = function(
+    style, enabled, name, callback) {
+  var mycallback =
+      goog.bind(this.utilityFunctionCallbackWrapper_, this, callback);
+  var callbackId = devtools.Callback.wrap(mycallback);
+  RemoteToolsAgent.ExecuteUtilityFunction(callbackId,
+      'toggleNodeStyle',
+      style.nodeId_,
+      goog.json.serialize([style.id_, enabled, name]));
+};
+
+
+/**
+ * Dumps exception if something went wrong in ExecuteUtilityFunction.
+ */
+devtools.DomAgent.prototype.utilityFunctionCallbackWrapper_ =
+    function(callback, result, exception) {
+  if (exception && exception.length) {
+    debugPrint('Exception in ExecuteUtilityFunction styles:' + exception);
+    return;
+  }
+  callback(result);
 };
 
 
 /**
  * Represents remote CSSStyleDeclaration for using in StyleSidebarPane.
- * @param {Array<Object>} payload built by devtools$$getStyle from the injected
- *     js.
- * @consctuctor
+ * @param {id, Array<Object>} payload built by inject's getStyle from the
+ *     injected js.
+ * @constructor
  */
 devtools.CSSStyleDeclaration = function(payload) {
-  this.length = payload.length;
+  this.id_ = payload[0];
+  this.__disabledProperties = payload[1];
+  this.__disabledPropertyValues = payload[2];
+  this.__disabledPropertyPriorities = payload[3];
+
+  this.length = payload.length - 4;
   this.priority_ = {};
   this.implicit_ = {};
   this.shorthand_ = {};
   this.value_ = {};
 
-  for (var i = 0; i < payload.length; ++i) {
+  for (var i = 4; i < payload.length; ++i) {
     var p = payload[i];
     var name = p[0];
-    
+
     this.priority_[name] = p[1];
     this.implicit_[name] = p[2];
     this.shorthand_[name] = p[3];
     this.value_[name] = p[4];
 
-    this[i] = name;
+    this[i - 4] = name;
   }
 };
 
 
 /**
  * @param {string} name of a CSS property.
  * @return {string}
  */
 devtools.CSSStyleDeclaration.prototype.getPropertyValue = function(name) {
   return this.value_[name] || '';
@@ skipping 35 matching lines @@
 function onlyTextChild() {
   if (!this.children) {
     return null;
   } else if (this.children.length == 1 &&
         this.children[0].nodeType == Node.TEXT_NODE) {
     return this.children[0];
   } else {
     return null;
   }
 }