DevTools: work around rjsmin issue to fix Audits frontpage bug 972969

In previous change https://chromium-review.googlesource.com/c/chromium/src/+/1600375,
some strings are wrapped inside placeholders ${} in string literals for localization
purposes. However, rjsmin couldn't process nested string literals properly so the
white-spaces after commas or periods would get trimmed off. It causes the issue where
words cannot break to the next line when Audits page resized, and leaves unwanted
extra space.

This change works around the issue by pulling the string with comma out to a variable
to prevent nested string literal.

Before fix: https://imgur.com/uMjr5Bp
After fix: https://imgur.com/a/X5wq6Xo

More details on the rjsmin issue:
https://bugs.chromium.org/p/chromium/issues/detail?id=973285

Bug: 972969
Change-Id: I4b4cf243df0ce74c400e488f6c6b98595cf4ecca
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1655913
Commit-Queue: Christy Chen <chrche@microsoft.com>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#672610}

third_party/blink/renderer/devtools/front_end/audits/AuditsStartView.js

@@ -81,18 +81,19 @@ Audits.StartView = class extends UI.Widget {
     const deviceIcon = UI.Icon.create('largeicon-phone');
     const categoriesIcon = UI.Icon.create('largeicon-checkmark');
     const throttlingIcon = UI.Icon.create('largeicon-settings-gear');
+    const auditsDescription = ls
+    `Identify and fix common problems that affect your site's performance, accessibility, and user experience.`;  // crbug.com/972969
 
     const fragment = UI.Fragment.build`
       <div class="vbox audits-start-view">
         <header>
           <div class="audits-logo"></div>
           <div class="audits-start-view-text">
-            <h2>${ls`Audits`}</h2>
-            <p>
-              ${ls`Identify and fix common problems that affect your site's performance,
-                accessibility, and user experience.`}
-              <span class="link" $="learn-more">${ls`Learn more`}</a>
-            </p>
+          <h2>${ls`Audits`}</h2>
+          <p>
+            <span class="text">${auditsDescription}</span>
+            <span class="link" $="learn-more">${ls`Learn more`}</a>
+          </p>
           </div>
         </header>
         <form>

third_party/blink/renderer/devtools/front_end/audits/auditsStartView.css

@@ -41,6 +41,11 @@
   margin-top: 0;
 }
 
+.audits-start-view-text .text {
+  display: inline-block;
+  margin-right: 5px;
+}
+
 .audits-start-view form {
   padding: 0 16px;
 }

third_party/blink/renderer/devtools/front_end/audits/audits_strings.grdp

@@ -117,10 +117,6 @@
   <message name="IDS_DEVTOOLS_c2ffe02d76c4f089648f1647b43e4ee5" desc="">
     Best practices
   </message>
-  <message name="IDS_DEVTOOLS_c3669fa42d4becdd2831b9685cf607bb" desc="">
-    Identify and fix common problems that affect your site&apos;s performance,
-                accessibility, and user experience.
-  </message>
   <message name="IDS_DEVTOOLS_c91c7b93c28cd18741b71f727ee81ee3" desc="">
     Reports
   </message>
@@ -130,6 +126,9 @@
   <message name="IDS_DEVTOOLS_d88946b678e4c2f251d4e292e8142291" desc="">
     SEO
   </message>
+  <message name="IDS_DEVTOOLS_deeacee140c7d3a451440dd0e206e256" desc="">
+    Identify and fix common problems that affect your site&apos;s performance, accessibility, and user experience.
+  </message>
   <message name="IDS_DEVTOOLS_e0ac20adce6ffee48c7151b070aa5737" desc="">
     Device
   </message>