Added message to popup with commit sha link

Author: Brian Vaughn

backend/installGlobalHook.js

@@ -28,6 +28,17 @@ function installGlobalHook(window: Object) {
     return false;
   }
 
+  function getCommitSha(renderer) {
+    var version = renderer.version;
+    if (typeof version === 'string') {
+      const index = renderer.version.indexOf('-canary-');
+      if (index > 0) {
+        return version.substr(index + 8);
+      }
+    }
+    return null;
+  }
+
   function detectReactBuildType(renderer) {
     try {
       if (typeof renderer.version === 'string') {
@@ -167,7 +178,8 @@ function installGlobalHook(window: Object) {
         'deadcode' :
         detectReactBuildType(renderer);
       var isCanaryVersion = detectCanaryVersion(renderer);
-      hook.emit('renderer', {id, isCanaryVersion, renderer, reactBuildType});
+      var commitSha = getCommitSha(renderer);
+      hook.emit('renderer', {id, isCanaryVersion, commitSha, renderer, reactBuildType});
       return id;
     },
     _listeners: {},

shells/webextension/popups/shared.js

@@ -1,13 +1,30 @@
 /* globals chrome */
 
 document.addEventListener('DOMContentLoaded', function() {
+  // Add canary message
+  const commitShaIndex = location.search.indexOf('commitSha=');
+  if (commitShaIndex >= 0) {
+    const commitSha = location.search.substr(commitShaIndex + 10);
+    const textNode = document.createTextNode('You are using a canary build of React that was created from commit ');
+    const link = document.createElement('a');
+    link.href = `https://github.com/facebook/react/commit/${commitSha}`;
+    link.text = commitSha;
+    const hRule = document.createElement('hr');
+    const paragraph = document.createElement('p');
+    paragraph.appendChild(hRule);
+    paragraph.appendChild(textNode);
+    paragraph.appendChild(link);
+    document.body.appendChild(paragraph);
+  }
+
   // Make links work
-  var links = document.getElementsByTagName('a');
-  for (var i = 0; i < links.length; i++) {
+  const links = document.getElementsByTagName('a');
+  for (let i = 0; i < links.length; i++) {
     (function() {
-      var ln = links[i];
-      var location = ln.href;
-      ln.onclick = function() {
+      const link = links[i];
+      const location = link.href;
+      link.onclick = function(event) {
+        event.preventDefault();
         chrome.tabs.create({active: true, url: location});
       };
     })();

shells/webextension/src/GlobalHook.js

@@ -30,6 +30,7 @@ window.addEventListener('message', function(evt) {
   if (evt.source === window && evt.data && evt.data.source === 'react-devtools-detector') {
     lastDetectionResult = {
       hasDetectedReact: true,
+      commitSha: evt.data.commitSha,
       isCanaryVersion: evt.data.isCanaryVersion,
       reactBuildType: evt.data.reactBuildType,
     };
@@ -52,6 +53,7 @@ var detectReact = `
 window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function(evt) {
   window.postMessage({
     source: 'react-devtools-detector',
+    commitSha: evt.commitSha,
     isCanaryVersion: evt.isCanaryVersion,
     reactBuildType: evt.reactBuildType,
   }, '*');

shells/webextension/src/background.js

@@ -70,7 +70,7 @@ function doublePipe(one, two) {
   two.onDisconnect.addListener(shutdown);
 }
 
-function setIconAndPopup(reactBuildType, isCanaryVersion, tabId) {
+function setIconAndPopup(reactBuildType, isCanaryVersion, commitSha, tabId) {
   var iconType = reactBuildType === 'production' && isCanaryVersion
     ? 'canary'
     : reactBuildType;
@@ -83,9 +83,15 @@ function setIconAndPopup(reactBuildType, isCanaryVersion, tabId) {
       '128': 'icons/128-' + iconType + '.png',
     },
   });
+
+  var urlParams = '';
+  if (commitSha) {
+    urlParams = '?commitSha=' + commitSha;
+  }
+
   chrome.browserAction.setPopup({
     tabId: tabId,
-    popup: 'popups/' + reactBuildType + '.html',
+    popup: 'popups/' + reactBuildType + '.html' + urlParams,
   });
 }
 
@@ -96,7 +102,7 @@ function setIconAndPopup(reactBuildType, isCanaryVersion, tabId) {
 if (IS_FIREFOX) {
   chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     if (tab.active && changeInfo.status === 'loading') {
-      setIconAndPopup('disabled', 'disabled', tabId);
+      setIconAndPopup('disabled', false, null, tabId);
     }
   });
 }
@@ -118,7 +124,6 @@ chrome.runtime.onMessage.addListener((req, sender) => {
       // version of React in React docs, but not in any other case.
       reactBuildType = 'production';
     }
-    var isCanaryVersion = req.isCanaryVersion;
-    setIconAndPopup(reactBuildType, isCanaryVersion, sender.tab.id);
+    setIconAndPopup(reactBuildType, req.isCanaryVersion, req.commitSha, sender.tab.id);
   }
 });