refactor: get rid of slow iterator-based Array.from

src/common/keyboard.js

@@ -56,8 +56,8 @@ function bindKeys() {
  * Ref: https://stackoverflow.com/a/11713537/4238335
  */
 export function handleTabNavigation(dir) {
-  const els = Array.from(document.querySelectorAll('[tabindex="0"],a[href],button,input,select,textarea'))
-  .filter(el => {
+  const els = document.querySelectorAll('[tabindex="0"],a[href],button,input,select,textarea')
+  ::[].filter(el => {
     if (el.tabIndex < 0) return false;
     const rect = el.getBoundingClientRect();
     return rect.width > 0 && rect.height > 0;

src/common/object.js

@@ -87,9 +87,9 @@ export function forEachValue(func, thisObj) {
 
 export function deepCopy(src) {
   if (!src || typeof src !== 'object') return src;
-  /* Not using `map` because its result belongs to the `window` of the source,
-   * so it becomes "dead object" in Firefox after GC collects it. */
-  if (Array.isArray(src)) return Array.from(src, deepCopy);
+  // Using a literal [] instead of `src.map(deepCopy)` to avoid src `window` leaking.
+  // Using `concat` instead of `for` loop to preserve holes in the array.
+  if (Array.isArray(src)) return [].concat(src).map(deepCopy);
   return src::mapEntry(deepCopy);
 }
 

src/popup/views/app.vue

@@ -497,8 +497,8 @@ export default {
     },
     navigate(dir) {
       const { activeElement } = document;
-      const items = Array.from(this.$el.querySelectorAll('[tabindex="0"]'))
-      .map(el => ({
+      const items = this.$el.querySelectorAll('[tabindex="0"]')
+      ::[].map(el => ({
         el,
         rect: el.getBoundingClientRect(),
       }))