[CCA] Fix showing 60 FPS tooltip on 30 FPS icon bug.

Bug: 1004915
Test: On device with 30/60 FPS capability, see if tooltip showing on
30/60 FPS are correct and a11y UX behave as expected.

Change-Id: I79ac58dcaf0629451fae722f40b0656d92f53dad
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1826741
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@{#701512}

chrome/browser/resources/chromeos/camera/src/_locales/en/messages.json

@@ -95,6 +95,14 @@
     "message": "Grid type",
     "description": "Label for the button of grid-type options."
   },
+  "LABEL_30FPS": {
+    "message": "30 FPS",
+    "description": "Label showing current state of 30 FPS on tooltip of toggle 60 FPS recording checkbox."
+  },
+  "LABEL_60FPS": {
+    "message": "60 FPS",
+    "description": "Label showing current state of 60 FPS on tooltip of toggle 60 FPS recording checkbox."
+  },
   "TOGGLE_60FPS_BUTTON": {
     "message": "60 FPS",
     "description": "Label for the checkbox to toggle 60 FPS recording."

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

@@ -79,7 +79,14 @@ cca.tooltip.position_ = function() {
  */
 cca.tooltip.show_ = function(element) {
   cca.tooltip.hide();
-  cca.tooltip.wrapper_.textContent = element.getAttribute('aria-label');
+  let message = element.getAttribute('aria-label');
+  if (element.hasAttribute('tooltip-true') && element.checked) {
+    message = element.getAttribute('tooltip-true');
+  }
+  if (element.hasAttribute('tooltip-false') && !element.checked) {
+    message = element.getAttribute('tooltip-false');
+  }
+  cca.tooltip.wrapper_.textContent = message;
   cca.tooltip.hovered_ = element;
   cca.tooltip.position_();
   cca.tooltip.wrapper_.classList.add('visible');

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

@@ -884,6 +884,14 @@ cca.util.setupI18nElements = function(rootElement) {
       .forEach(
           (element) => element.textContent =
               getMessage(element, 'i18n-content'));
+  getElements('i18n-tooltip-true')
+      .forEach(
+          (element) => element.setAttribute(
+              'tooltip-true', getMessage(element, 'i18n-tooltip-true')));
+  getElements('i18n-tooltip-false')
+      .forEach(
+          (element) => element.setAttribute(
+              'tooltip-false', getMessage(element, 'i18n-tooltip-false')));
   getElements('i18n-aria')
       .forEach((element) => setAriaLabel(element, 'i18n-aria'));
   cca.tooltip.setup(getElements('i18n-label'))

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

@@ -297,6 +297,12 @@
       <message desc="Label for the button of grid-type options." name="IDS_GRID_TYPE_BUTTON">
         Grid type
       </message>
+      <message desc="Label showing current state of 30 FPS on tooltip of toggle 60 FPS recording checkbox." name="IDS_LABEL_30FPS">
+        30 FPS
+      </message>
+      <message desc="Label showing current state of 60 FPS on tooltip of toggle 60 FPS recording checkbox." name="IDS_LABEL_60FPS">
+        60 FPS
+      </message>
       <message desc="Label for the checkbox to toggle 60 FPS recording." name="IDS_TOGGLE_60FPS_BUTTON">
         60 FPS
       </message>

chrome/browser/resources/chromeos/camera/src/strings/camera_strings_grd/ID_LABEL_30FPS.png.sha1

+19d2c700625eb6d227af9eada492528ed5ec86ff
\ No newline at end of file

chrome/browser/resources/chromeos/camera/src/strings/camera_strings_grd/ID_LABEL_60FPS.png.sha1

+3f9498a334c87daeab3d8b576c1462c7d49098ca
\ No newline at end of file

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

@@ -153,7 +153,9 @@
         <input type="checkbox" id="toggle-mirror" tabindex="0"
                i18n-label="toggle_mirror_button" data-state="mirror" checked>
         <input type="checkbox" id="toggle-fps" tabindex="0"
-               i18n-label="toggle_60fps_button">
+               i18n-label="toggle_60fps_button"
+               i18n-tooltip-true="label_60fps"
+               i18n-tooltip-false="label_30fps">
       </div>
       <div class="top-stripe left-stripe buttons">
         <button id="open-settings" tabindex="0"