From 5b859d62cb6e08fcfde3aedfdbcfd856b23ba4d1 Mon Sep 17 00:00:00 2001
From: Panagiotis Astithas <pastith@gmail.com>
Date: Wed, 14 Feb 2024 23:36:26 +0000
Subject: [PATCH 1/3] Use one-way binding for the browser picker

---
 webapp/components/browser-picker.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/webapp/components/browser-picker.js b/webapp/components/browser-picker.js
index fb313d1c1d..322fd96c54 100644
--- a/webapp/components/browser-picker.js
+++ b/webapp/components/browser-picker.js
@@ -16,7 +16,7 @@ class BrowserPicker extends ProductInfo(PolymerElement) {
   static get template() {
     return html`
   <paper-dropdown-menu label="Browser" no-animations>
-    <paper-listbox slot="dropdown-content" selected="{{ browser }}" attr-for-selected="value">
+    <paper-listbox slot="dropdown-content" selected="[[browser]]" attr-for-selected="value">
       <template is="dom-repeat" items="[[products]]" as="product">
         <paper-icon-item value="[[product.browser_name]]">
           <display-logo slot="item-icon" product="[[product]]" small></display-logo>
@@ -33,7 +33,6 @@ class BrowserPicker extends ProductInfo(PolymerElement) {
       browser: {
         type: String,
         value: DefaultBrowserNames[0],
-        notify: true,
       },
       products: {
         type: Array,
@@ -84,7 +83,6 @@ class BrowserMultiPicker extends ProductInfo(PolymerElement) {
       browser: {
         type: String,
         value: DefaultBrowserNames[0],
-        notify: true,
       },
       products: {
         type: Array,
@@ -93,7 +91,6 @@ class BrowserMultiPicker extends ProductInfo(PolymerElement) {
       },
       selected: {
         type: Array,
-        notify: true,
         value: DefaultProducts.map(p => p.browser_name),
       }
     };

From 231e70c54415fcd2367659369a94a16654fda34a Mon Sep 17 00:00:00 2001
From: Panagiotis Astithas <pastith@gmail.com>
Date: Thu, 15 Feb 2024 21:33:11 +0000
Subject: [PATCH 2/3] Add event dispatch for browser changes

---
 webapp/components/browser-picker.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/webapp/components/browser-picker.js b/webapp/components/browser-picker.js
index 322fd96c54..2cb558cb8d 100644
--- a/webapp/components/browser-picker.js
+++ b/webapp/components/browser-picker.js
@@ -16,7 +16,7 @@ class BrowserPicker extends ProductInfo(PolymerElement) {
   static get template() {
     return html`
   <paper-dropdown-menu label="Browser" no-animations>
-    <paper-listbox slot="dropdown-content" selected="[[browser]]" attr-for-selected="value">
+    <paper-listbox slot="dropdown-content" selected="[[browser]]" attr-for-selected="value" on-change="selectedChanged">
       <template is="dom-repeat" items="[[products]]" as="product">
         <paper-icon-item value="[[product.browser_name]]">
           <display-logo slot="item-icon" product="[[product]]" small></display-logo>
@@ -40,6 +40,12 @@ class BrowserPicker extends ProductInfo(PolymerElement) {
       },
     };
   }
+
+  selectedChanged(e) {
+    this.dispatchEvent(new CustomEvent('browser-changed', {
+      detail: { value: e.target.value }
+    }));
+  }
 }
 window.customElements.define(BrowserPicker.is, BrowserPicker);
 export { BrowserPicker };

From 56c8c626c845f69ea6a7b809b935bc92a4ed4e0c Mon Sep 17 00:00:00 2001
From: Panagiotis Astithas <pastith@gmail.com>
Date: Thu, 15 Feb 2024 22:46:12 +0000
Subject: [PATCH 3/3] Fix event name

---
 webapp/components/browser-picker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/browser-picker.js b/webapp/components/browser-picker.js
index 2cb558cb8d..ff8f088d5a 100644
--- a/webapp/components/browser-picker.js
+++ b/webapp/components/browser-picker.js
@@ -42,7 +42,7 @@ class BrowserPicker extends ProductInfo(PolymerElement) {
   }
 
   selectedChanged(e) {
-    this.dispatchEvent(new CustomEvent('browser-changed', {
+    this.dispatchEvent(new CustomEvent('browser-name-changed', {
       detail: { value: e.target.value }
     }));
   }