Skip to content

GitLab

T
tangled
Commit 93411b8c authored by Sigurdur Asgeirsson's avatar Sigurdur Asgeirsson Committed by Commit Bot
Browse files
Options

Polymerization of chrome://discards UI. 

Convert the imperative implementation to all-declarative polymer
(for the most part). Add closure_compile build configuration and fix the
problems it showed up.
This change should be a no-op in terms of the UI presented.

Bug: 879660

Change-Id: I60d607f1b556a5a2a31f7cb776abb1ff6db38660
Reviewed-on: https://chromium-review.googlesource.com/1210385
Commit-Queue: Sigurður Ásgeirsson <siggi@chromium.org>
Reviewed-by: default avatarChris Hamilton <chrisha@chromium.org>
Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#592160}
parent f0e2d8fa
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1135 additions and 1130 deletions
chrome/browser/browser_resources.grd
View file @ 93411b8c
......@@ -70,13 +70,16 @@
</structures>
<includes>
<if expr="is_win or is_macosx or desktop_linux or chromeos">
<include name="IDR_ABOUT_DISCARDS_CSS" file="resources\discards\discards.css" type="BINDATA" />
<include name="IDR_ABOUT_DISCARDS_HTML" file="resources\discards\discards.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_ABOUT_DISCARDS_DATABASE_TAB_HTML" file="resources\discards\database_tab.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_ABOUT_DISCARDS_DISCARDS_TAB_HTML" file="resources\discards\discards_tab.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_ABOUT_DISCARDS_JS" file="resources\discards\discards.js" type="BINDATA" />
<include name="IDR_ABOUT_DISCARDS_MOJO_JS" file="${root_gen_dir}\chrome\browser\ui\webui\discards\discards.mojom.js" use_base_dir="false" type="BINDATA" />
<include name="IDR_ABOUT_DISCARDS_LIFECYCLE_UNIT_STATE_MOJO_JS" file="${root_gen_dir}\chrome\browser\resource_coordinator\lifecycle_unit_state.mojom.js" use_base_dir="false" type="BINDATA" />
<include name="IDR_DISCARDS_DATABASE_TAB_HTML" file="resources\discards\database_tab.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_DISCARDS_DATABASE_TAB_JS" file="resources\discards\database_tab.js" type="BINDATA" />
<include name="IDR_DISCARDS_DISCARDS_MAIN_HTML" file="resources\discards\discards_main.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_DISCARDS_DISCARDS_MAIN_JS" file="resources\discards\discards_main.js" type="BINDATA" />
<include name="IDR_DISCARDS_DISCARDS_TAB_HTML" file="resources\discards\discards_tab.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_DISCARDS_DISCARDS_TAB_JS" file="resources\discards\discards_tab.js" type="BINDATA" />
<include name="IDR_DISCARDS_HTML" file="resources\discards\discards.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_DISCARDS_JS" file="resources\discards\discards.js" type="BINDATA" />
<include name="IDR_DISCARDS_LIFECYCLE_UNIT_STATE_MOJO_JS" file="${root_gen_dir}\chrome\browser\resource_coordinator\lifecycle_unit_state.mojom.js" use_base_dir="false" type="BINDATA" />
<include name="IDR_DISCARDS_MOJO_JS" file="${root_gen_dir}\chrome\browser\ui\webui\discards\discards.mojom.js" use_base_dir="false" type="BINDATA" />
</if>
<if expr="is_win">
<include name="IDR_ABOUT_CONFLICTS_HTML" file="resources\conflicts\about_conflicts.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
......
chrome/browser/resources/BUILD.gn
View file @ 93411b8c
......@@ -15,6 +15,7 @@ if (closure_compile) {
]
if (is_linux || is_win || is_mac) {
deps += [
"discards:closure_compile",
"md_bookmarks:closure_compile",
"md_downloads:closure_compile",
"md_history:closure_compile",
......
chrome/browser/resources/discards/BUILD.gn 0 → 100644
View file @ 93411b8c
# Copyright 2018 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.
import("//third_party/closure_compiler/compile_js.gni")
js_type_check("closure_compile") {
deps = [
":database_tab",
":discards",
":discards_tab",
]
}
js_library("discards") {
deps = [
"//ui/webui/resources/js:assert",
"//ui/webui/resources/js:util",
]
}
js_library("database_tab") {
deps = [
":discards",
"//ui/webui/resources/js:assert",
"//ui/webui/resources/js:util",
]
extra_deps = [ "//chrome/browser/ui/webui/discards:mojo_bindings_js" ]
externs_list = [
"$root_gen_dir/chrome/browser/ui/webui/discards/discards.mojom.externs.js",
"$root_gen_dir/chrome/browser/resource_coordinator/lifecycle_unit_state.mojom.externs.js",
"$externs_path/mojo.js",
]
}
js_library("discards_tab") {
deps = [
":discards",
"//ui/webui/resources/js:assert",
"//ui/webui/resources/js:icon",
"//ui/webui/resources/js:util",
]
extra_deps = [ "//chrome/browser/ui/webui/discards:mojo_bindings_js" ]
externs_list = [
"$root_gen_dir/chrome/browser/ui/webui/discards/discards.mojom.externs.js",
"$root_gen_dir/chrome/browser/resource_coordinator/lifecycle_unit_state.mojom.externs.js",
"$externs_path/mojo.js",
]
}
chrome/browser/resources/discards/database_tab.html
View file @ 93411b8c
......@@ -6,26 +6,68 @@ found in the LICENSE file.
This is an internal only page meant for debugging. It is not intended for
general use and is not localized.
-->
<!doctype html>
<div id="tab_contents">
<div id="database">
<div class="content-header">Database</div>
<table id="tab-database-info-table">
<link rel="import" href="chrome://resources/html/polymer.html">
<dom-module id="database-tab">
<template>
<style>
table {
border-collapse: collapse;
}
table td,
table th {
border: 1px solid #777;
padding-left: 4px;
padding-right: 4px;
}
table th {
background: rgb(224, 236, 255);
padding-bottom: 4px;
padding-inline-end: 16px;
padding-top: 4px;
white-space: nowrap;
}
table th[data-sort-key] {
cursor: pointer;
}
.header-cell-container {
align-items: center;
display: flex;
justify-content: flex-start;
}
.title-cell {
max-width: 200px;
overflow: hidden;
white-space: nowrap;
}
.title-cell-container {
align-items: center;
display: flex;
justify-content: flex-start;
}
</style>
<table>
<thead>
<tr id="tab-database-info-table-header">
<tr>
<th>
<div class="header-cell-container">
<div>Origin</div>
Origin
</div>
</th>
<th>
<div class="header-cell-container">
<div>Dirty</div>
Dirty
</div>
</th>
<th>
<div class="header-cell-container">
<div>Last Loaded</div>
Last Loaded
</div>
</th>
<th>
......@@ -78,21 +120,24 @@ general use and is not localized.
</th>
</tr>
</thead>
<tbody id="database-info-table-body">
<tbody>
<template is="dom-repeat" sort="compareRows_" items="[[rows_]]">
<tr>
<td class="origin-cell">[[item.origin]]</td>
<td class="dirty-cell">[[boolToString_(item.dirty)]]</td>
<td>[[lastUseToString_(item.value.lastLoaded)]]</td>
<td>[[featureToString_(item.value.updatesFaviconInBackground)]]</td>
<td>[[featureToString_(item.value.updatesTitleInBackground)]]</td>
<td>[[featureToString_(item.value.usesAudioInBackground)]]</td>
<td>
[[featureToString_(item.value.usesNotificationsInBackground)]]
</td>
<td>[[getAvgCPU_(item.value.loadTimeEstimates)]]</td>
<td>[[getAvgMemory_(item.value.loadTimeEstimates)]]</td>
</tr>
</template>
</tbody>
</table>
<template id="database-info-row">
<tr>
<td class="origin-cell"></td>
<td class="dirty-cell"></td>
<td class="last-loaded-cell"></td>
<td class="updates-favicon-in-background-cell"></td>
<td class="updates-title-in-background-cell"></td>
<td class="uses-audio-in-background-cell"></td>
<td class="uses-notifications-in-background-cell"></td>
<td class="avg-cpu-cell"></td>
<td class="avg-memory-cell"></td>
</tr>
</template>
</div>
</div>
</template>
<script src="database_tab.js"></script>
</dom-module>
chrome/browser/resources/discards/database_tab.js 0 → 100644
View file @ 93411b8c
// Copyright 2018 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.
Polymer({
is: 'database-tab',
properties: {
/**
* List of database rows.
* @private {?Array<!mojom.SiteCharacteristicsDatabaseEntry>}
*/
rows_: {
type: Array,
},
},
/** @private {number} */
updateTimer_: 0,
/** @private {!Object} */
requestedOrigins_: {},
/** @private {?mojom.DiscardsDetailsProviderPtr} */
uiHandler_: null,
/** @override */
ready: function() {
this.requestedOrigins_ = {};
this.uiHandler_ = discards.getOrCreateUiHandler();
// Specifies the update interval of the table, in ms.
const UPDATE_INTERVAL_MS = 1000;
// Update immediately.
this.updateDbRows_();
// Set an interval timer to update periodically.
this.updateTimer_ =
setInterval(this.updateDbRows_.bind(this), UPDATE_INTERVAL_MS);
},
/**
* Issues a request for the data and renders on response.
* @private
*/
updateDbRows_: function() {
this.uiHandler_
.getSiteCharacteristicsDatabase(Object.keys(this.requestedOrigins_))
.then(response => {
// Bail if the SiteCharacteristicsDatabase is turned off.
if (!response.result)
return;
// Add any new origins to the (monotonically increasing)
// set of requested origins.
const dbRows = response.result.dbRows;
for (let dbRow of dbRows)
this.requestedOrigins_[dbRow.origin] = true;
this.rows_ = dbRows;
});
},
/**
* Compares two db rows by their origin.
* @param {mojom.SiteCharacteristicsDatabaseEntry} a The first value being
* compared.
* @param {mojom.SiteCharacteristicsDatabaseEntry} b The second value being
* compared.
* @return {number} A negative number if a < b, 0 if a == b, and a positive
* number if a > b.
* @private
*/
compareRows_: function(a, b) {
return a.origin.localeCompare(b.origin);
},
/**
* @param {boolean} value The value to convert.
* @return {string} A display string representing value.
* @private
*/
boolToString_: function(value) {
return discards.boolToString(value);
},
/**
* @param {number} time Time in seconds since epoch.
* in question.
* @return {string} A user-friendly string explaining how long ago time
* occurred.
* @private
*/
lastUseToString_: function(time) {
const nowSecondsFromEpoch = Math.round(Date.now() / 1000);
return discards.durationToString(nowSecondsFromEpoch - time);
},
/**
* @param {?mojom.SiteCharacteristicsFeature} feature The feature
* in question.
* @return {string} A human-readable string representing the feature.
* @private
*/
featureToString_: function(feature) {
if (!feature)
return 'N/A';
if (feature.useTimestamp) {
const nowSecondsFromEpoch = Math.round(Date.now() / 1000);
return 'Used ' +
discards.durationToString(nowSecondsFromEpoch - feature.useTimestamp);
}
if (feature.observationDuration) {
return discards.secondsToString(feature.observationDuration);
}
return 'N/A';
},
/**
* @param {?mojom.SiteCharacteristicsPerformanceMeasurement}
* loadTimeEstimates The load time estimates to convert.
* @return {string} The average CPU usage string or 'N/A' if unavailable.
* @private
*/
getAvgCPU_: function(loadTimeEstimates) {
return loadTimeEstimates ? loadTimeEstimates.avgCpuUsageUs.toString() :
'N/A';
},
/**
* @param {?mojom.SiteCharacteristicsPerformanceMeasurement}
* loadTimeEstimates The load time estimates to convert.
* @return {string} The average memory usage string or 'N/A' if unavailable.
* @private
*/
getAvgMemory_: function(loadTimeEstimates) {
return loadTimeEstimates ? loadTimeEstimates.avgFootprintKb.toString() :
'N/A';
},
});
chrome/browser/resources/discards/discards.css deleted 100644 → 0
View file @ f0e2d8fa
/* Copyright 2017 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. */
table {
border-collapse: collapse;
}
table td,
table th {
border: 1px solid #777;
padding-left: 4px;
padding-right: 4px;
}
table th {
background: rgb(224, 236, 255);
padding-bottom: 4px;
padding-inline-end: 16px;
padding-top: 4px;
white-space: nowrap;
}
table th[data-sort-key] {
cursor: pointer;
}
table th div.header-cell-container {
align-items: center;
display: flex;
justify-content: flex-start;
/* Make sure mouse events pass through to the underlying <th>. */
pointer-events: none;
}
table th div.header-cell-container div {
/* Make sure mouse events pass through to the underlying <th>. */
pointer-events: none;
}
table th div.header-cell-container div div {
/* Make sure mouse events pass through to the underlying <th>. */
pointer-events: none;
}
table td.title-cell {
max-width: 200px;
overflow: hidden;
white-space: nowrap;
}
table td div.title-cell-container {
align-items: center;
display: flex;
justify-content: flex-start;
}
table td div.favicon-div {
height: 16px;
margin: 3px;
min-width: 16px;
}
table td div.title-div {
overflow: hidden;
white-space: nowrap;
}
table td.tab-url-cell {
max-width: 200px;
overflow: hidden;
white-space: nowrap;
}
table td.visibility-cell {
width: 6em;
}
table td.loading-state-cell {
width: 6em;
}
table td.state-cell {
width: 10em;
}
table td.boolean-cell,
table td.discard-count-cell,
table td.reactivation-score-cell,
table td.site-engagement-score-cell,
table td.utility-rank-cell {
text-align: center;
}
table td div[is=action-link],
table td.actions-cell {
font-size: 0.6rem;
}
table tr:hover {
background: rgb(255, 255, 187);
}
th div.header-cell-container::after {
content: '▲';
opacity: 0;
}
th.sort-column div.header-cell-container::after {
content: '▲';
opacity: 1;
}
th[data-sort-reverse].sort-column div.header-cell-container::after {
content: '▼';
opacity: 1;
}
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
color: rgb(48, 57, 66);
display: flex;
flex-direction: column;
font-size: 13px;
height: 100%;
margin: 0;
overflow: auto;
}
#navigation {
flex-shrink: 0;
padding-top: 20px;
width: 150px;
}
.tab-header {
border-inline-start: 6px solid transparent;
padding-left: 15px;
}
.tab-header.selected {
border-inline-start-color: rgb(78, 87, 100);
}
.tab-header > button {
background-color: white;
border: 0;
cursor: pointer;
font: inherit;
line-height: 17px;
margin: 6px 0;
padding: 0 2px;
}
.tab-header:not(.selected) > button {
color: #999;
}
#container {
display: flex;
height: 100%
}
#infobar {
background: rgb(255, 212, 0);
display: none;
padding: 4px 0;
text-align: center;
}
#infobar.show {
display: block;
}
#content {
flex-grow: 1;
}
#content > div {
min-width: 32em;
padding: 0 20px 65px 0;
}
#content > div:not(.selected) {
display: none;
}
.content-header {
background: linear-gradient(white, white 40%, rgba(255, 255, 255, 0.92));
border-bottom: 1px solid #eee;
font-size: 150%;
padding: 20px 0 10px 0;
z-index: 1;
}
#caption {
color: rgb(92, 97, 102);
font-size: 150%;
padding-bottom: 10px;
padding-left: 20px;
}
.tooltip-container {
position: relative;
}
.tooltip {
background: black;
color: white;
display: none;
font-size: 0.75rem;
left: 50%;
margin-left: -100px;
margin-top: 4px;
padding: 4px;
position: absolute;
top: 100%;
width: 200px;
z-index: 1;
}
.tooltip-container:hover > .tooltip {
display: block;
}
chrome/browser/resources/discards/discards.html
View file @ 93411b8c
......@@ -4,35 +4,22 @@ Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
This is an internal only page meant for debugging. It is not intended for
general use and is not localized.
-->
general use and is not localized.-->
<!doctype html>
<html lang="en">
<head>
<title>Discards</title>
<meta charset="utf-8">
<link rel="stylesheet" href="chrome://resources/css/action_link.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="import" href="discards_tab.html">
<link rel="import" href="database_tab.html">
<link rel="import" href="discards_main.html">
<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/icon.js"></script>
<script src="chrome://resources/js/mojo_bindings.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="chrome/browser/ui/webui/discards/discards.mojom.js"></script>
<script src="discards.js"></script>
<link rel="stylesheet" type="text/css" href="discards.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
</head>
<body>
<div id="container">
<div id="navigation">
<div id="caption">Discards</div>
</div>
<div id="content">
<!-- This will be populated with nodes imported from the rel="import" links
above, which in turn contain elements used to populate the sidebar.
-->
</div>
</div>
<discards-main></discards-main>
</body>
</html>
chrome/browser/resources/discards/discards_main.html 0 → 100644
View file @ 93411b8c
<!--
Copyright 2018 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.
This is an internal only page meant for debugging. It is not intended for
general use and is not localized.
-->
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/paper_tabs_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
<link rel="import" href="database_tab.html">
<link rel="import" href="discards_tab.html">
<dom-module id="discards-main">
<template>
<style include="paper-tabs-style cr-hidden-style"></style>
<paper-tabs noink selected="{{selected}}">
<paper-tab>Discards</paper-tab>
<paper-tab>Database</paper-tab>
</paper-tabs>
<iron-pages selected="[[selected]]">
<discards-tab></discards-tab>
<database-tab></database-tab>
</iron-pages>
</template>
<script src="discards_main.js"></script>
</dom-module>
chrome/browser/resources/discards/discards_main.js 0 → 100644
View file @ 93411b8c
// Copyright 2018 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.
Polymer({
is: 'discards-main',
properties: {
selected: {type: Number, value: 0},
},
});
chrome/browser/resources/discards/discards_tab.js 0 → 100644
View file @ 93411b8c
This diff is collapsed.
chrome/browser/ui/webui/discards/discards_ui.cc
View file @ 93411b8c
......@@ -354,20 +354,24 @@ DiscardsUI::DiscardsUI(content::WebUI* web_ui)
std::unique_ptr<content::WebUIDataSource> source(
content::WebUIDataSource::Create(chrome::kChromeUIDiscardsHost));
source->AddResourcePath("discards.css", IDR_ABOUT_DISCARDS_CSS);
source->AddResourcePath("discards.js", IDR_ABOUT_DISCARDS_JS);
source->AddResourcePath("discards_tab.html",
IDR_ABOUT_DISCARDS_DISCARDS_TAB_HTML);
source->AddResourcePath("database_tab.html",
IDR_ABOUT_DISCARDS_DATABASE_TAB_HTML);
source->AddResourcePath("discards.js", IDR_DISCARDS_JS);
source->AddResourcePath("discards_main.html",
IDR_DISCARDS_DISCARDS_MAIN_HTML);
source->AddResourcePath("discards_main.js", IDR_DISCARDS_DISCARDS_MAIN_JS);
source->AddResourcePath("discards_tab.js", IDR_DISCARDS_DISCARDS_TAB_JS);
source->AddResourcePath("discards_tab.html", IDR_DISCARDS_DISCARDS_TAB_HTML);
source->AddResourcePath("database_tab.js", IDR_DISCARDS_DATABASE_TAB_JS);
source->AddResourcePath("database_tab.html", IDR_DISCARDS_DATABASE_TAB_HTML);
// Full paths (relative to src) are important for Mojom generated files.
source->AddResourcePath("chrome/browser/ui/webui/discards/discards.mojom.js",
IDR_ABOUT_DISCARDS_MOJO_JS);
IDR_DISCARDS_MOJO_JS);
source->AddResourcePath(
"chrome/browser/resource_coordinator/lifecycle_unit_state.mojom.js",
IDR_ABOUT_DISCARDS_LIFECYCLE_UNIT_STATE_MOJO_JS);
IDR_DISCARDS_LIFECYCLE_UNIT_STATE_MOJO_JS);
source->SetDefaultResource(IDR_ABOUT_DISCARDS_HTML);
source->SetDefaultResource(IDR_DISCARDS_HTML);
Profile* profile = Profile::FromWebUI(web_ui);
content::WebUIDataSource::Add(profile, source.release());
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment