Bugzilla

  sourcemap \

EXTRA_JS_MODULES = \

  SourceMapConsumer.jsm \

  SourceMapUtils.jsm \

  $(NULL)

/* -*- Mode: js; js-indent-level: 2; -*- */

/* ***** BEGIN LICENSE BLOCK *****

 * Version: MPL 1.1/GPL 2.0/LGPL 2.1

 *

 * The contents of this file are subject to the Mozilla Public License Version

 * 1.1 (the "License"); you may not use this file except in compliance with

 * the License. You may obtain a copy of the License at

 * http://www.mozilla.org/MPL/

 *

 * Software distributed under the License is distributed on an "AS IS" basis,

 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License

 * for the specific language governing rights and limitations under the

 * License.

 *

 * The Original Code is Mozilla Source Map.

 *

 * The Initial Developer of the Original Code is

 * The Mozilla Foundation

 * Portions created by the Initial Developer are Copyright (C) 2011

 * the Initial Developer. All Rights Reserved.

 *

 * Contributor(s):

 *   Nick Fitzgerald <nfitzgerald@mozilla.com> (original author)

 *

 * Alternatively, the contents of this file may be used under the terms of

 * either the GNU General Public License Version 2 or later (the "GPL"), or

 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),

 * in which case the provisions of the GPL or the LGPL are applicable instead

 * of those above. If you wish to allow use of your version of this file only

 * under the terms of either the GPL or the LGPL, and not to allow others to

 * use your version of this file under the terms of the MPL, indicate your

 * decision by deleting the provisions above and replace them with the notice

 * and other provisions required by the GPL or the LGPL. If you do not delete

 * the provisions above, a recipient may use your version of this file under

 * the terms of any one of the MPL, the GPL or the LGPL.

 *

 * ***** END LICENSE BLOCK ***** */

const Cc = Components.classes;

const Ci = Components.interfaces;

const Cu = Components.utils;

Cu.import('resource://gre/modules/XPCOMUtils.jsm');

XPCOMUtils.defineLazyGetter(this, "Debugger", function () {

  let debuggerService = Cc["@mozilla.org/jsdebugger;1"].getService(Ci.IJSDebugger);

  debuggerService.addClass();

  return Debugger;

});

let EXPORTED_SYMBOLS = [ 'ERRORS', 'sourceMapURLForFilename', 'sourceMapForFilename' ];

function setTimeout(fn, ms) {

  let timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);

  timer.initWithCallback({ notify: fn }, ms, Ci.nsITimer.TYPE_ONE_SHOT);

}

function constantProperty(aValue) {

  return {

    value: aValue,

    writable: false,

    enumerable: true,

    configurable: false

  };

}

const ERRORS = Object.create(null, {

  NO_SOURCE_MAP: constantProperty(1),

  BAD_SOURCE_MAP: constantProperty(2),

  UNKNOWN_ERROR: constantProperty(3)

});

XPCOMUtils.defineLazyGetter(this, 'SourceMapConsumer', function () {

  let obj = {};

  Cu.import('resource:///modules/SourceMapConsumer.jsm', obj);

  return obj.SourceMapConsumer;

});

// The empty function

function noop () {}

function jsonGetOnReadyStateChange(aXhr, aUrl, aSuccessCallback,

                                   aErrorCallback, aEvt) {

  if (aXhr.readyState === 4) {

    if (aXhr.status === 200 || (aXhr.status === 0 && /^file:\/\//.test(aUrl))) {

      aSuccessCallback(aXhr);

    }

    else {

      aErrorCallback(aXhr);

    }

  }

}

/**

 * A utility for getting JSON which wraps XMLHttpRequest.

 */

function jsonGet(aUrl, aSuccessCallback, aErrorCallback) {

  let xhr = Cc['@mozilla.org/xmlextras/xmlhttprequest;1']

    .createInstance(Ci.nsIXMLHttpRequest);

  xhr.overrideMimeType('text/json');

  xhr.onreadystatechange = jsonGetOnReadyStateChange.bind(this,

                                                          xhr,

                                                          aUrl,

                                                          aSuccessCallback,

                                                          aErrorCallback);

  xhr.open("GET", aUrl, true);

  xhr.send(null);

}

/**

 * Returns the URL of the source map associated for the given script filename,

 * otherwise returns null. This is where all the relative path resolution and

 * normalization should happen.

 *

 * @param aFilename The source of the script we are trying to get a source map

 *        URL for.

 * @param aWindow The window object for the script.

 * @param aCallback The function to call when we have the source map's URL.

 */

function sourceMapURLForFilename(aFilename, aWindow, aCallback) {

  // XXX: This setTimeout, along with aCallback, shouldn't be necessary. See bug

  // ######. "can't start debugging: a debuggee script is on the stack"

  setTimeout(function () {

    // try {

    //   let dbg = new Debugger(aWindow);

    //   let arr = dbg.getAllScripts();

    //   let len = arr.length;

    //   for (var i = 0; i < len; i++) {

    //     if (arr[i].filename == aFilename) {

    //       aCallback(arr[i].sourceMappingURL);

    //       return;

    //     }

    //   }

    // }

    // catch (e) {

    //   // dump('ERROR: ' + e.message + '\n');

    //   Cu.reportError(e);

    // }

    // aCallback(null);

    aCallback(aFilename + '.map');

  }, 4);

}

function sourceMapFound(aSuccessCallback, aErrorCallback, xhr) {

  let sourceMap;

  try {

    sourceMap = new SourceMapConsumer(JSON.parse(xhr.responseText));

  }

  catch (e) {

    aErrorCallback(ERRORS.BAD_SOURCE_MAP, e);

    return;

  }

  aSuccessCallback(sourceMap);

}

function sourceMapNotFound(aErrorCallback, xhr) {

  switch (xhr.status) {

  case 404:

    aErrorCallback(ERRORS.MISSING_SOURCE_MAP, new Error(xhr.statusText));

    break;

  default:

    aErrorCallback(ERRORS.UNKNOWN_ERROR, new Error(xhr.statusText));

  }

}

function fetchSourceMap(aSuccessCallback, aErrorCallback, aFilename,

                        aSourceMapURL) {

  if (aSourceMapURL) {

    try {

      jsonGet(aSourceMapURL,

              sourceMapFound.bind(this, aSuccessCallback, aErrorCallback),

              sourceMapNotFound.bind(this, aErrorCallback));

    }

    catch (e) {

      aErrorCallback(ERRORS.UNKNOWN_ERROR, e);

    }

  }

  else {

    aErrorCallback(ERRORS.NO_SOURCE_MAP,

                   new Error("No source map for " + aFilename));

  }

}

/**

 * Fetch the source map associated with the given filename.

 *

 * @param aFilename The js file you want to fetch the associated source map for.

 * @param aWindow The currently active window.

 * @param aSuccessCallback The function to call when we find a source map.

 * @param aErrorCallback The function to call when there is no source map.

 */

function sourceMapForFilename(aFilename, aWindow, aSuccessCallback,

                              aErrorCallback) {

  aErrorCallback = aErrorCallback || noop;

  sourceMapURLForFilename(aFilename,

                          aWindow,

                          fetchSourceMap.bind(this,

                                              aSuccessCallback,

                                              aErrorCallback,

                                              aFilename));

}

XPCOMUtils.defineLazyGetter(this, "sourceMapUtils", function () {

  let smu = {};

  Cu.import("resource:///modules/SourceMapUtils.jsm", smu);

  return smu;

});

    let window = this.getWindowByWindowId(aMessage.ID)

      || this.getWindowByWindowId(aMessage.innerID)

      || this.currentContext()

      || null;

                                              level,

                                              window);

                                                  aScriptError.lineNumber,

                                                  null,

                                                  null,

                                                  window,

                                                  null);

   * @param nsIDOMWindow aWindow

   *        The window from which the message originates. This allows us to get

   *        the source map associated with the script that created this message

   *        and display the proper originating source file and line numbers.

                                          aClipboardText, aLevel, aWindow,

                                          aScript) {

                     this.makeClipboardText(aBody, aSourceURL, aSourceLine);

    if (aSourceURL && aWindow) {

      this.updateLocationInfoWithSourceMap(node, locationNode, aSourceURL,

                                           aSourceLine, aWindow, aDocument,

                                           aBody);

    }

   * The panel which holds the original and generated location info for the

   * currently focused console message. It is created the first time there is a

   * console message which has source mapping info.

   */

  locationContainerPanel: null,

  /**

   * What is the offset of a node? It is its offset from its offsetParent plus

   * the offset of its parent. The offset of the null node is defined as 0 from

   * the top and 0 from the left.

   *

   * @param aNode the node you would like the offset of.

   * @returns an object with the left and top offsets of the given node.

   */

  elementOffset:

  function ConsoleUtils_elementOffset(aNode) {

    // This is the base case: no more offsetParents.

    if (!aNode) {

      return {

        left: 0,

        top: 0

      };

    }

    let { left, top } = aNode.getBoundingClientRect();

    let offsetOfParent = ConsoleUtils_elementOffset(aNode.offsetParent);

    return {

      left: left + offsetOfParent.left,

      top: top + offsetOfParent.top

    };

  },

  /**

   * Handles the logic for whether or not the mouseout handler for the

   * locationContainerPanel should be called.

   *

   * @param aTarget The target element of a mouseout event.

   * @returns boolean based on whether or not the mouseout handler for the

   *          locationContainerPanel should fire.

   */

  mouseoutShouldFire:

  function ConsoleUtils_mouseoutShouldFire(aTarget) {

    if (aTarget === this.locationContainerPanel) {

      return true;

    }

    let el = aTarget;

    while (el) {

      if (el === this.locationContainerPanel) {

        return false;

      }

      el = el.parentNode;

    }

    return true;

  },

  /**

   * Asynchronously check if there is a source map for this message's

   * script. If there is, update the locationNode and clipboardText.

   *

   * TODO: Use column numbers. See bug 679181

   * TODO: Don't require aSourceURL and aWindow if aScript is supplied. See bug

   *       679189.

   *

   * @param aParentNode The parent of the location node.

   * @param aLocationNode The node which has the location info we would like to

   *        update.

   * @param aSourceURL The URL of the script which generated the message or null

   *        if aScript is provided.

   * @param aSourceLine The line number in the script where the message came

   *        from.

   * @param aWindow The window associated with aSourceURL from which the message

   *        came, or null if aScript is provided.

   * @param aDocument The document that contains aParentNode and aLocationNode.

   * @param aBody The body of the message that was logged.

   * @param aScript The script object that generated the message, or null if

   *        aSourceURL and aWindow are provided.

   */

  updateLocationInfoWithSourceMap:

  function ConsoleUtils_updateLocationInfoWithSourceMap (aParentNode, aLocationNode,

                                                         aSourceURL, aSourceLine,

                                                         aWindow, aDocument, aBody,

                                                         aScript) {

    sourceMapUtils.sourceMapForFilename(aSourceURL, aWindow, (function (aSourceMap) {

      let { source, line } = aSourceMap.originalPositionFor({

        line: aSourceLine,

        column: 0

      });

      if (source != null && line != null) {

        // Resolve the original source url relative to the generated script.

        try {

          let url = Services.io.newURI(aSourceURL, null, null).QueryInterface(Ci.nsIURL);

          source = url.resolve(source);

        }

        catch (e) {

          Cu.reportError(e);

          return;

        }

        // Create the new elements we need.

        if (!this.locationContainerPanel) {

          this.locationContainerPanel = aDocument.createElementNS(XUL_NS, "panel");

          this.locationContainerPanel.classList.add("webconsole-location-container");

          aDocument.documentElement.appendChild(this.locationContainerPanel);

        }

        let sourceMappedLocationNode = this.createLocationNode(aDocument,

                                                               source,

                                                               line);

        // Replace the generated source and line with the original, mapped

        // source and line.

        aParentNode.replaceChild(sourceMappedLocationNode,

                                 aLocationNode);

        // Create another location node with the original, mapped location info

        // which will be put in the panel popup.

        let sourceMappedLocationNodeForPanel = this.createLocationNode(aDocument,

                                                                       source,

                                                                       line);

        sourceMappedLocationNode.addEventListener("mouseover", (function (event) {

          if (event.target === sourceMappedLocationNode) {

            // Remove all the children from the panel, we are about to populate

            // it with our own location infos.

            this.locationContainerPanel.hidePopup();

            while (this.locationContainerPanel.firstChild) {

              this.locationContainerPanel

                .removeChild(this.locationContainerPanel.firstChild);

            }

            // Add the full original and generated location info to the panel.

            this.locationContainerPanel.appendChild(sourceMappedLocationNodeForPanel);

            this.locationContainerPanel.appendChild(aLocationNode);

            // Open the panel over the currently hovered over location node.

            let { left, top } = this.elementOffset(sourceMappedLocationNode);

            this.locationContainerPanel.openPopup(null, null, left, top,

                                                  false, false, null);

          }

        }).bind(this), false);

        this.locationContainerPanel.addEventListener("mouseout", (function (event) {

          if (this.mouseoutShouldFire(event.target)

              || this.mouseoutShouldFire(event.relatedTarget)) {

            this.locationContainerPanel.hidePopup();

          }

        }).bind(this), false);

        // Update the clipboard text to reflect the original source.

        aParentNode.clipboardText = this.makeClipboardText(aBody, source, line);

      }

    }).bind(this), function (errno, error) {

      if (errno != sourceMapUtils.ERRORS.NO_SOURCE_MAP) {

        Cu.reportError(error);

      }

    });

  },

  /**

   * Creates the string that will be copied to the clipboard for individual

   * console message nodes.

   */

  makeClipboardText:

  function ConsoleUtils_makeClipboardText(aBody, aSourceURL, aSourceLine) {

    return aBody

            + (aSourceURL ? " @ " + aSourceURL : "")

            + (aSourceLine ? ":" + aSourceLine : "");

  },

  /**

	browser_webconsole_sourcemap.js \

	test-sourcemap.html \

	test-sourcemap.js \

	test-sourcemap.js.map \

	test-sourcemap.coffee \

/* ***** BEGIN LICENSE BLOCK *****

 * Version: MPL 1.1/GPL 2.0/LGPL 2.1

 *

 * The contents of this file are subject to the Mozilla Public License Version

 * 1.1 (the "License"); you may not use this file except in compliance with

 * the License. You may obtain a copy of the License at

 * http://www.mozilla.org/MPL/

 *

 * Software distributed under the License is distributed on an "AS IS" basis,

 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License

 * for the specific language governing rights and limitations under the

 * License.

 *

 * The Original Code is DevTools test code.

 *

 * The Initial Developer of the Original Code is Mozilla Foundation.

 * Portions created by the Initial Developer are Copyright (C) 2010

 * the Initial Developer. All Rights Reserved.

 *

 * Contributor(s):

 *   Nick Fitzgerald <nfitzgerald@mozilla.com> (original author)

 *

 * Alternatively, the contents of this file may be used under the terms of

 * either the GNU General Public License Version 2 or later (the "GPL"), or

 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),

 * in which case the provisions of the GPL or the LGPL are applicable instead

 * of those above. If you wish to allow use of your version of this file only

 * under the terms of either the GPL or the LGPL, and not to allow others to

 * use your version of this file under the terms of the MPL, indicate your

 * decision by deleting the provisions above and replace them with the notice

 * and other provisions required by the GPL or the LGPL. If you do not delete

 * the provisions above, a recipient may use your version of this file under

 * the terms of any one of the MPL, the GPL or the LGPL.

 *

 * ***** END LICENSE BLOCK ***** */

const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/browser/test-sourcemap.html";

// The call to update the location info with data from a source map is

// async. How long should we wait? There is no event fired when the info is

// updated, so we can't ever know the exact time it happens.

const TIME_TO_WAIT_FOR_SOURCE_MAPS = 250;

function test() {

  addTab(TEST_URI);

  browser.addEventListener("DOMContentLoaded", testSourceMapIntegration, false);

}

function testSourceMapIntegration() {

  browser.removeEventListener("DOMContentLoaded", testSourceMapIntegration, false);

  openConsole();

  content.location = TEST_URI;

  browser.addEventListener("DOMContentLoaded", beginSourceMapIntegrationTests, false);

}

function beginSourceMapIntegrationTests() {

  browser.removeEventListener("DOMContentLoaded", beginSourceMapIntegrationTests, false);

  let hud = HUDService.getHudByWindow(content);

  ok(hud, "webconsole was opened");

  let outputNode = hud.outputNode;

  ok(outputNode, "the webconsole has an outpud node");

  let messages = [].slice.call(outputNode.querySelectorAll('richlistitem.hud-msg-node'));

  is(messages.length, 4, "4 messages: 3 console.logs, and 1 error");

  // Check the generated positions before the webconsole uses the source map

  // info to get the original source positions.

  messages.forEach(testSourceMapGeneratedPosition);

  // Check the original source mapped positions, after the console has had

  // time to fetch the source map and parse it, etc.

  content.setTimeout(testSourceMapOriginalPositions, TIME_TO_WAIT_FOR_SOURCE_MAPS, messages);

}

function testSourceMapGeneratedPosition(msgNode, idx) {

  is(msgNode.textContent.trim(), "This should be line " + (idx + 1) * 2,

     "message content is correct");

  let locationNode = msgNode.querySelector("label.webconsole-location");

  ok(locationNode, "each of these message nodes should have a location");

  is(locationNode.value,

     ConsoleUtils.abbreviateSourceURL("test-sourcemap.js") + ":" + (idx + 1),

     "generated position is correct");

}

function testSourceMapOriginalPosition(msgNode, idx) {

  is(msgNode.textContent.trim(), "This should be line " + (idx + 1) * 2,

     "message content is correct");

  let locationNode = msgNode.querySelector("label.webconsole-location");

  ok(locationNode, "each of these message nodes should have a location");

  is(locationNode.value,

     ConsoleUtils.abbreviateSourceURL("test-sourcemap.coffee") + ":" + (idx + 1) * 2,

     "original, source-mapped position is correct");

}

function testSourceMapOriginalPositions(messages) {

  messages.forEach(testSourceMapOriginalPosition);

  finishTest();

}

# This is a comment

console.log "This should be line 2"

# This is another comment

console.log "This should be line 4"

# Wu-Tang Clan

console.log "This should be line 6"

# Bad news ahead...

throw new Error "This should be line 8"

<!DOCTYPE HTML>

<html dir="ltr" xml:lang="en-US" lang="en-US"><head>

    <title>Source Map Test</title>

  </head>

  <body>

    <h1 id="header">Testing the Source Map</h1>

    <script src="./test-sourcemap.js"></script>

  </body>

</html>

console.log("This should be line 2");

console.log("This should be line 4");

console.log("This should be line 6");

throw new Error("This should be line 8");

//@sourceMappingURL=test-sourcemap.js.map

{

  "version": 3,

  "file": "test-sourcemap.js",

  "sources": ["test-sourcemap.coffee"],

  "names": [],

  "mappings": "AAEA;AAEA;AAEA;AAEA"

}

  display: block;

  font-family: monospace;