feat: add overflow menu with links for options and website

src/_locales/en/messages.json

@@ -340,6 +340,16 @@
     "description": "Title of the page."
   },
 
+  "actionMenu_options": {
+    "message": "Options",
+    "description": "Title of the menu item."
+  },
+
+  "actionMenu_website": {
+    "message": "Website",
+    "description": "Title of the menu item."
+  },
+
   "error_invalidUrl": {
     "message": "The URL is not valid. It must point to a HTTP(S) or FTP page.",
     "description": "Error message."

src/action/App.vue

@@ -7,23 +7,38 @@
       <div class="header-buttons">
         <v-icon-button
           class="contribute-button"
-          :ripple="false"
           src="/src/contribute/assets/heart.svg"
           @click="showContribute"
         >
         </v-icon-button>
 
         <v-icon-button
           class="settings-button"
-          :ripple="false"
-          @click="showSettings = !showSettings"
+          @click="showActionSettings = !showActionSettings"
         >
           <img
             class="mdc-icon-button__icon"
-            :src="`/src/icons/misc/${showSettings ? 'linkOn' : 'link'}.svg`"
+            :src="
+              `/src/icons/misc/${showActionSettings ? 'linkOn' : 'link'}.svg`
+            "
           />
         </v-icon-button>
+
+        <v-icon-button
+          class="menu-button"
+          src="/src/icons/misc/more.svg"
+          @click="showActionMenu"
+        >
+        </v-icon-button>
       </div>
+
+      <v-menu
+        ref="actionMenu"
+        class="action-menu"
+        :ripple="true"
+        :items="listItems.actionMenu"
+        @selected="onActionMenuSelect"
+      ></v-menu>
     </div>
 
     <transition
@@ -32,7 +47,7 @@
       @after-enter="settingsAfterEnter"
       @after-leave="settingsAfterLeave"
     >
-      <div class="settings" v-show="showSettings">
+      <div class="settings" v-show="showActionSettings">
         <v-textfield
           ref="pageUrlInput"
           v-model.trim="pageUrl"
@@ -84,14 +99,16 @@ import browser from 'webextension-polyfill';
 import {ResizeObserver} from 'vue-resize';
 import {MDCList} from '@material/list';
 import {MDCRipple} from '@material/ripple';
-import {IconButton, TextField} from 'ext-components';
+import {IconButton, TextField, Menu} from 'ext-components';
 
 import storage from 'storage/storage';
 import {
   getEnabledEngines,
   showNotification,
   validateUrl,
-  showContributePage
+  getListItems,
+  showContributePage,
+  showProjectPage
 } from 'utils/app';
 import {getText, isAndroid} from 'utils/common';
 import {targetEnv} from 'utils/config';
@@ -100,14 +117,20 @@ export default {
   components: {
     [IconButton.name]: IconButton,
     [TextField.name]: TextField,
+    [Menu.name]: Menu,
     [ResizeObserver.name]: ResizeObserver
   },
 
   data: function() {
     return {
       dataLoaded: false,
 
-      showSettings: false,
+      listItems: getListItems(
+        {actionMenu: ['options', 'website']},
+        {scope: 'actionMenu'}
+      ),
+
+      showActionSettings: false,
       hasScrollBar: false,
       isPopup: false,
 
@@ -146,7 +169,7 @@ export default {
     },
 
     selectItem: async function(engine) {
-      if (this.showSettings) {
+      if (this.showActionSettings) {
         if (!validateUrl(this.pageUrl)) {
           this.focusPageUrlInput();
           showNotification({messageId: 'error_invalidUrl'});
@@ -167,6 +190,28 @@ export default {
       this.closeAction();
     },
 
+    showOptions: async function() {
+      await browser.runtime.openOptionsPage();
+      this.closeAction();
+    },
+
+    showWebsite: async function() {
+      await showProjectPage();
+      this.closeAction();
+    },
+
+    showActionMenu: function() {
+      this.$refs.actionMenu.$emit('open');
+    },
+
+    onActionMenuSelect: async function(item) {
+      if (item === 'options') {
+        await this.showOptions();
+      } else if (item === 'website') {
+        await this.showWebsite();
+      }
+    },
+
     closeAction: async function() {
       if (!this.isPopup) {
         browser.tabs.remove((await browser.tabs.getCurrent()).id);
@@ -263,7 +308,7 @@ body,
 
 body {
   margin: 0;
-  min-width: 340px;
+  min-width: 326px;
   overflow: hidden;
   @include mdc-typography-base;
   font-size: 100%;
@@ -277,7 +322,7 @@ body {
   white-space: nowrap;
   padding-top: 16px;
   padding-left: 16px;
-  padding-right: 12px;
+  padding-right: 8px;
 }
 
 .title {
@@ -292,20 +337,39 @@ body {
   align-items: center;
   height: 24px;
   margin-left: 56px;
-  @media (max-width: 339px) {
+  @media (max-width: 325px) {
     margin-left: 32px;
   }
 }
 
 .contribute-button,
-.settings-button {
-  @include mdc-icon-button-icon-size(24px, 24px, 8px);
+.settings-button,
+.menu-button {
+  @include mdc-icon-button-icon-size(24px, 24px, 6px);
+
+  &::before {
+    --mdc-ripple-fg-size: 20px;
+    --mdc-ripple-fg-scale: 1.8;
+    --mdc-ripple-left: 8px;
+    --mdc-ripple-top: 8px;
+  }
 }
 
 .contribute-button {
+  margin-right: 8px;
+}
+
+.settings-button {
   margin-right: 4px;
 }
 
+.action-menu {
+  left: auto !important;
+  top: 56px !important;
+  right: 16px;
+  transform-origin: top right !important;
+}
+
 .settings {
   padding: 16px;
 }

src/background/main.js

@@ -116,7 +116,7 @@ async function createMenu(options) {
 
     createMenuItem({
       id: 'par-1',
-      title: getText('extensionShortName'),
+      title: getText('extensionName'),
       contexts
     });
 
@@ -212,7 +212,7 @@ async function searchEngine(
   const tabUrl = await getTabUrl(url, engineId, options);
 
   if (options.openNewTab) {
-    const tab = await createTab(tabUrl, tabIndex, tabActive);
+    const tab = await createTab(tabUrl, {index: tabIndex, active: tabActive});
     tabId = tab.id;
   } else {
     await browser.tabs.update(tabId, {url: tabUrl});
@@ -495,7 +495,7 @@ async function setBrowserAction() {
     return;
   }
 
-  browser.browserAction.setTitle({title: getText('extensionShortName')});
+  browser.browserAction.setTitle({title: getText('extensionName')});
   if (enEngines.length === 0) {
     if (!hasListener) {
       browser.browserAction.onClicked.addListener(onActionClick);

src/options/App.vue

@@ -33,15 +33,15 @@
           <v-select
             :label="getText('optionTitle_showInContextMenu')"
             v-model="options.showInContextMenu"
-            :options="selectOptions.showInContextMenu"
+            :options="listItems.showInContextMenu"
           >
           </v-select>
         </div>
         <div class="option select">
           <v-select
             :label="getText('optionTitle_searchAllEngines')"
             v-model="options.searchAllEnginesContextMenu"
-            :options="selectOptions.searchAllEnginesContextMenu"
+            :options="listItems.searchAllEnginesContextMenu"
           >
           </v-select>
         </div>
@@ -57,7 +57,7 @@
           <v-select
             :label="getText('optionTitle_searchAllEngines')"
             v-model="options.searchAllEnginesAction"
-            :options="selectOptions.searchAllEnginesAction"
+            :options="listItems.searchAllEnginesAction"
           >
           </v-select>
         </div>
@@ -105,7 +105,7 @@ import draggable from 'vuedraggable';
 import {Checkbox, FormField, Switch, Select} from 'ext-components';
 
 import storage from 'storage/storage';
-import {getOptionLabels} from 'utils/app';
+import {getListItems} from 'utils/app';
 import {getText, isAndroid} from 'utils/common';
 import {optionKeys} from 'utils/data';
 import {targetEnv} from 'utils/config';
@@ -123,11 +123,24 @@ export default {
     return {
       dataLoaded: false,
 
-      selectOptions: getOptionLabels({
-        showInContextMenu: ['all', 'link', 'false'],
-        searchAllEnginesContextMenu: ['main', 'sub', 'false'],
-        searchAllEnginesAction: ['main', 'sub', 'false']
-      }),
+      listItems: {
+        ...getListItems(
+          {
+            showInContextMenu: ['all', 'link', 'false']
+          },
+          {scope: 'optionValue_showInContextMenu'}
+        ),
+        ...getListItems(
+          {
+            searchAllEnginesContextMenu: ['main', 'sub', 'false']
+          },
+          {scope: 'optionValue_searchAllEnginesContextMenu'}
+        ),
+        ...getListItems(
+          {searchAllEnginesAction: ['main', 'sub', 'false']},
+          {scope: 'optionValue_searchAllEnginesAction'}
+        )
+      },
       targetEnv,
       contextMenuEnabled: true,
 
@@ -190,28 +203,30 @@ export default {
 <style lang="scss">
 $mdc-theme-primary: #1abc9c;
 
+@import '@material/select/mdc-select';
 @import '@material/theme/mixins';
 @import '@material/typography/mixins';
 
 body {
+  margin: 0;
   @include mdc-typography-base;
   font-size: 100%;
   background-color: #ffffff;
   overflow: visible !important;
 }
 
-.mdc-checkbox {
-  margin-left: 8px;
+#app {
+  display: grid;
+  grid-row-gap: 32px;
+  padding: 24px;
 }
 
-.mdc-switch {
-  margin-right: 12px;
+.mdc-checkbox {
+  margin-right: 4px;
 }
 
-#app {
-  display: grid;
-  grid-row-gap: 32px;
-  padding: 12px;
+.mdc-switch {
+  margin-right: 16px;
 }
 
 .section-title,
@@ -230,18 +245,39 @@ body {
 
 .option-wrap {
   display: grid;
-  grid-row-gap: 12px;
-  padding-top: 16px;
+  grid-row-gap: 24px;
+  padding-top: 24px;
   grid-auto-columns: min-content;
 }
 
 .option {
   display: flex;
   align-items: center;
-  height: 36px;
+  height: 24px;
+
+  & .mdc-form-field {
+    max-width: calc(100vw - 48px);
+
+    & label {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
 }
 
 .option.select {
   height: 56px;
+
+  & .mdc-select__anchor,
+  & .mdc-select__menu {
+    max-width: calc(100vw - 48px);
+  }
+
+  & .mdc-select__selected-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 }
 </style>