From 62a9bb59e18a846dc284841c3a0ab40739e6e57e Mon Sep 17 00:00:00 2001
From: Stefan Sundin <git@stefansundin.com>
Date: Fri, 22 Dec 2023 14:20:08 -0800
Subject: [PATCH 1/2] Stop pages from being able to style the shadow DOM
 wrapper div element.

---
 keepassxc-browser/content/autocomplete.js         | 1 +
 keepassxc-browser/content/banner.js               | 1 +
 keepassxc-browser/content/custom-fields-banner.js | 1 +
 keepassxc-browser/content/totp-field.js           | 1 +
 keepassxc-browser/content/ui.js                   | 1 +
 keepassxc-browser/content/username-field.js       | 1 +
 6 files changed, 6 insertions(+)

diff --git a/keepassxc-browser/content/autocomplete.js b/keepassxc-browser/content/autocomplete.js
index aec7996..4c15827 100644
--- a/keepassxc-browser/content/autocomplete.js
+++ b/keepassxc-browser/content/autocomplete.js
@@ -88,6 +88,7 @@ class Autocomplete {
             const colorStyleSheet = createStylesheet('css/colors.css');
             this.wrapper = kpxcUI.createElement('div');
             this.wrapper.style.display = 'none';
+            this.wrapper.style.all = 'unset';
             styleSheet.addEventListener('load', () => this.wrapper.style.display = 'block');
             this.container = kpxcUI.createElement('div', 'kpxcAutocomplete-container', { 'id': 'kpxcAutocomplete-container' });
 
diff --git a/keepassxc-browser/content/banner.js b/keepassxc-browser/content/banner.js
index ce1e799..0c329e3 100644
--- a/keepassxc-browser/content/banner.js
+++ b/keepassxc-browser/content/banner.js
@@ -123,6 +123,7 @@ kpxcBanner.create = async function(credentials = {}) {
 
     const wrapper = document.createElement('div');
     wrapper.style.display = 'none';
+    wrapper.style.all = 'unset';
     styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
     this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
     this.shadowRoot.append(colorStyleSheet);
diff --git a/keepassxc-browser/content/custom-fields-banner.js b/keepassxc-browser/content/custom-fields-banner.js
index d518bfd..73d481e 100644
--- a/keepassxc-browser/content/custom-fields-banner.js
+++ b/keepassxc-browser/content/custom-fields-banner.js
@@ -129,6 +129,7 @@ kpxcCustomLoginFieldsBanner.create = async function() {
 
     const wrapper = document.createElement('div');
     wrapper.style.display = 'none';
+    wrapper.style.all = 'unset';
     styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
     this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
     this.shadowRoot.append(colorStyleSheet);
diff --git a/keepassxc-browser/content/totp-field.js b/keepassxc-browser/content/totp-field.js
index 1ed6f50..751e3d8 100644
--- a/keepassxc-browser/content/totp-field.js
+++ b/keepassxc-browser/content/totp-field.js
@@ -161,6 +161,7 @@ TOTPFieldIcon.prototype.createIcon = function(field, segmented = false) {
     const styleSheet = createStylesheet('css/totp.css');
     const wrapper = document.createElement('div');
     wrapper.style.display = 'none';
+    wrapper.style.all = 'unset';
     styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
 
     this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
diff --git a/keepassxc-browser/content/ui.js b/keepassxc-browser/content/ui.js
index adfd0c5..5f02249 100644
--- a/keepassxc-browser/content/ui.js
+++ b/keepassxc-browser/content/ui.js
@@ -293,6 +293,7 @@ kpxcUI.createNotification = function(type, message) {
     const styleSheet = createStylesheet('css/notification.css');
     notificationWrapper = notificationWrapper || document.createElement('div');
     notificationWrapper.style.display = 'none';
+    notificationWrapper.style.all = 'unset';
     styleSheet.addEventListener('load', () => notificationWrapper.style.display = 'block');
     this.shadowRoot = notificationWrapper.attachShadow({ mode: 'closed' });
     if (!this.shadowRoot) {
diff --git a/keepassxc-browser/content/username-field.js b/keepassxc-browser/content/username-field.js
index 8835d02..5d6f054 100644
--- a/keepassxc-browser/content/username-field.js
+++ b/keepassxc-browser/content/username-field.js
@@ -110,6 +110,7 @@ UsernameFieldIcon.prototype.createIcon = function(field) {
     const styleSheet = createStylesheet('css/username.css');
     const wrapper = document.createElement('div');
     wrapper.style.display = 'none';
+    wrapper.style.all = 'unset';
     styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
 
     this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });

From 616ef7f0623034031c8185fb9c6e0b3a97372580 Mon Sep 17 00:00:00 2001
From: Stefan Sundin <git@stefansundin.com>
Date: Fri, 22 Dec 2023 15:19:11 -0800
Subject: [PATCH 2/2] Need to set `all: unset;` first to avoid messing with
 `display: none;`.

---
 keepassxc-browser/content/autocomplete.js         | 2 +-
 keepassxc-browser/content/banner.js               | 2 +-
 keepassxc-browser/content/custom-fields-banner.js | 4 ++--
 keepassxc-browser/content/totp-field.js           | 2 +-
 keepassxc-browser/content/ui.js                   | 2 +-
 keepassxc-browser/content/username-field.js       | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/keepassxc-browser/content/autocomplete.js b/keepassxc-browser/content/autocomplete.js
index 4c15827..2ae3384 100644
--- a/keepassxc-browser/content/autocomplete.js
+++ b/keepassxc-browser/content/autocomplete.js
@@ -87,8 +87,8 @@ class Autocomplete {
             const styleSheet = createStylesheet('css/autocomplete.css');
             const colorStyleSheet = createStylesheet('css/colors.css');
             this.wrapper = kpxcUI.createElement('div');
-            this.wrapper.style.display = 'none';
             this.wrapper.style.all = 'unset';
+            this.wrapper.style.display = 'none';
             styleSheet.addEventListener('load', () => this.wrapper.style.display = 'block');
             this.container = kpxcUI.createElement('div', 'kpxcAutocomplete-container', { 'id': 'kpxcAutocomplete-container' });
 
diff --git a/keepassxc-browser/content/banner.js b/keepassxc-browser/content/banner.js
index 0c329e3..d508e52 100644
--- a/keepassxc-browser/content/banner.js
+++ b/keepassxc-browser/content/banner.js
@@ -122,8 +122,8 @@ kpxcBanner.create = async function(credentials = {}) {
     const colorStyleSheet = createStylesheet('css/colors.css');
 
     const wrapper = document.createElement('div');
-    wrapper.style.display = 'none';
     wrapper.style.all = 'unset';
+    wrapper.style.display = 'none';
     styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
     this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
     this.shadowRoot.append(colorStyleSheet);
diff --git a/keepassxc-browser/content/custom-fields-banner.js b/keepassxc-browser/content/custom-fields-banner.js
index 73d481e..3e25cfe 100644
--- a/keepassxc-browser/content/custom-fields-banner.js
+++ b/keepassxc-browser/content/custom-fields-banner.js
@@ -128,14 +128,14 @@ kpxcCustomLoginFieldsBanner.create = async function() {
     const colorStyleSheet = createStylesheet('css/colors.css');
 
     const wrapper = document.createElement('div');
-    wrapper.style.display = 'none';
     wrapper.style.all = 'unset';
+    wrapper.style.display = 'none';
     styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
     this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
     this.shadowRoot.append(colorStyleSheet);
-    this.shadowRoot.append(styleSheet);
     this.shadowRoot.append(defineStyleSheet);
     this.shadowRoot.append(buttonStyleSheet);
+    this.shadowRoot.append(styleSheet);
 
     // Only create the banner to top window
     if (window.self === window.top) {
diff --git a/keepassxc-browser/content/totp-field.js b/keepassxc-browser/content/totp-field.js
index 751e3d8..85e210c 100644
--- a/keepassxc-browser/content/totp-field.js
+++ b/keepassxc-browser/content/totp-field.js
@@ -160,8 +160,8 @@ TOTPFieldIcon.prototype.createIcon = function(field, segmented = false) {
 
     const styleSheet = createStylesheet('css/totp.css');
     const wrapper = document.createElement('div');
-    wrapper.style.display = 'none';
     wrapper.style.all = 'unset';
+    wrapper.style.display = 'none';
     styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
 
     this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
diff --git a/keepassxc-browser/content/ui.js b/keepassxc-browser/content/ui.js
index 5f02249..84dc9f5 100644
--- a/keepassxc-browser/content/ui.js
+++ b/keepassxc-browser/content/ui.js
@@ -292,8 +292,8 @@ kpxcUI.createNotification = function(type, message) {
 
     const styleSheet = createStylesheet('css/notification.css');
     notificationWrapper = notificationWrapper || document.createElement('div');
-    notificationWrapper.style.display = 'none';
     notificationWrapper.style.all = 'unset';
+    notificationWrapper.style.display = 'none';
     styleSheet.addEventListener('load', () => notificationWrapper.style.display = 'block');
     this.shadowRoot = notificationWrapper.attachShadow({ mode: 'closed' });
     if (!this.shadowRoot) {
diff --git a/keepassxc-browser/content/username-field.js b/keepassxc-browser/content/username-field.js
index 5d6f054..50e442c 100644
--- a/keepassxc-browser/content/username-field.js
+++ b/keepassxc-browser/content/username-field.js
@@ -109,8 +109,8 @@ UsernameFieldIcon.prototype.createIcon = function(field) {
 
     const styleSheet = createStylesheet('css/username.css');
     const wrapper = document.createElement('div');
-    wrapper.style.display = 'none';
     wrapper.style.all = 'unset';
+    wrapper.style.display = 'none';
     styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
 
     this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });