
<div class="tab-filenames"></div>

<script type="text/javascript">
'use strict';
$(() => {

  const outputTabNames = ['stdout','stderr','status'];

  cd.isOutputFile = filename => outputTabNames.includes(filename);

  cd.toggleOutputFile = () => {
    //TODO
  };

  cd.setFilenameTab = (filename) => {
    const id = cd.isOutputFile(filename) ? `radio_${filename}` : 'current_filename';
    const tab = $(`#${id}`);
    tab.text(filename);
    $('.tab.filename').removeClass('selected');
    tab.addClass('selected');
  };

  const $tabFilenames = $('.tab-filenames');

  const setupTabFilenameClickHandler = (div) => {
    div.click(() => {
      $('.tab.filename').removeClass('selected');
      const filename = div.text();
      cd.loadFile(filename);
      div.addClass('selected');
    });
  };

  outputTabNames.forEach(filename => {
    const $div = $('<div>', {
        class: 'tab filename',
           id: `radio_${filename}`,
         text: filename
    });
    $tabFilenames.append($div);
    setupTabFilenameClickHandler($div);
  });

  const $currentFilenameTab = $('<div>', {
    class:'tab filename',
       id:'current_filename',
     text:'readme.txt'
  });
  $tabFilenames.append($currentFilenameTab);
  setupTabFilenameClickHandler($currentFilenameTab);

});
</script>


<div class="tab-filenames"></div>

<script type="text/javascript">
'use strict';
$(() => {

  const $tabFilenames = $('.tab-filenames');
  const outputTabNames = ['stdout','stderr','status'];

  cd.isOutputFile = filename => outputTabNames.includes(filename);

  cd.toggleOutputFile = () => {
    //TODO
  };

  cd.setFilenameTab = (filename) => {
    const id = cd.isOutputFile(filename) ? `radio_${filename}` : 'current_filename';
    const tab = $(`#${id}`);
    tab.text(filename);
    $('.tab.filename').removeClass('selected');
    tab.addClass('selected');
  };

  const setupCurrentFilenameTab = () => {
    const $currentFilenameTab = $('<div>', {
      class:'tab filename',
         id:'current_filename',
       text:'readme.txt'
    });
    $tabFilenames.append($currentFilenameTab);
    setupTabFilenameClickHandler($currentFilenameTab);
  };

  const setupOutputTabs = () => {
    outputTabNames.forEach(filename => {
      const $div = $('<div>', {
          class: 'tab filename',
             id: `radio_${filename}`,
           text: filename
      });
      $tabFilenames.append($div);
      setupTabFilenameClickHandler($div);
    });
  };

  const setupTabFilenameClickHandler = (div) => {
    div.click(() => {
      $('.tab.filename').removeClass('selected');
      const filename = div.text();
      cd.loadFile(filename);
      div.addClass('selected');
    });
  };

  setupCurrentFilenameTab();
  setupOutputTabs();

});
</script>

Move current filename tab to left edge
Move current filename tab to left edge
