You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
6.4 KiB
238 lines
6.4 KiB
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);
|
|
});
|
|
}
|
|
|