- Popup editor now mostly works

- Add option to disable animations
- Clean up code
- Mess up code
- Fix typo in package name
- Upgrade vite-plugin-svelte to fix: sveltejs/vite-plugin-svelte#641
- Upgrade vite to patch CVE
- Allow importing CSS into component scopes

Author: null-dev

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "firefox-profile-swticher",
+  "name": "firefox-profile-switcher",
   "version": "2.0.0",
   "displayName": "Profile Switcher for Firefox",
   "author": "null-dev",
@@ -18,18 +18,21 @@
   "license": "MIT",
   "devDependencies": {
     "@samrum/vite-plugin-web-extension": "^2.2.0",
-    "@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "@sveltejs/vite-plugin-svelte": "^2.4.1",
     "@tsconfig/svelte": "^3.0.0",
     "@types/marked": "^4.0.8",
     "@types/webextension-polyfill": "^0.9.2",
+    "@untemps/svelte-use-tooltip": "^2.8.0",
+    "animejs": "^3.2.1",
     "svelte": "^3.55.0",
     "svelte-check": "^3.0.1",
     "svelte-dnd-action": "github:null-dev/svelte-dnd-action-nd.git#diff",
     "svelte-highlight": "^6.2.1",
     "svelte-preprocess": "^5.0.0",
+    "magic-string": "^0.30.0",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "~4.0.3",
+    "vite": "~4.3.9",
     "web-ext": "^7.4.0"
   },
   "dependencies": {

package.json

@@ -92,17 +92,23 @@
     import settingsIcon from "~/assets/settings-gray.svg";
     import Button from "~/lib/components/button/Button.svelte";
     import {ButtonType} from "~/lib/components/button/button";
-    import {resolveAsset} from "~/lib/utils";
+    import {resolveAsset} from "~/lib/util/assets";
     import {CURRENT_OPERATION, EDIT_MODE_CONTEXT, OperationKind} from "../manager";
-    import {getTypedContext} from "~/lib/typed-context";
+    import {getTypedContext} from "~/lib/util/typed-context";
     import ProfileEditor from "../editor/ProfileEditor.svelte";
     import {defaultProfileOptions} from "~/lib/model/profiles";
     import {globalOptionsStore, profileListStore} from "~/lib/common";
     import OptionsEditor from "../options/OptionsEditor.svelte";
+    import listIcon from "~/assets/list.svg";
+    import {fade, slide} from 'svelte/transition';
 
     const editMode = getTypedContext(EDIT_MODE_CONTEXT);
     const currentOperation = getTypedContext(CURRENT_OPERATION);
 
+    export let openPopupEditor: () => void | null = null;
+    export let closePopupEditor: (save: boolean) => void | null = null;
+    export let popupEditorActive: boolean = false;
+
     let lastOperation;
     $: if($currentOperation != null) {
         lastOperation = $currentOperation;
@@ -148,6 +154,8 @@
         pokeOperationIdleTimer();
         $currentOperation // Trigger when $currentOperation changes
     }
+
+    const buttonTransition = {duration: 250, axis: 'x'};
 </script>
 
 <div class="bottom-bar" class:expanded={$currentOperation != null}>
@@ -158,15 +166,36 @@
                 <b>Profile&nbsp;Switcher</b> for&nbsp;Firefox
             </div>
         </div>
+        <!-- TODO What to do about this transition? -->
         <div class="bottom-bar-controls">
-            <Button on:click={startAddProfileOperation}>+ Add profile</Button>
-            <Button on:click={() => $editMode = !$editMode}
-                    type={$editMode ? ButtonType.Primary : ButtonType.Normal}>
-                {$editMode ? "Exit edit mode" : "Edit profiles"}
-            </Button>
-            <Button on:click={startEditOptionsOperation}>
-                <img class="control-icon invert-when-dark" src={resolveAsset(settingsIcon)} alt="Settings icon"/>
-            </Button>
+            {#if popupEditorActive}
+                <div transition:slide|local={buttonTransition}>
+                    <Button on:click={() => closePopupEditor?.(false)}>Cancel</Button>
+                </div>
+                <div transition:slide|local={buttonTransition}>
+                    <Button on:click={() => closePopupEditor?.(true)}
+                            type={ButtonType.Primary}>
+                        Save
+                    </Button>
+                </div>
+            {/if}
+            {#if !popupEditorActive}
+                {#if $editMode}
+                    <div>
+                        <Button on:click={openPopupEditor}>
+                            Popup editor
+                        </Button>
+                    </div>
+                {/if}
+                <Button on:click={startAddProfileOperation}>+ Add profile</Button>
+                <Button on:click={() => $editMode = !$editMode}
+                        type={$editMode ? ButtonType.Primary : ButtonType.Normal}>
+                    {$editMode ? "Exit edit mode" : "Edit profiles"}
+                </Button>
+                <Button on:click={startEditOptionsOperation}>
+                    <img class="control-icon invert-when-dark" src={resolveAsset(settingsIcon)} alt="Settings icon"/>
+                </Button>
+            {/if}
         </div>
     </div>
     {#if lastOperation != null && ($currentOperation != null || !operationIdle)}

src/assets/list.svg

@@ -51,7 +51,7 @@
     import {loadAvatarIntoImageAction, profileListStore} from "~/lib/common";
     import {scale} from "svelte/transition";
     import deleteIcon from "~/assets/delete-white.svg";
-    import {resolveAsset} from "~/lib/utils";
+    import {resolveAsset} from "~/lib/util/assets";
     import Loader from "~/lib/components/loader/Loader.svelte";
     import {nativeDeleteAvatar} from "~/lib/native";
     import type {AvatarItem} from "./avatar";

src/entries/manager/components/bottombar/BottomBar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {resolveAsset} from "~/lib/utils";
+    import {resolveAsset} from "~/lib/util/assets";
     import Loader from "~/lib/components/loader/Loader.svelte";
 
     export let src;

src/entries/manager/components/editor/AvatarPictureOption.svelte

@@ -35,7 +35,7 @@
 
 <script lang="ts">
     import addIcon from "~/assets/add-white.svg";
-    import {resolveAsset} from "~/lib/utils";
+    import {resolveAsset} from "~/lib/util/assets";
     import resAvatarList from "~/assets/avatarlist/avatarlist.json";
     import {customAvatarsStore} from "~/lib/common";
     import AvatarPictureOption from "./AvatarPictureOption.svelte";

src/entries/manager/components/editor/EditButton.svelte

@@ -3,14 +3,14 @@
     import ManagerPage from "../../main/ManagerPage.svelte";
     import Button from "~/lib/components/button/Button.svelte";
     import {ButtonType} from "~/lib/components/button/button";
-    import {getTypedContext} from "~/lib/typed-context";
+    import {getTypedContext} from "~/lib/util/typed-context";
     import {confirmAndDeleteProfile, CURRENT_OPERATION, NEW_PROFILE_EVENT} from "../manager";
-    import {getUniqueElementId} from "~/lib/utils";
     import Input from "~/lib/components/input/Input.svelte";
     import PictureList from "./PictureList.svelte";
     import {nativeCreateProfile, nativeDeleteProfile, nativeUpdateProfile} from "~/lib/native";
-    import {success} from "~/lib/toast";
+    import {success} from "~/lib/util/toast";
     import InputLabel from "~/lib/components/input/InputLabel.svelte";
+    import {getUniqueElementId} from "~/lib/util/dom";
 
     export let operation: EditProfileOperation;
 

src/entries/manager/components/editor/PictureList.svelte

@@ -1,4 +1,4 @@
-import {newContextKey} from "~/lib/typed-context";
+import {newContextKey} from "~/lib/util/typed-context";
 import type {Writable} from "svelte/store";
 import type {GlobalOptions, Profile, ProfileOptions} from "~/lib/model/profiles";
 import {nativeDeleteProfile} from "~/lib/native";

src/entries/manager/components/editor/ProfileEditor.svelte

@@ -15,14 +15,14 @@
     import Button from "~/lib/components/button/Button.svelte";
     import {ButtonType} from "~/lib/components/button/button";
     import Input from "~/lib/components/input/Input.svelte";
-    import {getUniqueElementId} from "~/lib/utils";
     import {CURRENT_OPERATION} from "../manager";
     import type {EditOptionsOperation} from "../manager";
     import type {GlobalOptions, ProfileOptions} from "~/lib/model/profiles";
-    import {getTypedContext} from "~/lib/typed-context";
+    import {getTypedContext} from "~/lib/util/typed-context";
     import InputLabel from "~/lib/components/input/InputLabel.svelte";
     import {profileListStore} from "~/lib/common";
     import {nativeUpdateOptions, nativeUpdateProfile} from "~/lib/native";
+    import {getUniqueElementId} from "~/lib/util/dom";
 
     export let operation: EditOptionsOperation;
 
@@ -40,13 +40,15 @@
     let darkModeAllChecked = false;
     let windowFocusWorkAroundChecked = false;
     let editModeAlwaysShowOptionsChecked = false;
+    let popupProfileOrder = null;
     deserializeSettings(operation.initialProfileOptions, operation.initialGlobalOptions)
 
     function deserializeSettings(profile: ProfileOptions, global: GlobalOptions) {
         darkModeChecked = global.darkMode ?? profile.darkMode;
         darkModeAllChecked = global.darkMode != null;
         windowFocusWorkAroundChecked = global.windowFocusWorkaround;
         editModeAlwaysShowOptionsChecked = global.editModeAlwaysShowOptions;
+        popupProfileOrder = global.popupProfileOrder;
     }
 
     let saving = false;
@@ -61,6 +63,8 @@
                 darkMode: darkModeAllChecked ? darkModeChecked : null,
                 windowFocusWorkaround: windowFocusWorkAroundChecked,
                 editModeAlwaysShowOptions: editModeAlwaysShowOptionsChecked,
+                disableAnimations: false, // TODO
+                popupProfileOrder
             };
 
             const profileList = $profileListStore?.profiles;