Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #33855 from Fischer-L/bug_1232584-update-FTE-for-u…
Browse files Browse the repository at this point in the history 
…sage-metrics

Bug 1232584 - [TV] FTE for usage metrics specs update for the new legal approved terms, r=rex
  • Loading branch information
@Fischer-L
Fischer-L committed Mar 14, 2016
2 parents d52f7ec + d9177aa commit 19d23ce
Show file tree
Hide file tree
Showing 4 changed files with 339 additions and 105 deletions.
88 changes: 72 additions & 16 deletions tv_apps/tv-ftu/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,25 +37,81 @@

<body>

<article id="app-usage-slide" class="slide">
<section class="slide-section top">
<img id="app-usage-slide-logo" src="style/images/firefox_logo.png">
<article id="app-usage-page" class="page hidden">
<section class="page-section logo-section">
<img class="firefox-logo" src="style/images/firefox_logo.png">
<span class="txt-large txt-center" data-l10n-id="welcome"></span>
</section>
<section id="app-usage-terms-section" class="slide-section mid" tabindex="-1">
<div id="app-usage-terms">
<p id="app-usage-terms-title" class="slide-description txt-large txt-center" data-l10n-id="about-firefox-os"></p>
<p class="slide-description txt-mid" data-l10n-id="welcome-to-fx-os"></p>
<p class="slide-description txt-mid" data-l10n-id="mozilla-cares-privacy"></p>
<p class="slide-description txt-mid" data-l10n-id="initial-activation"></p>
<p class="slide-description txt-mid" data-l10n-id="app-usage"></p>
<p class="slide-description txt-mid" data-l10n-id="tv-is-created-by-several-parties"></p>
<p class="slide-description txt-mid txt-center" data-l10n-id="send-data"></p>
<section class="page-section content-section" tabindex="-1">
<div class="page-content">
<p class="page-description" data-l10n-id="fxos-is-free"></p>
<p class="page-description" data-l10n-id="app-usage-notice"></p>
<p class="page-description" data-l10n-id="only-cover-mozilla"></p>
<p class="page-description txt-center" data-l10n-id="send-to-mozilla"></p>
</div>
</section>
<section class="slide-section bottom">
<div id="app-usage-arrow-icon" data-icon="arrow-down"></div>
<smart-button id="app-usage-no-button" type="rounded-corner-text" data-l10n-id="no"></smart-button>
<smart-button id="app-usage-yes-button" class="primary" type="rounded-corner-text" data-l10n-id="yes"></smart-button>
<section class="page-section button-section">
<div class="arrow-icon hidden" data-icon="arrow-down"></div>
<smart-button id="app-usage-page-no-button" class="page-button" type="rounded-corner-text" data-l10n-id="no"></smart-button>
<smart-button id="app-usage-page-yes-button" class="primary page-button page-default-button" type="rounded-corner-text" data-l10n-id="yes"></smart-button>
</section>
</article>

<article id="privacy-policy-page" class="page hidden">
<section class="page-section content-section" tabindex="-1">
<div class="page-content">
<div id="fxos-privacy-notice-content">
<p class="page-description txt-bold" data-l10n-id="privacy-notice"></p>
<p class="page-description" data-l10n-id="cares-about-your-privacy"></p>
<p class="page-description txt-bold" data-l10n-id="you-should-know"></p>
<p class="page-description" data-l10n-id="fxos-connects"></p>
<ul>
<li class="page-description" data-l10n-id="updates"></li>
<li class="page-description" data-l10n-id="initial-activation"></li>
<li class="page-description" data-l10n-id="app-usage"></li>
</ul>
<p class="page-description" data-l10n-id="only-cover-mozilla"></p>
</div>
<div id="moz-privacy-policy-content">
<p class="page-description txt-bold" data-l10n-id="privacy-policy"></p>
<p class="page-description" data-l10n-id="cares-privacy"></p>
<p class="page-description txt-bold" data-l10n-id="what-mean-by-personal-info"></p>
<p class="page-description" data-l10n-id="personal-info-means"></p>
<p class="page-description" data-l10n-id="non-personal-info"></p>
<p class="page-description" data-l10n-id="if-store-info"></p>
<p class="page-description txt-bold" data-l10n-id="how-we-learn"></p>
<p class="page-description" data-l10n-id="we-learn"></p>
<ul>
<li class="page-description" data-l10n-id="give-directly"></li>
<li class="page-description" data-l10n-id="we-collect"></li>
<li class="page-description" data-l10n-id="someone-tells"></li>
<li class="page-description" data-l10n-id="when-we-try"></li>
</ul>
<p class="page-description txt-bold" data-l10n-id="what-we-do"></p>
<p class="page-description" data-l10n-id="when-give-info"></p>
<p class="page-description txt-bold" data-l10n-id="when-we-share"></p>
<ul>
<li class="page-description" data-l10n-id="when-ask"></li>
<li class="page-description" data-l10n-id="for-processing"></li>
<li class="page-description" data-l10n-id="when-fulfilling"></li>
<li class="page-description" data-l10n-id="when-law-requires"></li>
<li class="page-description" data-l10n-id="when-necessary"></li>
<li class="page-description" data-l10n-id="if-changes"></li>
</ul>
<p class="page-description txt-bold" data-l10n-id="how-we-store"></p>
<p class="page-description" data-l10n-id="we-commit"></p>
<p class="page-description" data-l10n-id="no-longer-than-need"></p>
<p class="page-description txt-bold" data-l10n-id="what-should-know"></p>
<p class="page-description" data-l10n-id="we-are-global"></p>
<p class="page-description" data-l10n-id="if-under-13"></p>
<p class="page-description txt-bold" data-l10n-id="what-if-change"></p>
<p class="page-description" data-l10n-id="may-need-change"></p>
</div>
</div>
</section>
<section class="page-section button-section">
<div class="arrow-icon hidden" data-icon="arrow-down"></div>
<smart-button id="open-app-usage-page-button" class="primary page-button" type="rounded-corner-text" data-l10n-id="ok"></smart-button>
</section>
</article>

Expand Down
186 changes: 142 additions & 44 deletions tv_apps/tv-ftu/js/tv_ftu.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/* global evt, SettingsListener, KeyNavigationAdapter, SimpleKeyNavigation */
/* global evt, SettingsListener, KeyNavigationAdapter, SimpleKeyNavigation
*/
(function (exports) {
'use strict';

Expand All @@ -11,81 +12,178 @@ window.addEventListener('load', function() {
this.APP_USAGE_ENABLE_VALUE = true;
this.APP_USAGE_DISABLE_VALUE = false;

this._noButton =
document.getElementById('app-usage-no-button');
this._yesButton =
document.getElementById('app-usage-yes-button');
this._terms =
document.getElementById('app-usage-terms');
this._termsSection =
document.getElementById('app-usage-terms-section');
this._arrowIcon =
document.getElementById('app-usage-arrow-icon');
this._currentPage = null;
this._currentContentSection = null;
this._currentContent = null;
this._currentArrowIcon = null;
this._currentFocused = null;
this._currentNavigationType = null;

this.keyNavAdapter = new KeyNavigationAdapter();
this.keyNavAdapter.init();
this.keyNavAdapter.on('move', this.onKeyMove.bind(this));
this.keyNavAdapter.on('back-keyup', this.onBackKeyUp.bind(this));
this.keyNavAdapter.on('enter-keyup', this.onEnterKeyUp.bind(this));

this.buttonNav = new SimpleKeyNavigation();
this.buttonNav.start(
[this._noButton, this._yesButton],
SimpleKeyNavigation.DIRECTION.HORIZONTAL
);
this.buttonNav.on('focusChanged', (elem) => {
this.fire('focus', elem);
});
this.buttonNav.pause();

this._termsSection.focus();
this._currentFocused = this._termsSection;
this.keyNav = new SimpleKeyNavigation();
this.keyNav.start([], SimpleKeyNavigation.DIRECTION.HORIZONTAL);
this.keyNav.on('focusChanged', elem => this.fire('focus', elem));

// Special treatment for translation with links
var links = document.querySelectorAll(
'#app-usage-page p[data-l10n-id=fxos-is-free] > a');
links[0].setAttribute('tabindex', -1);
links[0].setAttribute('id', 'fxos-privacy-notice-link');
links[1].setAttribute('tabindex', -1);
links[1].setAttribute('id', 'moz-privacy-policy-link');

this.on('focus', this.onFocus.bind(this));
this.goToPage('app-usage-page');
},

goToPage: function (id) {
if (this._currentPage) {
this._currentPage.classList.add('hidden');
}
this._currentPage = document.getElementById(id);
this._currentArrowIcon = this._currentPage.querySelector('.arrow-icon');
this._currentContent = this._currentPage.querySelector('.page-content');
this._currentContentSection =
this._currentPage.querySelector('.content-section');
this._currentPage.classList.remove('hidden');

this._currentNavigationType = null;
this.changeNavigationType('buttons');
if (this.getContentUnscrolledHeight() > 0) {
this.changeNavigationType('unscrolled_content');
}
},

getContentUnscrolledHeight: function () {
var unscrolledHeight = this._currentContent.clientHeight -
this._currentContentSection.scrollTop -
this._currentContentSection.clientHeight;
return unscrolledHeight;
},

changeNavigationType: function (target) {
if (this._currentNavigationType !== target) {

this._currentNavigationType = target;
this._currentArrowIcon.classList.add('hidden');
this.keyNav.pause();

switch (target) {
case 'unscrolled_content':
this._currentContentSection.focus();
this._currentArrowIcon.classList.remove('hidden');
this.fire('focus', this._currentContentSection);
break;

case 'links':
this.keyNav.resume();
this.keyNav.updateList(Array.prototype.slice.call(
this._currentPage.querySelectorAll('a')));
break;

case 'buttons':
this.keyNav.resume();
this.keyNav.updateList(Array.prototype.slice.call(
this._currentPage.querySelectorAll('.page-button')));
var defaultBtn =
this._currentPage.querySelector('.page-default-button');
if (defaultBtn) {
this.keyNav.focusOn(defaultBtn);
}
break;
}
}
},

onFocus: function (elem) {
this._currentFocused = elem;
},

onKeyMove: function (key) {
switch (key) {
case 'up':
if (this._currentFocused !== this._termsSection) {
this.buttonNav.blur();
this.buttonNav.pause();
this._termsSection.focus();
this.fire('focus', this._termsSection);
this._arrowIcon.classList.remove('hidden');

switch (this._currentNavigationType) {
case 'unscrolled_content':
if (key === 'down' && this.getContentUnscrolledHeight() <= 0) {
this.changeNavigationType('buttons');
}
break;

case 'links':
// this.keyNav only handles
// the left/right key (horizontal key navigation)
// so we need extra handling of the up/down key here
if ((key === 'down' || key === 'right') &&
'moz-privacy-policy-link' === this._currentFocused.id) {
// If focus on the last link, moz-privacy-policy-link,
// then change navigation target to buttons
this.changeNavigationType('buttons');
} else if (key === 'up') {
this.keyNav.movePrevious();
} else if (key === 'down') {
this.keyNav.moveNext();
}
break;

case 'down':
if (this._currentFocused === this._termsSection) {
var unscrolledHeight = this._terms.clientHeight -
this._termsSection.scrollTop -
this._termsSection.clientHeight;
if (unscrolledHeight <= 0) {
this.buttonNav.resume();
this.buttonNav.focusOn(this._yesButton);
this._arrowIcon.classList.add('hidden');
case 'buttons':
if (key === 'up') {
if (this._currentContentSection.scrollTop > 0) {
this.changeNavigationType('unscrolled_content');
} else if (this._currentPage.querySelectorAll('a').length > 0) {
this.changeNavigationType('links');
}
}
break;
}
},

onEnterKeyUp: function () {
switch (this._currentFocused) {
case this._yesButton:
case this._noButton:
switch (this._currentFocused.id) {
case 'app-usage-page-no-button':
case 'app-usage-page-yes-button':
var setting = {};
if (this._currentFocused === this._yesButton) {
if (this._currentFocused.id === 'app-usage-page-yes-button') {
setting[this.APP_USAGE_ENABLE_KEY] = this.APP_USAGE_ENABLE_VALUE;
} else {
setting[this.APP_USAGE_ENABLE_KEY] = this.APP_USAGE_DISABLE_VALUE;
}
SettingsListener.getSettingsLock().set(setting);
window.close();
break;

case 'moz-privacy-policy-link':
case 'fxos-privacy-notice-link':
var privacySection =
document.querySelector('#privacy-policy-page > .content-section');
var mozPrivacy =
document.querySelector('#moz-privacy-policy-content');
var fxosPrivacy =
document.querySelector('#fxos-privacy-notice-content');

if (this._currentFocused.id === 'moz-privacy-policy-link') {
mozPrivacy.style.display = 'block';
fxosPrivacy.style.display = 'none';
} else {
mozPrivacy.style.display = 'none';
fxosPrivacy.style.display = 'block';
}
privacySection.scrollTo(0, 0);
this.goToPage('privacy-policy-page');
break;

case 'open-app-usage-page-button':
this.goToPage('app-usage-page');
break;
}
},

onBackKeyUp: function () {
if (this._currentPage.id !== 'app-usage-page') {
this.goToPage('app-usage-page');
}
}
});
Expand Down

0 comments on commit 19d23ce

Please sign in to comment.