[DevTools] Handle long string in service worker list's script name and clients

If the name string of the service worker script or a service worker
client is too long, this patch restricts its width and denote the
overflow with ellipsis. Users can still get the string by hovering
above it, and the string is still clickable.

Bug: 847801
Change-Id: I9d3a07c410af6bb98ae42046894ea3d7223afcbc
Reviewed-on: https://chromium-review.googlesource.com/c/1312973
Commit-Queue: Haihong Li (Harley) <hhli@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#604760}

third_party/blink/renderer/devtools/front_end/resources/ServiceWorkersView.js

@@ -534,12 +534,14 @@ Resources.ServiceWorkersView.Section = class {
    */
   _updateClientInfo(element, targetInfo) {
     if (targetInfo.type !== 'page' && targetInfo.type === 'iframe') {
-      element.createTextChild(Common.UIString('Worker: %s', targetInfo.url));
+      const clientString = element.createChild('span', 'service-worker-client-string');
+      clientString.createTextChild(ls`Worker: ` + targetInfo.url);
       return;
     }
     element.removeChildren();
-    element.createTextChild(targetInfo.url);
-    const focusLabel = element.createChild('label', 'link');
+    const clientString = element.createChild('span', 'service-worker-client-string');
+    clientString.createTextChild(targetInfo.url);
+    const focusLabel = element.createChild('label', 'link service-worker-client-focus-link');
     focusLabel.createTextChild('focus');
     focusLabel.addEventListener('click', this._activateTarget.bind(this, targetInfo.targetId), true);
   }

third_party/blink/renderer/devtools/front_end/resources/serviceWorkersView.css

@@ -107,6 +107,22 @@
     min-width: 80px;
 }
 
+.report-field-value-filename,
+.service-worker-client-string {
+    max-width: 400px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.service-worker-client {
+    display: flex;
+}
+
+.service-worker-client-focus-link {
+    flex: none;
+    margin-right: 5px;
+}
+
 .service-worker-notification-editor.source-code {
     /** Simulate CodeMirror that is shown above */
     padding: 4px;