diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index 90d99978b4..02b017bdae 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -190,10 +190,6 @@ limitations under the License.
height: 0;
margin-bottom: var(--spacing-l);
}
- #commitMessage.collapsed {
- max-height: 36em;
- overflow: hidden;
- }
#relatedChanges.collapsed {
margin-bottom: var(--spacing-l);
max-height: var(--relation-chain-max-height, 2em);
@@ -449,12 +445,13 @@ limitations under the License.
+ class="commitMessage">
+ remove-zero-width-space
+ collapsed$="[[_computeCommitMessageCollapsed(_commitCollapsed, _commitCollapsible)]]">
+ hidden$="[[!_commitCollapsible]]">
= MIN_LINES_FOR_COMMIT_COLLAPSE;
}
_getOffsetHeight(element) {
@@ -1658,8 +1666,6 @@
// bottom margin.
const EXTRA_HEIGHT = 30;
let newHeight;
- const hasCommitToggle =
- !this._computeCommitToggleHidden(this._latestCommitMessage);
if (window.matchMedia(`(max-width: ${BREAKPOINT_RELATED_SMALL})`)
.matches) {
@@ -1678,7 +1684,7 @@
MINIMUM_RELATED_MAX_HEIGHT);
newHeight = medRelatedHeight;
} else {
- if (hasCommitToggle) {
+ if (this._commitCollapsible) {
// 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.
@@ -1701,7 +1707,7 @@
stylesToUpdate['--relation-chain-max-height'] = newHeight + 'px';
// Update the max-height of the relation chain to this new height.
- if (hasCommitToggle) {
+ if (this._commitCollapsible) {
stylesToUpdate['--related-change-btn-top-padding'] = remainder + 'px';
}
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
index 9c23d0ec8f..1ef79cf567 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
@@ -1238,14 +1238,16 @@ limitations under the License.
});
test('commitCollapseToggle functions', () => {
- element._latestCommitMessage = _.times(31, String).join('\n');
+ element._latestCommitMessage = _.times(35, String).join('\n');
assert.isTrue(element._commitCollapsed);
+ assert.isTrue(element._commitCollapsible);
assert.isTrue(
- element.$.commitMessage.classList.contains('collapsed'));
+ element.$.commitMessageEditor.hasAttribute('collapsed'));
MockInteractions.tap(element.$.commitCollapseToggleButton);
assert.isFalse(element._commitCollapsed);
+ assert.isTrue(element._commitCollapsible);
assert.isFalse(
- element.$.commitMessage.classList.contains('collapsed'));
+ element.$.commitMessageEditor.hasAttribute('collapsed'));
});
});
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
index 69c280b43e..627f9482cf 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
@@ -38,6 +38,10 @@ limitations under the License.
box-shadow: var(--elevation-level-1);
padding: var(--spacing-m);
}
+ :host([collapsed]) .viewer {
+ max-height: 36em;
+ overflow: hidden;
+ }
.editor iron-autogrow-textarea {
background-color: var(--view-background-color);
width: 100%;