Bug 1618996 - Fix copy-contextmenu in WebSocket details panel r=bomsy

Using the right components for WS inspection that support copy-context menus.

Differential Revision: https://phabricator.services.mozilla.com/D64841

--HG--
extra : moz-landing-system : lando

devtools/client/netmonitor/src/assets/styles/websockets.css

@@ -71,15 +71,19 @@
 }
 
 #messages-panel .ws-frame-rawData-payload {
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
+  display: block;
+  width: 100%;
+  overflow: auto;
+  white-space: pre;
   padding: 4px 8px;
   padding-inline-start: 20px;
+  border: none;
   font-family: var(--monospace-font-family);
   font-size: var(--theme-code-font-size);
   line-height: calc(15/11);
   direction: ltr;
   text-align: left;
+  resize: none;
 }
 
 /* Styles related to JSONPreview */

devtools/client/netmonitor/src/components/websockets/FramePayload.js

@@ -52,9 +52,9 @@ const Accordion = createFactory(
 const RawData = createFactory(
   require("devtools/client/netmonitor/src/components/websockets/RawData")
 );
-loader.lazyGetter(this, "JSONPreview", function() {
+loader.lazyGetter(this, "PropertiesView", function() {
   return createFactory(
-    require("devtools/client/netmonitor/src/components/JSONPreview")
+    require("devtools/client/netmonitor/src/components/request-details/PropertiesView")
   );
 });
 
@@ -266,17 +266,11 @@ class FramePayload extends Component {
        */
       items.unshift({
         className: "formattedData",
-        component: JSONPreview,
+        component: PropertiesView,
         componentProps: {
           object: this.state.formattedData,
-          columns: [
-            {
-              id: "value",
-              width: "100%",
-            },
-          ],
         },
-        header: `${this.state.formattedDataTitle}`,
+        header: this.state.formattedDataTitle,
         id: "ws-frame-formattedData",
         opened: true,
       });

devtools/client/netmonitor/src/components/websockets/RawData.js

@@ -20,12 +20,12 @@ class RawData extends Component {
 
   render() {
     const { payload } = this.props;
-    return dom.div(
-      {
-        className: "ws-frame-rawData-payload",
-      },
-      payload
-    );
+    return dom.textarea({
+      className: "ws-frame-rawData-payload",
+      rows: payload.split(/\n/g).length + 1,
+      value: payload,
+      readOnly: true,
+    });
   }
 }