CCA: Add console perf logger in expert mode

This CL allows users to enable/disable performance logging in console
via expert mode.

Bug: b/141518806
Test: Run CCA and toggle the button in expert mode and see performance
logs in console.

Change-Id: I67cdc2db8151ea07282b0b5e9891d68cb51bee44
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2035478
Commit-Queue: Wei Lee <wtlee@chromium.org>
Commit-Queue: Shik Chen <shik@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Auto-Submit: Wei Lee <wtlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#739335}

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

@@ -289,6 +289,15 @@ document.addEventListener('DOMContentLoaded', async () => {
       }
     });
   });
+
+  // Setup for console perf logger.
+  perfLogger.addListener((event, duration, extras) => {
+    if (state.get(state.State.PRINT_PERFORMANCE_LOGS)) {
+      // eslint-disable-next-line no-console
+      console.log(`Event: ${event}, Duration: ${duration} ms`, extras);
+    }
+  });
+
   instance = new App(
       /** @type {!BackgroundOps} */ (bgOps));
   await instance.start();

chrome/browser/resources/chromeos/camera/src/js/state.js

@@ -32,6 +32,7 @@ export const State = {
   NO_RESOLUTION_SETTINGS: 'no-resolution-settings',
   PLAYING_RESULT_VIDEO: 'playing-result-video',
   PREVIEW_VERTICAL_DOCK: 'preview-vertical-dock',
+  PRINT_PERFORMANCE_LOGS: 'print-performance-logs',
   REVIEW_PHOTO_RESULT: 'review-photo-result',
   REVIEW_RESULT: 'review-result',
   REVIEW_VIDEO_RESULT: 'review-video-result',

chrome/browser/resources/chromeos/camera/src/strings/camera_strings.grd

@@ -258,6 +258,9 @@
       <message desc="Label for expert mode option: save metadata." name="IDS_EXPERT_SAVE_METADATA">
         Save metadata
       </message>
+      <message desc="Label for expert mode option: print performance logs." name="IDS_EXPERT_PRINT_PERFORMANCE_LOGS">
+        Print performance logs
+      </message>
       <message desc="Error message when the device does not support expert mode but tries to enable it." name="IDS_ERROR_MSG_EXPERT_MODE_NOT_SUPPORTED">
         Expert mode is not supported on this device
       </message>

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

@@ -340,6 +340,12 @@
                  data-key="saveMetadata">
           <span i18n-content="expert_save_metadata"></span>
         </label>
+        <label class="menu-item" for="expert-print-performance-logs">
+          <input class="icon" id="expert-print-performance-logs" type="checkbox"
+                 tabindex="0" data-state="print-performance-logs"
+                 data-key="printPerformanceLogs">
+          <span i18n-content="expert_print_performance_logs"></span>
+        </label>
       </div>
     </div>
     <div class="centered-overlay" id="spinner"></div>