add "refresh selection" button, which allows to reopen popup after se…

…lection was modified.

add icons for buttons of the popup.
disable setImmediate polyfill.
bump version.

extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Leo Translate",
-  "version": "1.9.1",
+  "version": "1.10.0",
 
   "description": "Translate words on the internet pages using LinguaLeo API and add words to the LinguaLeo Dictionary.",
 

src/Popup.js

@@ -41,11 +41,12 @@ export default class Popup {
     return this;
   }
 
-  sendData ({ text, context }) {
+  sendData ({ text, context, frameIndex }) {
     const message = {
       id: 'content-data',
       text,
       context,
+      frameIndex,
       url: document.URL,
       title: document.title
     };

src/assets/themes/leo-translate/_mixins.scss

@@ -0,0 +1,9 @@
+@mixin mask-svg-background ($svg, $bg-color) {
+  background-color: $bg-color;
+  background-image: none;
+
+  -webkit-mask: url($svg) center no-repeat;
+  mask: url($svg) center no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}

src/assets/themes/leo-translate/popup.scss

@@ -1,17 +1,12 @@
+@import 'mixins';
+
+$theme-path: '../assets/themes/leo-translate/';
+
 .translate {
     background-color: #fff;
     border: #d7d7db 1px solid;
 }
 
-.translate__meta {
-    display: flex;
-}
-
-.translate__transcription {
-    margin-right: 5px;
-    word-wrap: break-word;
-}
-
 .translate__base-form-link {
     text-decoration: none;
     display: inline-block;
@@ -40,13 +35,11 @@
 // TranslateHeader Component
 // ----------------------------------------------
 .translate-header {
-    display: flex;
-    justify-content: flex-end;
 }
 
-.translate-header__text {
-    margin: 3px auto 3px 0;
-    word-break: break-all;
+.translate-header__controls {
+    display: flex;
+    align-items: stretch;
 }
 
 .translate-header__btn {
@@ -55,14 +48,61 @@
     outline-color: #fff;
 }
 
-.translate-header__btn:hover {
-    background-color: #ededf0;
-    border-color: #b1b1b3;
+.translate-header__btn-refresh,
+.translate-header__btn-close,
+.translate-header__btn-play {
+    background: no-repeat center;
+    background-size: contain;
+    padding: 0;
+    font-size: 0;
+    width: 25px;
+    height: 25px;
+}
+
+.translate-header__btn-close {
+    background-image: url('#{$theme-path}close.svg');
+    margin-left: auto;
+
+    &:hover {
+        @include mask-svg-background('#{$theme-path}close.svg', red);
+    }
+}
+
+.translate-header__btn-refresh {
+    background-image: url('#{$theme-path}refresh.svg');
+    margin-right: 5px;
+
+    &:hover {
+        @include mask-svg-background('#{$theme-path}refresh.svg', #45a1ff);
+    }
+}
+
+.translate-header__btn-play {
+    background-image: url('#{$theme-path}play.svg');
+
+    &:hover {
+        @include mask-svg-background('#{$theme-path}play.svg', #45a1ff);
+    }
+
+    &.translate-header__btn-play_playing {
+        @include mask-svg-background('#{$theme-path}play.svg', #30e60b);
+    }
 }
 
-.translate-header__btn_playing {
-    background-color: #e3e3e6 !important;
-    border-color: #a7a7a9 !important;
+.translate-header__content {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.translate-header__text {
+    margin: 3px auto 3px 0;
+    word-break: break-all;
+}
+
+.translate-header__transcription {
+    word-wrap: break-word;
+    word-break: break-all;
 }
 
 

src/entry/background.js

@@ -5,6 +5,7 @@ import {
   PROXY_CONTENT_OPEN_POPUP,
   PROXY_CONTENT_CLOSE_POPUP,
   PROXY_CONTENT_RESIZE_POPUP,
+  PROXY_CONTENT_REFRESH_POPUP,
   BACKGROUND_SHOW_NOTIFICATION,
 } from '../messages';
 import { removeHtmlTags } from '../helpers';
@@ -32,7 +33,8 @@ chrome.runtime.onMessage.addListener((message, sender) => {
     PROXY_CONTENT_GET_DATA,
     PROXY_CONTENT_OPEN_POPUP,
     PROXY_CONTENT_CLOSE_POPUP,
-    PROXY_CONTENT_RESIZE_POPUP
+    PROXY_CONTENT_RESIZE_POPUP,
+    PROXY_CONTENT_REFRESH_POPUP
   ];
 
   if (message.id === BACKGROUND_SHOW_NOTIFICATION) {

src/entry/content-capture.js

@@ -1,6 +1,11 @@
 import optionsStorage from '../options';
 import ContextExtractor from '../ContextExtractor';
-import { PROXY_CONTENT_MOUSE, PROXY_CONTENT_OPEN_POPUP, PROXY_CONTENT_CLOSE_POPUP } from '../messages'
+import {
+  PROXY_CONTENT_MOUSE,
+  PROXY_CONTENT_OPEN_POPUP,
+  PROXY_CONTENT_CLOSE_POPUP,
+  PROXY_CONTENT_REFRESH_POPUP
+} from '../messages'
 
 let options = {};
 
@@ -38,6 +43,16 @@ document.body.addEventListener('dblclick', e => {
     }
   }
 
+  captureSelection();
+});
+
+chrome.runtime.onMessage.addListener(message => {
+  if (message.id === PROXY_CONTENT_REFRESH_POPUP && message.frameIndex === getSelfFrameIndex()) {
+    captureSelection();
+  }
+});
+
+function captureSelection () {
   const selection = window.getSelection();
   const text = selection.toString().trim();
 
@@ -47,7 +62,7 @@ document.body.addEventListener('dblclick', e => {
   }
 
   openPopup(text, selection);
-});
+}
 
 function closePopup () {
   sendMessage({ id: PROXY_CONTENT_CLOSE_POPUP });
@@ -93,13 +108,19 @@ function containsAnyEnglishLetter (text) {
 }
 
 function sendMessage (message) {
-  message['frameIndex'] = -1;
+  message['frameIndex'] = getSelfFrameIndex();
+
+  chrome.runtime.sendMessage(message);
+}
+
+function getSelfFrameIndex () {
+  let index = -1;
 
   for (let i = 0; i < window.top.frames.length; i++) {
     if (window.top.frames[i] === self) {
-      message['frameIndex'] = i;
+      index = i;
     }
   }
 
-  chrome.runtime.sendMessage(message);
+  return index;
 }

src/entry/content-render.js

@@ -42,11 +42,13 @@ chrome.runtime.onMessage.addListener(message => {
 
       data = {
         context: message.context,
-        text: removeHtmlTags(message.text)
+        text: removeHtmlTags(message.text),
+        frameIndex: -1
       };
 
       if (message.id === PROXY_CONTENT_OPEN_POPUP) {
         rect = mergeRects(message.rect, rectBody);
+        data.frameIndex = message.frameIndex;
 
         if (message.frameIndex > -1) {
           searchFrame(window.frames[message.frameIndex], frame => {
@@ -68,6 +70,13 @@ chrome.runtime.onMessage.addListener(message => {
         .sendData(data)
         .setPosition(rect, getBodyOffset());
     }
+
+    // Return focus back to the page, right after the popup was displayed.
+    document.getElementById(popup.ID).blur();
+
+    if (data.frameIndex > -1) {
+      window.frames[data.frameIndex].focus();
+    }
   }
 
   else if (message.id === PROXY_CONTENT_MOUSE) {

src/messages.js

@@ -4,6 +4,7 @@ export const PROXY_CONTENT_GET_DATA = 'proxy-content-get-data';
 export const PROXY_CONTENT_OPEN_POPUP = 'proxy-content-open-popup';
 export const PROXY_CONTENT_CLOSE_POPUP = 'proxy-content-close-popup';
 export const PROXY_CONTENT_RESIZE_POPUP = 'proxy-content-resize-popup';
+export const PROXY_CONTENT_REFRESH_POPUP = 'proxy-content-refresh-popup';
 
 // Messages from background to content scripts
 export const CONTENT_OPEN_POPUP = 'content-open-popup';

src/vue/ThePopupIFrame.vue

@@ -5,7 +5,9 @@
       :context="context"
       :page-url="url"
       :page-title="title"
+      :in-frame="true"
       @close="close"
+      @refresh="refresh"
       @translate="translate"
       @resize="onPopupResizeListener"
   />
@@ -14,10 +16,10 @@
 <script>
   import Translate from './Translate.vue';
   import {
+    PROXY_CONTENT_GET_DATA,
     PROXY_CONTENT_CLOSE_POPUP,
     PROXY_CONTENT_RESIZE_POPUP,
-    PROXY_CONTENT_GET_DATA,
-    CONTENT_OPEN_POPUP
+    PROXY_CONTENT_REFRESH_POPUP
   } from '../messages';
 
   export default {
@@ -29,7 +31,8 @@
         url: '',
         text: '',
         title: '',
-        context: ''
+        context: '',
+        frameIndex: -1
       };
     },
 
@@ -52,6 +55,10 @@
         chrome.runtime.sendMessage({ id: PROXY_CONTENT_CLOSE_POPUP });
       },
 
+      refresh () {
+        chrome.runtime.sendMessage({ id: PROXY_CONTENT_REFRESH_POPUP, frameIndex: this.frameIndex });
+      },
+
       translate (text) {
         this.text = text;
       },
@@ -72,6 +79,7 @@
           this.text = message.data.text;
           this.title = message.data.title;
           this.context = message.data.context;
+          this.frameIndex = message.data.frameIndex;
 
           this.onPopupResizeListener();
         }

src/vue/Translate.vue

@@ -2,8 +2,11 @@
   <div class="translate">
     <TranslateHeader
         :text="text"
+        :transcription="transcription"
         :sound-url="soundUrl"
+        :show-refresh="inFrame"
         @close="$emit('close')"
+        @refresh="$emit('refresh')"
     />
     <div
         v-if="isListLoading"
@@ -21,26 +24,18 @@
         v-else
         class="translate__body"
     >
-      <div class="translate__meta">
-        <div
-            v-if="transcription"
-            class="translate__transcription"
+      <div
+          v-if="dictionaryForm"
+          class="translate__base-form"
+      >
+        Dictionary form:
+        <a
+            class="translate__base-form-link"
+            href="javascript:void(0)"
+            @click.prevent="translate(wordForms[0].word)"
         >
-          [{{ transcription }}]
-        </div>
-        <div
-            v-if="dictionaryForm"
-            class="translate__base-form"
-        >
-          Dictionary form:
-          <a
-              class="translate__base-form-link"
-              href="javascript:void(0)"
-              @click.prevent="translate(wordForms[0].word)"
-          >
-            {{ dictionaryForm }}
-          </a>
-        </div>
+          {{ dictionaryForm }}
+        </a>
       </div>
       <TranslateList
           :translations="translations"
@@ -80,6 +75,12 @@
       context: {
         type: String,
         default: ''
+      },
+
+      // is the component inside of iFrame?
+      inFrame: {
+        type: Boolean,
+        default: false
       }
     },