DevTools: Add Metrics sidebar support.

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

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

4 files changed, 125 insertions, 24 deletions

diff --git a/webkit/glue/devtools/js/devtools.js b/webkit/glue/devtools/js/devtools.js
index 430b9e0..107a8ea 100644
--- a/webkit/glue/devtools/js/devtools.js
+++ b/webkit/glue/devtools/js/devtools.js
@@ -270,9 +270,39 @@ WebInspector.Console.prototype._evalInInspectedWindow = function(expr) {
  */
 WebInspector.ElementsPanel.prototype.updateStyles = function(forceUpdate) {
   var stylesSidebarPane = this.sidebarPanes.styles;
-  if (!stylesSidebarPane.expanded || !stylesSidebarPane.needsUpdate)
+  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;
@@ -285,8 +315,7 @@ WebInspector.ElementsPanel.prototype.updateStyles = function(forceUpdate) {
       }
       node.setStyles(styles.computedStyle, styles.inlineStyle,
           styles.styleAttributes, styles.matchedCSSRules);
-      stylesSidebarPane.update(node, null, forceUpdate);
-      stylesSidebarPane.needsUpdate = false;
+      updateUI(node);
       node.clearStyles();
     };
     devtools.tools.getDomAgent().getNodeStylesAsync(
@@ -294,9 +323,37 @@ WebInspector.ElementsPanel.prototype.updateStyles = function(forceUpdate) {
         !Preferences.showUserAgentStyles,
         callback);
   } else {
-    stylesSidebarPane.update(null, null, forceUpdate);
-    stylesSidebarPane.needsUpdate = false;
+    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_);
 };
 
 
@@ -569,10 +626,7 @@ WebInspector.StylePropertyTreeElement.prototype.toggleEnabled =
       this.style,
       enabled,
       this.name,
-      function() {
-        WebInspector.panels.elements.sidebarPanes.styles.needsUpdate = true;
-        WebInspector.panels.elements.updateStyles(true);
-      });
+      WebInspector.updateStylesAndMetrics_);
 };
 
 
@@ -585,14 +639,24 @@ WebInspector.StylePropertyTreeElement.prototype.applyStyleText = function(
       styleText,
       function() {
         if (updateInterface) {
-          WebInspector.panels.elements.sidebarPanes.styles.needsUpdate = true;
-          WebInspector.panels.elements.updateStyles(true);
+          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).
diff --git a/webkit/glue/devtools/js/devtools_host_stub.js b/webkit/glue/devtools/js/devtools_host_stub.js
index 33b8535..d91ed1b 100644
--- a/webkit/glue/devtools/js/devtools_host_stub.js
+++ b/webkit/glue/devtools/js/devtools_host_stub.js
@@ -172,22 +172,23 @@ RemoteToolsAgentStub.prototype.ExecuteUtilityFunction = function(callId,
       result = ['Proto1', 'Proto2', 'Proto3'];
     } else if (functionName == 'getStyles') {
       result = {
-        'computedStyle' : [0, null, null, null, ['display', false, false, '', 'none']],
-        'inlineStyle' : [1, null, null, null, ['display', false, false, '', 'none']],
+        'computedStyle' : [0, '0px', '0px', null, null, null, ['display', false, false, '', 'none']],
+        'inlineStyle' : [1, '0px', '0px', null, null, null, ['display', false, false, '', 'none']],
         'styleAttributes' : {
-           attr: [2, null, null, null, ['display', false, false, '', 'none']]
+           attr: [2, '0px', '0px', null, null, null, ['display', false, false, '', 'none']]
         },
         'matchedCSSRules' : [
           { 'selector' : 'S',
-            'style' : [3, null, null, null, ['display', false, false, '', 'none']],
+            'style' : [3, '0px', '0px', null, null, null, ['display', false, false, '', 'none']],
             'parentStyleSheet' : { 'href' : 'http://localhost',
                                    'ownerNodeName' : 'DIV' }
           }
         ]
       };
     } else if (functionName == 'toggleNodeStyle' ||
-        functionName == 'applyStyleText') {
-      alert(functionName + '(' + args + ')');
+        functionName == 'applyStyleText' ||
+        functionName == 'setStyleProperty') {
+      alert(functionName + '(' + nodeId + ', ' + args + ')');
     } 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 5f50fa1..09ea809 100644
--- a/webkit/glue/devtools/js/dom_agent.js
+++ b/webkit/glue/devtools/js/dom_agent.js
@@ -901,6 +901,24 @@ devtools.DomAgent.prototype.applyStyleTextAsync = function(
 
 
 /**
+ * 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',
+      node.id_,
+      goog.json.serialize([name, value]));
+};
+
+
+/**
  * Dumps exception if something went wrong in ExecuteUtilityFunction.
  * @param {Function} callback Callback to wrap.
  * @return {number} Callback id.
@@ -926,17 +944,19 @@ devtools.DomAgent.prototype.utilityFunctionCallbackWrapper_ =
  */
 devtools.CSSStyleDeclaration = function(payload) {
   this.id_ = payload[0];
-  this.__disabledProperties = payload[1];
-  this.__disabledPropertyValues = payload[2];
-  this.__disabledPropertyPriorities = payload[3];
+  this.width = payload[1];
+  this.height = payload[2];
+  this.__disabledProperties = payload[3];
+  this.__disabledPropertyValues = payload[4];
+  this.__disabledPropertyPriorities = payload[5];
 
-  this.length = payload.length - 4;
+  this.length = payload.length - 6;
   this.priority_ = {};
   this.implicit_ = {};
   this.shorthand_ = {};
   this.value_ = {};
 
-  for (var i = 4; i < payload.length; ++i) {
+  for (var i = 6; i < payload.length; ++i) {
     var p = payload[i];
     var name = p[0];
 
@@ -945,7 +965,7 @@ devtools.CSSStyleDeclaration = function(payload) {
     this.shorthand_[name] = p[3];
     this.value_[name] = p[4];
 
-    this[i - 4] = name;
+    this[i - 6] = name;
   }
 };
 
diff --git a/webkit/glue/devtools/js/inject.js b/webkit/glue/devtools/js/inject.js
index a6d7d0b..83c94d5 100644
--- a/webkit/glue/devtools/js/inject.js
+++ b/webkit/glue/devtools/js/inject.js
@@ -203,6 +203,8 @@ devtools.Injected.prototype.serializeStyle_ = function(style, opt_bind) {
   }
   var result = [
     id,
+    style.width,
+    style.height,
     style.__disabledProperties,
     style.__disabledPropertyValues,
     style.__disabledPropertyPriorities
@@ -339,6 +341,20 @@ devtools.Injected.prototype.applyStyleText = function(node, styleId,
 
 
 /**
+ * Sets style property with given name to a value.
+ * @param {Node} node 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(node,
+    name, value) {
+  node.style.setProperty(name, value, "");
+  return true;
+};
+
+
+/**
  * Taken from utilities.js as is for injected evaluation.
  */
 devtools.Injected.prototype.getLonghandProperties_ = function(style,