Merge "Fix related changes height calculations"

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

@@ -1196,9 +1196,8 @@
      */
     _updateRelatedChangeMaxHeight() {
       // Takes into account approximate height for the expand button and
-      // bottom margin
+      // bottom margin.
-      const extraHeight = 24;
+      const EXTRA_HEIGHT = 30;
-      let maxExistingHeight;
       let newHeight;
       const hasCommitToggle =
           !this._computeCommitToggleHidden(this._latestCommitMessage);
@@ -1216,7 +1215,7 @@
         // Note: extraHeight is to take into account margin/padding.
         const medRelatedHeight = Math.max(
             this._getOffsetHeight(this.$.mainChangeInfo) -
-            this._getOffsetHeight(this.$.commitMessage) - 2 * extraHeight,
+            this._getOffsetHeight(this.$.commitMessage) - 2 * EXTRA_HEIGHT,
             MINIMUM_RELATED_MAX_HEIGHT);
         newHeight = medRelatedHeight;
       } else {
@@ -1224,29 +1223,30 @@
           // Make sure the content is lined up if both areas have buttons. If
           // the commit message is not collapsed, instead use the change info
           // height.
-          maxExistingHeight = this._getOffsetHeight(this.$.commitMessage);
+          newHeight = this._getOffsetHeight(this.$.commitMessage);
         } else {
-          maxExistingHeight = this._getOffsetHeight(this.$.mainChangeInfo) -
+          newHeight = this._getOffsetHeight(this.$.commitAndRelated) -
-              extraHeight;
+              EXTRA_HEIGHT;
-        }
-        // Get the line height of related changes, and convert it to the nearest
-        // integer.
-        const lineHeight = this._getLineHeight(this.$.relatedChanges);
-
-        // Figure out a new height that is divisible by the rounded line height.
-        const remainder = maxExistingHeight % lineHeight;
-        newHeight = maxExistingHeight - remainder;
-
-        // Update the max-height of the relation chain to this new height;
-        if (hasCommitToggle) {
-          this.customStyle['--related-change-btn-top-padding'] =
-            remainder + 'px';
         }
       }
       if (this.$.relatedChanges.hidden) {
         this.customStyle['--commit-message-max-width'] = 'none';
       }
+      // Get the line height of related changes, and convert it to the nearest
+      // integer.
+      const lineHeight = this._getLineHeight(this.$.relatedChanges);
+
+      // Figure out a new height that is divisible by the rounded line height.
+      const remainder = newHeight % lineHeight;
+      newHeight = newHeight - remainder;
+
       this.customStyle['--relation-chain-max-height'] = newHeight + 'px';
+
+      // Update the max-height of the relation chain to this new height.
+      if (hasCommitToggle) {
+        this.customStyle['--related-change-btn-top-padding'] =
+          remainder + 'px';
+      }
       this.updateStyles();
     },
 

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

@@ -1203,13 +1203,13 @@ limitations under the License.
         sandbox.stub(element, '_getLineHeight', () => 12);
         sandbox.stub(window, 'matchMedia', () => ({matches: false}));
 
-        // 50 (existing height) - 24 (extra height) = 26 (adjusted height).
+        // 50 (existing height) - 30 (extra height) = 20 (adjusted height).
-        // 50 (existing height)  % 12 (line height) = 2 (remainder).
+        // 20 (max existing height)  % 12 (line height) = 6 (remainder).
-        // 26 (adjusted height) - 2 (remainder) = 24 (max height to set).
+        // 20 (adjusted height) - 8 (remainder) = 12 (max height to set).
 
         element._updateRelatedChangeMaxHeight();
         assert.equal(element.customStyle['--relation-chain-max-height'],
-            '24px');
+            '12px');
         assert.equal(element.customStyle['--related-change-btn-top-padding'],
             undefined);
       });
@@ -1237,8 +1237,12 @@ limitations under the License.
         sandbox.stub(window, 'matchMedia', () => ({matches: true}));
 
         element._updateRelatedChangeMaxHeight();
+
+        // 400 (new height) % 12 (line height) = 4 (remainder).
+        // 400 (new height) - 4 (remainder) = 396.
+
         assert.equal(element.customStyle['--relation-chain-max-height'],
-            '400px');
+            '396px');
       });
 
       test('_updateRelatedChangeMaxHeight in medium screen mode', () => {
@@ -1253,9 +1257,11 @@ limitations under the License.
           }
         });
 
+        // 100 (new height) % 12 (line height) = 4 (remainder).
+        // 100 (new height) - 4 (remainder) = 96.
         element._updateRelatedChangeMaxHeight();
         assert.equal(element.customStyle['--relation-chain-max-height'],
-            '100px');
+            '96px');
       });