Merge pull request #32353 from Cwiiis/bug1212905-new-homescreen-optio…

…nal-scroll-snapping

Bug 1212905 - Make scroll snapping optional. r=gasolin,gmarty

apps/homescreen/js/app.js

@@ -344,6 +344,15 @@ const BLACKLIST = [];
       this.snapScrollPosition();
     },
 
+    toggleScrollSnapping: function(scrollSnapping) {
+      if (this.scrollable.classList.contains('snapping') === scrollSnapping) {
+        return;
+      }
+
+      this.scrollable.classList.toggle('snapping', this.scrollSnapping);
+      this.snapScrollPosition();
+    },
+
     onVisualLoad: function() {
       this.visualLoadComplete = true;
       this.icons.thaw();
@@ -592,8 +601,14 @@ const BLACKLIST = [];
       var currentScroll = this.scrollable.scrollTop;
       var scrollHeight = this.scrollable.clientHeight;
 
-      var destination = Math.min(gridHeight - scrollHeight,
-        Math.round(currentScroll / this.pageHeight + bias) * this.pageHeight);
+      var destination;
+      if (this.scrollSnapping) {
+        destination = Math.min(gridHeight - scrollHeight,
+          Math.round(currentScroll / this.pageHeight + bias) * this.pageHeight);
+      } else {
+        destination = Math.min(gridHeight - scrollHeight,
+          currentScroll + (this.pageHeight * bias));
+      }
 
       if (Math.abs(destination - currentScroll) > 1) {
         this.scrollable.style.overflow = '';
@@ -954,6 +969,7 @@ const BLACKLIST = [];
 
       case 'settings-changed':
         this.toggleSmall(this.settings.small);
+        this.toggleScrollSnapping(this.settings.scrollSnapping);
         break;
       }
     }

apps/homescreen/js/settings.js

@@ -18,9 +18,15 @@
    */
   const COLUMNS_SETTING = 'grid.cols';
 
+  /**
+   * Name of the global home screen paging setting.
+   */
+  const PAGING_SETTING = 'grid.paging';
+
   function Settings() {
     // Initialise default settings
     this.small = false;
+    this.scrollSnapping = false;
     this.firstRun = false;
 
     // Listen to external settings changes
@@ -42,15 +48,26 @@
           });
         };
 
+        var syncPagingSetting = () => {
+          stores[0].get(PAGING_SETTING).then(paging => {
+            this.scrollSnapping = paging;
+            signalChange();
+          });
+        };
+
         stores[0].addEventListener('change', e => {
           switch (e.id) {
             case COLUMNS_SETTING:
               syncSmallSetting();
               break;
+            case PAGING_SETTING:
+              syncPagingSetting();
+              break;
           }
         });
 
         syncSmallSetting();
+        syncPagingSetting();
       }, e => {
         console.error('Error retrieving home screen settings datastore:', e);
       });
@@ -71,6 +88,7 @@
     }
 
     this.small = settings.small || false;
+    this.scrollSnapping = settings.scrollSnapping || false;
 
     // Monitor global homescreen settings
     if (!navigator.getDataStores) {
@@ -83,7 +101,8 @@
     save: function() {
       localStorage.setItem('settings', JSON.stringify({
         version: SETTINGS_VERSION,
-        small: this.small
+        small: this.small,
+        scrollSnapping: this.scrollSnapping
       }));
     }
   };

apps/homescreen/style/apps-panel.css

@@ -1,11 +1,14 @@
 #apps-panel > .scrollable {
   overflow-y: auto;
-  scroll-snap-type-y: mandatory;
   height: 100%;
   transition: transform 0.2s;
   padding-top: 1.5vw;
 }
 
+#apps-panel > .scrollable.snapping {
+  scroll-snap-type-y: mandatory;
+}
+
 /* This weird arrangement of constant sizes, transforms and containers is so
  * the gaia-container can animate fully between small and not-small states.
  * Without this animation, the container would be unnecessary and only the

apps/homescreen/style/grid.css

@@ -8,6 +8,9 @@ gaia-container {
   box-sizing: padding-box;
   padding: 0 1.5vw;
   padding-bottom: 6rem;
+}
+
+.snapping gaia-container {
   background: linear-gradient(to bottom, transparent,
                                          transparent 50%,
                                          rgba(255, 255, 255, 0.15) 50%,

apps/homescreen/test/unit/app_test.js

@@ -542,9 +542,11 @@ suite('Homescreen app', () => {
         scrollTo: () => {}
       };
       scrollToSpy = sinon.spy(app.scrollable, 'scrollTo');
+      app.scrollSnapping = true;
     });
 
     teardown(() => {
+      app.scrollSnapping = false;
       app.scrollable = realScrollable;
     });
 

apps/homescreen/test/unit/settings_test.js

@@ -7,7 +7,7 @@ require('/shared/test/unit/mocks/mock_navigator_datastore.js');
 require('/js/settings.js');
 
 suite('Settings', () => {
-  const DEFAULT_SETTINGS = '{"version":0,"small":false}';
+  const DEFAULT_SETTINGS = '{"version":0,"small":false,"scrollSnapping":false}';
 
   var realLocalStorage;
   var realNavigatorDatastores;
@@ -55,10 +55,13 @@ suite('Settings', () => {
       test('restores settings', () => {
         var settings = new Settings();
         assert.isFalse(settings.small);
+        assert.isFalse(settings.scrollSnapping);
 
-        mockLocalStorage.setItem('settings', '{"version":0,"small":true}');
+        mockLocalStorage.setItem('settings',
+          '{"version":0,"small":true,"scrollSnapping":true}');
         settings = new Settings();
         assert.isTrue(settings.small);
+        assert.isTrue(settings.scrollSnapping);
       });
 
       test('should not restore data if version number differs', () => {
@@ -76,17 +79,37 @@ suite('Settings', () => {
       });
 
       suite('datastore settings', () => {
+        var target;
         var cols;
+        var page;
         var afterGetCall;
         var datastoreGetStub;
 
         setup(() => {
           cols = 3;
+          page = false;
+
           datastoreGetStub = sinon.stub(MockDatastore, 'get', id => {
+            var returnData;
+            var returnObject = {
+              then: callback => {
+                callback(returnData);
+                if (id === target) {
+                  afterGetCall();
+                }
+              }
+            };
+
             switch (id) {
             case 'grid.cols':
-              return { then: callback => { callback(cols); afterGetCall(); } };
+              returnData = cols;
+              break;
+
+            case 'grid.paging':
+              returnData = page;
+              break;
             }
+            return returnObject;
           });
         });
 
@@ -97,6 +120,7 @@ suite('Settings', () => {
         test('restores columns setting', done => {
           var settings;
 
+          target = 'grid.cols';
           afterGetCall = () => {
             try {
               assert.isFalse(settings.small);
@@ -120,6 +144,7 @@ suite('Settings', () => {
         test('responds to columns setting change', done => {
           var settings;
 
+          target = 'grid.cols';
           afterGetCall = () => {
             try {
               assert.isFalse(settings.small);
@@ -143,6 +168,58 @@ suite('Settings', () => {
 
           settings = new Settings();
         });
+
+        test('restores paging setting', done => {
+          var settings;
+
+          target = 'grid.paging';
+          afterGetCall = () => {
+            try {
+              assert.isFalse(settings.scrollSnapping);
+            } catch(e) {
+              done(e);
+            }
+
+            afterGetCall = () => {
+              done(() => {
+                assert.isTrue(settings.scrollSnapping);
+              });
+            };
+
+            page = true;
+            settings = new Settings();
+          };
+
+          settings = new Settings();
+        });
+
+        test('responds to paging setting change', done => {
+          var settings;
+
+          target = 'grid.paging';
+          afterGetCall = () => {
+            try {
+              assert.isFalse(settings.scrollSnapping);
+            } catch(e) {
+              done(e);
+            }
+
+            var dispatchEventStub = sinon.stub(window, 'dispatchEvent');
+
+            afterGetCall = () => {
+              done(() => {
+                assert.isTrue(dispatchEventStub.called);
+                assert.isTrue(settings.scrollSnapping);
+                dispatchEventStub.restore();
+              });
+            };
+
+            page = true;
+            MockDatastore._cb({ id: 'grid.paging' });
+          };
+
+          settings = new Settings();
+        });
       });
     });
   });

apps/settings/elements/developer.html

@@ -252,6 +252,11 @@ <h2 data-l10n-id="debug"></h2>
             <label data-l10n-id="view-source"></label>
           </gaia-checkbox>
         </li>
+        <li>
+          <gaia-checkbox class="homescreen-paging">
+            <label data-l10n-id="homescreen-paging"></label>
+          </gaia-checkbox>
+        </li>
         <li>
           <button class="ftuLauncher" data-l10n-id="launch-ftu"></button>
         </li>

apps/settings/js/panels/developer/developer.js

@@ -10,6 +10,7 @@ define(function(require) {
   var AppsCache = require('modules/apps_cache');
   var ScreenLayout = require('shared/screen_layout');
   var SettingsCache = require('modules/settings_cache');
+  var HomescreenSettings = require('shared/homescreens/homescreen_settings');
 
   const DEVTOOLS_UNRESTRICTED_KEY = 'devtools.unrestricted';
 
@@ -56,6 +57,26 @@ define(function(require) {
         // disable button if mozPower is undefined or can't be used
         this._elements.resetSwitch.disabled = true;
       }
+
+      // Listen to home screen paging setting
+      HomescreenSettings.addEventListener('updated', e => {
+        var prop = e.target;
+        if (prop.name === 'grid.paging') {
+          this._homescreenPagingEnabled = prop.value;
+          this._elements.homescreenPaging.checked = prop.value;
+        }
+      });
+
+      // Listen to checked/unchecked
+      this._elements.homescreenPaging.addEventListener('change', () => {
+        this._setHomescreenPaging(this._elements.homescreenPaging.checked);
+      });
+
+      // Set the default value.
+      HomescreenSettings.get('grid.paging').then(value => {
+        this._homescreenPagingEnabled = value;
+        this._elements.homescreenPaging.checked = value;
+      });
     },
 
     /**
@@ -144,6 +165,13 @@ define(function(require) {
         return;
       }
       power.factoryReset(reason);
+    },
+
+    _setHomescreenPaging: function d__setHomescrenPaging(paging) {
+      if (this._homescreenPagingEnabled === paging) {
+        return;
+      }
+      HomescreenSettings.put('grid.paging', paging);
     }
   };
 

apps/settings/js/panels/developer/panel.js

@@ -16,7 +16,8 @@ define(function(require) {
           resetSwitch: panel.querySelector('.reset-devtools'),
           ftuLauncher: panel.querySelector('.ftuLauncher'),
           softwareHomeButton: panel.querySelector('.software-home-button'),
-          homegesture: panel.querySelector('.homegesture')
+          homegesture: panel.querySelector('.homegesture'),
+          homescreenPaging: panel.querySelector('.homescreen-paging')
         };
         developer.init(elements);
       }

apps/settings/locales/settings.en-US.properties

@@ -1299,6 +1299,7 @@ multi-screen=Multi-Screen
 verbose-app-permissions=Verbose App Permissions
 pinning-the-web=Enable Pinning the Web
 view-source=Enable View Source Gesture
+homescreen-paging=Enable Home Screen Paging
 window-management=Window Management
 # LOCALIZATION NOTE: this string is in developer settings and reset also enables
 # full DevTools access.

apps/settings/test/unit/_developer.html

@@ -10,6 +10,11 @@
         <label data-l10n-id="home-gesture"></label>
       </gaia-checkbox>
     </li>
+    <li>
+      <gaia-checkbox class="homescreen-paging">
+        <label data-l10n-id="homescreen-paging"></label>
+      </gaia-checkbox>
+    </li>
   </ul>
   <ul>
     <li>

apps/settings/test/unit/panels/developer/developer_test.js

@@ -12,14 +12,16 @@ suite('Developer > ', function() {
     'shared_mocks/mock_screen_layout',
     'unit/mock_settings_cache',
     'shared_mocks/mock_navigator_moz_power',
-    'panels/developer/developer'
+    'panels/developer/developer',
+    'unit/mock_homescreen_settings'
   ];
   var maps = {
     'panels/developer/developer': {
       'modules/dialog_service': 'MockDialogService',
       'modules/apps_cache': 'unit/mock_apps_cache',
       'shared/screen_layout': 'shared_mocks/mock_screen_layout',
-      'modules/settings_cache': 'unit/mock_settings_cache'
+      'modules/settings_cache': 'unit/mock_settings_cache',
+      'shared/homescreens/homescreen_settings': 'unit/mock_homescreen_settings'
     }
   };
   var developer, realMozPower, mozPower, dialogService, settingsCache;
@@ -52,7 +54,8 @@ suite('Developer > ', function() {
         resetSwitch: panel.querySelector('.reset-devtools'),
         ftuLauncher: panel.querySelector('.ftuLauncher'),
         softwareHomeButton: panel.querySelector('.software-home-button'),
-        homegesture: panel.querySelector('.homegesture')
+        homegesture: panel.querySelector('.homegesture'),
+        homescreenPaging: panel.querySelector('.homescreen-paging')
       });
       done();
     });