Merge "Lazy load edit controls in file list header"
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
index 05a3ae5..0b29298 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
@@ -2129,7 +2129,8 @@
_handleFileActionTap(e) {
e.preventDefault();
- const controls = this.$.fileListHeader.$.editControls;
+ const controls = this.$.fileListHeader
+ .shadowRoot.querySelector('#editControls');
const path = e.detail.path;
switch (e.detail.action) {
case GrEditConstants.Actions.DELETE.id:
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.js b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.js
index 6667ddb..d0b91e2 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.js
@@ -2000,7 +2000,10 @@
};
const fileList = element.$.fileList;
const Actions = GrEditConstants.Actions;
- const controls = element.$.fileListHeader.$.editControls;
+ element.$.fileListHeader.editMode = true;
+ flushAsynchronousOperations();
+ const controls = element.$.fileListHeader
+ .shadowRoot.querySelector('#editControls');
sandbox.stub(controls, 'openDeleteDialog');
sandbox.stub(controls, 'openRenameDialog');
sandbox.stub(controls, 'openRestoreDialog');
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.js b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.js
index 10b8606..bb04114 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.js
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.js
@@ -188,14 +188,16 @@
</div>
</div>
<div class$="rightControls [[_computeExpandedClass(filesExpanded)]]">
- <span class="showOnEdit flexContainer">
- <gr-edit-controls
- id="editControls"
- patch-num="[[patchNum]]"
- change="[[change]]"
- ></gr-edit-controls>
- <span class="separator"></span>
- </span>
+ <template is="dom-if" if="[[editMode]]">
+ <span class="showOnEdit flexContainer">
+ <gr-edit-controls
+ id="editControls"
+ patch-num="[[patchNum]]"
+ change="[[change]]"
+ ></gr-edit-controls>
+ <span class="separator"></span>
+ </span>
+ </template>
<span class$="[[_computeUploadHelpContainerClass(change, account)]]">
<gr-button link="" class="upload" on-click="_handleUploadTap"
>Update Change</gr-button
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.html b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.html
index 19362d5..2a5a302 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.html
@@ -299,13 +299,22 @@
});
test('edit-controls visibility', () => {
+ element.editMode = false;
+ flushAsynchronousOperations();
+ // on the first render, when editMode is false, editControls are not
+ // in the DOM to reduce size of DOM and make first render faster.
+ assert.isNull(element.shadowRoot
+ .querySelector('#editControls'));
+
element.editMode = true;
flushAsynchronousOperations();
- assert.isTrue(isVisible(element.$.editControls.parentElement));
+ assert.isTrue(isVisible(element.shadowRoot
+ .querySelector('#editControls').parentElement));
element.editMode = false;
flushAsynchronousOperations();
- assert.isFalse(isVisible(element.$.editControls.parentElement));
+ assert.isFalse(isVisible(element.shadowRoot
+ .querySelector('#editControls').parentElement));
});
test('_computeUploadHelpContainerClass', () => {
