Limit Feedback dialog height to the available screen area

This CL limits the height of the Feedback dialog to the maximum
available height of the user's screen.

This CL also fixes the cancel / show buttons to the bottom of the
window so that they remain visible in the overflow state.

Also fixes a mismatch in feedback height constants.

Dialog with overflow:
https://drive.google.com/file/d/1tPJumvN2NmlSj5pI5htr18QHBJKCi6W9/view?usp=sharing

Dialog with no overflow:
https://drive.google.com/file/d/1OB1arIhF4t0cWfKZdTYGrmuk2vCWcczR/view?usp=sharing

Bug: 1065889
Change-Id: If49afa489445df770063d3b7feda889900bcfdcb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2586759Reviewed-by: Miriam Zimmerman <mutexlox@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Thomas Lukaszewicz <tluk@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837686}

chrome/browser/resources/feedback/css/feedback.css

@@ -13,7 +13,6 @@ body {
   flex-direction: column;
   height: 100%;
   margin: 0;
-  overflow: auto;
   padding: 0;
   width: 100%;
 }
@@ -29,6 +28,7 @@ body {
   box-shadow: 0 1px #d0d0d0;
   color: rgb(80, 80, 82);
   display: -webkit-flex;
+  flex-grow: 0;
   font-size: 15px;
   min-height: 48px;
 }
@@ -42,11 +42,16 @@ body {
   -webkit-flex: 0 1 auto;
 }
 
+#content-pane {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: auto;
+  padding: 20px;
+}
+
 .content {
   color: #444;
-  flex-grow: 1;
   font-size: 12px;
-  margin: 20px;
 }
 
 .content #free-form-text {
@@ -180,14 +185,13 @@ body {
 }
 
 #bottom-buttons-container {
+  box-shadow: 0 -1px #d0d0d0;
   margin: 0;
+  padding: 0 20px;
 }
 
 .content .bottom-buttons {
-  margin-bottom: 20px;
-  margin-inline-end: 20px;
-  margin-inline-start: 20px;
-  margin-top: 0;
+  margin: 20px;
   position: static;
 }
 

chrome/browser/resources/feedback/js/event_handler.js

@@ -9,11 +9,6 @@
  * @const
  */
 const FEEDBACK_WIDTH = 500;
-/**
- * @type {number}
- * @const
- */
-const FEEDBACK_HEIGHT = 610;
 
 /**
  * @type {string}
@@ -288,7 +283,9 @@ function startFeedbackUI(feedbackInfo) {
         id: FEEDBACK_DEFAULT_WINDOW_ID,
         innerBounds: {
           minWidth: FEEDBACK_WIDTH,
-          minHeight: FEEDBACK_HEIGHT,
+        },
+        outerBounds: {
+          maxHeight: window.screen.availHeight,
         },
         hidden: true,
         resizable: false

chrome/browser/resources/feedback/js/feedback.js

@@ -17,7 +17,7 @@ const FEEDBACK_MIN_WIDTH = 500;
  * @type {number}
  * @const
  */
-const FEEDBACK_MIN_HEIGHT = 585;
+const FEEDBACK_MIN_HEIGHT = 610;
 
 /**
  * @type {number}
@@ -329,11 +329,16 @@ function resizeAppWindow() {
     width = FEEDBACK_MIN_WIDTH;
   }
 
-  // Note: If the display is shorter than this (e.g. if the user has it set to
-  // largest display size), the chrome app api(?) will cap the height of the
-  // window at the height of the screen and add a scroll bar. If we switch away
-  // from chrome apps, make sure that this behavior is the same.
-  let height = document.body.scrollHeight;
+  // The Chrome App window's maxHeight is set to the available screen height. If
+  // |height| would result in a window that exceeds maxHeight a scrollbar will
+  // appear in the content-pane.
+  // |height| is calculated as the sum of the scrollHeights of the body's
+  // children. This is necessary as the content-pane is set to fill the
+  // remaining height of the body after its siblings have been laid out. Summing
+  // the children's scrollHeight gives us the desired height of the content area
+  // which the Chrome App window uses to size the window accordingly.
+  let height = Array.from(document.body.children)
+                   .reduce((acc, el) => acc + el.scrollHeight, 0);
 
   let minHeight = FEEDBACK_MIN_HEIGHT;
   if (feedbackInfo.flow == chrome.feedbackPrivate.FeedbackFlow.LOGIN) {
@@ -341,6 +346,8 @@ function resizeAppWindow() {
   }
   height = Math.max(height, minHeight);
 
+  // Update |outerBounds.maxHeight| in case available screen height has changed.
+  chrome.app.window.current().outerBounds.maxHeight = window.screen.availHeight;
   chrome.app.window.current().innerBounds.width = width;
   chrome.app.window.current().innerBounds.height = height;
 }