Merge branch 'release/1.2.1'

README.md

@@ -1,51 +1,67 @@
-# Favourites
+# Favourites [![Mozilla Add-on](https://img.shields.io/badge/Version-1.2.1-green.svg)](https://github.com/flosommerfeld/Favourites/releases/tag/v1.2.1)
 
 Favourites is a Mozilla Firefox WebExtension which can be used as an alternative to the common Firefox bookmarks. Favourites adds an icon to your browsers toolbar from which you can access all of your saved pages. The user can manage his favourite pages inside the WebExtensions settings page.
 
-[![Mozilla Add-on](https://img.shields.io/badge/Version-1.2.0-green.svg)](https://github.com/flosommerfeld/Favourites/releases/tag/v1.2.0)
+
 
 ![picture alt](https://i.imgur.com/5cmaXY5.png "Demo screenshot")
-![picture alt](https://i.imgur.com/9t5fsag.gif "Context menu demo")
 
-![picture alt](https://i.imgur.com/fIgy4mk.png "Settings demo")
+<details>
+<summary>Click here to view more demo screenshots</summary>
+<br>
+#### Settings page
+
+![picture alt](https://i.imgur.com/fIgy4mk.png "Settings page")
+
+#### Context menu feature
+
+![picture alt](https://i.imgur.com/9t5fsag.gif "Context menu feature")
+
+</details>
+
+
+## Getting Started
+To install the WebExtension please click the big "Add to Firefox" button below which takes you to [addons.mozilla.org](http://addons.mozilla.org). Alternatively you can also install it manually by downloading the installables from the projects [releases page](https://github.com/flosommerfeld/Favourites/releases). If you want to install the extension manually, you have to drag&drop the installable (.xpi file) into your browser window and click the 'add' button.
+
+After installing you can click on the icon in the toolbar, then click the cogwheel to open settings and finally setup your favourite websites by typing in the details and clicking the add button. Note that new websites can also be added via `Rightclick` -> `Add website to favourites`.
+
+[![Add to Firefox](https://i.imgur.com/t68JfGQ.png)](https://addons.mozilla.org/en-US/firefox/addon/favourites/)
 
 
 ## Core Technical Concepts
 Favourites uses the [WebExtension Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) which enables the WebExtension to locally save all of the users favourite websites. The WebExtension only uses a [popup page](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups) and an [options page](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages), no [background scripts](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_pages) or [content scripts](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts). The popup page is used to show the user his favourite websites and the options page is used to manage these websites.
 
-The project has two folders in the root directory: icons (where all the icons are saved) and ui (where all files are located which allow user interaction and from where the extension accesses the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) to store websites). Another important file which is located in the root directory is the [manifest.json](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json). Like in any other WebExtension it stores metadata about the extension such as its name, version and permissions. The file also gives Favourites the permission to use the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) in order to use a popup in the toolbar and a options page for extension preferences.
+The project has two folders in the root directory: icons (where all the icons are saved) and ui (where all files are located which allow user interaction and from where the extension accesses the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) to store websites). Another important file which is located in the root directory is the [manifest.json](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json). Like in any other WebExtension it stores metadata about the extension such as its name, version and permissions. The file also gives Favourites the permission to use the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) in order to use a popup in the toolbar and a options page for extension preferences. Since version [1.2.0](https://github.com/flosommerfeld/Favourites/releases/tag/v1.2.0) Favourites has a [background script](https://github.com/flosommerfeld/Favourites/blob/master/background-script.js) which was added in order to add new websites via the context menu. The script is always running in the background and waits for the user to open the context menu and to click the "Add website [..]" button. If the button is clicked the background script gets information about the active tab (via the [activeTab](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission) permission) and accesses the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage)  to save the new website.
 
 Visualized project structure:
 
-![picture alt](https://i.imgur.com/tML1eDV.png "Project structure")
+![picture alt](https://i.imgur.com/DBqPu1a.png "Project structure")
 
 For additional information on Mozilla Firefox WebExtensions please visit [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension).
 
-## Getting Started
-To install the WebExtension please visit [addons.mozilla.org](http://addons.mozilla.org) and click the "add to Firefox" button. Alternatively you can also install it manually by downloading the installables from the projects [releases page](https://github.com/flosommerfeld/Favourites/releases). If you want to install the extension manually, you have to drag&drop the installable (.xpi file) into your browser window and click the 'add' button.
-
-After installing you can click on the icon in the toolbar, then click the cogwheel to open settings and finally setup your favourite websites by typing in the details and clicking the add button.
 
 ## Contributing
 #### Contributor Guidelines: TBA
 #### Code Style/Requirements: TBA
 #### Format for commit messages: TBA
 
+
 ## TODO
 #### Next steps:
-* See the projects [development board](https://github.com/flosommerfeld/Favourites/projects/1).
+* See the [development board](https://github.com/flosommerfeld/Favourites/projects/1).
 #### Features planned:
 * Loading images for favourites from online resources etc.
 * Sorting the websites via the options page.
-* Validation for website details (image, name, url).
+
 
 #### Known bugs:
-* See the [issues board](https://github.com/flosommerfeld/Favourites/issues) 
+* See [issues board](https://github.com/flosommerfeld/Favourites/issues)
 
 
 ## Contact
 Email address: [flosommerfeld@pm.me](mailto:flosommerfeld@pm.me)
 
+
 ## License
 
 The contents of this repository are covered under the [GNU General Public License v2.0](LICENSE).

background-script.js

@@ -1,9 +1,9 @@
 /*
- * Name der Funktion:
+ * Name of the function:
  * onError
  *
- * Beschreibung:
- * Gibt Fehler aus, wenn bei einem 'Versprechen'/'Promise' ein Fehler auftritt
+ * Description:
+ * Promise - Logs errors in case something goes wrong
  *
  */
 function onError(error) { //log errors
@@ -12,60 +12,66 @@ function onError(error) { //log errors
 
 
 
-/*
-Called when the item has been created, or when creation failed due to an error.
-We'll just log success/failure here.
-*/
+/* Name of the function:
+ * onCreated
+ *
+ * Description:
+ * Is called when the context menu item has been created, or when creation failed due to an error.
+ * I'll just log success/failure here.
+ */
 function onCreated() {
   if (browser.runtime.lastError) {
-    console.log(`Error: ${browser.runtime.lastError}`);
+    console.log("Error: ${browser.runtime.lastError}");
   } else {
     console.log("Item created successfully");
   }
 }
 
 
-/* Erstelle 'contextMenu' item/button */
+/* Create 'contextMenu' item/button */
 browser.contextMenus.create({
   id: "add-to-favourites",
   title: "Add website to favourites",
   contexts: ["all"]
-}, onCreated);
+}, onCreated);//promise
 
 
-/* Eventhandler für die buttons aus dem 'contextMenu' */
+/* Eventhandler for item/button from the 'contextMenu' */
 browser.contextMenus.onClicked.addListener(function(info, tab) {
   switch (info.menuItemId) {
     case "add-to-favourites":
 
-      /* Dank der 'activeTab' Permission gibt es hier mehr Infos über 'tab' */
+      /* Thanks to the 'activeTab' permission i can get more information about 'tab' (see parameter) */
 
-      /* Lade die Tabs aus dem lokalen Speicher */
+      /* Load the JSON object array in which all the favourites are saved */
       let tabs = browser.storage.local.get("tabs");
       tabs.then(function(item) {
+        /* Give the new favourite the data of this active tab */
         let image = tab.favIconUrl;
         let url = tab.url
         let title = tab.title;
 
-        //Sorge dafür, dass wenn das faviconbild nicht exisitert für standardbild
-        //TODO Allg. Funktion fürs Hinzufügen von fvourites, die alles überprüft
+
+        //TODO General function for adding new favourites which checks everything
+
+        /* If the website/active tab doesn't have a favicon then set the default image */
         if (image == null) {
           image = "img/noImage.png";
         }
 
-          /* Füge die aktuelle Seite zu den Favourite hinzu */
+          /* Add the website of the active tab to the JSON object array */
           item.tabs.push({
             "image": image,
             "url": url,
             "title": title
           });
 
-          /* Speicher alle Änderungen, die dem Item zugefügt wurden */
-          browser.storage.local.set({ //JSON object initialization
+          /* Save alls changes that were made to the JSON object array */
+          browser.storage.local.set({
             tabs: item.tabs
           });
 
-      }, onError);
+      }, onError);//promise
 
       break;
 

manifest.json

@@ -2,10 +2,10 @@
 
   "manifest_version": 2,
   "name": "Favourites",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "permissions": ["storage", "contextMenus", "activeTab"],
 
-  "description": "Simple alternative to Firefox-bookmarks.",
+  "description": "Simple alternative to Firefox's bookmarks.",
   "homepage_url": "https://flosommerfeld.github.io",
   "author": "flosommerfeld",
 

ui/css/settings.css

@@ -18,7 +18,7 @@
 }
 
 
-/* Style für die Buttons mit welchen man Tabs erstellen kann usw. */
+/* Style for the buttons with which favourties can be edited */
 .button{
   display:block;
   background-color: #f5f5f5;
@@ -55,19 +55,19 @@
 }
 
 .button-edit{
-  /* Braucht nichts da nur beim delete button ein Rand sein soll */
+  /* Styles were removed */
 }
 
 .button-change{
-  /* Braucht nichts da nur beim delete button ein Rand sein soll */
+  /* Styles were removed */
 }
 
 
 
 
 
 
-/*Basiert auf https://www.w3schools.com/howto/howto_css_responsive_form.asp */
+/* Based on https://www.w3schools.com/howto/howto_css_responsive_form.asp */
 * {
     box-sizing: border-box;
 }

ui/css/style.css

@@ -17,16 +17,15 @@ html {
 .container{
   align-items: center;
   justify-content: column;
-  background-color: #673ab7;/* Das ist die Farbe über den abgerundeten Ecken vom ersten Favourite */
+  background-color: #673ab7;/* Allows us to create the rounded corners which have this color */
   text-decoration: none !important;
 }
 
 
 .container>div,
 .container>a {
   font-size: 13px;
-
-  height: 45px; /* Höhe der einzelnen Tabs */
+  height: 45px; /* Height of each favourite/entry */
   color: black;
   background-color: white;
   padding: 2px;
@@ -41,7 +40,7 @@ html {
 
 
 
-/* Gilt nur für alle <a> Elemente, die innerhalb des tab-containers sind -> alle Tabs */
+/* These rules apply for all <a> elements which are inside the tab-container */
 .container>a,
 .container>a:active,
 .container>a:focus {
@@ -53,15 +52,15 @@ html {
 
 
 
-/* Gilt nur für Bilder, die innerhalb von einem <a> Element sind */
+/* Only applies for images which are inside an <a> element */
 a>img{
   height:30px;
   width: 30px;
   margin-left: 6px;
   border-radius: 1000px;
 }
 
-/* Verstecke dir url von jedem Favourite */
+/* Hide url of each favourite */
 a>.url{
   display: none;
 }
@@ -71,7 +70,7 @@ a>.url{
   margin-left: 6px;
 }
 
-/* Entferne die "komischen" Farben vom Zahnrad-Icon usw. */
+/* Remove weird colors from the cogwheel */
 .text>a{
   color: white;
   outline: none;
@@ -80,7 +79,7 @@ a>.url{
 
 
 
-/* Navigationsleiste */
+/* Navigation bar */
 .navbar {
   font-size: 16px;
   background-color: #673ab7;
@@ -110,7 +109,7 @@ a{
 
 
 
-/* Der erste tab soll einen abgerundeten Rahmen haben */
+/* First child of tab-container should have rounded corners */
 #tab-container > *:first-child{
   border-radius: 4px 4px 0px 0px;
 }
@@ -127,7 +126,7 @@ a{
 }
 
 
-/* Style für den container der Nachricht die sagt, dass keine Favoriten gefunden werden konnten */
+/* Style for the container which tells the user that no favourites are saved */
 #no-favourites-message{
   display: none; /* Hide on default -> visualizeFavourites() shows message if no favourites are saved */
   background-color: white;