Skip to content

Commit

Permalink
Attribution internals: Remove use of deprecated cr/ui.m.js, cr/ui/tabs
Browse files Browse the repository at this point in the history 
Specifically, converting Table to be a native custom element instead
of relying on out of date cr/ui.m.js methods, and switching from
cr.ui.TabBox to CrTabBox.

This is also in preparation for migrating to TypeScript/removing closure
dependency, since these deprecated files are not supported for
TypeScript UIs.

Bug: 1316438, 1322977
Change-Id: I10293c7c3c77ab5fc9a4eb5397df057d45940ef8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3639271
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Nasko Oskov <nasko@chromium.org>
Reviewed-by: Andrew Paseltiner <apaseltiner@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1002308}
  • Loading branch information
Rebekah Potter authored and Chromium LUCI CQ committed May 11, 2022
1 parent b0c25af commit 052bb79
Show file tree
Hide file tree
Showing 11 changed files with 406 additions and 365 deletions.
1 change: 1 addition & 0 deletions content/BUILD.gn
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ grit("dev_ui_content_resources") {
"//content/browser/attribution_reporting:mojo_bindings_webui_js",
"//content/browser/prerender:mojo_bindings_webui_js",
"//content/browser/process_internals:mojo_bindings_webui_js",
"//content/browser/resources/attribution_reporting:web_components",
"//storage/browser/quota:mojo_bindings_webui_js",
]
}
Expand Down
67 changes: 44 additions & 23 deletions content/browser/attribution_reporting/attribution_internals_browsertest.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,8 @@ class AttributionInternalsWebUiBrowserTest : public ContentBrowserTest {
// the report table is empty.
void SetTitleOnReportsTableEmpty(const std::u16string& title) {
static constexpr char kObserveEmptyReportsTableScript[] = R"(
let table = document.querySelector("#report-table-wrapper tbody");
let table = document.querySelector('#reportTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 1 &&
table.children[0].children[0].innerText === "No sent or pending reports.") {
Expand Down Expand Up @@ -222,7 +223,8 @@ IN_PROC_BROWSER_TEST_F(
OverrideWebUIAttributionManager();

static constexpr char wait_script[] = R"(
let table = document.querySelector("#source-table-wrapper tbody");
let table = document.querySelector('#sourceTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 1 &&
table.children[0].children[0].innerText ===
Expand Down Expand Up @@ -294,7 +296,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
StorableSource::Result::kExcessiveReportingOrigins);

static constexpr char wait_script[] = R"(
let table = document.querySelector("#source-table-wrapper tbody");
let table = document.querySelector('#sourceTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 8 &&
table.children[0].children[0].innerText === $1 &&
Expand Down Expand Up @@ -461,7 +464,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,

{
static constexpr char wait_script[] = R"(
let table = document.querySelector("#report-table-wrapper tbody");
let table = document.querySelector('#reportTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 6 &&
table.children[0].children[3].innerText ===
Expand Down Expand Up @@ -493,7 +497,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,

{
static constexpr char wait_script[] = R"(
let table = document.querySelector("#report-table-wrapper tbody");
let table = document.querySelector('#reportTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 6 &&
table.children[5].children[3].innerText ===
Expand All @@ -520,14 +525,16 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,

TitleWatcher title_watcher(shell()->web_contents(), kCompleteTitle2);
// Sort by priority ascending.
EXPECT_TRUE(ExecJsInWebUI(
"document.querySelectorAll('#report-table-wrapper th')[6].click();"));
EXPECT_TRUE(
ExecJsInWebUI("document.querySelector('#reportTable')"
".shadowRoot.querySelectorAll('th')[6].click();"));
EXPECT_EQ(kCompleteTitle2, title_watcher.WaitAndGetTitle());
}

{
static constexpr char wait_script[] = R"(
let table = document.querySelector("#report-table-wrapper tbody");
let table = document.querySelector('#reportTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 6 &&
table.children[0].children[3].innerText ===
Expand All @@ -554,8 +561,9 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,

TitleWatcher title_watcher(shell()->web_contents(), kCompleteTitle3);
// Sort by priority descending.
EXPECT_TRUE(ExecJsInWebUI(
"document.querySelectorAll('#report-table-wrapper th')[6].click();"));
EXPECT_TRUE(
ExecJsInWebUI("document.querySelector('#reportTable')"
".shadowRoot.querySelectorAll('th')[6].click();"));

EXPECT_EQ(kCompleteTitle3, title_watcher.WaitAndGetTitle());
}
Expand Down Expand Up @@ -591,7 +599,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,

// Verify both rows get rendered.
static constexpr char wait_script[] = R"(
let table = document.querySelector("#report-table-wrapper tbody");
let table = document.querySelector('#reportTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 2 &&
table.children[0].children[6].innerText === "7" &&
Expand Down Expand Up @@ -639,7 +648,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,

// Verify both rows get rendered.
static constexpr char wait_script[] = R"(
let table = document.querySelector("#source-table-wrapper tbody");
let table = document.querySelector('#sourceTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 2 &&
table.children[0].children[0].innerText === "5" &&
Expand All @@ -659,7 +669,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
const std::u16string kDeleteTitle = u"Delete";
TitleWatcher delete_title_watcher(shell()->web_contents(), kDeleteTitle);
static constexpr char kObserveEmptySourcesTableScript[] = R"(
let table = document.querySelector("#source-table-wrapper tbody");
let table = document.querySelector('#sourceTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 1 &&
table.children[0].children[0].innerText === "No sources.") {
Expand Down Expand Up @@ -701,7 +712,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
OverrideWebUIAttributionManager();

static constexpr char wait_script[] = R"(
let table = document.querySelector("#report-table-wrapper tbody");
let table = document.querySelector('#reportTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 1 &&
table.children[0].children[6].innerText === "7") {
Expand All @@ -722,7 +734,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
SetTitleOnReportsTableEmpty(kSentTitle);

EXPECT_TRUE(ExecJsInWebUI(
R"(document.querySelector('#report-table-wrapper input[type="checkbox"]').click();)"));
R"(document.querySelector('#reportTable')
.shadowRoot.querySelector('input[type="checkbox"]').click();)"));
EXPECT_TRUE(
ExecJsInWebUI("document.getElementById('send-reports').click();"));

Expand Down Expand Up @@ -821,7 +834,8 @@ IN_PROC_BROWSER_TEST_F(

{
static constexpr char wait_script[] = R"(
let table = document.querySelector("#aggregatable-report-table-wrapper tbody");
let table = document.querySelector('#aggregatableReportTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 6 &&
table.children[0].children[3].innerText ===
Expand Down Expand Up @@ -882,7 +896,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
R"json([ { "data": "2", "priority": "3", "filters": { "c": [ "d" ] } }, { "data": "4", "priority": "5", "deduplication_key": "6", "not_filters": { "e": [ "f" ] } }])json";

static constexpr char wait_script[] = R"(
let table = document.querySelector("#trigger-table-wrapper tbody");
let table = document.querySelector('#triggerTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 1 &&
table.children[0].children[1].innerText === "Success: Report stored" &&
Expand Down Expand Up @@ -952,7 +967,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
OverrideWebUIAttributionManager();

static constexpr char wait_script[] = R"(
let table = document.querySelector("#aggregatable-report-table-wrapper tbody");
let table = document.querySelector('#aggregatableReportTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 1) {
document.title = $1;
Expand All @@ -971,7 +987,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
TitleWatcher sent_title_watcher(shell()->web_contents(), kSentTitle);

static constexpr char kObserveEmptyReportsTableScript[] = R"(
let table = document.querySelector("#aggregatable-report-table-wrapper tbody");
let table = document.querySelector('#aggregatableReportTable')
.shadowRoot.querySelector('tbody');
let obs = new MutationObserver(() => {
if (table.children.length === 1 &&
table.children[0].children[0].innerText === "No sent or pending reports.") {
Expand All @@ -983,7 +1000,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
ExecJsInWebUI(JsReplace(kObserveEmptyReportsTableScript, kSentTitle)));

EXPECT_TRUE(ExecJsInWebUI(
R"(document.querySelectorAll('#aggregatable-report-table-wrapper input[type="checkbox"]')[1].click();)"));
R"(document.querySelector('#aggregatableReportTable')
.shadowRoot.querySelectorAll('input[type="checkbox"]')[1].click();)"));
EXPECT_TRUE(ExecJsInWebUI(
"document.getElementById('send-aggregatable-reports').click();"));

Expand Down Expand Up @@ -1024,7 +1042,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
// By default, debug reports are shown.
{
static constexpr char wait_script[] = R"(
let table = document.querySelector("#report-table-wrapper tbody");
let table = document.querySelector('#reportTable')
.shadowRoot.querySelector('tbody');
let label = document.querySelector('#show-debug-event-reports span');
let obs = new MutationObserver(() => {
if (table.children.length === 2 &&
Expand Down Expand Up @@ -1061,7 +1080,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
// the label should indicate the number.
{
static constexpr char wait_script[] = R"(
let table = document.querySelector("#report-table-wrapper tbody");
let table = document.querySelector('#reportTable')
.shadowRoot.querySelector('tbody');
let label = document.querySelector('#show-debug-event-reports span');
let obs = new MutationObserver(() => {
if (table.children.length === 1 &&
Expand All @@ -1087,7 +1107,8 @@ IN_PROC_BROWSER_TEST_F(AttributionInternalsWebUiBrowserTest,
// cleared.
{
static constexpr char wait_script[] = R"(
let table = document.querySelector("#report-table-wrapper tbody");
let table = document.querySelector('#reportTable').shadowRoot
.querySelector('tbody');
let label = document.querySelector('#show-debug-event-reports span');
let obs = new MutationObserver(() => {
if (table.children.length === 3 &&
Expand Down
4 changes: 4 additions & 0 deletions content/browser/attribution_reporting/attribution_internals_ui.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ AttributionInternalsUI::AttributionInternalsUI(WebUI* web_ui)
IDR_ATTRIBUTION_INTERNALS_MOJOM_JS);
source->AddResourcePath("attribution_internals.js",
IDR_ATTRIBUTION_INTERNALS_JS);
source->AddResourcePath("attribution_internals_table.js",
IDR_ATTRIBUTION_INTERNALS_TABLE_JS);
source->AddResourcePath("table_model.js",
IDR_ATTRIBUTION_INTERNALS_TABLE_MODEL_JS);
source->AddResourcePath("attribution_internals.css",
IDR_ATTRIBUTION_INTERNALS_CSS);
source->SetDefaultResource(IDR_ATTRIBUTION_INTERNALS_HTML);
Expand Down
9 changes: 9 additions & 0 deletions content/browser/resources/attribution_reporting/BUILD.gn
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
# found in the LICENSE file.

import("//third_party/closure_compiler/compile_js.gni")
import("//tools/polymer/html_to_js.gni")

html_to_js("web_components") {
js_files = [ "attribution_internals_table.js" ]
}

js_type_check("closure_compile") {
closure_flags = default_closure_args + mojom_js_args + [
Expand All @@ -16,8 +21,12 @@ js_type_check("closure_compile") {

js_library("attribution_internals") {
deps = [
":table_model",
"//content/browser/attribution_reporting:mojo_bindings_webui_js",
"//ui/webui/resources/js:assert.m",
"//ui/webui/resources/js:util.m",
]
}

js_library("table_model") {
}
59 changes: 2 additions & 57 deletions content/browser/resources/attribution_reporting/attribution_internals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,71 +49,16 @@ main {
padding: 19px;
}

.table-wrapper {
background-color: #fff;
border-color: rgba(0,0,0,.12);
border-radius: 4px;
border-style: solid;
border-width: 1px;
overflow-x: scroll;
}

table {
border: 0;
border-collapse: collapse;
}

tbody tr {
border-top-color: rgba(0,0,0,.12);
border-top-style: solid;
border-top-width: 1px;
}

thead tr {
border: 0;
}

table td,
table th {
padding-inline-end: 16px;
padding-inline-start: 16px;
}

th[aria-sort] {
cursor: pointer;
}

th[aria-sort]::after {
content: '⬍';
}

th[aria-sort='ascending']::after {
content: '⬆';
}

th[aria-sort='descending']::after {
content: '⬇';
}

button {
font: inherit;
margin-inline-end: 30px;
}

.http-error {
background-color: rgb(250,199,192);
}

.debug-url {
color: rgb(66,135,245);
font-weight: bold;
}

tab::before {
div[slot='tab']::before {
color: transparent;
content: '⬤ ';
}

tab.unread::before {
div[slot='tab'].unread::before {
color: rgb(26,115,232);
}

0 comments on commit 052bb79

Please sign in to comment.