Bug 1774601 - [devtools] Stop hiding query parameters in Tab components. r=bomsy

Differential Revision: https://phabricator.services.mozilla.com/D149532

devtools/client/debugger/src/components/Editor/Tab.js

@@ -29,7 +29,6 @@ import {
   getSelectedSource,
   getActiveSearch,
   getSourcesForTabs,
-  getHasSiblingOfSameName,
   getContext,
 } from "../../selectors";
 
@@ -43,7 +42,6 @@ class Tab extends PureComponent {
       closeTabs: PropTypes.func.isRequired,
       copyToClipboard: PropTypes.func.isRequired,
       cx: PropTypes.object.isRequired,
-      hasSiblingOfSameName: PropTypes.bool.isRequired,
       onDragEnd: PropTypes.func.isRequired,
       onDragOver: PropTypes.func.isRequired,
       onDragStart: PropTypes.func.isRequired,
@@ -182,7 +180,6 @@ class Tab extends PureComponent {
       closeTab,
       source,
       tabSources,
-      hasSiblingOfSameName,
       onDragOver,
       onDragStart,
       onDragEnd,
@@ -212,7 +209,7 @@ class Tab extends PureComponent {
     });
 
     const path = getDisplayPath(source, tabSources);
-    const query = hasSiblingOfSameName ? getSourceQueryString(source) : "";
+    const query = getSourceQueryString(source);
 
     return (
       <div
@@ -255,7 +252,6 @@ const mapStateToProps = (state, { source }) => {
     tabSources: getSourcesForTabs(state),
     selectedSource,
     activeSearch: getActiveSearch(state),
-    hasSiblingOfSameName: getHasSiblingOfSameName(state, source),
   };
 };
 

devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js

@@ -13,7 +13,6 @@ import AccessibleImage from "../shared/AccessibleImage";
 
 import {
   getGeneratedSourceByURL,
-  getHasSiblingOfSameName,
   hasPrettyTab as checkHasPrettyTab,
   getContext,
   getExtensionNameBySourceUrl,
@@ -422,7 +421,6 @@ const mapStateToProps = (state, props) => {
   return {
     cx: getContext(state),
     hasMatchingGeneratedSource: getHasMatchingGeneratedSource(state, source),
-    hasSiblingOfSameName: getHasSiblingOfSameName(state, source),
     hasPrettyTab: source ? checkHasPrettyTab(state, source.url) : false,
     sourceContent: source ? getSourceContentValue(state, source) : null,
     extensionName:

devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js

@@ -15,7 +15,6 @@ import {
   getFileURL,
 } from "../../../utils/source";
 import {
-  getHasSiblingOfSameName,
   getBreakpointsForSource,
   getContext,
   getThread,
@@ -31,7 +30,6 @@ class BreakpointHeading extends PureComponent {
       cx: PropTypes.object.isRequired,
       sources: PropTypes.array.isRequired,
       source: PropTypes.object.isRequired,
-      hasSiblingOfSameName: PropTypes.bool.isRequired,
       selectSource: PropTypes.func.isRequired,
       thread: PropTypes.object.isRequired,
     };
@@ -41,17 +39,10 @@ class BreakpointHeading extends PureComponent {
   };
 
   render() {
-    const {
+    const { cx, sources, source, selectSource, thread } = this.props;
-      cx,
-      sources,
-      source,
-      hasSiblingOfSameName,
-      selectSource,
-      thread,
-    } = this.props;
 
     const path = getDisplayPath(source, sources);
-    const query = hasSiblingOfSameName ? getSourceQueryString(source) : "";
+    const query = getSourceQueryString(source);
 
     return (
       <div
@@ -77,7 +68,6 @@ class BreakpointHeading extends PureComponent {
 
 const mapStateToProps = (state, { source }) => ({
   cx: getContext(state),
-  hasSiblingOfSameName: getHasSiblingOfSameName(state, source),
   breakpointsForSource: getBreakpointsForSource(state, source.id),
   thread: getThread(state, source.thread),
 });

devtools/client/debugger/src/selectors/sources.js

@@ -136,14 +136,6 @@ export function getSourcesUrlsInSources(state, url) {
   return getPlainUrls(state)[plainUrl] || [];
 }
 
-export function getHasSiblingOfSameName(state, source) {
-  if (!source) {
-    return false;
-  }
-
-  return getSourcesUrlsInSources(state, source.url).length > 1;
-}
-
 // This is only used externaly by tabs and breakpointSources selectors
 export function getSourcesMap(state) {
   return state.sources.sources;

devtools/client/debugger/test/mochitest/browser.ini

@@ -37,6 +37,7 @@ skip-if =
   asan # Bug 1591064
   win10_2004 # Bug 1767702
 [browser_dbg-features-source-text-content.js]
+[browser_dbg-features-tabs.js]
 [browser_dbg-features-wasm.js]
 
 # Other tests:

devtools/client/debugger/test/mochitest/browser_dbg-features-source-tree.js

@@ -27,36 +27,6 @@ const testServer = createVersionizedHttpTestServer(
 );
 const TEST_URL = testServer.urlFor("index.html");
 
-const INTEGRATION_TEST_PAGE_SOURCES = [
-  "index.html",
-  "iframe.html",
-  "script.js",
-  "onload.js",
-  "test-functions.js",
-  "query.js?x=1",
-  "query.js?x=2",
-  "query2.js?y=3",
-  "bundle.js",
-  "original.js",
-  "bundle-with-another-original.js",
-  "original-with-no-update.js",
-  "replaced-bundle.js",
-  "removed-original.js",
-  "named-eval.js",
-  // Webpack generated some extra sources:
-  "bootstrap 3b1a221408fdde86aa49",
-  "bootstrap a1ecee2f86e1d0ea3fb5",
-  "bootstrap 6fda1f7ea9ecbc1a2d5b",
-  // There is 3 occurences, one per target (main thread, worker and iframe).
-  // But there is even more source actors (named evals and duplicated script tags).
-  "same-url.sjs",
-  "same-url.sjs",
-];
-// The iframe one is only available when fission is enabled, or EFT
-if (isFissionEnabled() || isEveryFrameTargetEnabled()) {
-  INTEGRATION_TEST_PAGE_SOURCES.push("same-url.sjs");
-}
-
 /**
  * This test opens the SourceTree manually via click events on the nested source,
  * and then adds a source dynamically and asserts it is visible.

devtools/client/debugger/test/mochitest/browser_dbg-features-tabs.js

@@ -0,0 +1,49 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+/**
+ * This test focuses on the Tabs component, where we display all opened sources.
+ */
+
+"use strict";
+
+const testServer = createVersionizedHttpTestServer(
+  "examples/sourcemaps-reload-uncompressed"
+);
+const TEST_URL = testServer.urlFor("index.html");
+
+add_task(async function() {
+  // We open against a blank page and only then navigate to the test page
+  // so that sources aren't GC-ed before opening the debugger.
+  // When we (re)load a page while the debugger is opened, the debugger
+  // will force all sources to be held in memory.
+  const dbg = await initDebuggerWithAbsoluteURL("about:blank");
+
+  await navigateToAbsoluteURL(dbg, TEST_URL, ...INTEGRATION_TEST_PAGE_SOURCES);
+
+  info("Wait for all sources to be displayed in the source tree");
+  let displayedSources;
+  await waitFor(() => {
+    displayedSources = dbg.selectors.getDisplayedSourcesList();
+    return displayedSources.length == INTEGRATION_TEST_PAGE_SOURCES.length;
+  }, "Got the expected number of sources from the selectors");
+
+  // Open each visible source in tabs
+  const uniqueUrls = new Set();
+  for (const source of displayedSources) {
+    info(`Opening '${source.url}' from ${source.thread}`);
+    await selectSource(dbg, source);
+    uniqueUrls.add(source.url);
+  }
+
+  // Some sources are loaded from the same URL and only one tab will be opened for them
+  is(countTabs(dbg), uniqueUrls.size, "Got a tab for each distinct source URL");
+
+  for (const source of displayedSources) {
+    info(`Closing '${source.url}' from ${source.thread}`);
+    await closeTab(dbg, source);
+  }
+
+  is(countTabs(dbg), 0, "All tabs are closed");
+});

devtools/client/debugger/test/mochitest/examples/doc-sources-querystring.html

@@ -1,15 +0,0 @@
- <!-- This Source Code Form is subject to the terms of the Mozilla Public
-    - License, v. 2.0. If a copy of the MPL was not distributed with this
-    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <meta charset="utf-8"/>
-        <title>Debugger test page</title>
-      </head>
-
-      <body>
-        <script src="simple1.js?x=1"></script>
-        <script src="simple1.js?x=2"></script>
-      </body>
-    </html>

devtools/client/debugger/test/mochitest/head.js

@@ -103,6 +103,36 @@ async function runAllIntegrationTests(testFolder, env) {
   }
 }
 
+const INTEGRATION_TEST_PAGE_SOURCES = [
+  "index.html",
+  "iframe.html",
+  "script.js",
+  "onload.js",
+  "test-functions.js",
+  "query.js?x=1",
+  "query.js?x=2",
+  "query2.js?y=3",
+  "bundle.js",
+  "original.js",
+  "bundle-with-another-original.js",
+  "original-with-no-update.js",
+  "replaced-bundle.js",
+  "removed-original.js",
+  "named-eval.js",
+  // Webpack generated some extra sources:
+  "bootstrap 3b1a221408fdde86aa49",
+  "bootstrap a1ecee2f86e1d0ea3fb5",
+  "bootstrap 6fda1f7ea9ecbc1a2d5b",
+  // There is 3 occurences, one per target (main thread, worker and iframe).
+  // But there is even more source actors (named evals and duplicated script tags).
+  "same-url.sjs",
+  "same-url.sjs",
+];
+// The iframe one is only available when fission is enabled, or EFT
+if (isFissionEnabled() || isEveryFrameTargetEnabled()) {
+  INTEGRATION_TEST_PAGE_SOURCES.push("same-url.sjs");
+}
+
 /**
  * Install a Web Extension which will run a content script against any test page
  * served from https://example.com

devtools/client/debugger/test/mochitest/shared-head.js

@@ -216,7 +216,7 @@ function waitForSelectedSource(dbg, sourceOrUrl) {
         // Second argument is either a source URL (string)
         // or a Source object.
         if (typeof sourceOrUrl == "string") {
-          if (!source.url.includes(sourceOrUrl)) {
+          if (!source.url.includes(encodeURI(sourceOrUrl))) {
             return false;
           }
         } else if (source.id != sourceOrUrl.id) {