[CCA] Use better selector for resolution items.

Use photo-item/video-item for item showing selected photo/video
resolution. Use title-item for title of external camera.

Test: tast run <DUT> 'camera.CCAUI*'
Bug: b/141518780
Change-Id: Ie4bb9eb89e5b6c1fc17b3b0bc2d9055227f52b89
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1905295
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Auto-Submit: Kuo Jen Wei <inker@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714843}

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

@@ -437,8 +437,8 @@ cca.views.ResolutionSettings.prototype.updateResolutions_ = function() {
   const prevFId = prevFocus && prevFocus.dataset.deviceId;
   const /** number */ focusIdx =
       this.externalSettings_.findIndex(({deviceId}) => deviceId === prevFId);
-  const fTitle = /** @type {?HTMLElement} */ (
-      this.resMenu_.querySelector(`.menu-item[data-device-id="${prevFId}"]`));
+  const fTitle = /** @type {?HTMLElement} */ (this.resMenu_.querySelector(
+      `.external-camera.title-item[data-device-id="${prevFId}"]`));
   /** @type {?string} */
   const focusedId = focusIdx === -1 ? null : prevFId;
 
@@ -515,8 +515,8 @@ cca.views.ResolutionSettings.prototype.updateSelectedPhotoResolution_ =
   } else if (this.backsetting_ && this.backsetting_.deviceId === deviceId) {
     photoItem = this.backPhotoItem_;
   } else {
-    photoItem = /** @type {!HTMLElement} */ (this.resMenu_.querySelectorAll(
-        `.menu-item[data-device-id="${deviceId}"]`)[1]);
+    photoItem = /** @type {!HTMLElement} */ (this.resMenu_.querySelector(
+        `.menu-item.photo-item[data-device-id="${deviceId}"]`));
   }
   photoItem.querySelector('.description>span').textContent =
       this.photoOptTextTempl_(photo.prefResol, photo.resols);
@@ -549,8 +549,8 @@ cca.views.ResolutionSettings.prototype.updateSelectedVideoResolution_ =
   } else if (this.backSetting_ && this.backSetting_.deviceId === deviceId) {
     videoItem = this.backVideoItem_;
   } else {
-    videoItem = /** @type {!HTMLElement} */ (this.resMenu_.querySelectorAll(
-        `.menu-item[data-device-id="${deviceId}"]`)[1]);
+    videoItem = /** @type {!HTMLElement} */ (this.resMenu_.querySelector(
+        `.menu-item.video-item[data-device-id="${deviceId}"]`));
   }
   videoItem.querySelector('.description>span').textContent =
       this.videoOptTextTempl_(video.prefResol);

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

@@ -298,7 +298,7 @@
         </div>
         <div id="builtin-photo-header" class="menu-item"
           i18n-content="label_switch_take_photo_button"></div>
-        <button class="menu-item resol-item"
+        <button class="menu-item resol-item photo-item"
                 id="settings-front-photores" tabindex="0"
                 aria-describedby="front-photores-desc">
           <div>
@@ -310,7 +310,7 @@
           </div>
           <div class="icon end"></div>
         </button>
-        <button class="menu-item resol-item"
+        <button class="menu-item resol-item photo-item"
                 id="settings-back-photores" tabindex="0"
                 aria-describedby="back-photores-desc">
           <div>
@@ -323,7 +323,7 @@
         </button>
         <div id="builtin-video-header" class="menu-item"
           i18n-content="label_switch_record_video_button"></div>
-        <button class="menu-item resol-item"
+        <button class="menu-item resol-item video-item"
                 id="settings-front-videores" tabindex="0"
                 aria-describedby="front-videores-desc">
           <div>
@@ -334,7 +334,7 @@
           </div>
           <div class="icon end"></div>
         </button>
-        <button class="menu-item resol-item"
+        <button class="menu-item resol-item video-item"
                 id="settings-back-videores" tabindex="0"
                 aria-describedby="back-videores-desc">
           <div>
@@ -432,9 +432,9 @@
       </label>
     </template>
     <template id="extcam-resolution-item-template">
-        <div class="menu-item external-camera"
+        <div class="menu-item external-camera title-item"
           i18n-content="label_external_camera"></div>
-        <button class="menu-item resol-item external-camera"
+        <button class="menu-item external-camera resol-item photo-item"
               tabindex="0">
           <div>
             <div i18n-content="photo_resolution_button"></div>
@@ -444,7 +444,7 @@
           </div>
           <div class="icon end"></div>
         </button>
-        <button class="menu-item resol-item external-camera"
+        <button class="menu-item external-camera resol-item video-item"
               tabindex="0">
           <div>
             <div i18n-content="video_resolution_button"></div>