DevTools: Implement styles editing.

webkit/glue/devtools/js/inject.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 Javascript that is being injected into the inspectable page
  * while debugging.
  */
 goog.require('goog.json');
 goog.provide('devtools.Injected');
@@ skipping 93 matching lines @@
  * Returns style information that is used in devtools.js.
  * @param {Node} node Node to get prorotypes for.
  * @param {boolean} authorOnly Determines whether only author styles need to
  *     be added.
  * @return {string} Style collection descriptor.
  */
 devtools.Injected.prototype.getStyles = function(node, authorOnly) {
   if (!node.nodeType == Node.ELEMENT_NODE) {
     return {};
   }
-  var matchedRules = window.getMatchedCSSRules(node, '', authorOnly);
+  var matchedRules = window.getMatchedCSSRules(node, '', false);
   var matchedCSSRulesObj = [];
   for (var i = 0; matchedRules && i < matchedRules.length; ++i) {
-    var rule = matchedRules[i];   
-    var style = this.serializeStyle_(rule.style);
+    var rule = matchedRules[i];
+    var parentStyleSheet = rule.parentStyleSheet;
+    var isUserAgent = parentStyleSheet && !parentStyleSheet.ownerNode &&
+        !parentStyleSheet.href;
+    var isUser = parentStyleSheet && parentStyleSheet.ownerNode &&
+        parentStyleSheet.ownerNode.nodeName == '#document';
+
+    var style = this.serializeStyle_(rule.style, !isUserAgent && !isUser);
     var ruleValue = {
       'selector' : rule.selectorText,
       'style' : style
     };
-    if (rule.parentStyleSheet) {
+    if (parentStyleSheet) {
       ruleValue['parentStyleSheet'] = {
-        'href' : rule.parentStyleSheet.href,
-        'ownerNodeName' : rule.parentStyleSheet.ownerNode ?
-            rule.parentStyleSheet.ownerNode.name : null
+        'href' : parentStyleSheet.href,
+        'ownerNodeName' : parentStyleSheet.ownerNode ?
+            parentStyleSheet.ownerNode.name : null
       };
     }
-    var parentStyleSheetHref = (rule.parentStyleSheet ?
-        rule.parentStyleSheet.href : undefined);
-    var parentStyleSheetOwnerNodeName;
-    if (rule.parentStyleSheet && rule.parentStyleSheet.ownerNode) {
-      parentStyleSheetOwnerNodeName = rule.parentStyleSheet.ownerNode.name;
-    }
     matchedCSSRulesObj.push(ruleValue);
   }
 
   var attributeStyles = {};
   var attributes = node.attributes;
   for (var i = 0; attributes && i < attributes.length; ++i) {
     if (attributes[i].style) {
       attributeStyles[attributes[i].name] =
-          this.serializeStyle_(attributes[i].style);
+          this.serializeStyle_(attributes[i].style, true);
     }
   }
-
   var result = {
-    'inlineStyle' : this.serializeStyle_(node.style),
+    'inlineStyle' : this.serializeStyle_(node.style, true),
     'computedStyle' : this.serializeStyle_(
         window.getComputedStyle(node, '')),
     'matchedCSSRules' : matchedCSSRulesObj,
     'styleAttributes' : attributeStyles
   };
   return result;
 };
 
 
 /**
@@ skipping 22 matching lines @@
   }
   return null;
 };
 
 
 
 
 /**
  * Converts given style into serializable object.
  * @param {CSSStyleDeclaration} style Style to serialize.
+ * @param {boolean} opt_bind Determins whether this style should be bound.
  * @return {Array<Object>} Serializable object.
  * @private
  */
-devtools.Injected.prototype.serializeStyle_ = function(style) {
+devtools.Injected.prototype.serializeStyle_ = function(style, opt_bind) {
   if (!style) {
     return [];
   }
-  if (!style.__id) {
-    style.__id = this.lastStyleId_++;
+  var id = style.__id;
+  if (opt_bind && !id) {
+    id = style.__id = this.lastStyleId_++;
     this.styles_.push(style);
   }
   var result = [
-    style.__id,
+    id,
     style.__disabledProperties,
     style.__disabledPropertyValues,
     style.__disabledPropertyPriorities
   ];
   for (var i = 0; i < style.length; ++i) {
     var name = style[i];
     result.push([
       name,
       style.getPropertyPriority(name),
       style.isPropertyImplicit(name),
@@ skipping 48 matching lines @@
 
     delete style.__disabledProperties[name];
     delete style.__disabledPropertyValues[name];
     delete style.__disabledPropertyPriorities[name];
   }
   return true;
 };
 
 
 /**
- * Returns longhand proeprties for a given shorthand one.
- * @param {CSSStyleDeclaration} style Style declaration to use for lookup.
- * @param {string} shorthandProperty Shorthand property to get longhands for.
- * @return {Array.<string>} Array with longhand properties.
- * @private
+ * Applies given text to a style.
+ * @param {Node} node Node to get prorotypes for.
+ * @param {number} styleId Id of style to toggle.
+ * @param {string} name Style element name.
+ * @param {string} styleText New style text.
+ * @return {boolean} True iff style has been edited successfully.
+ */
+devtools.Injected.prototype.applyStyleText = function(node, styleId,

[yurys, 2009/04/30 09:55:40]

wrong parameter alignment here and in some other places, please fix

[pfeldman, 2009/04/30 10:00:16]

Lets better stick to this schema!

+    name, styleText) {
+  var style = this.getStyleForId_(node, styleId);
+  if (!style) {
+    return false;
+  }
+
+  var styleTextLength = this.trimWhitespace_(styleText).length;
+
+  // Create a new element to parse the user input CSS.
+  var parseElement = document.createElement("span");
+  parseElement.setAttribute("style", styleText);
+
+  var tempStyle = parseElement.style;
+  if (tempStyle.length || !styleTextLength) {
+    // The input was parsable or the user deleted everything, so remove the
+    // original property from the real style declaration. If this represents
+    // a shorthand remove all the longhand properties.
+    if (style.getPropertyShorthand(name)) {
+      var longhandProperties = this.getLonghandProperties_(style, name);
+      for (var i = 0; i < longhandProperties.length; ++i) {
+        style.removeProperty(longhandProperties[i]);
+      }
+    } else {
+      style.removeProperty(name);
+    }
+  }
+  if (!tempStyle.length) {
+    // The user typed something, but it didn't parse. Just abort and restore
+    // the original title for this property.
+    return false;
+  }
+
+  // Iterate of the properties on the test element's style declaration and
+  // add them to the real style declaration. We take care to move shorthands.
+  var foundShorthands = {};
+  var uniqueProperties = this.getUniqueStyleProperties_(tempStyle);
+  for (var i = 0; i < uniqueProperties.length; ++i) {
+    var name = uniqueProperties[i];
+    var shorthand = tempStyle.getPropertyShorthand(name);
+
+    if (shorthand && shorthand in foundShorthands) {
+      continue;
+    }
+
+    if (shorthand) {
+      var value = this.getShorthandValue_(tempStyle, shorthand);
+      var priority = this.getShorthandPriority_(tempStyle, shorthand);
+      foundShorthands[shorthand] = true;
+    } else {
+      var value = tempStyle.getPropertyValue(name);
+      var priority = tempStyle.getPropertyPriority(name);
+    }
+    // Set the property on the real style declaration.
+    style.setProperty((shorthand || name), value, priority);
+  }
+  return true;
+};
+
+
+/**
+ * Taken from utilities.js as is for injected evaluation.
  */
 devtools.Injected.prototype.getLonghandProperties_ = function(style,
     shorthandProperty) {
   var properties = [];
   var foundProperties = {};
 
   for (var i = 0; i < style.length; ++i) {
     var individualProperty = style[i];
     if (individualProperty in foundProperties ||
         style.getPropertyShorthand(individualProperty) != shorthandProperty) {
       continue;
     }
     foundProperties[individualProperty] = true;
     properties.push(individualProperty);
   }
   return properties;
 };
+
+
+/**
+ * Taken from utilities.js as is for injected evaluation.
+ */
+devtools.Injected.prototype.getShorthandValue_ = function(style,
+    shorthandProperty) {
+  var value = style.getPropertyValue(shorthandProperty);
+  if (!value) {
+    // Some shorthands (like border) return a null value, so compute a 
+    // shorthand value.
+    // FIXME: remove this when http://bugs.webkit.org/show_bug.cgi?id=15823 
+    // is fixed.
+
+    var foundProperties = {};
+    for (var i = 0; i < style.length; ++i) {
+      var individualProperty = style[i];
+      if (individualProperty in foundProperties ||
+          style.getPropertyShorthand(individualProperty) !==
+              shorthandProperty) {
+        continue;
+      }
+
+      var individualValue = style.getPropertyValue(individualProperty);
+      if (style.isPropertyImplicit(individualProperty) ||
+          individualValue === "initial") {
+          continue;
+      }
+
+      foundProperties[individualProperty] = true;
+
+      if (!value) {
+        value = "";
+      } else if (value.length) {
+        value += " ";
+      }
+      value += individualValue;
+    }
+  }
+  return value;
+};
+
+
+/**
+ * Taken from utilities.js as is for injected evaluation.
+ */
+devtools.Injected.prototype.getShorthandPriority_ = function(style,
+    shorthandProperty) {
+  var priority = style.getPropertyPriority(shorthandProperty);
+  if (!priority) {
+    for (var i = 0; i < style.length; ++i) {
+      var individualProperty = style[i];
+      if (style.getPropertyShorthand(individualProperty) !==
+              shorthandProperty) {
+        continue;
+      }
+      priority = style.getPropertyPriority(individualProperty);
+      break;
+    }
+  }
+  return priority;
+};
+
+
+/**
+ * Taken from utilities.js as is for injected evaluation.
+ */
+devtools.Injected.prototype.trimWhitespace_ = function(str) {
+  return str.replace(/^[\s\xA0]+|[\s\xA0]+$/g, '');
+};
+
+
+/**
+ * Taken from utilities.js as is for injected evaluation.
+ */
+devtools.Injected.prototype.getUniqueStyleProperties_ = function(style) {
+  var properties = [];
+  var foundProperties = {};
+
+  for (var i = 0; i < style.length; ++i) {
+    var property = style[i];
+    if (property in foundProperties) {
+      continue;
+    }
+    foundProperties[property] = true;
+    properties.push(property);
+  }
+  return properties;
+};