Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(358)

Side by Side Diff: chrome/browser/resources/options/inline_editable_list.js

Issue 819193003: Fix list focus after tab key in chrome://settings/autofillEditAddress page. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove a couple log statements and add a comment. Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. 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 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 cr.define('options', function() { 5 cr.define('options', function() {
6 /** @const */ var DeletableItem = options.DeletableItem; 6 /** @const */ var DeletableItem = options.DeletableItem;
7 /** @const */ var DeletableItemList = options.DeletableItemList; 7 /** @const */ var DeletableItemList = options.DeletableItemList;
8 8
9 /** 9 /**
10 * Creates a new list item with support for inline editing. 10 * Creates a new list item with support for inline editing.
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after
78 DeletableItem.prototype.decorate.call(this); 78 DeletableItem.prototype.decorate.call(this);
79 79
80 this.editFields_ = []; 80 this.editFields_ = [];
81 this.addEventListener('mousedown', this.handleMouseDown_); 81 this.addEventListener('mousedown', this.handleMouseDown_);
82 this.addEventListener('keydown', this.handleKeyDown_); 82 this.addEventListener('keydown', this.handleKeyDown_);
83 this.addEventListener('focusin', this.handleFocusIn_); 83 this.addEventListener('focusin', this.handleFocusIn_);
84 }, 84 },
85 85
86 /** @override */ 86 /** @override */
87 selectionChanged: function() { 87 selectionChanged: function() {
88 this.updateEditState(); 88 if (!this.parentNode.ignoreChangeEvents_)
89 this.updateEditState();
89 }, 90 },
90 91
91 /** 92 /**
92 * Called when this element gains or loses 'lead' status. Updates editing 93 * Called when this element gains or loses 'lead' status. Updates editing
93 * mode accordingly. 94 * mode accordingly.
94 */ 95 */
95 updateLeadState: function() { 96 updateLeadState: function() {
96 // Add focusability before call to updateEditState. 97 // Add focusability before call to updateEditState.
97 if (this.lead) { 98 if (this.lead) {
98 this.setEditableValuesFocusable(true); 99 this.setEditableValuesFocusable(true);
(...skipping 470 matching lines...) Expand 10 before | Expand all | Expand 10 after
569 /** 570 /**
570 * @constructor 571 * @constructor
571 * @extends {options.DeletableItemList} 572 * @extends {options.DeletableItemList}
572 */ 573 */
573 var InlineEditableItemList = cr.ui.define('list'); 574 var InlineEditableItemList = cr.ui.define('list');
574 575
575 InlineEditableItemList.prototype = { 576 InlineEditableItemList.prototype = {
576 __proto__: DeletableItemList.prototype, 577 __proto__: DeletableItemList.prototype,
577 578
578 /** 579 /**
580 * Whether to ignore list change events.
581 * Used to modify the list without processing selection change and lead
582 * change events.
583 * @type {boolean}
584 * @private
585 */
586 ignoreChangeEvents_: false,
587
588 /**
579 * Focuses the input element of the placeholder if true. 589 * Focuses the input element of the placeholder if true.
580 * @type {boolean} 590 * @type {boolean}
581 * @private 591 * @private
582 */ 592 */
583 needsToFocusPlaceholder_: false, 593 needsToFocusPlaceholder_: false,
584 594
585 /** @override */ 595 /** @override */
586 decorate: function() { 596 decorate: function() {
587 DeletableItemList.prototype.decorate.call(this); 597 DeletableItemList.prototype.decorate.call(this);
588 this.setAttribute('inlineeditable', ''); 598 this.setAttribute('inlineeditable', '');
(...skipping 28 matching lines...) Expand all
617 leadItem.editing = false; 627 leadItem.editing = false;
618 // Remove focusability after making other changes. 628 // Remove focusability after making other changes.
619 if (!leadItem.isPlaceholder) 629 if (!leadItem.isPlaceholder)
620 leadItem.setEditableValuesFocusable(false); 630 leadItem.setEditableValuesFocusable(false);
621 } 631 }
622 } 632 }
623 }, 633 },
624 634
625 /** @override */ 635 /** @override */
626 handleLeadChange: function(e) { 636 handleLeadChange: function(e) {
637 if (this.ignoreChangeEvents_)
638 return;
639
627 DeletableItemList.prototype.handleLeadChange.call(this, e); 640 DeletableItemList.prototype.handleLeadChange.call(this, e);
628 641
629 var focusedColumnIndex = -1; 642 var focusedColumnIndex = -1;
630 if (e.oldValue != -1) { 643 if (e.oldValue != -1) {
631 var element = this.getListItemByIndex(e.oldValue); 644 var element = this.getListItemByIndex(e.oldValue);
632 if (element) { 645 if (element) {
633 focusedColumnIndex = element.focusedColumnIndex; 646 focusedColumnIndex = element.focusedColumnIndex;
634 element.updateLeadState(); 647 element.updateLeadState();
635 } 648 }
636 } 649 }
(...skipping 18 matching lines...) Expand all
655 if (item) { 668 if (item) {
656 item.setStaticValuesFocusable(true); 669 item.setStaticValuesFocusable(true);
657 item.setCloseButtonFocusable(true); 670 item.setCloseButtonFocusable(true);
658 if (item.isPlaceholder) 671 if (item.isPlaceholder)
659 item.setEditableValuesFocusable(true); 672 item.setEditableValuesFocusable(true);
660 } 673 }
661 } 674 }
662 }, 675 },
663 676
664 /** 677 /**
678 * Execute |callback| with list change events disabled. Selection change and
679 * lead change events will not be processed.
680 * @param {!Function} callback The function to execute.
681 * @protected
682 */
683 ignoreChangeEvents: function(callback) {
684 assert(!this.ignoreChangeEvents_);
685 this.ignoreChangeEvents_ = true;
686 callback();
687 this.ignoreChangeEvents_ = false;
688 },
689
690 /**
691 * Set the selected index without changing the focused element on the page.
692 * Used to change the selected index when the list doesn't have focus (and
693 * doesn't want to take focus).
694 * @param {number} index The index to select.
695 */
696 selectIndexWithoutFocusing: function(index) {
697 // Remove focusability from old item.
698 var oldItem = this.getListItemByIndex(this.selectionModel.leadIndex) ||
699 this.getInitialFocusableItem();
700 if (oldItem) {
701 oldItem.setEditableValuesFocusable(false);
702 oldItem.setStaticValuesFocusable(false);
703 oldItem.setCloseButtonFocusable(false);
704 oldItem.lead = false;
705 }
706
707 // Select the new item.
708 this.ignoreChangeEvents(function() {
709 this.selectionModel.selectedIndex = index;
710 }.bind(this));
711
712 // Add focusability to new item.
713 var newItem = this.getListItemByIndex(index);
714 if (newItem) {
715 if (newItem.isPlaceholder)
716 newItem.setEditableValuesFocusable(true);
717 else
718 newItem.setStaticValuesFocusable(true);
719
720 newItem.setCloseButtonFocusable(true);
721 newItem.lead = true;
722 }
723 },
724
725 /**
665 * Focus the placeholder's first input field. 726 * Focus the placeholder's first input field.
666 * Should only be called immediately after the list has been repopulated. 727 * Should only be called immediately after the list has been repopulated.
667 */ 728 */
668 focusPlaceholder: function() { 729 focusPlaceholder: function() {
669 // Remove focusability from initial item. 730 // Remove focusability from initial item.
670 var item = this.getInitialFocusableItem(); 731 var item = this.getInitialFocusableItem();
671 if (item) { 732 if (item) {
672 item.setStaticValuesFocusable(false); 733 item.setStaticValuesFocusable(false);
673 item.setCloseButtonFocusable(false); 734 item.setCloseButtonFocusable(false);
674 } 735 }
(...skipping 29 matching lines...) Expand all
704 this.getListItemByIndex(0)); 765 this.getListItemByIndex(0));
705 }, 766 },
706 }; 767 };
707 768
708 // Export 769 // Export
709 return { 770 return {
710 InlineEditableItem: InlineEditableItem, 771 InlineEditableItem: InlineEditableItem,
711 InlineEditableItemList: InlineEditableItemList, 772 InlineEditableItemList: InlineEditableItemList,
712 }; 773 };
713 }); 774 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698