Attachment #8758151 for bug #1134073

Attachment #8758151: Part 2: Show network request cause and stacktrace in netmonitor UI for bug #1134073

View | Details | Raw Unified | Return to bug 1134073
Collapse All | Expand All





<!-- LOCALIZATION NOTE (netmonitorUI.toolbar.file): This is the label displayed
  -  in the network table toolbar, above the "file" column. -->
<!ENTITY netmonitorUI.toolbar.file        "File">

<!-- LOCALIZATION NOTE (netmonitorUI.toolbar.domain): This is the label displayed
  -  in the network table toolbar, above the "domain" column. -->
<!ENTITY netmonitorUI.toolbar.domain      "Domain">

<!-- LOCALIZATION NOTE (netmonitorUI.toolbar.cause): This is the label displayed
  -  in the network table toolbar, above the "cause" column. -->
<!ENTITY netmonitorUI.toolbar.cause        "Cause">

<!-- LOCALIZATION NOTE (netmonitorUI.toolbar.type): This is the label displayed
  -  in the network table toolbar, above the "type" column. -->
<!ENTITY netmonitorUI.toolbar.type        "Type">

<!-- LOCALIZATION NOTE (netmonitorUI.toolbar.transferred): This is the label displayed
  -  in the network table toolbar, above the "transferred" column, which is the
  -  compressed / encoded size. -->
<!ENTITY netmonitorUI.toolbar.transferred "Transferred">






  /**
   * Getter that tells if the server can do network performance statistics.
   * @type boolean
   */
  get supportsPerfStats() {
    return this.tabClient &&
           (this.tabClient.traits.reconfigure || !this._target.isApp);
  },

  /**
   * Open a given source in Debugger
   */
  viewSourceInDebugger(sourceURL, sourceLine) {
    return this._toolbox.viewSourceInDebugger(sourceURL, sourceLine);
  }
};

/**
 * Functions handling target-related lifetime events.
 */
function TargetEventsHandler() {
  this._onTabNavigated = this._onTabNavigated.bind(this);

   * @param object networkInfo
   *        The network request information.
   */
  _onNetworkEvent: function (type, networkInfo) {
    let { actor,
      startedDateTime,
      request: { method, url },
      isXHR,
      cause,
      fromCache,
      fromServiceWorker
    } = networkInfo;

    NetMonitorView.RequestsMenu.addRequest(
      actor, startedDateTime, method, url, isXHR, cause, fromCache,
        fromServiceWorker
    );
    window.emit(EVENTS.NETWORK_EVENT, actor);
  },

  /**
   * The "networkEventUpdate" message type handler.
   *
   * @param string type





const EPSILON = 0.001;
// 100 KB in bytes
const SOURCE_SYNTAX_HIGHLIGHT_MAX_FILE_SIZE = 102400;
// ms
const RESIZE_REFRESH_RATE = 50;
// ms
const REQUESTS_REFRESH_RATE = 50;
const REQUESTS_TOOLTIP_POSITION = "topcenter bottomleft";
// tooltip show/hide delay in ms
const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500;
// px
const REQUESTS_TOOLTIP_IMAGE_MAX_DIM = 400;
// px
const REQUESTS_WATERFALL_SAFE_BOUNDS = 90;
// ms
const REQUESTS_WATERFALL_HEADER_TICKS_MULTIPLE = 5;
// px
const REQUESTS_WATERFALL_HEADER_TICKS_SPACING_MIN = 60;

  "/xml": Editor.modes.html,
  "/atom": Editor.modes.html,
  "/soap": Editor.modes.html,
  "/vnd.mpeg.dash.mpd": Editor.modes.html,
  "/rdf": Editor.modes.css,
  "/rss": Editor.modes.css,
  "/css": Editor.modes.css
};
const LOAD_CAUSE_STRINGS = {
  [Ci.nsIContentPolicy.TYPE_INVALID]: "invalid",
  [Ci.nsIContentPolicy.TYPE_OTHER]: "other",
  [Ci.nsIContentPolicy.TYPE_SCRIPT]: "script",
  [Ci.nsIContentPolicy.TYPE_IMAGE]: "img",
  [Ci.nsIContentPolicy.TYPE_STYLESHEET]: "stylesheet",
  [Ci.nsIContentPolicy.TYPE_OBJECT]: "object",
  [Ci.nsIContentPolicy.TYPE_DOCUMENT]: "document",
  [Ci.nsIContentPolicy.TYPE_SUBDOCUMENT]: "subdocument",
  [Ci.nsIContentPolicy.TYPE_REFRESH]: "refresh",
  [Ci.nsIContentPolicy.TYPE_XBL]: "xbl",
  [Ci.nsIContentPolicy.TYPE_PING]: "ping",
  [Ci.nsIContentPolicy.TYPE_XMLHTTPREQUEST]: "xhr",
  [Ci.nsIContentPolicy.TYPE_OBJECT_SUBREQUEST]: "objectSubdoc",
  [Ci.nsIContentPolicy.TYPE_DTD]: "dtd",
  [Ci.nsIContentPolicy.TYPE_FONT]: "font",
  [Ci.nsIContentPolicy.TYPE_MEDIA]: "media",
  [Ci.nsIContentPolicy.TYPE_WEBSOCKET]: "websocket",
  [Ci.nsIContentPolicy.TYPE_CSP_REPORT]: "csp",
  [Ci.nsIContentPolicy.TYPE_XSLT]: "xslt",
  [Ci.nsIContentPolicy.TYPE_BEACON]: "beacon",
  [Ci.nsIContentPolicy.TYPE_FETCH]: "fetch",
  [Ci.nsIContentPolicy.TYPE_IMAGESET]: "imageset",
  [Ci.nsIContentPolicy.TYPE_WEB_MANIFEST]: "webManifest"
};
const DEFAULT_EDITOR_CONFIG = {
  mode: Editor.modes.text,
  readOnly: true,
  lineNumbers: true
};
const GENERIC_VARIABLES_VIEW_SETTINGS = {
  lazyEmpty: true,
  // ms


    this.widget = new SideMenuWidget($("#requests-menu-contents"));
    this._splitter = $("#network-inspector-view-splitter");
    this._summary = $("#requests-menu-network-summary-button");
    this._summary.setAttribute("label", L10N.getStr("networkMenu.empty"));
    this.userInputTimer = Cc["@mozilla.org/timer;1"]
      .createInstance(Ci.nsITimer);

    // Create a tooltip for the newly appended network request item.
    this.tooltip = new Tooltip(document, {
      closeOnEvents: [{
        emitter: $("#requests-menu-contents"),
        event: "scroll",
        useCapture: true
      }]
    });
    this.tooltip.startTogglingOnHover(this.widget, this._onHover, {
      toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY,
      interactive: true
    });
    this.tooltip.defaultPosition = REQUESTS_TOOLTIP_POSITION;

    Prefs.filters.forEach(type => this.filterOn(type));
    this.sortContents(this._byTiming);

    this.allowFocusOnRightClick = true;
    this.maintainSelectionVisible = true;

    this.widget.addEventListener("select", this._onSelect, false);
    this.widget.addEventListener("swap", this._onSwap, false);

   *        A string representation of when the request was started, which
   *        can be parsed by Date (for example "2012-09-17T19:50:03.699Z").
   * @param string method
   *        Specifies the request method (e.g. "GET", "POST", etc.)
   * @param string url
   *        Specifies the request's url.
   * @param boolean isXHR
   *        True if this request was initiated via XHR.
   * @param object cause
   *        Specifies the request's cause. Has the following properties:
   *        - type: nsContentPolicyType constant
   *        - loadingDocumentUri: URI of the request origin
   *        - stacktrace: JS stacktrace of the request
   * @param boolean fromCache
   *        Indicates if the result came from the browser cache
   * @param boolean fromServiceWorker
   *        Indicates if the request has been intercepted by a Service Worker
   */
  addRequest: function (id, startedDateTime, method, url, isXHR, cause,
    fromCache, fromServiceWorker) {
    this._addQueue.push([id, startedDateTime, method, url, isXHR, cause,
      fromCache, fromServiceWorker]);

    // Lazy updating is disabled in some tests.
    if (!this.lazyUpdate) {
      return void this._flushRequests();
    }

    this._flushRequestsTask.arm();
    return undefined;

  /**
   * Create a new custom request form populated with the data from
   * the currently selected request.
   */
  cloneSelectedRequest: function () {
    let selected = this.selectedItem.attachment;

    // Create the element node for the network request item.
    let menuView = this._createMenuView(selected.method, selected.url,
      selected.cause);

    // Append a network request item to this container.
    let newItem = this.push([menuView], {
      attachment: Object.create(selected, {
        isCustom: { value: true }
      })
    });


      } else {
        requestTarget.setAttribute("odd", "");
        requestTarget.removeAttribute("even");
      }
    }
  },

  /**
   * Refreshes the toggling anchor for the specified item's tooltip.
   *
   * @param object item
   *        The network request item in this container.
   */
  refreshTooltip: function (item) {
    let tooltip = item.attachment.tooltip;
    tooltip.hide();
    tooltip.startTogglingOnHover(item.target, this._onHover);
    tooltip.defaultPosition = REQUESTS_TOOLTIP_POSITION;
  },

  /**
   * Attaches security icon click listener for the given request menu item.
   *
   * @param object item
   *        The network request item to attach the listener to.
   */
  attachSecurityIconClickListener: function ({ target }) {
    let icon = $(".requests-security-state-icon", target);
    icon.addEventListener("click", this._onSecurityIconClick);

    // Prevent displaying any updates received after the target closed.
    if (NetMonitorView._isDestroyed) {
      return;
    }

    let widget = NetMonitorView.RequestsMenu.widget;
    let isScrolledToBottom = widget.isScrolledToBottom();

    for (let [id, startedDateTime, method, url, isXHR, cause, fromCache,
      fromServiceWorker] of this._addQueue) {
      // Convert the received date/time string to a unix timestamp.
      let unixTime = Date.parse(startedDateTime);

      // Create the element node for the network request item.
      let menuView = this._createMenuView(method, url, cause);

      // Remember the first and last event boundaries.
      this._registerFirstRequestStart(unixTime);
      this._registerLastRequestEnd(unixTime);

      // Append a network request item to this container.
      let requestItem = this.push([menuView, id], {
        attachment: {
          startedDeltaMillis: unixTime - this._firstRequestStartedMillis,
          startedMillis: unixTime,
          method: method,
          url: url,
          isXHR: isXHR,
          cause: cause,
          fromCache: fromCache,
          fromServiceWorker: fromServiceWorker
        }
      });

      // Create a tooltip for the newly appended network request item.
      requestItem.attachment.tooltip = new Tooltip(document, {
        closeOnEvents: [{
          emitter: $("#requests-menu-contents"),
          event: "scroll",
          useCapture: true
        }]
      });

      this.refreshTooltip(requestItem);

      if (id == this._preferredItemId) {
        this.selectedItem = requestItem;
      }

      window.emit(EVENTS.REQUEST_ADDED, id);
    }

    if (isScrolledToBottom && this._addQueue.length) {


  /**
   * Customization function for creating an item's UI.
   *
   * @param string method
   *        Specifies the request method (e.g. "GET", "POST", etc.)
   * @param string url
   *        Specifies the request's url.
   * @param object cause
   *        Specifies the request's cause. Has two properties:
   *        - type: nsContentPolicyType constant
   *        - uri: URI of the request origin
   * @return nsIDOMNode
   *         The network request view.
   */
  _createMenuView: function (method, url, cause) {
    let template = $("#requests-menu-item-template");
    let fragment = document.createDocumentFragment();

    this.updateMenuView(template, "method", method);
    this.updateMenuView(template, "url", url);

    // Flatten the DOM by removing one redundant box (the template container).
    for (let node of template.childNodes) {
      fragment.appendChild(node.cloneNode(true));
    }

    this.updateMenuView(fragment, "method", method);
    this.updateMenuView(fragment, "url", url);
    this.updateMenuView(fragment, "cause", cause);

    return fragment;
  },

  /**
   * Get a human-readable string from a number of bytes, with the B, KB, MB, or
   * GB value. Note that the transition between abbreviations is by 1000 rather
   * than 1024 in order to keep the displayed digits smaller as "1016 KB" is
   * more awkward than 0.99 MB"

        codeNode.setAttribute("value", value.status);
        break;
      }
      case "statusText": {
        let node = $(".requests-menu-status", target);
        node.setAttribute("tooltiptext", value);
        break;
      }
      case "cause": {
        let node = $(".requests-menu-cause", target);
        let text = LOAD_CAUSE_STRINGS[value.type] || "unknown";
        node.setAttribute("value", text);
        if (value.loadingDocumentUri) {
          node.setAttribute("tooltiptext", value.loadingDocumentUri);
        }
        break;
      }
      case "contentSize": {
        let node = $(".requests-menu-size", target);

        let text = this.getFormattedSize(value);

        node.setAttribute("value", text);
        node.setAttribute("tooltiptext", text);
        break;

    }
  },

  /**
   * The swap listener for this container.
   * Called when two items switch places, when the contents are sorted.
   */
  _onSwap: function ({ detail: [firstItem, secondItem] }) {
    // Sorting will create new anchor nodes for all the swapped request items
    // in this container, so it's necessary to refresh the Tooltip instances.
    this.refreshTooltip(firstItem);
    this.refreshTooltip(secondItem);

    // Reattach click listener to the security icons
    this.attachSecurityIconClickListener(firstItem);
    this.attachSecurityIconClickListener(secondItem);
  },

  /**
   * The predicate used when deciding whether a popup should be shown
   * over a request item or not.

   * @param nsIDOMNode target
   *        The element node currently being hovered.
   * @param object tooltip
   *        The current tooltip instance.
   * @return {Promise}
   */
  _onHover: Task.async(function* (target, tooltip) {
    let requestItem = this.getItemForElement(target);
    if (!requestItem) {
      return false;
    }

    let hovered = requestItem.attachment;
    if (hovered.responseContent &&
        target.closest(".requests-menu-icon-and-file", requestItem.target)) {
      let { mimeType, text, encoding } = hovered.responseContent.content;

      if (mimeType && mimeType.includes("image/")) {
        let string = yield gNetwork.getString(text);
        let anchor = $(".requests-menu-icon", requestItem.target);
        let src = formDataURI(mimeType, encoding, string);

        tooltip.setImageContent(src, {
          maxDim: REQUESTS_TOOLTIP_IMAGE_MAX_DIM
        });

        return anchor;
      }
    } else if (hovered.cause &&
               target.closest(".requests-menu-cause", requestItem.target)) {
      let stack = hovered.cause.stacktrace;
      if (stack && stack.length > 0) {
        let doc = tooltip.doc;
        let el = doc.createElement("vbox");

        for (let s of stack) {
          let { functionName, filename, lineNumber, columnNumber } = s;
          functionName = functionName || "anonymous";

          let sel = doc.createElement("label");
          sel.className = "devtools-monospace";
          sel.setAttribute("value",
            `${functionName} @ ${filename}:${lineNumber}:${columnNumber}`);
          sel.addEventListener("click", () => {
            NetMonitorController.viewSourceInDebugger(filename, lineNumber);
          }, false);

          el.appendChild(sel);
        }

        tooltip.content = el;

        return true;
      }
    }

    return false;
  }),

  /**
   * A handler that opens the security tab in the details view if secure or
   * broken security indicator is clicked.
   */
  _onSecurityIconClick: function (e) {





                <button id="requests-menu-domain-button"
                        class="requests-menu-header-button requests-menu-security-and-domain"
                        data-key="domain"
                        label="&netmonitorUI.toolbar.domain;"
                        crop="end"
                        flex="1">
                </button>
              </hbox>
              <hbox id="requests-menu-cause-header-box"
                    class="requests-menu-header requests-menu-cause"
                    align="center">
                <button id="requests-menu-cause-button"
                        class="requests-menu-header-button requests-menu-cause"
                        data-key="cause"
                        label="&netmonitorUI.toolbar.cause;"
                        crop="end"
                        flex="1">
                </button>
              </hbox>
              <hbox id="requests-menu-type-header-box"
                    class="requests-menu-header requests-menu-type"
                    align="center">
                <button id="requests-menu-type-button"
                        class="requests-menu-header-button requests-menu-type"
                        data-key="type"
                        label="&netmonitorUI.toolbar.type;"
                        crop="end"

              </hbox>
              <hbox class="requests-menu-subitem requests-menu-security-and-domain"
                    align="center">
                <image class="requests-security-state-icon" />
                <label class="plain requests-menu-domain"
                       crop="end"
                       flex="1"/>
              </hbox>
              <label class="plain requests-menu-subitem requests-menu-cause"
                     crop="end"/>
              <label class="plain requests-menu-subitem requests-menu-type"
                     crop="end"/>
              <label class="plain requests-menu-subitem requests-menu-transferred"
                     crop="end"/>
              <label class="plain requests-menu-subitem requests-menu-size"
                     crop="end"/>
              <hbox class="requests-menu-subitem requests-menu-waterfall"
                    align="center"






function NetMonitorPanel(iframeWindow, toolbox) {
  this.panelWin = iframeWindow;
  this._toolbox = toolbox;

  this._view = this.panelWin.NetMonitorView;
  this._controller = this.panelWin.NetMonitorController;
  this._controller._target = this.target;
  this._controller._toolbox = this._toolbox;

  EventEmitter.decorate(this);
}

exports.NetMonitorPanel = NetMonitorPanel;

NetMonitorPanel.prototype = {
  /**





.security-state-broken {
  list-style-image: url(chrome://devtools/skin/images/security-state-broken.svg);
}

.security-state-local {
  list-style-image: url(chrome://devtools/skin/images/security-state-local.svg);
}

.requests-menu-cause,
.requests-menu-type,
.requests-menu-size {
  max-width: 6em;
  text-align: center;
  width: 8vw;
}

.requests-menu-transferred {

Return to bug 1134073