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 0.25em;
  padding: 0;
}
body.fileedit fieldset > div > .input-with-label {
  margin: 0.25em 0.5em;
}
body.fileedit fieldset > div > button {
  margin: 0.25em 0.5em;
}

  overflow: auto;
  white-space: pre;
}
div.fileedit-preview {
  margin: 0;
  padding: 0;
}
#fileedit-tab-diff-wrapper {
  margin: 0;
  padding: 0;
  overflow: auto;
}
#fileedit-tab-preview-wrapper {
  overflow: auto;
}
.fileedit-options.commit-message > div {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  font-family: monospace;
}
.fileedit-options.commit-message > div > * {
  margin: 0.25em;
}
#fileedit-commit-button-wrapper {
  margin: 0.25em;
}
.tab-container > .tabs > .tab-panel > .fileedit-options {
  margin-top: 0;
  border: none;

  border-style: inset;
  border-radius: 0.5em;
  padding: 0 0.25em;
  margin: 0;
  min-height: 12em;
}
#fileedit-file-selector select {
  margin: 0 0 0.5em 0;
  height: initial;
  font-family: monospace;
}
#fileedit-file-selector select:focus {
  border: none;
}
#fileedit-file-selector > div {
  padding: 0;
  margin: 0;
}
#fileedit-file-selector > div > * {
  margin: 0.25em 0.5em 0.25em 0;
}
.flex-container.flex-row.stretch {

  flex-wrap: wrap;
  align-items: baseline;
  justify-content: stretch;
  margin: 0;
}
.flex-container.flex-column {
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

                          "Unix", 1,
                          "Windows", 2,
                          NULL);
    CX("</div>"/*checkboxes*/);
  }

  { /******* Commit comment, button, and result manifest *******/
    CX("<fieldset class='fileedit-options commit-message'>"
       "<legend>Message (required)</legend><div>\n");
    /* We have two comment input fields, defaulting to single-line
    ** mode. JS code sets up the ability to toggle between single-
    ** and multi-line modes. */
    CX("<input type='text' name='comment' "
       "id='fileedit-comment'></input>");
    CX("<textarea name='commentBig' class='hidden' "

(function(F/*the fossil object*/){
  "use strict";
  /**
     Code for the /filepage app. Requires that the fossil JS
     bootstrapping is complete and fossil.fetch() has been installed.
  */
  const E = (s)=>document.querySelector(s),
        D = F.dom,
        P = F.page;

  /**
     Widget for the checkin/file selection list.
  */
  P.fileSelector = {
    e:{
      container: E('#fileedit-file-selector')
    },
    finfo: {},
    cache: {
      checkins: undefined,
      files:{}
    },
    /**
       Fetches the list of leaf checkins from the server and updates
       the UI with that list.
    */
    loadLeaves: function(){
      D.append(D.clearElement(
        this.e.ciListLabel,
        this.e.selectCi,
        this.e.selectFiles
      ),"Loading leaves...");
      D.disable(this.e.btnLoadFile, this.e.selectFiles, this.e.selectCi); 
      const self = this;
      F.fetch('fileedit',{
        urlParams:'ajax=filelist&leaves',
        responseType: 'json',
        onload: function(list){
          D.append(D.clearElement(self.e.ciListLabel),"Open leaves:");
          self.cache.checkins = list;
          D.clearElement(D.enable(self.e.selectCi));
          let loadThisOne;
          list.forEach(function(o,n){
            if(!n) loadThisOne = o;
            D.option(self.e.selectCi, o.checkin,
                     o.timestamp+' ['+o.branch+']: '
                     +F.hashDigits(o.checkin));
          });
          self.loadFiles(loadThisOne ? loadThisOne.checkin : false);
        }
      });
    },
    /**
       Loads the file list for the given checkin UUID. It uses a
       cached copy on subsequent calls for the same UUID. If passed a
       falsy value, it instead clears and disables the file selection
       list.
    */
    loadFiles: function(ciUuid){
      delete this.finfo.filename;
      this.finfo.checkin = ciUuid;
      const selFiles = this.e.selectFiles;
      if(!ciUuid){
        D.clearElement(D.disable(selFiles, this.e.btnLoadFile));
        return this;

      F.fetch('fileedit',{
        urlParams:{ajax:'filelist', checkin: ciUuid},
        responseType: 'json',
        onload
      });
      return this;
    },
    /**
       Initializes the checkin/file selector widget. Must only be
       called once.
    */
    init: function(){
      const selCi = this.e.selectCi = D.select(),
            selFiles = this.e.selectFiles
            = D.addClass(D.select(), 'file-list'),
            btnLoad = this.e.btnLoadFile =
            D.addClass(D.button("Load file"), "flex-shrink"),
            filesLabel = this.e.fileListLabel =
            D.addClass(D.div(),'flex-shrink','file-list-label'),
            ciLabelWrapper = D.addClass(
              D.div(), 'flex-container','flex-row', 'flex-shrink',
              'stretch'
            ),
            btnReload = D.addClass(
              D.button('Reload'), 'flex-shrink'
            ),
            ciLabel = this.e.ciListLabel =
            D.addClass(D.span(),'flex-shrink','checkin-list-label')
      ;
      D.attr(selCi, 'title',"The list of opened leaves.");
      D.attr(selFiles, 'title',
             "The list of editable files for the selected checkin.");
      D.attr(btnLoad, 'title',
             "Load the selected file into the editor.");
      D.disable(selCi, selFiles, btnLoad);
      D.attr(selFiles, 'size', 10);
      D.append(
        this.e.container,
        D.append(ciLabelWrapper,
                 btnReload, ciLabel),
        selCi,
        filesLabel,
        selFiles,
        btnLoad
      );

      this.loadLeaves();
      selCi.addEventListener(
        'change', (e)=>this.loadFiles(e.target.value), false
      );
      btnLoad.addEventListener(
        'click', (e)=>{
          this.finfo.filename = selFiles.value;
          if(this.finfo.filename){
            P.loadFile(this.finfo.filename, this.finfo.checkin);
          }
        }, false
      );
      btnReload.addEventListener(
        'click', (e)=>this.loadLeaves(), false
      );
      delete this.init;
    }
  };

  window.addEventListener("load", function() {
    P.tabs = new fossil.TabManager('#fileedit-tabs');
    P.e = {

      );
      selectFontSize.dispatchEvent(
        // Force UI update
        new Event('change',{target:selectFontSize})
      );
    }
  }, false)/*onload event handler*/;

  /**
     Getter (if called with no args) or setter (if passed an arg) for
     the current file content. We use a function, rather than direct
     access so that clients can hypothetically swap out this method
     from their skin in order to facilitate plugging-in of fancy
     3rd-party editor widgets.

     The setter form returns this object.
  */
  P.value = function(){
    if(0===arguments.length){
      return this.e.taEditor.value;
    }else{
      this.e.taEditor.value = arguments[0];
      return this;
    }
  };

  /**
     Toggles between single- and multi-line comment
     mode.
  */
  P.toggleCommentMode = function(){
    var s, h, c = this.e.taComment.value;

      urlParams: {
        ajax: 'content',
        filename:file,
        checkin:rev
      },
      onload:(r)=>{
        F.message('Loaded content.');
        self.value(r);
        self.updateVersion(file,rev);
        self.tabs.switchToTab(self.e.tabs.content);
      }
    });
    return this;
  };

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

  /**
     Callback for use with F.connectPagePreviewers()
  */
  P._postPreview = function(content,callback){
    if(!affirmHasFile()) return this;

     Fetches the content diff based on the contents and settings of this
     page's input fields, and updates the UI with the diff view.

     Returns this object, noting that the operation is async.
  */
  P.diff = function f(sbs){
    if(!affirmHasFile()) return this;
    const content = this.value(),
          self = this;
    if(!f.target){
      f.target = this.e.tabs.diff.querySelector(
        '#fileedit-tab-diff-wrapper'
      );
    }
    const fd = new FormData();

     the UI.

     Returns this object.
  */
  P.commit = function f(){
    if(!affirmHasFile()) return this;
    const self = this;
    const content = this.value(),
          target = document.querySelector('#fileedit-manifest'),
          cbDryRun = E('[name=dry_run]'),
          isDryRun = cbDryRun.checked,
          filename = this.finfo.filename;
    if(!f.updateView){
      f.updateView = function(c){
        target.innerHTML = [

          c.dryRun ? '(dry run)' : '',
          '[', F.hashDigits(c.uuid) ,'].'
        ];
        if(!c.dryRun){
          msg.push('Re-activating dry-run mode.');
          self.e.taComment.value = '';
          cbDryRun.checked = true;
          self.updateVersion(filename, c.uuid);
          self.fileSelector.loadLeaves();
        }
        F.message.apply(fossil, msg);
        self.tabs.switchToTab(self.e.tabs.commit);
      };
    }
    if(!content){
      f.updateView('');