Merge branch 'fix-displayname-firefox'

public/index.html

@@ -159,7 +159,7 @@
         <div class="column">
             <div class="known-as-wrapper">
                 <span data-i18n-key="footer.known-as" data-i18n-attrs="text"></span>
-                <div id="display-name" class="badge" data-i18n-key="footer.display-name" data-i18n-attrs="data-placeholder title" placeholder="Loading..." autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
+                <div id="display-name" class="badge" data-i18n-key="footer.display-name" data-i18n-attrs="data-placeholder title" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
                 <svg class="icon edit-pen">
                     <use xlink:href="#edit-pen-icon"></use>
                 </svg>

public/scripts/ui-main.js

@@ -201,15 +201,11 @@ class FooterUI {
         this.$discoveryWrapper = $$('footer .discovery-wrapper');
 
         this.$displayName.addEventListener('keydown', e => this._onKeyDownDisplayName(e));
-        this.$displayName.addEventListener('keyup', e => this._onKeyUpDisplayName(e));
+        this.$displayName.addEventListener('focus', e => this._onFocusDisplayName(e));
-        this.$displayName.addEventListener('blur', e => this._saveDisplayName(e.target.innerText));
+        this.$displayName.addEventListener('blur', e => this._onBlurDisplayName(e));
 
         Events.on('display-name', e => this._onDisplayName(e.detail.displayName));
         Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail));
-
-        // Load saved display name on page load
-        Events.on('ws-connected', _ => this._loadSavedDisplayName());
-
         Events.on('evaluate-footer-badges', _ => this._evaluateFooterBadges());
     }
 
@@ -234,17 +230,20 @@ class FooterUI {
     }
 
     async _loadSavedDisplayName() {
-        const displayName = await this._getSavedDisplayName()
+        const displayNameSaved = await this._getSavedDisplayName()
 
-        if (!displayName) return;
+        if (!displayNameSaved) return;
 
-        console.log("Retrieved edited display name:", displayName)
+        console.log("Retrieved edited display name:", displayNameSaved)
-        Events.fire('self-display-name-changed', displayName);
+        Events.fire('self-display-name-changed', displayNameSaved);
     }
 
-    _onDisplayName(displayName){
+    async _onDisplayName(displayNameServer){
-        // set display name
+        // load saved displayname first to prevent flickering
-        this.$displayName.setAttribute('placeholder', displayName);
+        await this._loadSavedDisplayName();
+
+        // set original display name as placeholder
+        this.$displayName.setAttribute('placeholder', displayNameServer);
     }
 
 
@@ -259,9 +258,27 @@ class FooterUI {
         }
     }
 
-    _onKeyUpDisplayName(e) {
+    _onFocusDisplayName(e) {
+        if (!e.target.innerText) {
+            // Fix z-position of cursor when div is completely empty (Firefox only)
+            e.target.innerText = "\n";
+
+            // On Chromium based browsers the cursor position is lost when adding sth. to the focused node. This adds it back.
+            let sel = window.getSelection();
+            sel.collapse(e.target.lastChild);
+        }
+    }
+
+    async _onBlurDisplayName(e) {
         // fix for Firefox inserting a linebreak into div on edit which prevents the placeholder from showing automatically when it is empty
-        if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) e.target.innerText = '';
+        if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) {
+            e.target.innerText = '';
+        }
+
+        // Remove selection from text
+        window.getSelection().removeAllRanges();
+
+        await this._saveDisplayName(e.target.innerText)
     }
 
     async _saveDisplayName(newDisplayName) {

public/styles/styles-main.css

@@ -557,6 +557,10 @@ footer .logo {
     position: relative;
 }
 
+#display-name:focus::before {
+    display: none;
+}
+
 html:not([dir="rtl"]) #display-name,
 html:not([dir="rtl"]) .edit-pen {
     margin-left: -1rem;
@@ -939,8 +943,8 @@ body {
     --lt-dialog-bg-color: #fff;
     --lt-bg-color: 255,255,255;
     --lt-bg-color-secondary: #f2f2f2;
-    --lt-border-color: #a9a9a9;
+    --lt-border-color: #757575;
-    --lt-badge-color: #a5a5a5;
+    --lt-badge-color: #757575;
     --lt-lang-hr-color: #DDD;
 
     --lt-shadow-color-secondary-rgb: 0,0,0;
@@ -953,8 +957,8 @@ body {
     --dt-dialog-bg-color: #141414;
     --dt-bg-color: 0,0,0;
     --dt-bg-color-secondary: #262628;
-    --dt-border-color: #919191;
+    --dt-border-color: #757575;
-    --dt-badge-color: #717171;
+    --dt-badge-color: #757575;
     --dt-lang-hr-color: #404040;
 
     --dt-shadow-color-secondary-rgb: 255,255,255;