Positioning content before first tab and at end of tabs (e.g window handling buttons)

[matthiasg]

This is a great project and great replacement for electron-tabs, but how does one put content before the first tab (e.g a static logo or text) or some buttons on the far right of the tab bar without disturbing the layout/dragging process ?

does anybody know ?

[adamschwartz]

Hey @matthiasg this is a great question. Thanks for asking it here as I’m sure others will appreciate it.

There are a couple of ways to do this. For now I’ll suggest one that I would likely use if I were consuming https://github.com/adamschwartz/chrome-tabs from another project and wanted to avoid collisions with any future changes to e.g. the DOM structure, etc.

First, note that the outer .chrome-tabs element has a left and right padding on it, and that its child .chrome-tabs-content has position: relative. This is key. This was a very intentional design choice because it means that the JS code that handles the layout/dragging you referred doesn’t care (and doesn’t need to care) about the the left and right padding you set on .chrome-tabs. To the layout engine of the JS, it’s only the inner .chrome-tabs-content that matters.

What this means is that you can set any left and right padding on the outer element that you wish and everything will still behave correctly.

So one approach would be to wrap chrome-tabs and your nodes inside a positioned element, and then position your nodes absolutely, using z-index if necessary to stack them on top of chrome-tabs while keeping the correct content order.

Something like this:

<div class="my-chrome-tabs">
  <img class="my-logo">

  <div class="chrome-tabs">
    <!-- ... -->
  </div>

  <button class="my-button">Button</button>
</div>

<style>
  .my-chrome-tabs {
    position: relative;
  }

  .my-chrome-tabs .chrome-tabs {
    /* This is the where the magic happens */
    padding-left: 48px;
    padding-right: 108px;
  }

  .my-logo,
  .my-button {
    position: absolute;
    z-index: 1;
    top: 8px;
  }
  
  .my-logo {
    left: 4px;
    width: 40px;
  }

  .my-button {
    font-size: 10px;
    right: 4px;
    width: 100px;
  }
</style>

I hope this helps! Best of luck to you.

[matthiasg]

@adamschwartz great answer. And perfectly timed, as I would have needed to look into this tomorrow anyway :)