remoting/webapp/crd/js/ui_mode.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview
   7  * Functions related to controlling the modal UI state of the app. UI states
   8  * are expressed as HTML attributes with a dotted hierarchy. For example, the
   9  * string 'host.shared' will match any elements with an associated attribute
  10  * of 'host' or 'host.shared', showing those elements and hiding all others.
  11  * Elements with no associated attribute are ignored.
  12  */
  13
  14 'use strict';
  15
  16 /** @suppress {duplicate} */
  17 var remoting = remoting || {};
  18
  19 /** @enum {string} */
  20 // TODO(jamiewalch): Move 'in-session' to a separate web-page so that the
  21 // 'home' state applies to all elements and can be removed.
  22 remoting.AppMode = {
  23   HOME: 'home',
  24     TOKEN_REFRESH_FAILED: 'home.token-refresh-failed',
  25     HOST_INSTALL: 'home.host-install',
  26       HOST_INSTALL_PROMPT: 'home.host-install.prompt',
  27       HOST_INSTALL_PENDING: 'home.host-install.pending',
  28     HOST: 'home.host',
  29       HOST_WAITING_FOR_CODE: 'home.host.waiting-for-code',
  30       HOST_WAITING_FOR_CONNECTION: 'home.host.waiting-for-connection',
  31       HOST_SHARED: 'home.host.shared',
  32       HOST_SHARE_FAILED: 'home.host.share-failed',
  33       HOST_SHARE_FINISHED: 'home.host.share-finished',
  34     CLIENT: 'home.client',
  35       CLIENT_UNCONNECTED: 'home.client.unconnected',
  36       CLIENT_PIN_PROMPT: 'home.client.pin-prompt',
  37       CLIENT_THIRD_PARTY_AUTH: 'home.client.third-party-auth',
  38       CLIENT_CONNECTING: 'home.client.connecting',
  39       CLIENT_CONNECT_FAILED_IT2ME: 'home.client.connect-failed.it2me',
  40       CLIENT_CONNECT_FAILED_ME2ME: 'home.client.connect-failed.me2me',
  41       CLIENT_SESSION_FINISHED_IT2ME: 'home.client.session-finished.it2me',
  42       CLIENT_SESSION_FINISHED_ME2ME: 'home.client.session-finished.me2me',
  43       CLIENT_HOST_NEEDS_UPGRADE: 'home.client.host-needs-upgrade',
  44     HISTORY: 'home.history',
  45     CONFIRM_HOST_DELETE: 'home.confirm-host-delete',
  46     HOST_SETUP: 'home.host-setup',
  47       HOST_SETUP_ASK_PIN: 'home.host-setup.ask-pin',
  48       HOST_SETUP_PROCESSING: 'home.host-setup.processing',
  49       HOST_SETUP_DONE: 'home.host-setup.done',
  50       HOST_SETUP_ERROR: 'home.host-setup.error',
  51     HOME_MANAGE_PAIRINGS: 'home.manage-pairings',
  52   IN_SESSION: 'in-session'
  53 };
  54
  55 /** @const */
  56 remoting.kIT2MeVisitedStorageKey = 'it2me-visited';
  57 /** @const */
  58 remoting.kMe2MeVisitedStorageKey = 'me2me-visited';
  59
  60 /**
  61  * @param {Element} element The element to check.
  62  * @param {string} attrName The attribute on the element to check.
  63  * @param {Array.<string>} modes The modes to check for.
  64  * @return {boolean} True if any mode in |modes| is found within the attribute.
  65  */
  66 remoting.hasModeAttribute = function(element, attrName, modes) {
  67   var attr = element.getAttribute(attrName);
  68   for (var i = 0; i < modes.length; ++i) {
  69     if (attr.match(new RegExp('(\\s|^)' + modes[i] + '(\\s|$)')) != null) {
  70       return true;
  71     }
  72   }
  73   return false;
  74 };
  75
  76 /**
  77  * Update the DOM by showing or hiding elements based on whether or not they
  78  * have an attribute matching the specified name.
  79  * @param {string} mode The value against which to match the attribute.
  80  * @param {string} attr The attribute name to match.
  81  * @return {void} Nothing.
  82  */
  83 remoting.updateModalUi = function(mode, attr) {
  84   var modes = mode.split('.');
  85   for (var i = 1; i < modes.length; ++i)
  86     modes[i] = modes[i - 1] + '.' + modes[i];
  87   var elements = document.querySelectorAll('[' + attr + ']');
  88   // Hide elements first so that we don't end up trying to show two modal
  89   // dialogs at once (which would break keyboard-navigation confinement).
  90   for (var i = 0; i < elements.length; ++i) {
  91     var element = /** @type {Element} */ elements[i];
  92     if (!remoting.hasModeAttribute(element, attr, modes)) {
  93       element.hidden = true;
  94     }
  95   }
  96   for (var i = 0; i < elements.length; ++i) {
  97     var element = /** @type {Element} */ elements[i];
  98     if (remoting.hasModeAttribute(element, attr, modes)) {
  99       element.hidden = false;
 100       var autofocusNode = element.querySelector('[autofocus]');
 101       if (autofocusNode) {
 102         autofocusNode.focus();
 103       }
 104     }
 105   }
 106 };
 107
 108 /**
 109  * @type {remoting.AppMode} The current app mode
 110  */
 111 remoting.currentMode = remoting.AppMode.HOME;
 112
 113 /**
 114  * Change the app's modal state to |mode|, determined by the data-ui-mode
 115  * attribute.
 116  *
 117  * @param {remoting.AppMode} mode The new modal state.
 118  */
 119 remoting.setMode = function(mode) {
 120   remoting.updateModalUi(mode, 'data-ui-mode');
 121   console.log('App mode: ' + mode);
 122   remoting.currentMode = mode;
 123   if (mode == remoting.AppMode.IN_SESSION) {
 124     document.removeEventListener('keydown', remoting.ConnectionStats.onKeydown,
 125                                  false);
 126     if ('hidden' in document) {
 127       document.addEventListener('visibilitychange',
 128                                 remoting.onVisibilityChanged, false);
 129     } else {
 130       document.addEventListener('webkitvisibilitychange',
 131                                 remoting.onVisibilityChanged, false);
 132     }
 133   } else {
 134     document.addEventListener('keydown', remoting.ConnectionStats.onKeydown,
 135                               false);
 136     document.removeEventListener('visibilitychange',
 137                                  remoting.onVisibilityChanged, false);
 138     document.removeEventListener('webkitvisibilitychange',
 139                                  remoting.onVisibilityChanged, false);
 140     // TODO(jamiewalch): crbug.com/252796: Remove this once crbug.com/240772
 141     // is fixed.
 142     var scroller = document.getElementById('scroller');
 143     if (scroller) {
 144       scroller.classList.remove('no-horizontal-scroll');
 145       scroller.classList.remove('no-vertical-scroll');
 146     }
 147   }
 148
 149   remoting.testEvents.raiseEvent(remoting.testEvents.Names.uiModeChanged, mode);
 150 };
 151
 152 /**
 153  * Get the major mode that the app is running in.
 154  * @return {string} The app's current major mode.
 155  */
 156 remoting.getMajorMode = function() {
 157   return remoting.currentMode.split('.')[0];
 158 };
 159
 160 /**
 161  * Helper function for showing or hiding the infographic UI based on
 162  * whether or not the user has already dismissed it.
 163  *
 164  * @param {string} mode
 165  * @param {!Object} items
 166  */
 167 remoting.showOrHideCallback = function(mode, items) {
 168   // Get the first element of a dictionary or array, without needing to know
 169   // the key.
 170   /** @type {string} */
 171   var key = Object.keys(items)[0];
 172   var visited = !!items[key];
 173   document.getElementById(mode + '-first-run').hidden = visited;
 174   document.getElementById(mode + '-content').hidden = !visited;
 175 };
 176
 177 remoting.showOrHideIT2MeUi = function() {
 178   chrome.storage.local.get(remoting.kIT2MeVisitedStorageKey,
 179                            remoting.showOrHideCallback.bind(null, 'it2me'));
 180 };
 181
 182 remoting.showOrHideMe2MeUi = function() {
 183   chrome.storage.local.get(remoting.kMe2MeVisitedStorageKey,
 184                            remoting.showOrHideCallback.bind(null, 'me2me'));
 185 };
 186
 187 remoting.showIT2MeUiAndSave = function() {
 188   var items = {};
 189   items[remoting.kIT2MeVisitedStorageKey] = true;
 190   chrome.storage.local.set(items);
 191   remoting.showOrHideCallback('it2me', [true]);
 192 };
 193
 194 remoting.showMe2MeUiAndSave = function() {
 195   var items = {};
 196   items[remoting.kMe2MeVisitedStorageKey] = true;
 197   chrome.storage.local.set(items);
 198   remoting.showOrHideCallback('me2me', [true]);
 199 };
 200
 201 remoting.resetInfographics = function() {
 202   chrome.storage.local.remove(remoting.kIT2MeVisitedStorageKey);
 203   chrome.storage.local.remove(remoting.kMe2MeVisitedStorageKey);
 204   remoting.showOrHideCallback('it2me', [false]);
 205   remoting.showOrHideCallback('me2me', [false]);
 206 }
 207
 208
 209 /**
 210  * Initialize all modal dialogs (class kd-modaldialog), adding event handlers
 211  * to confine keyboard navigation to child controls of the dialog when it is
 212  * shown and restore keyboard navigation when it is hidden.
 213  */
 214 remoting.initModalDialogs = function() {
 215   var dialogs = document.querySelectorAll('.kd-modaldialog');
 216   var observer = new MutationObserver(confineOrRestoreFocus_);
 217   var options = {
 218     subtree: false,
 219     attributes: true
 220   };
 221   for (var i = 0; i < dialogs.length; ++i) {
 222     observer.observe(dialogs[i], options);
 223   }
 224 };
 225
 226 /**
 227  * @param {Array.<MutationRecord>} mutations The set of mutations affecting
 228  *     an observed node.
 229  */
 230 function confineOrRestoreFocus_(mutations) {
 231   // The list of mutations can include duplicates, so reduce it to a canonical
 232   // show/hide list.
 233   /** @type {Array.<Element>} */
 234   var shown = [];
 235   /** @type {Array.<Element>} */
 236   var hidden = [];
 237   for (var i = 0; i < mutations.length; ++i) {
 238     var mutation = mutations[i];
 239     if (mutation.type == 'attributes' &&
 240         mutation.attributeName == 'hidden') {
 241       var node = mutation.target;
 242       if (node.hidden && hidden.indexOf(node) == -1) {
 243         hidden.push(node);
 244       } else if (!node.hidden && shown.indexOf(node) == -1) {
 245         shown.push(node);
 246       }
 247     }
 248   }
 249   var kSavedAttributeName = 'data-saved-tab-index';
 250   // If any dialogs have been dismissed, restore all the tabIndex attributes.
 251   if (hidden.length != 0) {
 252     var elements = document.querySelectorAll('[' + kSavedAttributeName + ']');
 253     for (var i = 0 ; i < elements.length; ++i) {
 254       var element = /** @type {Element} */ elements[i];
 255       element.tabIndex = element.getAttribute(kSavedAttributeName);
 256       element.removeAttribute(kSavedAttributeName);
 257     }
 258   }
 259   // If any dialogs have been shown, confine keyboard navigation to the first
 260   // one. We don't have nested modal dialogs, so this will suffice for now.
 261   if (shown.length != 0) {
 262     var selector = '[tabIndex],a,area,button,input,select,textarea';
 263     var disable = document.querySelectorAll(selector);
 264     var except = shown[0].querySelectorAll(selector);
 265     for (var i = 0; i < disable.length; ++i) {
 266       var element = /** @type {Element} */ disable[i];
 267       var removeFromKeyboardNavigation = true;
 268       for (var j = 0; j < except.length; ++j) {  // No indexOf on NodeList
 269         if (element == except[j]) {
 270           removeFromKeyboardNavigation = false;
 271           break;
 272         }
 273       }
 274       if (removeFromKeyboardNavigation) {
 275         element.setAttribute(kSavedAttributeName, element.tabIndex);
 276         element.tabIndex = -1;
 277       }
 278     }
 279   }
 280 }
 281
 282 /**
 283  * @param {string} tag
 284  */
 285 remoting.showSetupProcessingMessage = function(tag) {
 286   var messageDiv = document.getElementById('host-setup-processing-message');
 287   l10n.localizeElementFromTag(messageDiv, tag);
 288   remoting.setMode(remoting.AppMode.HOST_SETUP_PROCESSING);
 289 }