feat(devtools): adding icon popups displaying app status (rangle/angular-devtools#70)

angular.json

@@ -29,12 +29,10 @@
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
+              "fileReplacements": [{
+                "replace": "src/environments/environment.ts",
+                "with": "src/environments/environment.prod.ts"
+              }],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -43,8 +41,7 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
-              "budgets": [
-                {
+              "budgets": [{
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
@@ -133,19 +130,18 @@
               "projects/shell-chrome/src/favicon.ico",
               "projects/shell-chrome/src/assets",
               "projects/shell-chrome/src/manifest.json",
-              "projects/shell-chrome/src/devtools.html"
+              "projects/shell-chrome/src/devtools.html",
+              "projects/shell-chrome/src/popups",
             ],
             "styles": ["projects/shell-chrome/src/styles.scss"],
             "scripts": []
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "projects/shell-chrome/src/environments/environment.ts",
-                  "with": "projects/shell-chrome/src/environments/environment.prod.ts"
-                }
-              ],
+              "fileReplacements": [{
+                "replace": "projects/shell-chrome/src/environments/environment.ts",
+                "with": "projects/shell-chrome/src/environments/environment.prod.ts"
+              }],
               "optimization": true,
               "outputHashing": "none",
               "sourceMap": false,
@@ -154,13 +150,11 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                }
-              ]
+              "budgets": [{
+                "type": "initial",
+                "maximumWarning": "2mb",
+                "maximumError": "5mb"
+              }]
             }
           }
         },

projects/shell-chrome/shell-chrome-webpack.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   entry: {
     'content-script': 'projects/shell-chrome/src/app/content-script.ts',
+    'ng-validate': 'projects/shell-chrome/src/app/ng-validate.ts',
     background: 'projects/shell-chrome/src/app/background.ts',
     backend: 'projects/shell-chrome/src/app/backend.ts',
     devtools: 'projects/shell-chrome/src/devtools.ts',

projects/shell-chrome/src/app/background.ts

@@ -42,7 +42,6 @@ const isNumeric = (str: string): boolean => {
 const installContentScript = (tabId: number) => {
   console.log('Installing the content-script');
   chrome.tabs.executeScript(tabId, { file: '/content-script.js' }, () => {});
-  chrome.tabs.executeScript(tabId, { file: '/runtime.js' }, () => {});
 };
 
 const doublePipe = (devtoolsPort: chrome.runtime.Port, contentScriptPort: chrome.runtime.Port, tab: string) => {
@@ -69,3 +68,18 @@ const doublePipe = (devtoolsPort: chrome.runtime.Port, contentScriptPort: chrome
   devtoolsPort.onDisconnect.addListener(shutdown.bind(null, 'devtools'));
   contentScriptPort.onDisconnect.addListener(shutdown.bind(null, 'content-script'));
 };
+
+chrome.runtime.onMessage.addListener((req, sender) => {
+  if (sender.tab && req.isSupportedAngularVersion) {
+    chrome.browserAction.setIcon({
+      tabId: sender.tab.id,
+      path: {
+        16: `assets/favicon.ico`,
+      },
+    });
+    chrome.browserAction.setPopup({
+      tabId: sender.tab.id,
+      popup: req.isDebugMode ? `popups/enabled.html` : `popups/production.html`,
+    });
+  }
+});

projects/shell-chrome/src/app/ng-validate.ts

@@ -0,0 +1,33 @@
+window.addEventListener('message', (event: MessageEvent) => {
+  if (event.source === window && event.data) {
+    chrome.runtime.sendMessage(event.data);
+  }
+});
+
+function detectAngular(win: Window) {
+  const isDebugMode = Boolean((win as any).ng);
+  const ngVersionElement = document.querySelector('[ng-version]');
+  const isSupportedAngularVersion = ngVersionElement
+    ? +ngVersionElement.getAttribute('ng-version').split('.')[0] >= 9
+    : false;
+
+  win.postMessage(
+    {
+      isDebugMode,
+      isSupportedAngularVersion,
+    },
+    '*'
+  );
+}
+
+function installScript(fn: string) {
+  const source = `;(${fn})(window)`;
+  const script = document.createElement('script');
+  script.textContent = source;
+  document.documentElement.appendChild(script);
+  script.parentNode.removeChild(script);
+}
+
+if (document instanceof HTMLDocument) {
+  installScript(detectAngular.toString());
+}

projects/shell-chrome/src/manifest.json

@@ -15,7 +15,7 @@
   },
 
   "browser_action": {
-    "default_popup": "popup.html"
+    "default_popup": "popups/disabled.html"
   },
 
   "devtools_page": "devtools.html",
@@ -27,5 +27,18 @@
     "persistent": false
   },
 
-  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*"]
+  "permissions": ["activeTab", "http://*/*", "https://*/*", "file:///*"],
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["runtime.js"],
+      "run_at": "document_start"
+    },
+    {
+      "matches": ["<all_urls>"],
+      "js": ["ng-validate.js"],
+      "run_at": "document_idle"
+    }
+  ]
 }

projects/shell-chrome/src/popups/disabled.html

@@ -0,0 +1,41 @@
+<html>
+  <head>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+
+      .header-text {
+        margin: 0px;
+        text-align: center;
+        padding-bottom: 20px;
+      }
+
+      .modal-content {
+        min-width: 300px;
+        padding: 10px;
+      }
+
+      .icon {
+        width: 20px;
+        padding-right: 5px;
+      }
+
+      .message {
+        display: flex;
+        align-items: center;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="modal-content">
+      <h4 class="header-text">Angular Dev Tools</h4>
+      <div class="message">
+        <img class="icon" src="/assets/cross.png" />
+        <p>This page doesn't appear to be using supported version of Angular.</p>
+      </div>
+    </div>
+  </body>
+</html>

projects/shell-chrome/src/popups/enabled.html

@@ -0,0 +1,44 @@
+<html>
+
+<head>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    .header-text {
+      margin: 0px;
+      text-align: center;
+      padding-bottom: 20px;
+    }
+
+    .modal-content {
+      min-width: 300px;
+      padding: 10px;
+    }
+
+    .icon {
+      width: 20px;
+      padding-right: 5px;
+    }
+
+    .message {
+      display: flex;
+      align-items: center;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div class="modal-content">
+    <h4 class="header-text">Angular Dev Tools</h4>
+    <div class="message">
+      <img class="icon" src="/assets/check.png" />
+      <p>Angular application detected is running in development mode.</p>
+    </div>
+  </div>
+</body>
+
+</html>

projects/shell-chrome/src/popups/production.html

@@ -0,0 +1,44 @@
+<html>
+
+<head>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    .header-text {
+      margin: 0px;
+      text-align: center;
+      padding-bottom: 20px;
+    }
+
+    .modal-content {
+      min-width: 300px;
+      padding: 10px;
+    }
+
+    .icon {
+      width: 20px;
+      padding-right: 5px;
+    }
+
+    .message {
+      display: flex;
+      align-items: center;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div class="modal-content">
+    <h4 class="header-text">Angular Dev Tools</h4>
+    <div class="message">
+      <img class="icon" src="/assets/gear.png" />
+      <p>Angular application detected is running in production mode.</p>
+    </div>
+  </div>
+</body>
+
+</html>

projects/shell-chrome/tsconfig.app.json

@@ -10,7 +10,8 @@
     "src/polyfills.ts",
     "src/app/backend.ts",
     "src/app/background.ts",
-    "src/app/content-script.ts"
+    "src/app/content-script.ts",
+    "src/app/ng-validate.ts",
   ],
   "include": ["src/**/*.d.ts"]
 }