prehistoric-systems/keepassxc-browser
1
0
Fork 0
mirror of https://github.com/keepassxreboot/keepassxc-browser.git synced 2026-03-11 08:54:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Wait for stylesheets to load before displaying shadow DOM elements (#1773)

Browse source 
Wait for stylesheets to load before displaying shadow DOM elements
This commit is contained in:
Stefan Sundin 2022-11-16 03:14:52 -08:00 committed by GitHub
parent f62c1d6a1f
commit 3dfb53a0a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
keepassxc-browser/content/autocomplete.js
View file

@ -86,6 +86,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';
styleSheet.addEventListener('load', () => this.wrapper.style.display = 'block');
this.container = kpxcUI.createElement('div', 'kpxcAutocomplete-container', { 'id': 'kpxcAutocomplete-container' });
this.shadowRoot = this.wrapper.attachShadow({ mode: 'closed' });

2
keepassxc-browser/content/banner.js
View file

@ -126,6 +126,8 @@ kpxcBanner.create = async function(credentials = {}) {
const colorStyleSheet = createStylesheet('css/colors.css');
const wrapper = document.createElement('div');
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);

6
keepassxc-browser/content/custom-fields-banner.js
View file

@ -128,15 +128,17 @@ kpxcCustomLoginFieldsBanner.create = async function() {
initColorTheme(banner);
const bannerStyleSheet = createStylesheet('css/banner.css');
const styleSheet = createStylesheet('css/banner.css');
const defineStyleSheet = createStylesheet('css/define.css');
const buttonStyleSheet = createStylesheet('css/button.css');
const colorStyleSheet = createStylesheet('css/colors.css');
const wrapper = document.createElement('div');
wrapper.style.display = 'none';
styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
this.shadowRoot.append(colorStyleSheet);
this.shadowRoot.append(bannerStyleSheet);
this.shadowRoot.append(styleSheet);
this.shadowRoot.append(defineStyleSheet);
this.shadowRoot.append(buttonStyleSheet);

2
keepassxc-browser/content/totp-field.js
View file

@ -149,6 +149,8 @@ TOTPFieldIcon.prototype.createIcon = function(field, segmented = false) {
const styleSheet = createStylesheet('css/totp.css');
const wrapper = document.createElement('div');
wrapper.style.display = 'none';
styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
this.shadowRoot.append(styleSheet);

2
keepassxc-browser/content/ui.js
View file

@ -252,6 +252,8 @@ kpxcUI.createNotification = function(type, message) {
const styleSheet = createStylesheet('css/notification.css');
notificationWrapper = notificationWrapper || document.createElement('div');
notificationWrapper.style.display = 'none';
styleSheet.addEventListener('load', () => notificationWrapper.style.display = 'block');
this.shadowRoot = notificationWrapper.attachShadow({ mode: 'closed' });
if (!this.shadowRoot) {
return;

2
keepassxc-browser/content/username-field.js
View file

@ -109,6 +109,8 @@ UsernameFieldIcon.prototype.createIcon = function(field) {
const styleSheet = createStylesheet('css/username.css');
const wrapper = document.createElement('div');
wrapper.style.display = 'none';
styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
this.shadowRoot.append(styleSheet);