Recently used scripts

README.md

@@ -39,7 +39,6 @@ $ npm run build
 
 After the extension has been built, [load it in a browser.](#loading-extension-in-web-browser-locally)
 
-
 ## Loading extension in web browser locally
 
 ❗️Run the build script at least once before loading extensions into the browser.

docs/development.md

@@ -1,6 +1,7 @@
 # Development setup
 
 ## Setup
+
 When actively developing the extension you can use `start` to have Webpack watch for changes and automatically recompile the extension.
 
 ```bash

package.json

@@ -23,8 +23,8 @@
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
-    "simple-plausible-tracker": "git+https://github.com/anthonyec/simple_plausible_tracker.git#0584220c975631d78fb2998f6ba538fe58aaa946",
-    "use-callback-ref": "^1.2.1"
+    "reselect": "^4.0.0",
+    "simple-plausible-tracker": "git+https://github.com/anthonyec/simple_plausible_tracker.git#0584220c975631d78fb2998f6ba538fe58aaa946"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

src/popup/app.css

@@ -34,6 +34,10 @@
   --icon-normal-fill: #5F6369;
 
   --toolbar-border-color: #E1E3E6;
+
+  --list-heading-background: var(--global-background);
+  --list-heading-color: #5F6368;
+  --list-heading-border-color: #DADCE0;
 }
 
 @media(prefers-color-scheme: dark) {
@@ -65,6 +69,10 @@
     --icon-normal-fill: #9AA0A7;
 
     --toolbar-border-color: #393D40;
+
+    --list-heading-background: var(--global-background);
+    --list-heading-color: #9AA0A6;
+    --list-heading-border-color: #3C4043;
   }
 }
 

src/popup/components/list/index.jsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+import './list.css';
+
+const KEYS = {
+  ENTER: 13,
+  UP: 38,
+  DOWN: 40,
+  RIGHT: 39,
+  LEFT: 37
+};
+
+// Return an array of concatenated ids. This is used for useEffect which only
+// shallow compares. Thus would always render when an array is used instead
+// of a string or number.
+// E.g [{ id: 3 }, { id: 2 }] becomes '32'.
+function getArrayAsStringOfIds(array) {
+  return array.map((item) => item.id).join('');
+}
+
+function shouldShowGroupHeading(previousItem, currentItem) {
+  if (!previousItem && currentItem) {
+    return true;
+  }
+
+  if (previousItem.group !== currentItem.group) {
+    return true;
+  }
+
+  return false;
+}
+
+function getGroupHeadingFromItem(groups, item) {
+  const foundGroup = groups.find((group) => {
+    return group.id === item.group;
+  });
+
+  return foundGroup && foundGroup.title;
+}
+
+const List = React.forwardRef(
+  (
+    {
+      items = [],
+      groups = [],
+      placeholder = '',
+      disableKeyboardNavigation,
+
+      /** Callback when item is clicked or enter key is pressed. */
+      onItemAction = () => {}
+    },
+    ref
+  ) => {
+    const [selectedItemIndex, setSelectedItemIndex] = useState(0);
+    const selectItemIndexRef = useRef(selectedItemIndex);
+
+    // TODO: Hack fix for enter key to work correctly with up-to-date index
+    selectItemIndexRef.current = selectedItemIndex;
+
+    const handleItemClick = (item) => {
+      onItemAction(item);
+    };
+
+    const handleItemEnter = () => {
+      const item = items[selectItemIndexRef.current];
+      onItemAction(item);
+    };
+
+    const getPrevIndex = (index) => {
+      const calculatedIndex = index - 1;
+      return calculatedIndex < 0 ? items.length - 1 : calculatedIndex;
+    };
+
+    const getNextIndex = (index) => {
+      const calculatedIndex = index + 1;
+      return calculatedIndex > items.length - 1 ? 0 : calculatedIndex;
+    };
+
+    const handleKeyDown = (evt) => {
+      if (disableKeyboardNavigation) {
+        return;
+      }
+
+      switch (evt.keyCode) {
+        case KEYS.ENTER:
+          evt.preventDefault();
+          handleItemEnter();
+          break;
+
+        case KEYS.UP:
+          evt.preventDefault();
+          // Use state function for performance reasons. This allows us to
+          // access previous state without rebinding the key listeners.
+          // https://stackoverflow.com/a/62005831/4703489
+          setSelectedItemIndex((prevIndex) => getPrevIndex(prevIndex));
+          break;
+
+        case KEYS.DOWN:
+          evt.preventDefault();
+          setSelectedItemIndex((nextIndex) => getNextIndex(nextIndex));
+          break;
+
+        default:
+      }
+    };
+
+    useEffect(() => {
+      window.document.addEventListener('keydown', handleKeyDown);
+
+      return () => {
+        window.document.removeEventListener('keydown', handleKeyDown);
+      };
+    }, [disableKeyboardNavigation, getArrayAsStringOfIds(items)]);
+
+    // Reset selected to first item when `items` change to avoid selected being
+    // out of bounds when the array length changes.
+    useEffect(() => {
+      setSelectedItemIndex(0);
+    }, [getArrayAsStringOfIds(items)]);
+
+    const renderedItems = items.map((item, index) => {
+      const previousItem = index === 0 ? null : items[index - 1];
+      const groupHeading = getGroupHeadingFromItem(groups, item);
+      const showGroupHeading =
+        groupHeading && shouldShowGroupHeading(previousItem, item);
+      const isSelected = index === selectedItemIndex;
+      const listClassNameWithGroup =
+        groups.length !== 0 ? 'list__item--group' : '';
+      const className = isSelected
+        ? `list__item list__item--selected ${listClassNameWithGroup}`
+        : `list__item ${listClassNameWithGroup}`;
+
+      return (
+        <React.Fragment key={item.id}>
+          {showGroupHeading && (
+            <div className="list__heading">{groupHeading}</div>
+          )}
+          <li
+            ref={isSelected ? ref && ref.selectedItem : null}
+            className={className}
+            onClick={handleItemClick.bind(null, item)}
+          >
+            <div className="list__text">{item.title || placeholder}</div>
+          </li>
+        </React.Fragment>
+      );
+    });
+
+    return <div className="list">{renderedItems}</div>;
+  }
+);
+
+export default List;

src/popup/components/search_list/search_list.css → src/popup/components/list/list.css

@@ -1,9 +1,23 @@
-.search-list {}
+.list {}
 
-.search-list__item {
+.list__heading {
+  background: var(--list-heading-background);
+  color: var(--list-heading-color);
+  border-top: 1px solid var(--list-heading-border-color);
+  padding: 20px var(--item-padding-left-right) 12px;
+  margin-top: 8px;
+  font-size: 12px;
+  position: relative;
+}
+
+.list__heading:first-child {
+  margin-top: 0;
+}
+
+.list__item {
   padding-left: var(--item-padding-left-right);
   padding-right: var(--item-padding-left-right);
-  height: 40px;
+  height: 34px;
   font-size: 12px;
   line-height: 20px;
   user-select: none;
@@ -15,23 +29,27 @@
   align-items: center;
 }
 
-.search-list__item:hover:not(.search-list__item--selected) {
+.list__item:hover:not(.list__item--selected) {
   background: var(--item-hover-background);
   border-color: var(--item-hover-background);
 }
 
-.search-list__item--selected {
+.list__item--selected {
   background: var(--item-selected-background);
   border-color: var(--item-selected-background);
 }
 
-.search-list__text {
+.list__item--group {
+  padding-left: calc(var(--item-padding-left-right) + 8px);
+}
+
+.list__text {
   width: 100%;
   overflow: hidden;
   margin-bottom: -1px;
   text-overflow: ellipsis;
 }
 
-.search-list__actions {
+.list__actions {
   margin-right: -6px;
 }

src/popup/components/scroll_view/index.jsx

@@ -1,34 +1,15 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
 import './scroll_view.css';
 
-export default function ScrollView({
-  children,
-  x = 0,
-  y = 0,
-  onScroll = () => {}
-}) {
-  const scrollViewRef = useRef();
-
-  const handleOnScroll = () => {
-    onScroll(scrollViewRef.current.scrollLeft, scrollViewRef.current.scrollTop);
+export default function ScrollView({ children }) {
+  const scrollToElement = (targetElement) => {
+    targetElement && targetElement.scrollIntoView({ block: 'nearest' });
   };
 
-  useEffect(() => {
-    scrollViewRef.current.scrollTo(x, y);
-  }, [x, y]);
-
-  useEffect(() => {
-    scrollViewRef.current.addEventListener('scroll', handleOnScroll);
-
-    return () => {
-      scrollViewRef.current.removeEventListener('scroll', handleOnScroll);
-    };
-  }, []);
-
   return (
-    <div className="scroll-view" ref={scrollViewRef}>
-      {children}
+    <div className="scroll-view">
+      {children && typeof children === 'function' && children(scrollToElement)}
     </div>
   );
 }

src/popup/components/search_field/index.jsx

@@ -4,8 +4,9 @@ import './search_field.css';
 
 function SearchField(
   {
-    onKeyDown = () => {},
     onChange = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
     placeholder = '',
     defaultValue = ''
   },
@@ -17,8 +18,9 @@ function SearchField(
         className="search-field__input"
         type="text"
         ref={ref}
-        onKeyDown={onKeyDown}
         onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
         placeholder={placeholder}
         defaultValue={defaultValue}
         autoComplete="off"

src/popup/components/search_field/search_field.css

@@ -1,5 +1,8 @@
 .search-field {
+  box-shadow: 0 1px 0 0 var(--list-heading-border-color);
   padding: 8px;
+  position: relative;
+  z-index: 2;
 }
 
 .search-field__input {