Merge pull request #14360 from samjoch/bug-924624-UserStoryAddEdgeGes…

…turesToFTETutorial

Bug 924624 - [User story] Add edge gestures to FTE Tutorial r=arcturus

apps/communications/ftu/css/style.css

@@ -144,10 +144,9 @@ a {
   z-index: 100;
 }
 
-.step-state:before {
+.step-state-bar {
   content: "";
   height: 0.3rem;
-  width: calc(100% / 7);
   position: absolute;
   top: 50%;
   left: 0;
@@ -156,43 +155,6 @@ a {
   transition: all 0.35s cubic-bezier(0.000, 1.000, 0.535, 1.110);
 }
 
-.less-steps.step-state:before {
-  width: calc(100% / 6) !important;
-}
-
-/* STATES */
-.step-1.step-state:before {
-  transform: translateX(0);
-}
-
-.step-2.step-state:before {
-  transform: translateX(75%);
-}
-
-.step-3.step-state:before {
-  transform: translateX(150%);
-}
-
-.step-4.step-state:before {
-  transform: translateX(225%);
-}
-
-.step-5.step-state:before {
-  transform: translateX(300%);
-}
-
-.step-6.step-state:before {
-  transform: translateX(400%);
-}
-
-.step-7.step-state:before {
-  transform: translateX(500%);
-}
-
-.step-8.step-state:before {
-  transform: translateX(600%);
-}
-
 /*
   Header conditional button
 */

apps/communications/ftu/index.html

@@ -204,6 +204,7 @@ <h1 id="sim-info-header" data-l10n-id="simManager">SIM Manager</h1>
       <h1 id="main-title"></h1>
     </header>
     <ol id="progress-bar" class="step-state">
+      <li id="progress-bar-state" class="step-state-bar"></li>
       <li>languages</li>
       <li>SIM_mandatory</li>
       <li>3g</li>
@@ -620,6 +621,7 @@ <h2 data-l10n-id="joinTutorial">
 
   <section id="tutorial-screen" class="tutorial-screen-base" role="region">
     <ol id="tutorial-progress" class="step-state">
+      <li id="tutorial-progress-state" class="step-state-bar"></li>
       <li>step 1</li>
       <li>step 2</li>
       <li>step 3</li>

apps/communications/ftu/js/navigation.js

@@ -135,21 +135,15 @@ var Navigation = {
     window.open(href);
   },
 
-  getProgressBarClassName: function n_getProgressBarClassName() {
+  getProgressBarState: function n_getProgressBarState() {
     // Manage step state (dynamically change)
-    var className = 'step-state step-';
-    if (this.skipped && this.currentStep > 2) {
-      className += (this.currentStep - 1) + ' less-steps';
-    } else {
-      className += this.currentStep;
-    }
-
-    return className;
+    return (this.skipped && this.currentStep > 2) ? this.currentStep - 2 :
+      this.currentStep - 1;
   },
 
   handleEvent: function n_handleEvent(event) {
     var actualHash = window.location.hash;
-    var className = this.getProgressBarClassName();
+    UIManager.progressBar.classList.remove('hidden');
     switch (actualHash) {
       case '#languages':
         UIManager.mainTitle.innerHTML = _('language');
@@ -207,13 +201,15 @@ var Navigation = {
       case '#about-your-privacy':
       case '#sharing-performance-data':
         UIManager.mainTitle.innerHTML = _('aboutBrowser');
-        // override the className here
-        className = 'hidden';
+        UIManager.progressBar.classList.add('hidden');
         UIManager.navBar.classList.add('back-only');
         break;
     }
 
-    UIManager.progressBar.className = className;
+    UIManager.progressBarState.style.width =
+      'calc(100% / ' + numSteps + ')';
+    UIManager.progressBarState.style.transform =
+      'translateX(' + (this.getProgressBarState() * 100) + '%)';
 
     // If SIM card is mandatory, we hide the button skip
     if (this.simMandatory) {

apps/communications/ftu/js/tutorial.js

@@ -2,7 +2,6 @@
 
 var Tutorial = {
   tutorialSteps: {},
-  numTutorialSteps: null,
   currentStep: 1,
   imagesLoaded: [],
   layout: 'tiny',
@@ -11,7 +10,6 @@ var Tutorial = {
         ScreenLayout.getCurrentLayout() : 'tiny';
 
     this.tutorialSteps = TutorialSteps.get();
-    this.numTutorialSteps = Object.keys(this.tutorialSteps).length;
 
     // register elements after dynamic properties got set
     this.initElements();
@@ -104,7 +102,47 @@ var Tutorial = {
   jumpToExitStep: function jumpToLastStep() {
     this.jumpTo(this.numTutorialSteps + 1);
   },
+  getSettingValue: function(step, cb) {
+    if (step > this._countSteps) {
+      cb();
+      return;
+    }
+    var settingKey = this.tutorialSteps[step].setting;
+    if (settingKey === undefined) {
+      this.getSettingValue(step + 1, cb);
+      return;
+    }
+    if (!navigator.mozSettings) {
+      return;
+    }
+    var req = navigator.mozSettings.createLock().get(settingKey);
+    var self = this;
+    req.onsuccess = function cb_getSettingValue() {
+      if (!req.result[settingKey]) {
+        delete self.tutorialSteps[step];
+      }
+      self.getSettingValue(step + 1, cb);
+    };
+    req.onerror = function err_getSettingValue() {
+      console.error('Cant retrieve', settingKey, 'value');
+    };
+  },
+  computeNumTutorialSteps: function computeNumTutorialSteps(cb) {
+    if (this.numTutorialSteps) {
+      cb();
+      return;
+    }
+    this._countSteps = Object.keys(this.tutorialSteps).length;
+    this.getSettingValue(1, function() {
+      var finalCount = Object.keys(this.tutorialSteps).length;
+      this.numTutorialSteps = finalCount;
+      cb();
+    }.bind(this));
+  },
   manageStep: function manageStep() {
+    this.computeNumTutorialSteps(this.onNumStepsReady.bind(this));
+  },
+  onNumStepsReady: function() {
     // If first step, we can't go back from here
     if (this.currentStep > 1) {
       this.tutorialNavBar.classList.remove('forward-only');
@@ -131,8 +169,10 @@ var Tutorial = {
         };
       }
     } else {
-      UIManager.tutorialProgress.className =
-        'step-state step-' + this.currentStep;
+      UIManager.tutorialProgressState.style.width =
+        'calc(100% / ' + this.numTutorialSteps + ')';
+      UIManager.tutorialProgressState.style.transform =
+        'translate(' + ((this.currentStep - 1) * 100) + '%)';
       window.location.hash = this.tutorialSteps[this.currentStep].hash;
     }
   }

apps/communications/ftu/js/tutorial_steps.js

@@ -41,7 +41,7 @@
   TutorialSteps.tiny = {};
   TutorialSteps.large = {};
 
-  TutorialSteps.tiny.stepsCount = 5 + 1;
+  TutorialSteps.tiny.stepsCount = 6 + 1;
   TutorialSteps.large.stepsCount = 4 + 1;
 
   for (var supportLayout in TutorialSteps) {
@@ -64,6 +64,12 @@
         key: 'tutorial-step' + stepIndex + '-' + supportLayout + l10nKeySuffix,
         image: 'css/images/tutorial/' + stepIndex + imagePathSuffix
       };
+      // Add setting key to the last tutorial step
+      // You can add a 'setting' key to add a condition to the step
+      if (stepIndex === TutorialSteps[supportLayout].stepsCount - 1) {
+        TutorialSteps[supportLayout][stepIndex]['setting'] =
+          'edgesgesture.enabled';
+      }
     }
     delete TutorialSteps[supportLayout].stepsCount;
   }

apps/communications/ftu/js/ui.js

@@ -10,6 +10,7 @@ var UIManager = {
     'splash-screen',
     'activation-screen',
     'progress-bar',
+    'progress-bar-state',
     'finish-screen',
     'nav-bar',
     'main-title',
@@ -85,6 +86,7 @@ var UIManager = {
     // Tutorial
     'tutorial-screen',
     'tutorial-progress',
+    'tutorial-progress-state',
     'lets-go-button',
     'skip-tutorial-button',
     // Privacy Settings

apps/communications/ftu/locales/ftu.en-US.properties

@@ -264,6 +264,7 @@ tutorial-step2-tiny = Tap and hold on an icon to delete or move it.
 tutorial-step3-tiny = Enter any keyword or topic and your phone will instantly adapt.
 tutorial-step4-tiny = Swipe down to access recent notifications, credit information and settings.
 tutorial-step5-tiny = Tap and hold the home button to browse and close recent apps.
+tutorial-step6-tiny = Swipe from the side of the screen to move back and forth between recent apps.
 
 tutorial-step1-large-2 = Swipe down from top to access recent notifications, credit information and settings.
 tutorial-step2-large-2 = Swipe left or right to discover new apps on home screen.

apps/communications/ftu/test/unit/mock_ui_manager.js

@@ -55,6 +55,7 @@ var MockUIManager = {
     // Tutorial
     'tutorial-screen',
     'tutorial-progress',
+    'tutorial-progress-state',
     'lets-go-button',
     'skip-tutorial-button',
     // Navigation

apps/communications/ftu/test/unit/tutorial_test.js

@@ -63,6 +63,7 @@ suite('Tutorial >', function() {
 
     setup(function() {
       Tutorial.init();
+      Tutorial.numTutorialSteps = Object.keys(TutorialSteps.tiny).length;
     });
 
     test('forward', function() {
@@ -91,6 +92,7 @@ suite('Tutorial >', function() {
     setup(function() {
       ScreenLayout.setDevice('large');
       Tutorial.init();
+      Tutorial.numTutorialSteps = Object.keys(TutorialSteps.large).length;
     });
 
     test('forward', function() {