ember-inspector 4.13.1 → 4.15.0

package/skeletons/bookmarklet/load_inspector.js

@@ -1,5 +1,5 @@
-(function() {
-  "use strict";
+(function () {
+  'use strict';
 
   function getScriptURL() {
     var scripts = document.getElementsByTagName('script');
@@ -14,10 +14,15 @@
   }
 
   var url = getScriptURL();
-  var windowUrl = url + '/{{PANE_ROOT}}' + '/index.html' + '?inspectedWindowURL=' + locationOrigin();
+  var windowUrl =
+    url +
+    '/{{PANE_ROOT}}' +
+    '/index.html' +
+    '?inspectedWindowURL=' +
+    locationOrigin();
   var inspectorWindow;
 
-  var pathArray = url.split( '/' );
+  var pathArray = url.split('/');
   var base = pathArray[0] + '//' + pathArray[2];
 
   if (!supportsPopup()) {
@@ -38,7 +43,7 @@
 
   window.emberInspector = {
     w: inspectorWindow,
-    url: base
+    url: base,
   };
 
   /**
@@ -46,23 +51,28 @@
    * another version of ember-debug.
    *
    */
-  window.addEventListener('message', function(e) {
+  window.addEventListener('message', function (e) {
     if (e.origin !== window.emberInspector.url) {
       return;
     }
     if (e.data.name === 'version-mismatch') {
-      injectEmberDebug('panes-' + e.data.version.replace(/\./g, '-') + '/ember_debug.js');
+      injectEmberDebug(
+        'panes-' + e.data.version.replace(/\./g, '-') + '/ember_debug.js',
+      );
     }
   });
 
   if (!window.emberInspector) {
-    alert('Unable to open the inspector in a popup.  Please enable popups and retry.');
+    alert(
+      'Unable to open the inspector in a popup.  Please enable popups and retry.',
+    );
     return;
   }
   document.documentElement.dataset.emberExtension = 1;
 
   function injectEmberDebug(fileName) {
     var script = document.createElement('script');
+    script.type = 'module';
     script.src = url + '/' + fileName;
     document.body.appendChild(script);
   }
@@ -72,7 +82,11 @@
   function locationOrigin() {
     var origin = window.location.origin;
     if (!origin) {
-      origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
+      origin =
+        window.location.protocol +
+        '//' +
+        window.location.hostname +
+        (window.location.port ? ':' + window.location.port : '');
     }
     return origin;
   }
@@ -82,6 +96,12 @@
   }
 
   function isIE() {
-    return ((navigator.appName == 'Microsoft Internet Explorer') || ((navigator.appName == 'Netscape') && (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null)));
+    return (
+      navigator.appName == 'Microsoft Internet Explorer' ||
+      (navigator.appName == 'Netscape' &&
+        new RegExp('Trident/.*rv:([0-9]{1,}[\.0-9]{0,})').exec(
+          navigator.userAgent,
+        ) != null)
+    );
   }
-}());
+})();

package/skeletons/web-extension/background.js

@@ -12,13 +12,13 @@
  *     https://developer.chrome.com/extensions/background_pages
  *     https://developer.chrome.com/extensions/messaging
  */
-(function() {
-  "use strict";
+(function () {
+  'use strict';
 
   var activeTabs = {},
-      activeTabId,
-      contextMenuAdded = false,
-      emberInspectorChromePorts = {};
+    activeTabId,
+    contextMenuAdded = false,
+    emberInspectorChromePorts = {};
 
   /**
    * Creates the tooltip string to show the version of libraries used in the ClientApp
@@ -26,9 +26,11 @@
    * @return {String} - string of library names and versions
    */
   function generateVersionsTooltip(versions) {
-    return versions.map(function(lib) {
-      return lib.name + " " + lib.version;
-    }).join("\n");
+    return versions
+      .map(function (lib) {
+        return lib.name + ' ' + lib.version;
+      })
+      .join('\n');
   }
 
   /**
@@ -38,7 +40,7 @@
   function setActionTitle(tabId) {
     void chrome.action.setTitle({
       tabId: tabId,
-      title: generateVersionsTooltip(activeTabs[tabId])
+      title: generateVersionsTooltip(activeTabs[tabId]),
     });
   }
 
@@ -49,14 +51,14 @@
    * @param {Number} tabId - the current tab
    */
   function updateTabAction(tabId) {
-    chrome.storage.sync.get("options", async function(data) {
+    chrome.storage.sync.get('options', async function (data) {
       void chrome.action.enable(tabId);
       void chrome.action.setIcon({
         tabId,
         path: {
           19: '{{PANE_ROOT}}/assets/images/icon19.png',
           38: '{{PANE_ROOT}}/assets/images/icon38.png',
-        }
+        },
       });
       setActionTitle(tabId);
     });
@@ -78,7 +80,7 @@
       path: {
         19: '{{PANE_ROOT}}/assets/images/icon19_grey.png',
         38: '{{PANE_ROOT}}/assets/images/icon38_grey.png',
-      }
+      },
     });
   }
 
@@ -86,7 +88,7 @@
     if (info.menuItemId !== 'inspect-ember-component') return;
     void chrome.tabs.sendMessage(activeTabId, {
       from: 'devtools',
-      type: 'view:contextMenu'
+      type: 'view:contextMenu',
     });
   }
 
@@ -130,7 +132,7 @@
    *
    * @param {Port} emberInspectorChromePort
    */
-  chrome.runtime.onConnect.addListener(function(emberInspectorChromePort) {
+  chrome.runtime.onConnect.addListener(function (emberInspectorChromePort) {
     var appId;
 
     /**
@@ -139,7 +141,7 @@
      * to the content-script.
      * @param {Message} message
      */
-    emberInspectorChromePort.onMessage.addListener(function(message) {
+    emberInspectorChromePort.onMessage.addListener(function (message) {
       // if the message contains the appId, this is the first
       // message and the appId is used to map the port for this app.
       if (message.appId) {
@@ -147,13 +149,15 @@
 
         emberInspectorChromePorts[appId] = emberInspectorChromePort;
 
-        emberInspectorChromePort.onDisconnect.addListener(function() {
+        emberInspectorChromePort.onDisconnect.addListener(function () {
           delete emberInspectorChromePorts[appId];
         });
       } else if (message.from === 'devtools') {
         // all other messages from EmberInspector are forwarded to the content-script
         // https://developer.chrome.com/extensions/tabs#method-sendMessage
-        chrome.tabs.sendMessage(message.tabId || appId, message, { frameId: message.frameId });
+        chrome.tabs.sendMessage(message.tabId || appId, message, {
+          frameId: message.frameId,
+        });
       }
     });
   });
@@ -164,7 +168,7 @@
    * @param {Object} request
    * @param {MessageSender} sender
    */
-  chrome.runtime.onMessage.addListener(function(request, sender) {
+  chrome.runtime.onMessage.addListener(function (request, sender) {
     // only listen to messages from the content-script
     if (!sender.tab) {
       // noop
@@ -182,7 +186,9 @@
     } else {
       // forward the message to EmberInspector
       var emberInspectorChromePort = emberInspectorChromePorts[sender.tab.id];
-      if (emberInspectorChromePort) { emberInspectorChromePort.postMessage(request); }
+      if (emberInspectorChromePort) {
+        emberInspectorChromePort.postMessage(request);
+      }
     }
   });
 
@@ -203,5 +209,4 @@
   chrome.tabs.onRemoved.addListener(({ tabId }) => {
     delete activeTabs[tabId];
   });
-
-}());
+})();

package/skeletons/web-extension/boot.js

@@ -9,7 +9,7 @@ if (document.contentType === 'text/html') {
   //https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts
   if (window.wrappedJSObject) {
     const EmberENV = new window.Object();
-    EmberENV._DEBUG_RENDER_TREE = true
+    EmberENV._DEBUG_RENDER_TREE = true;
     window.wrappedJSObject.EmberENV = EmberENV;
   }
 }

package/skeletons/web-extension/content-script.js

@@ -9,8 +9,8 @@
  * Content scripts are loaded into every page, and have access to the DOM.  This uses that
  * to inject the in-page-script to determine the ClientApp version onLoad.
  */
-(function() {
-  "use strict";
+(function () {
+  'use strict';
 
   /**
    * Add an event listener for window.messages.
@@ -23,7 +23,7 @@
    * See:
    *     https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API
    */
-  window.addEventListener('message', function(event) {
+  window.addEventListener('message', function (event) {
     // received initial message from EmberDebug
     if (event.data === 'debugger-client') {
       var emberDebugPort = event.ports[0];
@@ -39,12 +39,12 @@
    */
   function listenToEmberDebugPort(emberDebugPort) {
     // listen for messages from EmberDebug, and pass them on to the background script
-    emberDebugPort.addEventListener('message', function(event) {
+    emberDebugPort.addEventListener('message', function (event) {
       chrome.runtime.sendMessage(event.data);
     });
 
     // listen for messages from the EmberInspector, and pass them on to EmberDebug
-    chrome.runtime.onMessage.addListener(function(message) {
+    chrome.runtime.onMessage.addListener(function (message) {
       if (message.from === 'devtools') {
         // forward message to EmberDebug
         emberDebugPort.postMessage(message);
@@ -74,11 +74,11 @@
    * the libraries running in the ClientApp
    */
   var script = document.createElement('script');
-  script.type = "text/javascript";
-  script.src = chrome.runtime.getURL("scripts/in-page-script.js");
-  if (document.head && document.contentType !== "application/pdf") {
+  script.type = 'text/javascript';
+  script.src = chrome.runtime.getURL('scripts/in-page-script.js');
+  if (document.head && document.contentType !== 'application/pdf') {
     document.head.appendChild(script);
-    script.onload = function() {
+    script.onload = function () {
       document.head.removeChild(script);
     };
   }
@@ -89,9 +89,10 @@
     if (message?.type === 'inject-ember-debug') {
       if (!injected) {
         // cannot use eval here, as the context is limited to the content script-
-        const elem = document.createElement('script') ;
+        const elem = document.createElement('script');
+        elem.type = 'module';
         elem.src = message.value;
-        document.head.appendChild(elem) ;
+        document.head.appendChild(elem);
         injected = true;
       }
     }

package/skeletons/web-extension/devtools.js

@@ -1,9 +1,18 @@
-/*global chrome*/
+/* global chrome */
+/* eslint-disable no-unused-vars */
 
 /**
  * Run when devtools.html is automatically added to the Chrome devtools panels.
  * It creates a new pane using the panes/index.html which includes EmberInspector.
  */
-var panelWindow, injectedPanel = false, injectedPage = false, panelVisible = false, savedStack = [];
+var panelWindow,
+  injectedPanel = false,
+  injectedPage = false,
+  panelVisible = false,
+  savedStack = [];
 
-chrome.devtools.panels.create("{{TAB_LABEL}}", "{{PANE_ROOT}}/assets/svg/ember-icon.svg", "{{PANE_ROOT}}/index.html");
+chrome.devtools.panels.create(
+  '{{TAB_LABEL}}',
+  '{{PANE_ROOT}}/assets/svg/ember-icon.svg',
+  '{{PANE_ROOT}}/index.html',
+);

package/skeletons/web-extension/manifest.json

@@ -26,6 +26,7 @@
       "world": "MAIN",
       "run_at": "document_start",
       "match_about_blank": true,
+      "match_origin_as_fallback": true,
       "all_frames": true
     },
     {
@@ -33,6 +34,7 @@
       "js": ["content-script.js"],
       "run_at": "document_end",
       "match_about_blank": true,
+      "match_origin_as_fallback": true,
       "all_frames": true
     }
   ],
@@ -65,7 +67,7 @@
     {
       "resources": [
         "scripts/in-page-script.js",
-        "panes-*/ember_debug.js"
+        "panes-*/*.js"
       ],
       "matches": [
         "*://*/*"

package/skeletons/web-extension/options.js

@@ -8,17 +8,18 @@
  * see:
  *     https://developer.chrome.com/extensions/options
  */
-(function() {
-  "use strict";
+(function () {
+  'use strict';
 
   /**
    * Load the options from storage.
    */
   function loadOptions() {
-    chrome.storage.sync.get('options', function(data) {
+    chrome.storage.sync.get('options', function (data) {
       var options = data.options;
 
-      document.querySelector('[data-settings=tomster]').checked = options && options.showTomster;
+      document.querySelector('[data-settings=tomster]').checked =
+        options && options.showTomster;
     });
   }
 
@@ -28,14 +29,18 @@
   function storeOptions() {
     var showTomster = this.checked;
 
-    chrome.storage.sync.set({
-      options: { showTomster: showTomster }
-    }, function optionsSaved() {
-      console.log("saved!");
-    });
+    chrome.storage.sync.set(
+      {
+        options: { showTomster: showTomster },
+      },
+      function optionsSaved() {
+        console.log('saved!');
+      },
+    );
   }
 
   document.addEventListener('DOMContentLoaded', loadOptions);
-  document.querySelector('[data-settings=tomster]').addEventListener('click', storeOptions);
-
-}());
+  document
+    .querySelector('[data-settings=tomster]')
+    .addEventListener('click', storeOptions);
+})();

package/skeletons/web-extension/scripts/in-page-script.js

@@ -8,25 +8,28 @@
  * @namespace EmberInspector/Shared
  * @class InPageScript
  */
-(function() {
-  "use strict";
+(function () {
+  'use strict';
   function onReady(callback) {
-    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    if (
+      document.readyState === 'complete' ||
+      document.readyState === 'interactive'
+    ) {
       setTimeout(completed);
     } else {
-      document.addEventListener("DOMContentLoaded", completed, false);
+      document.addEventListener('DOMContentLoaded', completed, false);
       // For some reason DOMContentLoaded doesn't always work
-      window.addEventListener("load", completed, false);
+      window.addEventListener('load', completed, false);
     }
 
     function completed() {
-      document.removeEventListener("DOMContentLoaded", completed, false);
-      window.removeEventListener("load", completed, false);
+      document.removeEventListener('DOMContentLoaded', completed, false);
+      window.removeEventListener('load', completed, false);
       callback();
     }
   }
 
-  onReady(function() {
+  onReady(function () {
     let Ember;
     try {
       Ember = requireModule('ember')['default'];
@@ -43,10 +46,13 @@
       }
 
       var versions = Array.prototype.slice.call(libraries, 0);
-      window.postMessage({
-        type: 'emberVersion',
-        versions: versions
-      }, '*');
+      window.postMessage(
+        {
+          type: 'emberVersion',
+          versions: versions,
+        },
+        '*',
+      );
     }
   });
-}());
+})();

package/testem.js

@@ -3,7 +3,6 @@
 module.exports = {
   test_page: 'tests/index.html?hidepassed',
   disable_watching: true,
-  client_decycle_depth: 10,
   launch_in_ci: ['Chrome'],
   launch_in_dev: ['Chrome'],
   browser_start_timeout: 120,

package/tests/acceptance/app-picker-test.js

@@ -47,7 +47,7 @@ module('App Picker', function (hooks) {
         this.currentApplicationId = applicationId;
         return false;
       },
-      { count: 3 }
+      { count: 3 },
     );
   });
 
@@ -86,7 +86,7 @@ module('App Picker', function (hooks) {
     assert.strictEqual(
       this.currentApplicationId,
       'app-one',
-      'First App is selected'
+      'First App is selected',
     );
     assert.ok(options[0].selected, 'First App is selected');
     assert.notOk(options[1].selected, 'Second App is not selected');
@@ -101,7 +101,7 @@ module('App Picker', function (hooks) {
     assert.strictEqual(
       this.currentApplicationId,
       'app-two',
-      'Second App is selected'
+      'Second App is selected',
     );
     assert.notOk(options[0].selected, 'First App is not selected');
     assert.ok(options[1].selected, 'Second App is selected');
@@ -116,7 +116,7 @@ module('App Picker', function (hooks) {
     assert.strictEqual(
       this.currentApplicationId,
       'app-one',
-      'First App is selected'
+      'First App is selected',
     );
     assert.ok(options[0].selected, 'First App is selected');
     assert.notOk(options[1].selected, 'Second App is not selected');