src/chrome/browser/resources/extensions/extensions.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 <include src="../uber/uber_utils.js">
   6 <include src="extension_code.js">
   7 <include src="extension_commands_overlay.js">
   8 <include src="extension_error_overlay.js">
   9 <include src="extension_focus_manager.js">
  10 <include src="extension_list.js">
  11 <include src="pack_extension_overlay.js">
  12 <include src="extension_loader.js">
  13 <include src="extension_options_overlay.js">
  14
  15 <if expr="chromeos">
  16 <include src="chromeos/kiosk_apps.js">
  17 </if>
  18
  19 /**
  20  * The type of the extension data object. The definition is based on
  21  * chrome/browser/ui/webui/extensions/extension_settings_handler.cc:
  22  *     ExtensionSettingsHandler::HandleRequestExtensionsData()
  23  * @typedef {{developerMode: boolean,
  24  *            extensions: Array,
  25  *            incognitoAvailable: boolean,
  26  *            loadUnpackedDisabled: boolean,
  27  *            profileIsSupervised: boolean,
  28  *            promoteAppsDevTools: boolean}}
  29  */
  30 var ExtensionDataResponse;
  31
  32 // Used for observing function of the backend datasource for this page by
  33 // tests.
  34 var webuiResponded = false;
  35
  36 cr.define('extensions', function() {
  37   var ExtensionsList = options.ExtensionsList;
  38
  39   // Implements the DragWrapper handler interface.
  40   var dragWrapperHandler = {
  41     /** @override */
  42     shouldAcceptDrag: function(e) {
  43       // We can't access filenames during the 'dragenter' event, so we have to
  44       // wait until 'drop' to decide whether to do something with the file or
  45       // not.
  46       // See: http://www.w3.org/TR/2011/WD-html5-20110113/dnd.html#concept-dnd-p
  47       return (e.dataTransfer.types &&
  48               e.dataTransfer.types.indexOf('Files') > -1);
  49     },
  50     /** @override */
  51     doDragEnter: function() {
  52       chrome.send('startDrag');
  53       ExtensionSettings.showOverlay(null);
  54       ExtensionSettings.showOverlay($('drop-target-overlay'));
  55     },
  56     /** @override */
  57     doDragLeave: function() {
  58       ExtensionSettings.showOverlay(null);
  59       chrome.send('stopDrag');
  60     },
  61     /** @override */
  62     doDragOver: function(e) {
  63       e.preventDefault();
  64     },
  65     /** @override */
  66     doDrop: function(e) {
  67       ExtensionSettings.showOverlay(null);
  68       if (e.dataTransfer.files.length != 1)
  69         return;
  70
  71       var toSend = null;
  72       // Files lack a check if they're a directory, but we can find out through
  73       // its item entry.
  74       for (var i = 0; i < e.dataTransfer.items.length; ++i) {
  75         if (e.dataTransfer.items[i].kind == 'file' &&
  76             e.dataTransfer.items[i].webkitGetAsEntry().isDirectory) {
  77           toSend = 'installDroppedDirectory';
  78           break;
  79         }
  80       }
  81       // Only process files that look like extensions. Other files should
  82       // navigate the browser normally.
  83       if (!toSend &&
  84           /\.(crx|user\.js|zip)$/i.test(e.dataTransfer.files[0].name)) {
  85         toSend = 'installDroppedFile';
  86       }
  87
  88       if (toSend) {
  89         e.preventDefault();
  90         chrome.send(toSend);
  91       }
  92     }
  93   };
  94
  95   /**
  96    * ExtensionSettings class
  97    * @class
  98    */
  99   function ExtensionSettings() {}
 100
 101   cr.addSingletonGetter(ExtensionSettings);
 102
 103   ExtensionSettings.prototype = {
 104     __proto__: HTMLDivElement.prototype,
 105
 106     /**
 107      * Whether or not to try to display the Apps Developer Tools promotion.
 108      * @type {boolean}
 109      * @private
 110      */
 111     displayPromo_: false,
 112
 113     /**
 114      * Perform initial setup.
 115      */
 116     initialize: function() {
 117       uber.onContentFrameLoaded();
 118       cr.ui.FocusOutlineManager.forDocument(document);
 119       measureCheckboxStrings();
 120
 121       // Set the title.
 122       uber.setTitle(loadTimeData.getString('extensionSettings'));
 123
 124       // This will request the data to show on the page and will get a response
 125       // back in returnExtensionsData.
 126       chrome.send('extensionSettingsRequestExtensionsData');
 127
 128       var extensionLoader = extensions.ExtensionLoader.getInstance();
 129
 130       $('toggle-dev-on').addEventListener('change',
 131           this.handleToggleDevMode_.bind(this));
 132       $('dev-controls').addEventListener('webkitTransitionEnd',
 133           this.handleDevControlsTransitionEnd_.bind(this));
 134
 135       // Set up the three dev mode buttons (load unpacked, pack and update).
 136       $('load-unpacked').addEventListener('click', function(e) {
 137           extensionLoader.loadUnpacked();
 138       });
 139       $('pack-extension').addEventListener('click',
 140           this.handlePackExtension_.bind(this));
 141       $('update-extensions-now').addEventListener('click',
 142           this.handleUpdateExtensionNow_.bind(this));
 143
 144       // Set up the close dialog for the apps developer tools promo.
 145       $('apps-developer-tools-promo').querySelector('.close-button').
 146           addEventListener('click', function(e) {
 147         this.displayPromo_ = false;
 148         this.updatePromoVisibility_();
 149         chrome.send('extensionSettingsDismissADTPromo');
 150       }.bind(this));
 151
 152       if (!loadTimeData.getBoolean('offStoreInstallEnabled')) {
 153         this.dragWrapper_ = new cr.ui.DragWrapper(document.documentElement,
 154                                                   dragWrapperHandler);
 155       }
 156
 157       extensions.PackExtensionOverlay.getInstance().initializePage();
 158
 159       // Hook up the configure commands link to the overlay.
 160       var link = document.querySelector('.extension-commands-config');
 161       link.addEventListener('click',
 162           this.handleExtensionCommandsConfig_.bind(this));
 163
 164       // Initialize the Commands overlay.
 165       extensions.ExtensionCommandsOverlay.getInstance().initializePage();
 166
 167       extensions.ExtensionErrorOverlay.getInstance().initializePage(
 168           extensions.ExtensionSettings.showOverlay);
 169
 170       extensions.ExtensionOptionsOverlay.getInstance().initializePage(
 171           extensions.ExtensionSettings.showOverlay);
 172
 173       // Initialize the kiosk overlay.
 174       if (cr.isChromeOS) {
 175         var kioskOverlay = extensions.KioskAppsOverlay.getInstance();
 176         kioskOverlay.initialize();
 177
 178         $('add-kiosk-app').addEventListener('click', function() {
 179           ExtensionSettings.showOverlay($('kiosk-apps-page'));
 180           kioskOverlay.didShowPage();
 181         });
 182
 183         extensions.KioskDisableBailoutConfirm.getInstance().initialize();
 184       }
 185
 186       cr.ui.overlay.setupOverlay($('drop-target-overlay'));
 187       cr.ui.overlay.globalInitialization();
 188
 189       extensions.ExtensionFocusManager.getInstance().initialize();
 190
 191       var path = document.location.pathname;
 192       if (path.length > 1) {
 193         // Skip starting slash and remove trailing slash (if any).
 194         var overlayName = path.slice(1).replace(/\/$/, '');
 195         if (overlayName == 'configureCommands')
 196           this.showExtensionCommandsConfigUi_();
 197       }
 198     },
 199
 200     /**
 201      * Updates the Chrome Apps and Extensions Developer Tools promotion's
 202      * visibility.
 203      * @private
 204      */
 205     updatePromoVisibility_: function() {
 206       var extensionSettings = $('extension-settings');
 207       var visible = extensionSettings.classList.contains('dev-mode') &&
 208                     this.displayPromo_;
 209
 210       var adtPromo = $('apps-developer-tools-promo');
 211       var controls = adtPromo.querySelectorAll('a, button');
 212       Array.prototype.forEach.call(controls, function(control) {
 213         control[visible ? 'removeAttribute' : 'setAttribute']('tabindex', '-1');
 214       });
 215
 216       adtPromo.setAttribute('aria-hidden', !visible);
 217       extensionSettings.classList.toggle('adt-promo', visible);
 218     },
 219
 220     /**
 221      * Handles the Pack Extension button.
 222      * @param {Event} e Change event.
 223      * @private
 224      */
 225     handlePackExtension_: function(e) {
 226       ExtensionSettings.showOverlay($('pack-extension-overlay'));
 227       chrome.send('metricsHandler:recordAction', ['Options_PackExtension']);
 228     },
 229
 230     /**
 231      * Shows the Extension Commands configuration UI.
 232      * @param {Event} e Change event.
 233      * @private
 234      */
 235     showExtensionCommandsConfigUi_: function(e) {
 236       ExtensionSettings.showOverlay($('extension-commands-overlay'));
 237       chrome.send('metricsHandler:recordAction',
 238                   ['Options_ExtensionCommands']);
 239     },
 240
 241     /**
 242      * Handles the Configure (Extension) Commands link.
 243      * @param {Event} e Change event.
 244      * @private
 245      */
 246     handleExtensionCommandsConfig_: function(e) {
 247       this.showExtensionCommandsConfigUi_();
 248     },
 249
 250     /**
 251      * Handles the Update Extension Now button.
 252      * @param {Event} e Change event.
 253      * @private
 254      */
 255     handleUpdateExtensionNow_: function(e) {
 256       chrome.send('extensionSettingsAutoupdate');
 257     },
 258
 259     /**
 260      * Handles the Toggle Dev Mode button.
 261      * @param {Event} e Change event.
 262      * @private
 263      */
 264     handleToggleDevMode_: function(e) {
 265       if ($('toggle-dev-on').checked) {
 266         $('dev-controls').hidden = false;
 267         window.setTimeout(function() {
 268           $('extension-settings').classList.add('dev-mode');
 269         }, 0);
 270       } else {
 271         $('extension-settings').classList.remove('dev-mode');
 272       }
 273       window.setTimeout(this.updatePromoVisibility_.bind(this), 0);
 274
 275       chrome.send('extensionSettingsToggleDeveloperMode');
 276     },
 277
 278     /**
 279      * Called when a transition has ended for #dev-controls.
 280      * @param {Event} e webkitTransitionEnd event.
 281      * @private
 282      */
 283     handleDevControlsTransitionEnd_: function(e) {
 284       if (e.propertyName == 'height' &&
 285           !$('extension-settings').classList.contains('dev-mode')) {
 286         $('dev-controls').hidden = true;
 287       }
 288     },
 289   };
 290
 291   /**
 292    * Called by the dom_ui_ to re-populate the page with data representing
 293    * the current state of installed extensions.
 294    * @param {ExtensionDataResponse} extensionsData
 295    */
 296   ExtensionSettings.returnExtensionsData = function(extensionsData) {
 297     // We can get called many times in short order, thus we need to
 298     // be careful to remove the 'finished loading' timeout.
 299     if (this.loadingTimeout_)
 300       window.clearTimeout(this.loadingTimeout_);
 301     document.documentElement.classList.add('loading');
 302     this.loadingTimeout_ = window.setTimeout(function() {
 303       document.documentElement.classList.remove('loading');
 304     }, 0);
 305
 306     webuiResponded = true;
 307
 308     if (extensionsData.extensions.length > 0) {
 309       // Enforce order specified in the data or (if equal) then sort by
 310       // extension name (case-insensitive) followed by their ID (in the case
 311       // where extensions have the same name).
 312       extensionsData.extensions.sort(function(a, b) {
 313         function compare(x, y) {
 314           return x < y ? -1 : (x > y ? 1 : 0);
 315         }
 316         return compare(a.order, b.order) ||
 317                compare(a.name.toLowerCase(), b.name.toLowerCase()) ||
 318                compare(a.id, b.id);
 319       });
 320     }
 321
 322     var pageDiv = $('extension-settings');
 323     var marginTop = 0;
 324     if (extensionsData.profileIsSupervised) {
 325       pageDiv.classList.add('profile-is-supervised');
 326     } else {
 327       pageDiv.classList.remove('profile-is-supervised');
 328     }
 329     if (extensionsData.profileIsSupervised) {
 330       pageDiv.classList.add('showing-banner');
 331       $('toggle-dev-on').disabled = true;
 332       marginTop += 45;
 333     } else {
 334       pageDiv.classList.remove('showing-banner');
 335       $('toggle-dev-on').disabled = false;
 336     }
 337
 338     pageDiv.style.marginTop = marginTop + 'px';
 339
 340     if (extensionsData.developerMode) {
 341       pageDiv.classList.add('dev-mode');
 342       $('toggle-dev-on').checked = true;
 343       $('dev-controls').hidden = false;
 344     } else {
 345       pageDiv.classList.remove('dev-mode');
 346       $('toggle-dev-on').checked = false;
 347     }
 348
 349     ExtensionSettings.getInstance().displayPromo_ =
 350         extensionsData.promoteAppsDevTools;
 351     ExtensionSettings.getInstance().updatePromoVisibility_();
 352
 353     $('load-unpacked').disabled = extensionsData.loadUnpackedDisabled;
 354
 355     ExtensionsList.prototype.data_ = extensionsData;
 356     var extensionList = $('extension-settings-list');
 357     ExtensionsList.decorate(extensionList);
 358   };
 359
 360   // Indicate that warning |message| has occured for pack of |crx_path| and
 361   // |pem_path| files.  Ask if user wants override the warning.  Send
 362   // |overrideFlags| to repeated 'pack' call to accomplish the override.
 363   ExtensionSettings.askToOverrideWarning =
 364       function(message, crx_path, pem_path, overrideFlags) {
 365     var closeAlert = function() {
 366       ExtensionSettings.showOverlay(null);
 367     };
 368
 369     alertOverlay.setValues(
 370         loadTimeData.getString('packExtensionWarningTitle'),
 371         message,
 372         loadTimeData.getString('packExtensionProceedAnyway'),
 373         loadTimeData.getString('cancel'),
 374         function() {
 375           chrome.send('pack', [crx_path, pem_path, overrideFlags]);
 376           closeAlert();
 377         },
 378         closeAlert);
 379     ExtensionSettings.showOverlay($('alertOverlay'));
 380   };
 381
 382   /**
 383    * Returns the current overlay or null if one does not exist.
 384    * @return {Element} The overlay element.
 385    */
 386   ExtensionSettings.getCurrentOverlay = function() {
 387     return document.querySelector('#overlay .page.showing');
 388   };
 389
 390   /**
 391    * Sets the given overlay to show. This hides whatever overlay is currently
 392    * showing, if any.
 393    * @param {HTMLElement} node The overlay page to show. If falsey, all overlays
 394    *     are hidden.
 395    */
 396   ExtensionSettings.showOverlay = function(node) {
 397     var pageDiv = $('extension-settings');
 398     if (node) {
 399       pageDiv.style.width = window.getComputedStyle(pageDiv).width;
 400       document.body.classList.add('no-scroll');
 401     } else {
 402       document.body.classList.remove('no-scroll');
 403       pageDiv.style.width = '';
 404     }
 405
 406     var currentlyShowingOverlay = ExtensionSettings.getCurrentOverlay();
 407     if (currentlyShowingOverlay)
 408       currentlyShowingOverlay.classList.remove('showing');
 409
 410     if (node)
 411       node.classList.add('showing');
 412
 413     var pages = document.querySelectorAll('.page');
 414     for (var i = 0; i < pages.length; i++) {
 415       pages[i].setAttribute('aria-hidden', node ? 'true' : 'false');
 416     }
 417
 418     $('overlay').hidden = !node;
 419     uber.invokeMethodOnParent(node ? 'beginInterceptingEvents' :
 420                                      'stopInterceptingEvents');
 421   };
 422
 423   /**
 424    * Utility function to find the width of various UI strings and synchronize
 425    * the width of relevant spans. This is crucial for making sure the
 426    * Enable/Enabled checkboxes align, as well as the Developer Mode checkbox.
 427    */
 428   function measureCheckboxStrings() {
 429     var trashWidth = 30;
 430     var measuringDiv = $('font-measuring-div');
 431     measuringDiv.textContent =
 432         loadTimeData.getString('extensionSettingsEnabled');
 433     measuringDiv.className = 'enabled-text';
 434     var pxWidth = measuringDiv.clientWidth + trashWidth;
 435     measuringDiv.textContent =
 436         loadTimeData.getString('extensionSettingsEnable');
 437     measuringDiv.className = 'enable-text';
 438     pxWidth = Math.max(measuringDiv.clientWidth + trashWidth, pxWidth);
 439     measuringDiv.textContent =
 440         loadTimeData.getString('extensionSettingsDeveloperMode');
 441     measuringDiv.className = '';
 442     pxWidth = Math.max(measuringDiv.clientWidth, pxWidth);
 443
 444     var style = document.createElement('style');
 445     style.type = 'text/css';
 446     style.textContent =
 447         '.enable-checkbox-text {' +
 448         '  min-width: ' + (pxWidth - trashWidth) + 'px;' +
 449         '}' +
 450         '#dev-toggle span {' +
 451         '  min-width: ' + pxWidth + 'px;' +
 452         '}';
 453     document.querySelector('head').appendChild(style);
 454   };
 455
 456   // Export
 457   return {
 458     ExtensionSettings: ExtensionSettings
 459   };
 460 });
 461
 462 window.addEventListener('load', function(e) {
 463   extensions.ExtensionSettings.getInstance().initialize();
 464 });