content/browser/resources/gpu/info_view.html

<!--
Copyright 2012 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<style>
  :host {
    --green: #080;
    --yellow: #880;
    --red: #f00;
    --gray: #888;
    --bg-yellow: #ff0;

    display: block;
    flex: 1;
    overflow: auto;
    padding: 10px;
  }

  @media (prefers-color-scheme: dark) {
    :host {
      --green: #0F0;
      --yellow: #FF0;
      --red: #f00;
      --gray: #888;
      --bg-yellow: #880;
    }
  }

  :host * {
    user-select: text;
  }

  :host([selected]) {
    display: flex;
    flex-direction: column;
  }

  h3,
  ul {
    margin-bottom: 0;
    margin-top: 0;
  }

  #content > div,
  #download-to-file {
    margin-bottom: 1em;
  }

  .feature-green {
    color: var(--green);
  }

  .feature-yellow {
    color: var(--yellow);
  }

  .feature-red {
    color: var(--red);
  }

  .feature-gray {
    color: var(--gray);
  }

  .bg-yellow {
    background-color: var(--bg-yellow);
  }

  #vulkan-info-value {
    white-space: pre;
  }

  #download-to-file {
    font: inherit;
    min-height: 2em;
    user-select: none;
  }

  h4.dawn-info-header {
    color: var(--yellow);
    margin-bottom: 2px;
    margin-top: 10px;
  }
  
  table.info-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }
  .info-table td {
    border: 1px solid #777;
    vertical-align: top;
    overflow-x: auto;
  }
  .info-table td:nth-child(1) {
    font-weight: bold;
    width: 25%;
  }
  .info-table td:nth-child(2) {
    font-weight: bold;
    width: 75%;
  }

  /*
  This class is used to show text that is only available
  when the user copies text or downloads the report to a file.
  We insert extra but hidden text to make plain text formatting
  look better, at copy/download time we make the text visible
  */
  .copy {
    display: none;
  }
</style>
<style id="dynamic-style"></style>
<div>
  <button id="download-to-file">Download Report to File</button>
</div>
<div id="content">
  <script type="not-js" id="used-only-by-test">GPU Info</script>
</div>