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/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);
+       });
+     });
+});