@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 23.8 kB
JavaScript
import*as Common from"../../core/common/common.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as IconButton from"../components/icon_button/icon_button.js";import*as ARIAUtils from"./ARIAUtils.js";import{ContextMenu}from"./ContextMenu.js";import{Constraints,Size}from"./Geometry.js";import{Icon}from"./Icon.js";import{Toolbar}from"./Toolbar.js";import{Tooltip}from"./Tooltip.js";import{installDragHandle,invokeOnceAfterBatchUpdate}from"./UIUtils.js";import{VBox}from"./Widget.js";import{ZoomManager}from"./ZoomManager.js";import tabbedPaneStyles from"./tabbedPane.css.legacy.js";const UIStrings={moreTabs:"More tabs",closeS:"Close {PH1}",close:"Close",closeOthers:"Close others",closeTabsToTheRight:"Close tabs to the right",closeAll:"Close all",previewFeature:"Preview feature"},str_=i18n.i18n.registerUIStrings("ui/legacy/TabbedPane.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class TabbedPane extends(Common.ObjectWrapper.eventMixin(VBox)){headerElementInternal;headerContentsElement;tabSlider;tabsElement;contentElementInternal;tabs;tabsHistory;tabsById;currentTabLocked;autoSelectFirstItemOnShow;triggerDropDownTimeout;dropDownButton;currentDevicePixelRatio;shrinkableTabs;verticalTabLayout;closeableTabs;delegate;currentTab;sliderEnabled;placeholderElement;focusedPlaceholderElement;placeholderContainerElement;lastSelectedOverflowTab;overflowDisabled;measuredDropDownButtonWidth;leftToolbarInternal;rightToolbarInternal;allowTabReorder;automaticReorder;constructor(){super(!0),this.registerRequiredCSS(tabbedPaneStyles),this.element.classList.add("tabbed-pane"),this.contentElement.classList.add("tabbed-pane-shadow"),this.contentElement.tabIndex=-1,this.setDefaultFocusedElement(this.contentElement),this.headerElementInternal=this.contentElement.createChild("div","tabbed-pane-header"),this.headerContentsElement=this.headerElementInternal.createChild("div","tabbed-pane-header-contents"),this.tabSlider=document.createElement("div"),this.tabSlider.classList.add("tabbed-pane-tab-slider"),this.tabsElement=this.headerContentsElement.createChild("div","tabbed-pane-header-tabs"),this.tabsElement.setAttribute("role","tablist"),this.tabsElement.addEventListener("keydown",this.keyDown.bind(this),!1),this.contentElementInternal=this.contentElement.createChild("div","tabbed-pane-content"),this.contentElementInternal.createChild("slot"),this.tabs=[],this.tabsHistory=[],this.tabsById=new Map,this.currentTabLocked=!1,this.autoSelectFirstItemOnShow=!0,this.triggerDropDownTimeout=null,this.dropDownButton=this.createDropDownButton(),this.currentDevicePixelRatio=window.devicePixelRatio,ZoomManager.instance().addEventListener("ZoomChanged",this.zoomChanged,this),this.makeTabSlider()}setAccessibleName(t){ARIAUtils.setLabel(this.tabsElement,t)}setCurrentTabLocked(t){this.currentTabLocked=t,this.headerElementInternal.classList.toggle("locked",this.currentTabLocked)}setAutoSelectFirstItemOnShow(t){this.autoSelectFirstItemOnShow=t}get visibleView(){return this.currentTab?this.currentTab.view:null}tabIds(){return this.tabs.map((t=>t.id))}tabIndex(t){return this.tabs.findIndex((e=>e.id===t))}tabViews(){return this.tabs.map((t=>t.view))}tabView(t){const e=this.tabsById.get(t);return e?e.view:null}get selectedTabId(){return this.currentTab?this.currentTab.id:null}setShrinkableTabs(t){this.shrinkableTabs=t}makeVerticalTabLayout(){this.verticalTabLayout=!0,this.setTabSlider(!1),this.contentElement.classList.add("vertical-tab-layout"),this.invalidateConstraints()}setCloseableTabs(t){this.closeableTabs=t}focus(){this.visibleView?this.visibleView.focus():this.contentElement.focus()}focusSelectedTabHeader(){const t=this.currentTab;t&&t.tabElement.focus()}headerElement(){return this.headerElementInternal}tabbedPaneContentElement(){return this.contentElementInternal}isTabCloseable(t){const e=this.tabsById.get(t);return!!e&&e.isCloseable()}setTabDelegate(t){const e=this.tabs.slice();for(let s=0;s<e.length;++s)e[s].setDelegate(t);this.delegate=t}appendTab(t,e,s,n,i,a,o,r){const l="boolean"==typeof a?a:Boolean(this.closeableTabs),h=new TabbedPaneTab(this,t,e,l,Boolean(o),s,n);h.setDelegate(this.delegate),console.assert(!this.tabsById.has(t),`Tabbed pane already contains a tab with id '${t}'`),this.tabsById.set(t,h),h.tabElement.tabIndex=-1,void 0!==r?this.tabs.splice(r,0,h):this.tabs.push(h),this.tabsHistory.push(h),this.tabsHistory[0]===h&&this.isShowing()&&this.selectTab(h.id,i),this.updateTabElements()}closeTab(t,e){this.closeTabs([t],e)}closeTabs(t,e){if(0===t.length)return;const s=this.hasFocus();for(let s=0;s<t.length;++s)this.innerCloseTab(t[s],e);this.updateTabElements(),this.tabsHistory.length&&this.selectTab(this.tabsHistory[0].id,!1),s&&this.focus()}innerCloseTab(t,e){const s=this.tabsById.get(t);if(!s)return;if(e&&!s.closeable)return;this.currentTab&&this.currentTab.id===t&&this.hideCurrentTab(),this.tabsById.delete(t),this.tabsHistory.splice(this.tabsHistory.indexOf(s),1),this.tabs.splice(this.tabs.indexOf(s),1),s.shown&&this.hideTabElement(s);const n={prevTabId:void 0,tabId:t,view:s.view,isUserGesture:e};return this.dispatchEventToListeners(Events.TabClosed,n),!0}hasTab(t){return this.tabsById.has(t)}otherTabs(t){const e=[];for(let s=0;s<this.tabs.length;++s)this.tabs[s].id!==t&&e.push(this.tabs[s].id);return e}tabsToTheRight(t){let e=-1;for(let s=0;s<this.tabs.length;++s)if(this.tabs[s].id===t){e=s;break}return-1===e?[]:this.tabs.slice(e+1).map((function(t){return t.id}))}viewHasFocus(){if(this.visibleView&&this.visibleView.hasFocus())return!0;const t=this.contentElement.getComponentRoot();return t instanceof Document&&this.contentElement===t.activeElement}selectTab(t,e,s){if(this.currentTabLocked)return!1;const n=this.viewHasFocus(),i=this.tabsById.get(t);if(!i)return!1;const a={prevTabId:this.currentTab?this.currentTab.id:void 0,tabId:t,view:i.view,isUserGesture:e};return this.dispatchEventToListeners(Events.TabInvoked,a),this.currentTab&&this.currentTab.id===t||(this.suspendInvalidations(),this.hideCurrentTab(),this.showTab(i),this.resumeInvalidations(),this.currentTab=i,this.tabsHistory.splice(this.tabsHistory.indexOf(i),1),this.tabsHistory.splice(0,0,i),this.updateTabElements(),(n||s)&&this.focus(),this.dispatchEventToListeners(Events.TabSelected,a)),!0}selectNextTab(){const t=this.tabs.indexOf(this.currentTab),e=Platform.NumberUtilities.mod(t+1,this.tabs.length);this.selectTab(this.tabs[e].id,!0)}selectPrevTab(){const t=this.tabs.indexOf(this.currentTab),e=Platform.NumberUtilities.mod(t-1,this.tabs.length);this.selectTab(this.tabs[e].id,!0)}lastOpenedTabIds(t){return this.tabsHistory.slice(0,t).map((function(t){return t.id}))}setTabIcon(t,e){const s=this.tabsById.get(t);s&&(s.setIcon(e),this.updateTabElements())}setTabEnabled(t,e){const s=this.tabsById.get(t);s&&s.tabElement.classList.toggle("disabled",!e)}toggleTabClass(t,e,s){const n=this.tabsById.get(t);n&&n.toggleClass(e,s)&&this.updateTabElements()}zoomChanged(){this.clearMeasuredWidths(),this.isShowing()&&this.updateTabElements()}clearMeasuredWidths(){for(let t=0;t<this.tabs.length;++t)delete this.tabs[t].measuredWidth}changeTabTitle(t,e,s){const n=this.tabsById.get(t);n&&void 0!==s&&(n.tooltip=s),n&&n.title!==e&&(n.title=e,ARIAUtils.setLabel(n.tabElement,e),this.updateTabElements())}changeTabView(t,e){const s=this.tabsById.get(t);if(!s||s.view===e)return;this.suspendInvalidations();const n=this.currentTab&&this.currentTab.id===t,i=s.view.hasFocus();n&&this.hideTab(s),s.view=e,n&&this.showTab(s),i&&s.view.focus(),this.resumeInvalidations()}onResize(){this.currentDevicePixelRatio!==window.devicePixelRatio&&(this.clearMeasuredWidths(),this.currentDevicePixelRatio=window.devicePixelRatio),this.updateTabElements()}headerResized(){this.updateTabElements()}wasShown(){const t=this.currentTab||this.tabsHistory[0];t&&this.autoSelectFirstItemOnShow&&this.selectTab(t.id)}makeTabSlider(){this.verticalTabLayout||this.setTabSlider(!0)}setTabSlider(t){this.sliderEnabled=t,this.tabSlider.classList.toggle("enabled",t)}calculateConstraints(){let t=super.calculateConstraints();const e=new Constraints(new Size(0,0),new Size(50,50));return t=t.widthToMax(e).heightToMax(e),t=this.verticalTabLayout?t.addWidth(new Constraints(new Size(120,0))):t.addHeight(new Constraints(new Size(0,30))),t}updateTabElements(){invokeOnceAfterBatchUpdate(this,this.innerUpdateTabElements)}setPlaceholderElement(t,e){this.placeholderElement=t,e&&(this.focusedPlaceholderElement=e),this.placeholderContainerElement&&(this.placeholderContainerElement.removeChildren(),this.placeholderContainerElement.appendChild(t))}async waitForTabElementUpdate(){this.innerUpdateTabElements()}innerUpdateTabElements(){this.isShowing()&&(this.tabs.length?(this.contentElementInternal.classList.remove("has-no-tabs"),this.placeholderContainerElement&&(this.placeholderContainerElement.remove(),this.setDefaultFocusedElement(this.contentElement),delete this.placeholderContainerElement)):(this.contentElementInternal.classList.add("has-no-tabs"),this.placeholderElement&&!this.placeholderContainerElement&&(this.placeholderContainerElement=this.contentElementInternal.createChild("div","tabbed-pane-placeholder fill"),this.placeholderContainerElement.appendChild(this.placeholderElement),this.focusedPlaceholderElement&&this.setDefaultFocusedElement(this.focusedPlaceholderElement))),this.measureDropDownButton(),this.adjustToolbarWidth(),this.updateWidths(),this.updateTabsDropDown(),this.updateTabSlider())}adjustToolbarWidth(){if(!this.rightToolbarInternal||!this.measuredDropDownButtonWidth)return;const t=this.leftToolbarInternal?.element.getBoundingClientRect().width??0,e=this.rightToolbarInternal.element.getBoundingClientRect().width,s=this.headerElementInternal.getBoundingClientRect().width;!this.rightToolbarInternal.hasCompactLayout()&&s-e-t<this.measuredDropDownButtonWidth+10?this.rightToolbarInternal.setCompactLayout(!0):this.rightToolbarInternal.hasCompactLayout()&&s-2*e-t>this.measuredDropDownButtonWidth+10&&this.rightToolbarInternal.setCompactLayout(!1)}showTabElement(t,e){t>=this.tabsElement.children.length?this.tabsElement.appendChild(e.tabElement):this.tabsElement.insertBefore(e.tabElement,this.tabsElement.children[t]),e.shown=!0}hideTabElement(t){this.tabsElement.removeChild(t.tabElement),t.shown=!1}createDropDownButton(){const t=document.createElement("div");t.classList.add("tabbed-pane-header-tabs-drop-down-container");const e=Icon.create("chevron-double-right","chevron-icon"),s=i18nString(UIStrings.moreTabs);return t.title=s,ARIAUtils.markAsMenuButton(t),ARIAUtils.setLabel(t,s),t.tabIndex=0,t.appendChild(e),t.addEventListener("click",this.dropDownClicked.bind(this)),t.addEventListener("keydown",this.dropDownKeydown.bind(this)),t.addEventListener("mousedown",(t=>{0!==t.button||this.triggerDropDownTimeout||(this.triggerDropDownTimeout=window.setTimeout(this.dropDownClicked.bind(this,t),200))})),t}dropDownClicked(t){const e=t;if(0!==e.button)return;this.triggerDropDownTimeout&&(clearTimeout(this.triggerDropDownTimeout),this.triggerDropDownTimeout=null);const s=this.dropDownButton.getBoundingClientRect(),n=new ContextMenu(e,{useSoftMenu:!1,x:s.left,y:s.bottom});for(const t of this.tabs)t.shown||(0===this.numberOfTabsShown()&&this.tabsHistory[0]===t?n.defaultSection().appendCheckboxItem(t.title,this.dropDownMenuItemSelected.bind(this,t),!0):n.defaultSection().appendItem(t.title,this.dropDownMenuItemSelected.bind(this,t)));n.show()}dropDownKeydown(t){Platform.KeyboardUtilities.isEnterOrSpaceKey(t)&&(this.dropDownButton.click(),t.consume(!0))}dropDownMenuItemSelected(t){this.lastSelectedOverflowTab=t,this.selectTab(t.id,!0,!0)}totalWidth(){return this.headerContentsElement.getBoundingClientRect().width}numberOfTabsShown(){let t=0;for(const e of this.tabs)e.shown&&t++;return t}disableOverflowMenu(){this.overflowDisabled=!0}updateTabsDropDown(){const t=this.tabsToShowIndexes(this.tabs,this.tabsHistory,this.totalWidth(),this.measuredDropDownButtonWidth||0);if(this.lastSelectedOverflowTab&&this.numberOfTabsShown()!==t.length)return delete this.lastSelectedOverflowTab,void this.updateTabsDropDown();for(let e=0;e<this.tabs.length;++e)this.tabs[e].shown&&-1===t.indexOf(e)&&this.hideTabElement(this.tabs[e]);for(let e=0;e<t.length;++e){const s=this.tabs[t[e]];s.shown||this.showTabElement(e,s)}this.overflowDisabled||this.maybeShowDropDown(t.length!==this.tabs.length)}maybeShowDropDown(t){t&&!this.dropDownButton.parentElement?this.headerContentsElement.appendChild(this.dropDownButton):!t&&this.dropDownButton.parentElement&&this.headerContentsElement.removeChild(this.dropDownButton)}measureDropDownButton(){this.overflowDisabled||this.measuredDropDownButtonWidth||(this.dropDownButton.classList.add("measuring"),this.headerContentsElement.appendChild(this.dropDownButton),this.measuredDropDownButtonWidth=this.dropDownButton.getBoundingClientRect().width,this.headerContentsElement.removeChild(this.dropDownButton),this.dropDownButton.classList.remove("measuring"))}updateWidths(){const t=this.measureWidths(),e=this.shrinkableTabs?this.calculateMaxWidth(t.slice(),this.totalWidth()):Number.MAX_VALUE;let s=0;for(const n of this.tabs)n.setWidth(this.verticalTabLayout?-1:Math.min(e,t[s++]))}measureWidths(){this.tabsElement.style.setProperty("width","2000px");const t=new Map;for(const e of this.tabs){if("number"==typeof e.measuredWidth)continue;const s=e.createTabElement(!0);t.set(s,e),this.tabsElement.appendChild(s)}for(const[e,s]of t){const t=e.getBoundingClientRect().width;s.measuredWidth=Math.ceil(t)}for(const e of t.keys())e.remove();const e=[];for(const t of this.tabs)e.push(t.measuredWidth||0);return this.tabsElement.style.removeProperty("width"),e}calculateMaxWidth(t,e){if(!t.length)return 0;t.sort((function(t,e){return t-e}));let s=0;for(let e=0;e<t.length;++e)s+=t[e];if(e>=s)return t[t.length-1];let n=0;for(let i=t.length-1;i>0;--i){const a=t[i]-t[i-1];if(n+=(t.length-i)*a,e+n>=s)return t[i-1]+(e+n-s)/(t.length-i)}return e/t.length}tabsToShowIndexes(t,e,s,n){const i=[];let a=0;const o=t.length,r=t.slice(0);void 0!==this.currentTab&&r.unshift(r.splice(r.indexOf(this.currentTab),1)[0]),void 0!==this.lastSelectedOverflowTab&&r.unshift(r.splice(r.indexOf(this.lastSelectedOverflowTab),1)[0]);for(let l=0;l<o;++l){const h=this.automaticReorder?e[l]:r[l];a+=h.width();let d=a;if(l!==o-1&&(d+=n),!this.verticalTabLayout&&d>s)break;i.push(t.indexOf(h))}return i.sort((function(t,e){return t-e})),i}hideCurrentTab(){this.currentTab&&(this.hideTab(this.currentTab),delete this.currentTab)}showTab(t){t.tabElement.tabIndex=0,t.tabElement.classList.add("selected"),ARIAUtils.setSelected(t.tabElement,!0),t.view.show(this.element),this.updateTabSlider()}updateTabSlider(){if(!this.sliderEnabled)return;if(!this.currentTab)return void(this.tabSlider.style.width="0");let t=0;for(let e=0;e<this.tabs.length&&this.currentTab!==this.tabs[e];e++)this.tabs[e].shown&&(t+=this.tabs[e].measuredWidth||0);const e=this.currentTab.shown?this.currentTab.measuredWidth:this.dropDownButton.offsetWidth,s=window.devicePixelRatio>=1.5?" scaleY(0.75)":"";this.tabSlider.style.transform="translateX("+t+"px)"+s,this.tabSlider.style.width=e+"px",this.tabSlider.parentElement!==this.headerContentsElement&&this.headerContentsElement.appendChild(this.tabSlider)}hideTab(t){t.tabElement.removeAttribute("tabIndex"),t.tabElement.classList.remove("selected"),t.tabElement.tabIndex=-1,t.tabElement.setAttribute("aria-selected","false"),t.view.detach()}elementsToRestoreScrollPositionsFor(){return[this.contentElementInternal]}insertBefore(t,e){this.tabsElement.insertBefore(t.tabElement,this.tabsElement.childNodes[e]);const s=this.tabs.indexOf(t);this.tabs.splice(s,1),s<e&&--e,this.tabs.splice(e,0,t);const n={prevTabId:void 0,tabId:t.id,view:t.view,isUserGesture:void 0};this.dispatchEventToListeners(Events.TabOrderChanged,n)}leftToolbar(){return this.leftToolbarInternal||(this.leftToolbarInternal=new Toolbar("tabbed-pane-left-toolbar"),this.headerElementInternal.insertBefore(this.leftToolbarInternal.element,this.headerElementInternal.firstChild)),this.leftToolbarInternal}rightToolbar(){return this.rightToolbarInternal||(this.rightToolbarInternal=new Toolbar("tabbed-pane-right-toolbar"),this.headerElementInternal.appendChild(this.rightToolbarInternal.element)),this.rightToolbarInternal}setAllowTabReorder(t,e){this.allowTabReorder=t,this.automaticReorder=e}keyDown(t){if(!this.currentTab)return;let e=null;switch(t.key){case"ArrowUp":case"ArrowLeft":e=this.currentTab.tabElement.previousElementSibling,e||this.dropDownButton.parentElement||(e=this.currentTab.tabElement.parentElement?this.currentTab.tabElement.parentElement.lastElementChild:null);break;case"ArrowDown":case"ArrowRight":e=this.currentTab.tabElement.nextElementSibling,e||this.dropDownButton.parentElement||(e=this.currentTab.tabElement.parentElement?this.currentTab.tabElement.parentElement.firstElementChild:null);break;case"Enter":case" ":return void this.currentTab.view.focus();default:return}if(!e)return void this.dropDownButton.click();const s=this.tabs.find((t=>t.tabElement===e));s&&this.selectTab(s.id,!0),e.focus()}}export var Events;!function(t){t.TabInvoked="TabInvoked",t.TabSelected="TabSelected",t.TabClosed="TabClosed",t.TabOrderChanged="TabOrderChanged"}(Events||(Events={}));export class TabbedPaneTab{closeable;previewFeature=!1;tabbedPane;idInternal;titleInternal;tooltipInternal;viewInternal;shown;measuredWidth;tabElementInternal;iconContainer;icon;widthInternal;delegate;titleElement;dragStartX;constructor(t,e,s,n,i,a,o){this.closeable=n,this.previewFeature=i,this.tabbedPane=t,this.idInternal=e,this.titleInternal=s,this.tooltipInternal=o,this.viewInternal=a,this.shown=!1,this.iconContainer=null}get id(){return this.idInternal}get title(){return this.titleInternal}set title(t){if(t!==this.titleInternal){if(this.titleInternal=t,this.titleElement){this.titleElement.textContent=t;const e=this.tabElementInternal?.querySelector(".close-button");e?.setAttribute("title",i18nString(UIStrings.closeS,{PH1:t})),e?.setAttribute("aria-label",i18nString(UIStrings.closeS,{PH1:t}))}delete this.measuredWidth}}isCloseable(){return this.closeable}setIcon(t){this.icon=t,this.tabElementInternal&&this.titleElement&&this.createIconElement(this.tabElementInternal,this.titleElement,!1),delete this.measuredWidth}toggleClass(t,e){const s=this.tabElement;return s.classList.contains(t)!==e&&(s.classList.toggle(t,e),delete this.measuredWidth,!0)}get view(){return this.viewInternal}set view(t){this.viewInternal=t}get tooltip(){return this.tooltipInternal}set tooltip(t){this.tooltipInternal=t,this.titleElement&&Tooltip.install(this.titleElement,t||"")}get tabElement(){return this.tabElementInternal||(this.tabElementInternal=this.createTabElement(!1)),this.tabElementInternal}width(){return this.widthInternal||0}setWidth(t){this.tabElement.style.width=-1===t?"":t+"px",this.widthInternal=t}setDelegate(t){this.delegate=t}createIconElement(t,e,s){const n=tabIcons.get(t);if(n&&(n.remove(),tabIcons.delete(t)),!this.icon)return;const i=document.createElement("span");i.classList.add("tabbed-pane-header-tab-icon");const a=s?this.createMeasureClone(this.icon):this.icon;i.appendChild(a),t.insertBefore(i,e),tabIcons.set(t,i)}createMeasureClone(t){if("data"in t&&t.data.width&&t.data.height){const e=document.createElement("div");return e.style.width=t.data.width,e.style.height=t.data.height,e}return t.cloneNode(!0)}createTabElement(t){const e=document.createElement("div");e.classList.add("tabbed-pane-header-tab"),e.id="tab-"+this.idInternal,ARIAUtils.markAsTab(e),ARIAUtils.setSelected(e,!1),ARIAUtils.setLabel(e,this.title);const s=e.createChild("span","tabbed-pane-header-tab-title");if(s.textContent=this.title,Tooltip.install(s,this.tooltip||""),this.createIconElement(e,s,t),t||(this.titleElement=s),this.previewFeature){const t=this.createPreviewIcon();e.appendChild(t),e.classList.add("preview")}if(this.closeable){const t=this.createCloseIconButton();e.appendChild(t),e.classList.add("closeable")}return t?e.classList.add("measuring"):(e.addEventListener("click",this.tabClicked.bind(this),!1),e.addEventListener("auxclick",this.tabClicked.bind(this),!1),e.addEventListener("mousedown",this.tabMouseDown.bind(this),!1),e.addEventListener("mouseup",this.tabMouseUp.bind(this),!1),e.addEventListener("contextmenu",this.tabContextMenu.bind(this),!1),this.tabbedPane.allowTabReorder&&installDragHandle(e,this.startTabDragging.bind(this),this.tabDragging.bind(this),this.endTabDragging.bind(this),null,null,200)),e}createCloseIconButton(){const t=document.createElement("div");t.classList.add("close-button","tabbed-pane-close-button");const e=new IconButton.Icon.Icon;return e.data={iconName:"cross",color:"var(--tabbed-pane-close-icon-color)",width:"16px"},t.appendChild(e),t.setAttribute("role","button"),t.setAttribute("title",i18nString(UIStrings.closeS,{PH1:this.title})),t.setAttribute("aria-label",i18nString(UIStrings.closeS,{PH1:this.title})),t}createPreviewIcon(){const t=document.createElement("div");t.classList.add("preview-icon");const e=new IconButton.Icon.Icon;return e.data={iconName:"experiment",color:"var(--override-tabbed-pane-preview-icon-color)",width:"16px"},t.appendChild(e),t.setAttribute("title",i18nString(UIStrings.previewFeature)),t.setAttribute("aria-label",i18nString(UIStrings.previewFeature)),t}isCloseIconClicked(t){return t?.classList.contains("tabbed-pane-close-button")||t?.parentElement?.classList.contains("tabbed-pane-close-button")||!1}tabClicked(t){const e=t,s=1===e.button;this.closeable&&(s||this.isCloseIconClicked(e.target))?(this.closeTabs([this.id]),e.consume(!0)):this.tabbedPane.focus()}tabMouseDown(t){const e=t;this.isCloseIconClicked(e.target)||0!==e.button||this.tabbedPane.selectTab(this.id,!0)}tabMouseUp(t){const e=t;1===e.button&&e.consume(!0)}closeTabs(t){this.delegate?this.delegate.closeTabs(this.tabbedPane,t):this.tabbedPane.closeTabs(t,!0)}tabContextMenu(t){const e=new ContextMenu(t);this.closeable&&(e.defaultSection().appendItem(i18nString(UIStrings.close),function(){this.closeTabs([this.id])}.bind(this)),e.defaultSection().appendItem(i18nString(UIStrings.closeOthers),function(){this.closeTabs(this.tabbedPane.otherTabs(this.id))}.bind(this)),e.defaultSection().appendItem(i18nString(UIStrings.closeTabsToTheRight),function(){this.closeTabs(this.tabbedPane.tabsToTheRight(this.id))}.bind(this)),e.defaultSection().appendItem(i18nString(UIStrings.closeAll),function(){this.closeTabs(this.tabbedPane.tabIds())}.bind(this))),this.delegate&&this.delegate.onContextMenu(this.id,e),e.show()}startTabDragging(t){const e=t;return!this.isCloseIconClicked(e.target)&&(this.dragStartX=e.pageX,this.tabElementInternal&&this.tabElementInternal.classList.add("dragging"),this.tabbedPane.tabSlider.remove(),!0)}tabDragging(t){const e=t,s=this.tabbedPane.tabsElement.childNodes;for(let t=0;t<s.length;++t){let n=s[t];if(!this.tabElementInternal||n===this.tabElementInternal)continue;if(!(n.offsetLeft+n.clientWidth>this.tabElementInternal.offsetLeft&&this.tabElementInternal.offsetLeft+this.tabElementInternal.clientWidth>n.offsetLeft))continue;const i=this.dragStartX;if(Math.abs(e.pageX-i)<n.clientWidth/2+5)break;e.pageX-i>0&&(n=n.nextSibling,++t);const a=this.tabElementInternal.offsetLeft;this.tabbedPane.insertBefore(this,t),this.dragStartX=i+this.tabElementInternal.offsetLeft-a;break}const n=this.dragStartX,i=this.tabElementInternal;!i.previousSibling&&e.pageX-n<0||!i.nextSibling&&e.pageX-n>0?i.style.setProperty("left","0px"):i.style.setProperty("left",e.pageX-n+"px")}endTabDragging(t){const e=this.tabElementInternal;e.classList.remove("dragging"),e.style.removeProperty("left"),delete this.dragStartX,this.tabbedPane.updateTabSlider()}}const tabIcons=new WeakMap;