Share querystring logic with tabs & breakpoints sidebar (#7206)

src/components/Editor/Tab.js

@@ -22,15 +22,17 @@ import {
   getRawSourceURL,
   getTruncatedFileName,
   getDisplayPath,
-  isPretty
+  isPretty,
+  getSourceQueryString
 } from "../../utils/source";
 import { copyToTheClipboard } from "../../utils/clipboard";
 import { getTabMenuItems } from "../../utils/tabs";
 
 import {
   getSelectedSource,
   getActiveSearch,
-  getSourcesForTabs
+  getSourcesForTabs,
+  getHasSiblingOfSameName
 } from "../../selectors";
 
 import classnames from "classnames";
@@ -46,7 +48,8 @@ type Props = {
   closeTab: Source => void,
   closeTabs: (List<string>) => void,
   togglePrettyPrint: string => void,
-  showSource: string => void
+  showSource: string => void,
+  hasSiblingOfSameName: boolean
 };
 
 class Tab extends PureComponent<Props> {
@@ -155,7 +158,8 @@ class Tab extends PureComponent<Props> {
       selectSource,
       closeTab,
       source,
-      tabSources
+      tabSources,
+      hasSiblingOfSameName
     } = this.props;
     const sourceId = source.id;
     const active =
@@ -181,6 +185,7 @@ class Tab extends PureComponent<Props> {
     });
 
     const path = getDisplayPath(source, tabSources);
+    const query = hasSiblingOfSameName ? getSourceQueryString(source) : "";
 
     return (
       <div
@@ -190,14 +195,14 @@ class Tab extends PureComponent<Props> {
         // Accommodate middle click to close tab
         onMouseUp={e => e.button === 1 && closeTab(source)}
         onContextMenu={e => this.onTabContextMenu(e, sourceId)}
-        title={getFileURL(source)}
+        title={getFileURL(source, false)}
       >
         <SourceIcon
           source={source}
           shouldHide={icon => ["file", "javascript"].includes(icon)}
         />
         <div className="filename">
-          {getTruncatedFileName(source)}
+          {getTruncatedFileName(source, query)}
           {path && <span>{`../${path}/..`}</span>}
         </div>
         <CloseButton
@@ -215,7 +220,8 @@ const mapStateToProps = (state, { source }) => {
   return {
     tabSources: getSourcesForTabs(state),
     selectedSource: selectedSource,
-    activeSearch: getActiveSearch(state)
+    activeSearch: getActiveSearch(state),
+    hasSiblingOfSameName: getHasSiblingOfSameName(state, source)
   };
 };
 

src/components/PrimaryPanes/SourcesTreeItem.js

@@ -14,15 +14,17 @@ import Svg from "../shared/Svg";
 
 import {
   getGeneratedSourceByURL,
-  getSourcesUrlsInSources
+  getHasSiblingOfSameName
 } from "../../selectors";
 import actions from "../../actions";
 
-import { isOriginal as isOriginalSource } from "../../utils/source";
+import {
+  isOriginal as isOriginalSource,
+  getSourceQueryString
+} from "../../utils/source";
 import { isDirectory } from "../../utils/sources-tree";
 import { copyToTheClipboard } from "../../utils/clipboard";
 import { features } from "../../utils/prefs";
-import { parse } from "../../utils/url";
 
 import type { TreeNode } from "../../utils/sources-tree/types";
 import type { Source } from "../../types";
@@ -181,7 +183,7 @@ class SourceTreeItem extends Component<Props, State> {
       <span className="suffix">{L10N.getStr("sourceFooter.mappedSuffix")}</span>
     ) : null;
 
-    const querystring = source ? parse(source.url).search : null;
+    const querystring = getSourceQueryString(source);
     const query =
       hasSiblingOfSameName && querystring ? (
         <span className="query">{querystring}</span>
@@ -214,14 +216,6 @@ function getHasMatchingGeneratedSource(state, source: ?Source) {
   return !!getGeneratedSourceByURL(state, source.url);
 }
 
-function getHasSiblingOfSameName(state, source: ?Source) {
-  if (!source) {
-    return false;
-  }
-
-  return getSourcesUrlsInSources(state, source.url).length > 1;
-}
-
 const mapStateToProps = (state, props) => {
   const { source } = props;
   return {

src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js

@@ -0,0 +1,61 @@
+/* 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/>. */
+
+// @flow
+import React, { PureComponent } from "react";
+import { connect } from "react-redux";
+import actions from "../../../actions";
+import {
+  getTruncatedFileName,
+  getDisplayPath,
+  getSourceQueryString,
+  getFileURL
+} from "../../../utils/source";
+import { getHasSiblingOfSameName } from "../../../selectors";
+
+import SourceIcon from "../../shared/SourceIcon";
+
+import type { Source } from "../../../types";
+
+type Props = {
+  sources: Source[],
+  source: Source,
+  hasSiblingOfSameName: boolean,
+  selectSource: string => void
+};
+
+class BreakpointHeading extends PureComponent<Props> {
+  render() {
+    const { sources, source, hasSiblingOfSameName, selectSource } = this.props;
+
+    const path = getDisplayPath(source, sources);
+    const query = hasSiblingOfSameName ? getSourceQueryString(source) : "";
+
+    return (
+      <div
+        className="breakpoint-heading"
+        title={getFileURL(source, false)}
+        onClick={() => selectSource(source.id)}
+      >
+        <SourceIcon
+          source={source}
+          shouldHide={icon => ["file", "javascript"].includes(icon)}
+        />
+        <div className="filename">
+          {getTruncatedFileName(source, query)}
+          {path && <span>{`../${path}/..`}</span>}
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, { source }) => ({
+  hasSiblingOfSameName: getHasSiblingOfSameName(state, source)
+});
+
+export default connect(
+  mapStateToProps,
+  { selectSource: actions.selectSource }
+)(BreakpointHeading);

src/components/SecondaryPanes/Breakpoints/Breakpoints.css

@@ -22,6 +22,11 @@
   align-items: center;
 }
 
+.breakpoints-list .breakpoint-heading .filename {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .breakpoints-list .breakpoint-heading .filename span {
   opacity: 0.7;
   padding-left: 4px;

src/components/SecondaryPanes/Breakpoints/index.js

@@ -11,14 +11,10 @@ import { connect } from "react-redux";
 import ExceptionOption from "./ExceptionOption";
 
 import Breakpoint from "./Breakpoint";
-import SourceIcon from "../../shared/SourceIcon";
+import BreakpointHeading from "./BreakpointHeading";
 
 import actions from "../../../actions";
-import {
-  getTruncatedFileName,
-  getDisplayPath,
-  getRawSourceURL
-} from "../../../utils/source";
+import { getDisplayPath } from "../../../utils/source";
 import { makeLocationId } from "../../../utils/breakpoint";
 
 import { getSelectedSource, getBreakpointSources } from "../../../selectors";
@@ -33,8 +29,7 @@ type Props = {
   selectedSource: Source,
   shouldPauseOnExceptions: boolean,
   shouldPauseOnCaughtExceptions: boolean,
-  pauseOnExceptions: Function,
-  selectSource: string => void
+  pauseOnExceptions: Function
 };
 
 class Breakpoints extends Component<Props> {
@@ -85,21 +80,12 @@ class Breakpoints extends Component<Props> {
       ...breakpointSources.map(({ source, breakpoints, i }) => {
         const path = getDisplayPath(source, sources);
         return [
-          <div
-            className="breakpoint-heading"
-            title={getRawSourceURL(source.url)}
+          <BreakpointHeading
+            source={source}
+            sources={sources}
+            path={path}
             key={source.url}
-            onClick={() => this.props.selectSource(source.id)}
-          >
-            <SourceIcon
-              source={source}
-              shouldHide={icon => ["file", "javascript"].includes(icon)}
-            />
-            <div className="filename">
-              {getTruncatedFileName(source)}
-              {path && <span>{`../${path}/..`}</span>}
-            </div>
-          </div>,
+          />,
           ...breakpoints.map(breakpoint => (
             <Breakpoint
               breakpoint={breakpoint}
@@ -130,7 +116,6 @@ const mapStateToProps = state => ({
 export default connect(
   mapStateToProps,
   {
-    pauseOnExceptions: actions.pauseOnExceptions,
-    selectSource: actions.selectSource
+    pauseOnExceptions: actions.pauseOnExceptions
   }
 )(Breakpoints);

src/reducers/sources.js

@@ -440,6 +440,14 @@ export function getSourcesUrlsInSources(state: OuterState, url: string) {
   return [...new Set(Object.keys(urls).filter(Boolean))];
 }
 
+export function getHasSiblingOfSameName(state: OuterState, source: ?Source) {
+  if (!source) {
+    return false;
+  }
+
+  return getSourcesUrlsInSources(state, source.url).length > 1;
+}
+
 export function getSourceInSources(sources: SourcesMap, id: string): ?Source {
   return sources[id];
 }

src/test/mochitest/browser_dbg-sources-querystring.js

@@ -27,5 +27,17 @@ add_task(async function() {
     labels.includes("simple1.js?x=1") && labels.includes("simple1.js?x=2"),
     true,
     "simple1.js?x=1 and simple2.jsx=2 exist"
-  )
+  );
+
+  const source = findSource(dbg, "simple1.js?x=1");
+  await selectSource(dbg, source);
+  const tab = findElement(dbg, "activeTab");
+  is(tab.innerText, "simple1.js?x=1", "Tab label is simple1.js?x=1");
+  await addBreakpoint(dbg, "simple1.js?x=1", 6);
+  const breakpointHeading = findElement(dbg, "breakpointItem", 2).innerText;
+  is(
+    breakpointHeading,
+    "simple1.js?x=1",
+    "Breakpoint heading is simple1.js?x=1"
+  );
 });

src/utils/source.js

@@ -171,8 +171,12 @@ export function getFilename(source: Source) {
  * @memberof utils/source
  * @static
  */
-export function getTruncatedFileName(source: Source, length: number = 30) {
-  return truncateMiddleText(getFilename(source), length);
+export function getTruncatedFileName(
+  source: Source,
+  querystring: string = "",
+  length: number = 30
+) {
+  return truncateMiddleText(`${getFilename(source)}${querystring}`, length);
 }
 
 /* Gets path for files with same filename for editor tabs, breakpoints, etc.
@@ -456,3 +460,7 @@ export function isOriginal(source: Source) {
 export function isGenerated(source: Source) {
   return isGeneratedId(source.id);
 }
+
+export function getSourceQueryString(source: ?Source) {
+  return source ? parseURL(source.url).search : "";
+}

src/utils/tests/source.spec.js

@@ -66,6 +66,7 @@ describe("sources", () => {
             url: "really-really-really-really-really-really-long-name.html",
             id: ""
           },
+          "",
           30
         )
       ).toBe("really-really…long-name.html");
@@ -77,6 +78,7 @@ describe("sources", () => {
             url: `${encodedUnicode.repeat(30)}.html`,
             id: ""
           },
+          "",
           30
         )
       ).toBe("測測測測測測測測測測測測測…測測測測測測測測測.html");