Merge pull request #162 from Moustachauve/disable-animations

Add an option to enable or disable animations

interface/devtools/style.css

@@ -14,6 +14,12 @@ body {
   font-size: 1em;
   overflow: hidden;
 }
+.notransition *, .notransition *::before {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
 #cookie-container {
   overflow-y: auto;
   flex: 1 1 auto;

interface/lib/animate.js

@@ -110,14 +110,24 @@ export class Animate {
    * @param {Element} newPage Page that will be inserted in the container.
    * @param {string} direction Which direction to slide the old page towards.
    * @param {function} callback Called after the animation is done.
+   * @param {boolean} animationsEnabled If the animations are enabled or not.
    */
   static transitionPage(
     container,
     oldPage,
     newPage,
     direction = 'left',
     callback = null,
+    animationsEnabled = true,
   ) {
+    if (!animationsEnabled) {
+      if (oldPage) {
+        oldPage.remove();
+      }
+      container.appendChild(newPage);
+      callback();
+      return;
+    }
     const animationTime = '0.3s';
 
     container.addEventListener(

interface/lib/options/options.js

@@ -12,6 +12,7 @@ export class Options {
   constructor() {
     this.advancedCookies = false;
     this.devtoolsEnabled = true;
+    this.animationsEnabled = true;
     this.exportFormat = ExportFormats.Ask;
     this.extraInfo = ExtraInfos.Nothing;
     this.theme = Themes.Auto;

interface/lib/optionsHandler.js

@@ -67,6 +67,25 @@ export class OptionsHandler extends EventEmitter {
     this.saveOptions();
   }
 
+  /**
+   * Gets whether the animations are enabled or not.
+   * @return {boolean} True if the animations are enabled, otherwise false.
+   */
+  getAnimationsEnabled() {
+    // Uses `!==` false in order to be opt-in by default, since it was added at
+    // a later time.
+    return this.options.animationsEnabled !== false;
+  }
+  /**
+   * Sets whether the animations are enabled or not.
+   * @param {boolean} animationsEnabled True if the animations are enabled,
+   *     otherwise false.
+   */
+  setAnimationsEnabled(animationsEnabled) {
+    this.options.animationsEnabled = animationsEnabled;
+    this.saveOptions();
+  }
+
   /**
    * Gets the export format used by the export button.
    * @return {ExportFormats} One of the supported export format.
@@ -207,7 +226,9 @@ export class OptionsHandler extends EventEmitter {
    * @return {boolean} True if ads are enabled, otherwise false.
    */
   getAdsEnabled() {
-    return this.options.adsEnabled;
+    // Uses `!==` false in order to be opt-in by default, since it was added at
+    // a later time.
+    return this.options.adsEnabled !== false;
   }
   /**
    * Sets whether the ads are enabled or not.

interface/options/options.html

@@ -42,6 +42,18 @@
         </div>
       </div>
 
+      <div class="input-container">
+        <label for="animations-enabled">Enable Animations</label>
+        <label class="switch">
+          <input type="checkbox" id="animations-enabled" aria-describedby="animations-enabled-hint" />
+          <span class="slider"></span>
+        </label>
+        <div class="hint" id="animations-enabled-hint">
+          When Enabled, Cookie-Editor will show transitions and other various
+          animations in the interface. This is for appearance only.
+        </div>
+      </div>
+
       <div class="input-container">
         <label for="export-format">Export Format</label>
         <select id="export-format" aria-describedby="export-format-hint">

interface/options/options.js

@@ -17,6 +17,7 @@ document.addEventListener('DOMContentLoaded', async (event) => {
   const permissionHandler = new PermissionHandler(browserDetector);
   const advancedCookieInput = document.getElementById('advanced-cookie');
   const showDevtoolsInput = document.getElementById('devtool-show');
+  const animationsEnabledInput = document.getElementById('animations-enabled');
   const exportFormatInput = document.getElementById('export-format');
   const extraInfoInput = document.getElementById('extra-info');
   const themeInput = document.getElementById('theme');
@@ -33,8 +34,10 @@ document.addEventListener('DOMContentLoaded', async (event) => {
    */
   function setFormValues() {
     console.log('Setting up the form');
+    handleAnimationsEnabled();
     advancedCookieInput.checked = optionHandler.getCookieAdvanced();
     showDevtoolsInput.checked = optionHandler.getDevtoolsEnabled();
+    animationsEnabledInput.checked = optionHandler.getAnimationsEnabled();
     exportFormatInput.value = optionHandler.getExportFormat();
     extraInfoInput.value = optionHandler.getExtraInfo();
     themeInput.value = optionHandler.getTheme();
@@ -63,6 +66,13 @@ document.addEventListener('DOMContentLoaded', async (event) => {
       }
       optionHandler.setDevtoolsEnabled(showDevtoolsInput.checked);
     });
+    animationsEnabledInput.addEventListener('change', (event) => {
+      if (!event.isTrusted) {
+        return;
+      }
+      optionHandler.setAnimationsEnabled(animationsEnabledInput.checked);
+      handleAnimationsEnabled();
+    });
     exportFormatInput.addEventListener('change', (event) => {
       if (!event.isTrusted) {
         return;
@@ -191,4 +201,15 @@ document.addEventListener('DOMContentLoaded', async (event) => {
     document.execCommand('Copy');
     document.body.removeChild(fakeText);
   }
+
+  /**
+   * Enables or disables the animations based on the options.
+   */
+  function handleAnimationsEnabled() {
+    if (optionHandler.getAnimationsEnabled()) {
+      document.body.classList.remove('notransition');
+    } else {
+      document.body.classList.add('notransition');
+    }
+  }
 });

interface/options/style.css

@@ -12,6 +12,12 @@ body * {
   box-sizing: border-box;
   text-align: start;
 }
+.notransition *, .notransition *::before {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
 
 svg.icon {
   height: 1em;

interface/popup-mobile/style.css

@@ -28,6 +28,13 @@ body * {
   text-align: start;
 }
 
+.notransition *, .notransition *::before {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
+
 button::-moz-focus-inner {
   border: 0;
 }

interface/popup/cookie-list.html

@@ -8,7 +8,7 @@
     <title>Cookie-Editor</title>
   </head>
 
-  <body>
+  <body class="notransition">
     <div id="pageTitle">
       <h1 class="container">
         Cookie-Editor

interface/popup/cookie-list.js

@@ -299,6 +299,7 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
         () => {
           disableButtons = false;
         },
+        optionHandler.getAnimationsEnabled(),
       );
       console.log('after transition');
 
@@ -355,6 +356,7 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
         () => {
           disableButtons = false;
         },
+        optionHandler.getAnimationsEnabled(),
       );
 
       document.getElementById('button-bar-default').classList.remove('active');
@@ -621,6 +623,7 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
           () => {
             disableButtons = false;
           },
+          optionHandler.getAnimationsEnabled(),
         );
       } else {
         containerCookie.appendChild(cookiesListHtml);
@@ -653,6 +656,7 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
         () => {
           disableButtons = false;
         },
+        optionHandler.getAnimationsEnabled(),
       );
     } else {
       containerCookie.appendChild(html);
@@ -700,6 +704,7 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
         () => {
           disableButtons = false;
         },
+        optionHandler.getAnimationsEnabled(),
       );
     } else {
       containerCookie.appendChild(html);
@@ -763,6 +768,7 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
         () => {
           disableButtons = false;
         },
+        optionHandler.getAnimationsEnabled(),
       );
     } else {
       containerCookie.appendChild(html);
@@ -777,6 +783,17 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
     document.getElementById('version').textContent = 'v' + version;
   }
 
+  /**
+   * Enables or disables the animations based on the options.
+   */
+  function handleAnimationsEnabled() {
+    if (optionHandler.getAnimationsEnabled()) {
+      document.body.classList.remove('notransition');
+    } else {
+      document.body.classList.add('notransition');
+    }
+  }
+
   /**
    * Creates the HTML representation of a cookie.
    * @param {string} name Name of the cookie.
@@ -1048,6 +1065,7 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
     await optionHandler.loadOptions();
     themeHandler.updateTheme();
     handleAd();
+    handleAnimationsEnabled();
     optionHandler.on('optionsChanged', onOptionsChanged);
     cookieHandler.on('cookiesChanged', onCookiesChanged);
     cookieHandler.on('ready', showCookiesForTab);
@@ -1312,6 +1330,7 @@ import { CookieHandlerPopup } from './cookieHandlerPopup.js';
    * @param {Option} oldOptions the options before changes.
    */
   function onOptionsChanged(oldOptions) {
+    handleAnimationsEnabled();
     if (oldOptions.advancedCookies != optionHandler.getCookieAdvanced()) {
       document.querySelector('#advanced-toggle-all').checked =
         optionHandler.getCookieAdvanced();

interface/popup/style.css

@@ -21,6 +21,13 @@ body * {
   text-align: start;
 }
 
+.notransition *, .notransition *::before {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
+
 button::-moz-focus-inner {
   border: 0;
 }

interface/sidepanel/style.css

@@ -13,6 +13,12 @@ body {
   font-size: 1em;
   overflow: hidden;
 }
+.notransition *, .notransition *::before {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
 #cookie-container {
   overflow-y: auto;
   flex: 1 1 auto;