Changeset 35876 in webkit

Timestamp:

Aug 21, 2008 1:12:47 PM (16 years ago)

Author:

timothy@apple.com

Message:

Make the Inspector's Metrics sidebar pane editable.

​https://bugs.webkit.org/show_bug.cgi?id=17218
rdar://problem/5732818

Reviewed by Kevin McCullough.

• page/inspector/ElementsPanel.js: (WebInspector.ElementsPanel): Add an event listener for the "metrics edited" event, so the Styles pane is updated.
• page/inspector/MetricsSidebarPane.js: (WebInspector.MetricsSidebarPane.prototype.update): Remember the node so future updates work. Add a double click event listener for the metric values to start editing. (WebInspector.MetricsSidebarPane.prototype.startEditing): Call WebInspector.startEditing with some context. (WebInspector.MetricsSidebarPane.prototype.editingCancelled): (WebInspector.MetricsSidebarPane.prototype.editingCommitted): Set the user input on the elements inline style. Fire the "metrics edited" event.

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• page/inspector/ElementsPanel.js (modified) (2 diffs)
• page/inspector/MetricsSidebarPane.js (modified) (6 diffs)
• page/inspector/inspector.css (modified) (7 diffs)

trunk/WebCore/ChangeLog

@@ +1 @@
+2008-08-21  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Inspector's Metrics sidebar pane editable.
+
+        https://bugs.webkit.org/show_bug.cgi?id=17218
+        rdar://problem/5732818
+
+        Reviewed by Kevin McCullough.
+
+        * page/inspector/ElementsPanel.js:
+        (WebInspector.ElementsPanel): Add an event listener for
+        the "metrics edited" event, so the Styles pane is updated.
+        * page/inspector/MetricsSidebarPane.js:
+        (WebInspector.MetricsSidebarPane.prototype.update): Remember the node
+        so future updates work. Add a double click event listener for the
+        metric values to start editing.
+        (WebInspector.MetricsSidebarPane.prototype.startEditing):
+        Call WebInspector.startEditing with some context.
+        (WebInspector.MetricsSidebarPane.prototype.editingCancelled):
+        (WebInspector.MetricsSidebarPane.prototype.editingCommitted):
+        Set the user input on the elements inline style. Fire the
+        "metrics edited" event.
+
 2008-08-21  Steve Falkenburg  <sfalken@apple.com>
 

trunk/WebCore/page/inspector/ElementsPanel.js

@@ -62 +62 @@
     this.sidebarPanes.styles.expanded = true;
 
+    this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this);
+
     this.sidebarElement = document.createElement("div");
     this.sidebarElement.id = "elements-sidebar";
@@ -410 +412 @@
         else
             InspectorController.hideDOMNodeHighlight();
+    },
+
+    _metricsPaneEdited: function()
+    {
+        this.sidebarPanes.styles.needsUpdate = true;
+        this.updateStyles(true);
     },
 

trunk/WebCore/page/inspector/MetricsSidebarPane.js

@@ -39 +39 @@
         body.removeChildren();
 
-        if (!node)
+        if (node)
+            this.node = node;
+        else
+            node = this.node;
+
+        if (!node || !node.ownerDocument.defaultView)
             return;
 
@@ -53 +58 @@
         function createBoxPartElement(style, name, side, suffix)
         {
-            var value = style.getPropertyValue((name !== "position" ? name + "-" : "") + side + suffix);
+            var propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
+            var value = style.getPropertyValue(propertyName);
             if (value === "" || (name !== "position" && value === "0px"))
                 value = "\u2012";
@@ -63 +69 @@
             element.className = side;
             element.textContent = value;
+            element.addEventListener("dblclick", this.startEditing.bind(this, element, name, propertyName), false);
             return element;
         }
@@ -110 +117 @@
             if (name === "content") {
                 var width = style.width.replace(/px$/, "");
+                var widthElement = document.createElement("span");
+                widthElement.textContent = width;
+                widthElement.addEventListener("dblclick", this.startEditing.bind(this, widthElement, "width", "width"), false);
+
                 var height = style.height.replace(/px$/, "");
-                boxElement.textContent = width + " \u00D7 " + height;
+                var heightElement = document.createElement("span");
+                heightElement.textContent = height;
+                heightElement.addEventListener("dblclick", this.startEditing.bind(this, heightElement, "height", "height"), false);
+
+                boxElement.appendChild(widthElement);
+                boxElement.appendChild(document.createTextNode(" \u00D7 "));
+                boxElement.appendChild(heightElement);
             } else {
                 var suffix = (name === "border" ? "-width" : "");
@@ -120 +137 @@
                 boxElement.appendChild(labelElement);
 
-                boxElement.appendChild(createBoxPartElement(style, name, "top", suffix));
-                boxElement.appendChild(createBoxPartElement(style, name, "left", suffix));
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "top", suffix));
+                boxElement.appendChild(document.createElement("br"));
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "left", suffix));
 
                 if (previousBox)
                     boxElement.appendChild(previousBox);
 
-                boxElement.appendChild(createBoxPartElement(style, name, "right", suffix));
-                boxElement.appendChild(createBoxPartElement(style, name, "bottom", suffix));
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "right", suffix));
+                boxElement.appendChild(document.createElement("br"));
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "bottom", suffix));
             }
 
@@ -135 +154 @@
         metricsElement.appendChild(previousBox);
         body.appendChild(metricsElement);
+    },
+
+    startEditing: function(targetElement, box, styleProperty)
+    {
+        if (WebInspector.isBeingEdited(targetElement))
+            return;
+
+        var context = { box: box, styleProperty: styleProperty };
+
+        WebInspector.startEditing(targetElement, this.editingCommitted.bind(this), this.editingCancelled.bind(this), context);
+    },
+
+    editingCancelled: function(element, context)
+    {
+        this.update();
+    },
+
+    editingCommitted: function(element, userInput, previousContent, context)
+    {
+        if (userInput === previousContent)
+            return this.editingCancelled(element, context); // nothing changed, so cancel
+
+        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";
+
+        this.node.style.setProperty(context.styleProperty, userInput, "");
+
+        this.dispatchEventToListeners("metrics edited");
+
+        this.update();
     }
 }

trunk/WebCore/page/inspector/inspector.css

@@ -1393 +1393 @@
     border: 1px rgb(66%, 66%, 66%) dotted;
     display: inline-block;
+    text-align: center;
     padding: 3px;
     margin: 3px;
@@ -1400 +1401 @@
     border: 1px dashed;
     display: inline-block;
+    text-align: center;
     vertical-align: middle;
     padding: 3px;
@@ -1408 +1410 @@
     border: 1px black solid;
     display: inline-block;
+    text-align: center;
     vertical-align: middle;
     padding: 3px;
@@ -1416 +1419 @@
     border: 1px grey dashed;
     display: inline-block;
+    text-align: center;
     vertical-align: middle;
     padding: 3px;
@@ -1425 +1429 @@
     border: 1px grey solid;
     display: inline-block;
+    text-align: center;
     vertical-align: middle;
     padding: 3px;
@@ -1433 +1438 @@
 }
 
+.metrics .content span {
+    display: inline-block;
+}
+
+.metrics .editing {
+    position: relative;
+    z-index: 100;
+}
+
 .metrics .left {
     display: inline-block;
-    text-align: center;
     vertical-align: middle;
 }
@@ -1441 +1454 @@
 .metrics .right {
     display: inline-block;
-    text-align: center;
     vertical-align: middle;
 }
 
 .metrics .top {
-    text-align: center;
+    display: inline-block;
 }
 
 .metrics .bottom {
-    text-align: center;
+    display: inline-block;
 }