Web Inspector: Eliminate console-formatted-* class names in favor of formatted-*
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Feb 2015 00:44:54 +0000 (00:44 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Feb 2015 00:44:54 +0000 (00:44 +0000)
https://bugs.webkit.org/show_bug.cgi?id=141948

Reviewed by Timothy Hatcher.

* UserInterface/Views/FormattedValue.js:
(WebInspector.FormattedValue.createElementForNode):
Helper for formatting a node as a DOMTreeOutline.

* UserInterface/Views/ConsoleMessageImpl.js:
(WebInspector.ConsoleMessageImpl.prototype._formatParameter):
(WebInspector.ConsoleMessageImpl.prototype._formatParameterAsString):
(WebInspector.ConsoleMessageImpl.prototype._formatParameterAsNode):
(WebInspector.ConsoleMessageImpl.prototype.appendUndefined):
(WebInspector.ConsoleMessageImpl.prototype._printArray):
(WebInspector.ConsoleMessageImpl.prototype.): Deleted.
* UserInterface/Views/LogContentView.css:
(.console-user-command-result):
(.console-formatted-object): Deleted.
(.console-object-preview): Deleted.
(.expanded .console-object-preview): Deleted.
(.console-object-preview .name): Deleted.
(.expanded .console-object-preview > .console-object-preview-body): Deleted.
(.console-object-preview > .console-object-preview-name.console-object-preview-name-Object): Deleted.
(.console-object-preview-body .console-object-preview-name.console-object-preview-name-Object): Deleted.
(.expanded .console-object-preview > .console-object-preview-name.console-object-preview-name-Object): Deleted.
(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap): Deleted.
(:matches(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap) .section): Deleted.

* UserInterface/Views/LogContentView.js:
(WebInspector.LogContentView.prototype._leftArrowWasPressed):
(WebInspector.LogContentView.prototype._rightArrowWasPressed):
Add FIXMEs since this will no longer work with ObjectTree.

* UserInterface/Views/ObjectPreviewView.css:
(.object-preview):
* UserInterface/Views/ObjectTreeView.css:
(.object-tree):
Copy over the font styles from console-formatted-object.

* UserInterface/Views/ObjectPropertiesSection.js:
(WebInspector.ObjectPropertyTreeElement.prototype.update):
* UserInterface/Views/SourceCodeTextEditor.js:
(WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction.didGetDetails):
(WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction):
(WebInspector.SourceCodeTextEditor.prototype._showPopoverForString):
(WebInspector.SourceCodeTextEditor.prototype._showPopoverForRegExp):
(WebInspector.SourceCodeTextEditor.prototype._showPopoverForNumber):
(WebInspector.SourceCodeTextEditor.prototype._showPopoverForBoolean):
(WebInspector.SourceCodeTextEditor.prototype._showPopoverForNull):
(WebInspector.SourceCodeTextEditor.prototype._showPopoverForUndefined):
Convert to formatted value class names.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@180597 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/ConsoleMessageImpl.js
Source/WebInspectorUI/UserInterface/Views/FormattedValue.js
Source/WebInspectorUI/UserInterface/Views/LogContentView.css
Source/WebInspectorUI/UserInterface/Views/LogContentView.js
Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css
Source/WebInspectorUI/UserInterface/Views/ObjectPropertiesSection.js
Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js

index 577b6c6..06b1833 100644 (file)
@@ -1,5 +1,60 @@
 2015-02-24  Joseph Pecoraro  <pecoraro@apple.com>
 
+        Web Inspector: Eliminate console-formatted-* class names in favor of formatted-*
+        https://bugs.webkit.org/show_bug.cgi?id=141948
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/FormattedValue.js:
+        (WebInspector.FormattedValue.createElementForNode):
+        Helper for formatting a node as a DOMTreeOutline.
+
+        * UserInterface/Views/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype._formatParameter):
+        (WebInspector.ConsoleMessageImpl.prototype._formatParameterAsString):
+        (WebInspector.ConsoleMessageImpl.prototype._formatParameterAsNode):
+        (WebInspector.ConsoleMessageImpl.prototype.appendUndefined):
+        (WebInspector.ConsoleMessageImpl.prototype._printArray):
+        (WebInspector.ConsoleMessageImpl.prototype.): Deleted.
+        * UserInterface/Views/LogContentView.css:
+        (.console-user-command-result):
+        (.console-formatted-object): Deleted.
+        (.console-object-preview): Deleted.
+        (.expanded .console-object-preview): Deleted.
+        (.console-object-preview .name): Deleted.
+        (.expanded .console-object-preview > .console-object-preview-body): Deleted.
+        (.console-object-preview > .console-object-preview-name.console-object-preview-name-Object): Deleted.
+        (.console-object-preview-body .console-object-preview-name.console-object-preview-name-Object): Deleted.
+        (.expanded .console-object-preview > .console-object-preview-name.console-object-preview-name-Object): Deleted.
+        (.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap): Deleted.
+        (:matches(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap) .section): Deleted.
+
+        * UserInterface/Views/LogContentView.js:
+        (WebInspector.LogContentView.prototype._leftArrowWasPressed):
+        (WebInspector.LogContentView.prototype._rightArrowWasPressed):
+        Add FIXMEs since this will no longer work with ObjectTree.
+
+        * UserInterface/Views/ObjectPreviewView.css:
+        (.object-preview):
+        * UserInterface/Views/ObjectTreeView.css:
+        (.object-tree):
+        Copy over the font styles from console-formatted-object.
+
+        * UserInterface/Views/ObjectPropertiesSection.js:
+        (WebInspector.ObjectPropertyTreeElement.prototype.update):
+        * UserInterface/Views/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction.didGetDetails):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForString):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForRegExp):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForNumber):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForBoolean):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForNull):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForUndefined):
+        Convert to formatted value class names.
+
+2015-02-24  Joseph Pecoraro  <pecoraro@apple.com>
+
         Web Inspector: Make Getter/Setter RemoteObject property and ObjectPreview handling consistent
         https://bugs.webkit.org/show_bug.cgi?id=141587
 
index 1e61fec..2f6175d 100644 (file)
@@ -281,7 +281,6 @@ WebInspector.ConsoleMessageImpl.prototype = {
             formatter = this._formatParameterAsValue;
 
         var span = document.createElement("span");
-        span.className = "console-formatted-" + type;
 
         if (this._isExpandable(output))
             span.classList.add("expandable");
@@ -304,29 +303,13 @@ WebInspector.ConsoleMessageImpl.prototype = {
     _formatParameterAsString: function(output, elem)
     {
         var span = WebInspector.FormattedValue.createLinkifiedElementString(output.description);
-        elem.classList.remove("console-formatted-string");
         elem.appendChild(span);
     },
 
     _formatParameterAsNode: function(object, elem)
     {
-        function printNode(nodeId)
-        {
-            if (!nodeId) {
-                // Sometimes DOM is loaded after the sync message is being formatted, so we get no
-                // nodeId here. So we fall back to object formatting here.
-                this._formatParameterAsObject(object, elem, true);
-                return;
-            }
-            var treeOutline = new WebInspector.DOMTreeOutline(false, false, true);
-            treeOutline.setVisible(true);
-            treeOutline.rootDOMNode = WebInspector.domTreeManager.nodeForId(nodeId);
-            treeOutline.element.classList.add("outline-disclosure");
-            if (!treeOutline.children[0].hasChildren)
-                treeOutline.element.classList.add("single-node");
-            elem.appendChild(treeOutline.element);
-        }
-        object.pushNodeToFrontend(printNode.bind(this));
+        var span = WebInspector.FormattedValue.createElementForNode(object);
+        elem.appendChild(span);
     },
 
     _formatParameterAsArray: function(arr, elem)
@@ -476,7 +459,7 @@ WebInspector.ConsoleMessageImpl.prototype = {
         {
             if (index - lastNonEmptyIndex <= 1)
                 return;
-            var span = elem.createChild("span", "console-formatted-undefined");
+            var span = elem.createChild("span", "formatted-undefined");
             span.textContent = WebInspector.UIString("undefined × %d").format(index - lastNonEmptyIndex - 1);
         }
 
index cce1da0..0b1cc9a 100644 (file)
@@ -28,12 +28,12 @@ WebInspector.FormattedValue = {};
 WebInspector.FormattedValue.classNameForTypes = function(type, subtype)
 {
     return "formatted-" + (subtype ? subtype : type);
-}
+};
 
 WebInspector.FormattedValue.classNameForObject = function(object)
 {
     return WebInspector.FormattedValue.classNameForTypes(object.type, object.subtype);
-}
+};
 
 WebInspector.FormattedValue.createLinkifiedElementString = function(string)
 {
@@ -43,7 +43,31 @@ WebInspector.FormattedValue.createLinkifiedElementString = function(string)
     span.appendChild(WebInspector.linkifyStringAsFragment(string.replace(/"/g, "\\\"")));
     span.appendChild(document.createTextNode("\""));
     return span;
-}
+};
+
+WebInspector.FormattedValue.createElementForNode = function(object)
+{
+    var span = document.createElement("span");
+    span.className = "formatted-node";
+
+    object.pushNodeToFrontend(function(nodeId) {
+        if (!nodeId) {
+            span.textContent = object.description;
+            return;
+        }
+
+        // FIXME: Extract the styles for a formatted-node outline-disclosure from the LogContentView.
+        var treeOutline = new WebInspector.DOMTreeOutline(false, false, true);
+        treeOutline.setVisible(true);
+        treeOutline.rootDOMNode = WebInspector.domTreeManager.nodeForId(nodeId);
+        treeOutline.element.classList.add("outline-disclosure");
+        if (!treeOutline.children[0].hasChildren)
+            treeOutline.element.classList.add("single-node");
+        span.appendChild(treeOutline.element);
+    });
+
+    return span;
+};
 
 WebInspector.FormattedValue.createElementForTypesAndValue = function(type, subtype, displayString, isPreview, hadException)
 {
@@ -71,19 +95,19 @@ WebInspector.FormattedValue.createElementForTypesAndValue = function(type, subty
     // Everything else, the description/value string.
     span.textContent = displayString;
     return span;
-}
+};
 
 WebInspector.FormattedValue.createElementForRemoteObject = function(object, hadException)
 {
     return WebInspector.FormattedValue.createElementForTypesAndValue(object.type, object.subtype, object.description, false, hadException);
-}
+};
 
 WebInspector.FormattedValue.createElementForObjectPreview = function(objectPreview)
 {
     return WebInspector.FormattedValue.createElementForTypesAndValue(objectPreview.type, objectPreview.subtype, objectPreview.description, true, false);
-}
+};
 
 WebInspector.FormattedValue.createElementForPropertyPreview = function(propertyPreview)
 {
     return WebInspector.FormattedValue.createElementForTypesAndValue(propertyPreview.type, propertyPreview.subtype, propertyPreview.value, true, false);
-}
+};
index a136206..3731440 100644 (file)
@@ -41,8 +41,7 @@
 }
 
 .console-user-command,
-.console-user-command-result,
-.console-formatted-object {
+.console-user-command-result {
     font-family: Menlo, monospace;
     font-size: 11px;
 }
     display: none;
 }
 
-.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap {
-    position: relative;
-    display: inline-block;
-    vertical-align: baseline;
-    color: black;
-}
-
-:matches(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap) .section {
-    position: static;
-}
-
-:matches(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap) .properties {
-    padding-left: 0 !important;
-}
-
-.console-formatted-number {
-    color: rgb(28, 0, 207);
-}
-
-.console-formatted-string, .console-formatted-regexp {
-    white-space: pre;
-}
-
-.console-formatted-string {
-    color: rgb(196, 26, 22);
-}
-
-.console-formatted-regexp {
-    color: rgb(255, 88, 0);
-}
-
-.console-formatted-symbol {
-    color: rgb(63, 169, 156);
-}
-
-.console-formatted-null, .console-formatted-undefined {
-    color: rgb(128, 128, 128);
-}
-
 .error-message {
     color: red;
 }
index 2726a7e..0b651dd 100644 (file)
@@ -784,6 +784,7 @@ WebInspector.LogContentView.prototype = {
                 else
                     outlineTitle.treeElement.collapse();
             } else {
+                // FIXME: <https://webkit.org/b/141949> Web Inspector: Right/Left arrow no longer works in console to expand/collapse ObjectTrees
                 var outlineSection = currentMessage.querySelector(".console-formatted-object > .section");
                 if (outlineSection)
                     outlineSection._section.collapse();
@@ -815,6 +816,7 @@ WebInspector.LogContentView.prototype = {
                 else
                     outlineTitle.treeElement.expand();
             } else {
+                // FIXME: <https://webkit.org/b/141949> Web Inspector: Right/Left arrow no longer works in console to expand/collapse ObjectTrees
                 var outlineSection = currentMessage.querySelector(".console-formatted-object > .section");
                 if (outlineSection) {
                     outlineSection._section.addEventListener(WebInspector.Section.Event.VisibleContentDidChange, this._propertiesSectionDidUpdateContent, this);
index 8631852..d492df2 100644 (file)
@@ -25,6 +25,8 @@
 
 .object-preview {
     font-style: italic;
+    font-family: Menlo, monospace;
+    font-size: 11px;
 }
 
 .object-preview.lossless {
index 33775ac..284ae42 100644 (file)
@@ -221,9 +221,9 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
         if (this.property.wasThrown)
             this.valueElement.classList.add("error");
         if (this.property.value.subtype)
-            this.valueElement.classList.add("console-formatted-" + this.property.value.subtype);
+            this.valueElement.classList.add("formatted-" + this.property.value.subtype);
         else if (this.property.value.type)
-            this.valueElement.classList.add("console-formatted-" + this.property.value.type);
+            this.valueElement.classList.add("formatted-" + this.property.value.type);
         if (this.property.value.subtype === "node")
             this.valueElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
 
index 898bc1b..725eff3 100644 (file)
@@ -25,6 +25,9 @@
 
 .object-tree {
     position: relative;
+
+    font-family: Menlo, monospace;
+    font-size: 11px;
 }
 
 .object-tree > :matches(.title, .object-preview)::before {
@@ -67,7 +70,6 @@
 
 .object-tree.expanded > .object-tree-outline {
     display: block;
-    padding-left: 16px;
 }
 
 .object-tree-outline {
     font-family: sans-serif;
     font-size: 12px;
 }
-
-/* Console Overrides */
-
-:matches(.formatted-object, .formatted-node, .formatted-error, .formatted-map, .formatted-set, .formatted-weakmap) .object-tree-outline,
-:matches(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap) .object-tree-outline {
-    padding-left: 6px !important;
-}
index f480423..7ced00c 100644 (file)
@@ -1352,7 +1352,7 @@ WebInspector.SourceCodeTextEditor.prototype = {
                 return;
 
             var wrapper = document.createElement("div");
-            wrapper.className = "body console-formatted-function";
+            wrapper.className = "body formatted-function";
             wrapper.textContent = data.description;
 
             var content = document.createElement("div");
@@ -1395,7 +1395,7 @@ WebInspector.SourceCodeTextEditor.prototype = {
     _showPopoverForString: function(data)
     {
         var content = document.createElement("div");
-        content.className = "string console-formatted-string";
+        content.className = "string formatted-string";
         content.textContent = "\"" + data.description + "\"";
 
         this._showPopover(content);
@@ -1404,7 +1404,7 @@ WebInspector.SourceCodeTextEditor.prototype = {
     _showPopoverForRegExp: function(data)
     {
         var content = document.createElement("div");
-        content.className = "regexp console-formatted-regexp";
+        content.className = "regexp formatted-regexp";
         content.textContent = data.description;
 
         this._showPopover(content);
@@ -1413,7 +1413,7 @@ WebInspector.SourceCodeTextEditor.prototype = {
     _showPopoverForNumber: function(data)
     {
         var content = document.createElement("span");
-        content.className = "number console-formatted-number";
+        content.className = "number formatted-number";
         content.textContent = data.description;
 
         this._showPopover(content);
@@ -1422,7 +1422,7 @@ WebInspector.SourceCodeTextEditor.prototype = {
     _showPopoverForBoolean: function(data)
     {
         var content = document.createElement("span");
-        content.className = "boolean console-formatted-boolean";
+        content.className = "boolean formatted-boolean";
         content.textContent = data.description;
 
         this._showPopover(content);
@@ -1431,7 +1431,7 @@ WebInspector.SourceCodeTextEditor.prototype = {
     _showPopoverForNull: function(data)
     {
         var content = document.createElement("span");
-        content.className = "boolean console-formatted-null";
+        content.className = "boolean formatted-null";
         content.textContent = data.description;
 
         this._showPopover(content);
@@ -1440,7 +1440,7 @@ WebInspector.SourceCodeTextEditor.prototype = {
     _showPopoverForUndefined: function(data)
     {
         var content = document.createElement("span");
-        content.className = "boolean console-formatted-undefined";
+        content.className = "boolean formatted-undefined";
         content.textContent = data.description;
 
         this._showPopover(content);