From cbecb73ac1bb9f50fec9172de548da91920ca7a3 Mon Sep 17 00:00:00 2001
From: Kasper Nilsson <kaspern@google.com>
Date: Thu, 15 Feb 2018 13:02:34 -0800
Subject: [PATCH] Allow some sections of the change list to overflow

On screens < 90em (approximately 1600px with default font size) wide,
the `Owner`, `Branch`, `Assignee`, and `Project` sections should
overflow with ellipses.

`Project` is handled as a special case -- because most long project
names usually resemble a directory structure, they are truncated to just
the last two parts of the path, with ellipsees appearing before the
leading slash.

Bug: Issue 4552
Change-Id: Icf882cbcecb741fb9e46141a1fa88f5987a3e674
(cherry picked from commit e420236caab5fb1e46d07df4dac4010512a6b4de)
---
 .../gr-path-list-behavior.html                 | 14 +++++++++-----
 .../gr-path-list-behavior_test.html            | 13 +++++++++++++
 .../gr-change-list-item.html                   | 10 ++++++++--
 .../gr-change-list-item/gr-change-list-item.js |  6 ++++++
 .../app/styles/gr-change-list-styles.html      | 18 ++++++++++++++++++
 5 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior.html b/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior.html
index f3db039b9c..d3491c79a4 100644
--- a/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior.html
+++ b/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior.html
@@ -93,16 +93,20 @@ limitations under the License.
      * Example
      * // returns 'text.html'
      * util.truncatePath.('text.html');
+     *
+     * @param {string} path
+     * @param {number=} opt_threshold
      * @return {string} Returns the truncated value of a URL.
      */
-    truncatePath(path) {
+    truncatePath(path, opt_threshold) {
+      const threshold = opt_threshold || 1;
       const pathPieces = path.split('/');
 
-      if (pathPieces.length < 2) {
-        return path;
-      }
+      if (pathPieces.length <= threshold) { return path; }
+
+      const index = pathPieces.length - threshold;
       // Character is an ellipsis.
-      return '\u2026/' + pathPieces[pathPieces.length - 1];
+      return `\u2026/${pathPieces.slice(index).join('/')}`;
     },
   };
 })(window);
diff --git a/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior_test.html b/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior_test.html
index e0b1b7ec1a..f48fb989b3 100644
--- a/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior_test.html
+++ b/polygerrit-ui/app/behaviors/gr-path-list-behavior/gr-path-list-behavior_test.html
@@ -66,6 +66,19 @@ limitations under the License.
       assert.equal(shortenedPath, expectedPath);
     });
 
+    test('truncatePath with opt_threshold', () => {
+      const truncatePath = Gerrit.PathListBehavior.truncatePath;
+      let path = 'level1/level2/level3/level4/file.js';
+      let shortenedPath = truncatePath(path, 2);
+      // The expected path is truncated with an ellipsis.
+      const expectedPath = '\u2026/level4/file.js';
+      assert.equal(shortenedPath, expectedPath);
+
+      path = 'level2/file.js';
+      shortenedPath = truncatePath(path, 2);
+      assert.equal(shortenedPath, path);
+    });
+
     test('truncatePath with short path should not add ellipsis', () => {
       const truncatePath = Gerrit.PathListBehavior.truncatePath;
       const path = 'file.js';
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
index a2c785337f..0fab4afdb8 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
@@ -15,6 +15,7 @@ limitations under the License.
 -->
 <link rel="import" href="../../../behaviors/base-url-behavior/base-url-behavior.html">
 <link rel="import" href="../../../behaviors/gr-change-table-behavior/gr-change-table-behavior.html">
+<link rel="import" href="../../../behaviors/gr-path-list-behavior/gr-path-list-behavior.html">
 <link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
 <link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
@@ -145,7 +146,12 @@ limitations under the License.
     </td>
     <td class="cell project"
         hidden$="[[isColumnHidden('Project', visibleChangeTableColumns)]]">
-      <a href$="[[_computeProjectURL(change.project)]]">[[change.project]]</a>
+      <a class="fullProject" href$="[[_computeProjectURL(change.project)]]">
+        [[change.project]]
+      </a>
+      <a class="truncatedProject" href$="[[_computeProjectURL(change.project)]]">
+        [[_computeTruncatedProject(change.project)]]
+      </a>
     </td>
     <td class="cell branch"
         hidden$="[[isColumnHidden('Branch', visibleChangeTableColumns)]]">
@@ -154,7 +160,7 @@ limitations under the License.
       </a>
       <template is="dom-if" if="[[change.topic]]">
         (<a href$="[[_computeTopicURL(change)]]"><!--
-       --><gr-limited-text limit="30" text="[[change.topic]]">
+       --><gr-limited-text limit="50" text="[[change.topic]]">
           </gr-limited-text><!--
      --></a>)
       </template>
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.js b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.js
index 79f06fe4cf..d8fced21f0 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.js
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.js
@@ -39,6 +39,7 @@
     behaviors: [
       Gerrit.BaseUrlBehavior,
       Gerrit.ChangeTableBehavior,
+      Gerrit.PathListBehavior,
       Gerrit.RESTClientBehavior,
       Gerrit.URLEncodingBehavior,
     ],
@@ -115,5 +116,10 @@
       if (!change.topic) { return ''; }
       return Gerrit.Nav.getUrlForTopic(change.topic);
     },
+
+    _computeTruncatedProject(project) {
+      if (!project) { return ''; }
+      return this.truncatePath(project, 2);
+    },
   });
 })();
diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html
index e082aabce5..a0bba9044d 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.html
@@ -62,6 +62,24 @@ limitations under the License.
       .label {
         text-align: center;
       }
+      .truncatedProject {
+        display: none;
+      }
+      @media only screen and (max-width: 90em) {
+        .assignee,
+        .branch,
+        .owner {
+          overflow: hidden;
+          max-width: 10rem;
+          text-overflow: ellipsis;
+        }
+        .truncatedProject {
+          display: inline-block;
+        }
+        .fullProject {
+          display: none;
+        }
+      }
       @media only screen and (max-width: 50em) {
         :host {
           font-size: 14px;