Parent Access: Apply Material Next Palette to PAW

+ This change adds jelly support to the Parent Access UI. + The color updater is guarded behind the feature flag ParentAccessJelly. Parent Access Flow Demos (with flag enabled): Light Mode Flag Disabled: Flag Enabled: Error Screen w/ Flag Enabled (same as offline): Disabled Screen w/ Flag Enabled: Dark Mode Flag Disabled: Flag Enabled: Error Screen w/ Flag Enabled (same as offline): Disabled Screen w/ Flag Enabled: https: //screencast.googleplex.com/cast/NDUyNjA4OTE0NjcyODQ0OHwyNWI0NDIzYi1iZg https: //screencast.googleplex.com/cast/NjYyMDkxMzI4MDc0NTQ3MnxlMWQzNDhhNy0xZA https: //screenshot.googleplex.com/885oTXXp3jPKk3C https: //screenshot.googleplex.com/5YwmxFhu9C8zaV5 https: //screencast.googleplex.com/cast/NTYyODcyNzUxMDY5NTkzNnw1N2U5ZGY4Yi1jMg https: //screencast.googleplex.com/cast/NjM2OTM2NTYzNjE1MzM0NHw1MGFiYTFhOC0yOQ https: //screenshot.googleplex.com/3xmf48AM4tgAQNM https: //screenshot.googleplex.com/9QtF6GjBPvbWXhA Bug: b:283522994 Change-Id: I285b4fb00505dea3235b7d63e7f64b866e581f68 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4778741 Reviewed-by: Joe Mason <joenotcharles@google.com> Reviewed-by: Courtney Wong <courtneywong@chromium.org> Commit-Queue: Amber Haynes <amberhaynes@chromium.org> Cr-Commit-Position: refs/heads/main@{#1188016}
chromium · Aug 24, 2023 · 6553591 · 6553591
1 parent 4d11bfd
commit 6553591
Show file tree

Hide file tree

Showing 19 changed files with 80 additions and 6 deletions.
diff --git a/ash/constants/ash_features.cc b/ash/constants/ash_features.cc
@@ -1937,6 +1937,12 @@ BASE_FEATURE(kOverviewScrollLayoutForClamshell,
              "OverviewScrollLayoutForClamshell",
              base::FEATURE_DISABLED_BY_DEFAULT);
 
+// Enables Jelly colors and components to appear in the Parent Access Widget
+// if jelly-colors is also enabled.
+BASE_FEATURE(kParentAccessJelly,
+             "ParentAccessJelly",
+             base::FEATURE_DISABLED_BY_DEFAULT);
+
 // Enables user to provision PasspointARCSupport credentials.
 BASE_FEATURE(kPasspointARCSupport,
              "PasspointARCSupport",
@@ -3692,6 +3698,11 @@ bool IsPasspointSettingsEnabled() {
          base::FeatureList::IsEnabled(kPasspointARCSupport);
 }
 
+bool IsParentAccessJellyEnabled() {
+  return chromeos::features::IsJellyEnabled() &&
+         base::FeatureList::IsEnabled(kParentAccessJelly);
+}
+
 bool IsPasswordlessGaiaEnabledForConsumers() {
   return base::FeatureList::IsEnabled(kPasswordlessGaiaForConsumers);
 }

diff --git a/ash/constants/ash_features.h b/ash/constants/ash_features.h
@@ -570,6 +570,7 @@ COMPONENT_EXPORT(ASH_CONSTANTS) BASE_DECLARE_FEATURE(kOverviewButton);
 COMPONENT_EXPORT(ASH_CONSTANTS) BASE_DECLARE_FEATURE(kOverviewDeskNavigation);
 COMPONENT_EXPORT(ASH_CONSTANTS)
 BASE_DECLARE_FEATURE(kOverviewScrollLayoutForClamshell);
+COMPONENT_EXPORT(ASH_CONSTANTS) BASE_DECLARE_FEATURE(kParentAccessJelly);
 COMPONENT_EXPORT(ASH_CONSTANTS) BASE_DECLARE_FEATURE(kPasspointARCSupport);
 COMPONENT_EXPORT(ASH_CONSTANTS) BASE_DECLARE_FEATURE(kPasspointSettings);
 COMPONENT_EXPORT(ASH_CONSTANTS)
@@ -1026,6 +1027,7 @@ COMPONENT_EXPORT(ASH_CONSTANTS) bool IsOsSyncConsentRevampEnabled();
 COMPONENT_EXPORT(ASH_CONSTANTS) bool IsOverviewDeskNavigationEnabled();
 COMPONENT_EXPORT(ASH_CONSTANTS)
 bool IsOverviewScrollLayoutForClamshellEnabled();
+COMPONENT_EXPORT(ASH_CONSTANTS) bool IsParentAccessJellyEnabled();
 COMPONENT_EXPORT(ASH_CONSTANTS) bool IsPasswordlessGaiaEnabledForConsumers();
 COMPONENT_EXPORT(ASH_CONSTANTS) bool IsPasswordSelectionEnabledInOobe();
 COMPONENT_EXPORT(ASH_CONSTANTS) bool IsPasspointARCSupportEnabled();

diff --git a/chrome/browser/chrome_browser_interface_binders.cc b/chrome/browser/chrome_browser_interface_binders.cc
@@ -1084,7 +1084,7 @@ void PopulateChromeWebUIFrameBinders(
       ash::InternetConfigDialogUI, ash::InternetDetailDialogUI, ash::SetTimeUI,
       ash::BluetoothPairingDialogUI, nearby_share::NearbyShareDialogUI,
       ash::cloud_upload::CloudUploadUI, ash::office_fallback::OfficeFallbackUI,
-      ash::multidevice_setup::MultiDeviceSetupDialogUI,
+      ash::multidevice_setup::MultiDeviceSetupDialogUI, ash::ParentAccessUI,
 #endif
       NewTabPageUI, OmniboxPopupUI, BookmarksSidePanelUI, CustomizeChromeUI,
       InternalsUI, ReadingListUI, TabSearchUI, WebuiGalleryUI,

diff --git a/chrome/browser/resources/chromeos/parent_access/BUILD.gn b/chrome/browser/resources/chromeos/parent_access/BUILD.gn
@@ -89,6 +89,8 @@ js_library("parent_access_offline") {
 }
 
 js_library("parent_access_app") {
+  extra_deps =
+      [ "//ui/webui/resources/cr_components/color_change_listener:build_ts" ]
   deps = [
     ":parent_access_after",
     ":parent_access_before",

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_after.html b/chrome/browser/resources/chromeos/parent_access/parent_access_after.html
@@ -1,4 +1,4 @@
-<style>
+<style include="cros-color-overrides">
   .action-button {
     margin-inline-start: 8px;
   }

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_after.js b/chrome/browser/resources/chromeos/parent_access/parent_access_after.js
@@ -4,6 +4,7 @@
 
 import './flows/local_web_approvals_after.js';
 import './parent_access_template.js';
+import 'chrome://resources/cr_elements/chromeos/cros_color_overrides.css.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_app.html b/chrome/browser/resources/chromeos/parent_access/parent_access_app.html
@@ -1,3 +1,4 @@
+<style include="cros-color-overrides"></style>
 <cr-view-manager id="viewManager">
     <parent-access-before id="parent-access-before" slot="view">
     </parent-access-before>

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_app.js b/chrome/browser/resources/chromeos/parent_access/parent_access_app.js
@@ -12,8 +12,11 @@ import './parent_access_disabled.js';
 import './parent_access_error.js';
 import './parent_access_offline.js';
 import './parent_access_ui.js';
+import 'chrome://resources/cr_elements/chromeos/cros_color_overrides.css.js';
 import 'chrome://resources/cr_elements/cr_view_manager/cr_view_manager.js';
 
+import {loadTimeData} from 'chrome://resources/ash/common/load_time_data.m.js';
+import {ColorChangeUpdater} from 'chrome://resources/cr_components/color_change_listener/colors_css_updater.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {ParentAccessParams_FlowType, ParentAccessResult} from './parent_access_ui.mojom-webui.js';
@@ -57,12 +60,37 @@ class ParentAccessApp extends PolymerElement {
       currentScreen_: {
         type: Screens,
       },
+      /**
+       * Returns true if the Parent Access Jelly feature flag is enabled.
+       * @private
+       */
+      isParentAccessJellyEnabled: {
+        type: Boolean,
+        readOnly: true,
+        value() {
+          return loadTimeData.valueExists('isParentAccessJellyEnabled') &&
+              loadTimeData.getBoolean('isParentAccessJellyEnabled');
+        },
+      },
     };
   }
 
   /** @override */
   ready() {
     super.ready();
+
+    if (this.isParentAccessJellyEnabled) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = 'chrome://theme/colors.css?sets=legacy,sys';
+      document.head.appendChild(link);
+      document.body.classList.add('jelly-enabled');
+      /** @suppress {checkTypes} */
+      (function() {
+        ColorChangeUpdater.forDocument().start();
+      })();
+    }
+
     this.addEventListeners_();
     this.getInitialScreen_().then((initialScreen) => {
       this.switchScreen_(navigator.onLine ? initialScreen : Screens.OFFLINE);

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_before.html b/chrome/browser/resources/chromeos/parent_access/parent_access_before.html
@@ -1,4 +1,4 @@
-<style>
+<style include="cros-color-overrides">
   .action-button {
     margin-inline-start: 8px;
   }

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_before.js b/chrome/browser/resources/chromeos/parent_access/parent_access_before.js
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import './parent_access_template.js';
+import 'chrome://resources/cr_elements/chromeos/cros_color_overrides.css.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_disabled.html b/chrome/browser/resources/chromeos/parent_access/parent_access_disabled.html
@@ -1,4 +1,4 @@
-<style>
+<style include="cros-color-overrides">
   .action-button {
     margin-inline-start: 8px;
   }

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_disabled.js b/chrome/browser/resources/chromeos/parent_access/parent_access_disabled.js
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import './parent_access_template.js';
+import 'chrome://resources/cr_elements/chromeos/cros_color_overrides.css.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_template.html b/chrome/browser/resources/chromeos/parent_access/parent_access_template.html
@@ -1,4 +1,4 @@
-<style include="cr-icons">
+<style include="cr-icons cros-color-overrides">
     .template-container {
         display: flex;
         flex-direction: column;

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_template.js b/chrome/browser/resources/chromeos/parent_access/parent_access_template.js
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/cr_icons.css.js';
+import 'chrome://resources/cr_elements/chromeos/cros_color_overrides.css.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_ui.html b/chrome/browser/resources/chromeos/parent_access/parent_access_ui.html
@@ -1,4 +1,4 @@
-<style>
+<style include="cros-color-overrides">
   html,
   body {
     height: 100%;

diff --git a/chrome/browser/resources/chromeos/parent_access/parent_access_ui.js b/chrome/browser/resources/chromeos/parent_access/parent_access_ui.js
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import './parent_access_template.js';
+import 'chrome://resources/cr_elements/chromeos/cros_color_overrides.css.js';
 import 'chrome://resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
 
 import {loadTimeData} from 'chrome://resources/ash/common/load_time_data.m.js';

diff --git a/chrome/browser/ui/webui/ash/parent_access/parent_access_ui.cc b/chrome/browser/ui/webui/ash/parent_access/parent_access_ui.cc
@@ -8,6 +8,7 @@
 #include <string>
 #include <utility>
 
+#include "ash/constants/ash_features.h"
 #include "ash/webui/common/trusted_types_util.h"
 #include "base/strings/stringprintf.h"
 #include "chrome/browser/profiles/profile.h"
@@ -25,6 +26,7 @@
 #include "content/public/browser/web_ui_data_source.h"
 #include "mojo/public/cpp/bindings/pending_receiver.h"
 #include "services/network/public/mojom/content_security_policy.mojom.h"
+#include "ui/webui/color_change_listener/color_change_handler.h"
 
 namespace ash {
 
@@ -58,6 +60,12 @@ void ParentAccessUI::BindInterface(
       std::move(receiver), identity_manager, ParentAccessDialog::GetInstance());
 }
 
+void ParentAccessUI::BindInterface(
+    mojo::PendingReceiver<color_change_listener::mojom::PageHandler> receiver) {
+  color_provider_handler_ = std::make_unique<ui::ColorChangeHandler>(
+      web_ui()->GetWebContents(), std::move(receiver));
+}
+
 parent_access_ui::mojom::ParentAccessUIHandler*
 ParentAccessUI::GetHandlerForTest() {
   return mojo_api_handler_.get();
@@ -114,6 +122,8 @@ void ParentAccessUI::SetUpResources() {
                           IDR_PARENT_ACCESS_REQUEST_APPROVAL_DARK_SVG);
 
   source->UseStringsJs();
+  source->AddBoolean("isParentAccessJellyEnabled",
+                     features::IsParentAccessJellyEnabled());
   source->SetDefaultResource(IDR_PARENT_ACCESS_HTML);
 
   static constexpr webui::LocalizedString kLocalizedStrings[] = {

diff --git a/chrome/browser/ui/webui/ash/parent_access/parent_access_ui.h b/chrome/browser/ui/webui/ash/parent_access/parent_access_ui.h
@@ -14,6 +14,11 @@
 #include "content/public/common/url_constants.h"
 #include "mojo/public/cpp/bindings/pending_receiver.h"
 #include "ui/web_dialogs/web_dialog_ui.h"
+#include "ui/webui/resources/cr_components/color_change_listener/color_change_listener.mojom.h"
+
+namespace ui {
+class ColorChangeHandler;
+}
 
 namespace ash {
 
@@ -47,11 +52,19 @@ class ParentAccessUI : public ui::MojoWebDialogUI {
       mojo::PendingReceiver<parent_access_ui::mojom::ParentAccessUIHandler>
           receiver);
 
+  // Instantiates the implementor of the mojom::PageHandler mojo interface
+  // passing the pending receiver that will be internally bound.
+  void BindInterface(
+      mojo::PendingReceiver<color_change_listener::mojom::PageHandler>
+          receiver);
+
   parent_access_ui::mojom::ParentAccessUIHandler* GetHandlerForTest();
 
  private:
   void SetUpResources();
 
+  std::unique_ptr<ui::ColorChangeHandler> color_provider_handler_;
+
   std::unique_ptr<parent_access_ui::mojom::ParentAccessUIHandler>
       mojo_api_handler_;
 

diff --git a/tools/metrics/histograms/enums.xml b/tools/metrics/histograms/enums.xml
@@ -63696,6 +63696,7 @@ from previous Chrome versions.
   <int value="-389601101" label="HelpAppAutoTriggerInstallDialog:enabled"/>
   <int value="-389283574" label="IPH_PasswordsAccountStorage:disabled"/>
   <int value="-387606010" label="ArcBootCompletedBroadcast:enabled"/>
+  <int value="-387341308" label="ParentAccessJelly:disabled"/>
   <int value="-387217874" label="LinkCapturingInfoBar:enabled"/>
   <int value="-385461103" label="XsurfaceMetricsReporting:enabled"/>
   <int value="-385337473" label="enable-fast-unload"/>
@@ -64669,6 +64670,7 @@ from previous Chrome versions.
   <int value="99177659" label="OmniboxUICuesForSearchHistoryMatches:disabled"/>
   <int value="99660832" label="DockedMagnifierResizing:enabled"/>
   <int value="101253756" label="RequestDesktopSiteDefaults:disabled"/>
+  <int value="101364236" label="ParentAccessJelly:enabled"/>
   <int value="101973012" label="OmniboxConsumesImeInsets:enabled"/>
   <int value="103347629" label="WinrtSensorsImplementation:enabled"/>
   <int value="103560544" label="ViewportHeightClientHintHeader:disabled"/>