static/devtools-frontend.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DevTools</title>
    <style>
      body {
        filter: blur(2px) grayscale(1);
        transition: filter 1s linear;
      }
      body.ready {
        filter: none;
      }
    </style>
    <meta
      http-equiv="Content-Security-Policy"
      content="object-src 'none'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://chrome-devtools-frontend.appspot.com"
    />
    <meta name="referrer" content="no-referrer" />
    <script
      type="module"
      src="../devtools-frontend/entrypoints/devtools_app/devtools_app.js"
    ></script>
    <script>
      async function getTimelinePanel() {
        const module = await import(
          '../devtools-frontend/panels/timeline/TimelinePanel.js'
        );
        return module.TimelinePanel.instance();
      }

      function registerLoadCompleted() {
        // Use the legacy "loadCompleted" callback to hide navigation
        window.InspectorFrontendHost.loadCompleted = () => {
          const main = document.querySelector('.main-tabbed-pane');
          if (main && main.shadowRoot) {
            const header = main.shadowRoot.querySelector('.tabbed-pane-header');
            if (header) {
              header.style.display = 'none';
            }
          }
        };
      }

      async function load(payload) {
        try {
          console.log(`Attempting to load`, payload);
          document.body.classList.add('ready');
          const TimelinePanel = await getTimelinePanel();
          const { events } = payload;
          TimelinePanel.loadFromEvents(events);
        } catch (error) {
          console.log(`Tried to load, but failed. Deferring.`);
          setTimeout(() => load(payload), 250);
        }
      }

      async function setDarkMode(isDarkMode) {
        console.log(`Setting dark mode to`, isDarkMode);
        const html = document.documentElement;
        if (isDarkMode) {
          html.classList.add('-theme-with-dark-background');
        } else {
          html.classList.remove('-theme-with-dark-background');
        }
      }

      // Since we're on a file:// protocol, we can't just
      // call window.myMethod() from Sleuth and have to send
      // it as a cross-origin message. This will help.
      window.addEventListener('message', async ({ data }) => {
        if (!data) return;
        const { instruction, payload } = data;
        if (instruction === 'load') {
          return await load(payload);
        } else if (instruction === 'dark-mode') {
          setDarkMode(!!payload);
        }
      });

      document.addEventListener('DOMContentLoaded', registerLoadCompleted);
    </script>
  </head>
  <body class="undocked" id="-blink-dev-tools"></body>
</html>