Merge "Fix the tab selection bar not showing up after initial page load"

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

@@ -839,7 +839,6 @@
     }
 
     _paramsChanged(value) {
-      // TODO(dhruvsri): Fix underlining of comment tab when page loads
       this._currentView = CommentTabs.CHANGE_LOG;
       this._setPrimaryTab();
       if (value.view !== Gerrit.Nav.View.CHANGE) {
@@ -897,11 +896,25 @@
     }
 
     _setPrimaryTab() {
-      // Selected has to be set after the paper-tabs are visible because
+      // Selected has to be set after the paper-tabs are visible, because
       // the selected underline depends on calculations made by the browser.
-      this.$.commentTabs.selected = 0;
+      // paper-tabs depends on iron-resizable-behavior, which only fires on
-      const primaryTabs = this.shadowRoot.querySelector('#primaryTabs');
+      // attached() without using RenderStatus.beforeNextRender. Not changing
-      if (primaryTabs) primaryTabs.selected = 0;
+      // this when migrating from Polymer 1 to 2 was probably an oversight by
+      // the paper component maintainers.
+      // https://polymer-library.polymer-project.org/2.0/docs/upgrade#attach-time-attached-connectedcallback
+      // By calling _onTabSizingChanged() we are reaching into the private API
+      // of paper-tabs, but we believe this workaround is acceptable for the
+      // time being.
+      Polymer.RenderStatus.beforeNextRender(this, () => {
+        this.$.commentTabs.selected = 0;
+        this.$.commentTabs._onTabSizingChanged();
+        const primaryTabs = this.shadowRoot.querySelector('#primaryTabs');
+        if (primaryTabs) {
+          primaryTabs.selected = 0;
+          primaryTabs._onTabSizingChanged();
+        }
+      });
     }
 
     _performPostLoadTasks() {

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

@@ -640,23 +640,21 @@ limitations under the License.
 
       test('tab switch works correctly', done => {
         assert.isTrue(element._paramsChanged.called);
-        assert.equal(element.$.commentTabs.selected, CommentTabs.CHANGE_LOG);
 
         // Wait for tab to get selected
         flush(() => {
           assert.equal(element.$.commentTabs.selected, CommentTabs.CHANGE_LOG);
           assert.equal(element._currentView, CommentTabs.CHANGE_LOG);
+
           // Switch to comment thread tab
           MockInteractions.tap(element.$$('paper-tab.commentThreads'));
-          assert.equal(element.$.commentTabs.selected, 1);
+          assert.equal(element.$.commentTabs.selected,
+              CommentTabs.COMMENT_THREADS);
           assert.equal(element._currentView, CommentTabs.COMMENT_THREADS);
 
+          // Switch back to 'Change Log' tab
           element._paramsChanged(element.params);
-          assert.equal(element.$.commentTabs.selected,
-              CommentTabs.CHANGE_LOG);
-          assert.equal(element._currentView, CommentTabs.CHANGE_LOG);
           flush(() => {
-            // Correct tab is selected after the patchset is changed
             assert.equal(element.$.commentTabs.selected,
                 CommentTabs.CHANGE_LOG);
             assert.equal(element._currentView, CommentTabs.CHANGE_LOG);