Settings: add optional send feedback button to section headers

Adds a send feedback button to settings-section, which can be enabled
by adding a `send-feedback` attribute and a `on-send-feedback` event
handler.

This is a precursor to moving the performance settings page's send
feedback entrypoint outside of the toggle button sub-labels.

Bug: 1377051
Change-Id: I33c276308747a0913bbe10ba2cc739e4008e467b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4218648
Commit-Queue: Charles Meng <charlesmeng@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Reviewed-by: Eshwar Stalin <estalin@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1103057}

chrome/app/settings_strings.grdp

@@ -16,6 +16,9 @@
   <message name="IDS_SETTINGS_OPENS_IN_NEW_TAB" desc="ARIA (accessibility) label describing a link which opens in a new tab.">
     Opens in new tab
   </message>
+  <message name="IDS_SETTINGS_SEND_FEEDBACK_ROLE_DESCRIPTION" desc="Accessibility role description for the send feedback button at the top right of a settings section. Spoken by screen readers when focusing the button but not visually rendered.">
+    Send feedback button
+  </message>
 
   <if expr="not chromeos_ash">
     <message name="IDS_RELAUNCH_CONFIRMATION_DIALOG_BODY" desc="The body of the modal dialog that we show when users click on relaunch and they have open Incognito windows. The dialog serves to warn the users about losing their Incognito windows if they proceed with the relaunch.">

chrome/app/settings_strings_grdp/IDS_SETTINGS_SEND_FEEDBACK_ROLE_DESCRIPTION.png.sha1

@@ -0,0 +1 @@
+457a51ac48111392f5eb18abfd590ea74e23f55e

chrome/browser/resources/settings/icons.html

@@ -186,6 +186,7 @@
       <g id="file-handling"><path d="M8 16h8v2H8v-2zm0-4h8v2H8v-2zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" fill="#5F6368"></path></g>
       <g id="file-handling-off"><path d="M13.002 4.001H7.106L5.252 2.148c.232-.094.485-.147.75-.147h8l6 6v8.896l-2-2V9.001h-5v-5z" fill="#5F6368"></path><path d="M16.002 12.001h-.896l.896.896v-.896zM.6 3.45l1.414-1.414 19.94 19.94-1.414 1.414L.6 3.45zM3.986 20.01V6.84l2 2V20.01h11.172l1.765 1.766c-.28.15-.599.234-.937.234H5.976c-1.1 0-1.99-.9-1.99-2z" fill="#5F6368"></path><path d="M9.158 12.01H7.986v2h3.172l-2-2zM13.158 16.01H7.986v2h7.172l-2-2z" fill="#5F6368"></path></g>
       <g id="performance"><path d="M0 0h24v24H0z" fill="none"></path><path d="m20.38 8.57-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1 10 10 0 0 0-.27-10.44zm-9.79 6.84a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z"></path></g>
+      <g id="feedback" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17l-.59.59-.58.58V4h16v12zm-9-4h2v2h-2zm0-6h2v4h-2z"></path></g>
     </defs>
   </svg>
 </iron-iconset-svg>

chrome/browser/resources/settings/settings_page/settings_section.html

@@ -6,6 +6,12 @@
         position: relative;
       }
 
+      #header {
+        display: flex;
+        justify-content: space-between;
+        padding-inline-end: var(--cr-section-padding);
+      }
+
       #header .title {
         color: var(--cr-primary-text-color);
         font-size: 108%;
@@ -18,6 +24,11 @@
         padding-top: 8px;
       }
 
+      #feedback {
+        margin-bottom: 12px;
+        margin-top: var(--cr-section-vertical-margin);
+      }
+
       :host(:not(.expanded)) #card {
         background-color: var(--cr-card-background-color);
         border-radius: var(--cr-card-border-radius);
@@ -40,8 +51,15 @@
       }
     </style>
     <div id="header">
-      <h2 class="title" tabindex="-1"
+      <h2 id="title" class="title" tabindex="-1"
           aria-hidden$="[[getTitleHiddenStatus_(pageTitle)]]">[[pageTitle]]</h2>
+      <template is="dom-if" if="[[showSendFeedbackButton]]">
+        <cr-icon-button id="feedback" iron-icon="settings:feedback" dir="ltr"
+            aria-labelledby="title"
+            aria-roledescription="$i18n{sendFeedbackButton}"
+            on-click="onSendFeedbackClick_">
+        </cr-icon-button>
+      </template>
     </div>
     <div id="card">
       <slot></slot>

chrome/browser/resources/settings/settings_page/settings_section.ts

@@ -16,6 +16,7 @@
  *    </settings-section>
  */
 
+import '//resources/cr_elements/cr_icon_button/cr_icon_button.js';
 import '//resources/cr_elements/cr_shared_vars.css.js';
 
 import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -58,12 +59,22 @@ export class SettingsSectionElement extends PolymerElement {
         value: false,
         reflectToAttribute: true,
       },
+
+      /**
+       * When this attribute is enabled, a send feedback button will be shown
+       * that emits a 'send-feedback' event.
+       */
+      showSendFeedbackButton: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
   section: string;
   pageTitle: string;
   hiddenBySearch: boolean;
+  showSendFeedbackButton: boolean;
 
   /**
    * Get the value to which to set the aria-hidden attribute of the section
@@ -79,6 +90,11 @@ export class SettingsSectionElement extends PolymerElement {
   override focus() {
     this.shadowRoot!.querySelector<HTMLElement>('.title')!.focus();
   }
+
+  private onSendFeedbackClick_() {
+    this.dispatchEvent(
+        new CustomEvent('send-feedback', {bubbles: true, composed: true}));
+  }
 }
 
 declare global {

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -184,6 +184,7 @@ void AddCommonStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"noThanks", IDS_NO_THANKS},
     {"ok", IDS_OK},
     {"opensInNewTab", IDS_SETTINGS_OPENS_IN_NEW_TAB},
+    {"sendFeedbackButton", IDS_SETTINGS_SEND_FEEDBACK_ROLE_DESCRIPTION},
 #if !BUILDFLAG(IS_CHROMEOS_ASH)
     {"relaunchConfirmationDialogTitle", IDS_RELAUNCH_CONFIRMATION_DIALOG_TITLE},
 #endif

chrome/test/data/webui/settings/BUILD.gn

@@ -96,6 +96,7 @@ build_webui_tests("build") {
     "settings_menu_test.ts",
     "settings_page_test_util.ts",
     "settings_performance_menu_test.ts",
+    "settings_section_test.ts",
     "settings_slider_tests.ts",
     "settings_subpage_test.ts",
     "settings_toggle_button_tests.ts",

chrome/test/data/webui/settings/cr_settings_browsertest.js

@@ -916,6 +916,7 @@ TEST_F('CrSettingsMenuTest', 'All', function() {
  ['SearchEngines', 'search_engines_page_test.js'],
  ['SearchPage', 'search_page_test.js'],
  ['Search', 'search_settings_test.js'],
+ ['Section', 'settings_section_test.js'],
  ['SecurityKeysBioEnrollment', 'security_keys_bio_enrollment_test.js'],
  [
    'SecurityKeysCredentialManagement',

chrome/test/data/webui/settings/settings_section_test.ts

@@ -0,0 +1,37 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'chrome://settings/settings.js';
+
+import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {CrIconButtonElement} from 'chrome://settings/lazy_load.js';
+import {SettingsSectionElement} from 'chrome://settings/settings.js';
+import {assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {eventToPromise} from 'chrome://webui-test/test_util.js';
+
+suite('SettingsSection', function() {
+  let settingsSection: SettingsSectionElement;
+
+  setup(function() {
+    document.body.innerHTML = window.trustedTypes!.emptyHTML;
+    settingsSection = document.createElement('settings-section');
+    document.body.appendChild(settingsSection);
+    flush();
+  });
+
+  test('Send feedback bubble', async function() {
+    let feedback: CrIconButtonElement|null =
+        settingsSection.shadowRoot!.querySelector('#feedback');
+    assertFalse(!!feedback);
+
+    settingsSection.showSendFeedbackButton = true;
+    const feedbackClicked = eventToPromise('send-feedback', settingsSection);
+    flush();
+
+    feedback = settingsSection.shadowRoot!.querySelector('#feedback');
+    assertTrue(!!feedback);
+    feedback.click();
+    await feedbackClicked;
+  });
+});