[journeys] Use i18nMixin instead of $i18n for strings in clusters

Internationalization using $i18n is not supported for components in
cr_components. As part of the refactor of the clusters' components we
need to switch to the i18nMixin. Also added a missing boolean and string
to the history_clusters data source.

Bug: 1310280
Change-Id: I32bfcf92125a1ad51b5657fcde78a050c84b3d62
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3697497
Reviewed-by: Tommy Li <tommycli@chromium.org>
Commit-Queue: Marlon Facey <mfacey@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1012665}

chrome/browser/ui/webui/cr_components/history_clusters/history_clusters_util.cc

@@ -6,6 +6,7 @@
 
 #include "chrome/browser/history_clusters/history_clusters_service_factory.h"
 #include "chrome/browser/profiles/profile.h"
+#include "chrome/common/pref_names.h"
 #include "components/history_clusters/core/config.h"
 #include "components/history_clusters/core/history_clusters_prefs.h"
 #include "components/history_clusters/core/history_clusters_service.h"
@@ -16,21 +17,24 @@
 // Static
 void HistoryClustersUtil::PopulateSource(content::WebUIDataSource* source,
                                          Profile* profile) {
+  PrefService* prefs = profile->GetPrefs();
+  source->AddBoolean("allowDeletingHistory",
+                     prefs->GetBoolean(prefs::kAllowDeletingBrowserHistory));
   auto* history_clusters_service =
       HistoryClustersServiceFactory::GetForBrowserContext(profile);
   source->AddBoolean("isHistoryClustersEnabled",
                      history_clusters_service &&
                          history_clusters_service->IsJourneysEnabled());
+  source->AddBoolean(kIsHistoryClustersVisibleKey,
+                     prefs->GetBoolean(history_clusters::prefs::kVisible));
   source->AddBoolean(
-      kIsHistoryClustersVisibleKey,
+      kIsHistoryClustersVisibleManagedByPolicyKey,
-      profile->GetPrefs()->GetBoolean(history_clusters::prefs::kVisible));
+      prefs->IsManagedPreference(history_clusters::prefs::kVisible));
-  source->AddBoolean(kIsHistoryClustersVisibleManagedByPolicyKey,
-                     profile->GetPrefs()->IsManagedPreference(
-                         history_clusters::prefs::kVisible));
   source->AddBoolean("isHistoryClustersDebug",
                      history_clusters::GetConfig().user_visible_debug);
 
   static constexpr webui::LocalizedString kHistoryClustersStrings[] = {
+      {"actionMenuDescription", IDS_HISTORY_CLUSTERS_ACTION_MENU_DESCRIPTION},
       {"disableHistoryClusters", IDS_HISTORY_CLUSTERS_DISABLE_MENU_ITEM_LABEL},
       {"enableHistoryClusters", IDS_HISTORY_CLUSTERS_ENABLE_MENU_ITEM_LABEL},
       {"historyClustersTabLabel", IDS_HISTORY_CLUSTERS_JOURNEYS_TAB_LABEL},

components/history_clusters_strings.grdp

@@ -3,6 +3,9 @@
 <!-- Strings for the chrome://history/journeys page -->
 
 <grit-part>
+  <message name="IDS_HISTORY_CLUSTERS_ACTION_MENU_DESCRIPTION" desc="Text used to identify the history clusters drop-down menu for screen readers">
+    Actions
+  </message>
   <message name="IDS_HISTORY_CLUSTERS_DISABLE_MENU_ITEM_LABEL" desc="A label for the menu item to turn off the Journeys feature, which collects different search and browsing activities related to a single topic into a single place, and organizes them by topic. See glossary entry for meaning of 'Journeys'.">
     Turn off Journeys
   </message>

components/history_clusters_strings_grdp/IDS_HISTORY_CLUSTERS_ACTION_MENU_DESCRIPTION.png.sha1

@@ -0,0 +1 @@
+6f8b0bde3c35bec7f3f72c057324854651bdfcd6

ui/webui/resources/cr_components/history_clusters/cluster.html

@@ -117,7 +117,7 @@
     </template>
   </iron-collapse>
   <div id="related-searches" hidden="[[!cluster.relatedSearches.length]]"
-      role="list" aria-label="$i18n{relatedSearchesHeader}"
+      role="list" aria-label$="[[i18n('relatedSearchesHeader')]]"
       on-related-search-clicked="onRelatedSearchClicked_">
     <template is="dom-repeat" items="[[cluster.relatedSearches]]">
       <search-query search-query="[[item]]" index="[[index]]" role="listitem">

ui/webui/resources/cr_components/history_clusters/cluster.ts

@@ -10,6 +10,7 @@ import './url_visit.js';
 import '../../cr_elements/cr_icons_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';
 
+import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assert} from '../../js/assert_ts.js';
@@ -31,13 +32,15 @@ declare global {
   }
 }
 
+const HistoryClusterElementBase = I18nMixin(PolymerElement);
+
 interface HistoryClusterElement {
   $: {
     label: HTMLElement,
   };
 }
 
-class HistoryClusterElement extends PolymerElement {
+class HistoryClusterElement extends HistoryClusterElementBase {
   static get is() {
     return 'history-cluster';
   }

ui/webui/resources/cr_components/history_clusters/clusters.html

@@ -51,7 +51,7 @@
     result_, result_.clusters.*, result_.canLoadMore)]]">
   <cr-button id="loadMoreButton" on-click="onLoadMoreButtonClick_"
              hidden$="[[showSpinner_]]">
-    $i18n{loadMoreButtonLabel}
+    [[i18n('loadMoreButtonLabel')]]
   </cr-button>
   <iron-icon src="chrome://resources/images/throbber_small.svg"
              hidden$="[[!showSpinner_]]"></iron-icon>
@@ -62,14 +62,14 @@
 <cr-lazy-render id="confirmationDialog">
   <template>
     <cr-dialog consume-keydown-event on-cancel="onConfirmationDialogCancel_">
-      <div slot="title">$i18n{removeSelected}</div>
+      <div slot="title">[[i18n('removeSelected')]]</div>
-      <div slot="body">$i18n{deleteWarning}</div>
+      <div slot="body">[[i18n('deleteWarning')]]</div>
       <div slot="button-container">
         <cr-button class="cancel-button" on-click="onCancelButtonClick_">
-          $i18n{cancel}
+          [[i18n('cancel')]]
         </cr-button>
         <cr-button class="action-button" on-click="onRemoveButtonClick_">
-          $i18n{deleteConfirm}
+          [[i18n('deleteConfirm')]]
         </cr-button>
       </div>
     </cr-dialog>
@@ -78,7 +78,7 @@
 <cr-lazy-render id="confirmationToast">
   <template>
     <cr-toast duration="5000">
-      <div>$i18n{removeFromHistoryToast}</div>
+      <div>[[i18n('removeFromHistoryToast')]]</div>
     </cr-toast>
   </template>
 </cr-lazy-render>

ui/webui/resources/cr_components/history_clusters/clusters.ts

@@ -11,6 +11,7 @@ import '../../cr_elements/cr_toast/cr_toast.js';
 import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
 import 'chrome://resources/polymer/v3_0/iron-scroll-threshold/iron-scroll-threshold.js';
 
+import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {Time} from 'chrome://resources/mojo/mojo/public/mojom/base/time.mojom-webui.js';
 import {IronListElement} from 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
 import {IronScrollThresholdElement} from 'chrome://resources/polymer/v3_0/iron-scroll-threshold/iron-scroll-threshold.js';
@@ -44,6 +45,8 @@ declare global {
   }
 }
 
+const HistoryClustersElementBase = I18nMixin(PolymerElement);
+
 export interface HistoryClustersElement {
   $: {
     clusters: IronListElement,
@@ -53,7 +56,7 @@ export interface HistoryClustersElement {
   };
 }
 
-export class HistoryClustersElement extends PolymerElement {
+export class HistoryClustersElement extends HistoryClustersElementBase {
   static get is() {
     return 'history-clusters';
   }

ui/webui/resources/cr_components/history_clusters/menu_container.html

@@ -6,21 +6,21 @@
 </style>
 
 <cr-icon-button id="actionMenuButton" class="icon-more-vert"
-    title="$i18n{actionMenuDescription}" aria-haspopup="menu"
+    title$="[[i18n('actionMenuDescription')]]" aria-haspopup="menu"
     on-click="onActionMenuButtonClick_">
 </cr-icon-button>
 
 <cr-lazy-render id="actionMenu">
   <template>
-    <cr-action-menu role-description="$i18n{actionMenuDescription}">
+    <cr-action-menu role-description$="[[i18n('actionMenuDescription')]]">
       <button id="openAllButton" class="dropdown-item"
           on-click="onOpenAllButtonClick_">
-        $i18n{openAllInTabGroup}
+        [[i18n('openAllInTabGroup')]]
       </button>
       <button id="removeAllButton" class="dropdown-item"
           on-click="onRemoveAllButtonClick_"
           hidden="[[!allowDeletingHistory_]]">
-        $i18n{removeAllFromHistory}
+        [[i18n('removeAllFromHistory')]]
       </button>
     </cr-action-menu>
   </template>

ui/webui/resources/cr_components/history_clusters/menu_container.ts

@@ -7,6 +7,7 @@ import '../../cr_elements/cr_action_menu/cr_action_menu.js';
 import '../../cr_elements/cr_icon_button/cr_icon_button.m.js';
 import '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
 
+import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrActionMenuElement} from '../../cr_elements/cr_action_menu/cr_action_menu.js';
@@ -28,6 +29,8 @@ declare global {
   }
 }
 
+const MenuContainerElementBase = I18nMixin(PolymerElement);
+
 interface MenuContainerElement {
   $: {
     actionMenu: CrLazyRenderElement<CrActionMenuElement>,
@@ -35,7 +38,7 @@ interface MenuContainerElement {
   };
 }
 
-class MenuContainerElement extends PolymerElement {
+class MenuContainerElement extends MenuContainerElementBase {
   static get is() {
     return 'menu-container';
   }

ui/webui/resources/cr_components/history_clusters/url_visit.html

@@ -109,7 +109,7 @@
     </div>
   </a>
   <cr-icon-button id="actionMenuButton" class="icon-more-vert"
-      title="$i18n{actionMenuDescription}" aria-haspopup="menu"
+      title$="[[i18n('actionMenuDescription')]]" aria-haspopup="menu"
       on-click="onActionMenuButtonClick_"
       hidden="[[!allowDeletingHistory_]]">
   </cr-icon-button>
@@ -117,10 +117,10 @@
 
 <cr-lazy-render id="actionMenu">
   <template>
-    <cr-action-menu role-description="$i18n{actionMenuDescription}">
+    <cr-action-menu role-description="[[i18n('actionMenuDescription]]">
       <button id="removeSelfButton" class="dropdown-item"
           on-click="onRemoveSelfButtonClick_">
-        $i18n{removeFromHistory}
+        [[i18n('removeFromHistory')]]
       </button>
     </cr-action-menu>
   </template>

ui/webui/resources/cr_components/history_clusters/url_visit.ts

@@ -8,6 +8,7 @@ import '../../cr_elements/cr_action_menu/cr_action_menu.js';
 import '../../cr_elements/cr_icon_button/cr_icon_button.m.js';
 import '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
 
+import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrActionMenuElement} from '../../cr_elements/cr_action_menu/cr_action_menu.js';
@@ -39,6 +40,8 @@ declare global {
   }
 }
 
+const MenuContainerElementBase = I18nMixin(PolymerElement);
+
 interface VisitRowElement {
   $: {
     actionMenu: CrLazyRenderElement<CrActionMenuElement>,
@@ -48,7 +51,7 @@ interface VisitRowElement {
   };
 }
 
-class VisitRowElement extends PolymerElement {
+class VisitRowElement extends MenuContainerElementBase {
   static get is() {
     return 'url-visit';
   }