Context popup update (#594)

* Add link to the help button

* Update context.html to not use bootstrap

Styles moved into a separate file
Update icons

* Update terminology to correspond to new icons

README.md

@@ -90,7 +90,7 @@ primary language is not English, you may consider also importing the English ver
 
     [![](https://foosoft.net/projects/yomichan/img/ui-actions-thumb.png)](https://foosoft.net/projects/yomichan/img/ui-actions.png)
 
-2.  Click on the *spanner/monkey wrench* icon in the middle to open the options page.
+2.  Click on the *spanner/cog* icon in the middle to open the options page.
 
 3.  Import the dictionaries you wish to use for term and kanji searches. If you do not have any dictionaries installed
     (or enabled), Yomichan will warn you that it is not ready for use by displaying an orange exclamation mark over its

ext/bg/context.html

@@ -10,172 +10,39 @@
     <link rel="icon" type="image/png" href="/mixed/img/icon48.png" sizes="48x48">
     <link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64">
     <link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128">
-        <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="/bg/css/context.css">
-        <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
-        <style type="text/css">
-            body {
-                padding: 10px;
-            }
-
-            h3 {
-                margin-top: 10px;
-            }
-            label {
-                font-weight: normal;
-            }
-
-            #mini {
-                text-align: center;
-            }
-            #full {
-                display: none;
-            }
-            .btn-group {
-                display: flex;
-                justify-content: center;
-                margin-top: 10px;
-                white-space: nowrap;
-            }
-
-            html:root[data-mode=full] #mini {
-                display: none;
-            }
-            html:root[data-mode=full] #full {
-                display: initial;
-            }
-
-            .link-group {
-                display: block;
-                line-height: 1.5em;
-                margin: 0 -10px;
-                padding: 0.5em 10px;
-                cursor: pointer;
-                color: #333;
-                text-decoration: none;
-                background-color: transparent;
-                transition: background-color 0.125s linear 0s;
-                max-width: none;
-            }
-            .link-group:hover,
-            .link-group:active {
-                color: #333;
-                text-decoration: none;
-            }
-            .link-group:hover>.link-group-label,
-            .link-group:active>.link-group-label {
-                text-decoration: underline;
-            }
-            .link-group:hover {
-                background-color: rgba(0, 0, 0, 0.05);
-            }
-            .link-group:active {
-                background-color: rgba(0, 0, 0, 0.1);
-            }
-            .link-group-icon {
-                width: 16px;
-                height: 16px;
-                text-align: center;
-                vertical-align: middle;
-                display: inline-block;
-                margin-right: 0.25em;
-            }
-            .link-group-icon>input {
-                margin: 0;
-                padding: 0;
-            }
-            .link-group-icon>.glyphicon {
-                top: 0;
-            }
-            .link-group-label {
-                vertical-align: middle;
-            }
-
-
-            .toggle {
-                width: 60px;
-                height: 34px;
-                position: relative;
-                overflow: hidden;
-            }
-            .toggle-group {
-                position: absolute;
-                width: 200%;
-                left: 0;
-                top: 0;
-                bottom: 0;
-                user-select: none;
-            }
-            .toggle-group.toggle-group-animated {
-                transition: transform 0.35s;
-            }
-            .toggle-on,
-            .toggle-off {
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                margin: 0;
-                border: 0;
-                border-radius: 0;
-            }
-            .toggle-on {
-                padding-right: 24px;
-                left: 0;
-                right: 50%;
-            }
-            .toggle-off {
-                padding-left: 24px;
-                left: 50%;
-                right: 0;
-            }
-            .toggle-handle {
-                position: relative;
-                margin: 0 auto;
-                padding-top: 0;
-                padding-bottom: 0;
-                height: 100%;
-                width: 0;
-                border-width: 0 1px;
-            }
-
-            .toggle>input[type=checkbox] {
-                display: none;
-            }
-            .toggle>input[type=checkbox]:not(:checked)~.toggle-group {
-                transform: translateX(-50%);
-            }
-        </style>
 </head>
 <body>
+
 <div id="mini">
-            <div>
+    <label class="toggle">
-                <label class="btn btn-primary toggle">
+        <input type="checkbox" id="enable-search">
-                    <input type="checkbox" id="enable-search" />
         <div class="toggle-group">
-                        <span class="btn btn-primary toggle-on">On</span>
+            <span class="toggle-on">On</span>
-                        <span class="btn btn-default active toggle-off">Off</span>
+            <span class="btnx btn-defaulxt toggle-off">Off</span>
-                        <span class="btn btn-default toggle-handle"></span>
+            <span class="btnx xbtn-default toggle-handle"></span>
         </div>
     </label>
-            </div>
+    <div class="nav-button-container">
-            <div class="btn-group">
+        <a class="nav-button action-open-search" data-icon="magnifying-glass" title="Search (Alt + Insert)&#10;(Middle click to open in new tab)"></a>
-                <a title="Search (Alt + Insert)&#10;(Middle click to open in new tab)" class="btn btn-default btn-xs action-open-search"><span class="glyphicon glyphicon-search"></span></a>
+        <a class="nav-button action-open-options" data-icon="cog" title="Options&#10;(Middle click to open in new tab)"></a>
-                <a title="Options&#10;(Middle click to open in new tab)" class="btn btn-default btn-xs action-open-options"><span class="glyphicon glyphicon-wrench"></span></a>
+        <a class="nav-button action-open-help" data-icon="question-mark" title="Help"></a>
-                <a title="Help" class="btn btn-default btn-xs action-open-help"><span class="glyphicon glyphicon-question-sign"></span></a>
     </div>
 </div>
+
 <div id="full">
     <h3 id="extension-info">Yomichan</h3>
     <label class="link-group">
         <span class="link-group-icon"><input type="checkbox" id="enable-search2" /></span><span class="link-group-label">Enable content scanning</span>
     </label>
     <a class="link-group action-open-options">
-                <span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Options</span>
+        <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Options</span>
     </a>
     <a class="link-group action-open-search">
-                <span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Search</span>
+        <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Search</span>
     </a>
     <a class="link-group action-open-help">
-                <span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Help</span>
+        <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Help</span>
     </a>
 </div>
 
@@ -188,5 +55,6 @@
 <script src="/bg/js/util.js"></script>
 
 <script src="/bg/js/context-main.js"></script>
+
 </body>
 </html>

ext/bg/css/context.css

@@ -0,0 +1,282 @@
+/*
+ * Copyright (C) 2020  Yomichan Authors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+body {
+    padding: 10px;
+    margin: 0;
+    font-family: "Segoe UI", Tahoma, sans-serif;
+    font-size: 14px;
+}
+
+h3 {
+    margin: 10px 0;
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.1;
+    font-size: 24px;
+    color: inherit;
+}
+label {
+    font-weight: normal;
+}
+
+#mini {
+    text-align: center;
+}
+#full {
+    display: none;
+}
+:root[data-mode=full] #mini {
+    display: none;
+}
+:root[data-mode=full] #full {
+    display: initial;
+}
+
+
+.link-group {
+    display: block;
+    line-height: 1.5em;
+    margin: 0 -10px;
+    padding: 0.5em 10px;
+    cursor: pointer;
+    color: #333;
+    text-decoration: none;
+    background-color: transparent;
+    transition: background-color 0.125s linear 0s;
+    max-width: none;
+}
+.link-group:hover,
+.link-group:active {
+    color: #333;
+    text-decoration: none;
+}
+.link-group:hover>.link-group-label,
+.link-group:active>.link-group-label {
+    text-decoration: underline;
+}
+.link-group:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+.link-group:active {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+.link-group-icon {
+    width: 16px;
+    height: 16px;
+    text-align: center;
+    vertical-align: middle;
+    display: inline-block;
+    margin-right: 0.25em;
+}
+.link-group-icon>input {
+    margin: 0;
+    padding: 0;
+}
+.link-group-icon[data-icon=chevron]::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-image: url(/mixed/img/right-chevron.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+}
+.link-group-label {
+    vertical-align: middle;
+}
+
+/* Toggle */
+.toggle>input[type=checkbox] {
+    display: none;
+}
+.toggle>input[type=checkbox]:not(:checked)~.toggle-group {
+    transform: translateX(-50%);
+}
+.toggle {
+    box-sizing: border-box;
+    width: 60px;
+    height: 34px;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid #245580;
+    border-radius: 4px;
+    display: inline-block;
+    padding: 6px 12px;
+}
+.toggle-group {
+    position: absolute;
+    width: 200%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    user-select: none;
+}
+body[data-loaded=true] .toggle-group {
+    transition: transform 0.35s;
+}
+
+.toggle-on,
+.toggle-off,
+.toggle-handle {
+    display: block;
+    padding: 6px 12px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+}
+.toggle-on,
+.toggle-off {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: 0;
+    border: 0;
+}
+
+.toggle-on {
+    padding-right: 24px;
+    left: 0;
+    right: 50%;
+    color: #ffffff;
+    background-color: #337ab7;
+    border-color: #2e6da4;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 3px 5px rgba(0, 0, 0, 0);
+    background-image: linear-gradient(#337ab7, #265a88);
+    background-repeat: repeat-x;
+}
+.toggle-on:focus,
+.toggle-on:hover {
+    background-color: #265a88;
+    background-image: linear-gradient(#2d65a0, #265a88 50%);
+}
+.toggle-on:active {
+    background-color: #204d74;
+    background-image: none;
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+
+.toggle-off {
+    padding-left: 24px;
+    left: 50%;
+    right: 0;
+}
+
+.toggle-handle {
+    position: relative;
+    margin: 0 auto;
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 100%;
+    width: 0;
+    border-style: solid;
+    border-width: 0 1px;
+    border-radius: 4px;
+    border-color: #cccccc;
+}
+
+.toggle-off,
+.toggle-handle {
+    color: #333333;
+    text-shadow: 0 1px 0 #ffffff;
+    background-color: #ffffff;
+    background-image: linear-gradient(#ffffff, #e0e0e0);
+    background-repeat: repeat-x;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
+}
+.toggle-off:focus,
+.toggle-off:hover,
+.toggle-handle:focus,
+.toggle-handle:hover {
+    background-color: #e6e6e6;
+    background-image: linear-gradient(#e0e0e0, #e6e6e6 50%);
+    border-color: #adadad;
+}
+.toggle-off:active,
+.toggle-handle:active {
+    background-color:#d4d4d4;
+    background-image: none;
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    border-color: #8c8c8c;
+}
+
+
+/* Navigation buttons and icons */
+.nav-button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    white-space: nowrap;
+}
+.nav-button {
+    background-image: linear-gradient(#f8f8f8, #e0e0e0);
+    border: 1px solid #cccccc;
+    margin: 0;
+    padding: 2px 3px;
+    margin: 0;
+    cursor: pointer;
+}
+.nav-button+.nav-button {
+    margin-left: -1px;
+}
+.nav-button::after {
+    content: "";
+    display: block;
+    width: 16px;
+    height: 16px;
+    background-position: center center;
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+    box-sizing: content-box;
+}
+.nav-button:hover {
+    z-index: 1;
+    border-color: #aaaaaa;
+    background-image: linear-gradient(#e8e8e8, #d0d0d0);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+}
+.nav-button:active {
+    z-index: 1;
+    border-color: #808080;
+    background-image: linear-gradient(#c8c8c8, #e0e0e0);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+}
+.nav-button:focus {
+    outline: none;
+}
+.nav-button[data-icon=magnifying-glass]::after {
+    background-image: url(/mixed/img/magnifying-glass.svg);
+}
+.nav-button[data-icon=cog]::after {
+    background-image: url(/mixed/img/cog.svg);
+}
+.nav-button[data-icon=question-mark]::after {
+    background-image: url(/mixed/img/question-mark-circle.svg);
+}
+.nav-button:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+.nav-button:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}

ext/bg/guide.html

@@ -27,7 +27,7 @@
 
             <ol>
                 <li>Click on the <img src="/mixed/img/yomichan-icon.svg" alt> icon in the browser toolbar to open the Yomichan actions dialog.</li>
-                <li>Click on the <em>monkey wrench</em> icon in the middle to open the options page.</li>
+                <li>Click on the <em>cog</em> icon in the middle to open the options page.</li>
                 <li>Import the dictionaries you wish to use for term and Kanji searches.</li>
                 <li>Hold down <kbd>Shift</kbd> key or the middle mouse button as you move your mouse over text to display definitions.</li>
                 <li>Click on the <img src="/mixed/img/play-audio.svg" alt> icon to hear the term pronounced by a native speaker.</li>

ext/bg/js/context-main.js

@@ -66,7 +66,7 @@ async function mainInner() {
 
     setupButtonEvents('.action-open-search', 'search', chrome.runtime.getURL('/bg/search.html'));
     setupButtonEvents('.action-open-options', 'options', chrome.runtime.getURL(manifest.options_ui.page));
-    setupButtonEvents('.action-open-help', 'help');
+    setupButtonEvents('.action-open-help', 'help', 'https://foosoft.net/projects/yomichan/');
 
     const optionsContext = {
         depth: 0,
@@ -82,9 +82,7 @@ async function mainInner() {
         toggle2.addEventListener('change', () => api.commandExec('toggle'), false);
 
         setTimeout(() => {
-            for (const n of document.querySelectorAll('.toggle-group')) {
+            document.body.dataset.loaded = 'true';
-                n.classList.add('toggle-group-animated');
-            }
         }, 10);
     });
 }