Bug 1643180 - Part 5: Centralize viewSourceInStyleEditor's actor ID and sourcemap processing. r=jlast

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

devtools/client/framework/toolbox.js

@@ -3984,25 +3984,6 @@ Toolbox.prototype = {
       return;
     }
 
-    try {
-      const sourceMappedLoc = await this.sourceMapURLService.originalPositionForURL(
-        url,
-        line,
-        column
-      );
-      if (sourceMappedLoc) {
-        url = sourceMappedLoc.url;
-        line = sourceMappedLoc.line;
-        column = sourceMappedLoc.column;
-      }
-    } catch (err) {
-      console.error(
-        "Failed to resolve sourcemapped location for the given source location",
-        { url, line, column },
-        err
-      );
-    }
-
     return viewSource.viewSourceInStyleEditor(this, url, line, column);
   },
 
@@ -4021,33 +4002,12 @@ Toolbox.prototype = {
       return;
     }
 
-    let frontOrURL = stylesheetFront;
-    try {
-      const sourceMappedLoc = await this.sourceMapURLService.originalPositionForID(
-        stylesheetFront.actorID,
-        line,
-        column
-      );
-      if (sourceMappedLoc) {
-        frontOrURL = sourceMappedLoc.url;
-        line = sourceMappedLoc.line;
-        column = sourceMappedLoc.column;
-      }
-    } catch (err) {
-      console.error(
-        "Failed to resolve sourcemapped location for the given source location",
-        {
-          url: stylesheetFront
-            ? stylesheetFront.href || stylesheetFront.nodeHref
-            : null,
-          line,
-          column,
-        },
-        err
-      );
-    }
-
-    return viewSource.viewSourceInStyleEditor(this, frontOrURL, line, column);
+    return viewSource.viewSourceInStyleEditor(
+      this,
+      stylesheetFront,
+      line,
+      column
+    );
   },
 
   viewElementInInspector: async function(objectActor, inspectFromAnnotation) {

devtools/client/shared/view-source.js

@@ -19,20 +19,61 @@
  */
 exports.viewSourceInStyleEditor = async function(
   toolbox,
-  sourceURL,
-  sourceLine,
-  sourceColumn
+  stylesheetFrontOrGeneratedURL,
+  generatedLine,
+  generatedColumn
 ) {
   const panel = await toolbox.loadTool("styleeditor");
 
-  try {
-    await panel.selectStyleSheet(sourceURL, sourceLine, sourceColumn);
-    await toolbox.selectTool("styleeditor");
-    return true;
-  } catch (e) {
-    exports.viewSource(toolbox, sourceURL, sourceLine);
-    return false;
+  let stylesheetFront;
+  if (typeof stylesheetFrontOrGeneratedURL === "string") {
+    stylesheetFront = panel.getStylesheetFrontForGeneratedURL(
+      stylesheetFrontOrGeneratedURL
+    );
+  } else {
+    stylesheetFront = stylesheetFrontOrGeneratedURL;
   }
+
+  const originalLocation = stylesheetFront
+    ? await getOriginalLocation(
+        toolbox,
+        stylesheetFront.actorID,
+        generatedLine,
+        generatedColumn
+      )
+    : null;
+
+  try {
+    if (originalLocation) {
+      await panel.selectOriginalSheet(
+        originalLocation.sourceId,
+        originalLocation.line,
+        originalLocation.column
+      );
+      await toolbox.selectTool("styleeditor");
+      return true;
+    } else if (stylesheetFront) {
+      await panel.selectStyleSheet(
+        stylesheetFront,
+        generatedLine,
+        generatedColumn
+      );
+      await toolbox.selectTool("styleeditor");
+      return true;
+    }
+  } catch (e) {
+    console.error("Failed to view source in style editor", e);
+  }
+
+  exports.viewSource(
+    toolbox,
+    typeof stylesheetFrontOrGeneratedURL === "string"
+      ? stylesheetFrontOrGeneratedURL
+      : stylesheetFrontOrGeneratedURL.href ||
+          stylesheetFrontOrGeneratedURL.nodeHref,
+    generatedLine
+  );
+  return false;
 };
 
 /**

devtools/client/styleeditor/StyleEditorUI.jsm

@@ -419,7 +419,7 @@ StyleEditorUI.prototype = {
   /**
    * Add a new editor to the UI for a source.
    *
-   * @param {StyleSheet}  styleSheet
+   * @param {StyleSheet|OriginalSource}  styleSheet
    *        Object representing stylesheet
    * @param {Boolean} isNew
    *         Optional if stylesheet is a new sheet created by user
@@ -871,6 +871,48 @@ StyleEditorUI.prototype = {
       : "inline-" + styleSheet.styleSheetIndex + "-at-" + styleSheet.nodeHref;
   },
 
+  /**
+   * Get the OriginalSource object for a given original sourceId returned from
+   * the sourcemap worker service.
+   *
+   * @param {string} sourceId
+   *        The ID to search for from the sourcemap worker.
+   *
+   * @return {OriginalSource | null}
+   */
+  getOriginalSourceSheet: function(sourceId) {
+    for (const editor of this.editors) {
+      const { styleSheet } = editor;
+      if (styleSheet.isOriginalSource && styleSheet.sourceId === sourceId) {
+        return styleSheet;
+      }
+    }
+    return null;
+  },
+
+  /**
+   * Given an URL, find a stylesheet front with that URL, if one has been
+   * loaded into the editor.js
+   *
+   * Do not use this unless you have no other way to get a StyleSheetFront
+   * multiple sheets could share the same URL, so this will give you _one_
+   * of possibly many sheets with that URL.
+   *
+   * @param {string} url
+   *        An arbitrary URL to search for.
+   *
+   * @return {StyleSheetFront|null}
+   */
+  getStylesheetFrontForGeneratedURL: function(url) {
+    for (const styleSheet of this._seenSheets.keys()) {
+      const sheetURL = styleSheet.href || styleSheet.nodeHref;
+      if (!styleSheet.isOriginalSource && sheetURL === url) {
+        return styleSheet;
+      }
+    }
+    return null;
+  },
+
   /**
    * selects a stylesheet and optionally moves the cursor to a selected line
    *

devtools/client/styleeditor/original-source.js

@@ -26,6 +26,10 @@ function OriginalSource(url, sourceId, sourceMapService) {
 }
 
 OriginalSource.prototype = {
+  get sourceId() {
+    return this._sourceId;
+  },
+
   /** Get the original source's URL.  */
   get url() {
     return this._url;

devtools/client/styleeditor/panel.js

@@ -95,8 +95,8 @@ StyleEditorPanel.prototype = {
   /**
    * Select a stylesheet.
    *
-   * @param {string|StyleSheetFront} href
-   *        Url or front of stylesheet to find and select in editor.
+   * @param {StyleSheetFront} front
+   *        The front of stylesheet to find and select in editor.
    * @param {number} line
    *        Line number to jump to after selecting. One-indexed
    * @param {number} col
@@ -105,12 +105,42 @@ StyleEditorPanel.prototype = {
    *         Promise that will resolve when the editor is selected and ready
    *         to be used.
    */
-  selectStyleSheet: function(href, line, col) {
+  selectStyleSheet: function(front, line, col) {
     if (!this.UI) {
       return null;
     }
 
-    return this.UI.selectStyleSheet(href, line - 1, col ? col - 1 : 0);
+    return this.UI.selectStyleSheet(front, line - 1, col ? col - 1 : 0);
+  },
+
+  /**
+   * Given a location in an original file, open that file in the editor.
+   *
+   * @param {string} originalId
+   *        The original "sourceId" returned from the sourcemap worker.
+   * @param {number} line
+   *        Line number to jump to after selecting. One-indexed
+   * @param {number} col
+   *        Column number to jump to after selecting. One-indexed
+   * @return {Promise}
+   *         Promise that will resolve when the editor is selected and ready
+   *         to be used.
+   */
+  selectOriginalSheet: function(originalId, line, col) {
+    if (!this.UI) {
+      return null;
+    }
+
+    const originalSheet = this.UI.getOriginalSourceSheet(originalId);
+    return this.UI.selectStyleSheet(originalSheet, line - 1, col ? col - 1 : 0);
+  },
+
+  getStylesheetFrontForGeneratedURL: function(url) {
+    if (!this.UI) {
+      return null;
+    }
+
+    return this.UI.getStylesheetFrontForGeneratedURL(url);
   },
 
   /**