Bug 1779972 - [devtools] Add a tooltip for Edit and Resend names and values r=nchevobbe

Depends on D152006

Forcing name and values to one line, we should add a tooltip to show the whole content

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

devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js

@@ -345,6 +345,7 @@ class HTTPCustomRequestPanel extends Component {
             {
               className: "auto-growing-textarea",
               "data-replicated-value": url,
+              title: url,
             },
             textarea({
               className: "http-custom-url-value",

devtools/client/netmonitor/src/components/new-request/InputMap.js

@@ -101,6 +101,7 @@ class InputMap extends Component {
               {
                 className: "auto-growing-textarea",
                 "data-replicated-value": item.name,
+                title: item.name,
               },
               textarea({
                 className: "http-custom-input-name",
@@ -120,6 +121,7 @@ class InputMap extends Component {
               {
                 className: "auto-growing-textarea",
                 "data-replicated-value": item.value,
+                title: item.value,
               },
               textarea({
                 className: "http-custom-input-value",
@@ -162,6 +164,7 @@ class InputMap extends Component {
               {
                 className: "auto-growing-textarea",
                 "data-replicated-value": name,
+                title: value,
               },
               textarea({
                 className: "http-custom-input-name",
@@ -182,6 +185,7 @@ class InputMap extends Component {
               {
                 className: "auto-growing-textarea",
                 "data-replicated-value": value,
+                title: value,
               },
               textarea({
                 className: "http-custom-input-value",

devtools/client/netmonitor/test/browser_net_new_request_panel_send_request.js

@@ -155,5 +155,17 @@ add_task(async function() {
     "The request has the right post body"
   );
 
+  info("Check that all growing textareas provide a title tooltip");
+  const textareas = [
+    ...document.querySelectorAll("#http-custom-headers .auto-growing-textarea"),
+  ];
+  for (const textarea of textareas) {
+    is(
+      textarea.title,
+      textarea.dataset.replicatedValue,
+      "Title tooltip is set to the expected value"
+    );
+  }
+
   await teardown(monitor);
 });