Home - HardPin

HardPin is a makeshift solution to the much requested feature to pin tabs in Visual Studio Code. HardPin is implemented without access to any of VS Code's API, but could, with relative ease, be integrated in to the actual source code.

Important:
This feature is now being implemented in to the core of Visual Studio Code. Thanks to everyone involved!

Copy to Clipboard Getting Started How it Works

Brought to you by

!function(t){var e={};function n(a){if(e[a])return e[a].exports;var r=e[a]={i:a,l:!1,exports:{}};return t[a].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,a){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:a})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(a,r,function(e){return t[e]}.bind(null,r));return a},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=3)}([function(t,e,n){var a=n(1);t.exports="string"==typeof a?a:a.toString()},function(t,e,n){(e=n(2)(!1)).push([t.i,".tab.hard-pinned\r\n{\r\n    z-index: 1;\r\n    position: absolute !important;\r\n}\r\n\r\n.tab-close\r\n{\r\n    width: 20px !important;\r\n}\r\n\r\n.tab-hard-pin\r\n{\r\n    width: 10px;\r\n    height: 20px;\r\n    padding: 0 5px;\r\n    margin-top: auto;\r\n    margin-bottom: auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.tab-hard-pin-action\r\n{\r\n    flex: 1;\r\n    border-radius: 50%;\r\n    background: transparent;\r\n    border: 2px solid white;    \r\n    height: 6px;\r\n    width: 6px;\r\n}\r\n\r\n.tab.hard-pinned .tab-hard-pin-action\r\n{\r\n    background: white;\r\n}",""]),t.exports=e},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",a=t[3];if(!a)return n;if(e&&"function"==typeof btoa){var r=(i=a,o=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),l="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(o),"/*# ".concat(l," */")),s=a.sources.map((function(t){return"/*# sourceURL=".concat(a.sourceRoot||"").concat(t," */")}));return[n].concat(s).concat([r]).join("\n")}var i,o,l;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,a){"string"==typeof t&&(t=[[null,t,""]]);var r={};if(a)for(var s=0;s<this.length;s++){var i=this[s][0];null!=i&&(r[i]=!0)}for(var o=0;o<t.length;o++){var l=[].concat(t[o]);a&&r[l[0]]||(n&&(l[2]?l[2]="".concat(n," and ").concat(l[2]):l[2]=n),e.push(l))}},e}},function(t,e,n){"use strict";n.r(e);const a=n(4);class r{constructor(t,e,n,a,s,i){this.tabsAndActionsContainer=t,this.styleElement=e,this.tabScroller=n,this.tabsContainer=a,this.tabScrollBar=s,this.id="hard-pin-tab-control-"+r.tabControlCreationCount,this.tabsAndActionsContainer.id=this.id,this.hardPinnedTabsTitles=[],this.dragTitle="",this.dragTargetTitle="",this.useDoubleRows=i,this.extractHardPinnedTitlesFromElement(),this.tabsContainerMutationObserver=new MutationObserver(this.mutationCallbackGenerator(r.onTabsChanged,r.onTabsOrderChanged)),this.tabsContainerMutationObserver.observe(this.tabsContainer,{childList:!0,attributes:!0}),r.tabControlCreationCount++}destroy(){this.tabsContainerMutationObserver.disconnect()}static getAllTabControls(t){var e=[],n=document.getElementsByClassName(r.tabsAndActionsContainerClass);for(var a of n){var s=a.getElementsByClassName(r.tabScrollerClass)[0],i=s.getElementsByClassName(r.tabsContainerClass)[0],o=s.getElementsByClassName(r.tabScrollBarClass)[0],l=null,d=a.getElementsByTagName("style");d.length>0?l=d[0]:(l=document.createElement("style"),a.insertBefore(l,a.childNodes[0]));var c=new r(a,l,s,i,o,t);r.onTabsChanged(c),e.push(c)}return e}static onTabsChanged(t,e){let n=[];for(let e of t.tabsContainer.children)if(e.style.marginLeft="0px",e.classList.remove(r.hardPinnedClass),t.hardPinnedTabsTitles.includes(e.title)&&(e.classList.add(r.hardPinnedClass),n.push(e)),!e.classList.contains(t.getProcessedClass())){if(e.classList.add(t.getProcessedClass()),0==e.getElementsByClassName(r.hardPinClass).length){let t=e.getElementsByClassName(r.tabIconLabelClass)[0],n=document.createElement("div");n.className=r.hardPinClass;let a=document.createElement("a");a.className="action-label icon "+r.hardPinActionClass,a.title="Hard Pin",a.role="button",n.appendChild(a),e.insertBefore(n,t.nextSibling)}e.getElementsByClassName(r.hardPinClass)[0].onclick=function(n){t.toggleHardPinTitle(e.title)},e.addEventListener("dragstart",(function(n){t.dragTitle=e.title})),e.addEventListener("dragenter",(function(e){t.dragTargetTitle=e.currentTarget.title})),e.addEventListener("drop",(function(e){var n=t.hardPinnedTabsTitles.indexOf(t.dragTitle),s=t.hardPinnedTabsTitles.indexOf(t.dragTargetTitle);n>-1&&s>-1&&(a.mutate(t.hardPinnedTabsTitles,n,s),r.onTabsChanged(t,null))}))}let s=0,i=[];for(let e of t.hardPinnedTabsTitles){var o=null;for(let t of n)if(t.title==e){o=t,i.push(e);break}null!=o&&(o.style.marginLeft=s+"px",s+=o.offsetWidth)}t.hardPinnedTabsTitles=i,t.setStyle(s),t.saveHardPinnedTitlesInElement()}static onTabsOrderChanged(t,e){r.onTabsChanged(t,e)}mutationCallbackGenerator(t,e){var n=this;return function(a,r){for(let r=0;r<a.length;r++){let s=a[r];"childList"===s.type?t(n,s):"attributes"===s.type&&e(n,s)}}}setStyle(t){if(this.useDoubleRows){var e="35px",n="0px";t>0&&(e="70px",n="35px"),this.styleElement.innerHTML=`\n\n                #${this.id} .${r.tabsContainerClass}::before\n                {\n                    content: "";\n                    margin-left: 0px;\n                }\n\n                #${this.id} .${r.tabScrollerClass},\n                #${this.id} .${r.tabsContainerClass}\n                {\n                    height: ${e} !important;\n                }\n\n                #${this.id} .${r.tabClass}:not(.${r.hardPinnedClass})\n                {\n                    margin-top: ${n} !important;\n                } \n            `,window.dispatchEvent(new Event("resize"))}else this.styleElement.innerHTML=`\n\n                #${this.id} .${r.tabsContainerClass}::before\n                {\n                    content: "";\n                    margin-left: ${t}px;\n                }\n            `}getProcessedClass(){return r.processedClassPrefix+"-"+this.id}toggleHardPinTitle(t){if(this.hardPinnedTabsTitles.includes(t)){var e=this.hardPinnedTabsTitles.indexOf(t);this.hardPinnedTabsTitles.splice(e,1),event.stopPropagation?event.stopPropagation():window.event&&(window.event.cancelBubble=!0)}else this.hardPinnedTabsTitles.push(t);r.onTabsChanged(this,null,!0)}saveHardPinnedTitlesInElement(){this.tabsAndActionsContainer.dataset.hardPinnedTabsTitles=JSON.stringify(this.hardPinnedTabsTitles)}extractHardPinnedTitlesFromElement(){null!=this.tabsAndActionsContainer.dataset.hardPinnedTabsTitles&&(this.hardPinnedTabsTitles=JSON.parse(this.tabsAndActionsContainer.dataset.hardPinnedTabsTitles))}}r.tabControlCreationCount=0,r.tabsAndActionsContainerClass="tabs-and-actions-container",r.tabScrollerClass="monaco-scrollable-element",r.tabsContainerClass="tabs-container",r.tabScrollBarClass="scrollbar horizontal",r.tabClass="tab",r.tabIconLabelClass="monaco-icon-label",r.hardPinnedClass="hard-pinned",r.hardPinClass="tab-hard-pin",r.hardPinActionClass="tab-hard-pin-action",r.processedClassPrefix="processed";var s=n(0).toString(),i=n(5).toString();class o{static start(){o.editorContainer=document.getElementsByClassName(o.editorContainerClass)[0],o.editorContainerMutationObeserver=new MutationObserver(o.editorContainerMutationObserved),o.editorContainerMutationObeserver.observe(o.editorContainer,{childList:!0,subtree:!0}),o.styleElement=document.createElement("style"),document.head.appendChild(o.styleElement),o.styleElement.innerHTML="",o.styleElement.innerHTML=s,o.setAllTabControls(),o.listenForKeyboardShortcuts()}static setAllTabControls(){if(null!=o.tabControls)for(var t of o.tabControls)t.destroy();o.tabControls=r.getAllTabControls(o.doubleRow)}static editorContainerMutationObserved(t,e){null!=o.tabControls&&document.getElementsByClassName(r.tabsAndActionsContainerClass).length==o.tabControls.length||o.setAllTabControls()}static listenForKeyboardShortcuts(){document.addEventListener("keydown",(function(t){if(t.ctrlKey&&t.altKey&&"p"===t.key){var e=o.getActiveTab();o.getParentTabControl(e).toggleHardPinTitle(e.title)}}))}static getActiveTab(){var t=document.getElementsByClassName("tab active");for(let e of t){if(e.getElementsByClassName("monaco-icon-label")[0].style.color.includes("rgb("))return e}return null}static getParentTabControl(t){for(let e of o.tabControls)if(e.tabsContainer.contains(t))return e;return null}static useDoubleRow(t){null==o.styleDoubleRowElement&&(o.styleDoubleRowElement=document.createElement("style"),document.head.appendChild(o.styleDoubleRowElement)),o.styleDoubleRowElement.innerHTML=t?i:"",o.doubleRow=t,o.setAllTabControls(),window.dispatchEvent(new Event("resize"))}}o.editorContainerClass="monaco-grid-view",o.editorContainer=null,o.editorContainerMutationObeserver=null,o.tabControls=null,o.styleElement=null,o.styleDoubleRowElement=null,o.doubleRow=!1,o.start(),window.HardPin=o},function(t,e,n){"use strict";const a=(t,e,n)=>{const a=n<0?t.length+n:n,r=t.splice(e,1)[0];t.splice(a,0,r)},r=(t,e,n)=>(t=t.slice(),a(t,e,n),t);t.exports=r,t.exports.default=r,t.exports.mutate=a},function(t,e,n){var a=n(6);t.exports="string"==typeof a?a:a.toString()},function(t,e,n){(e=n(2)(!1)).push([t.i,"",""]),t.exports=e}]);