feat: extension as side panel

superhero-com · Aug 5, 2024 · fe4a103 · fe4a103
1 parent 44a5856
commit fe4a103
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 55 deletions.
diff --git a/src/manifest.json b/src/manifest.json
@@ -10,6 +10,7 @@
     "unlimitedStorage",
     "activeTab",
     "tabs",
+    "sidePanel",
     "declarativeNetRequestWithHostAccess"
   ],
   "optional_permissions": [
@@ -55,5 +56,14 @@
       ],
       "matches": ["*://*/*"]
     }
-  ]
+  ],
+  "side_panel": {
+    "default_title": "Superhero Wallet",
+    "default_path": "index.html"
+  },
+  "sidebar_action": {
+    "default_title": "Superhero Wallet",
+    "default_panel": "index.html",
+    "default_icon": "icons/icon_128.png"
+  }
 }
diff --git a/src/popup/App.vue b/src/popup/App.vue
@@ -5,8 +5,6 @@
       class="app-wrapper"
       :class="{
         'show-header': delayedShowHeader,
-        'is-desktop-web': IS_WEB && !IS_MOBILE_DEVICE,
-        'is-extension': IS_EXTENSION,
       }"
     >
       <Loader v-if="isLoaderVisible && !isMobileQrScannerVisible" />
@@ -140,13 +138,20 @@ export default defineComponent({
       || routeMeta.value?.hideHeader
     ));
 
-    function setDocumentHeight() {
-      document.documentElement.style.setProperty(
-        '--height',
-        IS_MOBILE_APP && IS_IOS ? '100vh' : '100%',
-      );
-      if (IS_EXTENSION) {
+    /**
+     * Set classes on <html> element to allow CSS to behave differently based on the environment.
+     * Used mostly by `env-*` mixins set in `mixins.scss` file.
+     */
+    function setHtmlEnvironmentClasses() {
+      if (IS_MOBILE_APP) {
+        document.documentElement.classList.add(
+          'is-mobile',
+          (IS_IOS) ? 'is-mobile-ios' : 'is-mobile-android',
+        );
+      } else if (IS_EXTENSION) {
         document.documentElement.classList.add('is-extension');
+      } else if (IS_WEB) {
+        document.documentElement.classList.add('is-web');
       }
     }
 
@@ -235,7 +240,7 @@ export default defineComponent({
     });
 
     onMounted(() => {
-      setDocumentHeight();
+      setHtmlEnvironmentClasses();
       checkExtensionUpdates();
       restoreLanguage();
       restoreTransferSendForm();
@@ -289,6 +294,12 @@ export default defineComponent({
 @use '@/styles/mixins';
 
 .app {
+  --screen-padding-x: 16px;
+  --screen-border-radius: 0;
+  --screen-bg-color: #{$color-bg-app};
+  --header-height: 0;
+  --gap: 12px;
+
   position: relative;
   display: flex;
   justify-content: center;
@@ -297,12 +308,6 @@ export default defineComponent({
   height: 100%;
 
   .app-wrapper {
-    --screen-padding-x: 16px;
-    --screen-border-radius: 0;
-    --screen-bg-color: #{$color-bg-app};
-    --header-height: 0;
-    --gap: 12px;
-
     @extend %text-body;
 
     position: relative;
@@ -340,34 +345,36 @@ export default defineComponent({
       width: 100%;
     }
 
-    &.is-extension,
-    &.is-desktop-web {
-      width: $extension-width;
-      height: $extension-height;
+    &.show-header {
+      --header-height: 40px;
     }
+  }
+
+  @include mixins.env-mobile-ios {
+    height: 100vh;
+  }
 
-    // Imitate the appearance of the mobile/extension app in a desktop browser
+  // Setting the extension popup window size
+  @include mixins.env-extension {
+    min-width: $extension-width;
+    min-height: $extension-height;
+  }
 
-    &.is-desktop-web {
+  @include mixins.env-web {
+    // Imitate the appearance of the mobile/extension app by displaying it in a box
+    // TODO consider full-screen
+    @include mixins.desktop {
       --screen-border-radius: #{$border-radius-app};
 
-      overflow: hidden;
-      box-shadow: $color-border 0 0 0 1px;
-      transform: translate(0, 0); // Create custom viewport for fixed elements
-
-      @include mixins.mobile {
-        --screen-border-radius: 0;
+      width: $extension-width;
+      height: $extension-height;
 
-        width: 100%;
-        height: 100%;
-        overflow: visible;
-        box-shadow: none;
+      .app-wrapper {
+        overflow: hidden;
+        box-shadow: $color-border 0 0 0 1px;
+        transform: translate(0, 0); // Create custom viewport for fixed elements
       }
     }
-
-    &.show-header {
-      --header-height: 40px;
-    }
   }
 }
 </style>
diff --git a/src/popup/components/ListItemWrapper.vue b/src/popup/components/ListItemWrapper.vue
@@ -38,7 +38,7 @@ export default defineComponent({
   &:hover {
     background-color: rgba($color-bg-4-hover, 0.5);
 
-    @include mixins.mobile {
+    @include mixins.env-mobile {
       background-color: transparent;
     }
   }

diff --git a/src/popup/router/index.ts b/src/popup/router/index.ts
@@ -155,6 +155,7 @@ if (IS_MOBILE_APP) {
       }
     });
 
+    // TODO establish if we still need this
     router.afterEach((to) => {
       if (to.path === '/') {
         document.body.classList.remove('color-bg-app');

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -33,7 +33,6 @@
 html.is-extension {
   // Fixes issue with extension not rendering properly
   // .tabs-inner & .ion-page classes are added by Ionic
-
   ion-tabs,
   .tabs-inner,
   ion-router-outlet,
@@ -44,16 +43,10 @@ html.is-extension {
   body {
     position: unset;
   }
-
-  .app {
-    width: $extension-width;
-    height: $extension-height;
-  }
 }
 
 // When scanner is active we need to hide everything else
 // because the scanner will show-up behind the webview
-
 body.scanner-active {
   background-color: transparent;
 
@@ -109,31 +102,29 @@ ion-content {
   }
 
   /** remove left-right padding **/
-
   &::part(scroll) {
     --padding-end: 0;
     --padding-start: 0;
     --padding-top: 0;
   }
 }
 
-html,
-body,
-#app {
-  height: var(--height);
-}
-
-body,
-#app {
-  --ion-text-color: $color-white;
-  --ion-font-family: $font-sans;
 
+body {
+  height: 100%;
   margin: 0;
   background-color: $color-black;
 
   &.color-bg-app {
     background-color: $color-bg-app;
   }
+}
+
+#app {
+  --ion-text-color: $color-white;
+  --ion-font-family: $font-sans;
+
+  height: 100%;
 
   @include mixins.desktop {
     display: flex;

diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -12,6 +12,34 @@
   }
 }
 
+// Based on class added to html element by App.vue component
+@mixin env-mobile {
+  @at-root html.is-mobile & {
+    @content;
+  }
+}
+
+// Based on class added to html element by App.vue component
+@mixin env-mobile-ios {
+  @at-root html.is-mobile-ios & {
+    @content;
+  }
+}
+
+// Running in extension popup or extension side panel
+@mixin env-extension {
+  @at-root html.is-extension & {
+    @content;
+  }
+}
+
+// Running in regular browser window
+@mixin env-web {
+  @at-root html.is-web & {
+    @content;
+  }
+}
+
 @mixin collapsed {
   @media screen and (max-height: 250px) {
     @content;