WebUI: restrict cr-dialogs max-height to the viewport.

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview 'cr-dialog' is a component for showing a modal dialog. If the
  * dialog is closed via close(), a 'close' event is fired. If the dialog is
  * canceled via cancel(), a 'cancel' event is fired followed by a 'close' event.
  * Additionally clients can inspect the dialog's |returnValue| property inside
  * the 'close' event listener to determine whether it was canceled or just
@@ skipping 46 matching lines @@
     // all open dialogs should be cancelled.
     window.addEventListener('popstate', function() {
       if (!this.ignorePopstate && this.open)
         this.cancel();
     }.bind(this));
 
     if (!this.ignoreEnterKey)
       this.addEventListener('keypress', this.onKeypress_.bind(this));
   },
 
+  /** @private {Function} */
+  onResize_: null,
+
   /** @override */
   attached: function() {
     if (!this.showScrollBorders)
       return;
 
     this.mutationObserver_ = new MutationObserver(function() {
       if (this.open) {
         this.addIntersectionObserver_();
+        this.adjustHeight_();
+
+        this.onResize_ = this.adjustHeight_.bind(this);
+        window.addEventListener('resize', this.onResize_);
       } else {
         this.removeIntersectionObserver_();
       }
     }.bind(this));
 
     this.mutationObserver_.observe(this, {
       attributes: true,
       attributeFilter: ['open'],
     });
   },
 
   /** @override */
   detached: function() {
     this.removeIntersectionObserver_();
     if (this.mutationObserver_) {
       this.mutationObserver_.disconnect();
       this.mutationObserver_ = null;
     }
+    window.removeEventListener('resize', this.onResize_);
+  },
+
+  adjustHeight_: function() {

[dpapad, 2017/04/27 22:33:24]

Can we add a test for the auto-shrink logic? Also, does this look jarring to the
user (things jump around)?

[scottchen, 2017/04/28 23:12:55]

It did not jump around. 
However, based on our offline conversation I've switched to a more manageable
CSS-only solution.

+    // Try to first render with just CSS styling.
+    this.$$('.body-container').style.maxHeight = null;
+
+    var delta = this.offsetHeight - window.innerHeight;
+
+    // If dialog is taller than visible viewport height, shrink by difference.
+    if (delta > 0) {
+      this.$$('.body-container').style.maxHeight =
+          (this.$$('.body-container').offsetHeight - delta) + 'px';
+    }
   },
 
   /** @private */
   addIntersectionObserver_: function() {
     if (this.intersectionObserver_)
       return;
 
     var bodyContainer = this.$$('.body-container');
 
     var bottomMarker = this.$.bodyBottomMarker;
@@ skipping 62 matching lines @@
       return;
 
     var actionButton =
         this.querySelector('.action-button:not([disabled]):not([hidden])');
     if (actionButton) {
       actionButton.click();
       e.preventDefault();
     }
   },
 });