feat: show value lengths and overall size

src/common/ui/externals.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { string2uint8array } from '#/common';
+import { formatByteLength, string2uint8array } from '#/common';
 import VmCode from '#/common/ui/code';
 import storage from '#/common/storage';
 
@@ -121,10 +121,7 @@ export default {
       if (type.startsWith('@resource')) {
         len = Math.round((len - str.indexOf(',') - 1) * 6 / 8); // base64 uses 6 bits out of 8
       }
-      return !len ? ''
-        : len < 1024 && `${len} B`
-        || len < 1024 * 1024 && `${len >> 10} k` // eslint-disable-line no-bitwise
-        || `${+(len / (1024 * 1024)).toFixed(1)} M`; // allow fractions for megabytes
+      return formatByteLength(len);
     },
   },
 };

src/common/util.js

@@ -187,6 +187,13 @@ export function formatTime(duration) {
   return `${duration | 0}${unitInfo[0]}`;
 }
 
+export const formatByteLength = len => (
+  !len ? ''
+    : len < 1024 && `${len} B`
+    || len < 1024 * 1024 && `${len >> 10} k` // eslint-disable-line no-bitwise
+    || `${+(len / (1024 * 1024)).toFixed(1)} M` // allow fractions for megabytes
+);
+
 export function isEmpty(obj) {
   for (const key in obj) {
     if (obj::hasOwnProperty(key)) {

src/options/utils/index.js

@@ -11,4 +11,5 @@ export const store = {
     return store.scripts.filter(script => script.config.removed);
   },
   HiDPI: isHiDPI,
+  storageSize: 0,
 };

src/options/views/edit/index.vue

@@ -60,7 +60,10 @@
 </template>
 
 <script>
-import { debounce, getScriptName, i18n, isEmpty, sendCmdDirectly, trueJoin } from '#/common';
+import {
+  debounce, formatByteLength, getScriptName, i18n, isEmpty,
+  sendCmdDirectly, trueJoin,
+} from '#/common';
 import { deepCopy, deepEqual, objectPick } from '#/common/object';
 import { showMessage } from '#/common/ui';
 import { keyboardService } from '#/common/keyboard';
@@ -168,10 +171,13 @@ export default {
       const { meta, props } = this.script || {};
       const req = meta?.require.length && '@require';
       const res = !isEmpty(meta?.resources) && '@resource';
+      const size = store.storageSize;
       return {
         code: i18n('editNavCode'),
         settings: i18n('editNavSettings'),
-        ...props?.id && { values: i18n('editNavValues') },
+        ...props?.id && {
+          values: i18n('editNavValues') + (size ? ` (${formatByteLength(size)})` : ''),
+        },
         ...(req || res) && { externals: [req, res]::trueJoin('/') },
         help: '?',
       };
@@ -208,6 +214,7 @@ export default {
     }
   },
   async mounted() {
+    store.storageSize = 0;
     this.nav = 'code';
     const id = this.script?.props?.id;
     if (id) {

src/options/views/edit/values.vue

@@ -39,6 +39,7 @@
           </div>
         </div>
         <div class="ellipsis flex-auto" v-text="getValue(key, true)"></div>
+        <pre v-text="getLength(key)"/>
       </a>
     </div>
     <div class="edit-values-panel flex flex-col mb-1c" v-if="current">
@@ -73,12 +74,13 @@
 
 <script>
 import Tooltip from 'vueleton/lib/tooltip/bundle';
-import { dumpScriptValue, sendCmdDirectly } from '#/common';
+import { dumpScriptValue, formatByteLength, sendCmdDirectly } from '#/common';
 import { keyboardService } from '#/common/keyboard';
 import { mapEntry } from '#/common/object';
 import Icon from '#/common/ui/icon';
 import storage from '#/common/storage';
 import { showMessage } from '#/common/ui';
+import { store } from '../../utils';
 
 const PAGE_SIZE = 25;
 const MAX_LENGTH = 1024;
@@ -154,6 +156,10 @@ export default {
     },
   },
   methods: {
+    getLength(key) {
+      const len = this.values[key].length - 1;
+      return len < 10_000 ? len : formatByteLength(len);
+    },
     getValue(key, sliced) {
       let value = this.values[key];
       const type = value[0];
@@ -169,6 +175,10 @@ export default {
       this.values = values;
       this.keys = Object.keys(values).sort();
       this.page = Math.min(this.page, this.totalPages) || 1;
+      this.calcSize();
+    },
+    calcSize() {
+      store.storageSize = this.keys.reduce((sum, key) => sum + this.values[key].length - 1, 0);
     },
     updateValue({ key, jsonValue, isNew }) {
       const rawValue = dumpScriptValue(jsonValue) || '';
@@ -183,6 +193,7 @@ export default {
           if (i >= 0) this.keys.splice(i, 1);
           this.$delete(this.values, key);
         }
+        this.calcSize();
       });
     },
     onNew() {
@@ -280,6 +291,8 @@ export default {
             current.value = newText;
           }
         }
+      } else {
+        store.storageSize = 0;
       }
     },
   },
@@ -307,6 +320,10 @@ export default {
         border-left: 1px solid var(--fill-2);
       }
     }
+    pre {
+      width: 5em;
+      text-align: right;
+    }
     &:focus,
     &:hover {
       background-color: var(--fill-0-5);