content/browser/resources/gpu/info_view.html

<!--
Copyright (c) 2012 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<style>
  :host {
    display: block;
    flex: 1;
    overflow: auto;
    padding: 10px;
  }

  :host * {
    user-select: text;
  }

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

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

  :host > div {
    margin-bottom: 1em;
  }

  .feature-green {
    color: rgb(0, 128, 0);
  }

  .feature-yellow {
    color: rgb(128, 128, 0);
  }

  .feature-red {
    color: rgb(255, 0, 0);
  }

  .feature-gray {
    color: rgb(128, 128, 128);
  }

  .bg-yellow {
    background-color: yellow;
  }

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

  #copy-to-clipboard {
    background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.75);
    color: #444;
    font: inherit;
    margin: 0 1px 0 0;
    min-height: 2em;
    outline: none;
    padding: 1px 10px;
    text-shadow: 0 1px 0 rgb(240, 240, 240);
    user-select: none;
  }

  #copy-to-clipboard:enabled:hover {
    background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.95);
    color: black;
  }

  #copy-to-clipboard:enabled:active {
    background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
    box-shadow: none;
    text-shadow: none;
  }
</style>

<div>
  <button id="copy-to-clipboard">Copy Report to Clipboard</button>
</div>
<div>
  <h3>Graphics Feature Status</h3>
  <ul class="feature-status-list"></ul>
</div>

<div class='workarounds-div'>
  <h3>Driver Bug Workarounds</h3>
  <ul class="workarounds-list"></ul>
</div>

<div class='problems-div'>
  <h3>Problems Detected</h3>
  <ul class="problems-list"></ul>
</div>

<div class='angle-features-div'>
  <h3>ANGLE Features</h3>
  <ul class="angle-features-list"></ul>
</div>

<div class='dawn-info-div'>
  <h3>DAWN Info</h3>
  <ul class="dawn-info-list"></ul>
</div>

<div>
  <h3>Version Information</h3>
  <div id="client-info"></div>
</div>

<div>
  <h3>Driver Information</h3>
  <div id="basic-info"></div>
</div>

<div>
  <h3>Compositor Information</h3>
  <div id="compositor-info"></div>
</div>

<div>
  <h3>GpuMemoryBuffers Status</h3>
  <div id="gpu-memory-buffer-info"></div>
</div>

<div>
  <h3>Display(s) Information</h3>
  <div id="display-info"></div>
</div>

<div>
  <h3>Video Acceleration Information</h3>
  <div id="video-acceleration-info"></div>
</div>

<div>
  <h3>Vulkan Information</h3>
  <div id="vulkan-info"></div>
</div>

<div>
  <h3>Device Performance Information</h3>
  <div id="device-perf-info"></div>
</div>

<div class="diagnostics">
  <h3>Diagnostics</h3>
  <div class="diagnostics-loading">... loading ...</div>
  <div id="diagnostics-table">None</div>
</div>

<div class='basic-info-for-hardware-gpu-div'>
  <h3>Driver Information for Hardware GPU</h3>
  <div id="basic-info-for-hardware-gpu"></div>
</div>

<div class='feature-status-for-hardware-gpu-div'>
  <h3>Graphics Feature Status for Hardware GPU</h3>
  <ul class="feature-status-for-hardware-gpu-list"></ul>
</div>

<div class='workarounds-for-hardware-gpu-div'>
  <h3>Driver Bug Workarounds for Hardware GPU</h3>
  <ul class="workarounds-for-hardware-gpu-list"></ul>
</div>

<div class='problems-for-hardware-gpu-div'>
  <h3>Problems Detected for Hardware GPU</h3>
  <ul class="problems-for-hardware-gpu-list"></ul>
</div>

<div id="log-messages">
  <h3>Log Messages</h3>
  <ul></ul>
</div>