chrome/browser/resources/options/hotword_search_setting_indicator.js

   1 // Copyright 2014 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 cr.define('options', function() {
   6   /** @const */ var ControlledSettingIndicator =
   7                     options.ControlledSettingIndicator;
   8
   9   /**
  10    * A variant of the {@link ControlledSettingIndicator} that shows the status
  11    * of the hotword search setting, including a bubble to show setup errors
  12    * (such as failures to download extension resources).
  13    * @constructor
  14    * @extends {options.ControlledSettingIndicator}
  15    */
  16   var HotwordSearchSettingIndicator = cr.ui.define('span');
  17
  18   HotwordSearchSettingIndicator.prototype = {
  19     __proto__: ControlledSettingIndicator.prototype,
  20
  21     /**
  22      * Decorates the base element to show the proper icon.
  23      * @override
  24      */
  25     decorate: function() {
  26       ControlledSettingIndicator.prototype.decorate.call(this);
  27       this.hidden = true;
  28     },
  29
  30     /**
  31      * Handle changes to the associated pref by hiding any currently visible
  32      * bubble.
  33      * @param {Event} event Pref change event.
  34      * @override
  35      */
  36     handlePrefChange: function(event) {
  37       PageManager.hideBubble();
  38     },
  39
  40     /**
  41      * Sets the variable tracking the section which becomes disabled if an
  42      * error exists.
  43      * @param {HTMLElement} section The section to disable.
  44      */
  45     set disabledOnErrorSection(section) {
  46       // TODO(kcarattini): Instead of this, add a cr.EventTarget and have
  47       // the element to disable register an event on it.
  48       this.disabledOnErrorSection_ = section;
  49     },
  50
  51     /**
  52      * Returns the current error.
  53      * @return {string} The error message to be displayed. May be undefined if
  54      *     there is no error.
  55      */
  56     get errorText() {
  57       return this.errorText_;
  58     },
  59
  60     /**
  61      * Checks for errors and records them.
  62      * @param {string} errorMsg The error message to be displayed. May be
  63      *     undefined if there is no error.
  64      */
  65     setError: function(errorMsg) {
  66       this.setAttribute('controlled-by', 'policy');
  67       this.errorText_ = errorMsg;
  68     },
  69
  70     /**
  71      * Changes the display to be visible if there are errors and disables
  72      * the section.
  73      */
  74     updateBasedOnError: function() {
  75       if (this.errorText_)
  76         this.hidden = false;
  77       if (this.disabledOnErrorSection_)
  78         this.disabledOnErrorSection_.disabled = !!this.errorText_;
  79     },
  80
  81     /**
  82      * Toggles showing and hiding the error message bubble. An empty
  83      * |errorText_| indicates that there is no error message. So the bubble
  84      * only be shown if |errorText_| has a value.
  85      * @override
  86      */
  87     toggleBubble: function() {
  88       if (this.showingBubble) {
  89         PageManager.hideBubble();
  90         return;
  91       }
  92
  93       if (!this.errorText_)
  94         return;
  95
  96       var self = this;
  97       // Create the DOM tree for the bubble content.
  98       var closeButton = document.createElement('div');
  99       closeButton.classList.add('close-button');
 100
 101       var text = document.createElement('p');
 102       text.innerHTML = this.errorText_;
 103
 104       var textDiv = document.createElement('div');
 105       textDiv.appendChild(text);
 106
 107       var container = document.createElement('div');
 108       container.appendChild(closeButton);
 109       container.appendChild(textDiv);
 110
 111       var content = document.createElement('div');
 112       content.appendChild(container);
 113
 114       PageManager.showBubble(content, this.image, this, this.location);
 115     },
 116   };
 117
 118   // Export
 119   return {
 120     HotwordSearchSettingIndicator: HotwordSearchSettingIndicator
 121   };
 122 });