Introduce feature toggles and hide ellipsis tool behind such toggle

README.md

@@ -61,6 +61,12 @@ You also need `npm` in version 7 (because of 2nd version of lockfile which was i
 
 If you have any trouble, see this page: https://help.github.com/en/articles/creating-a-pull-request-from-a-fork
 
+### Feature Toggles
+
+Some feature might be hidden by default. Functions to enable/disable them are available inside global `featureToggles` and operate on a `window.localStorage`.
+
+For example use `featureToggles.enableEllipseTool()` to make ellipse tool button visible. Then `featureToggles.disableEllipseTool()` to hide it.
+
 ## License
 
 This software may not be resold, redistributed, rehosted or otherwise conveyed to a third party.

js/_featureToggles.js

@@ -0,0 +1,33 @@
+const featureToggles = (function featureTogglesModule() {
+
+    const ellipseToolLocalStorageKey = 'feature_ellipseTool';
+
+    return {
+        onLoad: () => {
+            updateEllipseToolVisibility()
+        },
+        enableEllipseTool,
+        disableEllipseTool
+    }
+
+    ////////
+
+    function updateEllipseToolVisibility() {
+        // TODO: [ELLIPSE] Once ellipse is ready for release make it enabled by default
+        const isEllipseToolEnabled = (window.localStorage.getItem(ellipseToolLocalStorageKey) === "yes") || false;
+        const ellipseToolElement = document.getElementById("tools-menu--ellipse");
+        ellipseToolElement.style.display = isEllipseToolEnabled ? 'block' : 'none';
+    }
+
+    function enableEllipseTool() {
+        window.localStorage.setItem(ellipseToolLocalStorageKey, "yes");
+        updateEllipseToolVisibility();
+    }
+
+    function disableEllipseTool() {
+        window.localStorage.setItem(ellipseToolLocalStorageKey, "no");
+        updateEllipseToolVisibility();
+    }
+
+})();
+

js/_onLoad.js

@@ -1,12 +1,17 @@
-//when the page is donw loading, you can get ready to start
+//when the page is done loading, you can get ready to start
 window.onload = function () {
+
+    featureToggles.onLoad();
+
     currentTool.updateCursor();
 
-  //if the user specified dimentions
-  if (specifiedDimentions)
+    //if the user specified dimensions
+    if (specifiedDimentions) {
         //create a new pixel
         newPixel(getValue('size-width'), getValue('size-height'), getValue('editor-mode'));
-  else
+    } else {
         //otherwise show the new pixel dialog
         showDialogue('splash', false);
+    }
+
 };

js/pixel-editor.js

@@ -81,3 +81,6 @@
 
 /**libraries**/
 //=include _jscolor.js
+
+/**feature toggles**/
+//=include _featureToggles.js

views/pixel-editor.hbs

@@ -126,7 +126,8 @@
             <button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
         </li>
 
-        <li class="expanded">
+        <!-- TODO: [ELLIPSE] Once ellipse is ready for release make it visible by default -->
+        <li class="expanded" id="tools-menu--ellipse" style="display: none">
             <!-- TODO: [ELLIPSE] Decide on a shortcut to use. "S" was chosen without any in-team consultation. -->
             <!-- TODO: [ELLIPSE] Decide on icons to use. Current ones are quickly prepared drafts and display with incorrect color. -->
             <button title="Ellipse Tool (S)" id="ellipse-button">