Merge branch 'develop'

CHANGELOG.md

@@ -5,17 +5,20 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+
+## [0.2.0] - 2019-07-19
 ### Changed
 - Changed name integrally to Flobro for better recognition
 - Reordered the settings window for better UX
+- Browser window stays open when settings window is opened
 
 ### Added
 - Added auto hide title bar
 - Added URL validation
 
 ### Fixed
-- Fixed weird behaviour of title bar, fixing issues #10, #11 and #19
-- Fixed default locale (now English), fixing issue #24
+- Fixed weird behaviour of title bar
+- Fixed default locale (now English)
 
 ### Removed
 - Removed keyboard shortcuts due to low usage
@@ -29,8 +32,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 - Added bar to move window with favicon and document title
-- Added button to open settings/web window, closing issue #1 and #9
-- Added keyboard shortcuts legend, closing issue #4
+- Added button to open settings/web window
+- Added keyboard shortcuts legend
 - Added credits
 
 ### Fixed
@@ -53,6 +56,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 - Initial release
 
-[Unreleased]: https://github.com/cornips/flobro/compare/0.1.2...HEAD
+[Unreleased]: https://github.com/cornips/flobro/compare/0.2.0...HEAD
+[0.2.0]: https://github.com/cornips/flobro/compare/0.1.2...0.2.0
 [0.1.2]: https://github.com/cornips/flobro/compare/0.1.1...0.1.2
 [0.1.1]: https://github.com/cornips/flobro/compare/0.1.0...0.1.1

options.html

@@ -18,7 +18,7 @@
                 </button>
 
                 <button class="window-button" title="Browser" id="browser-window-button">
-                    <i class="flaticon-mark-1"></i>
+                    <i class="flaticon-internet-1"></i>
                 </button>
 
                 <button class="window-button" title="Close" id="close-window-button">
@@ -28,7 +28,7 @@
         </div>
     </div>
 
-    <div id="settings" class="options-container">
+    <div id="options" class="options-container">
         <div id="alert" hidden>
             <p class="locale" id="appAlertSomethingWrong">Something went wrong.</p>
         </div><!-- /#alert -->
@@ -47,13 +47,17 @@
 
         <h2><span class="locale" id="appTxtOptions">Options</span></h2>
 
-        <ul id="settings-fields">
+        <ul id="options-list">
             <li id="improve-by-tracking-opt-in" hidden>
-                <label><input type="checkbox" id="improve-by-tracking" /><span><span class="locale" id="appLabelImproveByTracking">Improve app with anonymous data</span></span></label>
+                <label>
+                    <input type="checkbox" id="improve-by-tracking" class="toggleBox" />
+                    <span class="toggle"><span></span></span>
+                    <span class="locale" id="appLabelImproveByTracking">Improve app with anonymous data</span>
+                </label>
                 <small class="notice" id="tracking-help-text"></small>
             </li>
-        </ul><!-- /#settingsFields -->
-    </div><!-- /#settings -->
+        </ul><!-- /#options-list -->
+    </div><!-- /.options-container -->
 
     <div id="credits" class="options-container">
         <h2><span class="locale" id="appTxtCredits">Credits</span></h2>

scripts/background.js

@@ -1,4 +1,4 @@
-var storageData;
+let storageData;
 
 chrome.storage.sync.get(function(items) {
     if (items)
@@ -7,16 +7,19 @@ chrome.storage.sync.get(function(items) {
 
 function createWindow(param) {
     param.id = (typeof param.id !== 'undefined' ? param.id : 'window');
+    param.frame = (typeof param.frame !== 'undefined' ? param.frame : 'none');
+    param.innerBounds = (typeof param.innerBounds !== 'undefined' ? param.innerBounds : {});
     chrome.app.window.create(param.url, {
-        frame: 'none',
+        frame: param.frame,
         id: param.id,
         resizable: true,
-        alwaysOnTop: true
+        alwaysOnTop: true,
+        innerBounds: param.innerBounds,
     }, function (appwindow) {
 
         appwindow.contentWindow.onload = function () {
 
-            var bodyObj = appwindow.contentWindow.document.querySelector('body'),
+            const bodyObj = appwindow.contentWindow.document.querySelector('body'),
                 buttonsObj = appwindow.contentWindow.document.getElementById('buttons'),
                 closeObj = appwindow.contentWindow.document.getElementById('close-window-button'),
                 browserObj = appwindow.contentWindow.document.getElementById('browser-window-button'),
@@ -31,14 +34,14 @@ function createWindow(param) {
             };
             if (settingsObj){
                 settingsObj.onclick = function () {
-                    appwindow.contentWindow.close();
-                    createWindow({ 'url': 'options.html', 'id': 'options', 'bounds': { width: 450, height: 515 } });
+                    // appwindow.contentWindow.close();
+                    createWindow({ url: 'options.html', id: 'options', innerBounds: { width: 450, height: 540, minWidth: 360, minHeight: 540 } });
                 };
             }
             if (browserObj){
                 browserObj.onclick = function () {
+                    createWindow({ url: 'window.html', id: 'window' });
                     appwindow.contentWindow.close();
-                    createWindow({ 'url': 'window.html', 'id': 'window' });
                 };
             }
             minimizeObj.onclick = function () {
@@ -53,56 +56,47 @@ function createWindow(param) {
             };
 
 
+            // Move title bar in and out
             buttonsObj.classList.add('fadeout');
-            webview.onmouseenter = function () {
-                console.log('onmouseenter');
+            buttonsObj.onmousemove = function () {
+                if (window.removeButtonsTimer) clearTimeout(window.removeButtonsTimer);
+            }
+            bodyObj.onmouseenter = function () {
                 if (window.removeButtonsTimer) clearTimeout(window.removeButtonsTimer);
 
                 buttonsObj.classList.remove('fadeout');
                 buttonsObj.classList.add('fadein');
                 if (webview)
                     webview.classList.add('movedown');
-            };
-            webview.onmouseleave = function () {
-                console.log('onmouseleave');
+            }
+            buttonsObj.onmouseleave = function () {
                 if (false === helpOpened) {
                     window.removeButtonsTimer = setTimeout(() => {
                         buttonsObj.classList.remove('fadein');
                         buttonsObj.classList.add('fadeout');
                         if (webview)
                             webview.classList.remove('movedown');
-                    }, 300)
+                    }, 1000)
                 }
-            };
-
+            }
 
             chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) {
                 if (request === 'fullscreen') {
                     toggleFullscreen();
                 }
                 if (typeof request.bounds !== 'undefined' && request.bounds !== null) {
                     if (request.bounds.w && request.bounds.h) {
-                        var appwindow = (typeof request.sender !== 'undefined' ? chrome.app.window.get(request.sender) : chrome.app.window.getAll()[0]);
+                        const appwindow = (typeof request.sender !== 'undefined' ? chrome.app.window.get(request.sender) : chrome.app.window.getAll()[0]);
                         appwindow.resizeTo(request.bounds.w,request.bounds.h);
                     }
                 }
             });
 
-
         }
 
 	});
 }
 
-// hotkeys
-window.addEventListener('keydown', function(e) {
-    // CTRL + N
-    if (e.ctrlKey && e.keyCode == 78) {
-        // Open options
-        chrome.runtime.sendMessage({'open': 'options'});
-    }
-});
-
 chrome.runtime.onMessageExternal.addListener(function (request, sender) {
     if (typeof request.launch === 'undefined') {
         return;
@@ -116,7 +110,7 @@ chrome.runtime.onMessageExternal.addListener(function (request, sender) {
     if (0 === chrome.app.window.getAll().length) {
         createWindow(request);
     } else {
-        var appwindow = chrome.app.window.getAll()[0];
+        const appwindow = chrome.app.window.getAll()[0];
 
         appwindow.close();
 
@@ -129,15 +123,14 @@ chrome.runtime.onMessageExternal.addListener(function (request, sender) {
 
 // Launch options
 chrome.app.runtime.onLaunched.addListener(function () {
-    var launchOpen = { 'url': 'options.html', 'id': 'options'};
+    let launchOpen = { url: 'options.html', id: 'options', innerBounds: { width: 450, height: 540, minWidth: 360, minHeight: 540 } };
     if (storageData && storageData.url !== 'undefined' && storageData.url !== '')
-        launchOpen = { 'url': 'window.html', 'id': 'window'};
+        launchOpen = { url: 'window.html', id: 'window'};
     createWindow(launchOpen);
 });
 
 // Launch app
 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) {
-    var allWindows = chrome.app.window.getAll()[0];
     // Reopen window if already opened
     if (typeof request.open !== 'undefined') {
         if (chrome.app.window.get(request.open)) {
@@ -150,17 +143,15 @@ chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) {
     }
     if (request.open === 'window') {
         setTimeout(function(){
-            createWindow({ 'url': 'window.html', 'id': 'window' });
+            createWindow({ url: 'window.html', id: 'window' });
         },250);
     }
     if (request.open === 'options') {
         setTimeout(function(){
-            createWindow({ 'url': 'options.html', 'id': 'options', 'bounds': { width: 450, height: 515 }, innerBounds: { minWidth: 360 } });
+            createWindow({ url: 'options.html', id: 'options', innerBounds: { width: 450, height: 540, minWidth: 360, minHeight: 540 } });
         },250);
     }
     if (request.close === 'options') {
         chrome.app.window.get('options').close();
     }
 });
-
-var minimized = false;

scripts/options.js

@@ -153,7 +153,7 @@ function initSettings(config) {
                     .category('App')
                     .action('Switch Tracking')
                     .dimension(2, 'off');
-                console.warn('%c' + chrome.i18n.getMessage('appMiscConsiderTracking'), 'font-size:20px;background-color:#fff3c6');
+                console.info('%c' + chrome.i18n.getMessage('appMiscConsiderTracking'), 'font-size:20px;background-color:#fff3c6');
                 txtTrackingHelpText.innerText = chrome.i18n.getMessage('appMiscConsiderTracking');
                 txtTrackingHelpText.style.backgroundColor = "#fff3c6";
         }

scripts/window.js

@@ -20,88 +20,6 @@ document.getElementById('close-window-button').title = chrome.i18n.getMessage('a
 const bodyObj = document.querySelector('body'),
     buttonsObj = document.getElementById('buttons');
 
-// window.onmouseenter = function () {
-//     console.log('onmouseenter window');
-//     if (window.removeButtonsTimer) clearTimeout(window.removeButtonsTimer);
-
-//     buttonsObj.classList.remove('fadeout');
-//     buttonsObj.classList.add('fadein');
-//     if (webview)
-//         webview.classList.add('movedown');
-// };
-// webview.onmouseleave = function () {
-//     console.log('onmouseleave webview');
-//     window.removeButtonsTimer = setTimeout(() => {
-//         buttonsObj.classList.remove('fadein');
-//         buttonsObj.classList.add('fadeout');
-//         if (webview)
-//             webview.classList.remove('movedown');
-//     }, 300)
-// };
-
-window.addEventListener('mousemove', function (event) {
-    console.log(event.pageX, event.pageY, event.target.id);
-}.bind(this));
-
-// hotkeys
-window.addEventListener('keydown', function(e) {
-    // Ctrl+R or F5
-    if (e.ctrlKey && e.keyCode == 82 || e.keyCode == 116) {
-        var ReloadApp = analytics.EventBuilder.builder()
-            .category('App')
-            .action('Reload')
-            .dimension(1, 'Ctrl R or F5');
-        tracker.send(ReloadApp).addCallback(function() {
-            webview.reload();
-        }.bind(this));
-    }
-
-    // F11
-    if (e.keyCode == 122) {
-        if (chrome.app.window.current().isFullscreen()) {
-            var RestoreFullscreen = analytics.EventBuilder.builder()
-                .category('App')
-                .action('Fullscreen')
-                .dimension(1, 'Restore');
-            tracker.send(RestoreFullscreen).addCallback(function() {
-                chrome.app.window.current().restore();
-            }.bind(this));
-        } else {
-            var EnterFullscreen = analytics.EventBuilder.builder()
-                .category('App')
-                .action('Fullscreen')
-                .dimension(2, 'Enter');
-            tracker.send(EnterFullscreen).addCallback(function() {
-                chrome.app.window.current().fullscreen();
-            }.bind(this));
-        }
-    }
-
-    // Ctrl + N
-    if (e.ctrlKey && e.keyCode == 78) {
-        // Open options
-        var SwitchWithCtrlN = analytics.EventBuilder.builder()
-        .category('App')
-        .action('Switch')
-        .dimension(2, 'Ctrl N');
-        tracker.send(SwitchWithCtrlN).addCallback(function() {
-            chrome.runtime.sendMessage({'open': 'options'});
-        }.bind(this));
-    }
-
-    // Esc
-    if (e.keyCode == 27) {
-        // Launch main window
-        var SwitchWithEsc = analytics.EventBuilder.builder()
-                .category('App')
-                .action('Switch')
-                .dimension(1, 'Esc');
-        tracker.send(SwitchWithEsc).addCallback(function() {
-            chrome.runtime.sendMessage({'open': 'options'});
-        }.bind(this));
-    }
-});
-
 // Get URL
 window.addEventListener('load', function(e) {
     chrome.storage.sync.get(function(items) {
@@ -178,7 +96,7 @@ window.addEventListener('focus', function(e) {
     webview.focus();
 });
 
-// allow download
+// allow download and fullscreen
 webview.addEventListener('permissionrequest', function(e) {
     if (e.permission === 'download' || e.permission === 'fullscreen') {
         e.request.allow();

styles/flaticon.css

@@ -7,6 +7,7 @@
   font-family: "Flaticon";
   src: url("../assets/iconset/Flaticon.eot");
   src: url("../assets/iconset/Flaticon.eot?#iefix") format("embedded-opentype"),
+       url("../assets/iconset/Flaticon.woff2") format("woff2"),
        url("../assets/iconset/Flaticon.woff") format("woff"),
        url("../assets/iconset/Flaticon.ttf") format("truetype"),
        url("../assets/iconset/Flaticon.svg#Flaticon") format("svg");
@@ -24,18 +25,20 @@
 [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
 [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
   font-family: Flaticon;
-        font-size: 20px;
-font-style: normal;
-margin-left: 20px;
+  font-size: 18px;
+  font-style: normal;
+  margin-left: 20px;
 }
 
-.flaticon-line-1:before { content: "\f100"; }
-.flaticon-signs-1:before { content: "\f101"; }
-.flaticon-mark-1:before { content: "\f102"; }
-.flaticon-cogwheel-1:before { content: "\f103"; }
-.flaticon-close-1:before { content: "\f104"; }
-.flaticon-mark:before { content: "\f105"; }
-.flaticon-signs:before { content: "\f106"; }
-.flaticon-line:before { content: "\f107"; }
-.flaticon-close:before { content: "\f108"; }
-.flaticon-cogwheel:before { content: "\f109"; }
+.flaticon-cogwheel:before { content: "\f100"; }
+.flaticon-close:before { content: "\f101"; }
+.flaticon-line:before { content: "\f102"; }
+.flaticon-signs:before { content: "\f103"; }
+.flaticon-mark:before { content: "\f104"; }
+.flaticon-close-1:before { content: "\f105"; }
+.flaticon-cogwheel-1:before { content: "\f106"; }
+.flaticon-mark-1:before { content: "\f107"; }
+.flaticon-signs-1:before { content: "\f108"; }
+.flaticon-line-1:before { content: "\f109"; }
+.flaticon-internet:before { content: "\f10a"; }
+.flaticon-internet-1:before { content: "\f10b"; }