CCA: Use calculated default window size

The calculation of default window size is based on fixing width to 764px
in all preview aspect ratio cases(3:4, 4:3, 9:16, 16:9) and deriving
height from that fixed width so that after preserve space for left,
right, bottom icons(--xxx-line*2), the |#preview-box| can fit in preview
aspect ratio as close as possible. After these, the new default window
size under different preview aspect ratio will be: 3:4 -> 764x888; 4:3
-> 764x552; 9:16 -> 764x1144; 16:9 -> 764x444. Also change the minimal
window width x height to 486 x 444 accordingly.

Bug: b/175324385
Test: Manually verify default window size under 3:4, 4:3, 9:16, 16:9
preview.

Change-Id: Ic4c569819f29b813029f478e6920f66453ab4792
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2615730Reviewed-by: Shik Chen <shik@chromium.org>
Commit-Queue: Inker Kuo <inker@chromium.org>
Auto-Submit: Inker Kuo <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#843399}

chrome/browser/chromeos/web_applications/chrome_camera_app_ui_constants.h

@@ -6,9 +6,9 @@
 #define CHROME_BROWSER_CHROMEOS_WEB_APPLICATIONS_CHROME_CAMERA_APP_UI_CONSTANTS_H_
 
 // All window size number here are referred to inner size excluding top bar.
-constexpr int kChromeCameraAppDefaultWidth = 788;
-constexpr int kChromeCameraAppDefaultHeight = 428;
-constexpr int kChromeCameraAppMinimumWidth = 505;
-constexpr int kChromeCameraAppMinimumHeight = 428;
+constexpr int kChromeCameraAppDefaultWidth = 764;
+constexpr int kChromeCameraAppDefaultHeight = 412;
+constexpr int kChromeCameraAppMinimumWidth = 486;
+constexpr int kChromeCameraAppMinimumHeight = 412;
 
 #endif  // CHROME_BROWSER_CHROMEOS_WEB_APPLICATIONS_CHROME_CAMERA_APP_UI_CONSTANTS_H_

chromeos/components/camera_app_ui/resources/js/app_window.js

@@ -2,21 +2,37 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// eslint-disable-next-line no-unused-vars
+import * as dom from './dom.js';
 import {
   ErrorInfo,  // eslint-disable-line no-unused-vars
   PerfEntry,  // eslint-disable-line no-unused-vars
   PerfEvent,
+  Resolution,
 } from './type.js';
 import {WaitableEvent} from './waitable_event.js';
 
 const TOP_BAR_HEIGHT = 32;
 
-// Default window outer size when using 4x3 camera preview.
-export const DEFAULT_PREVIEW_4X3_WINDOW_SIZE = [788, 538 + TOP_BAR_HEIGHT];
+const DEFAULT_WINDOW_WIDTH = 764;
 
-// Default window outer size when using 16x9 camera preview.
-export const DEFAULT_PREVIEW_16X9_WINDOW_SIZE = [788, 428 + TOP_BAR_HEIGHT];
+/**
+ * Gets default window size which minimizes the letterbox area for given preview
+ * aspect ratio.
+ * @param {number} aspectRatio Preview aspect ratio.
+ * @return {!Resolution}
+ */
+export function getDefaultWindowSize(aspectRatio) {
+  const style = getComputedStyle(dom.get('#preview-box', HTMLDivElement));
+  const bottom = parseInt(style.bottom, 10);
+  const left = parseInt(style.left, 10);
+  const right = parseInt(style.right, 10);
+
+  return new Resolution(
+      DEFAULT_WINDOW_WIDTH,
+      Math.round(
+          (DEFAULT_WINDOW_WIDTH - (left + right)) / aspectRatio + bottom +
+          TOP_BAR_HEIGHT));
+}
 
 /**
  * Class which is used to coordinate the setup of window between Tast side and

chromeos/components/camera_app_ui/resources/js/background.js

@@ -4,7 +4,7 @@
 
 import {
   AppWindow,  // eslint-disable-line no-unused-vars
-  DEFAULT_PREVIEW_16X9_WINDOW_SIZE,
+  getDefaultWindowSize,
 } from './app_window.js';
 import {
   BackgroundOps,  // eslint-disable-line no-unused-vars
@@ -31,18 +31,6 @@ const MIN_WIDTH = 505;
  */
 const MIN_HEIGHT = 460;
 
-/**
- * Default width of inner-bounds in pixels.
- * @type {number}
- */
-const DEFAULT_WIDTH = DEFAULT_PREVIEW_16X9_WINDOW_SIZE[0];
-
-/**
- * Default height of inner-bounds in pixels.
- * @type {number}
- */
-const DEFAULT_HEIGHT = DEFAULT_PREVIEW_16X9_WINDOW_SIZE[1];
-
 /**
  * Top bar color of the window.
  * @type {string}
@@ -196,6 +184,9 @@ class CCAWindow {
         this.intent_ !== null ? `main-${this.intent_.intentId}` : 'main';
     const windowUrl = 'views/main.html' +
         (this.intent_ !== null ? this.intent_.url.search : '');
+    const isPortrait = screen.orientation.type.startsWith('portrait');
+    const {width: defaultWidth, height: defaultHeight} =
+        getDefaultWindowSize(isPortrait ? 9 / 16 : 16 / 9);
 
     chrome.app.window.create(
         windowUrl, {
@@ -203,12 +194,12 @@ class CCAWindow {
           frame: {color: TOPBAR_COLOR},
           hidden: true,  // Will be shown from main.js once loaded.
           innerBounds: {
-            width: DEFAULT_WIDTH,
-            height: DEFAULT_HEIGHT,
+            width: defaultWidth,
+            height: defaultHeight,
             minHeight: MIN_HEIGHT,
             minWidth: MIN_WIDTH,
-            left: Math.round((window.screen.availWidth - DEFAULT_WIDTH) / 2),
-            top: Math.round((window.screen.availHeight - DEFAULT_HEIGHT) / 2),
+            left: Math.round((window.screen.availWidth - defaultWidth) / 2),
+            top: Math.round((window.screen.availHeight - defaultHeight) / 2),
           },
         },
         (appWindow) => {

chromeos/components/camera_app_ui/resources/js/main.js

@@ -4,8 +4,7 @@
 
 import {
   AppWindow,  // eslint-disable-line no-unused-vars
-  DEFAULT_PREVIEW_16X9_WINDOW_SIZE,
-  DEFAULT_PREVIEW_4X3_WINDOW_SIZE,
+  getDefaultWindowSize,
 } from './app_window.js';
 import {
   BackgroundOps,  // eslint-disable-line no-unused-vars
@@ -262,11 +261,8 @@ export class App {
 
       if (isSuccess) {
         const aspectRatio = this.cameraView_.getPreviewAspectRatio();
-        if (Math.abs(4 / 3 - aspectRatio) < Math.abs(16 / 9 - aspectRatio)) {
-          window.resizeTo(...DEFAULT_PREVIEW_4X3_WINDOW_SIZE);
-        } else {
-          window.resizeTo(...DEFAULT_PREVIEW_16X9_WINDOW_SIZE);
-        }
+        const {width, height} = getDefaultWindowSize(aspectRatio);
+        window.resizeTo(width, height);
       }
 
       nav.close(ViewName.SPLASH);