DevTools: migrate to upstreamed version of CSS support.

Review URL: http://codereview.chromium.org/164052

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@22612 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 244 insertions, 768 deletions

diff --git a/webkit/glue/devtools/js/devtools.html b/webkit/glue/devtools/js/devtools.html
index ad26d2e..d1e972e 100644
--- a/webkit/glue/devtools/js/devtools.html
+++ b/webkit/glue/devtools/js/devtools.html
@@ -51,7 +51,6 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="debugger_agent.js"></script>
     <script type="text/javascript" src="dom_agent.js"></script>
     <script type="text/javascript" src="inspector_controller.js"></script>
-    <script type="text/javascript" src="inspector_controller_impl.js"></script>
     <script type="text/javascript" src="inspector.js"></script>
     <script type="text/javascript" src="codemap.js"></script>
     <script type="text/javascript" src="consarray.js"></script>
@@ -72,6 +71,9 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="Resource.js"></script>
     <script type="text/javascript" src="ResourceCategory.js"></script>
     <script type="text/javascript" src="Database.js"></script>
+    <script type="text/javascript" src="Callback.js"></script>
+    <script type="text/javascript" src="DOMAgent.js"></script>
+    <script type="text/javascript" src="inspector_controller_impl.js"></script>
     <script type="text/javascript" src="DOMStorage.js"></script>
     <script type="text/javascript" src="DOMStorageItemsView.js"></script>
     <script type="text/javascript" src="DataGrid.js"></script>
diff --git a/webkit/glue/devtools/js/devtools.js b/webkit/glue/devtools/js/devtools.js
index bed26487..eedf7aa 100644
--- a/webkit/glue/devtools/js/devtools.js
+++ b/webkit/glue/devtools/js/devtools.js
@@ -341,98 +341,6 @@ WebInspector.ElementsPanel.prototype.jumpToPreviousSearchResult = function() {
 /**
  * @override
  */
-WebInspector.ElementsPanel.prototype.updateStyles = function(forceUpdate) {
-  var stylesSidebarPane = this.sidebarPanes.styles;
-  if (!stylesSidebarPane.expanded || !stylesSidebarPane.needsUpdate) {
-    return;
-  }
-  this.invokeWithStyleSet_(function(node) {
-    stylesSidebarPane.needsUpdate = !!node;
-    stylesSidebarPane.update(node, null, forceUpdate);
-  });
-};
-
-
-/**
- * @override
- */
-WebInspector.ElementsPanel.prototype.updateMetrics = function() {
-  var metricsSidebarPane = this.sidebarPanes.metrics;
-  if (!metricsSidebarPane.expanded || !metricsSidebarPane.needsUpdate) {
-    return;
-  }
-  this.invokeWithStyleSet_(function(node) {
-    metricsSidebarPane.needsUpdate = !!node;
-    metricsSidebarPane.update(node);
-  });
-};
-
-
-/**
- * Temporarily sets style fetched from the inspectable tab to the currently
- * focused node, invokes updateUI callback and clears the styles.
- * @param {function(Node):undefined} updateUI Callback to call while styles are
- *     set.
- */
-WebInspector.ElementsPanel.prototype.invokeWithStyleSet_ =
-    function(updateUI) {
-  var node = this.focusedDOMNode;
-  if (node && node.nodeType === Node.TEXT_NODE && node.parentNode)
-    node = node.parentNode;
-
-  if (node && node.nodeType == Node.ELEMENT_NODE) {
-    var callback = function(stylesStr) {
-      var styles = JSON.parse(stylesStr);
-      if (!styles.computedStyle) {
-        return;
-      }
-      node.setStyles(styles.computedStyle, styles.inlineStyle,
-          styles.styleAttributes, styles.matchedCSSRules);
-      updateUI(node);
-      node.clearStyles();
-    };
-    devtools.tools.getDomAgent().getNodeStylesAsync(
-        node,
-        !Preferences.showUserAgentStyles,
-        callback);
-  } else {
-    updateUI(null);
-  }
-};
-
-
-/**
- * @override
- */
-WebInspector.MetricsSidebarPane.prototype.editingCommitted =
-    function(element, userInput, previousContent, context) {
-  if (userInput === previousContent) {
-    // nothing changed, so cancel
-    return this.editingCancelled(element, context);
-  }
-
-  if (context.box !== "position" && (!userInput || userInput === "\u2012")) {
-    userInput = "0px";
-  } else if (context.box === "position" &&
-      (!userInput || userInput === "\u2012")) {
-    userInput = "auto";
-  }
-
-  // Append a "px" unit if the user input was just a number.
-  if (/^\d+$/.test(userInput)) {
-    userInput += "px";
-  }
-  devtools.tools.getDomAgent().setStylePropertyAsync(
-      this.node,
-      context.styleProperty,
-      userInput,
-      WebInspector.updateStylesAndMetrics_);
-};
-
-
-/**
- * @override
- */
 WebInspector.PropertiesSidebarPane.prototype.update = function(object) {
   var body = this.bodyElement;
   body.removeChildren();
@@ -807,46 +715,6 @@ WebInspector.DebuggedObjectTreeElement.addResolvedChildren = function(
 
 
 /**
- * @override
- */
-WebInspector.StylePropertyTreeElement.prototype.toggleEnabled =
-    function(event) {
-  var enabled = event.target.checked;
-  devtools.tools.getDomAgent().toggleNodeStyleAsync(
-      this.style,
-      enabled,
-      this.name,
-      WebInspector.updateStylesAndMetrics_);
-};
-
-
-/**
- * @override
- */
-WebInspector.StylePropertyTreeElement.prototype.applyStyleText = function(
-    styleText, updateInterface) {
-  devtools.tools.getDomAgent().applyStyleTextAsync(this.style, this.name,
-      styleText,
-      function() {
-        if (updateInterface) {
-          WebInspector.updateStylesAndMetrics_();
-        }
-      });
-};
-
-
-/**
- * Forces update of styles and metrics sidebar panes.
- */
-WebInspector.updateStylesAndMetrics_ = function() {
-  WebInspector.panels.elements.sidebarPanes.metrics.needsUpdate = true;
-  WebInspector.panels.elements.updateMetrics();
-  WebInspector.panels.elements.sidebarPanes.styles.needsUpdate = true;
-  WebInspector.panels.elements.updateStyles(true);
-};
-
-
-/**
  * This function overrides standard searchableViews getters to perform search
  * only in the current view (other views are loaded asynchronously, no way to
  * search them yet).
@@ -1083,6 +951,13 @@ WebInspector.ConsoleView.prototype.addInspectedNode = function(node) {
 };
 
 
+// Stub until moved to async access in WebKit.
+WebInspector.StylePropertiesSection.prototype._doesSelectorAffectSelectedNode =
+    function() {
+  return true;
+};
+
+
 /* Hiding 'Heap' tab because it's not functional yet.
 (function() {
   var originalCreatePanels = WebInspector._createPanels;
diff --git a/webkit/glue/devtools/js/dom_agent.js b/webkit/glue/devtools/js/dom_agent.js
index f9304b7..27b9d2a 100644
--- a/webkit/glue/devtools/js/dom_agent.js
+++ b/webkit/glue/devtools/js/dom_agent.js
@@ -56,17 +56,11 @@ devtools.DomNode = function(doc, payload) {
   this.firstChild = null;
   this.parentNode = 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_ = [];
 };
 
 
@@ -254,86 +248,6 @@ devtools.DomNode.prototype.removeAttribute = function(name) {
 
 
 /**
- * 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) {
-  this.computedStyle_ = this.makeStyle_(computedStyle);
-  this.style = this.makeStyle_(inlineStyle);
-
-  for (var name in styleAttributes) {
-    if (this.attributesMap_[name]) {
-      this.attributesMap_[name].style =
-          this.makeStyle_(styleAttributes[name]);
-    }
-  }
-
-  this.matchedCSSRules_ = [];
-  for (var i = 0; i < matchedCSSRules.length; i++) {
-    var descr = matchedCSSRules[i];
-
-    var rule = {};
-    rule.selectorText = descr['selector'];
-    rule.style = this.makeStyle_(descr['style']);
-
-    if (descr['parentStyleSheet']) {
-      var parentStyleMock = {};
-      parentStyleMock.href = descr['parentStyleSheet']['href'];
-      var nodeName = descr['parentStyleSheet']['ownerNodeName'];
-      if (nodeName) {
-        parentStyleMock.ownerNode = {
-          'nodeName': nodeName
-        };
-      }
-      rule.parentStyleSheet = parentStyleMock;
-    }
-    this.matchedCSSRules_.push(rule);
-  }
-};
-
-
-/**
- * Creates a style declaration.
- * @param {payload} payload
- * @return {devtools.CSSStyleDeclaration:undefined}
- * @see devtools.CSSStyleDeclaration
- */
-devtools.DomNode.prototype.makeStyle_ = function(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.
- */
-devtools.DomNode.prototype.clearStyles = function() {
-  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.
@@ -444,30 +358,6 @@ devtools.DomWindow.prototype.Object = function() {
 
 
 /**
- * Simulates the DOM interface for styles.
- * @param {devtools.DomNode} node
- * @return {CSSStyleDescription}
- */
-devtools.DomWindow.prototype.getComputedStyle = function(node) {
-  return node.computedStyle_;
-};
-
-
-/**
- * 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.matchedCSSRules_;
-};
-
-
-/**
  * Creates DomAgent Js representation.
  * @constructor
  */
@@ -859,71 +749,6 @@ devtools.DomAgent.prototype.getNodePrototypesAsync = function(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 = this.utilityFunctionCallbackWrapper_(callback);
-  RemoteToolsAgent.ExecuteUtilityFunction(callbackId,
-      'getStyles',
-      JSON.stringify([node.id_, 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 callbackId = this.utilityFunctionCallbackWrapper_(callback);
-  RemoteToolsAgent.ExecuteUtilityFunction(callbackId,
-      'toggleNodeStyle',
-      JSON.stringify([style.nodeId_, style.id_, enabled, name]));
-};
-
-
-/**
- * Applies new text to a style.
- * @param {devtools.CSSStyleDeclaration} style Style to edit.
- * @param {string} name Property name to edit.
- * @param {string} styleText Text to set the style from.
- * @param {Function} callback.
- */
-devtools.DomAgent.prototype.applyStyleTextAsync = function(
-    style, name, styleText, callback) {
-  var callbackId = this.utilityFunctionCallbackWrapper_(callback);
-  RemoteToolsAgent.ExecuteUtilityFunction(
-      callbackId,
-      'applyStyleText',
-      JSON.stringify([style.nodeId_, style.id_, name, styleText]));
-};
-
-
-/**
- * Sets style property with given name to a value.
- * @param {devtools.DomNode} node Node to edit style for.
- * @param {string} name Property name to edit.
- * @param {string} value New value.
- * @param {Function} callback.
- */
-devtools.DomAgent.prototype.setStylePropertyAsync = function(
-    node, name, value, callback) {
-  var callbackId = this.utilityFunctionCallbackWrapper_(callback);
-  RemoteToolsAgent.ExecuteUtilityFunction(
-      callbackId,
-      'setStyleProperty',
-      JSON.stringify([node.id_, name, value]));
-};
-
-
-/**
  * Dumps exception if something went wrong in ExecuteUtilityFunction.
  * @param {Function} callback Callback to wrap.
  * @return {number} Callback id.
@@ -932,7 +757,7 @@ devtools.DomAgent.prototype.utilityFunctionCallbackWrapper_ =
     function(callback) {
   var mycallback = function(result, exception) {
     if (exception && exception.length) {
-      debugPrint('Exception in ExecuteUtilityFunction styles:' + exception);
+      debugPrint('Exception in ExecuteUtilityFunction:' + exception);
       return;
     }
     callback(result);
@@ -941,76 +766,6 @@ devtools.DomAgent.prototype.utilityFunctionCallbackWrapper_ =
 };
 
 
-/**
- * Represents remote CSSStyleDeclaration for using in StyleSidebarPane.
- * @param {id, Array<Object>} payload built by inject's getStyle from the
- *     injected js.
- * @constructor
- */
-devtools.CSSStyleDeclaration = function(payload) {
-  this.id_ = payload[0];
-  this.width = payload[1];
-  this.height = payload[2];
-  this.__disabledProperties = payload[3];
-  this.__disabledPropertyValues = payload[4];
-  this.__disabledPropertyPriorities = payload[5];
-
-  this.length = payload.length - 6;
-  this.priority_ = {};
-  this.implicit_ = {};
-  this.shorthand_ = {};
-  this.value_ = {};
-
-  for (var i = 6; 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 - 6] = name;
-  }
-};
-
-
-/**
- * @param {string} name of a CSS property.
- * @return {string}
- */
-devtools.CSSStyleDeclaration.prototype.getPropertyValue = function(name) {
-  return this.value_[name] || '';
-};
-
-
-/**
- * @param {string} name of a CSS property.
- * @return {string} 'important' | ''.
- */
-devtools.CSSStyleDeclaration.prototype.getPropertyPriority = function(name) {
-  return this.priority_[name] || '';
-};
-
-
-/**
- * @param {string} name of a CSS property.
- * @return {string} shorthand name  or ''
- */
-devtools.CSSStyleDeclaration.prototype.getPropertyShorthand = function(name) {
-  return this.shorthand_[name] || '';
-};
-
-
-/**
- * @param {string} name of a CSS property.
- * @return {boolean}
- */
-devtools.CSSStyleDeclaration.prototype.isPropertyImplicit = function(name) {
-  return !!this.implicit_[name];
-};
-
-
 function firstChildSkippingWhitespace() {
   return this.firstChild;
 }
diff --git a/webkit/glue/devtools/js/inject.js b/webkit/glue/devtools/js/inject.js
index 7b71349..f83f019 100644
--- a/webkit/glue/devtools/js/inject.js
+++ b/webkit/glue/devtools/js/inject.js
@@ -15,21 +15,6 @@ goog.provide('devtools.Injected');
  */
 devtools.Injected = function() {
   /**
-   * Unique style id generator.
-   * @type {number}
-   * @private
-   */
-  this.lastStyleId_ = 1;
-
-  /**
-   * This array is not unused as it may seem. It stores references to the
-   * styles so that they could be found for future editing.
-   * @type {Array<CSSStyleDeclaration>}
-   * @private
-   */
-  this.styles_ = [];
-
-  /**
    * This cache contains mapping from object it to an object instance for
    * all results of the evaluation / console logs.
    */
@@ -168,361 +153,6 @@ devtools.Injected.prototype.getClassName_ = function(value) {
 
 
 /**
- * Returns style information that is used in devtools.js.
- * @param {number} nodeId Id of 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(nodeId, authorOnly) {
-  var node = DevToolsAgentHost.getNodeForId(nodeId);
-  if (!node) {
-    return {};
-  }
-
-  if (node.nodeType != Node.ELEMENT_NODE) {
-    return {};
-  }
-  var matchedRules = window.getMatchedCSSRules(node, '', false);
-  var matchedCSSRulesObj = [];
-  for (var i = 0; matchedRules && i < matchedRules.length; ++i) {
-    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 (parentStyleSheet) {
-      ruleValue['parentStyleSheet'] = {
-        'href' : parentStyleSheet.href,
-        'ownerNodeName' : parentStyleSheet.ownerNode ?
-            parentStyleSheet.ownerNode.nodeName : null
-      };
-    }
-    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, true);
-    }
-  }
-  var result = {
-    'inlineStyle' : this.serializeStyle_(node.style, true),
-    'computedStyle' : this.serializeStyle_(
-        window.getComputedStyle(node, '')),
-    'matchedCSSRules' : matchedCSSRulesObj,
-    'styleAttributes' : attributeStyles
-  };
-  return result;
-};
-
-
-/**
- * Returns style decoration object for given id.
- * @param {Node} node Node to get prorotypes for.
- * @param {number} id Style id.
- * @return {Object} Style object.
- * @private
- */
-devtools.Injected.prototype.getStyleForId_ = function(node, id) {
-  var matchedRules = window.getMatchedCSSRules(node, '', false);
-  for (var i = 0; matchedRules && i < matchedRules.length; ++i) {
-    var rule = matchedRules[i];
-    if (rule.style.__id == id) {
-      return rule.style;
-    }
-  }
-  var attributes = node.attributes;
-  for (var i = 0; attributes && i < attributes.length; ++i) {
-    if (attributes[i].style && attributes[i].style.__id == id) {
-      return attributes[i].style;
-    }
-  }
-  if (node.style.__id == id) {
-    return node.style;
-  }
-  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, opt_bind) {
-  if (!style) {
-    return [];
-  }
-  var id = style.__id;
-  if (opt_bind && !id) {
-    id = style.__id = this.lastStyleId_++;
-    this.styles_.push(style);
-  }
-  var result = [
-    id,
-    style.width,
-    style.height,
-    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),
-      style.getPropertyShorthand(name),
-      style.getPropertyValue(name)
-    ]);
-  }
-  return result;
-};
-
-
-/**
- * Toggles style with given id on/off.
- * @param {number} nodeId Id of node to get prorotypes for.
- * @param {number} styleId Id of style to toggle.
- * @param {boolean} enabled Determines value to toggle to,
- * @param {string} name Name of the property.
- */
-devtools.Injected.prototype.toggleNodeStyle = function(nodeId, styleId,
-    enabled, name) {
-  var node = DevToolsAgentHost.getNodeForId(nodeId);
-  if (!node) {
-    return false;
-  }
-
-  var style = this.getStyleForId_(node, styleId);
-  if (!style) {
-    return false;
-  }
-
-  if (!enabled) {
-    if (!style.__disabledPropertyValues ||
-        !style.__disabledPropertyPriorities) {
-      style.__disabledProperties = {};
-      style.__disabledPropertyValues = {};
-      style.__disabledPropertyPriorities = {};
-    }
-
-    style.__disabledPropertyValues[name] = style.getPropertyValue(name);
-    style.__disabledPropertyPriorities[name] = style.getPropertyPriority(name);
-
-    if (style.getPropertyShorthand(name)) {
-      var longhandProperties = this.getLonghandProperties_(style, name);
-      for (var i = 0; i < longhandProperties.length; ++i) {
-        style.__disabledProperties[longhandProperties[i]] = true;
-        style.removeProperty(longhandProperties[i]);
-      }
-    } else {
-      style.__disabledProperties[name] = true;
-      style.removeProperty(name);
-    }
-  } else if (style.__disabledProperties &&
-      style.__disabledProperties[name]) {
-    var value = style.__disabledPropertyValues[name];
-    var priority = style.__disabledPropertyPriorities[name];
-    style.setProperty(name, value, priority);
-
-    delete style.__disabledProperties[name];
-    delete style.__disabledPropertyValues[name];
-    delete style.__disabledPropertyPriorities[name];
-  }
-  return true;
-};
-
-
-/**
- * Applies given text to a style.
- * @param {number} nodeId Id of 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(nodeId, styleId,
-    name, styleText) {
-  var node = DevToolsAgentHost.getNodeForId(nodeId);
-  if (!node) {
-    return false;
-  }
-
-  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;
-};
-
-
-/**
- * Sets style property with given name to a value.
- * @param {number} nodeId Id of node to get prorotypes for.
- * @param {string} name Style element name.
- * @param {string} value Value.
- * @return {boolean} True iff style has been edited successfully.
- */
-devtools.Injected.prototype.setStyleProperty = function(nodeId,
-    name, value) {
-  var node = DevToolsAgentHost.getNodeForId(nodeId);
-  if (!node) {
-    return false;
-  }
-
-  node.style.setProperty(name, value, "");
-  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) {
@@ -531,25 +161,6 @@ devtools.Injected.prototype.trimWhitespace_ = function(str) {
 
 
 /**
- * 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;
-};
-
-
-/**
  * Caches console object for subsequent calls to getConsoleObjectProperties.
  * @param {Object} obj Object to cache.
  * @return {Object} console object wrapper.
@@ -596,3 +207,139 @@ devtools.Injected.prototype.InspectorController = function(method, var_args) {
   var args = Array.prototype.slice.call(arguments, 1);
   return InspectorController[method].apply(InspectorController, args);
 };
+
+
+/**
+ * Dispatches given method with given args on the InjectedScript.
+ * @param {string} method Method name.
+ */
+devtools.Injected.prototype.InjectedScript = function(method, var_args) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  var result = InjectedScript[method].apply(InjectedScript, args);
+  return result;
+};
+
+
+// Plugging into upstreamed support.
+InjectedScript._window = function() {
+  return contentWindow;
+};
+
+
+InjectedScript._nodeForId = function(nodeId) {
+  return DevToolsAgentHost.getNodeForId(nodeId);
+};
+
+
+// Following methods are here temporarily, until they are refactored into
+// InjectedScript.js in WebKit.
+function getStyleTextWithShorthands(style)
+{
+    var cssText = "";
+    var foundProperties = {};
+    for (var i = 0; i < style.length; ++i) {
+        var individualProperty = style[i];
+        var shorthandProperty = style.getPropertyShorthand(individualProperty);
+        var propertyName = (shorthandProperty || individualProperty);
+
+        if (propertyName in foundProperties)
+            continue;
+
+        if (shorthandProperty) {
+            var value = getShorthandValue(style, shorthandProperty);
+            var priority = getShorthandPriority(style, shorthandProperty);
+        } else {
+            var value = style.getPropertyValue(individualProperty);
+            var priority = style.getPropertyPriority(individualProperty);
+        }
+
+        foundProperties[propertyName] = true;
+
+        cssText += propertyName + ": " + value;
+        if (priority)
+            cssText += " !" + priority;
+        cssText += "; ";
+    }
+
+    return cssText;
+}
+
+
+function getShorthandValue(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;
+}
+
+
+function getShorthandPriority(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;
+}
+
+
+function getLonghandProperties(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;
+}
+
+
+function getUniqueStyleProperties(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;
+}
diff --git a/webkit/glue/devtools/js/inspector_controller_impl.js b/webkit/glue/devtools/js/inspector_controller_impl.js
index 9c34b28..c9bbb5c 100644
--- a/webkit/glue/devtools/js/inspector_controller_impl.js
+++ b/webkit/glue/devtools/js/inspector_controller_impl.js
@@ -245,4 +245,101 @@ devtools.InspectorControllerImpl.prototype.stopProfiling = function() {
 };
 
 
+devtools.InspectorControllerImpl.prototype.storeLastActivePanel =
+    function(panel) {
+  RemoteToolsAgent.ExecuteUtilityFunction(
+      devtools.Callback.wrap(undefined),
+      'InspectorController', JSON.stringify(['storeLastActivePanel', panel]));
+};
+
+
+// Temporary methods that will be dispatched via InspectorController into the
+// injected context.
+devtools.InspectorControllerImpl.prototype.getStyles =
+    function(node, authorOnly, callback) {
+  var mycallback = function(result) {
+    callback(result);
+  }
+  RemoteToolsAgent.ExecuteUtilityFunction(
+      devtools.InspectorControllerImpl.parseWrap_(mycallback),
+      'InjectedScript', JSON.stringify(['getStyles', node.id_, authorOnly]));
+};
+
+
+devtools.InspectorControllerImpl.prototype.getComputedStyle =
+    function(node, callback) {
+  RemoteToolsAgent.ExecuteUtilityFunction(
+      devtools.InspectorControllerImpl.parseWrap_(callback),
+      'InjectedScript', JSON.stringify(['getComputedStyle', node.id_]));
+};
+
+
+devtools.InspectorControllerImpl.prototype.getInlineStyle =
+    function(node, callback) {
+  RemoteToolsAgent.ExecuteUtilityFunction(
+      devtools.InspectorControllerImpl.parseWrap_(callback),
+      'InjectedScript', JSON.stringify(['getInlineStyle', node.id_]));
+};
+
+
+devtools.InspectorControllerImpl.prototype.applyStyleText =
+    function(styleId, styleText, propertyName, callback) {
+  RemoteToolsAgent.ExecuteUtilityFunction(
+      devtools.InspectorControllerImpl.parseWrap_(callback),
+      'InjectedScript', JSON.stringify(['applyStyleText', styleId, styleText,
+                                           propertyName]));
+};
+
+
+devtools.InspectorControllerImpl.prototype.setStyleText =
+    function(style, cssText, callback) {
+  RemoteToolsAgent.ExecuteUtilityFunction(
+      devtools.InspectorControllerImpl.parseWrap_(callback),
+      'InjectedScript', JSON.stringify(['setStyleText', style, cssText]));
+};
+
+
+devtools.InspectorControllerImpl.prototype.toggleStyleEnabled =
+    function(styleId, propertyName, disabled, callback) {
+  RemoteToolsAgent.ExecuteUtilityFunction(
+      devtools.InspectorControllerImpl.parseWrap_(callback),
+      'InjectedScript', JSON.stringify(['toggleStyleEnabled', styleId,
+                                            propertyName, disabled]));
+};
+
+
+devtools.InspectorControllerImpl.prototype.applyStyleRuleText =
+    function(ruleId, newContent, selectedNode, callback) {
+  RemoteToolsAgent.ExecuteUtilityFunction(
+      devtools.InspectorControllerImpl.parseWrap_(callback),
+      'InjectedScript', JSON.stringify(['applyStyleRuleText', ruleId,
+                                           newContent, selectedNode]));
+};
+
+
+devtools.InspectorControllerImpl.prototype.addStyleSelector =
+    function(newContent, callback) {
+  RemoteToolsAgent.ExecuteUtilityFunction(
+      devtools.InspectorControllerImpl.parseWrap_(callback),
+      'InjectedScript', JSON.stringify(['addStyleSelector', newContent]));
+};
+
+
+devtools.InspectorControllerImpl.prototype.setStyleProperty =
+    function(styleId, name, value, callback) {
+  RemoteToolsAgent.ExecuteUtilityFunction(
+      devtools.InspectorControllerImpl.parseWrap_(callback),
+      'InjectedScript', JSON.stringify(['setStyleProperty', styleId, name,
+                                           value]));
+};
+
+
+devtools.InspectorControllerImpl.parseWrap_ = function(callback) {
+  return devtools.Callback.wrap(
+      function(data) {
+        callback.call(this, JSON.parse(data));
+      });
+};
+
+
 var InspectorController = new devtools.InspectorControllerImpl();