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.
5 cr.define('options.search_engines', function() {
6 /** @const */ var ControlledSettingIndicator =
7 options.ControlledSettingIndicator;
8 /** @const */ var InlineEditableItemList = options.InlineEditableItemList;
9 /** @const */ var InlineEditableItem = options.InlineEditableItem;
10 /** @const */ var ListSelectionController = cr.ui.ListSelectionController;
13 * Creates a new search engine list item.
14 * @param {Object} searchEnigne The search engine this represents.
16 * @extends {cr.ui.ListItem}
18 function SearchEngineListItem(searchEngine) {
19 var el = cr.doc.createElement('div');
20 el.searchEngine_ = searchEngine;
21 SearchEngineListItem.decorate(el);
26 * Decorates an element as a search engine list item.
27 * @param {!HTMLElement} el The element to decorate.
29 SearchEngineListItem.decorate = function(el) {
30 el.__proto__ = SearchEngineListItem.prototype;
34 SearchEngineListItem.prototype = {
35 __proto__: InlineEditableItem.prototype,
38 * Input field for editing the engine name.
45 * Input field for editing the engine keyword.
52 * Input field for editing the engine url.
59 * Whether or not an input validation request is currently outstanding.
63 waitingForValidation_: false,
66 * Whether or not the current set of input is known to be valid.
70 currentlyValid_: false,
73 decorate: function() {
74 InlineEditableItem.prototype.decorate.call(this);
76 var engine = this.searchEngine_;
78 if (engine.modelIndex == '-1') {
79 this.isPlaceholder = true;
85 this.currentlyValid_ = !this.isPlaceholder;
88 this.classList.add('default');
90 this.deletable = engine.canBeRemoved;
92 // Construct the name column.
93 var nameColEl = this.ownerDocument.createElement('div');
94 nameColEl.className = 'name-column';
95 nameColEl.classList.add('weakrtl');
96 this.contentElement.appendChild(nameColEl);
99 var faviconDivEl = this.ownerDocument.createElement('div');
100 faviconDivEl.className = 'favicon';
101 if (!this.isPlaceholder) {
102 faviconDivEl.style.backgroundImage = imageset(
103 'chrome://favicon/size/16@scalefactorx/iconurl/' + engine.iconURL);
105 nameColEl.appendChild(faviconDivEl);
107 var nameEl = this.createEditableTextCell(engine.displayName);
108 nameEl.classList.add('weakrtl');
109 nameColEl.appendChild(nameEl);
111 // Then the keyword column.
112 var keywordEl = this.createEditableTextCell(engine.keyword);
113 keywordEl.className = 'keyword-column';
114 keywordEl.classList.add('weakrtl');
115 this.contentElement.appendChild(keywordEl);
117 // And the URL column.
118 var urlEl = this.createEditableTextCell(engine.url);
119 // Extensions should not display a URL column.
120 if (!engine.isExtension) {
121 var urlWithButtonEl = this.ownerDocument.createElement('div');
122 urlWithButtonEl.appendChild(urlEl);
123 urlWithButtonEl.className = 'url-column';
124 urlWithButtonEl.classList.add('weakrtl');
125 this.contentElement.appendChild(urlWithButtonEl);
126 // Add the Make Default button. Temporary until drag-and-drop
127 // re-ordering is implemented. When this is removed, remove the extra
129 if (engine.canBeDefault) {
130 var makeDefaultButtonEl = this.ownerDocument.createElement('button');
131 makeDefaultButtonEl.className =
132 'custom-appearance list-inline-button';
133 makeDefaultButtonEl.textContent =
134 loadTimeData.getString('makeDefaultSearchEngineButton');
135 makeDefaultButtonEl.onclick = function(e) {
136 chrome.send('managerSetDefaultSearchEngine', [engine.modelIndex]);
138 makeDefaultButtonEl.onmousedown = function(e) {
139 // Don't select the row when clicking the button.
141 // Don't focus on the button.
144 urlWithButtonEl.appendChild(makeDefaultButtonEl);
148 // Do final adjustment to the input fields.
149 this.nameField_ = nameEl.querySelector('input');
150 // The editable field uses the raw name, not the display name.
151 this.nameField_.value = engine.name;
152 this.keywordField_ = keywordEl.querySelector('input');
153 this.urlField_ = urlEl.querySelector('input');
155 if (engine.urlLocked)
156 this.urlField_.disabled = true;
158 if (engine.isExtension)
159 this.nameField_.disabled = true;
161 if (this.isPlaceholder) {
162 this.nameField_.placeholder =
163 loadTimeData.getString('searchEngineTableNamePlaceholder');
164 this.keywordField_.placeholder =
165 loadTimeData.getString('searchEngineTableKeywordPlaceholder');
166 this.urlField_.placeholder =
167 loadTimeData.getString('searchEngineTableURLPlaceholder');
170 var fields = [this.nameField_, this.keywordField_, this.urlField_];
171 for (var i = 0; i < fields.length; i++) {
172 fields[i].oninput = this.startFieldValidation_.bind(this);
175 // Listen for edit events.
176 if (engine.canBeEdited) {
177 this.addEventListener('edit', this.onEditStarted_.bind(this));
178 this.addEventListener('canceledit', this.onEditCancelled_.bind(this));
179 this.addEventListener('commitedit', this.onEditCommitted_.bind(this));
181 this.editable = false;
182 this.querySelector('.row-delete-button').hidden = true;
183 var indicator = ControlledSettingIndicator();
184 indicator.setAttribute('setting', 'search-engine');
185 // Create a synthetic pref change event decorated as
186 // CoreOptionsHandler::CreateValueForPref() does.
187 var event = new Event(this.contentType);
188 event.value = { controlledBy: 'policy' };
189 indicator.handlePrefChange(event);
190 this.appendChild(indicator);
195 get currentInputIsValid() {
196 return !this.waitingForValidation_ && this.currentlyValid_;
200 get hasBeenEdited() {
201 var engine = this.searchEngine_;
202 return this.nameField_.value != engine.name ||
203 this.keywordField_.value != engine.keyword ||
204 this.urlField_.value != engine.url;
208 * Called when entering edit mode; starts an edit session in the model.
209 * @param {Event} e The edit event.
212 onEditStarted_: function(e) {
213 var editIndex = this.searchEngine_.modelIndex;
214 chrome.send('editSearchEngine', [String(editIndex)]);
215 this.startFieldValidation_();
219 * Called when committing an edit; updates the model.
220 * @param {Event} e The end event.
223 onEditCommitted_: function(e) {
224 chrome.send('searchEngineEditCompleted', this.getInputFieldValues_());
228 * Called when cancelling an edit; informs the model and resets the control
230 * @param {Event} e The cancel event.
233 onEditCancelled_: function() {
234 chrome.send('searchEngineEditCancelled');
236 // The name field has been automatically set to match the display name,
237 // but it should use the raw name instead.
238 this.nameField_.value = this.searchEngine_.name;
239 this.currentlyValid_ = !this.isPlaceholder;
243 * Returns the input field values as an array suitable for passing to
244 * chrome.send. The order of the array is important.
246 * @return {array} The current input field values.
248 getInputFieldValues_: function() {
249 return [this.nameField_.value,
250 this.keywordField_.value,
251 this.urlField_.value];
255 * Begins the process of asynchronously validing the input fields.
258 startFieldValidation_: function() {
259 this.waitingForValidation_ = true;
260 var args = this.getInputFieldValues_();
261 args.push(this.searchEngine_.modelIndex);
262 chrome.send('checkSearchEngineInfoValidity', args);
266 * Callback for the completion of an input validition check.
267 * @param {Object} validity A dictionary of validitation results.
269 validationComplete: function(validity) {
270 this.waitingForValidation_ = false;
271 // TODO(stuartmorgan): Implement the full validation UI with
272 // checkmark/exclamation mark icons and tooltips showing the errors.
274 this.nameField_.setCustomValidity('');
276 this.nameField_.setCustomValidity(
277 loadTimeData.getString('editSearchEngineInvalidTitleToolTip'));
280 if (validity.keyword) {
281 this.keywordField_.setCustomValidity('');
283 this.keywordField_.setCustomValidity(
284 loadTimeData.getString('editSearchEngineInvalidKeywordToolTip'));
288 this.urlField_.setCustomValidity('');
290 this.urlField_.setCustomValidity(
291 loadTimeData.getString('editSearchEngineInvalidURLToolTip'));
294 this.currentlyValid_ = validity.name && validity.keyword && validity.url;
298 var SearchEngineList = cr.ui.define('list');
300 SearchEngineList.prototype = {
301 __proto__: InlineEditableItemList.prototype,
304 createItem: function(searchEngine) {
305 return new SearchEngineListItem(searchEngine);
309 deleteItemAtIndex: function(index) {
310 var modelIndex = this.dataModel.item(index).modelIndex;
311 chrome.send('removeSearchEngine', [String(modelIndex)]);
315 * Passes the results of an input validation check to the requesting row
316 * if it's still being edited.
317 * @param {number} modelIndex The model index of the item that was checked.
318 * @param {Object} validity A dictionary of validitation results.
320 validationComplete: function(validity, modelIndex) {
321 // If it's not still being edited, it no longer matters.
322 var currentSelection = this.selectedItem;
323 if (!currentSelection)
325 var listItem = this.getListItem(currentSelection);
326 if (listItem.editing && currentSelection.modelIndex == modelIndex)
327 listItem.validationComplete(validity);
333 SearchEngineList: SearchEngineList