Clean web extension build process

bin/build_web_extensions

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+
+set -o errexit
+set -o pipefail
+set -o nounset
+
+VERSION=$(grep -Po '(?<="version": ")[^"]*' package.json)
+yarn install
+yarn workspace lesspass-pure run build
+rm -rf packages/lesspass-web-extension/extension/dist
+mkdir packages/lesspass-web-extension/extension/dist
+rm -rf packages/lesspass-web-extension/build
+mkdir packages/lesspass-web-extension/build
+cp -r packages/lesspass-pure/dist/. packages/lesspass-web-extension/extension/dist/
+cd packages/lesspass-web-extension/extension/
+zip --recurse-paths ../build/lesspass.zip ./*
+cd ..
+cp build/lesspass.zip build/lesspass.firefox-v${VERSION}.xpi
+cp build/lesspass.zip build/lesspass.chrome-v${VERSION}.zip
+rm build/lesspass.zip

bin/tag

@@ -56,6 +56,8 @@ function replace_versions_in_files {
     sed -i "s/\"lesspass\": \"${1}\"/\"lesspass\": \"${2}\"/g" packages/lesspass-pure/package.json
     sed -i "s/\"version\": \"${1}\"/\"version\": \"${2}\"/g" packages/lesspass-render-password/package.json
     sed -i "s/\"version\": \"${1}\"/\"version\": \"${2}\"/g" packages/lesspass-web-extension/package.json
+    sed -i "s/\"lesspass-pure\": \"${1}\"/\"lesspass-pure\": \"${2}\"/g" packages/lesspass-web-extension/package.json
+    sed -i "s/\"version\": \"${1}\"/\"version\": \"${2}\"/g" packages/lesspass-web-extension/extension/manifest.json
     sed -i "s/\"version\": \"${1}\"/\"version\": \"${2}\"/g" containers/frontend/package.json
     sed -i "s/VERSION=\"${1}\"/VERSION=\"${2}\"/g" containers/deploy
 }

package.json

@@ -29,10 +29,8 @@
     "cross-env": "^5.2.0",
     "css-loader": "^3.0.0",
     "cypress": "^3.4.0",
-    "dot-json": "^1.1.0",
     "express": "^4.17.1",
     "file-loader": "^4.0.0",
-    "gulp": "^4.0.2",
     "html-webpack-plugin": "^3.2.0",
     "http-server": "^0.11.1",
     "jest": "^24.8.0",

packages/lesspass-web-extension/amo.md

@@ -11,13 +11,14 @@ npm --version: v6.4.1
 
 untar src and install dependencies
 
-    cd packages/lesspass-web-extension/
-    npm install && npm run build
-    cd extension
-    find . -type f -exec md5sum {} \; | md5sum
+    yarn install
+    ./bin/build_web_extensions
+    cd packages/lesspass-web-extension/build
+    find . -type f -exec md5sum {} \;
 
-## Reproduce lesspass.min.js with sources
+## Reproduce lesspass.min.js and dist folder with sources
 
-    cd packages/lesspass-pure/
-    npm install && npm run build
-    md5sum dist/lesspass.min.js
+    yarn install
+    yarn workspace lesspass-pure run build
+    find packages/lesspass-web-extension/extension/dist/ -type f -exec md5sum {} \;
+    find packages/lesspass-pure/dist -type f -exec md5sum {} \;

packages/lesspass-web-extension/extension/dist/index.html

@@ -9,7 +9,6 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <link rel="shortcut icon" href="dist/favicon.ico" />
-    <link rel="stylesheet" href="dist/lesspass.min.css" />
     <style>
       div.center {
         max-width: 420px;
@@ -29,6 +28,5 @@
     <div class="center lesspass--full-width">
       <div id="lesspass"></div>
     </div>
-    <script src="dist/lesspass.min.js"></script>
   <script type="text/javascript" src="lesspass.min.js"></script></body>
 </html>

packages/lesspass-web-extension/extension/dist/lesspass.min.css

@@ -2336,344 +2336,249 @@
   clip: auto;
 }
 
-button[data-balloon] {
+:root {
+  --balloon-color: rgba(16, 16, 16, 0.95);
+  --balloon-font-size: 12px;
+  --balloon-move: 4px; }
+
+button[aria-label][data-balloon-pos] {
   overflow: visible; }
 
-[data-balloon] {
+[aria-label][data-balloon-pos] {
   position: relative;
   cursor: pointer; }
-  [data-balloon]:after {
-    filter: alpha(opactiy=0);
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    -moz-opacity: 0;
-    -khtml-opacity: 0;
+  [aria-label][data-balloon-pos]:after {
     opacity: 0;
     pointer-events: none;
-    -webkit-transition: all 0.18s ease-out 0.18s;
-    -moz-transition: all 0.18s ease-out 0.18s;
-    -ms-transition: all 0.18s ease-out 0.18s;
-    -o-transition: all 0.18s ease-out 0.18s;
-    transition: all 0.18s ease-out 0.18s;
-    font-family: sans-serif !important;
-    font-weight: normal !important;
-    font-style: normal !important;
-    text-shadow: none !important;
-    font-size: 12px !important;
-    background: rgba(17, 17, 17, 0.9);
-    border-radius: 4px;
+    transition: all .18s ease-out .18s;
+    text-indent: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    text-shadow: none;
+    font-size: var(--balloon-font-size);
+    background: var(--balloon-color);
+    border-radius: 2px;
     color: #fff;
-    content: attr(data-balloon);
+    content: attr(aria-label);
     padding: .5em 1em;
     position: absolute;
     white-space: nowrap;
     z-index: 10; }
-  [data-balloon]:before {
-    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
-    background-size: 100% auto;
-    width: 18px;
-    height: 6px;
-    filter: alpha(opactiy=0);
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    -moz-opacity: 0;
-    -khtml-opacity: 0;
+  [aria-label][data-balloon-pos]:before {
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-top-color: var(--balloon-color);
     opacity: 0;
     pointer-events: none;
-    -webkit-transition: all 0.18s ease-out 0.18s;
-    -moz-transition: all 0.18s ease-out 0.18s;
-    -ms-transition: all 0.18s ease-out 0.18s;
-    -o-transition: all 0.18s ease-out 0.18s;
-    transition: all 0.18s ease-out 0.18s;
-    content: '';
+    transition: all .18s ease-out .18s;
+    content: "";
     position: absolute;
     z-index: 10; }
-  [data-balloon]:hover:before, [data-balloon]:hover:after, [data-balloon][data-balloon-visible]:before, [data-balloon][data-balloon-visible]:after {
-    filter: alpha(opactiy=100);
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-    -moz-opacity: 1;
-    -khtml-opacity: 1;
-    opacity: 1;
-    pointer-events: auto; }
-  [data-balloon].font-awesome:after {
-    font-family: FontAwesome; }
-  [data-balloon][data-balloon-break]:after {
-    white-space: pre; }
-  [data-balloon][data-balloon-blunt]:before, [data-balloon][data-balloon-blunt]:after {
-    -webkit-transition: none;
-    -moz-transition: none;
-    -ms-transition: none;
-    -o-transition: none;
-    transition: none; }
-  [data-balloon][data-balloon-pos="up"]:after {
-    bottom: 100%;
-    left: 50%;
-    margin-bottom: 11px;
-    -webkit-transform: translate(-50%, 10px);
-    -moz-transform: translate(-50%, 10px);
-    -ms-transform: translate(-50%, 10px);
-    transform: translate(-50%, 10px);
-    -webkit-transform-origin: top;
-    -moz-transform-origin: top;
-    -ms-transform-origin: top;
-    transform-origin: top; }
-  [data-balloon][data-balloon-pos="up"]:before {
-    bottom: 100%;
-    left: 50%;
-    margin-bottom: 5px;
-    -webkit-transform: translate(-50%, 10px);
-    -moz-transform: translate(-50%, 10px);
-    -ms-transform: translate(-50%, 10px);
-    transform: translate(-50%, 10px);
-    -webkit-transform-origin: top;
-    -moz-transform-origin: top;
-    -ms-transform-origin: top;
-    transform-origin: top; }
-  [data-balloon][data-balloon-pos="up"]:hover:after, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:after {
-    -webkit-transform: translate(-50%, 0);
-    -moz-transform: translate(-50%, 0);
-    -ms-transform: translate(-50%, 0);
-    transform: translate(-50%, 0); }
-  [data-balloon][data-balloon-pos="up"]:hover:before, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:before {
-    -webkit-transform: translate(-50%, 0);
-    -moz-transform: translate(-50%, 0);
-    -ms-transform: translate(-50%, 0);
-    transform: translate(-50%, 0); }
-  [data-balloon][data-balloon-pos="up-left"]:after {
-    bottom: 100%;
-    left: 0;
-    margin-bottom: 11px;
-    -webkit-transform: translate(0, 10px);
-    -moz-transform: translate(0, 10px);
-    -ms-transform: translate(0, 10px);
-    transform: translate(0, 10px);
-    -webkit-transform-origin: top;
-    -moz-transform-origin: top;
-    -ms-transform-origin: top;
-    transform-origin: top; }
-  [data-balloon][data-balloon-pos="up-left"]:before {
-    bottom: 100%;
-    left: 5px;
-    margin-bottom: 5px;
-    -webkit-transform: translate(0, 10px);
-    -moz-transform: translate(0, 10px);
-    -ms-transform: translate(0, 10px);
-    transform: translate(0, 10px);
-    -webkit-transform-origin: top;
-    -moz-transform-origin: top;
-    -ms-transform-origin: top;
-    transform-origin: top; }
-  [data-balloon][data-balloon-pos="up-left"]:hover:after, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:after {
-    -webkit-transform: translate(0, 0);
-    -moz-transform: translate(0, 0);
-    -ms-transform: translate(0, 0);
-    transform: translate(0, 0); }
-  [data-balloon][data-balloon-pos="up-left"]:hover:before, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:before {
-    -webkit-transform: translate(0, 0);
-    -moz-transform: translate(0, 0);
-    -ms-transform: translate(0, 0);
-    transform: translate(0, 0); }
-  [data-balloon][data-balloon-pos="up-right"]:after {
-    bottom: 100%;
-    right: 0;
-    margin-bottom: 11px;
-    -webkit-transform: translate(0, 10px);
-    -moz-transform: translate(0, 10px);
-    -ms-transform: translate(0, 10px);
-    transform: translate(0, 10px);
-    -webkit-transform-origin: top;
-    -moz-transform-origin: top;
-    -ms-transform-origin: top;
-    transform-origin: top; }
-  [data-balloon][data-balloon-pos="up-right"]:before {
-    bottom: 100%;
-    right: 5px;
-    margin-bottom: 5px;
-    -webkit-transform: translate(0, 10px);
-    -moz-transform: translate(0, 10px);
-    -ms-transform: translate(0, 10px);
-    transform: translate(0, 10px);
-    -webkit-transform-origin: top;
-    -moz-transform-origin: top;
-    -ms-transform-origin: top;
-    transform-origin: top; }
-  [data-balloon][data-balloon-pos="up-right"]:hover:after, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:after {
-    -webkit-transform: translate(0, 0);
-    -moz-transform: translate(0, 0);
-    -ms-transform: translate(0, 0);
-    transform: translate(0, 0); }
-  [data-balloon][data-balloon-pos="up-right"]:hover:before, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:before {
-    -webkit-transform: translate(0, 0);
-    -moz-transform: translate(0, 0);
-    -ms-transform: translate(0, 0);
-    transform: translate(0, 0); }
-  [data-balloon][data-balloon-pos='down']:after {
-    left: 50%;
-    margin-top: 11px;
-    top: 100%;
-    -webkit-transform: translate(-50%, -10px);
-    -moz-transform: translate(-50%, -10px);
-    -ms-transform: translate(-50%, -10px);
-    transform: translate(-50%, -10px); }
-  [data-balloon][data-balloon-pos='down']:before {
-    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
-    background-size: 100% auto;
-    width: 18px;
-    height: 6px;
-    left: 50%;
-    margin-top: 5px;
-    top: 100%;
-    -webkit-transform: translate(-50%, -10px);
-    -moz-transform: translate(-50%, -10px);
-    -ms-transform: translate(-50%, -10px);
-    transform: translate(-50%, -10px); }
-  [data-balloon][data-balloon-pos='down']:hover:after, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:after {
-    -webkit-transform: translate(-50%, 0);
-    -moz-transform: translate(-50%, 0);
-    -ms-transform: translate(-50%, 0);
-    transform: translate(-50%, 0); }
-  [data-balloon][data-balloon-pos='down']:hover:before, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:before {
-    -webkit-transform: translate(-50%, 0);
-    -moz-transform: translate(-50%, 0);
-    -ms-transform: translate(-50%, 0);
-    transform: translate(-50%, 0); }
-  [data-balloon][data-balloon-pos='down-left']:after {
-    left: 0;
-    margin-top: 11px;
-    top: 100%;
-    -webkit-transform: translate(0, -10px);
-    -moz-transform: translate(0, -10px);
-    -ms-transform: translate(0, -10px);
-    transform: translate(0, -10px); }
-  [data-balloon][data-balloon-pos='down-left']:before {
-    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
-    background-size: 100% auto;
-    width: 18px;
-    height: 6px;
-    left: 5px;
-    margin-top: 5px;
-    top: 100%;
-    -webkit-transform: translate(0, -10px);
-    -moz-transform: translate(0, -10px);
-    -ms-transform: translate(0, -10px);
-    transform: translate(0, -10px); }
-  [data-balloon][data-balloon-pos='down-left']:hover:after, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:after {
-    -webkit-transform: translate(0, 0);
-    -moz-transform: translate(0, 0);
-    -ms-transform: translate(0, 0);
-    transform: translate(0, 0); }
-  [data-balloon][data-balloon-pos='down-left']:hover:before, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:before {
-    -webkit-transform: translate(0, 0);
-    -moz-transform: translate(0, 0);
-    -ms-transform: translate(0, 0);
-    transform: translate(0, 0); }
-  [data-balloon][data-balloon-pos='down-right']:after {
-    right: 0;
-    margin-top: 11px;
-    top: 100%;
-    -webkit-transform: translate(0, -10px);
-    -moz-transform: translate(0, -10px);
-    -ms-transform: translate(0, -10px);
-    transform: translate(0, -10px); }
-  [data-balloon][data-balloon-pos='down-right']:before {
-    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
-    background-size: 100% auto;
-    width: 18px;
-    height: 6px;
-    right: 5px;
-    margin-top: 5px;
-    top: 100%;
-    -webkit-transform: translate(0, -10px);
-    -moz-transform: translate(0, -10px);
-    -ms-transform: translate(0, -10px);
-    transform: translate(0, -10px); }
-  [data-balloon][data-balloon-pos='down-right']:hover:after, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:after {
-    -webkit-transform: translate(0, 0);
-    -moz-transform: translate(0, 0);
-    -ms-transform: translate(0, 0);
-    transform: translate(0, 0); }
-  [data-balloon][data-balloon-pos='down-right']:hover:before, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:before {
-    -webkit-transform: translate(0, 0);
-    -moz-transform: translate(0, 0);
-    -ms-transform: translate(0, 0);
-    transform: translate(0, 0); }
-  [data-balloon][data-balloon-pos='left']:after {
-    margin-right: 11px;
-    right: 100%;
-    top: 50%;
-    -webkit-transform: translate(10px, -50%);
-    -moz-transform: translate(10px, -50%);
-    -ms-transform: translate(10px, -50%);
-    transform: translate(10px, -50%); }
-  [data-balloon][data-balloon-pos='left']:before {
-    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
-    background-size: 100% auto;
-    width: 6px;
-    height: 18px;
-    margin-right: 5px;
-    right: 100%;
-    top: 50%;
-    -webkit-transform: translate(10px, -50%);
-    -moz-transform: translate(10px, -50%);
-    -ms-transform: translate(10px, -50%);
-    transform: translate(10px, -50%); }
-  [data-balloon][data-balloon-pos='left']:hover:after, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:after {
-    -webkit-transform: translate(0, -50%);
-    -moz-transform: translate(0, -50%);
-    -ms-transform: translate(0, -50%);
-    transform: translate(0, -50%); }
-  [data-balloon][data-balloon-pos='left']:hover:before, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:before {
-    -webkit-transform: translate(0, -50%);
-    -moz-transform: translate(0, -50%);
-    -ms-transform: translate(0, -50%);
-    transform: translate(0, -50%); }
-  [data-balloon][data-balloon-pos='right']:after {
-    left: 100%;
-    margin-left: 11px;
-    top: 50%;
-    -webkit-transform: translate(-10px, -50%);
-    -moz-transform: translate(-10px, -50%);
-    -ms-transform: translate(-10px, -50%);
-    transform: translate(-10px, -50%); }
-  [data-balloon][data-balloon-pos='right']:before {
-    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
-    background-size: 100% auto;
-    width: 6px;
-    height: 18px;
-    left: 100%;
-    margin-left: 5px;
-    top: 50%;
-    -webkit-transform: translate(-10px, -50%);
-    -moz-transform: translate(-10px, -50%);
-    -ms-transform: translate(-10px, -50%);
-    transform: translate(-10px, -50%); }
-  [data-balloon][data-balloon-pos='right']:hover:after, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:after {
-    -webkit-transform: translate(0, -50%);
-    -moz-transform: translate(0, -50%);
-    -ms-transform: translate(0, -50%);
-    transform: translate(0, -50%); }
-  [data-balloon][data-balloon-pos='right']:hover:before, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:before {
-    -webkit-transform: translate(0, -50%);
-    -moz-transform: translate(0, -50%);
-    -ms-transform: translate(0, -50%);
-    transform: translate(0, -50%); }
-  [data-balloon][data-balloon-length='small']:after {
-    white-space: normal;
-    width: 80px; }
-  [data-balloon][data-balloon-length='medium']:after {
-    white-space: normal;
-    width: 150px; }
-  [data-balloon][data-balloon-length='large']:after {
-    white-space: normal;
-    width: 260px; }
-  [data-balloon][data-balloon-length='xlarge']:after {
-    white-space: normal;
-    width: 380px; }
-    @media screen and (max-width: 768px) {
-      [data-balloon][data-balloon-length='xlarge']:after {
-        white-space: normal;
-        width: 90vw; } }
-  [data-balloon][data-balloon-length='fit']:after {
-    white-space: normal;
-    width: 100%; }
+
+[aria-label]:hover:before, [aria-label]:hover:after, [aria-label][data-balloon-visible]:before, [aria-label][data-balloon-visible]:after, [aria-label]:not([data-balloon-nofocus]):focus:before, [aria-label]:not([data-balloon-nofocus]):focus:after {
+  opacity: 1;
+  pointer-events: none; }
+
+[aria-label].font-awesome:after {
+  font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
+
+[aria-label][data-balloon-break]:after {
+  white-space: pre; }
+
+[aria-label][data-balloon-break][data-balloon-length]:after {
+  white-space: pre-line;
+  word-break: break-word; }
+
+[aria-label][data-balloon-blunt]:before, [aria-label][data-balloon-blunt]:after {
+  transition: none; }
+
+[aria-label][data-balloon-pos="up"]:after {
+  bottom: 100%;
+  left: 50%;
+  margin-bottom: 10px;
+  transform: translate(-50%, var(--balloon-move));
+  transform-origin: top; }
+
+[aria-label][data-balloon-pos="up"]:before {
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, var(--balloon-move));
+  transform-origin: top; }
+
+[aria-label][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos="up"][data-balloon-visible]:after {
+  transform: translate(-50%, 0); }
+
+[aria-label][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos="up"][data-balloon-visible]:before {
+  transform: translate(-50%, 0); }
+
+[aria-label][data-balloon-pos="up-left"]:after {
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 10px;
+  transform: translate(0, var(--balloon-move));
+  transform-origin: top; }
+
+[aria-label][data-balloon-pos="up-left"]:before {
+  bottom: 100%;
+  left: 5px;
+  transform: translate(0, var(--balloon-move));
+  transform-origin: top; }
+
+[aria-label][data-balloon-pos="up-left"]:hover:after, [aria-label][data-balloon-pos="up-left"][data-balloon-visible]:after {
+  transform: translate(0, 0); }
+
+[aria-label][data-balloon-pos="up-left"]:hover:before, [aria-label][data-balloon-pos="up-left"][data-balloon-visible]:before {
+  transform: translate(0, 0); }
+
+[aria-label][data-balloon-pos="up-right"]:after {
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 10px;
+  transform: translate(0, var(--balloon-move));
+  transform-origin: top; }
+
+[aria-label][data-balloon-pos="up-right"]:before {
+  bottom: 100%;
+  right: 5px;
+  transform: translate(0, var(--balloon-move));
+  transform-origin: top; }
+
+[aria-label][data-balloon-pos="up-right"]:hover:after, [aria-label][data-balloon-pos="up-right"][data-balloon-visible]:after {
+  transform: translate(0, 0); }
+
+[aria-label][data-balloon-pos="up-right"]:hover:before, [aria-label][data-balloon-pos="up-right"][data-balloon-visible]:before {
+  transform: translate(0, 0); }
+
+[aria-label][data-balloon-pos="down"]:after {
+  left: 50%;
+  margin-top: 10px;
+  top: 100%;
+  transform: translate(-50%, calc(var(--balloon-move) * -1)); }
+
+[aria-label][data-balloon-pos="down"]:before {
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-bottom-color: var(--balloon-color);
+  left: 50%;
+  top: 100%;
+  transform: translate(-50%, calc(var(--balloon-move) * -1)); }
+
+[aria-label][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos="down"][data-balloon-visible]:after {
+  transform: translate(-50%, 0); }
+
+[aria-label][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos="down"][data-balloon-visible]:before {
+  transform: translate(-50%, 0); }
+
+[aria-label][data-balloon-pos="down-left"]:after {
+  left: 0;
+  margin-top: 10px;
+  top: 100%;
+  transform: translate(0, calc(var(--balloon-move) * -1)); }
+
+[aria-label][data-balloon-pos="down-left"]:before {
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-bottom-color: var(--balloon-color);
+  left: 5px;
+  top: 100%;
+  transform: translate(0, calc(var(--balloon-move) * -1)); }
+
+[aria-label][data-balloon-pos="down-left"]:hover:after, [aria-label][data-balloon-pos="down-left"][data-balloon-visible]:after {
+  transform: translate(0, 0); }
+
+[aria-label][data-balloon-pos="down-left"]:hover:before, [aria-label][data-balloon-pos="down-left"][data-balloon-visible]:before {
+  transform: translate(0, 0); }
+
+[aria-label][data-balloon-pos="down-right"]:after {
+  right: 0;
+  margin-top: 10px;
+  top: 100%;
+  transform: translate(0, calc(var(--balloon-move) * -1)); }
+
+[aria-label][data-balloon-pos="down-right"]:before {
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-bottom-color: var(--balloon-color);
+  right: 5px;
+  top: 100%;
+  transform: translate(0, calc(var(--balloon-move) * -1)); }
+
+[aria-label][data-balloon-pos="down-right"]:hover:after, [aria-label][data-balloon-pos="down-right"][data-balloon-visible]:after {
+  transform: translate(0, 0); }
+
+[aria-label][data-balloon-pos="down-right"]:hover:before, [aria-label][data-balloon-pos="down-right"][data-balloon-visible]:before {
+  transform: translate(0, 0); }
+
+[aria-label][data-balloon-pos="left"]:after {
+  margin-right: 10px;
+  right: 100%;
+  top: 50%;
+  transform: translate(var(--balloon-move), -50%); }
+
+[aria-label][data-balloon-pos="left"]:before {
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-left-color: var(--balloon-color);
+  right: 100%;
+  top: 50%;
+  transform: translate(var(--balloon-move), -50%); }
+
+[aria-label][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos="left"][data-balloon-visible]:after {
+  transform: translate(0, -50%); }
+
+[aria-label][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos="left"][data-balloon-visible]:before {
+  transform: translate(0, -50%); }
+
+[aria-label][data-balloon-pos="right"]:after {
+  left: 100%;
+  margin-left: 10px;
+  top: 50%;
+  transform: translate(calc(var(--balloon-move) * -1), -50%); }
+
+[aria-label][data-balloon-pos="right"]:before {
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-right-color: var(--balloon-color);
+  left: 100%;
+  top: 50%;
+  transform: translate(calc(var(--balloon-move) * -1), -50%); }
+
+[aria-label][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos="right"][data-balloon-visible]:after {
+  transform: translate(0, -50%); }
+
+[aria-label][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos="right"][data-balloon-visible]:before {
+  transform: translate(0, -50%); }
+
+[aria-label][data-balloon-length="small"]:after {
+  white-space: normal;
+  width: 80px; }
+
+[aria-label][data-balloon-length="medium"]:after {
+  white-space: normal;
+  width: 150px; }
+
+[aria-label][data-balloon-length="large"]:after {
+  white-space: normal;
+  width: 260px; }
+
+[aria-label][data-balloon-length="xlarge"]:after {
+  white-space: normal;
+  width: 380px; }
+  @media screen and (max-width: 768px) {
+    [aria-label][data-balloon-length="xlarge"]:after {
+      white-space: normal;
+      width: 90vw; } }
+
+[aria-label][data-balloon-length="fit"]:after {
+  white-space: normal;
+  width: 100%; }
 
 .awesomplete [hidden] {
     display: none;
@@ -2818,7 +2723,7 @@ html {
   font-family: sans-serif;
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: transparent; }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
 
 article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
   display: block; }
@@ -7535,7 +7440,7 @@ button.bg-dark:focus {
   z-index: 1;
   pointer-events: auto;
   content: "";
-  background-color: transparent; }
+  background-color: rgba(0, 0, 0, 0); }
 
 .m-0 {
   margin: 0 !important; }

packages/lesspass-web-extension/extension/dist/popup.js

@@ -1,7 +0,0 @@
-document.addEventListener("DOMContentLoaded", function() {
-  let head = document.getElementsByTagName('head')[0];
-  let script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = 'dist/lesspass.min.js';
-  head.appendChild(script);
-});

packages/lesspass-web-extension/extension/manifest.json

@@ -2,7 +2,7 @@
   "description": "chrome and firefox web extension for lesspass password manager",
   "manifest_version": 2,
   "name": "LessPass",
-  "version": "3.1.6",
+  "version": "8.1.1",
   "homepage_url": "https://github.com/lesspass/lesspass",
   "icons": {
     "64": "icons/logo-64.png"
@@ -18,9 +18,6 @@
   "permissions": [
     "activeTab"
   ],
-  "web_accessible_resources": [
-    "dist/i18n/*.json"
-  ],
   "browser_action": {
     "browser_style": false,
     "default_icon": "icons/logo-32.png",

packages/lesspass-web-extension/extension/popup.html

@@ -29,6 +29,6 @@
     <img src="icons/loading.svg" alt="loading" class="loading">
   </div>
 </div>
-<script src="dist/popup.js"></script>
+<script src="popup.js"></script>
 </body>
 </html>

packages/lesspass-web-extension/package.json

@@ -5,19 +5,13 @@
   "license": "GPL-3.0",
   "author": "Guillaume Vincent <guillaume@oslab.fr>",
   "scripts": {
-    "clean": "rm -rf extension/dist/ && mkdir extension/dist/ && rm -rf build && mkdir build",
-    "version": "dot-json extension/manifest.json version $npm_package_version",
-    "zip:firefox": "cp build/lesspass.zip build/lesspass.firefox-v$npm_package_version.xpi",
-    "zip:chrome": "cp build/lesspass.zip build/lesspass.chrome-v$npm_package_version.zip",
-    "zip": "cd extension && git archive -o ../build/lesspass.zip HEAD && cd .. && npm run zip:firefox && npm run zip:chrome && rm build/lesspass.zip",
-    "build": "npm run clean && gulp",
-    "release": "npm run zip && npm run build && npm run release-cws && npm run release-amo",
+    "release": "npm run release-cws && npm run release-amo",
     "release-amo": "cd extension && web-ext-submit",
     "release-cws": "webstore upload --source build/lesspass.chrome-v$npm_package_version.zip --auto-publish",
-    "dev": "cd extension && web-ext run",
+    "start": "cd extension && web-ext run",
     "test": "echo 0"
   },
   "dependencies": {
-    "lesspass-pure": "^8.1.1"
+    "lesspass-pure": "8.1.1"
   }
 }