Bug 1639387 - Wrap the values use all the space r=Honza

Wrap the values of the header properties
Cleanup css

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

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

@@ -24,7 +24,7 @@
 }
 
 .network-monitor .headers-panel-container .devtools-button {
-  padding: 2px;
+  padding: 0;
 }
 .network-monitor .headers-panel-container .devtools-dropdown-button {
   padding: 0;
@@ -127,6 +127,28 @@
   margin-inline-start: 4px;
 }
 
+.network-monitor .accordion .properties-view tr.treeRow {
+  padding: 3px 0 0 0;
+}
+.network-monitor .accordion .properties-view tr.treeRow .treeLabelCell {
+  float: left;
+  margin-right: -33px;
+  margin-left: 5px;
+  padding: 0;
+  
+}
+.network-monitor .accordion .properties-view tr.treeRow .treeValueCell {
+  display: inline;
+  word-break: break-all;
+  box-decoration-break: clone;
+  padding-left: 39px;
+  padding-right: 20px;
+}
+
+.network-monitor .accordion .properties-view tr.treeRow .treeValueCell div {
+  display: inline;
+}
+
 /* Summary tabpanel */
 
 .network-monitor .tabpanel-summary-container {

devtools/client/netmonitor/test/browser_net_decode-params.js

@@ -41,7 +41,7 @@ add_task(async function() {
 
   is(
     keyValue.innerText,
-    `file\t"foo # bar"`,
+    `file\n"foo # bar"`,
     "'+' in params in correctly decoded."
   );
 

devtools/client/netmonitor/test/browser_net_params_sorted.js

@@ -49,18 +49,18 @@ add_task(async function() {
   //           2: "b"
   //         c: 15
   const expectedKeys = [
-    "watches\t[…]",
-    `0\t"hello"`,
-    `1\t"how"`,
-    `2\t"are"`,
-    `3\t"you"`,
-    "4\t{…}",
-    "a\t10",
-    "b\t[…]",
-    `0\t"a"`,
-    `1\t"c"`,
-    `2\t"b"`,
-    "c\t15",
+    "watches\n[…]",
+    `0\n"hello"`,
+    `1\n"how"`,
+    `2\n"are"`,
+    `3\n"you"`,
+    "4\n{…}",
+    "a\n10",
+    "b\n[…]",
+    `0\n"a"`,
+    `1\n"c"`,
+    `2\n"b"`,
+    "c\n15",
   ];
 
   const waitForTreeRow = waitForDOM(