From 1afabb934f4f13959c3996c3e8b362f14be8d99a Mon Sep 17 00:00:00 2001
From: Ajay Ramachandran <dev@ajay.app>
Date: Sun, 13 Dec 2020 23:52:38 -0500
Subject: [PATCH] Expand username textbox when editing.

---
 public/popup.css  |  8 +++++++-
 public/popup.html |  2 +-
 src/popup.ts      | 14 ++++++++++----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index e3771b56..ef87e892 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -7,7 +7,7 @@
 }
 
 .hidden {
-  display: none;
+  display: none !important;
 }
 
 #sponsorblockPopup {
@@ -329,6 +329,12 @@ label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponso
   border: white 1px solid;
   color: var(--sb-main-fg-color);
   width: calc(100% - 24px);
+
+  text-overflow: ellipsis;
+}
+
+#setUsername.SBExpanded {
+  width: 200%;
 }
 
 /* footer */
diff --git a/public/popup.html b/public/popup.html
index f4cd78d2..35479076 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -96,7 +96,7 @@
           </div>
         </div>
       </div>
-      <div id="sponsorTimesContributionsContainer" style="display: none">
+      <div id="sponsorTimesContributionsContainer" class="hidden">
         <div>
           <p>__MSG_soFarUHSubmited__</p>
           <span id="sponsorTimesContributionsDisplay">
diff --git a/src/popup.ts b/src/popup.ts
index a8399fcf..89b96454 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -188,8 +188,8 @@ async function runThePopup(messageListener?: MessageListener) {
         } else {
             PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
         }*/
-        PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed;
-        PageElements.sponsorTimesContributionsContainer.style.display = "flex";
+        PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed.toLocaleString();
+        PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
 
         //get the userID
         let userID = Config.config.userID;
@@ -206,7 +206,7 @@ async function runThePopup(messageListener?: MessageListener) {
                             PageElements.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
                         }
 
-                        PageElements.sponsorTimesViewsDisplay.innerText = viewCount;
+                        PageElements.sponsorTimesViewsDisplay.innerText = viewCount.toLocaleString();
                         PageElements.sponsorTimesViewsContainer.style.display = "unset";
                     }
                 }
@@ -239,7 +239,7 @@ async function runThePopup(messageListener?: MessageListener) {
             PageElements.sponsorTimesSkipsDoneEndWord.innerText = chrome.i18n.getMessage("Segment");
         }
 
-        PageElements.sponsorTimesSkipsDoneDisplay.innerText = Config.config.skipCount;
+        PageElements.sponsorTimesSkipsDoneDisplay.innerText = Config.config.skipCount.toLocaleString();
         PageElements.sponsorTimesSkipsDoneContainer.style.display = "unset";
     }
 
@@ -856,8 +856,11 @@ async function runThePopup(messageListener?: MessageListener) {
 
         PageElements.setUsernameContainer.style.display = "none";
         PageElements.setUsername.style.display = "flex";
+        PageElements.setUsername.classList.add("SBExpanded");
         
         PageElements.setUsernameStatusContainer.style.display = "none";
+
+        PageElements.sponsorTimesContributionsContainer.classList.add("hidden");
     }
 
     //submit the new username
@@ -873,9 +876,12 @@ async function runThePopup(messageListener?: MessageListener) {
                 PageElements.usernameInput.style.display = "none";
 
                 PageElements.setUsernameContainer.style.removeProperty("display");
+                PageElements.setUsername.classList.remove("SBExpanded");
                 PageElements.usernameValue.innerText = PageElements.usernameInput.value;
 
                 PageElements.setUsernameStatusContainer.style.display = "none";
+
+                PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
             } else {
                 PageElements.setUsernameStatus.innerText = utils.getErrorMessage(response.status);
             }