DevTools: Convert concatenated string and link to embedded link in string in remote devices tab

Use UI.formatLocalize to embed a link inside a localizable string.

UI.formatLocalized takes a string and a list of strings or DOM elements.
A span element is created, and a string is appended as a text node through
appendChild(createTextNode(str)), while an element is just appended through
appendChild(element). Code:
https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/ui/UIUtils.js?type=cs&q=uiutils.js&sq=package:chromium&g=0&l=622

Example before vs after: https://imgur.com/XBouvPo

There are other places where the same change can be applied. To keep this
patch small I only modified the remote devices tab. Sebsequent patches will
be made.

Bug: 941561
Change-Id: Iaf1ed0451c2f748943c4b9dfc918a969e1c24d03
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1658750
Commit-Queue: Mandy Chen <mandy.chen@microsoft.com>
Reviewed-by: Alexei Filippov <alph@chromium.org>
Cr-Commit-Position: refs/heads/master@{#669072}

third_party/blink/renderer/devtools/front_end/devices/DevicesView.js

@@ -35,11 +35,11 @@ Devices.DevicesView = class extends UI.VBox {
 
     const discoveryFooter = this.contentElement.createChild('div', 'devices-footer');
     this._deviceCountSpan = discoveryFooter.createChild('span');
-    discoveryFooter.createChild('span').textContent = Common.UIString(' Read ');
-    discoveryFooter.appendChild(UI.XLink.create(
+    const documentationLink = UI.XLink.create(
         'https://developers.google.com/chrome-developer-tools/docs/remote-debugging',
-        Common.UIString('remote debugging documentation')));
-    discoveryFooter.createChild('span').textContent = Common.UIString(' for more information.');
+        ls`remote debugging documentation`);
+    discoveryFooter.appendChild(
+        UI.formatLocalized('%s Read %s for more information.', [this._deviceCountSpan, documentationLink]));
     this._updateFooter();
     this._selectSidebarListItem(this._discoveryListItem, this._discoveryView);
 
@@ -217,10 +217,10 @@ Devices.DevicesView.DiscoveryView = class extends UI.VBox {
     }, false);
 
     const help = this.element.createChild('div', 'discovery-help');
-    help.createChild('span').textContent = Common.UIString('Need help? Read Chrome ');
-    help.appendChild(UI.XLink.create(
+    const documentationLink = UI.XLink.create(
         'https://developers.google.com/chrome-developer-tools/docs/remote-debugging',
-        Common.UIString('remote debugging documentation.')));
+        ls`remote debugging documentation`);
+    help.appendChild(UI.formatLocalized('Need help? Read Chrome %s.', [documentationLink]));
 
     /** @type {!Adb.Config} */
     this._config;
@@ -265,10 +265,12 @@ Devices.DevicesView.PortForwardingView = class extends UI.VBox {
     this._portForwardingEnabledCheckbox.addEventListener('click', this._update.bind(this), false);
 
     const portForwardingFooter = this.element.createChild('div', 'port-forwarding-footer');
-    portForwardingFooter.createChild('span').textContent = Common.UIString(
-        'Define the listening port on your device that maps to a port accessible from your development machine. ');
-    portForwardingFooter.appendChild(UI.XLink.create(
-        'https://developer.chrome.com/devtools/docs/remote-debugging#port-forwarding', Common.UIString('Learn more')));
+    const documentationLink = UI.XLink.create(
+        'https://developer.chrome.com/devtools/docs/remote-debugging#port-forwarding',
+        ls`remote debugging documentation`);
+    portForwardingFooter.appendChild(UI.formatLocalized(
+        'Define the listening port on your device that maps to a port accessible from your development machine. Read %s for more.',
+        [documentationLink]));
 
     /** @type {!UI.ListWidget<!Adb.PortForwardingRule>} */
     this._list = new UI.ListWidget(this);

third_party/blink/renderer/devtools/front_end/devices/devices_strings.grdp

@@ -3,6 +3,9 @@
   <message name="IDS_DEVTOOLS_00fcbe531dd989e566cab0a9e250f14c" desc="">
     Port Forwarding:
   </message>
+  <message name="IDS_DEVTOOLS_034fd013261994214d1e8cb42571d191" desc="">
+    Need help? Read Chrome <ph name="DOCUMENTATIONLINK">$1s</ph>.
+  </message>
   <message name="IDS_DEVTOOLS_03fc5c0bd59679c442b86074c7a7cc3a" desc="">
     Port forwarding
   </message>
@@ -21,9 +24,6 @@
   <message name="IDS_DEVTOOLS_2157ba7738ed20565fd089f2a6287cdd" desc="">
     View less tabs…
   </message>
-  <message name="IDS_DEVTOOLS_258771f02f7548d3282560829e7c9b69" desc="">
-    Define the listening port on your device that maps to a port accessible from your development machine. '''
-  </message>
   <message name="IDS_DEVTOOLS_2ec0d16e4ca169baedb9b2d50ec5c6d7" desc="">
     Connected
   </message>
@@ -51,9 +51,6 @@
   <message name="IDS_DEVTOOLS_88183b946cc5f0e8c96b2e66e1c74a7e" desc="">
     Unknown
   </message>
-  <message name="IDS_DEVTOOLS_8c7074069d61ba9d2f76b078fb1dd154" desc="">
-    Need help? Read Chrome '''
-  </message>
   <message name="IDS_DEVTOOLS_926f97ab5b90b053d6a3a31082316f15" desc="">
     No browsers detected.
   </message>
@@ -63,12 +60,12 @@
   <message name="IDS_DEVTOOLS_9ba01fbecae523e4160afa26f75f1757" desc="">
     View more tabs…
   </message>
-  <message name="IDS_DEVTOOLS_a105a2ea6a8f53afe9640d8684ffe5d5" desc="">
-    ''' Read '''
-  </message>
   <message name="IDS_DEVTOOLS_a2040c5569ac3718b10af77aaa3fbb03" desc="">
     Pending authentication: please accept debugging session on the device.
   </message>
+  <message name="IDS_DEVTOOLS_bb65fcb8595fb531c5be41fa427d39a0" desc="">
+    <ph name="THIS__DEVICECOUNTSPAN">$1s</ph> Read <ph name="DOCUMENTATIONLINK">$2s</ph> for more information.
+  </message>
   <message name="IDS_DEVTOOLS_bcca96534b404f08faf65d76be6aa782" desc="">
     1 device detected.
   </message>
@@ -78,15 +75,9 @@
   <message name="IDS_DEVTOOLS_c3bf447eabe632720a3aa1a7ce401274" desc="">
     Open
   </message>
-  <message name="IDS_DEVTOOLS_c9d2bd107ad7a2c20f80efcaaf365d23" desc="">
-    ''' for more information.
-  </message>
   <message name="IDS_DEVTOOLS_cc63a5ac37dd9d1c607a59aad3292392" desc="">
     No rules
   </message>
-  <message name="IDS_DEVTOOLS_ceb747e16b7e536d03047492e4491314" desc="">
-    remote debugging documentation.
-  </message>
   <message name="IDS_DEVTOOLS_d38dcac8af912356e255cbace8984e9a" desc="">
     New tab:
   </message>
@@ -99,6 +90,9 @@
   <message name="IDS_DEVTOOLS_e24ee2487879116dcab772c0ac4fe341" desc="">
     Focus
   </message>
+  <message name="IDS_DEVTOOLS_ed725244eec042fa550990c608639b38" desc="">
+    Define the listening port on your device that maps to a port accessible from your development machine. Read <ph name="DOCUMENTATIONLINK">$1s</ph> for more.
+  </message>
   <message name="IDS_DEVTOOLS_f114563447e4786042d7e7ce05f1157c" desc="">
     Device port (3333)
   </message>