From f4325b7db9dcfc68daefab349ec70256e9a05bea Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 7 Nov 2020 09:58:46 -0500
Subject: [PATCH] Fix byte count labels (#998)

* Add 'TB' label

* Prevent overflow

* Fix storage information on the old settings page
---
 ext/bg/js/settings/storage-controller.js | 5 +++--
 ext/bg/settings.html                     | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/ext/bg/js/settings/storage-controller.js b/ext/bg/js/settings/storage-controller.js
index bc57017f..32b98304 100644
--- a/ext/bg/js/settings/storage-controller.js
+++ b/ext/bg/js/settings/storage-controller.js
@@ -148,9 +148,10 @@ class StorageController {
 
     _bytesToLabeledString(size) {
         const base = 1000;
-        const labels = [' bytes', 'KB', 'MB', 'GB'];
+        const labels = [' bytes', 'KB', 'MB', 'GB', 'TB'];
+        const maxLabelIndex = labels.length - 1;
         let labelIndex = 0;
-        while (size >= base) {
+        while (size >= base && labelIndex < maxLabelIndex) {
             size /= base;
             ++labelIndex;
         }
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index fbd777d8..67a2d75c 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -818,14 +818,14 @@
                     </p>
                 </div>
 
-                <div id="storage-use" hidden>
-                    <p class="help-block" class="storage-use-invalid">
+                <div id="storage-use">
+                    <p class="help-block storage-use-invalid">
                         Yomichan is using an indeterminate amount of storage.
                     </p>
-                    <p class="help-block" class="storage-use-finite" hidden>
+                    <p class="help-block storage-use-finite" hidden>
                         Yomichan is using approximately <strong class="storage-usage"></strong> of <strong class="storage-quota"></strong>.
                     </p>
-                    <p class="help-block" class="storage-use-infinite" hidden>
+                    <p class="help-block storage-use-infinite" hidden>
                         Yomichan is permitted <strong>unlimited storage</strong>.
                     </p>
                 </div>