[CCA] Hide portrait mode button when app start up.

Bug: 988898
Change-Id: Ib8808652383e7f1680d2f14cf4ca202686c3e471
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1727524
Auto-Submit: Kuo Jen Wei <inker@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#682589}

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

@@ -249,6 +249,10 @@ div.mode-item>span {
   z-index: 0;
 }
 
+.mode-item.hide {
+  display: none;
+}
+
 .mode-item>input {
   height: 100%;
   position: absolute;

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

@@ -332,8 +332,8 @@ cca.views.camera.Modes.prototype.updateModeSelectionUI = function(
     supportedModes) {
   document.querySelectorAll('.mode-item').forEach((element) => {
     const radio = element.querySelector('input[type=radio]');
-    element.style.display =
-        supportedModes.includes(radio.dataset.mode) ? '' : 'none';
+    element.classList.toggle(
+        'hide', !supportedModes.includes(radio.dataset.mode));
   });
 };
 

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

@@ -96,7 +96,7 @@
           <span i18n-content="label_switch_take_square_photo_button"
                 aria-hidden="true"></span>
         </div>
-        <div class="mode-item">
+        <div class="mode-item hide">
           <input type="radio" name="mode"
                data-mode="portrait-mode" tabindex="0"
                i18n-aria="switch_take_portrait_photo_button">