[Media Router] Simplify WebUI element positioning functions.

chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js

Index: chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
diff --git a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
index 0394b7bb4082232609268815a9923c263e24a311..8c2b88fe41f7dfc2540ec89f5060ca7a3a17bee7 100644
--- a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
+++ b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
@@ -53,6 +53,7 @@ Polymer({
     currentView_: {
       type: String,
       value: null,
+      observer: 'updateElementPositioning_',
     },
 
     /**
@@ -261,6 +262,7 @@ Polymer({
     showFirstRunFlow: {
       type: Boolean,
       value: false,
+      observer: 'updateElementPositioning_',
     },
 
     /**
@@ -336,7 +338,6 @@ Polymer({
 
   observers: [
     'maybeUpdateStartSinkDisplayStartTime_(currentView_, sinksToShow_)',
-    'shownComponentsChanged_(showFirstRunFlow, currentView_)'
   ],
 
   ready: function() {
@@ -772,13 +773,10 @@ Polymer({
    * @private
    */
   maybeShowIssueView_: function(issue) {
-    if (!!issue && issue.isBlocking) {
+    if (!!issue && issue.isBlocking)
       this.currentView_ = media_router.MediaRouterView.ISSUE;
-    } else {
-      this.async(function() {
-        this.updateMaxSinkListHeight(this.dialogHeight_);
-      });
-    }
+    else
+      this.updateElementPositioning_();
   },
 
   /**
@@ -1048,31 +1046,6 @@ Polymer({
   },
 
   /**
-   * Updates the top margins of the header and sink list view depending on
-   * whether the first run flow is being shown.
-   *
-   * @param {boolean} showFirstRunFlow Whether or not to show the first run
-   *     flow.
-   * @param {!media_router.MediaRouterView} currentView The current view.
-   * @private
-   */
-  shownComponentsChanged_: function(showFirstRunFlow, currentView) {
-    var headerHeight = this.$$('#container-header').offsetHeight;
-    if (this.computeShowFirstRunFlow_(showFirstRunFlow, currentView)) {
-      // Ensures that first run flow elements have finished stamping.
-      this.async(function() {
-        var firstRunFlowHeight = this.$$('#first-run-flow').offsetHeight;
-        this.$['container-header'].style.marginTop = firstRunFlowHeight + 'px';
-        this.$['sink-list-view'].style.marginTop =
-            firstRunFlowHeight + headerHeight + 'px';
-      });
-    } else {
-      this.$['container-header'].style.marginTop = '0px';
-      this.$['sink-list-view'].style.marginTop = headerHeight + 'px';
-    }
-  },
-
-  /**
    * Creates a new route if there is no route to the |sink| . Otherwise,
    * shows the route details.
    *
@@ -1161,23 +1134,33 @@ Polymer({
    *
    * @param {number} dialogHeight The height of the Media Router dialog.
    */
-  updateMaxSinkListHeight: function(dialogHeight) {
-    this.dialogHeight_ = dialogHeight;
-    var headerHeight = this.$$('#container-header').offsetHeight;
-    var firstRunFlowHeight =
-        this.computeShowFirstRunFlow_(this.showFirstRunFlow,
-                                      this.currentView_) ?
-        this.$$('#first-run-flow').offsetHeight : 0;
-    this.$['container-header'].style.marginTop = firstRunFlowHeight + 'px';
-    this.$['sink-list-view'].style.marginTop =
-        firstRunFlowHeight + headerHeight + 'px';
-
-    // A non-blocking issue banner may appear below the sink list.
-    var issueHeight = this.$$('#issue-banner') ?
-        this.$$('#issue-banner').offsetHeight : 0;
-
-    this.$['sink-list'].style.maxHeight =
-        this.dialogHeight_ - headerHeight - firstRunFlowHeight -
-        issueHeight + 'px';
+  updateElementPositioning_: function() {
+    // Ensures that conditionally templated elements have finished stamping.
+    this.async(function() {
+      var headerHeight = this.$$('#container-header').offsetHeight;
+      var firstRunFlowHeight = this.$$('#first-run-flow') &&
+          this.$$('#first-run-flow').style.display != 'none' ?
+              this.$$('#first-run-flow').offsetHeight : 0;
+      var issueHeight = this.$$('#issue-banner') &&
+          this.$$('#issue-banner').style.display != 'none' ?
+              this.$$('#issue-banner').offsetHeight : 0;
+
+      this.$['container-header'].style.marginTop = firstRunFlowHeight + 'px';
+      this.$['sink-list-view'].style.marginTop =
+          firstRunFlowHeight + headerHeight + 'px';
+      this.$['sink-list'].style.maxHeight =
+          this.dialogHeight_ - headerHeight - firstRunFlowHeight -
+              issueHeight + 'px';
+    });
+  },
+
+  /**
+   * Update the max dialog height and update the positioning of the elements.
+   *
+   * @param {number} height The max height of the Media Router dialog.
+   */
+  updateMaxDialogHeight: function(height) {
+    this.dialogHeight_ = height;
+    this.updateElementPositioning_();
   },
 });