[DevTools] Change colors of websocket message viewer datagrid

Currently in the websocket message viewer, sent text messages have a
green background, received text messages have a white background, and
binary messages are yellow on yellow. This patch removes all of these
interesting colors and replaces them with data grid striping to look
more like the other datagrids in devtools.

Screenshots: http://crbug.com/963949#c2
Bug: 963949
Change-Id: I0403a8c67a36e5ad0bd006d59e60fc02d371d7ae
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1614036Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/master@{#660948}

third_party/blink/renderer/devtools/front_end/network/ResourceWebSocketFrameView.js

@@ -46,7 +46,7 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox {
     this._dataGrid = new DataGrid.SortableDataGrid(columns);
     this._dataGrid.setRowContextMenuCallback(onRowContextMenu.bind(this));
     this._dataGrid.setStickToBottom(true);
-    this._dataGrid.setCellClass('websocket-frame-view-td');
+    this._dataGrid.setStriped(true);
     this._timeComparator =
         /** @type {function(!Network.ResourceWebSocketFrameNode, !Network.ResourceWebSocketFrameNode):number} */ (
             Network.ResourceWebSocketFrameNodeTimeComparator);
@@ -268,7 +268,11 @@ Network.ResourceWebSocketFrameNode = class extends DataGrid.SortableDataGridNode
     let description = Network.ResourceWebSocketFrameView.opCodeDescription(frame.opCode, frame.mask);
     const isTextFrame = frame.opCode === Network.ResourceWebSocketFrameView.OpCodes.TextFrame;
 
-    if (isTextFrame) {
+    if (frame.type === SDK.NetworkRequest.WebSocketFrameType.Error) {
+      description = dataText;
+      length = ls`N/A`;
+
+    } else if (isTextFrame) {
       description = dataText;
 
     } else if (frame.opCode === Network.ResourceWebSocketFrameView.OpCodes.BinaryFrame) {
@@ -298,7 +302,6 @@ Network.ResourceWebSocketFrameNode = class extends DataGrid.SortableDataGridNode
         'websocket-frame-view-row-send', this._frame.type === SDK.NetworkRequest.WebSocketFrameType.Send);
     element.classList.toggle(
         'websocket-frame-view-row-receive', this._frame.type === SDK.NetworkRequest.WebSocketFrameType.Receive);
-    element.classList.toggle('websocket-frame-view-row-opcode', !this._isTextFrame);
     super.createCells(element);
   }
 
@@ -328,7 +331,7 @@ Network.ResourceWebSocketFrameNode = class extends DataGrid.SortableDataGridNode
    * @return {?Network.BinaryResourceView}
    */
   binaryView() {
-    if (this._isTextFrame)
+    if (this._isTextFrame || this._frame.type === SDK.NetworkRequest.WebSocketFrameType.Error)
       return null;
 
     if (!this._binaryView)

third_party/blink/renderer/devtools/front_end/network/webSocketFrameView.css

@@ -17,10 +17,6 @@
     background-image: none;
 }
 
-.websocket-frame-view-td {
-    border-bottom: 1px solid #ccc;
-}
-
 .websocket-frame-view .data-grid tr.selected {
     background-color: #def;
 }
@@ -31,13 +27,15 @@
 }
 
 .websocket-frame-view-row-send td:first-child::before {
-    content: "\2B06 ";
+    content: "\2B06";
     color: #080;
+    padding-right: 4px;
 }
 
 .websocket-frame-view-row-receive td:first-child::before {
-    content: "\2B07 ";
+    content: "\2B07";
     color: #E65100;
+    padding-right: 4px;
 }
 
 .data-grid:focus .websocket-frame-view-row-send.selected td:first-child::before,
@@ -45,17 +43,7 @@
     color: white;
 }
 
-.websocket-frame-view-row-send {
-    background-color: rgb(226, 247, 218);
-}
-
-.websocket-frame-view-row-opcode {
-    background-color: rgb(255, 255, 232);
-    color: rgb(170, 111, 71);
-}
-
 .websocket-frame-view-row-error {
-    background-color: rgb(255, 237, 237);
     color: rgb(182, 0, 0);
 }