chromium/chromium-116-tweak_about_gpu.patch

commit e2f8a1e1b5c0096cb0465a79e4f6c53d0d50e664
Author: Gregg Tavares <gman@chromium.org>
Date:   Fri Aug 11 00:32:19 2023 +0000

    Tweak about:gpu
    
    * Make it so you can select all the text
    
      As it was, selection only worked on individual top level divs.
      Adding an enclosing parent div fixed this issue
    
    * Change "Copy Report to Clipboard" to "Download Report to File"
    
      The data here was almost always too big. Too big to paste into
      a chrome bug, too big to paste into chat.
    
      The user can still press Ctrl-A/Cmd-A or pick Select-All
      and do a text copy.
    
    * Add dark mode support
    
    Bug: 1470927
    Change-Id: I82da29ae5b68106f204d02084e252d3f07373a69
    Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4764269
    Commit-Queue: Gregg Tavares <gman@chromium.org>
    Reviewed-by: Kenneth Russell <kbr@chromium.org>
    Reviewed-by: Kai Ninomiya <kainino@chromium.org>
    Cr-Commit-Position: refs/heads/main@{#1182383}

diff --git a/content/browser/resources/gpu/gpu_internals.html b/content/browser/resources/gpu/gpu_internals.html
index d324f96798fd6..22322bb6ba7d8 100644
--- a/content/browser/resources/gpu/gpu_internals.html
+++ b/content/browser/resources/gpu/gpu_internals.html
@@ -9,13 +9,15 @@ found in the LICENSE file.
 <meta name="viewport" content="width=device-width" />
 <title>GPU Internals</title>
 <style>
+  :root {
+    color-scheme: light dark;
+  }
   * {
     box-sizing: border-box;
     user-select: none;
   }
 
   body {
-    background-color: white;
     cursor: default;
     font-family: sans-serif;
     margin: 8px;
diff --git a/content/browser/resources/gpu/info_view.html b/content/browser/resources/gpu/info_view.html
index 289691ceb11b3..ce3643da2adb6 100644
--- a/content/browser/resources/gpu/info_view.html
+++ b/content/browser/resources/gpu/info_view.html
@@ -5,12 +5,28 @@ 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;
   }
@@ -26,77 +42,52 @@ found in the LICENSE file.
     margin-top: 0;
   }
 
-  :host > div {
+  #content > div {
     margin-bottom: 1em;
   }
 
   .feature-green {
-    color: rgb(0, 128, 0);
+    color: var(--green);
   }
 
   .feature-yellow {
-    color: rgb(128, 128, 0);
+    color: var(--yellow);
   }
 
   .feature-red {
-    color: rgb(255, 0, 0);
+    color: var(--red);
   }
 
   .feature-gray {
-    color: rgb(128, 128, 128);
+    color: var(--gray);
   }
 
   .bg-yellow {
-    background-color: yellow;
+    background-color: var(--bg-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;
+  #download-to-file {
     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;
-  }
-
-  #copy-to-clipboard:enabled:focus {
-    border-color: rgb(77, 144, 254);
-  }
-
   h4.dawn-info-header {
-    color: rgb(128, 128, 0);
+    color: var(--yellow);
     margin-bottom: 2px;
     margin-top: 10px;
   }
 </style>
 
+<div id="content">
 <div>
-  <button id="copy-to-clipboard">Copy Report to Clipboard</button>
+  <button id="download-to-file">Download Report to File</button>
 </div>
 <div>
   <h3>Graphics Feature Status</h3>
@@ -193,3 +184,4 @@ found in the LICENSE file.
   <h3>Log Messages</h3>
   <ul></ul>
 </div>
+</div>
\ No newline at end of file
diff --git a/content/browser/resources/gpu/info_view.ts b/content/browser/resources/gpu/info_view.ts
index 0b91cc130f46f..96c08f76e4bc7 100644
--- a/content/browser/resources/gpu/info_view.ts
+++ b/content/browser/resources/gpu/info_view.ts
@@ -12,6 +12,22 @@ import {getTemplate} from './info_view.html.js';
 import {ArrayData, Data} from './info_view_table_row.js';
 import {VulkanInfo} from './vulkan_info.js';
 
+/**
+ * Given a blob and a filename, prompts user to
+ * save as a file.
+ */
+const saveData = (function() {
+  const a = document.createElement('a');
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  return function saveData(blob: Blob, fileName: string) {
+    const url = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = fileName;
+    a.click();
+  };
+}());
+
 /**
  * @fileoverview This view displays information on the current GPU
  * hardware.  Its primary usefulness is to allow users to copy-paste
@@ -33,19 +49,26 @@ export class InfoViewElement extends CustomElement {
   }
 
   connectedCallback() {
-    // Add handler to 'copy to clipboard' button
-    const copyButton =
-        this.shadowRoot!.querySelector<HTMLElement>('#copy-to-clipboard');
-    assert(copyButton);
-    copyButton.onclick = (() => {
+    // Add handler to 'download report to clipboard' button
+    const downloadButton =
+        this.shadowRoot!.querySelector<HTMLElement>('#download-to-file')!;
+    assert(downloadButton);
+    downloadButton.onclick = (() => {
       // Make sure nothing is selected
       const s = window.getSelection()!;
       s.removeAllRanges();
+
+      // Select everything
       s.selectAllChildren(this.shadowRoot!);
-      document.execCommand('copy');
+      const text = s.toString();
 
       // And deselect everything at the end.
       window.getSelection()!.removeAllRanges();
+
+      const blob = new Blob([text], {type: 'text/text'});
+      const filename = `about-gpu-${
+          new Date().toISOString().replace(/[^a-z0-9-]/ig, '-')}.txt`;
+      saveData(blob, filename);
     });
   }