.tab-container > .tab-bar {
  display: flex;
  flex-direction: row;
  flex: 1 10 auto;
  align-self: stretch;
  flex-wrap: wrap;
}
.tab-container > .tab-bar > .tab-button {
  display: inline-block;
  border-radius: 0.5em 0.5em 0 0;
  margin: 0 0.1em;
  padding: 0.25em 0.75em;
  align-self: baseline;
  border-color: inherit;
  border-width: 1px;
  border-bottom: none;
  border-top-style: inset;
  border-left-style: inset;
  border-right-style: inset;
  cursor: pointer;
  opacity: 0.6;
}
.tab-container > .tab-bar > .tab-button.selected {



  text-decoration: underline;
  opacity: 1.0;
  border-top-style: outset;
  border-left-style: outset;
  border-right-style: outset;
}
//////////////////////////////////
// Styles for /fileedit:
textarea.fileedit {
  font-family: monospace;
  width: 100%;
  flex: 10 1 auto;
}
body.fileedit fieldset {
  margin: 0.5em 0 0.5em 0;
  border-radius: 0.5em;
  border-color: inherit;
  border-width: 1px;
  font-size: 85%;
}
body.fileedit fieldset > legend {
  margin: 0 0 0 1em;
  padding: 0 0.5em 0 0.5em;
}
body.fileedit fieldset > div {
  margin: 0 0.25em 0.25em 0.25em;
}
body.fileedit fieldset > div > .input-with-label {
  margin: 0.25em 0.5em;
}
body.fileedit fieldset > div > button {
  margin: 0.25em 0.5em;
}



.fileedit-hint {
  font-size: 80%;
  opacity: 0.75;
}
.fileedit-error-report {
  background: yellow;
  color: darkred;

  ** All errors which "could" have happened up to this point are of a
  ** degree which keep us from rendering the rest of the page, and
  ** thus have already caused us to skipped to the end of the page to
  ** render the errors. Any up-coming errors, barring malloc failure
  ** or similar, are not "that" fatal. We can/should continue
  ** rendering the page, then output the error message at the end.
  ********************************************************************/

  {
    /* The CSS for this page lives in a common file but much of it we
    ** don't want inadvertently being used by other pages. We don't
    ** have a common, page-specific container we can filter our CSS
    ** selectors, but we do have the BODY, which we can decorate with
    ** whatever CSS we wish...
    */
    style_emit_script_tag(0,0);
    CX("document.body.classList.add('fileedit');\n");
    style_emit_script_tag(1,0);
  }
  CX("<p>This page is <em>NEW AND EXPERIMENTAL</em>. "
     "USE AT YOUR OWN RISK, preferably on a test "
     "repo.</p>\n");

  /******* Hidden fields *******/
  CX("<input type='hidden' name='checkin' value='%s'>",
     cimi.zParentUuid);

                          100,
                          "100%", 100, "125%", 125,
                          "150%", 150, "175%", 175,
                          "200%", 200, NULL);
    CX("</div>");
    CX("<div class='flex-container row'>");
    CX("<textarea name='content' id='fileedit-content-editor' "
       "class='fileedit' "
       "rows='20' cols='80'>");
    CX("Loading...");
    CX("</textarea>");
    CX("</div>"/*textarea wrapper*/);
    CX("</div>"/*#tab-file-content*/);
  }

      // Force UI update
      new Event('change',{target:selectPreviewMode})
    );
    const selectFontSize = E('select[name=editor_font_size]');
    if(selectFontSize){
      selectFontSize.addEventListener(
        "change",function(e){
          const ed = P.e.taEditor;
          ed.className = ed.className.replace(
              /\bfont-size-\d+/g, '' );
          ed.classList.add('font-size-'+e.target.value);
        }, false
      );
      selectFontSize.dispatchEvent(
        // Force UI update
        new Event('change',{target:selectFontSize})
      );
    }

    const updateView = function(c){
      D.clearElement(target);
      if('string'===typeof c){
        target.innerHTML = c;
      }
      if(switchToTab) self.tabs.switchToTab(self.e.tabs.preview);
    };
    const content = this.e.taEditor.value;
    if(!content){
      updateView('');
      return this;
    }
    this._postPreview(content, updateView);
    return this;
  };

  /**
     Callback for use with F.connectPagePreviewers()
  */
  P._postPreview = function(content,callback){

       Returns this object.

       DOM elements of potential interest to users:

       this.e.container = the outermost container element.

       this.e.tabBar = the button bar. Each "button" (whether it's a
       buttor not is unspecified) has a class of .tab-button.

       this.e.tabs = the parent for all of the tab elements.

       It is legal, within reason, to manipulate these a bit, in
       particular this.e.container, e.g. by adding more children to
       it. Do not remove elements from the tabs or tabBar, however, or
       the tab state may get sorely out of sync.

         e.target.$manager.switchToTab(e.target.$tab);
        };
      }
      tab = tabArg(tab);
      tab.remove();
      D.append(this.e.tabs, D.addClass(tab,'tab-panel'));
      const lbl = tab.dataset.tabLabel || 'Tab #'+(this.e.tabs.childNodes.length-1);
      const btn = D.addClass(D.append(D.span(), lbl), 'tab-button');
      D.append(this.e.tabBar,btn);
      btn.$manager = this;
      btn.$tab = tab;
      btn.addEventListener('click', f.click, false);
      return this;
    },
    /**