CCA: Ensure mode items not faded when scroll to end

Ensure mode item on two ends won't be faded when scroll to the that
end by setting start/end margin on |.first| and |.last| mode item to
fading width.

Remove the useless |#modes-group.hide| rule for guarding mode update
jumping at first launch for it's guarded by splash page now.

Bug: b/176209338
Test: Manually
Change-Id: I34dc8f4023ac16b4fc76678c89c3bda9459dbdf6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2602036
Commit-Queue: Inker Kuo <inker@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Auto-Submit: Inker Kuo <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#839311}

chromeos/components/camera_app_ui/resources/css/main.css

@@ -332,6 +332,14 @@ body.playing-result-video #play-result-video {
   display: none;
 }
 
+#modes-group .mode-item.first {
+  margin-inline-start: var(--fade-padding);
+}
+
+#modes-group .mode-item.last {
+  margin-inline-end: var(--fade-padding);
+}
+
 div.mode-item>span {
   border-radius: 16px/50%;
   color: white;
@@ -344,10 +352,6 @@ div.mode-item>span {
   z-index: 0;
 }
 
-#modes-group.hide {
-  visibility: hidden;
-}
-
 .mode-item>input {
   height: 100%;
   position: absolute;

chromeos/components/camera_app_ui/resources/js/views/camera/mode/index.js

@@ -344,14 +344,25 @@ export class Modes {
    */
   async updateModeSelectionUI(deviceId) {
     const supportedModes = await this.getSupportedModes(deviceId);
-    dom.getAll('div.mode-item', HTMLDivElement).forEach((element) => {
-      const radio = dom.getFrom(element, 'input[type=radio]', HTMLInputElement);
-      element.classList.toggle(
-          'hide',
-          !supportedModes.includes(
-              /** @type {!Mode} */ (radio.dataset['mode'])));
+    const items = dom.getAll('div.mode-item', HTMLDivElement);
+    let first = null;
+    let last = null;
+    items.forEach((el) => {
+      const radio = dom.getFrom(el, 'input[type=radio]', HTMLInputElement);
+      const supported =
+          supportedModes.includes(/** @type {!Mode} */ (radio.dataset['mode']));
+      el.classList.toggle('hide', !supported);
+      if (supported) {
+        if (first === null) {
+          first = el;
+        }
+        last = el;
+      }
+    });
+    items.forEach((el) => {
+      el.classList.toggle('first', el === first);
+      el.classList.toggle('last', el === last);
     });
-    this.modesGroup_.classList.remove('hide');
   }
 
   /**

chromeos/components/camera_app_ui/resources/views/main.html

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