Skip to content

Commit

Permalink
Media internals: Remove use of deprecated cr/ui/ files
Browse files Browse the repository at this point in the history 
Remove use of cr/ui.m.js and cr/ui/tabs.js. These files are deprecated.

Also deleting a checked in grd file, since the grd actually used at
runtime is now an autogenerated one and the checked in file is no
longer used anywhere.

Note: Not planning to migrate this UI to TypeScript, as it has no
type checking currently, and has many styleguide violations (e.g.
extensive use of "var") that would need to be corrected first.

Bug: 1322977
Change-Id: I36a91a1b02502e5b7d80673b9754dd0e7bf1c8f4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3630561
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Ted (Chromium) Meyer <tmathmeyer@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1001152}
  • Loading branch information
Rebekah Potter authored and Chromium LUCI CQ committed May 9, 2022
1 parent 289c538 commit 3cdeb76
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 193 deletions.
4 changes: 4 additions & 0 deletions content/browser/media/media_internals_ui.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
#include "content/public/common/content_switches.h"
#include "content/public/common/url_constants.h"
#include "media/base/media_switches.h"
#include "services/network/public/mojom/content_security_policy.mojom.h"

namespace content {
namespace {
Expand All @@ -26,6 +27,9 @@ WebUIDataSource* CreateMediaInternalsHTMLSource() {
source->AddResourcePaths(
base::make_span(kMediaInternalsResources, kMediaInternalsResourcesSize));
source->SetDefaultResource(IDR_MEDIA_INTERNALS_MEDIA_INTERNALS_HTML);
source->OverrideContentSecurityPolicy(
network::mojom::CSPDirectiveName::TrustedTypes,
"trusted-types static-types;");
return source;
}

Expand Down
8 changes: 4 additions & 4 deletions content/browser/resources/media/media_internals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@ body,
width: 100%;
}

tabbox {
cr-tab-box {
padding-top: 10px;
}

tab {
div[slot='tab'] {
-webkit-user-select: none;
}

body tabpanels {
body div[slot='panel'] {
box-shadow: none;
}

tabpanel {
div[slot='panel'] {
padding: 10px;
}

Expand Down
311 changes: 153 additions & 158 deletions content/browser/resources/media/media_internals.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,168 +11,163 @@
<title>Media Internals</title>
<link rel="stylesheet" href="media_internals.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="chrome://resources/css/tabs.css">
</head>

<body>
<tabbox>
<tabs>
<tab>Players</tab>
<tab>Audio</tab>
<tab>Video Capture</tab>
<tab>Audio Focus</tab>
<tab>CDMs</tab>
</tabs>
<tabpanels>
<tabpanel id="players">
<button id="save-log-button" title="Save all player logs into a file." style="display:none">Save log</button>
<button id="hide-players-button" title="Hide all players in the current view." stype="display:inline-block">Hide players</button>
<button id="copy-all-player-button">Copy all to clipboard</button>
<div id="list-wrapper">
<div id="player-list-wrapper">
<h2>Recent Players</h2>
<ul id="player-list" class="show-none-if-empty"></ul>
</div>
<cr-tab-box hidden>
<div slot="tab">Players</div>
<div slot="tab">Audio</div>
<div slot="tab">Video Capture</div>
<div slot="tab">Audio Focus</div>
<div slot="tab">CDMs</div>
<div slot="panel" id="players">
<button id="save-log-button" title="Save all player logs into a file." style="display:none">Save log</button>
<button id="hide-players-button" title="Hide all players in the current view." stype="display:inline-block">Hide players</button>
<button id="copy-all-player-button">Copy all to clipboard</button>
<div id="list-wrapper">
<div id="player-list-wrapper">
<h2>Recent Players</h2>
<ul id="player-list" class="show-none-if-empty"></ul>
</div>
<div class="property-wrapper">
<h2>
Player Properties
<button class="copy-properties-button">Copy to clipboard</button>
</h2>
<table id="player-property-table">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="log-wrapper">
<h2>
Log <input id="filter-text" type="text" placeholder="property filter">
<button class="copy-log-button">Copy to clipboard</button>
</h2>
<table id="log">
<thead>
<tr>
<th class="timestamp">Timestamp</th>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<ul id="graphs"></ul>
</tabpanel>
<tabpanel id="audio">
<button id="copy-all-audio-button">Copy all to clipboard</button>
<div>
<h2>General Information</h2>
<table id="general-audio-info-table">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="audio-component-list-wrapper">
<h2>Input Controllers</h2>
<ul id="audio-input-controller-list" class="show-none-if-empty"></ul>
</div>
<div id="audio-component-list-wrapper">
<h2>Output Controllers</h2>
<ul id="audio-output-controller-list" class="show-none-if-empty"></ul>
</div>
<div id="audio-component-list-wrapper">
<h2>Output Streams</h2>
<ul id="audio-output-stream-list" class="show-none-if-empty"></ul>
</div>
<div class="property-wrapper">
<h2>
<span id="audio-property-name"></span> Properties
<button class="copy-properties-button">Copy to clipboard</button>
</h2>
<table id="audio-property-table">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</tabpanel>
<tabpanel id="video-capture">
<div id="video-capture-capabilities-wrapper">
<h2>
<span>Video Capture Device Capabilities</span>
<button id="video-capture-capabilities-copy-button">
Copy to clipboard
</button>
</h2>
<table id="video-capture-capabilities-table">
<thead>
<tr>
<th>Device Name</th>
<th>Formats</th>
<th>Capture API</th>
<th>Pan-Tilt-Zoom</th>
<th>Device ID</th>
</tr>
</thead>
<tbody id="video-capture-capabilities-tbody" class="show-none-if-empty"></tbody>
</table>
</div>
</tabpanel>
<tabpanel id="audio-focus">
<div id="list-wrapper">
<h2>Active Sessions</h2>
<ul id="audio-focus-session-list" class="show-none-if-empty"></ul>
</div>
<template id="audio-focus-session-row">
<li>
<label class="audio-focus-session">
<span class="player-name"></span><br />
<span class="player-frame"></span><br />
<span class="player-desc"></span>
</label>
</li>
</template>
</tabpanel>
<tabpanel id="cdms">
<div id="list-wrapper">
<h2>Registered Content Decryption Modules</h2>
<ul>
<li>Clear Key ("org.w3.clearkey") is always supported and not listed
here.</li>
<li>Empty video codec profile list means we are not differentiating
and assume all profiles are supported.</li>
</ul>
<ul id="cdm-list" class="show-none-if-empty"></ul>
</div>
<template id="cdm-row">
<li>
<label class="cdm">
<span class="key-system"></span><br />
<span class="robustness"></span><br />
<span class="name"></span><br />
<span class="version"></span><br />
<span class="path"></span><br />
<span class="capability-status"></span><br />
<span class="capability"></span><br />
</label>
</li>
</template>
</tabpanel>
</tabpanels>
</tabbox>
</div>
<div class="property-wrapper">
<h2>
Player Properties
<button class="copy-properties-button">Copy to clipboard</button>
</h2>
<table id="player-property-table">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="log-wrapper">
<h2>
Log <input id="filter-text" type="text" placeholder="property filter">
<button class="copy-log-button">Copy to clipboard</button>
</h2>
<table id="log">
<thead>
<tr>
<th class="timestamp">Timestamp</th>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<ul id="graphs"></ul>
</div>
<div slot="panel" id="audio">
<button id="copy-all-audio-button">Copy all to clipboard</button>
<div>
<h2>General Information</h2>
<table id="general-audio-info-table">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="audio-component-list-wrapper">
<h2>Input Controllers</h2>
<ul id="audio-input-controller-list" class="show-none-if-empty"></ul>
</div>
<div id="audio-component-list-wrapper">
<h2>Output Controllers</h2>
<ul id="audio-output-controller-list" class="show-none-if-empty"></ul>
</div>
<div id="audio-component-list-wrapper">
<h2>Output Streams</h2>
<ul id="audio-output-stream-list" class="show-none-if-empty"></ul>
</div>
<div class="property-wrapper">
<h2>
<span id="audio-property-name"></span> Properties
<button class="copy-properties-button">Copy to clipboard</button>
</h2>
<table id="audio-property-table">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div slot="panel" id="video-capture">
<div id="video-capture-capabilities-wrapper">
<h2>
<span>Video Capture Device Capabilities</span>
<button id="video-capture-capabilities-copy-button">
Copy to clipboard
</button>
</h2>
<table id="video-capture-capabilities-table">
<thead>
<tr>
<th>Device Name</th>
<th>Formats</th>
<th>Capture API</th>
<th>Pan-Tilt-Zoom</th>
<th>Device ID</th>
</tr>
</thead>
<tbody id="video-capture-capabilities-tbody" class="show-none-if-empty"></tbody>
</table>
</div>
</div>
<div slot="panel" id="audio-focus">
<div id="list-wrapper">
<h2>Active Sessions</h2>
<ul id="audio-focus-session-list" class="show-none-if-empty"></ul>
</div>
<template id="audio-focus-session-row">
<li>
<label class="audio-focus-session">
<span class="player-name"></span><br />
<span class="player-frame"></span><br />
<span class="player-desc"></span>
</label>
</li>
</template>
</div>
<div slot="panel" id="cdms">
<div id="list-wrapper">
<h2>Registered Content Decryption Modules</h2>
<ul>
<li>Clear Key ("org.w3.clearkey") is always supported and not listed
here.</li>
<li>Empty video codec profile list means we are not differentiating
and assume all profiles are supported.</li>
</ul>
<ul id="cdm-list" class="show-none-if-empty"></ul>
</div>
<template id="cdm-row">
<li>
<label class="cdm">
<span class="key-system"></span><br />
<span class="robustness"></span><br />
<span class="name"></span><br />
<span class="version"></span><br />
<span class="path"></span><br />
<span class="capability-status"></span><br />
<span class="capability"></span><br />
</label>
</li>
</template>
</div>
</cr-tab-box>
<dialog id="clipboard-dialog">
<p>Ctrl+C to copy to clipboard, unfocus to exit.</p>
<textarea id="clipboard-textarea" rows="30" cols="80"></textarea>
Expand Down
6 changes: 3 additions & 3 deletions content/browser/resources/media/media_internals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {decorate} from 'chrome://resources/js/cr/ui.m.js';
import {TabBox} from 'chrome://resources/js/cr/ui/tabs.js';
import 'chrome://resources/cr_elements/cr_tab_box/cr_tab_box.js';

import {ClientRenderer} from './client_renderer.js';
import {initialize} from './main.js';
import {Manager} from './manager.js';

initialize(new Manager(new ClientRenderer()));
decorate('tabbox', TabBox);
const tabBox = document.querySelector('cr-tab-box');
tabBox.hidden = false;

0 comments on commit 3cdeb76

Please sign in to comment.