Open url in a new tab

dadaa · dadaa · commit 63142d741801 · 2019-08-19T18:44:16.000+09:00
diff --git a/extension/experiments/inspectedNode/api-client.js b/extension/experiments/inspectedNode/api-client.js
@@ -68,7 +68,11 @@
         };
 
         port.onMessage.addListener(listener);
-        port.postMessage({ method, timestamp });
+        port.postMessage({
+          namespace: "browser.experiments.inspectedNode",
+          method,
+          timestamp,
+        });
       });
     }
   };
diff --git a/extension/experiments/inspectedNode/api-server.js b/extension/experiments/inspectedNode/api-server.js
@@ -14,7 +14,11 @@ browser.runtime.onConnect.addListener(port => {
     port.postMessage({ method: "onChange" });
   }
 
-  const onMessage = async ({ method, timestamp }) => {
+  const onMessage = async ({ namespace, method, timestamp }) => {
+    if (namespace !== "browser.experiments.inspectedNode") {
+      return;
+    }
+
     switch (method) {
       case "onChange": {
         browser.experiments.inspectedNode.onChange.addListener(onChange, clientId);
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -13,7 +13,8 @@
   ],
   "background": {
     "scripts": [
-      "experiments/inspectedNode/api-server.js"
+      "experiments/inspectedNode/api-server.js",
+      "proxy/tabs/api-server.js"
     ]
   },
   "devtools_page": "devtools.html",
diff --git a/extension/proxy/tabs/api-client.js b/extension/proxy/tabs/api-client.js
@@ -0,0 +1,25 @@
+"use strict";
+
+// We can not call any browser.tabs APIs in devtools page context.
+// Thus, introduce api-server / api-client that provides pseudo api to make the api
+// accessible even in devtools page context.
+//
+// This script should run on devtools page context.
+
+(async function install() {
+  if (browser.tabs) {
+    return;
+  }
+
+  const port = browser.runtime.connect();
+
+  browser.tabs = {
+    async create(option) {
+      port.postMessage({
+        namespace: "browser.tabs",
+        method: "create",
+        option,
+      });
+    },
+  };
+})();
diff --git a/extension/proxy/tabs/api-server.js b/extension/proxy/tabs/api-server.js
@@ -0,0 +1,29 @@
+"use strict";
+
+// We can not call any browser.tabs APIs in devtools page context.
+// Thus, introduce api-server / api-client that provides pseudo api to make the api
+// accessible even in devtools page context.
+//
+// This script should run on addon parent context (as background).
+
+browser.runtime.onConnect.addListener(port => {
+  const onMessage = async ({ namespace, method, option }) => {
+    if (namespace !== "browser.tabs") {
+      return;
+    }
+
+    switch (method) {
+      case "create": {
+        browser.tabs.create(option);
+        break;
+      }
+    }
+  };
+  port.onMessage.addListener(onMessage);
+
+  const onDisconnect = () => {
+    port.onDisconnect.removeListener(onDisconnect);
+    port.onMessage.removeListener(onMessage);
+  };
+  port.onDisconnect.addListener(onDisconnect);
+});
diff --git a/extension/sidebar-pane.html b/extension/sidebar-pane.html
@@ -166,6 +166,7 @@
     }
     </style>
     <script src="experiments/inspectedNode/api-client.js"></script>
+    <script src="proxy/tabs/api-client.js"></script>
     <script type="module" src="sidebar-pane.js"></script>
   </head>
   <body>
diff --git a/extension/sidebar-pane.js b/extension/sidebar-pane.js
@@ -271,11 +271,18 @@ function _renderTerm(text, classes = [], url = null) {
   if (url) {
     termEl.href = url;
     termEl.title = url;
+    termEl.addEventListener("click", _onClickLink);
   }
 
   return termEl;
 }
 
+function _onClickLink(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  browser.tabs.create({ url: e.target.href });
+}
+
 async function _updateCSSValueEnabled() {
   const isCSSValueEnabled = await _userSettings.isCSSValueEnabled();
   _webcompat.setCSSValueEnabled(isCSSValueEnabled);

Original file line number	Diff line number	Diff line change
`@@ -166,6 +166,7 @@`
`166`	`166`	`}`
`167`	`167`	`</style>`
`168`	`168`	`<script src="experiments/inspectedNode/api-client.js"></script>`
	`169`	`+ <script src="proxy/tabs/api-client.js"></script>`
`169`	`170`	`<script type="module" src="sidebar-pane.js"></script>`
`170`	`171`	`</head>`
`171`	`172`	`<body>`