Merge pull request #15565 from brave/pr15532_cr107-followup-fix-clear…

…-data-on-exit-webui_1.45.x Fix broken UI in Clear Browsing Data on Exit dialog (uplift to 1.45.x)
brave · Oct 20, 2022 · 3037193 · 3037193
2 parents 646c119 + c0b29f7
commit 3037193
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 25 deletions.
diff --git a/...es/settings/brave_clear_browsing_data_dialog/brave_clear_browsing_data_dialog_behavior.ts b/...es/settings/brave_clear_browsing_data_dialog/brave_clear_browsing_data_dialog_behavior.ts
@@ -14,33 +14,55 @@ import type {SettingsClearBrowsingDataDialogElement as BraveSettingsClearBrowsin
 
 const BaseElement = WebUIListenerMixin(SettingsClearBrowsingDataDialogElement)
 export class BraveSettingsClearBrowsingDataDialogElement extends BaseElement {
-  ready() {
+  override ready() {
     super.ready()
     this.addOnExitElements_();
     this.addWebUIListener(
       'update-counter-text', this.updateOnExitCountersText.bind(this));
   }
 
-  attached() {
-    super.attached()
-    this.listen(this.$.tabs, 'selected-item-changed',
-      'onSelectedTabChanged_');
-    this.listen(this.$$('#on-exit-tab'), 'clear-data-on-exit-page-change',
-      'updateSaveButtonState_');
-    this.listen(this.$$('#saveOnExitSettingsConfirm'), 'click',
-      'saveOnExitSettings_');
+  override connectedCallback() {
+    super.connectedCallback()
+
+    this.onSelectedTabChangedCallback_ = this.onSelectedTabChanged_.bind(this);
+    this.$.tabs.addEventListener('selected-item-changed',
+      this.onSelectedTabChangedCallback_);
+
+    this.updateSaveButtonStateCallback_ = this.updateSaveButtonState_.bind(this);
+    this.shadowRoot.querySelector('#on-exit-tab').addEventListener(
+      'clear-data-on-exit-page-change', this.updateSaveButtonStateCallback_);
+
+    this.saveOnExitSettingsCallback_ = this.saveOnExitSettings_.bind(this);
+    this.shadowRoot.querySelector('#saveOnExitSettingsConfirm').addEventListener(
+      'click', this.saveOnExitSettingsCallback_);
   }
 
-  detached() {
-    super.detached()
-    this.unlisten(this.$.tabs, 'selected-item-changed',
-      'onSelectedTabChanged_');
-    this.unlisten(this.$$('#on-exit-tab'), 'clear-data-on-exit-page-change',
-      'updateSaveButtonState_');
-    this.unlisten(this.$$('#saveOnExitSettingsConfirm'), 'click',
-      'saveOnExitSettings_');
+  override disconnectedCallback() {
+    super.disconnectedCallback()
+
+    if (this.onSelectedTabChangedCallback_) {
+      this.$.tabs.removeEventListener('selected-item-changed',
+        this.onSelectedTabChangedCallback_);
+      this.onSelectedTabChangedCallback_ = null;
+    }
+
+    if (this.saveOnExitSettingsCallback_) {
+      this.shadowRoot.querySelector('#on-exit-tab').removeEventListener(
+        'clear-data-on-exit-page-change', this.updateSaveButtonStateCallback_);
+      this.updateSaveButtonStateCallback_ = null;
+    }
+
+    if (this.saveOnExitSettingsCallback_) {
+      this.shadowRoot.querySelector('#saveOnExitSettingsConfirm').removeEventListener(
+        'click', this.saveOnExitSettingsCallback_);
+      this.saveOnExitSettingsCallback_ = null;
+    }
   }
 
+  private onSelectedTabChangedCallback_: (() => void) | null = null
+  private updateSaveButtonStateCallback_: (() => void) | null = null
+  private saveOnExitSettingsCallback_: (() => void) | null = null
+
   /**
    * Adds OnExit tab and Save button to the DOM.
    * @private
@@ -76,7 +98,7 @@ export class BraveSettingsClearBrowsingDataDialogElement extends BaseElement {
     // Data type deletion preferences are named "browser.clear_data.<datatype>".
     // Strip the common prefix, i.e. use only "<datatype>".
     const matches = prefName.match(/^browser\.clear_data\.(\w+)$/);
-    this.$$('#on-exit-tab').setCounter(matches[1], text);
+    this.shadowRoot.querySelector('#on-exit-tab').setCounter(matches[1], text);
   }
 
   /**
@@ -88,26 +110,26 @@ export class BraveSettingsClearBrowsingDataDialogElement extends BaseElement {
     if (!tab) {
       return;
     }
-    const isOnExitTab = (this.$.tabs.selectedItem.id == 'on-exit-tab');
+    const isOnExitTab = (tab.id === 'on-exit-tab');
     this.$.clearBrowsingDataConfirm.hidden = isOnExitTab;
-    this.$$('#saveOnExitSettingsConfirm').hidden = !isOnExitTab;
+    this.shadowRoot.querySelector('#saveOnExitSettingsConfirm').hidden = !isOnExitTab;
   }
 
   /**
    * Updates Save button enabled state based on on-exit-tab's changed state.
    * @private
    */
   updateSaveButtonState_() {
-    this.$$('#saveOnExitSettingsConfirm').disabled =
-        !this.$$('#on-exit-tab').isModified;
+    this.shadowRoot.querySelector('#saveOnExitSettingsConfirm').disabled =
+        !this.shadowRoot.querySelector('#on-exit-tab').isModified;
   }
 
   /**
    * Saves on exit settings selections.
    * @private
    */
   saveOnExitSettings_() {
-    const changed = this.$$('#on-exit-tab').getChangedSettings();
+    const changed = this.shadowRoot.querySelector('#on-exit-tab').getChangedSettings();
     changed.forEach((change) => {
       this.set('prefs.' + change.key + '.value', change.value);
     });

diff --git a/...ces/settings/brave_clear_browsing_data_dialog/brave_clear_browsing_data_on_exit_page.html b/...ces/settings/brave_clear_browsing_data_dialog/brave_clear_browsing_data_on_exit_page.html
@@ -1,5 +1,4 @@
 <style include="settings-shared">
-
   settings-checkbox {
     --settings-row-two-line-min-height: 48px;
     --settings-checkbox-label: {
@@ -61,4 +60,3 @@
                       no-set-pref>
   </settings-checkbox>
 </div>
-</template>