Feature/firefox

angular.json

@@ -16,6 +16,7 @@
       "architect": {
         "build": {
           "builder": "ngx-build-plus:browser",
+          "defaultConfiguration": "production",
           "options": {
             "outputPath": "dist/shell-dev",
             "index": "src/index.html",
@@ -32,6 +33,14 @@
             "scripts": []
           },
           "configurations": {
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
             "production": {
               "fileReplacements": [
                 {
@@ -84,7 +93,11 @@
             "extraWebpackConfig": "shell-dev-webpack.config.js",
             "browserTarget": "shell-dev:build"
           },
+          "defaultConfiguration": "development",
           "configurations": {
+            "development": {
+              "browserTarget": "shell-dev:build:development"
+            },
             "production": {
               "browserTarget": "shell-dev:build:production"
             },
@@ -148,6 +161,7 @@
       "architect": {
         "build": {
           "builder": "ngx-build-plus:browser",
+          "defaultConfiguration": "production",
           "options": {
             "outputPath": "dist/shell-chrome",
             "extraWebpackConfig": "projects/shell-chrome/shell-chrome-webpack.config.js",
@@ -159,7 +173,6 @@
             "aot": true,
             "assets": [
               "projects/shell-chrome/src/assets",
-              "projects/shell-chrome/src/manifest.json",
               "projects/shell-chrome/src/devtools.html",
               "projects/shell-chrome/src/popups"
             ],
@@ -170,6 +183,14 @@
             "scripts": []
           },
           "configurations": {
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
             "production": {
               "fileReplacements": [
                 {
@@ -189,7 +210,6 @@
               },
               "outputHashing": "none",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "buildOptimizer": true,
@@ -205,10 +225,14 @@
         },
         "serve": {
           "builder": "ngx-build-plus:dev-server",
+          "defaultConfiguration": "development",
           "options": {
             "browserTarget": "shell-chrome:build"
           },
           "configurations": {
+            "development": {
+              "browserTarget": "shell-chrome:build:development"
+            },
             "production": {
               "browserTarget": "shell-chrome:build:production"
             }

docs/firefox.md

@@ -0,0 +1,22 @@
+# Installing Angular DevTools in Firefox
+
+To install Angular DevTools in the firefox browser. Follow below steps:-
+
+![click on remote debugging](assets/firefox/step-1.png)
+Open menu item from top bar `Tools -> Browser Tools -> Remote Debugging`.
+
+![click on this firefox](assets/firefox/step-2.png)
+After clicking `Remote Debugging` click on `This Firefox` option from left navigation. You will see the below screen with list of extensions. Temporary extensions are unreleased extensions loaded in the dev mode.
+
+![load temporary add-on](assets/firefox/step-3.png)
+
+Click on `Load Temporary Add-on` button to select and load Angular Devtools extension for firefox.
+
+![select file](assets/firefox/step-4.png)
+Select any file from `dist -> shell chrome` directory to load extension. If you have not build extension for firefox yet. You can do it using `yarn build:firefox` which will generate build for firefox.
+
+![view extension](assets/firefox/step-5.png)
+After selecting file and clicking open, you should be able to see Angular DevTools as a Temporary Extension in firefox.
+
+![test extension](assets/firefox/step-6.png)
+Open any angular application in dev mode and open Firefox Devtools you should see Angular Tab in there.

package.json

@@ -8,7 +8,8 @@
     "start": "cross-env LATEST_SHA=`git rev-parse --short HEAD` ng serve",
     "start-no-animations": "yarn start --configuration=e2e",
     "build": "ng build",
-    "build:chrome": "cross-env LATEST_SHA=`git rev-parse --short HEAD` ng build shell-chrome",
+    "build:chrome": "cross-env LATEST_SHA=`git rev-parse --short HEAD` ng build shell-chrome && cross-env BUILD=chrome node projects/shell-chrome/copy-manifest.js",
+    "build:firefox": "cross-env LATEST_SHA=`git rev-parse --short HEAD` ng build shell-chrome && cross-env BUILD=firefox node projects/shell-chrome/copy-manifest.js",
     "release": "node projects/shell-chrome/set-version.js && cross-env LATEST_SHA=`git rev-parse --short HEAD` ng build shell-chrome --configuration production",
     "test": "ng test",
     "lint": "tslint -p tsconfig.json -c tslint.json",
@@ -84,7 +85,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.4.2",
     "ng-packagr": "^12.0.0",
-    "ngx-build-plus": "^11.0.0",
+    "ngx-build-plus": "^13.0.1",
     "prettier": "^2.0.0",
     "pretty-quick": "^3.0.0",
     "protractor": "~7.0.0",

projects/shell-chrome/copy-manifest.js

@@ -0,0 +1,15 @@
+const chalk = require('chalk');
+const { writeFileSync, readFileSync } = require('fs');
+const { join } = require('path');
+
+console.log('creating build for:', chalk.yellow(process.env.BUILD));
+
+const MANIFEST_INPUT_PATH = join(__dirname, `src/manifest/manifest.${process.env.BUILD}.json`);
+const MANIFEST_OUTPUT_PATH = join(process.cwd(), `dist/shell-chrome/manifest.json`);
+
+const rawData = readFileSync(MANIFEST_INPUT_PATH);
+const manifest = JSON.parse(rawData.toString());
+console.log('writing manifest file for:', chalk.yellow(process.env.BUILD));
+
+writeFileSync(MANIFEST_OUTPUT_PATH, JSON.stringify(manifest, null, 2), { flag: 'a+' });
+console.log('manifest copied: ', chalk.green('done'));

projects/shell-chrome/set-version.js

@@ -4,7 +4,7 @@ const semver = require('semver');
 const { writeFileSync, readFileSync } = require('fs');
 const { join } = require('path');
 
-const MANIFEST_PATH = join(__dirname, 'src/manifest.json');
+const MANIFEST_PATH = join(__dirname, 'src/manifest/manifest.chrome.json');
 
 const manifest = JSON.parse(readFileSync(MANIFEST_PATH).toString());
 

projects/shell-chrome/src/manifest/manifest.firefox.json

@@ -0,0 +1,40 @@
+{
+  "manifest_version": 2,
+  "short_name": "Angular DevTools",
+  "name": "Angular DevTools",
+  "description": "Angular DevTools extends Chrome DevTools adding Angular specific debugging and profiling capabilities.",
+  "version": "1.0.4",
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "icons": {
+    "16": "assets/icon16.png",
+    "48": "assets/icon48.png",
+    "128": "assets/icon128.png"
+  },
+  "browser_action": {
+    "default_icon": {
+      "16": "assets/icon16.png",
+      "48": "assets/icon48.png",
+      "128": "assets/icon128.png"
+    },
+    "default_popup": "popups/not-angular.html",
+    "browser_style": true
+  },
+  "devtools_page": "devtools.html",
+  "web_accessible_resources": ["backend.js", "runtime.js", "devtools.html"],
+  "background": {
+    "scripts": ["background.js", "runtime.js"]
+  },
+  "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"
+    }
+  ]
+}