Service worker button to show network panel in drawer.
Original PR: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2403841
Original PR has been reverted because of failing e2e test, fixed faulty e2e test
Bug: 1137050
Change-Id: I7612eedd8a92b5671d365865139ae61f333c9a00
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2506129
Commit-Queue: Chait Pinnamaneni <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
Reviewed-by: Peter Marshall <[email protected]>
diff --git a/test/e2e/application/BUILD.gn b/test/e2e/application/BUILD.gn
index 47ccd86..634713f 100644
--- a/test/e2e/application/BUILD.gn
+++ b/test/e2e/application/BUILD.gn
@@ -8,6 +8,7 @@
sources = [
"cookies_test.ts",
"frame-tree_test.ts",
+ "service-worker-network_test.ts",
"session-storage_test.ts",
"websql-database_test.ts",
]
diff --git a/test/e2e/application/service-worker-network_test.ts b/test/e2e/application/service-worker-network_test.ts
new file mode 100644
index 0000000..266cd6f
--- /dev/null
+++ b/test/e2e/application/service-worker-network_test.ts
@@ -0,0 +1,38 @@
+// Copyright 2020 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 {assert} from 'chai';
+
+import {click, getBrowserAndPages, step} from '../../shared/helper.js';
+import {beforeEach, describe, it} from '../../shared/mocha-extensions.js';
+import {doubleClickSourceTreeItem, navigateToApplicationTab} from '../helpers/application-helpers.js';
+import {checkIfTabExistsInDrawer, tabExistsInMainPanel} from '../helpers/cross-tool-helper.js';
+import {closeDrawer} from '../helpers/quick_open-helpers.js';
+
+const NETWORK_TAB_SELECTOR = '#tab-network';
+const SERVICE_WORKER_ROW_SELECTOR = '[aria-label="Service Workers"]';
+const TEST_HTML_FILE = 'service-worker-network';
+const SERVICE_WORKER_NETWORK_SELECTOR = '[aria-label="Network requests"]';
+
+describe('The Application Tab', async () => {
+ beforeEach(async () => {
+ const {target} = getBrowserAndPages();
+ await navigateToApplicationTab(target, TEST_HTML_FILE);
+ await doubleClickSourceTreeItem(SERVICE_WORKER_ROW_SELECTOR);
+ });
+
+ it('Clicking on Network requests for service worker should open Network panel in drawer and closing should move it back',
+ async () => {
+ await step('Click on network requests for service worker should open network panel in drawer', async () => {
+ await click(SERVICE_WORKER_NETWORK_SELECTOR);
+ const networkTabInDrawer = await checkIfTabExistsInDrawer(NETWORK_TAB_SELECTOR);
+ assert.isTrue(networkTabInDrawer);
+ });
+
+ await step('Close drawer and network tab should move back to main panel', async () => {
+ await closeDrawer();
+ await tabExistsInMainPanel(NETWORK_TAB_SELECTOR);
+ });
+ });
+});
diff --git a/test/e2e/cross_tool_integration/workflow_test.ts b/test/e2e/cross_tool_integration/workflow_test.ts
index 0ef6528..ebe33a6 100644
--- a/test/e2e/cross_tool_integration/workflow_test.ts
+++ b/test/e2e/cross_tool_integration/workflow_test.ts
@@ -5,7 +5,7 @@
import {click, reloadDevTools, waitFor} from '../../shared/helper.js';
import {describe, it} from '../../shared/mocha-extensions.js';
import {navigateToConsoleTab, navigateToIssuesPanelViaInfoBar, waitForConsoleMessageAndClickOnLink} from '../helpers/console-helpers.js';
-import {clickOnContextMenuItemFromTab, prepareForCrossToolScenario, tabExistsInDrawer, tabExistsInMainPanel} from '../helpers/cross-tool-helper.js';
+import {clickOnContextMenuItemFromTab, MOVE_TO_DRAWER_SELECTOR, MOVE_TO_MAIN_PANEL_SELECTOR, prepareForCrossToolScenario, tabExistsInDrawer, tabExistsInMainPanel} from '../helpers/cross-tool-helper.js';
import {clickOnFirstLinkInStylesPanel, navigateToElementsTab} from '../helpers/elements-helpers.js';
import {LAYERS_TAB_SELECTOR} from '../helpers/layers-helpers.js';
import {MEMORY_TAB_ID, navigateToMemoryTab} from '../helpers/memory-helpers.js';
@@ -56,9 +56,6 @@
});
});
-const MOVE_TO_DRAWER_SELECTOR = '[aria-label="Move to bottom"]';
-const MOVE_TO_MAIN_PANEL_SELECTOR = '[aria-label="Move to top"]';
-
describe('A user can move tabs', async function() {
this.timeout(10000);
diff --git a/test/e2e/helpers/cross-tool-helper.ts b/test/e2e/helpers/cross-tool-helper.ts
index 8353374..f6cdf97 100644
--- a/test/e2e/helpers/cross-tool-helper.ts
+++ b/test/e2e/helpers/cross-tool-helper.ts
@@ -22,8 +22,11 @@
await click(menuItemSelector);
}
-const MAIN_PANEL_SELECTOR = 'div[class*="main-tabbed-pane"][slot*="insertion-point-main"]';
-const DRAWER_PANEL_SELECTOR = 'div[class*="drawer-tabbed-pane"][slot*="insertion-point-sidebar"]';
+export const MOVE_TO_DRAWER_SELECTOR = '[aria-label="Move to bottom"]';
+export const MOVE_TO_MAIN_PANEL_SELECTOR = '[aria-label="Move to top"]';
+export const MAIN_PANEL_SELECTOR = 'div[class*="main-tabbed-pane"][slot*="insertion-point-main"]';
+export const DRAWER_PANEL_SELECTOR = 'div[class*="drawer-tabbed-pane"][slot*="insertion-point-sidebar"]';
+export const TAB_HEADER_SELECTOR = 'div[class*="tabbed-pane-header"]';
export async function tabExistsInMainPanel(tabId: string) {
const mainPanel = await waitFor(MAIN_PANEL_SELECTOR);
@@ -34,3 +37,31 @@
const drawer = await waitFor(DRAWER_PANEL_SELECTOR);
await waitFor(tabId, drawer);
}
+
+export const checkIfTabExistsInMainPanel = async (tabId: string) => {
+ const mainPanel = await waitFor(MAIN_PANEL_SELECTOR);
+ const header = await waitFor(TAB_HEADER_SELECTOR, mainPanel);
+ const tab = await header.$(tabId);
+ return !!tab;
+};
+
+export const checkIfTabExistsInDrawer = async (tabId: string) => {
+ const drawer = await waitFor(DRAWER_PANEL_SELECTOR);
+ const header = await waitFor(TAB_HEADER_SELECTOR, drawer);
+ const tab = await header.$(tabId);
+ return !!tab;
+};
+
+export const moveTabToDrawer = async (tabId: string) => {
+ if (!checkIfTabExistsInMainPanel(tabId)) {
+ return;
+ }
+ await clickOnContextMenuItemFromTab(tabId, MOVE_TO_DRAWER_SELECTOR);
+};
+
+export const moveTabToMainPanel = async (tabId: string) => {
+ if (!checkIfTabExistsInDrawer(tabId)) {
+ return;
+ }
+ await clickOnContextMenuItemFromTab(tabId, MOVE_TO_MAIN_PANEL_SELECTOR);
+};
diff --git a/test/e2e/helpers/quick_open-helpers.ts b/test/e2e/helpers/quick_open-helpers.ts
index 84a2fd4..f50105a 100644
--- a/test/e2e/helpers/quick_open-helpers.ts
+++ b/test/e2e/helpers/quick_open-helpers.ts
@@ -2,7 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-import {$$, getBrowserAndPages, platform, typeText, waitFor} from '../../shared/helper.js';
+import {$$, click, getBrowserAndPages, platform, typeText, waitFor} from '../../shared/helper.js';
export const QUICK_OPEN_SELECTOR = '[aria-label="Quick open"]';
const QUICK_OPEN_ITEMS_SELECTOR = '.filtered-list-widget-item';
@@ -58,6 +58,12 @@
return snippets;
}
+export const closeDrawer = async () => {
+ const closeButtonSelector = '[aria-label="Close drawer"]';
+ await waitFor(closeButtonSelector);
+ await click(closeButtonSelector);
+};
+
export const getSelectedItemText = async () => {
const quickOpenElement = await waitFor(QUICK_OPEN_SELECTOR);
const selectedRow = await waitFor(QUICK_OPEN_SELECTED_ITEM_SELECTOR, quickOpenElement);
diff --git a/test/e2e/resources/application/BUILD.gn b/test/e2e/resources/application/BUILD.gn
index d6c574e..106e14d 100644
--- a/test/e2e/resources/application/BUILD.gn
+++ b/test/e2e/resources/application/BUILD.gn
@@ -9,6 +9,9 @@
"cookies.html",
"dedicated-worker.js",
"frame-tree.html",
+ "main.css",
+ "service-worker-network.html",
+ "service-worker.js",
"session-storage.html",
"websql-database.html",
]
diff --git a/test/e2e/resources/application/main.css b/test/e2e/resources/application/main.css
new file mode 100644
index 0000000..aba022a
--- /dev/null
+++ b/test/e2e/resources/application/main.css
@@ -0,0 +1,8 @@
+/**
+ * Copyright 2020 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.
+ */
+body {
+ height: 100%;
+}
diff --git a/test/e2e/resources/application/service-worker-network.html b/test/e2e/resources/application/service-worker-network.html
new file mode 100644
index 0000000..9fb54a1
--- /dev/null
+++ b/test/e2e/resources/application/service-worker-network.html
@@ -0,0 +1,9 @@
+<!--
+ Copyright 2020 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.
+-->
+<link rel="stylesheet" href="main.css" />
+<script>
+ navigator.serviceWorker.register('service-worker.js');
+</script>
diff --git a/test/e2e/resources/application/service-worker.js b/test/e2e/resources/application/service-worker.js
new file mode 100644
index 0000000..1ee35a4
--- /dev/null
+++ b/test/e2e/resources/application/service-worker.js
@@ -0,0 +1,26 @@
+// Copyright 2020 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.
+
+// @ts-nocheck
+const CACHE_NAME = 'cache-v1';
+
+const urlsToCache = [
+ '/test/e2e/resources/application/main.css',
+];
+
+
+self.addEventListener('install', (event) => {
+ event.waitUntil(caches.open(CACHE_NAME).then(function(cache) {
+ return cache.addAll(urlsToCache);
+ }));
+});
+
+self.addEventListener('fetch', (event) => {
+ event.respondWith(caches.match(event.request).then(function(response) {
+ if (response) {
+ return response;
+ }
+ return fetch(event.request);
+ }));
+});
