Bug 1394681 - Properly open links. r=rickychien

MozReview-Commit-ID: HdtFyQnIOUj

devtools/client/netmonitor/index.html

@@ -38,25 +38,36 @@
       window.Netmonitor = {
         bootstrap({ toolbox }) {
           this.mount = document.querySelector("#mount");
+
           const connection = {
             tabConnection: {
               tabTarget: toolbox.target,
             },
             toolbox,
           };
+
+          const openLink = (link) => {
+            let parentDoc = toolbox.doc;
+            let iframe = parentDoc.getElementById("toolbox-panel-iframe-netmonitor");
+            let top = iframe.ownerDocument.defaultView.top;
+            top.openUILinkIn(link, "tab");
+          };
+
           const App = createFactory(require("./src/components/app"));
           const sourceMapService = toolbox.sourceMapURLService;
-          render(Provider({ store }, App({ sourceMapService })), this.mount);
+          const app = App({ sourceMapService, openLink });
+          render(Provider({ store }, app), this.mount);
           return onFirefoxConnect(connection, actions, store.getState);
         },
 
         destroy() {
           unmountComponentAtNode(this.mount);
           return onDisconnect();
-        }
+        },
       };
 
-      // Implement support for chrome://devtools/content/netmonitor/index.html?type=tab&id=1234 URLs
+      // Implement support for:
+      // chrome://devtools/content/netmonitor/index.html?type=tab&id=1234 URLs
       // where 1234 is the tab id, you can retrieve from about:debugging#tabs links.
       // Simply copy the id from about:devtools-toolbox?type=tab&id=1234 URLs.
 
@@ -64,7 +75,8 @@
       let href = window.location.href.replace(/chrome:/, "http://");
       let url = new window.URL(href);
 
-      // If query parameters are given in a chrome tab, the inspector is running in standalone.
+      // If query parameters are given in a chrome tab, the inspector
+      // is running in standalone.
       if (window.location.protocol === "chrome:" && url.search.length > 1) {
         const { targetFromURL } = require("devtools/client/framework/target-from-url");
 
@@ -83,7 +95,8 @@
           };
           window.Netmonitor.bootstrap({ toolbox });
         })().catch(e => {
-          window.alert("Unable to start the network monitor:" + e.message + "\n" + e.stack);
+          window.alert("Unable to start the network monitor:" +
+            e.message + "\n" + e.stack);
         });
       }
     </script>

devtools/client/netmonitor/src/components/app.js

@@ -21,10 +21,14 @@ const { div } = DOM;
  * App component
  * The top level component for representing main panel
  */
-function App({ statisticsOpen, sourceMapService }) {
+function App({
+  openLink,
+  sourceMapService,
+  statisticsOpen,
+}) {
   return (
     div({ className: "network-monitor" },
-      !statisticsOpen ? MonitorPanel({sourceMapService}) : StatisticsPanel()
+      !statisticsOpen ? MonitorPanel({ openLink, sourceMapService }) : StatisticsPanel()
     )
   );
 }
@@ -32,9 +36,10 @@ function App({ statisticsOpen, sourceMapService }) {
 App.displayName = "App";
 
 App.propTypes = {
-  statisticsOpen: PropTypes.bool.isRequired,
+  openLink: PropTypes.func,
   // Service to enable the source map feature.
   sourceMapService: PropTypes.object,
+  statisticsOpen: PropTypes.bool.isRequired,
 };
 
 module.exports = connect(

devtools/client/netmonitor/src/components/cookies-panel.js

@@ -31,6 +31,7 @@ const SECTION_NAMES = [
  */
 function CookiesPanel({
   request,
+  openLink,
 }) {
   let {
     requestCookies = { cookies: [] },
@@ -62,6 +63,7 @@ function CookiesPanel({
         object,
         filterPlaceHolder: COOKIES_FILTER_TEXT,
         sectionNames: SECTION_NAMES,
+        openLink,
       })
     )
   );
@@ -71,6 +73,7 @@ CookiesPanel.displayName = "CookiesPanel";
 
 CookiesPanel.propTypes = {
   request: PropTypes.object.isRequired,
+  openLink: PropTypes.func,
 };
 
 /**

devtools/client/netmonitor/src/components/headers-panel.js

@@ -54,7 +54,8 @@ const HeadersPanel = createClass({
   propTypes: {
     cloneSelectedRequest: PropTypes.func.isRequired,
     request: PropTypes.object.isRequired,
-    renderValue: PropTypes.func
+    renderValue: PropTypes.func,
+    openLink: PropTypes.func,
   },
 
   getInitialState() {
@@ -125,6 +126,7 @@ const HeadersPanel = createClass({
 
   render() {
     const {
+      openLink,
       cloneSelectedRequest,
       request: {
         fromCache,
@@ -256,6 +258,7 @@ const HeadersPanel = createClass({
           filterPlaceHolder: HEADERS_FILTER_TEXT,
           sectionNames: Object.keys(object),
           renderValue: this.renderValue,
+          openLink,
         }),
       )
     );

devtools/client/netmonitor/src/components/monitor-panel.js

@@ -40,6 +40,7 @@ const MonitorPanel = createClass({
     request: PropTypes.object,
     // Service to enable the source map feature.
     sourceMapService: PropTypes.object,
+    openLink: PropTypes.func,
     updateRequest: PropTypes.func.isRequired,
   },
 
@@ -104,7 +105,13 @@ const MonitorPanel = createClass({
   },
 
   render() {
-    let { isEmpty, networkDetailsOpen, sourceMapService } = this.props;
+    let {
+      isEmpty,
+      networkDetailsOpen,
+      sourceMapService,
+      openLink
+    } = this.props;
+
     let initialWidth = Services.prefs.getIntPref(
         "devtools.netmonitor.panes-network-details-width");
     let initialHeight = Services.prefs.getIntPref(
@@ -123,6 +130,7 @@ const MonitorPanel = createClass({
           endPanel: networkDetailsOpen && NetworkDetailsPanel({
             ref: "endPanel",
             sourceMapService,
+            openLink,
           }),
           endPanelCollapsed: !networkDetailsOpen,
           endPanelControl: true,

devtools/client/netmonitor/src/components/network-details-panel.js

@@ -28,6 +28,7 @@ function NetworkDetailsPanel({
   request,
   selectTab,
   sourceMapService,
+  openLink,
 }) {
   if (!request) {
     return null;
@@ -38,10 +39,11 @@ function NetworkDetailsPanel({
       !request.isCustom ?
         TabboxPanel({
           activeTabId,
+          cloneSelectedRequest,
           request,
           selectTab,
           sourceMapService,
-          cloneSelectedRequest,
+          openLink,
         }) :
         CustomRequestPanel({
           request,
@@ -60,6 +62,7 @@ NetworkDetailsPanel.propTypes = {
   selectTab: PropTypes.func.isRequired,
   // Service to enable the source map feature.
   sourceMapService: PropTypes.object,
+  openLink: PropTypes.func,
 };
 
 module.exports = connect(

devtools/client/netmonitor/src/components/params-panel.js

@@ -34,7 +34,10 @@ const SECTION_NAMES = [
  * Params panel component
  * Displays the GET parameters and POST data of a request
  */
-function ParamsPanel({ request }) {
+function ParamsPanel({
+  openLink,
+  request,
+}) {
   let {
     formDataSections,
     mimeType,
@@ -92,6 +95,7 @@ function ParamsPanel({ request }) {
         object,
         filterPlaceHolder: PARAMS_FILTER_TEXT,
         sectionNames: SECTION_NAMES,
+        openLink,
       })
     )
   );
@@ -101,6 +105,7 @@ ParamsPanel.displayName = "ParamsPanel";
 
 ParamsPanel.propTypes = {
   request: PropTypes.object.isRequired,
+  openLink: PropTypes.func,
 };
 
 /**

devtools/client/netmonitor/src/components/properties-view.js

@@ -49,6 +49,7 @@ const PropertiesView = createClass({
     expandableStrings: PropTypes.bool,
     filterPlaceHolder: PropTypes.string,
     sectionNames: PropTypes.array,
+    openLink: PropTypes.func,
   },
 
   getDefaultProps() {
@@ -148,6 +149,7 @@ const PropertiesView = createClass({
       renderRow,
       renderValue,
       sectionNames,
+      openLink,
     } = this.props;
 
     return (
@@ -181,6 +183,7 @@ const PropertiesView = createClass({
             onFilter: (props) => this.onFilter(props, sectionNames),
             renderRow: renderRow || this.renderRowWithEditor,
             renderValue: renderValue || this.renderValueWithRep,
+            openLink,
           }),
         ),
       )

devtools/client/netmonitor/src/components/response-panel.js

@@ -33,6 +33,7 @@ const ResponsePanel = createClass({
 
   propTypes: {
     request: PropTypes.object.isRequired,
+    openLink: PropTypes.func,
   },
 
   getInitialState() {
@@ -110,7 +111,8 @@ const ResponsePanel = createClass({
   },
 
   render() {
-    let { responseContent, url } = this.props.request;
+    let { openLink, request } = this.props;
+    let { responseContent, url } = request;
 
     if (!responseContent || typeof responseContent.content.text !== "string") {
       return null;
@@ -175,6 +177,7 @@ const ResponsePanel = createClass({
           object,
           filterPlaceHolder: JSON_FILTER_TEXT,
           sectionNames: Object.keys(object),
+          openLink,
         }),
       )
     );

devtools/client/netmonitor/src/components/security-panel.js

@@ -24,7 +24,10 @@ const { div, input, span } = DOM;
  * This contains details about the secure connection used including the protocol,
  * the cipher suite, and certificate details
  */
-function SecurityPanel({ request }) {
+function SecurityPanel({
+  openLink,
+  request,
+}) {
   const { securityInfo, url } = request;
 
   if (!securityInfo || !url) {
@@ -101,6 +104,7 @@ function SecurityPanel({ request }) {
       renderValue: (props) => renderValue(props, securityInfo.weaknessReasons),
       enableFilter: false,
       expandedNodes: TreeViewClass.getExpandedNodes(object),
+      openLink,
     })
   );
 }
@@ -109,6 +113,7 @@ SecurityPanel.displayName = "SecurityPanel";
 
 SecurityPanel.propTypes = {
   request: PropTypes.object.isRequired,
+  openLink: PropTypes.func,
 };
 
 function renderValue(props, weaknessReasons = []) {

devtools/client/netmonitor/src/components/stack-trace-panel.js

@@ -16,7 +16,11 @@ const { div } = DOM;
 // Components
 const StackTrace = createFactory(require("devtools/client/shared/components/stack-trace"));
 
-function StackTracePanel({ request, sourceMapService }) {
+function StackTracePanel({
+  openLink,
+  request,
+  sourceMapService,
+}) {
   let { stacktrace } = request.cause;
 
   return (
@@ -25,6 +29,7 @@ function StackTracePanel({ request, sourceMapService }) {
         stacktrace,
         onViewSourceInDebugger: ({ url, line }) => viewSourceInDebugger(url, line),
         sourceMapService,
+        openLink,
       }),
     )
   );
@@ -36,6 +41,7 @@ StackTracePanel.propTypes = {
   request: PropTypes.object.isRequired,
   // Service to enable the source map feature.
   sourceMapService: PropTypes.object,
+  openLink: PropTypes.func,
 };
 
 module.exports = StackTracePanel;

devtools/client/netmonitor/src/components/tabbox-panel.js

@@ -41,6 +41,7 @@ function TabboxPanel({
   request,
   selectTab,
   sourceMapService,
+  openLink,
 }) {
   if (!request) {
     return null;
@@ -58,25 +59,25 @@ function TabboxPanel({
         id: PANELS.HEADERS,
         title: HEADERS_TITLE,
       },
-        HeadersPanel({ request, cloneSelectedRequest }),
+        HeadersPanel({ request, cloneSelectedRequest, openLink }),
       ),
       TabPanel({
         id: PANELS.COOKIES,
         title: COOKIES_TITLE,
       },
-        CookiesPanel({ request }),
+        CookiesPanel({ request, openLink }),
       ),
       TabPanel({
         id: PANELS.PARAMS,
         title: PARAMS_TITLE,
       },
-        ParamsPanel({ request }),
+        ParamsPanel({ request, openLink }),
       ),
       TabPanel({
         id: PANELS.RESPONSE,
         title: RESPONSE_TITLE,
       },
-        ResponsePanel({ request }),
+        ResponsePanel({ request, openLink }),
       ),
       TabPanel({
         id: PANELS.TIMINGS,
@@ -89,14 +90,14 @@ function TabboxPanel({
         id: PANELS.STACK_TRACE,
         title: STACK_TRACE_TITLE,
       },
-        StackTracePanel({ request, sourceMapService }),
+        StackTracePanel({ request, sourceMapService, openLink }),
       ),
       request.securityState && request.securityState !== "insecure" &&
       TabPanel({
         id: PANELS.SECURITY,
         title: SECURITY_TITLE,
       },
-        SecurityPanel({ request }),
+        SecurityPanel({ request, openLink }),
       ),
     )
   );
@@ -111,6 +112,7 @@ TabboxPanel.propTypes = {
   selectTab: PropTypes.func.isRequired,
   // Service to enable the source map feature.
   sourceMapService: PropTypes.object,
+  openLink: PropTypes.func,
 };
 
 module.exports = connect()(TabboxPanel);

devtools/client/webconsole/new-console-output/components/message-types/network-event-message.js

@@ -107,6 +107,7 @@ function NetworkEventMessage({
       activeTabId: networkMessageActiveTabId,
       request: networkMessageUpdate,
       sourceMapService: serviceContainer.sourceMapService,
+      openLink: serviceContainer.openLink,
       selectTab: (tabId) => {
         dispatch(actions.selectNetworkMessageTab(tabId));
       },

devtools/client/webconsole/new-console-output/new-console-output-wrapper.js

@@ -80,7 +80,9 @@ NewConsoleOutputWrapper.prototype = {
         }]));
       },
       hudProxyClient: this.jsterm.hud.proxy.client,
-      openLink: url => this.jsterm.hud.owner.openLink(url),
+      openLink: url => {
+        this.jsterm.hud.owner.openLink(url);
+      },
       createElement: nodename => {
         return this.document.createElementNS("http://www.w3.org/1999/xhtml", nodename);
       },