panel.html

<!DOCTYPE html>
<html>
  <head>
    <script src="dt.js"></script>
    <script src="dt-helpers.js"></script>
    <script src="panel.js"></script>
    <script src="braid-http-client.js"></script>
  </head>
  <style>
    :root {
      /* How tall the row of checkboxes across the top comes out: its content,
         its 5px of padding either side, and its bottom border. The history
         pane is sized against it and the metadata panel starts below it, so
         it is written down once here rather than guessed at in both. */
      --topbar-h: 30px;
    }
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      overflow: clip;
    }
    input, select {
        padding: 0;
        font-size: 11px;
    }
    /* Long unbreakable values (e.g. version strings) must wrap within their
       90px column, or they widen the metadata panel into a scrollbar */
    #newmeta span {
        overflow-wrap: anywhere;
    }
    /* Version ids are long; keep them subordinate */
    #version_response, #parents_response {
        font-size: 80%;
    }
  </style>
  <body
    style="
      margin: 0px;
      width: 100vw;
      height: 100vh;
    "
  >
    <!-- Error div -->
    <div id="error-container" style="background-color: #ffcccc; padding: 10px; display: none;">
      <pre id="error-message" style="margin: 0;"></pre>
    </div>

    <!-- The Messages -->
    <div id="messages"
      style="
        position: absolute;
        left: 0px;
        top: 0px;
        width: calc(100%);
        bottom: 0px;
        overflow-x: clip;
        overflow-y: clip;
      "
    >

      <!-- Top Checkbox Row -->
      <div style="background-color: #FBFBFD; border-bottom: 1px solid #EEEFF8;
                  padding: 5px; display: flex; align-items: center; gap: 5px;">
        <input type="checkbox" id="id_raw_messages" style="margin: 0" />
        <label for="id_raw_messages">Display Raw Messages</label>
        <input type="checkbox" id="id_time_travel" style="margin: 0 0 0 20px" />
        <label for="id_time_travel" id="id_time_travel_label">Time-Travel with Scroll</label>
        <input type="checkbox" id="id_show_deletions" checked style="margin: 0 0 0 20px" />
        <label for="id_show_deletions" id="id_show_deletions_label">Show deletions</label>
      </div>

      <!-- The messages go here -->
      <div style="width:100%; height: calc(100% - var(--topbar-h)); overflow-y: auto;" id="id_messages">
      </div>

      <!-- The Resource Metadata -->
      <div id="metadata"
           style="
             position: absolute;
             /* Clear of the history pane's scrollbar, which sits at the very
                right edge underneath this panel */
             right: 26px;
             /* Below the row of checkboxes, rather than over the top of it:
                sitting at 0 it covered the time-travel and raw-message toggles */
             top: var(--topbar-h);
             width: 50%;
             /* Room for the whole grid below: the widest label needs about
                104px, and the two value columns with their gaps another 200.
                At 251 the Response column had 37px of its 90 to show itself
                in, and the rest was clipped off the side. */
             max-width: 310px;
             background-color: #FBFBFD;
             border-left: 1px solid #EEEFF8;
             border-bottom: 1px solid #EEEFF8;
             overflow-x: hidden;
             overflow-y: auto;
             padding: 10px;
           ">

        <!-- 3 columns -->
        <div id="newmeta"
             style="
             display: grid;
             /* The label takes what its text needs, and Response takes what is
                left rather than a fixed width it can overflow: minmax(0, 1fr)
                may shrink below its content, which wraps instead of spilling
                out of the panel and being cut off. */
             grid-template-columns: max-content 90px minmax(0, 1fr);
             /* Input rows are ~22px tall; give every row that height and
                center, so the short rows keep the same rhythm */
             grid-auto-rows: minmax(15px, 15px);
             align-items: center;
             gap: 5px 10px;
             justify-items: left;">

          <b></b>
          <b>Request</b>
          <b>Response</b>

          <label for="content_type_select" style='text-wrap:nowrap'>Content-Type:</label>
          <select id="content_type_select" style="width:90px">
            <option value="">&nbsp;</option>
            <option value="text/plain">Text</option>
            <option value="text/html">HTML</option>
            <option value="application/json">JSON</option>
            <option value="text/markdown">Markdown</option>
            <option value="application/javascript">Javascript</option>
          </select>
          <span id="content_type_response"></span>

          <label for="merge_type_select" style='text-wrap:nowrap'>Merge-Type:</label>
          <select id="merge_type_select" style="width:90px">
            <option value="">&nbsp;</option>
            <option value="dt">dt</option>
            <option value="simpleton">simpleton</option>
          </select>
          <span id="merge_type_response"></span>

          <label for="subscribe_request" style="cursor:pointer">Subscribe:</label>
          <input type="checkbox" id="subscribe_request" checked style="margin: 0;cursor:pointer"/>
          <span id="subscribe_response"></span>

          <label for="encoding_request" style="cursor:pointer">Encoding:</label>
          <span style="text-wrap:nowrap"><input type="checkbox" id="encoding_request" checked style="margin: 0 3px 0 0; vertical-align: text-bottom; cursor:pointer"/><label for="encoding_request" style="cursor:pointer">dt</label></span>
          <span id="encoding_response"></span>

          <label for="version_request">Version:</label>
          <input type="text" id="version_request" style="width:86px"/>
          <span id="version_response"></span>

          <label for="parents_request">Parents:</label>
          <input type="text" id="parents_request" style="width:86px" />
          <span id="parents_response"></span>

          <label id="error_d_label" style="display:none" for="error_d">Error:</label>
          <span id="error_d" style="grid-column: 2 / span 2;"></span>

          <div></div>
          <button id="resubmit_button" style="justify-self: end;font-size:80%">resubmit</button>
          <div></div>

        </div>

        <div id="edit_source_d" style="
            margin-top: 10px;
            background-color: #EBEBED;
            grid-column: 3 / span 3;
            display: none;
            align-items: center;
            padding: 5px;">
          <input type="checkbox" id="edit_source" style="margin-right: 5px;cursor:pointer" />
          <label for="edit_source" style="cursor:pointer">Edit source</label>
        </div>

      </div>
    </div>

  </body>
</html>