DevTools: fix suggestbox preferred width measurement

SuggestBox determines its preferred width by taking the character
length of the longest item, which includes whitespace. However,
whitespace is not preserved without 'white-space: pre', so
measurements are incorrect.

Screenshot: https://imgur.com/a/LcQEQ

Furthermore, preferred width measurements do not factor in the
scrollbar width.

Screenshot: https://imgur.com/a/x8MEF

Bug: 825386
Change-Id: I785dfca5d6a75832c62f41fa8140fb5f8c0dd3f1
Reviewed-on: https://chromium-review.googlesource.com/978937
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#563129}

third_party/blink/renderer/devtools/front_end/ui/SuggestBox.js

@@ -128,7 +128,9 @@ UI.SuggestBox = class {
       }
     }
     const element = this.createElementForItem(/** @type {!UI.SuggestBox.Suggestion} */ (maxItem));
-    return Math.min(kMaxWidth, UI.measurePreferredSize(element, this._element).width);
+    const preferredWidth =
+        UI.measurePreferredSize(element, this._element).width + UI.measuredScrollbarWidth(this._element.ownerDocument);
+    return Math.min(kMaxWidth, preferredWidth);
   }
 
   /**
@@ -197,7 +199,7 @@ UI.SuggestBox = class {
       element.classList.add('secondary');
     element.tabIndex = -1;
     const maxTextLength = 50 + query.length;
-    const displayText = (item.title || item.text).trimEnd(maxTextLength);
+    const displayText = (item.title || item.text).trim().trimEnd(maxTextLength).replace(/\n/g, '\u21B5');
 
     const titleElement = element.createChild('span', 'suggestion-title');
     const index = displayText.toLowerCase().indexOf(query.toLowerCase());

third_party/blink/renderer/devtools/front_end/ui/suggestBox.css

@@ -59,6 +59,10 @@
     text-overflow: ellipsis;
 }
 
+.suggestion-title span {
+    white-space: pre;
+}
+
 .suggestion-subtitle {
     flex: auto;
     text-align: right;