Merge "Show size bars in the file list"

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

@@ -131,6 +131,12 @@ limitations under the License.
       .total-stats {
         font-family: var(--monospace-font-family);
       }
+      .sizeBars {
+        margin-left: .5em;
+      }
+      .sizeBars.hide {
+        display: none;
+      }
       .added,
       .removed {
         display: inline-block;
@@ -301,6 +307,25 @@ limitations under the License.
               [[_computeCommentsStringMobile(changeComments, patchRange.patchNum,
                   file.__path)]]
             </div>
+            <div class$="[[_computeSizeBarsClass(_showSizeBars, file.__path)]]">
+              <svg width="101" height="8">
+                <rect
+                    x="50"
+                    y="0"
+                    height="8"
+                    fill="#388E3C"
+                    transform="translate(100, 0) scale(-1,1)"
+                    width$="[[_computeSizeBarWidth(
+                        _sizeBarScale, file.lines_inserted)]]" />
+                <rect
+                    x="51"
+                    y="0"
+                    height="8"
+                    fill="#D32F2F"
+                    width$="[[_computeSizeBarWidth(
+                        _sizeBarScale, file.lines_deleted)]]" />
+              </svg>
+            </div>
             <div class$="[[_computeClass('stats', file.__path)]]">
               <span
                   class="added"

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

@@ -21,6 +21,9 @@
   const WARN_SHOW_ALL_THRESHOLD = 1000;
   const LOADING_DEBOUNCE_INTERVAL = 100;
 
+  const SIZE_BAR_MAX_WIDTH = 50;
+  const SIZE_BAR_MIN_WIDTH = 1.5;
+
   const FileStatus = {
     A: 'Added',
     C: 'Copied',
@@ -125,6 +128,15 @@
         type: Boolean,
         observer: '_loadingChanged',
       },
+      _sizeBarScale: {
+        type: Number,
+        computed: '_computeSizeBarScale(_shownFiles.*)',
+      },
+      _showSizeBars: {
+        type: Boolean,
+        value: true,
+        computed: '_computeShowSizeBars(_userPrefs)',
+      },
     },
 
     behaviors: [
@@ -926,5 +938,47 @@
     _computeReviewedText(isReviewed) {
       return isReviewed ? 'MARK UNREVIEWED' : 'MARK REVIEWED';
     },
+
+    /**
+     * Find the size bar scaling factor by computing the largest value of the
+     * lines_inserted or lines_deleted properties of the visible files.
+     * @return {number|undefined}
+     */
+    _computeSizeBarScale(shownFilesRecord) {
+      if (!shownFilesRecord || !shownFilesRecord.base) { return undefined; }
+      return shownFilesRecord.base
+          .filter(f =>
+              f.__path !== this.COMMIT_MESSAGE_PATH &&
+              f.__path !== this.MERGE_LIST_PATH)
+          .reduce((acc, f) =>
+              Math.max(acc, f.lines_inserted, f.lines_deleted), 0);
+    },
+
+    /**
+     * Compute the width of the size bar for given delta stat and scale.
+     * @param {number} sizeBarScale
+     * @param {number} stat
+     * @return {number} the width of the bar
+     */
+    _computeSizeBarWidth(sizeBarScale, stat) {
+      if (!sizeBarScale || !stat) { return 0; }
+      return Math.max(
+          SIZE_BAR_MIN_WIDTH, SIZE_BAR_MAX_WIDTH * stat / sizeBarScale);
+    },
+
+    _computeShowSizeBars(userPrefs) {
+      return !!userPrefs.size_bar_in_change_table;
+    },
+
+    _computeSizeBarsClass(showSizeBars, path) {
+      let hideClass = '';
+      if (!showSizeBars) {
+        hideClass = 'hide';
+      } else if (path === this.COMMIT_MESSAGE_PATH ||
+          path === this.MERGE_LIST_PATH) {
+        hideClass = 'invisible';
+      }
+      return `sizeBars desktop ${hideClass}`;
+    },
   });
 })();

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

@@ -984,6 +984,42 @@ limitations under the License.
         });
       });
     });
+
+    suite('size bars', () => {
+      test('_computeSizeBarScale', () => {
+        assert.isUndefined(element._computeSizeBarScale(null));
+        assert.isUndefined(element._computeSizeBarScale({}));
+        assert.equal(element._computeSizeBarScale({base: []}), 0);
+
+        const files = [
+          {__path: 'foo', lines_inserted: 12, lines_deleted: 15},
+          {__path: 'bar', lines_inserted: 13, lines_deleted: 2},
+        ];
+        assert.equal(element._computeSizeBarScale({base: files}), 15);
+
+        files.push({__path: 'baz', lines_inserted: 123, lines_deleted: 0});
+        assert.equal(element._computeSizeBarScale({base: files}), 123);
+
+        files.push(
+            {__path: '/COMMIT_MSG', lines_inserted: 12345, lines_deleted: 0});
+        assert.equal(element._computeSizeBarScale({base: files}), 123);
+      });
+
+      test('_computeSizeBarWidth', () => {
+        assert.equal(element._computeSizeBarWidth(1000, 1000), 50);
+        assert.equal(element._computeSizeBarWidth(1000, 1), 1.5);
+        assert.equal(element._computeSizeBarWidth(2, 1), 25);
+      });
+
+      test('_computeSizeBarsClass', () => {
+        assert.equal(element._computeSizeBarsClass(false, 'foo/bar.baz'),
+            'sizeBars desktop hide');
+        assert.equal(element._computeSizeBarsClass(true, '/COMMIT_MSG'),
+            'sizeBars desktop invisible');
+        assert.equal(element._computeSizeBarsClass(true, 'foo/bar.baz'),
+            'sizeBars desktop ');
+      });
+    });
   });
 
   suite('gr-file-list inline diff tests', () => {

polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html

@@ -176,6 +176,16 @@ limitations under the License.
               </gr-select>
             </span>
           </section>
+          <section>
+            <span class="title">Show size bars in file list</span>
+            <span class="value">
+              <input
+                  id="showSizeBarsInFileList"
+                  type="checkbox"
+                  checked$="[[_localPrefs.size_bar_in_change_table]]"
+                  on-change="_handleShowSizeBarsInFileListChanged">
+            </span>
+          </section>
           <section>
             <span class="title">Publish comments on push</span>
             <span class="value">

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

@@ -23,6 +23,7 @@
     'publish_comments_on_push',
     'signed_off_by',
     'email_format',
+    'size_bar_in_change_table',
   ];
 
   const GERRIT_DOCS_BASE_URL = 'https://gerrit-review.googlesource.com/' +
@@ -258,6 +259,11 @@
       this._diffPrefsChanged = true;
     },
 
+    _handleShowSizeBarsInFileListChanged() {
+      this.set('_localPrefs.size_bar_in_change_table',
+          this.$.showSizeBarsInFileList.checked);
+    },
+
     _handlePublishCommentsOnPushChanged() {
       this.set('_localPrefs.publish_comments_on_push',
           this.$.publishCommentsOnPush.checked);

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

@@ -87,6 +87,7 @@ limitations under the License.
         diff_view: 'UNIFIED_DIFF',
         email_strategy: 'ENABLED',
         email_format: 'HTML_PLAINTEXT',
+        size_bar_in_change_table: true,
 
         my: [
           {url: '/first/url', name: 'first name', target: '_blank'},
@@ -168,6 +169,8 @@ limitations under the License.
           .firstElementChild.bindValue, preferences.email_format);
       assert.equal(valueOf('Diff view', 'preferences')
           .firstElementChild.bindValue, preferences.diff_view);
+      assert.equal(valueOf('Show size bars in file list', 'preferences')
+          .firstElementChild.checked, true);
       assert.equal(valueOf('Publish comments on push', 'preferences')
           .firstElementChild.checked, false);
       assert.equal(valueOf(

polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js

@@ -766,6 +766,7 @@
           default_diff_view: this._isNarrowScreen() ?
               DiffViewMode.UNIFIED : DiffViewMode.SIDE_BY_SIDE,
           diff_view: 'SIDE_BY_SIDE',
+          size_bar_in_change_table: true,
         });
       });
     },