matrix-rust-sdk

<!doctype html>

<html lang="en">

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:">

  <meta name="viewport" content="width=device-width, minimum-scale=1">

  <style>

  /* Reset */

  *, *::before, *::after {

    box-sizing: border-box;

  }

  * { margin: 0 }

  :root {

    color-scheme: dark;

    --space-very-small: .25rem;

    --space-small: .5rem;

    --space: 1rem;

    --space-large: 2rem;

    --space-very-large: 4rem;

    --border-radius: 3px;

    --color-accent: oklch(59.1% .236 10.25);

    --color-text: oklch(.84 0 0);

    --color-canvas: oklch(0.258 0.007 285.867);

    --color-canvas-lighter: oklch(0.303 0.007 285.966);

    --color-canvas-lighter-2: oklch(0.343 0.009 285.935);

    --color-canvas-lighter-3: oklch(0.6 0 0);

    --color-white: oklch(1 0 0);

    --color-red: oklch(.503 .172 25);

    --color-orange: oklch(.793 .171 70.67);

    --color-blue: oklch(0.579 0.191 252.0);

    --color-green: oklch(0.571 0.181 145.0);

    --color-black: oklch(0 0 0);

  }

  .content-grid {

    --padding-inline: 1rem;

    --content-max-width: 70ch;

    --breakout-max-width: 85ch;

    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

    display: grid;

    grid-template-columns:

      [full-width-start]

        minmax(var(--padding-inline), 1fr)

        [breakout-start]

          minmax(0, var(--breakout-size))

          [content-start]

            min(

              100% - (var(--padding-inline) * 2),

              var(--content-max-width)

            )

          [content-end]

          minmax(0, var(--breakout-size))

        [breakout-end]

        minmax(var(--padding-inline), 1fr)

      [full-width-end];

    > * {

      grid-column: content;

    }

    > .breakout {

      grid-column: breakout;

    }

    > .full-width {

      grid-column: full-width;

    }

  }

  html {

    scroll-padding-top: var(--space-very-large);

  }

  body {

    font-size: .95rem;

    /* Thanks modernfontstacks.com */

    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;

    font-weight: normal;

    font-variant-numeric: proportional-nums slashed-zero;

    color: var(--color-text);

    background: var(--color-canvas);

    scroll-behaviour: smooth;

  }

  header {

    text-align: center;

    text-wrap: balanced;

    margin-block: var(--space) var(--space-large);

  }

  details > summary {

    cursor: pointer;

  }

  main > form {

    --_block-space: var(--space);

    padding: var(--_block-space) var(--space-large);

    border-radius: var(--border-radius);

    background: var(--color-canvas-lighter);

    details[open]::details-content {

      margin-block-start: var(--_block-space);

    }

    fieldset {

      width: fit-content;

      display: grid;

      padding-inline: var(--space-large);

      border-color: var(--color-canvas-lighter-3);

      border-style: solid;

      border-radius: var(--border-radius);

      label input {

        margin-inline-end: var(--space-small);

      }

    }

  }

  main > table {

    width: 100%;

    border-spacing: 0;

    margin-inline: var(--space);

    th, td {

      white-space: nowrap;

      padding: .15rem var(--space);

    }

    thead {

      position: sticky;

      top: 0;

      z-index: 100;

      background: oklch(from var(--color-canvas) l c h / .8);

      backdrop-filter: blur(5px);

      tr {

        font-weight: bold;

        height: 3em;

      }

    }

    tbody {

      --_longest-duration: var(--longest-duration, 1000000);

      > tr {

        > :first-child {

          --_line-height: 1.4rem;

          min-width: 200px;

          position: relative;

          .span {

            --_duration: var(--duration, 1);

            --_width: 0;

            main:has(input[name="duration_scale"][value="normal"]:checked) & {

              --_width: calc((var(--_duration) * 100) / var(--_longest-duration));

            }

            main:has(input[name="duration_scale"][value="logarithmic"]:checked) & {

              --_width: calc((log(var(--_duration), 10) * 100) / log(var(--_longest-duration), 10));

            }

            position: absolute;

            top: 0;

            right: 0;

            display: inline-block;

            height: var(--_line-height);

            width: calc(var(--_width) * 1%);

            border-radius: var(--border-radius) 0 0 var(--border-radius);

            background: var(--color-accent);

            transition: 150ms width ease-in-out;

            span {

              position: absolute;

              right: var(--space-very-small);

              font-size: .9em;

              line-height: var(--_line-height);

            }

          }

        }

      }

    }

    time {

      font-variant-numeric: slashed-zero tabular-nums;

    }

  }

  code {

    /* Thanks modernfontstacks.com */

    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

    font-weight: normal;

    font-size: .9em;

  }

  .error, .warn, .info, .debug, .trace {

    display: inline-block;

    font-size: .9em;

    vertical-align: center;

    line-height: 1.4em;

    padding-inline: var(--space-very-small);

    border-radius: var(--border-radius);

    color: var(--color-white);

  }

  .error { background: var(--color-red) }

  .warn { background: var(--color-orange) }

  .info { background: var(--color-blue) }

  .debug { background: var(--color-green) }

  .trace { background: var(--color-black) }

  </style>

  <title>Timer viewer</title>

</head>

<body class="content-grid">

<header>

  <h1>Analyse of <code>{log_file}</code></h1>

</header>

<main class="full-width content-grid">

<form class="breakout">

  <details>

    <summary>Options</summary>

    <fieldset>

      <legend>Duration scale</legend>

      <label><input type="radio" name="duration_scale" value="normal" checked>Normal</label>

      <label><input type="radio" name="duration_scale" value="logarithmic">Logarithmic</label>

    </fieldset>

  </details>

</form>

<table class="full-width">

  <thead>

    <tr>

      <th scope="col">Duration</th>

      <th scope="col">Message</th>

      <th scope="col">Level</th>

      <th scope="col">Target</th>

      <th scope="col">Location</th>

      <th scope="col">Time</th>

    </tr>

  </thead>

  <tbody style="--longest-duration: {longest-duration}">