Visually identify canary builds

backend/installGlobalHook.js

@@ -20,6 +20,25 @@ function installGlobalHook(window: Object) {
   if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
     return;
   }
+
+  function detectCanaryVersion(renderer) {
+    if (typeof renderer.version === 'string') {
+      return renderer.version.indexOf('-canary-') > 0;
+    }
+    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') {
@@ -158,7 +177,9 @@ function installGlobalHook(window: Object) {
       var reactBuildType = hasDetectedBadDCE ?
         'deadcode' :
         detectReactBuildType(renderer);
-      hook.emit('renderer', {id, renderer, reactBuildType});
+      var isCanaryVersion = detectCanaryVersion(renderer);
+      var commitSha = getCommitSha(renderer);
+      hook.emit('renderer', {id, isCanaryVersion, commitSha, renderer, reactBuildType});
       return id;
     },
     _listeners: {},

shells/webextension/popups/shared.js

@@ -1,13 +1,32 @@
 /* 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 link = document.createElement('a');
+    link.href = `https://github.com/facebook/react/commit/${commitSha}`;
+    link.text = commitSha;
+
+    const paragraph = document.createElement('p');
+    paragraph.appendChild(document.createTextNode('This page is using a canary version that was created from commit '));
+    paragraph.appendChild(link);
+    paragraph.appendChild(document.createTextNode('.'));
+
+    document.body.appendChild(document.createElement('hr'));
+    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,8 @@ 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,
     };
     chrome.runtime.sendMessage(lastDetectionResult);
@@ -51,6 +53,8 @@ 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,19 +70,28 @@ function doublePipe(one, two) {
   two.onDisconnect.addListener(shutdown);
 }
 
-function setIconAndPopup(reactBuildType, tabId) {
+function setIconAndPopup(reactBuildType, isCanaryVersion, commitSha, tabId) {
+  var iconType = reactBuildType === 'production' && isCanaryVersion
+    ? 'canary'
+    : reactBuildType;
   chrome.browserAction.setIcon({
     tabId: tabId,
     path: {
-      '16': 'icons/16-' + reactBuildType + '.png',
-      '32': 'icons/32-' + reactBuildType + '.png',
-      '48': 'icons/48-' + reactBuildType + '.png',
-      '128': 'icons/128-' + reactBuildType + '.png',
+      '16': 'icons/16-' + iconType + '.png',
+      '32': 'icons/32-' + iconType + '.png',
+      '48': 'icons/48-' + iconType + '.png',
+      '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,
   });
 }
 
@@ -93,7 +102,7 @@ function setIconAndPopup(reactBuildType, tabId) {
 if (IS_FIREFOX) {
   chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     if (tab.active && changeInfo.status === 'loading') {
-      setIconAndPopup('disabled', tabId);
+      setIconAndPopup('disabled', false, null, tabId);
     }
   });
 }
@@ -115,7 +124,6 @@ chrome.runtime.onMessage.addListener((req, sender) => {
       // version of React in React docs, but not in any other case.
       reactBuildType = 'production';
     }
-
-    setIconAndPopup(reactBuildType, sender.tab.id);
+    setIconAndPopup(reactBuildType, req.isCanaryVersion, req.commitSha, sender.tab.id);
   }
 });