fix contact info + key press handling + labels

Signed-off-by: Vadym Struts <[email protected]>

android/java/res/layout/report_broken_site_layout.xml

@@ -80,7 +80,6 @@
         android:id="@+id/contact_info_text"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginBottom="14dp"
         android:hint="@string/report_broken_site_contact_placeholder"
         android:importantForAutofill="no"
         android:maxLines="1"
@@ -90,6 +89,15 @@
         android:textColor="@color/wallet_text_color"
         android:textColorHint="@color/brave_theme_hint_text" />
 
+    <TextView
+        android:id="@+id/contact_info_apopup_label"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="14dp"
+        android:textSize="16sp"
+        android:textColor="@color/default_icon_color_tint_list"
+        android:text="@string/report_broken_site_contact_apopup_label"/>
+
     </LinearLayout>
 
     <android.widget.CheckBox

browser/ui/android/strings/android_brave_strings.grd

@@ -1655,7 +1655,7 @@ Are you sure you want to do this?
         Let Brave's developers know that this site doesn't work properly with Shields:
       </message>
       <message name="IDS_REPORT_BROKEN_SITE_TEXT_2" desc="Shields text for broken text warning message.">
-        Thank you for helping make Brave better for all. This report will only contain information necessary for us to fix this site. <ph name="LEARN_MORE">%1$s</ph>
+        Thank you for helping make Brave better for all. This report will only contain information necessary for us to fix this site. If you provide contact info it will be stored for future reports. <ph name="LEARN_MORE">%1$s</ph>
       </message>
       <message name="IDS_REPORT_BROKEN_SITE_TEXT_LINK" desc="Text for link to webcompat report wiki page.">
         Learn more.
@@ -1675,6 +1675,9 @@ Are you sure you want to do this?
       <message name="IDS_REPORT_BROKEN_SITE_CONTACT_LABEL" desc="Label for the optional contact information field in the broken website report">
           Contact me at: (optional)
       </message>
+      <message name="IDS_REPORT_BROKEN_SITE_CONTACT_APOPUP_LABEL" desc="Contact information auto population explanation">
+          If you provide contact info it will be stored for future reports.
+      </message>
       <message name="IDS_REPORT_BROKEN_SITE_CONTACT_PLACEHOLDER" desc="Placeholder text for the optional contact information field in the broken website report">
           Email, Twitter, etc.
       </message>

browser/ui/webui/webcompat_reporter/webcompat_reporter_ui.cc

@@ -238,6 +238,13 @@ void WebcompatReporterDOMHandler::HandleSubmitReport(
     pending_report_->contact = contact_arg->GetString();
   }
 
+  // if (contact_arg != nullptr && contact_arg->is_string() &&
+  //     !contact_arg->GetString().empty()) {
+  //   pending_report_->contact = contact_arg->GetString();
+  // } else {
+  //   reporter_service_->SetContactInfoSaveFlag(false);
+  // }
+
   if (reporter_service_) {
     reporter_service_->SubmitWebcompatReport(pending_report_->Clone());
   }

components/resources/brave_components_strings.grd

@@ -451,6 +451,7 @@
         <message name="IDS_BRAVE_WEBCOMPATREPORTER_REPORT_NON_HTTP_EXPLANATION" desc="Notifies the user that non-HTTP/HTTPS browser pages cannot be reported">This page cannot be reported because it was not served over HTTP/HTTPS.</message>
         <message name="IDS_BRAVE_WEBCOMPATREPORTER_REPORT_LOCAL_EXPLANATION" desc="Notifies the user that local pages (i.e. via localhost) cannot be reported">This page is a local web page and is not eligible for reporting.</message>
         <message name="IDS_BRAVE_WEBCOMPATREPORTER_REPORT_ERROR_PAGE_EXPLANATION" desc="Notifies the user that the error page cannot be reported">This is an error page. It cannot be reported as a broken site.</message>
+        <message name="IDS_BRAVE_WEBCOMPATREPORTER_REPORT_CONTACT_INFO_APOPUP_EXPL" desc="Informs user about auto populating of the contact information.">If you provide contact info it will be stored for future reports.</message>
         <message name="IDS_BRAVE_WEBCOMPATREPORTER_REPORT_DISCLAIMER2" desc="Thanks the user for sending the report, and informs them that relevant website information will be reported to Brave servers.">Thank you for helping make Brave better for all. This report will only contain information necessary for us to fix this site.</message>
         <message name="IDS_BRAVE_WEBCOMPATREPORTER_INFO_LINK" desc="Text for link to webcompat report wiki page.">Learn more.</message>
         <message name="IDS_BRAVE_WEBCOMPATREPORTER_REPORT_DETAILS" desc="Placeholder text for the optional details field in the broken website report">Additional details (optional)</message>

components/webcompat_reporter/browser/webcompat_reporter_service.cc

@@ -94,8 +94,10 @@ void ProcessContactInfo(
     return;
   }
   if (!report_info->contact || report_info->contact->empty()) {
+    profile_prefs->ClearPref(webcompat_reporter::prefs::kContactInfoPrefs);
     return;
   }
+
   profile_prefs->SetString(
       webcompat_reporter::prefs::kContactInfoPrefs,
       profile_prefs->GetBooleanOr(

components/webcompat_reporter/ui/components/ReportView.tsx

@@ -52,6 +52,8 @@ interface State {
 const WEBCOMPAT_INFO_WIKI_URL = 'https://github.com/brave/brave-browser/wiki/Web-compatibility-reports'
 
 export default class ReportView extends React.PureComponent<Props, State> {
+  private handleKeyPress: (e: KeyboardEvent) => void;
+
   constructor (props: Props) {
     super(props)
     this.state = {
@@ -60,6 +62,17 @@ export default class ReportView extends React.PureComponent<Props, State> {
       attachScreenshot: false,
       screenshotObjectUrl: null
     }
+    this.handleKeyPress = this._handleKeyPress.bind(this);
+  }
+
+  private _handleKeyPress(e: KeyboardEvent) {
+    const { onClose, onSubmitReport } = this.props;
+    const { details, contact, attachScreenshot } = this.state
+    if (e.key === 'Escape') {
+      onClose();
+    } else if (e.key === 'Enter') {
+      onSubmitReport(details, contact, attachScreenshot);
+    }
   }
 
   handleContactInfoChange = async (ev: React.ChangeEvent<HTMLInputElement>) => {
@@ -97,6 +110,14 @@ export default class ReportView extends React.PureComponent<Props, State> {
     window.open(screenshotObjectUrl, '_blank', 'noopener')
   }
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyPress);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyPress);
+  }
+
   render () {
     const {
       siteUrl,
@@ -151,6 +172,9 @@ export default class ReportView extends React.PureComponent<Props, State> {
                 value={contact}
                 id='contact-info'
               />
+              <InputLabel>
+                {getLocale('reportContactPopupInfoLabel')}
+              </InputLabel>
             </FieldCtr>
             <FieldCtr>
               <Checkbox

components/webui/webui_resources.cc

@@ -994,6 +994,8 @@ base::span<const webui::LocalizedString> GetWebUILocalizedStrings(
                    IDS_BRAVE_WEBCOMPATREPORTER_REPORT_CONTACT_PLACEHOLDER},
                   {"reportContactLabel",
                    IDS_BRAVE_WEBCOMPATREPORTER_REPORT_CONTACT_LABEL},
+                  {"reportContactPopupInfoLabel",
+                   IDS_BRAVE_WEBCOMPATREPORTER_REPORT_CONTACT_INFO_APOPUP_EXPL},
                   {"attachScreenshotLabel",
                    IDS_BRAVE_WEBCOMPATREPORTER_ATTACH_SCREENSHOT_LABEL},
                   {"viewScreenshotLabel",