Fix CCA window/preview under square mode bugs.

This CL include following UI changes and bugfixes:
1. Fix CCA window size ratio to 16:9 under all modes.
2. Centered camera-mode icons on preview.
3. Fix bug measuring square mode preview in original video size bug
4. Fix w-letterbox-l not working bug.
5. Fix switch to/from square mode preview position jumping before ready.

Bug: 954672
Change-Id: I580e08db2fec3face310ca7cbf20a3edbfee6422
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1563132Reviewed-by: Sheng-hao Tsao <shenghao@chromium.org>
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Auto-Submit: Kuo Jen Wei <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#653500}

chrome/browser/resources/chromeos/camera/src/css/main.css

@@ -532,7 +532,7 @@ body:not(.w-letterbox).preview-vertical-dock #camera {
   position: relative;
 }
 
-body:.w-letterbox.w-letterbox-l #preview-wrapper {
+body.w-letterbox.w-letterbox-l #preview-wrapper {
   left: 72px;
 }
 
@@ -540,12 +540,12 @@ body:not(.w-letterbox).preview-vertical-dock #preview-wrapper {
   bottom: calc((var(--bottom-line) + (var(--big-icon) / 2)) + 12px);
 }
 
-body:not(.mode-switching).square-mode #preview-wrapper {
+body.square-preview #preview-wrapper {
   height: 0; /* Calculate at runtime. */
   width: 0; /* Calculate at runtime. */
 }
 
-body:not(.mode-switching).square-mode #preview-video {
+body.square-preview #preview-video {
   left: 0; /* Calculate at runtime. */
   position: absolute;
   top: 0; /* Calculate at runtime. */

chrome/browser/resources/chromeos/camera/src/js/views/camera/layout.js

@@ -29,16 +29,16 @@ cca.views.camera.Layout = function() {
    * @type {CSSStyleDeclaration}
    * @private
    */
-  this.squareViewport_ = cca.views.camera.Layout.cssStyle_(
-      'body:not(.mode-switching).square-mode #preview-wrapper');
+  this.squareViewport_ =
+      cca.views.camera.Layout.cssStyle_('body.square-preview #preview-wrapper');
 
   /**
    * CSS style of the video in square mode.
    * @type {CSSStyleDeclaration}
    * @private
    */
-  this.squareVideo_ = cca.views.camera.Layout.cssStyle_(
-      'body:not(.mode-switching).square-mode #preview-video');
+  this.squareVideo_ =
+      cca.views.camera.Layout.cssStyle_('body.square-preview #preview-video');
 
   // End of properties, seal the object.
   Object.seal(this);
@@ -76,13 +76,17 @@ cca.views.camera.Layout.prototype.updatePreviewSize_ = function(fullWindow) {
   // as they are not updated immediately.
   var video = document.querySelector('#preview-video');
   if (video.videoHeight) {
-    var f = fullWindow ? Math.min : Math.max;
-    var scale = f(window.innerHeight / video.videoHeight,
-        window.innerWidth / video.videoWidth);
+    var scale = cca.state.get('square-mode') ?
+        Math.min(window.innerHeight, window.innerWidth) /
+            Math.min(video.videoHeight, video.videoWidth) :
+        Math.min(
+            window.innerHeight / video.videoHeight,
+            window.innerWidth / video.videoWidth);
     video.width = scale * video.videoWidth;
     video.height = scale * video.videoHeight;
   }
   var [viewportW, viewportH] = [video.width, video.height];
+  cca.state.set('square-preview', cca.state.get('square-mode'));
   if (cca.state.get('square-mode')) {
     viewportW = viewportH = Math.min(video.width, video.height);
     this.squareVideo_.setProperty('left', `${(viewportW - video.width) / 2}px`);

chrome/browser/resources/chromeos/camera/src/js/views/camera/preview.js

@@ -219,9 +219,7 @@ cca.views.camera.Preview.prototype.onWindowResize_ = function(aspectRatio) {
     // TODO(yuli): Update min-width for resizing at portrait orientation.
     var inner = chrome.app.window.current().innerBounds;
     var innerW = inner.minWidth;
-    var innerH = cca.state.get('square-mode') ?
-        innerW :
-        Math.round(innerW / this.aspectRatio_);
+    var innerH = Math.round(innerW * 9 / 16);
 
     // Limit window resizing capability by setting min-height. Don't limit
     // max-height here as it may disable maximize/fullscreen capabilities.

chrome/browser/resources/chromeos/camera/src/views/main.html

@@ -54,6 +54,7 @@
                   data="../images/camera_focus_aim.svg"
                   tabindex="-1" hidden></object>
         </div>
+        <div class="centered-overlay" id="camera-mode"></div>
       </div>
       <div id="modes-group" class="buttons right-stripe">
         <label class="mode-item">
@@ -129,7 +130,6 @@
       <div class="centered-overlay">
         <div id="timer-tick-msg"></div>
       </div>
-      <div class="centered-overlay" id="camera-mode"></div>
     </div>
     <div id="settings">
       <div class="menu">