Web Inspector: WebSockets: color of outgoing message icon should match text color
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 13 Mar 2017 22:35:29 +0000 (22:35 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 13 Mar 2017 22:35:29 +0000 (22:35 +0000)
https://bugs.webkit.org/show_bug.cgi?id=169512
<rdar://problem/30994284>

Reviewed by Devin Rousso.

Include SVG icon as an inline SVG element to make currentColor work.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Main.html:
* UserInterface/Views/WebSocketContentView.css:
(.web-socket.content-view .outgoing .icon): Deleted.
* UserInterface/Views/WebSocketContentView.js:
(WebInspector.WebSocketContentView):
(WebInspector.WebSocketContentView.prototype.addFrame):
(WebInspector.WebSocketContentView.prototype._addRow):
(WebInspector.WebSocketContentView.prototype._timeStringFromTimestamp): Deleted.
* UserInterface/Views/WebSocketDataGridNode.js: Added.
(WebInspector.WebSocketDataGridNode.prototype.createCellContent):
(WebInspector.WebSocketDataGridNode.prototype._timeStringFromTimestamp):
(WebInspector.WebSocketDataGridNode):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css
Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.js
Source/WebInspectorUI/UserInterface/Views/WebSocketDataGridNode.js [new file with mode: 0644]

index 277b20d..2772d0f 100644 (file)
@@ -1,3 +1,27 @@
+2017-03-13  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: WebSockets: color of outgoing message icon should match text color
+        https://bugs.webkit.org/show_bug.cgi?id=169512
+        <rdar://problem/30994284>
+
+        Reviewed by Devin Rousso.
+
+        Include SVG icon as an inline SVG element to make currentColor work.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Main.html:
+        * UserInterface/Views/WebSocketContentView.css:
+        (.web-socket.content-view .outgoing .icon): Deleted.
+        * UserInterface/Views/WebSocketContentView.js:
+        (WebInspector.WebSocketContentView):
+        (WebInspector.WebSocketContentView.prototype.addFrame):
+        (WebInspector.WebSocketContentView.prototype._addRow):
+        (WebInspector.WebSocketContentView.prototype._timeStringFromTimestamp): Deleted.
+        * UserInterface/Views/WebSocketDataGridNode.js: Added.
+        (WebInspector.WebSocketDataGridNode.prototype.createCellContent):
+        (WebInspector.WebSocketDataGridNode.prototype._timeStringFromTimestamp):
+        (WebInspector.WebSocketDataGridNode):
+
 2017-03-13  Devin Rousso  <webkit@devinrousso.com>
 
         Web Inspector: Event Listeners detail section is unhelpful, default should show listeners by element rather than by event
index 053cbd5..65f0839 100644 (file)
@@ -582,6 +582,7 @@ localizedStrings["Original formatting"] = "Original formatting";
 localizedStrings["Originally %s"] = "Originally %s";
 localizedStrings["Other"] = "Other";
 localizedStrings["Other Issue"] = "Other Issue";
+localizedStrings["Outgoing message"] = "Outgoing message";
 localizedStrings["Outline"] = "Outline";
 localizedStrings["Output: "] = "Output: ";
 localizedStrings["Outset"] = "Outset";
index a05156f..48cd293 100644 (file)
     <script src="Views/TypeTreeElement.js"></script>
     <script src="Views/TypeTreeView.js"></script>
     <script src="Views/WebSocketContentView.js"></script>
+    <script src="Views/WebSocketDataGridNode.js"></script>
     <script src="Views/WorkerTreeElement.js"></script>
     <script src="Views/XHRBreakpointTreeElement.js"></script>
 
index 5b524e2..8e9822a 100644 (file)
@@ -61,10 +61,6 @@ body[dir=rtl] .web-socket.content-view .icon {
     margin-left: 2px;
 }
 
-.web-socket.content-view .outgoing .icon {
-    background-image: url("../Images/ArrowUp.svg");
-}
-
 .web-socket.content-view .data-grid.variable-height-rows table.data tr:nth-child(odd) {
     background-color: unset;
 }
index 0f2f9f4..2383f64 100644 (file)
@@ -42,7 +42,6 @@ WebInspector.WebSocketContentView = class WebSocketContentView extends WebInspec
         let columns = {data: {}};
         columns.data.title = WebInspector.UIString("Data");
         columns.data.sortable = false;
-        columns.data.icon = true;
         columns.data.width = "85%";
 
         if (this._showTimeColumn)
@@ -103,7 +102,7 @@ WebInspector.WebSocketContentView = class WebSocketContentView extends WebInspec
             opcode === WebInspector.WebSocketResource.OpCodes.TextFrame ? "text-frame" : "non-text-frame"
         ];
 
-        this._addRow(nodeText, time, classNames);
+        this._addRow(nodeText, time, classNames, isOutgoing);
     }
 
     // Private
@@ -119,21 +118,16 @@ WebInspector.WebSocketContentView = class WebSocketContentView extends WebInspec
         this._framesRendered = framesLength;
     }
 
-    _addRow(data, time, classNames)
+    _addRow(data, time, classNames, isOutgoing)
     {
         let node;
         if (this._showTimeColumn)
-            node = new WebInspector.DataGridNode({data, time: this._timeStringFromTimestamp(time)});
+            node = new WebInspector.WebSocketDataGridNode({data, time, isOutgoing});
         else
-            node = new WebInspector.DataGridNode({data});
+            node = new WebInspector.WebSocketDataGridNode({data, isOutgoing});
 
         this._dataGrid.appendChild(node);
 
         node.element.classList.add(...classNames);
     }
-
-    _timeStringFromTimestamp(timestamp)
-    {
-        return new Date(timestamp * 1000).toLocaleTimeString();
-    }
 };
diff --git a/Source/WebInspectorUI/UserInterface/Views/WebSocketDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/WebSocketDataGridNode.js
new file mode 100644 (file)
index 0000000..6c93017
--- /dev/null
@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2017 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.WebSocketDataGridNode = class WebSocketDataGridNode extends WebInspector.DataGridNode
+{
+    // Public
+
+    createCellContent(columnIdentifier)
+    {
+        if (columnIdentifier === "data") {
+            let fragment = document.createDocumentFragment();
+            if (this._data.isOutgoing) {
+                let iconElement = useSVGSymbol("Images/ArrowUp.svg", "icon", WebInspector.UIString("Outgoing message"));
+                fragment.appendChild(iconElement);
+            }
+            fragment.appendChild(document.createTextNode(this._data.data));
+            return fragment;
+        }
+
+        if (columnIdentifier === "time")
+            return this._timeStringFromTimestamp(this._data.time);
+
+        return super.createCellContent(columnIdentifier);
+    }
+
+    // Private
+
+    _timeStringFromTimestamp(timestamp)
+    {
+        return new Date(timestamp * 1000).toLocaleTimeString();
+    }
+};