OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2010 Google Inc. All rights reserved. | 2 * Copyright (C) 2010 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 22 matching lines...) Expand all Loading... |
33 */ | 33 */ |
34 UI.TabbedPane = class extends UI.VBox { | 34 UI.TabbedPane = class extends UI.VBox { |
35 constructor() { | 35 constructor() { |
36 super(true); | 36 super(true); |
37 this.registerRequiredCSS('ui/tabbedPane.css'); | 37 this.registerRequiredCSS('ui/tabbedPane.css'); |
38 this.element.classList.add('tabbed-pane'); | 38 this.element.classList.add('tabbed-pane'); |
39 this.contentElement.classList.add('tabbed-pane-shadow'); | 39 this.contentElement.classList.add('tabbed-pane-shadow'); |
40 this.contentElement.tabIndex = -1; | 40 this.contentElement.tabIndex = -1; |
41 this._headerElement = this.contentElement.createChild('div', 'tabbed-pane-he
ader'); | 41 this._headerElement = this.contentElement.createChild('div', 'tabbed-pane-he
ader'); |
42 this._headerContentsElement = this._headerElement.createChild('div', 'tabbed
-pane-header-contents'); | 42 this._headerContentsElement = this._headerElement.createChild('div', 'tabbed
-pane-header-contents'); |
43 this._headerContentsElement.setAttribute('aria-label', Common.UIString('Pane
ls')); | |
44 this._tabSlider = createElementWithClass('div', 'tabbed-pane-tab-slider'); | 43 this._tabSlider = createElementWithClass('div', 'tabbed-pane-tab-slider'); |
45 this._tabsElement = this._headerContentsElement.createChild('div', 'tabbed-p
ane-header-tabs'); | 44 this._tabsElement = this._headerContentsElement.createChild('div', 'tabbed-p
ane-header-tabs'); |
46 this._tabsElement.setAttribute('role', 'tablist'); | 45 this._tabsElement.setAttribute('role', 'tablist'); |
47 this._contentElement = this.contentElement.createChild('div', 'tabbed-pane-c
ontent'); | 46 this._contentElement = this.contentElement.createChild('div', 'tabbed-pane-c
ontent'); |
48 this._contentElement.setAttribute('role', 'tabpanel'); | 47 this._contentElement.setAttribute('role', 'tabpanel'); |
49 this._contentElement.createChild('content'); | 48 this._contentElement.createChild('content'); |
50 /** @type {!Array.<!UI.TabbedPaneTab>} */ | 49 /** @type {!Array.<!UI.TabbedPaneTab>} */ |
51 this._tabs = []; | 50 this._tabs = []; |
52 /** @type {!Array.<!UI.TabbedPaneTab>} */ | 51 /** @type {!Array.<!UI.TabbedPaneTab>} */ |
53 this._tabsHistory = []; | 52 this._tabsHistory = []; |
54 /** @type {!Map<string, !UI.TabbedPaneTab>} */ | 53 /** @type {!Map<string, !UI.TabbedPaneTab>} */ |
55 this._tabsById = new Map(); | 54 this._tabsById = new Map(); |
56 this._currentTabLocked = false; | 55 this._currentTabLocked = false; |
57 this._autoSelectFirstItemOnShow = true; | 56 this._autoSelectFirstItemOnShow = true; |
58 | 57 |
59 this._dropDownButton = this._createDropDownButton(); | 58 this._dropDownButton = this._createDropDownButton(); |
60 UI.zoomManager.addEventListener(UI.ZoomManager.Events.ZoomChanged, this._zoo
mChanged, this); | 59 UI.zoomManager.addEventListener(UI.ZoomManager.Events.ZoomChanged, this._zoo
mChanged, this); |
61 } | 60 } |
62 | 61 |
63 /** | 62 /** |
| 63 * @param {string} name |
| 64 */ |
| 65 setAccessibleName(name) { |
| 66 UI.ARIAUtils.setAccessibleName(this._tabsElement, name); |
| 67 } |
| 68 |
| 69 /** |
64 * @param {boolean} locked | 70 * @param {boolean} locked |
65 */ | 71 */ |
66 setCurrentTabLocked(locked) { | 72 setCurrentTabLocked(locked) { |
67 this._currentTabLocked = locked; | 73 this._currentTabLocked = locked; |
68 this._headerElement.classList.toggle('locked', this._currentTabLocked); | 74 this._headerElement.classList.toggle('locked', this._currentTabLocked); |
69 } | 75 } |
70 | 76 |
71 /** | 77 /** |
72 * @param {boolean} autoSelect | 78 * @param {boolean} autoSelect |
73 */ | 79 */ |
(...skipping 672 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
746 | 752 |
747 this._hideTab(this._currentTab); | 753 this._hideTab(this._currentTab); |
748 delete this._currentTab; | 754 delete this._currentTab; |
749 } | 755 } |
750 | 756 |
751 /** | 757 /** |
752 * @param {!UI.TabbedPaneTab} tab | 758 * @param {!UI.TabbedPaneTab} tab |
753 */ | 759 */ |
754 _showTab(tab) { | 760 _showTab(tab) { |
755 tab.tabElement.classList.add('selected'); | 761 tab.tabElement.classList.add('selected'); |
756 tab.tabElement.setAttribute('aria-selected', 'true'); | 762 UI.ARIAUtils.setSelected(tab.tabElement, true); |
757 tab.view.show(this.element); | 763 tab.view.show(this.element); |
758 this._updateTabSlider(); | 764 this._updateTabSlider(); |
759 } | 765 } |
760 | 766 |
761 _updateTabSlider() { | 767 _updateTabSlider() { |
762 if (!this._currentTab || !this._sliderEnabled) | 768 if (!this._currentTab || !this._sliderEnabled) |
763 return; | 769 return; |
764 var left = 0; | 770 var left = 0; |
765 for (var i = 0; i < this._tabs.length && this._currentTab !== this._tabs[i]
&& this._tabs[i]._shown; i++) | 771 for (var i = 0; i < this._tabs.length && this._currentTab !== this._tabs[i]
&& this._tabs[i]._shown; i++) |
766 left += this._tabs[i]._measuredWidth; | 772 left += this._tabs[i]._measuredWidth; |
(...skipping 249 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1016 } | 1022 } |
1017 | 1023 |
1018 /** | 1024 /** |
1019 * @param {boolean} measuring | 1025 * @param {boolean} measuring |
1020 * @return {!Element} | 1026 * @return {!Element} |
1021 */ | 1027 */ |
1022 _createTabElement(measuring) { | 1028 _createTabElement(measuring) { |
1023 var tabElement = createElementWithClass('div', 'tabbed-pane-header-tab'); | 1029 var tabElement = createElementWithClass('div', 'tabbed-pane-header-tab'); |
1024 tabElement.id = 'tab-' + this._id; | 1030 tabElement.id = 'tab-' + this._id; |
1025 tabElement.tabIndex = -1; | 1031 tabElement.tabIndex = -1; |
1026 tabElement.setAttribute('role', 'tab'); | 1032 UI.ARIAUtils.markAsTab(tabElement); |
1027 tabElement.setAttribute('aria-selected', 'false'); | 1033 UI.ARIAUtils.setSelected(tabElement, false); |
1028 tabElement.selectTabForTest = this._tabbedPane.selectTab.bind(this._tabbedPa
ne, this.id, true); | 1034 tabElement.selectTabForTest = this._tabbedPane.selectTab.bind(this._tabbedPa
ne, this.id, true); |
1029 | 1035 |
1030 var titleElement = tabElement.createChild('span', 'tabbed-pane-header-tab-ti
tle'); | 1036 var titleElement = tabElement.createChild('span', 'tabbed-pane-header-tab-ti
tle'); |
1031 titleElement.textContent = this.title; | 1037 titleElement.textContent = this.title; |
1032 titleElement.title = this.tooltip || ''; | 1038 titleElement.title = this.tooltip || ''; |
1033 this._createIconElement(tabElement, titleElement, measuring); | 1039 this._createIconElement(tabElement, titleElement, measuring); |
1034 if (!measuring) | 1040 if (!measuring) |
1035 this._titleElement = titleElement; | 1041 this._titleElement = titleElement; |
1036 | 1042 |
1037 if (this._closeable) | 1043 if (this._closeable) |
(...skipping 178 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1216 * @param {!Array.<string>} ids | 1222 * @param {!Array.<string>} ids |
1217 */ | 1223 */ |
1218 closeTabs(tabbedPane, ids) {}, | 1224 closeTabs(tabbedPane, ids) {}, |
1219 | 1225 |
1220 /** | 1226 /** |
1221 * @param {string} tabId | 1227 * @param {string} tabId |
1222 * @param {!UI.ContextMenu} contextMenu | 1228 * @param {!UI.ContextMenu} contextMenu |
1223 */ | 1229 */ |
1224 onContextMenu(tabId, contextMenu) {} | 1230 onContextMenu(tabId, contextMenu) {} |
1225 }; | 1231 }; |
OLD | NEW |