feat: add OUJS to "find scripts" in the popup

#1016

src/popup/style.css

@@ -19,6 +19,8 @@ $topIconSize: 20px;
 $findIconSize: 16px;
 $findIconML: calc($leftPaneWidth - $findIconSize - $iconMR);
 
+$footerHeight: 40px;
+
 body {
   width: 320px;
   max-width: 100%;
@@ -48,8 +50,8 @@ a {
 }
 
 footer {
-  height: 40px;
-  line-height: 40px;
+  height: $footerHeight;
+  line-height: $footerHeight;
   text-align: center;
   font-size: $fontSize;
   color: var(--fill-6);
@@ -68,6 +70,7 @@ footer {
 
 .menu-area {
   cursor: pointer;
+  &:hover,
   &:focus {
     background: cornflowerblue;
     color: var(--bg);
@@ -162,8 +165,13 @@ footer {
   }
   &-find {
     padding-left: 0;
-    /* using the same selector as above to override it */
-    > .icon:first-child {
+    cursor: default;
+    a {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+    }
+    .icon {
       flex-basis: $findIconSize;
       width: $findIconSize;
       height: $findIconSize;
@@ -172,7 +180,7 @@ footer {
   }
   &-group {
     padding-left: $findIconML;
-    color: slategray;
+    color: steelblue;
     & [data-totals]::after {
       content: ": " attr(data-totals);
     }
@@ -243,11 +251,11 @@ footer {
   padding: 4px $padding;
   word-wrap: break-word;
   font-size: $fontSize;
-  line-height: 1;
+  line-height: 1.2; /* lower values cut descender in "g" */
   background: var(--fill-0-5);
   border: 1px solid var(--fill-2);
   > div {
-    max-height: 2em;
+    max-height: $footerHeight;
     overflow: hidden;
   }
 }

src/popup/views/app.vue

@@ -40,12 +40,14 @@
       </span>
     </div>
     <div class="menu" v-if="store.injectable" v-show="store.domain">
-      <div
-        class="menu-item menu-area menu-find"
-        :tabIndex="tabIndex"
-        @click="onFindSameDomainScripts">
-        <icon name="search"></icon>
-        <div class="flex-1" v-text="i18n('menuFindScripts')"></div>
+      <div class="menu-item menu-area menu-find" :tabIndex="tabIndex">
+        <template v-for="(url, text, i) in findUrls">
+          <a :key="url" target="_blank" :class="{ ellipsis: !i, 'mr-1': !i, 'ml-1': i }"
+             :href="url" :data-message="url.split('://')[1]">
+            <icon name="search" v-if="!i"/>{{text}}
+          </a>
+          <template v-if="!i">/</template>
+        </template>
       </div>
     </div>
     <div class="failure-reason" v-if="failureReasonText">
@@ -301,6 +303,13 @@ export default {
         || ''
       );
     },
+    findUrls() {
+      const query = encodeURIComponent(store.domain);
+      return {
+        [`${i18n('menuFindScripts')} (GF)`]: `https://greasyfork.org/scripts/by-site/${query}`,
+        OUJS: `https://openuserjs.org/?q=${query}`,
+      };
+    },
     tabIndex() {
       return this.activeExtras ? -1 : 0;
     },
@@ -344,12 +353,6 @@ export default {
       sendCmd('OpenEditor', item.data.props.id);
       window.close();
     },
-    onFindSameDomainScripts() {
-      sendCmd('TabOpen', {
-        url: `https://greasyfork.org/scripts/by-site/${encodeURIComponent(this.store.domain)}`,
-      });
-      window.close();
-    },
     onCommand(evt) {
       const { type, currentTarget: el } = evt;
       if (type === 'mousedown') {