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.
6 * @typedef {{canBeDefault: boolean,
7 * canBeEdited: boolean,
8 * canBeRemoved: boolean,
10 * displayName: string,
11 * extension: (Object|undefined),
12 * iconURL: (string|undefined),
13 * isOmniboxExtension: boolean,
18 * urlLocked: boolean}}
19 * @see chrome/browser/ui/webui/options/search_engine_manager_handler.cc
23 cr.define('options.search_engines', function() {
24 /** @const */ var ControlledSettingIndicator =
25 options.ControlledSettingIndicator;
26 /** @const */ var InlineEditableItemList = options.InlineEditableItemList;
27 /** @const */ var InlineEditableItem = options.InlineEditableItem;
28 /** @const */ var ListSelectionController = cr.ui.ListSelectionController;
31 * Creates a new search engine list item.
32 * @param {SearchEngine} searchEngine The search engine this represents.
34 * @extends {options.InlineEditableItem}
36 function SearchEngineListItem(searchEngine) {
37 var el = cr.doc.createElement('div');
38 el.searchEngine_ = searchEngine;
39 SearchEngineListItem.decorate(el);
44 * Decorates an element as a search engine list item.
45 * @param {!HTMLElement} el The element to decorate.
47 SearchEngineListItem.decorate = function(el) {
48 el.__proto__ = SearchEngineListItem.prototype;
52 SearchEngineListItem.prototype = {
53 __proto__: InlineEditableItem.prototype,
56 * Input field for editing the engine name.
63 * Input field for editing the engine keyword.
70 * Input field for editing the engine url.
77 * Whether or not an input validation request is currently outstanding.
81 waitingForValidation_: false,
84 * Whether or not the current set of input is known to be valid.
88 currentlyValid_: false,
91 * @type {?SearchEngine}
96 decorate: function() {
97 InlineEditableItem.prototype.decorate.call(this);
99 var engine = this.searchEngine_;
101 if (engine.modelIndex == '-1') {
102 this.isPlaceholder = true;
108 this.currentlyValid_ = !this.isPlaceholder;
111 this.classList.add('default');
113 this.deletable = engine.canBeRemoved;
114 this.closeButtonElement.tabIndex = 0;
116 // Construct the name column.
117 var nameColEl = this.ownerDocument.createElement('div');
118 nameColEl.className = 'name-column';
119 nameColEl.classList.add('weakrtl');
120 this.contentElement.appendChild(nameColEl);
123 var faviconDivEl = this.ownerDocument.createElement('div');
124 faviconDivEl.className = 'favicon';
125 if (!this.isPlaceholder) {
126 faviconDivEl.style.backgroundImage = imageset(
127 'chrome://favicon/size/16@scalefactorx/iconurl/' + engine.iconURL);
129 nameColEl.appendChild(faviconDivEl);
131 var nameEl = this.createEditableTextCell(engine.displayName);
132 nameEl.classList.add('weakrtl');
133 nameColEl.appendChild(nameEl);
135 // Then the keyword column.
136 var keywordEl = this.createEditableTextCell(engine.keyword);
137 keywordEl.className = 'keyword-column';
138 keywordEl.classList.add('weakrtl');
139 this.contentElement.appendChild(keywordEl);
141 // And the URL column.
142 var urlEl = this.createEditableTextCell(engine.url);
143 // Extensions should not display a URL column.
144 if (!engine.isOmniboxExtension) {
145 var urlWithButtonEl = this.ownerDocument.createElement('div');
146 urlWithButtonEl.appendChild(urlEl);
147 urlWithButtonEl.className = 'url-column';
148 urlWithButtonEl.classList.add('weakrtl');
149 this.contentElement.appendChild(urlWithButtonEl);
150 // Add the Make Default button. Temporary until drag-and-drop
151 // re-ordering is implemented. When this is removed, remove the extra
153 if (engine.canBeDefault) {
154 var makeDefaultButtonEl = this.ownerDocument.createElement('button');
155 makeDefaultButtonEl.className =
156 'custom-appearance list-inline-button';
157 makeDefaultButtonEl.textContent =
158 loadTimeData.getString('makeDefaultSearchEngineButton');
159 makeDefaultButtonEl.onclick = function(e) {
160 chrome.send('managerSetDefaultSearchEngine', [engine.modelIndex]);
162 makeDefaultButtonEl.onmousedown = function(e) {
163 // Don't select the row when clicking the button.
165 // Don't focus on the button.
168 urlWithButtonEl.appendChild(makeDefaultButtonEl);
172 // Do final adjustment to the input fields.
173 this.nameField_ = /** @type {HTMLElement} */(
174 nameEl.querySelector('input'));
175 // The editable field uses the raw name, not the display name.
176 this.nameField_.value = engine.name;
177 this.keywordField_ = /** @type {HTMLElement} */(
178 keywordEl.querySelector('input'));
179 this.urlField_ = /** @type {HTMLElement} */(urlEl.querySelector('input'));
181 if (engine.urlLocked)
182 this.urlField_.disabled = true;
184 if (this.isPlaceholder) {
185 this.nameField_.placeholder =
186 loadTimeData.getString('searchEngineTableNamePlaceholder');
187 this.keywordField_.placeholder =
188 loadTimeData.getString('searchEngineTableKeywordPlaceholder');
189 this.urlField_.placeholder =
190 loadTimeData.getString('searchEngineTableURLPlaceholder');
193 var fields = [this.nameField_, this.keywordField_, this.urlField_];
194 for (var i = 0; i < fields.length; i++) {
195 fields[i].oninput = this.startFieldValidation_.bind(this);
198 // Listen for edit events.
199 if (engine.canBeEdited) {
200 this.addEventListener('edit', this.onEditStarted_.bind(this));
201 this.addEventListener('canceledit', this.onEditCancelled_.bind(this));
202 this.addEventListener('commitedit', this.onEditCommitted_.bind(this));
204 this.editable = false;
205 this.querySelector('.row-delete-button').hidden = true;
206 var indicator = new ControlledSettingIndicator();
207 indicator.setAttribute('setting', 'search-engine');
208 // Create a synthetic pref change event decorated as
209 // CoreOptionsHandler::CreateValueForPref() does.
210 var event = new Event(this.contentType);
211 if (engine.extension) {
212 event.value = { controlledBy: 'extension',
213 extension: engine.extension };
215 event.value = { controlledBy: 'policy' };
217 indicator.handlePrefChange(event);
218 this.appendChild(indicator);
223 get currentInputIsValid() {
224 return !this.waitingForValidation_ && this.currentlyValid_;
228 get hasBeenEdited() {
229 var engine = this.searchEngine_;
230 return this.nameField_.value != engine.name ||
231 this.keywordField_.value != engine.keyword ||
232 this.urlField_.value != engine.url;
236 * Called when entering edit mode; starts an edit session in the model.
237 * @param {Event} e The edit event.
240 onEditStarted_: function(e) {
241 var editIndex = this.searchEngine_.modelIndex;
242 chrome.send('editSearchEngine', [String(editIndex)]);
243 this.startFieldValidation_();
247 * Called when committing an edit; updates the model.
248 * @param {Event} e The end event.
251 onEditCommitted_: function(e) {
252 chrome.send('searchEngineEditCompleted', this.getInputFieldValues_());
256 * Called when cancelling an edit; informs the model and resets the control
258 * @param {Event} e The cancel event.
261 onEditCancelled_: function(e) {
262 chrome.send('searchEngineEditCancelled');
264 // The name field has been automatically set to match the display name,
265 // but it should use the raw name instead.
266 this.nameField_.value = this.searchEngine_.name;
267 this.currentlyValid_ = !this.isPlaceholder;
271 * Returns the input field values as an array suitable for passing to
272 * chrome.send. The order of the array is important.
274 * @return {Array} The current input field values.
276 getInputFieldValues_: function() {
277 return [this.nameField_.value,
278 this.keywordField_.value,
279 this.urlField_.value];
283 * Begins the process of asynchronously validing the input fields.
286 startFieldValidation_: function() {
287 this.waitingForValidation_ = true;
288 var args = this.getInputFieldValues_();
289 args.push(this.searchEngine_.modelIndex);
290 chrome.send('checkSearchEngineInfoValidity', args);
294 * Callback for the completion of an input validition check.
295 * @param {Object} validity A dictionary of validitation results.
297 validationComplete: function(validity) {
298 this.waitingForValidation_ = false;
299 // TODO(stuartmorgan): Implement the full validation UI with
300 // checkmark/exclamation mark icons and tooltips showing the errors.
302 this.nameField_.setCustomValidity('');
304 this.nameField_.setCustomValidity(
305 loadTimeData.getString('editSearchEngineInvalidTitleToolTip'));
308 if (validity.keyword) {
309 this.keywordField_.setCustomValidity('');
311 this.keywordField_.setCustomValidity(
312 loadTimeData.getString('editSearchEngineInvalidKeywordToolTip'));
316 this.urlField_.setCustomValidity('');
318 this.urlField_.setCustomValidity(
319 loadTimeData.getString('editSearchEngineInvalidURLToolTip'));
322 this.currentlyValid_ = validity.name && validity.keyword && validity.url;
328 * @extends {options.InlineEditableItemList}
330 var SearchEngineList = cr.ui.define('list');
332 SearchEngineList.prototype = {
333 __proto__: InlineEditableItemList.prototype,
337 * @param {SearchEngine} searchEngine
339 createItem: function(searchEngine) {
340 return new SearchEngineListItem(searchEngine);
344 deleteItemAtIndex: function(index) {
345 var modelIndex = this.dataModel.item(index).modelIndex;
346 chrome.send('removeSearchEngine', [String(modelIndex)]);
350 * Passes the results of an input validation check to the requesting row
351 * if it's still being edited.
352 * @param {number} modelIndex The model index of the item that was checked.
353 * @param {Object} validity A dictionary of validitation results.
355 validationComplete: function(validity, modelIndex) {
356 // If it's not still being edited, it no longer matters.
357 var currentSelection = this.selectedItem;
358 if (!currentSelection)
360 var listItem = this.getListItem(currentSelection);
361 if (listItem.editing && currentSelection.modelIndex == modelIndex)
362 listItem.validationComplete(validity);
368 SearchEngineList: SearchEngineList