source/lib/VBDockPanel.js
// Create the tab header for a connection, clicked to select that tab

Create the tab header for a connection, clicked to select that tab
Create the tab header for a connection clicked to select that tab
createConnHeader(ip, port, conn, connId) {
    const headerClone = this.tabStub.cloneNode(true)
    headerClone.setAttribute('id', 'conn-' + connId)
    const tabIp = headerClone.querySelector('.tabIp')
    this.connInfoList.get(connId).tabIp = tabIp
    while (tabIp.firstChild) {
      tabIp.removeChild(tabIp.firstChild)
    }
    tabIp.appendChild(document.createTextNode(ip + ':' + port))
    headerClone.addEventListener('click', (e) => {
      this.onConnTabClick(e, conn)
    })
    const closeButton = headerClone.querySelector('.tabClose')
    this.connInfoList.get(connId).closeButton = closeButton
    closeButton.addEventListener('click', (e) => {
      e.stopPropagation()
      this.onConnTabClose(conn)
    })
    headerClone.addEventListener('contextmenu', (e) => {
      e.preventDefault()
      conn.doContextMenu()
    })
    let headerPanel
    if (this.config.insertTabsAtEnd) {
      headerPanel = this.tabHeader.appendChild(headerClone)
      this.tabHeader.scrollLeft = this.tabHeader.scrollWidth
    }
    else {
      headerPanel = this.tabHeader.insertBefore(headerClone,
                                                    this.tabAdd.nextSibling)
      this.tabHeader.scrollLeft = 0
    }
    this.connInfoList.get(connId).headerPanel = headerPanel
    headerClone.style.display = 'flex'
    this.selectedConn = conn
  }
createConnHeader ( ip , port , conn , connId ) { const headerClone = this . tabStub . cloneNode ( true ) headerClone . setAttribute ( 'id' , 'conn-' + connId ) const tabIp = headerClone . querySelector ( '.tabIp' ) this . connInfoList . get ( connId ) . tabIp = tabIp while ( tabIp . firstChild ) { tabIp . removeChild ( tabIp . firstChild ) } tabIp . appendChild ( document . createTextNode ( ip + ':' + port ) ) headerClone . addEventListener ( 'click' , ( e ) => { this . onConnTabClick ( e , conn ) } ) const closeButton = headerClone . querySelector ( '.tabClose' ) this . connInfoList . get ( connId ) . closeButton = closeButton closeButton . addEventListener ( 'click' , ( e ) => { e . stopPropagation ( ) this . onConnTabClose ( conn ) } ) headerClone . addEventListener ( 'contextmenu' , ( e ) => { e . preventDefault ( ) conn . doContextMenu ( ) } ) let headerPanel if ( this . config . insertTabsAtEnd ) { headerPanel = this . tabHeader . appendChild ( headerClone ) this . tabHeader . scrollLeft = this . tabHeader . scrollWidth } else { headerPanel = this . tabHeader . insertBefore ( headerClone , this . tabAdd . nextSibling ) this . tabHeader . scrollLeft = 0 } this . connInfoList . get ( connId ) . headerPanel = headerPanel headerClone . style . display = 'flex' this . selectedConn = conn }
Create the tab header for a connection, clicked to select that tab
Create the tab header for a connection clicked to select that tab
// Clone the tab stub (class="tab")
 // Set the id attribute to the connId
 // Find the <span> tag that will contain the ip:port
 // Remove any data from the <span> tag used to contain ip:port
 // Fill in the clone's ip address
 // Add onClick event listener for the tab header,
 // referencing the connection page that is being added.
 // Add onClick event listener for the tab close ("X") button,
 // referencing the connection page that is being added.
 // To make sure a click event on the close button does not
 // also cause the click event for the tab header to fire,
 // call stopPropagation()
 // Add the context-menu (right-click) handler for the tab header
 // Disable the system right-click functionality (possibly not necessary)
 // Display the context menu
 // Add the tab either before the first existing tab, or after the last
 // Scroll to the end of the tab item list
 // Scroll to the start of the tab item list
 // Make the connection header visible
 // Update selectedConn with the new connection object
