[MD Extensions] Fix long inspect views on card rendering

Inspectable views can have any url, including some maddeningly long
ones. We need to ensure that these render appropriately on the
extension's card in the main view of the chrome://extensions page.
Make the following changes:
- Ensure that the inspect views section does not grow beyond the
  content area.
- Ensure that the "Inspect views" and "n more..." are always visible
- Adjust the overflow for the shown inspectable view to be hidden
  behind ellipses, and have the title text have the full label.

Bug: 789655

Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Icb6b769ed96c5775ea34a62eb15b89dbf625d124
Reviewed-on: https://chromium-review.googlesource.com/802095
Commit-Queue: Devlin <rdevlin.cronin@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521601}

chrome/browser/resources/md_extensions/item.html

@@ -26,10 +26,32 @@
   <template>
     <style include=
         "iron-flex cr-hidden-style cr-icons action-link paper-button-style">
+      .bounded-text,
+      .multiline-clippable-text,
+      .clippable-flex-text {
+        /** Ensure that the text does not overflow its container. */
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .bounded-text,
+      .clippable-flex-text {
+        white-space: nowrap;
+      }
+
+      .clipppable-flex-text {
+        /**
+         * These labels can be arbitrarily long. We want to ensure that these
+         * shrink, rather than the neighboring content.
+         */
+        flex-shrink: 1;
+      }
+
       #icon-wrapper {
         align-self: flex-start;
         display: flex;
         padding: 6px;
+        position: relative;
       }
 
       #icon {
@@ -53,15 +75,16 @@
 
       #main {
         display: flex;
-        flex-grow: 1;
+        flex: 1;
         padding: 16px 20px 17px;
       }
 
       #content {
         -webkit-margin-start: 24px;
         display: flex;
+        flex: 1;
         flex-direction: column;
-        width: 100%;
+        overflow: hidden;
       }
 
       #name-and-version {
@@ -73,9 +96,13 @@
         -webkit-margin-end: 8px;
       }
 
-      #description,
+      #description {
+        flex: 1;
+      }
+
       #warnings {
-        flex-grow: 1;
+        color: var(--google-red-700);
+        flex: 1;
         margin-bottom: 8px;
       }
 
@@ -89,11 +116,25 @@
         font-weight: 400;
       }
 
+      #extension-id {
+        flex-shrink: 0;
+      }
+
+      #inspect-views {
+        display: flex;
+        white-space: nowrap;
+      }
+
+      #inspect-views > span {
+        -webkit-margin-end: 4px;
+      }
+
       #button-strip {
         /* Avoid ripple from overlapping container. */
         -webkit-margin-end: 20px;
         border-top: var(--cr-separator-line);
         box-sizing: border-box;
+        flex-shrink: 0;
         height: var(--cr-section-min-height);
         padding-bottom: 8px;
         padding-top: 8px;
@@ -108,10 +149,6 @@
         text-decoration: none;
       }
 
-      #icon-wrapper {
-        position: relative;
-      }
-
       #source-indicator {
         -webkit-margin-start: 24px;
         margin-top: 24px;
@@ -155,10 +192,6 @@
         -webkit-margin-end: 12px;
       }
 
-      #warnings {
-        color: var(--google-red-700);
-      }
-
       #blacklisted-warning:empty {
         display: none;
       }
@@ -192,13 +225,18 @@
           </paper-tooltip>
         </template>
         <div id="content">
-          <div id="name-and-version" class="layout horizontal center">
-            <div id="name">[[data.name]]</div>
-            <span id="version" hidden$="[[!inDevMode]]">
-              [[data.version]]
-            </span>
+          <!--Note: We wrap inspect-views in a div so that the outer div
+              doesn't shrink (because it's not display: flex).-->
+          <div>
+            <div id="name-and-version" class="layout horizontal center">
+              <div id="name" class="clippable-flex-text">[[data.name]]</div>
+              <span id="version" hidden$="[[!inDevMode]]">
+                [[data.version]]
+              </span>
+            </div>
           </div>
-          <div id="description" hidden$="[[hasWarnings_(data.*)]]">
+          <div id="description" class="multiline-clippable-text"
+              hidden$="[[hasWarnings_(data.*)]]">
             [[data.description]]
           </div>
           <template is="dom-if" if="[[hasWarnings_(data.*)]]">
@@ -221,19 +259,25 @@
             </div>
           </template>
           <template is="dom-if" if="[[inDevMode]]">
-            <div id="extension-id">[[data.id]]</div>
+            <div id="extension-id" class="bounded-text">[[data.id]]</div>
             <template is="dom-if"
                 if="[[!computeInspectViewsHidden_(data.views)]]">
-              <div id="inspect-views">
-                <span>$i18n{itemInspectViews}</span>
-                <a is="action-link" on-tap="onInspectTap_">
-                  [[computeFirstInspectLabel_(data.views)]]
-                </a>
-                <a is="action-link"
-                    hidden$="[[computeExtraViewsHidden_(data.views)]]"
-                    on-tap="onExtraInspectTap_">
-                  [[computeExtraInspectLabel_(data.views)]]
-                </a>
+              <!--Note: We wrap inspect-views in a div so that the outer div
+                  doesn't shrink (because it's not display: flex).-->
+              <div>
+                <div id="inspect-views">
+                  <span>$i18n{itemInspectViews}</span>
+                  <a class="clippable-flex-text" is="action-link"
+                      title="[[computeFirstInspectTitle_(data.views)]]"
+                      on-tap="onInspectTap_">
+                    [[computeFirstInspectLabel_(data.views)]]
+                  </a>
+                  <a is="action-link"
+                      hidden$="[[computeExtraViewsHidden_(data.views)]]"
+                      on-tap="onExtraInspectTap_">
+                    [[computeExtraInspectLabel_(data.views)]]
+                  </a>
+                </div>
               </div>
             </template>
           </template>

chrome/browser/resources/md_extensions/item.js

@@ -273,18 +273,24 @@ cr.define('extensions', function() {
      * @return {string}
      * @private
      */
-    computeFirstInspectLabel_: function() {
+    computeFirstInspectTitle_: function() {
       // Note: theoretically, this wouldn't be called without any inspectable
       // views (because it's in a dom-if="!computeInspectViewsHidden_()").
       // However, due to the recycling behavior of iron list, it seems that
       // sometimes it can. Even when it is, the UI behaves properly, but we
       // need to handle the case gracefully.
-      if (this.data.views.length == 0)
-        return '';
-      let label = extensions.computeInspectableViewLabel(this.data.views[0]);
-      if (this.data.views.length > 1)
-        label += ',';
-      return label;
+      return this.data.views.length > 0 ?
+          extensions.computeInspectableViewLabel(this.data.views[0]) :
+          '';
+    },
+
+    /**
+     * @return {string}
+     * @private
+     */
+    computeFirstInspectLabel_: function() {
+      let label = this.computeFirstInspectTitle_();
+      return label && this.data.views.length > 1 ? label + ',' : label;
     },
 
     /**