Merge "Make file list more useful on mobile"

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html

@@ -145,6 +145,12 @@ limitations under the License.
       .patchSetSelect {
         max-width: 8em;
       }
+      .truncatedFileName {
+        display: none;
+      }
+      .expanded .fullFileName {
+        white-space: normal;
+      }
       @media screen and (max-width: 50em) {
         .row.selected {
           background-color: transparent;
@@ -159,6 +165,14 @@ limitations under the License.
         .comments {
           min-width: initial;
         }
+        .expanded .fullFileName,
+        .truncatedFileName {
+          display: block;
+        }
+        .expanded .truncatedFileName,
+        .fullFileName {
+          display: none;
+        }
       }
     </style>
     <header>
@@ -217,11 +231,16 @@ limitations under the License.
         <div class$="[[_computeClass('status', file.__path)]]">
           [[_computeFileStatus(file.status)]]
         </div>
-        <a class="path"
+        <a class$="[[_computePathClass(file.__expanded)]]"
             href$="[[_computeDiffURL(changeNum, patchRange, file.__path)]]">
-          <div title$="[[_computeFileDisplayName(file.__path)]]">
+          <div title$="[[_computeFileDisplayName(file.__path)]]"
+              class="fullFileName">
             [[_computeFileDisplayName(file.__path)]]
           </div>
+          <div title$="[[_computeFileDisplayName(file.__path)]]"
+              class="truncatedFileName">
+            [[_computeTruncatedFileDisplayName(file.__path)]]
+          </div>
           <div class="oldPath" hidden$="[[!file.old_path]]" hidden
               title$="[[file.old_path]]">
             [[file.old_path]]

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.js

@@ -521,6 +521,11 @@
       return path === COMMIT_MESSAGE_PATH ? 'Commit message' : path;
     },
 
+    _computeTruncatedFileDisplayName: function(path) {
+      return path === COMMIT_MESSAGE_PATH ?
+          'Commit message' : util.truncatePath(path);
+    },
+
     _formatBytes: function(bytes) {
       if (bytes == 0) return '+/-0 B';
       var bits = 1024;
@@ -554,6 +559,10 @@
       return classes.join(' ');
     },
 
+    _computePathClass: function(expanded) {
+      return expanded ? 'path expanded' : 'path';
+    },
+
     _computeShowHideText: function(expanded) {
       return expanded ? '▼' : '◀';
     },

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.html

@@ -611,5 +611,20 @@ limitations under the License.
         done();
       });
     });
+
+    test('expanded attribute not set on path when not expanded', function() {
+      element._files = [
+        {__path: '/COMMIT_MSG', __expanded: false},
+      ];
+      assert.isNotOk(element.$$('.expanded'));
+    });
+
+    test('expanded attribute set on path when expanded', function() {
+      element._files = [
+        {__path: '/COMMIT_MSG', __expanded: true},
+      ];
+      flushAsynchronousOperations();
+      assert.isOk(element.$$('.expanded'));
+    });
   });
 </script>

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js

@@ -504,17 +504,7 @@
 
     _computeTruncatedFileDisplayName: function(path) {
       return path === COMMIT_MESSAGE_PATH ?
-          'Commit message' : this._shortenPath(path);
-    },
-
-    _shortenPath: function(path) {
-      var pathPieces = path.split('/');
-
-      if (pathPieces.length < 2) {
-        return path;
-      }
-      // Character is an ellipsis.
-      return '\u2026/' + pathPieces.pop();
+          'Commit message' : util.truncatePath(path);
     },
 
     _computeFileSelected: function(path, currentPath) {

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html

@@ -558,20 +558,20 @@ limitations under the License.
     test('_shortenPath with long path should add ellipsis', function() {
       var path =
           'level1/level2/level3/level4/file.js';
-      var shortenedPath = element._shortenPath(path);
+      var shortenedPath = util.truncatePath(path);
       // The expected path is truncated with an ellipsis.
       var expectedPath = '\u2026/file.js';
       assert.equal(shortenedPath, expectedPath);
 
       var path = 'level2/file.js';
-      var shortenedPath = element._shortenPath(path);
+      var shortenedPath = util.truncatePath(path);
       assert.equal(shortenedPath, expectedPath);
     });
 
     test('_shortenPath with short path should not add ellipsis', function() {
       var path = 'file.js';
       var expectedPath = 'file.js';
-      var shortenedPath = element._shortenPath(path);
+      var shortenedPath = util.truncatePath(path);
       assert.equal(shortenedPath, expectedPath);
     });
 

polygerrit-ui/app/scripts/util.js

@@ -55,5 +55,25 @@
     return '';
   };
 
+  /**
+   * Truncates URLs to display filename only
+   * @example
+   * // returns '.../text.html'
+   * util.truncatePath.('dir/text.html');
+   * @example
+   * // returns 'text.html'
+   * util.truncatePath.('text.html');
+   * @returns {String} Returns the truncated value of a URL.
+   */
+  util.truncatePath = function(path) {
+    var pathPieces = path.split('/');
+
+    if (pathPieces.length < 2) {
+      return path;
+    }
+    // Character is an ellipsis.
+    return '\u2026/' + pathPieces[pathPieces.length - 1];
+  };
+
   window.util = util;
 })(window);