b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
447 lines
17 KiB
JavaScript
447 lines
17 KiB
JavaScript
'use strict';
|
|
/* global Service, UtilityTrayMotion, TouchForwarder */
|
|
|
|
(function(exports) {
|
|
|
|
/**
|
|
* The utility tray (the draggable drawer at the top of the screen, providing
|
|
* easy access to notifications and quick settings) is composed of two classes:
|
|
*
|
|
* UtilityTrayMotion, managing the scrolling and snapping behavior, and
|
|
* UtilityTray, representing the state of the UtilityTray.
|
|
*
|
|
* NOTE: The UtilityTray and statusbar interact differently in fullscreen modes.
|
|
* There are two kinds of fullscreen modes:
|
|
*
|
|
* - "fullscreen" FxOS Apps
|
|
* - window.requestFullScreen() interactions
|
|
*
|
|
* In both of these fullscreen modes, the utility tray does NOT swipe down
|
|
* immediately. Instead, the first swipe down from the top (via #top-panel)
|
|
* triggers the AppStatusbar to show; then, a second swipe is handled by
|
|
* UtilityTrayMotion to show the utility tray.
|
|
*
|
|
* The expected behavior of this is illustrated in the following video, where
|
|
* the following scenarios are tested:
|
|
*
|
|
* https://youtu.be/57v25D94zFY
|
|
*
|
|
* 1. No app (first swipe triggers UtilityTray)
|
|
* 2. Fullscreen Gaia app (first swipe triggers Statusbar, second UtilityTray)
|
|
* 3. requestFullScreen app (first swipe Statusbar, second UtilityTray)
|
|
*/
|
|
exports.UtilityTray = {
|
|
name: 'UtilityTray',
|
|
|
|
debug: 0 ? console.log.bind(console, '[UtilityTray]') : () => {},
|
|
|
|
shown: false,
|
|
|
|
overlay: document.getElementById('utility-tray'),
|
|
motionElement: document.getElementById('utility-tray-motion'),
|
|
notifications: document.getElementById('utility-tray-notifications'),
|
|
statusbar: document.getElementById('statusbar'),
|
|
statusbarIcons: document.getElementById('statusbar-icons'),
|
|
topPanel: document.getElementById('top-panel'),
|
|
ambientIndicator: document.getElementById('ambient-indicator'),
|
|
grippy: document.getElementById('utility-tray-grippy'),
|
|
invisibleGripper: document.getElementById('tray-invisible-gripper'),
|
|
container: document.getElementById('desktop-notifications-container'),
|
|
notificationsContainer: document.getElementById('notifications-container'),
|
|
nestedScrollInterceptor:
|
|
document.getElementById('notifications-nested-scroll-interceptor'),
|
|
notificationTitle: document.getElementById('notification-some'),
|
|
footer: document.getElementById('utility-tray-footer'),
|
|
footerContainer: document.getElementById('tray-footer-container'),
|
|
screen: document.getElementById('screen'),
|
|
EVENT_PREFIX: 'utilitytray',
|
|
|
|
publish: function(evtName) {
|
|
window.dispatchEvent(new CustomEvent(this.EVENT_PREFIX + evtName, {
|
|
detail: this
|
|
}));
|
|
},
|
|
|
|
isActive: function() {
|
|
return this.shown;
|
|
},
|
|
|
|
focus: function() {},
|
|
blur: function() {},
|
|
|
|
/**
|
|
* Update the max-height of the notifications container to ensure it doesn't
|
|
* overlap with the (position: fixed) footer.
|
|
*/
|
|
recalculateNotificationsContainerHeight() {
|
|
this.notificationsContainer.style.maxHeight =
|
|
(this.footerContainer.offsetTop -
|
|
this.notificationsContainer.offsetTop) + 'px';
|
|
|
|
// Nested scroll momentum typically propagates across parent containers.
|
|
// However, if the notifications container is scrollable, we do *not* want
|
|
// its scroll momentum to propagate to the Utility Tray itself.
|
|
//
|
|
// In Gecko, scroll momentum does *not* propagate through a scrollable
|
|
// container whose content isn't large enough to require it to actually
|
|
// scroll. (I'm not sure if this is a feature or a bug.) In any case, we've
|
|
// inserted `nestedScrollInterceptor` in between the two scrollable areas,
|
|
// and by setting 'overflow: scroll', we can conditionally interrupt the
|
|
// scroll momentum when notifications-container is scrollable.
|
|
// See <https://bugzil.la/1209387>.
|
|
var notificationsCanScroll = (this.notificationsContainer.scrollTopMax > 0);
|
|
this.nestedScrollInterceptor.style.overflowY =
|
|
(notificationsCanScroll ? 'scroll' : 'hidden');
|
|
},
|
|
|
|
toggleFooterDisplay() {
|
|
// If we're nearly fully open, deploy the footer; due to overscroll effects,
|
|
// waiting until the scrolling has stopped completely makes the footer
|
|
// appear sluggish.
|
|
var shouldShow =
|
|
(this.motion.percentVisible === 1) ||
|
|
(this.motion.state === 'opening' && this.motion.percentVisible > 0.95);
|
|
this.footer.classList.toggle('animate-in', shouldShow);
|
|
this.footer.classList.toggle('animate-out', !shouldShow);
|
|
},
|
|
|
|
init: function ut_init() {
|
|
|
|
// Prepare the tray's motion behavior.
|
|
this.motion = new UtilityTrayMotion(this.motionElement);
|
|
this.motion.el.addEventListener('tray-motion-state', this);
|
|
this.motion.el.addEventListener('tray-motion-footer-position', this);
|
|
this.motion.el.classList.remove('utility-tray-loading');
|
|
|
|
// The footer size (containing the media player and cost-control-widget)
|
|
// is variable and difficult to compute with CSS in a maintainable way,
|
|
// especially when we account for future addons or other modifications to
|
|
// the tray. Instead, we calculate the desired height on-the-fly, by
|
|
// observing when key footer elements change relevant state.
|
|
// Ideally, we would observe the whole footer for DOM changes, to make it
|
|
// easier for addon developers, but for now we just observe the relevant
|
|
// changes to the only two variable elements:
|
|
var observer = new MutationObserver(
|
|
this.recalculateNotificationsContainerHeight.bind(this));
|
|
// MediaPlaybackWidget does not currently emit any events when it changes;
|
|
// it is assumed here that MediaPlaybackWidget has a fixed height; here we
|
|
// just listen to the attribute "hidden"'s state.
|
|
observer.observe(document.getElementById('media-playback-container'), {
|
|
attributes: true,
|
|
attributeFilter: ['hidden']
|
|
});
|
|
// It's not clear that the cost control widget ever changes or hides
|
|
// (much of its behavior happens in an iframe), but for completeness:
|
|
observer.observe(document.getElementById('cost-control-widget'), {
|
|
subtree: true,
|
|
childList: true
|
|
});
|
|
// If the notifications container becomes scrollable, we may conditionally
|
|
// update the behavior of this.nestedScrollInterceptor. (We can't just
|
|
// intercept a "notification emitted" event, because there isn't a unified
|
|
// event to listen for.)
|
|
observer.observe(this.notificationsContainer, {
|
|
subtree: true,
|
|
childList: true
|
|
});
|
|
this.recalculateNotificationsContainerHeight();
|
|
|
|
// This is required to prevent b2g-desktop from
|
|
// stealing focus from form fields when the
|
|
// #top-panel is touched. Remove this line if/when
|
|
// b2g-desktop stops disptaching mouse events.
|
|
this.topPanel.addEventListener('mousedown', e => e.preventDefault());
|
|
this.invisibleGripper.addEventListener(
|
|
'mousedown', e => e.preventDefault());
|
|
|
|
window.addEventListener('screenchange', this);
|
|
window.addEventListener('resize', this);
|
|
window.addEventListener('emergencyalert', this);
|
|
window.addEventListener('attentionopened', this);
|
|
window.addEventListener('attentionwill-become-active', this);
|
|
window.addEventListener('launchapp', this);
|
|
window.addEventListener('displayapp', this);
|
|
window.addEventListener('appopening', this);
|
|
window.addEventListener('activityopening', this);
|
|
window.addEventListener('cardviewbeforeshow', this);
|
|
window.addEventListener('sheets-gesture-begin', this);
|
|
|
|
// Listen for screen reader edge gestures
|
|
window.addEventListener('mozChromeEvent', this);
|
|
|
|
// Firing when the IME switcher shows/hides.
|
|
window.addEventListener('imemenushow', this);
|
|
|
|
window.addEventListener('simlockshow', this);
|
|
|
|
// Firing when user selected a new keyboard or canceled it.
|
|
window.addEventListener('keyboardchanged', this);
|
|
window.addEventListener('keyboardchangecanceled', this);
|
|
|
|
this.motion.el.addEventListener('wheel', this);
|
|
this.statusbar.addEventListener('wheel', this);
|
|
|
|
this.invisibleGripper.addEventListener('click',
|
|
this._forwardInvisibleGripperClick.bind(this));
|
|
|
|
Service.request('registerHierarchy', this);
|
|
|
|
Service.register('makeAmbientIndicatorActive', this);
|
|
Service.register('makeAmbientIndicatorInactive', this);
|
|
Service.register('hide', this);
|
|
Service.register('show', this);
|
|
Service.register('updateNotificationCount', this);
|
|
Service.registerState('shown', this);
|
|
},
|
|
|
|
setHierarchy: function() {
|
|
return false;
|
|
},
|
|
|
|
_handle_home: function() {
|
|
if (this.isActive()) {
|
|
this.hide();
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
respondToHierarchyEvent: function(evt) {
|
|
if (this['_handle_' + evt.type]) {
|
|
return this['_handle_' + evt.type](evt);
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
|
|
hide(immediately) {
|
|
if (this.motion.state === 'open' || this.motion.state === 'opening') {
|
|
this.motion.close(immediately);
|
|
}
|
|
},
|
|
|
|
show(immediately) {
|
|
if (this.motion.state === 'closed' || this.motion.state === 'closing') {
|
|
this.motion.open(immediately);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handle the tray changing state, e.g. from "opening" to "open". The possible
|
|
* states are "closed", "opening", "open", and "closing", as noted in
|
|
* `utility_tray_motion.js`. We only receive state change notifications if
|
|
* the state actually changed from one to another.
|
|
*
|
|
* For historical reasons, we emit many different events; some could be
|
|
* condensed in the future if desired.
|
|
*
|
|
* @param {string} state
|
|
* @param {string} previousState
|
|
*/
|
|
handleTrayStateChange: function(state, previousState) {
|
|
// Update the state first, so that events receive the proper new state.
|
|
this.shown = (state === 'open');
|
|
|
|
if (state === 'opening') {
|
|
this.recalculateNotificationsContainerHeight();
|
|
if (!this.screen.classList.contains('utility-tray')) {
|
|
setTimeout(() => {
|
|
// If the active app was tracking touches it won't get any more events
|
|
// because of the "pointer-events: none" we're adding. Send a
|
|
// "touchcancel" event accordingly. This happens in a timeout to
|
|
// prevent interrupting the current event loop, in case we arrive here
|
|
// from an existing touch handler.
|
|
var touch = this.motion.currentTouch;
|
|
var app = Service.query('getTopMostWindow');
|
|
if (touch && app && app.config && app.config.oop) {
|
|
app.iframe.sendTouchEvent('touchcancel', [touch.identifier],
|
|
[touch.pageX], [touch.pageY],
|
|
[touch.radiusX], [touch.radiusY],
|
|
[touch.rotationAngle], [touch.force],
|
|
1, 0);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.publish('-overlayopening');
|
|
window.dispatchEvent(new CustomEvent('utilitytraywillshow'));
|
|
} else if (state === 'closing') {
|
|
window.dispatchEvent(new CustomEvent('utilitytraywillhide'));
|
|
} else if (state === 'closed') {
|
|
window.dispatchEvent(new CustomEvent('utility-tray-overlayclosed'));
|
|
window.dispatchEvent(new CustomEvent('utilitytrayhide'));
|
|
this.publish('-deactivated');
|
|
} else if (state === 'open') {
|
|
window.dispatchEvent(new CustomEvent('utility-tray-overlayopened'));
|
|
window.dispatchEvent(new CustomEvent('utilitytrayshow'));
|
|
this.publish('-activated');
|
|
}
|
|
|
|
// If the screen is locked, the tray should remain invisible.
|
|
if ((state === 'opening' || state === 'open') &&
|
|
Service.query('locked')) {
|
|
this.hide(true);
|
|
}
|
|
|
|
if (state === 'opening' && previousState === 'closing') {
|
|
window.dispatchEvent(new CustomEvent('utility-tray-abortclose'));
|
|
} else if (state === 'closing' && previousState === 'opening') {
|
|
window.dispatchEvent(new CustomEvent('utility-tray-abortopen'));
|
|
}
|
|
|
|
this.overlay.setAttribute('aria-hidden', state !== 'open');
|
|
this.screen.classList.toggle('utility-tray', this.shown);
|
|
this.screen.classList.toggle('utility-tray-in-transition',
|
|
state === 'opening' || state === 'closing');
|
|
},
|
|
|
|
handleEvent: function ut_handleEvent(evt) {
|
|
var detail = evt.detail;
|
|
|
|
switch (evt.type) {
|
|
case 'resize':
|
|
this.recalculateNotificationsContainerHeight();
|
|
break;
|
|
case 'tray-motion-state':
|
|
this.handleTrayStateChange(evt.detail.value, evt.detail.previousValue);
|
|
this.toggleFooterDisplay();
|
|
break;
|
|
case 'tray-motion-footer-position':
|
|
this.toggleFooterDisplay();
|
|
break;
|
|
case 'cardviewbeforeshow':
|
|
this.hide(true);
|
|
break;
|
|
case 'attentionopened':
|
|
case 'attentionwill-become-active':
|
|
case 'emergencyalert':
|
|
case 'displayapp':
|
|
case 'keyboardchanged':
|
|
case 'keyboardchangecanceled':
|
|
case 'simlockshow':
|
|
case 'appopening':
|
|
case 'activityopening':
|
|
case 'sheets-gesture-begin':
|
|
case 'imemenushow':
|
|
this.hide();
|
|
break;
|
|
|
|
case 'launchapp':
|
|
// We don't want background apps to trigger this event, otherwise,
|
|
// utility tray will be closed accidentally.
|
|
if (detail && detail.stayBackground) {
|
|
return;
|
|
}
|
|
|
|
var findMyDevice =
|
|
window.location.origin.replace('system', 'findmydevice');
|
|
|
|
var blacklist = [findMyDevice];
|
|
|
|
var isBlockedApp = blacklist.some(function(blockedApp) {
|
|
return blockedApp === detail.origin;
|
|
});
|
|
|
|
if (!isBlockedApp) {
|
|
this.hide();
|
|
}
|
|
break;
|
|
|
|
case 'screenchange':
|
|
// If the screen goes black, hide the tray.
|
|
if (!evt.detail.screenEnabled) {
|
|
this.hide(true);
|
|
}
|
|
break;
|
|
|
|
case 'wheel':
|
|
evt.preventDefault();
|
|
// When the user swipes up/down using the "wheel" accessibility gesture,
|
|
// open and/or close the tray accordingly. (Two-finger swipe up/down.)
|
|
if (evt.deltaMode === evt.DOM_DELTA_PAGE && evt.deltaY) {
|
|
if (this.motion.state === 'open' && evt.deltaY > 0) {
|
|
this.hide(true);
|
|
} else if (this.motion.state === 'closed' && evt.deltaY < 0) {
|
|
this.show(true);
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'mozChromeEvent':
|
|
if (evt.detail.type !== 'accessibility-control') {
|
|
break;
|
|
}
|
|
var eventType = JSON.parse(evt.detail.details).eventType;
|
|
if (eventType === 'edge-swipe-down' &&
|
|
!Service.query('locked') &&
|
|
!Service.query('isFtuRunning')) {
|
|
if (this.motion.state === 'open') {
|
|
this.hide(true);
|
|
} else {
|
|
this.show(true);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* When we receive a click on the transparent gripper, forward the click
|
|
* to the element below.
|
|
*
|
|
* Normally, when you swipe down from the top of the screen, your finger
|
|
* latches onto the transparent gripper element resting at the top of the
|
|
* screen. This initiates a scroll, and pulls the tray down.
|
|
*
|
|
* But we only need that element to trigger scrolling, not tapping. We want
|
|
* clicks to pass through the transparent gripper to the app below.
|
|
*
|
|
* NOTE: Ideally, we would want a long-press gesture to also pass through
|
|
* the element, however we cannot forward the long-press gesture to the
|
|
* underlying element (HTMLIFrameElement.sendTouchEvent() happens too late
|
|
* in the pipeline to trigger a long-press, e.g. a copy/paste operation).
|
|
* See <https://groups.google.com/forum/#!topic/mozilla.dev.fxos/1Kh8RrK7QWI>.
|
|
*/
|
|
_forwardInvisibleGripperClick(evt) {
|
|
// The most precise way to forward clicks is to use
|
|
// document.elementFromPoint(), but that causes a reflow.
|
|
// Instead, just use a static hit test area for now.
|
|
var app = Service.query('getTopMostWindow');
|
|
if (!app) {
|
|
return;
|
|
}
|
|
var STATUSBAR_HIT_AREA_HEIGHT = 30;
|
|
var STATUSBAR_HIT_AREA_WIDTH = window.innerWidth / 2;
|
|
|
|
if (evt.clientY < STATUSBAR_HIT_AREA_HEIGHT &&
|
|
evt.clientX < STATUSBAR_HIT_AREA_WIDTH &&
|
|
app.appChrome.urlbar) {
|
|
var forwarder = new TouchForwarder(app.appChrome.urlbar);
|
|
forwarder.forward(evt);
|
|
}
|
|
},
|
|
|
|
updateNotificationCount: function ut_updateNotificationCount() {
|
|
var count = this.notifications.
|
|
querySelectorAll('#desktop-notifications-container .notification, ' +
|
|
'.fake-notification.displayed').length;
|
|
|
|
navigator.mozL10n.setAttributes(this.notificationTitle,
|
|
count ? 'statusbarNotifications' : 'statusbarNoNotifications', {
|
|
n: count
|
|
});
|
|
},
|
|
|
|
makeAmbientIndicatorActive: function ut_makeAmbientIndicatorActive() {
|
|
this.ambientIndicator.classList.add('active');
|
|
},
|
|
|
|
makeAmbientIndicatorInactive: function ut_makeAmbientIndicatorInactive() {
|
|
this.ambientIndicator.classList.remove('active');
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
})(window); // end function wrapper
|