ember-inspector 4.13.1 → 4.15.0

package/app/templates/application.hbs

@@ -7,24 +7,24 @@
 >
   {{#if this.isEmberApplication}}
     <div class="split">
-      <div class="split__panel">
-        <div class="split split--main">
+      <div class="split-panel">
+        <div class="split split-main">
           <Ui::DraggableColumn
-            @classes="split__panel split__panel--sidebar-1"
+            @classes="split-panel split-panel-sidebar-1"
             @side="left"
             @width={{this.navWidth}}
           >
-            <div class="split__panel__hd">
+            <div class="split-panel-hd">
               <AppPicker @collapsed={{this.navIsCollapsed}} />
             </div>
 
             <SideNav
-              class="split__panel__bd"
+              class="split-panel-bd"
               @collapsed={{this.navIsCollapsed}}
               @deprecationCount={{this.deprecationCount}}
             />
 
-            <div class="split__panel__ft nav__footer {{if this.navIsCollapsed "nav--collapsed" "nav--expanded"}}">
+            <div class="split-panel-ft nav-footer {{if this.navIsCollapsed "nav-collapsed" "nav-expanded"}}">
               <a
                 target="_blank"
                 title="Submit an Issue"
@@ -44,36 +44,38 @@
             </div>
           </Ui::DraggableColumn>
 
-          <div class="split__panel">
-            <div class="split__panel__hd">
+          <div class="split-panel">
+            <div class="split-panel-hd split-panel-hd-row">
               <div id="toolbar"></div>
-              <button
-                class="object-inspector-toggle toolbar__icon-button absolute top-0 right-0"
-                {{on "click" this.toggleInspector}}
-                type="button"
-                title="{{if this.inspectorExpanded "hide" "show"}} object inspector"
-              >
-                {{svg-jar "sidebar-toggle" width="16" height="16"}}
-              </button>
+              {{#unless this.layout.inspectorExpanded}}
+                <span class="spacer">{{!--  Spacer to shift the toggle to the end of the header --}}</span>
+                <ObjectInspector::Toggle />
+              {{/unless}}
             </div>
 
-            <div class="split__panel__bd" {{did-insert this.setupContentElement}}>
+            <div class="split-panel-bd" {{did-insert this.setupContentElement}}>
               {{outlet}}
             </div>
           </div>
         </div>
       </div>
 
-      {{#if this.inspectorExpanded}}
+      {{#if this.layout.inspectorExpanded}}
         <Ui::DraggableColumn
-          @classes="split__panel"
+          @classes="split-panel"
           @side="right"
           @width={{this.inspectorWidth}}
         >
+          <div class="split-panel-hd split-panel-hd-row">
+            <span class="spacer"></span>
+            <ObjectInspector::Toggle />
+          </div>
           <ObjectInspector
             @popMixinDetails={{this.popMixinDetails}}
             @model={{this.mixinStack}}
             @mixinDetails={{this.mixinDetails}}
+            @selectComponent={{mut this.componentTreeController.pinned}}
+            @item={{this.componentTreeController.currentItem}}
           />
         </Ui::DraggableColumn>
       {{/if}}
@@ -82,6 +84,7 @@
     <Ui::ErrorPage @description="Ember application not detected!">
       <ul>
         <li>This is not an Ember application.</li>
+        <li>You might need to setup <a href="https://github.com/embroider-build/embroider/tree/main/packages/legacy-inspector-support">legacy inspector support</a></li>
         <li>You are using an old version of Ember (&lt; rc5).</li>
         {{#if this.isChrome}}
           <li>

package/app/templates/component-tree.hbs

@@ -5,6 +5,9 @@
       @expandAll={{this.expandAll}}
       @isInspecting={{this.isInspecting}}
       @query={{this.query}}
+      @pinned={{this.pinned}}
+      @toggleParentsOnly={{this.toggleParentsOnly}}
+      @showParentsOnly={{this.showParentsOnly}}
       @toggleInspect={{this.toggleInspect}}
     />
   {{/in-element}}
@@ -15,7 +18,7 @@
   @currentItem={{this.currentItem}}
   @previewing={{this.currentPreviewItem}}
   @itemHeight={{this.itemHeight}}
-  class="list__content"
+  class="list-content"
   tabindex="-1"
   {{did-insert this.arrowKeysSetup}}
   {{will-destroy this.arrowKeysTeardown}}

package/app/templates/deprecations.hbs

@@ -1,9 +1,8 @@
-{{! template-lint-disable no-action}}
 {{#if this.toolbarContainer}}
   {{#in-element this.toolbarContainer}}
     <DeprecationsToolbar
       @changeDeprecationWorkflow={{this.changeDeprecationWorkflow}}
-      @clear={{action this.send "clear"}}
+      @clear={{this.clear}}
       @searchValue={{this.searchValue}}
       @toggleDeprecationWorkflow={{this.toggleDeprecationWorkflow}}
     />
@@ -11,7 +10,7 @@
 {{/if}}
 
 {{#if this.filtered.length}}
-  <div class="list__content js-deprecations">
+  <div class="list-content js-deprecations">
     <VerticalCollection @items={{this.filtered}} @estimateHeight={{20}} as |content|>
       <DeprecationItem
         @model={{content}}

package/app/templates/info.hbs

@@ -1,32 +1,32 @@
 <div class="split">
   <Ui::DraggableColumn
-    @classes="split__panel split__panel--sidebar-2 nav"
+    @classes="split-panel split-panel-sidebar-2 nav"
     @side="left"
     @width={{this.navWidth}}
   >
-    <div class="split__panel__bd">
+    <div class="split-panel-bd">
       <ul>
         <li>
-          <LinkTo @route="libraries" class="nav__item">
-            <span class="nav__item-label">Libraries</span>
+          <LinkTo @route="libraries" class="nav-item">
+            <span class="nav-item-label">Libraries</span>
           </LinkTo>
         </li>
          <li>
-          <LinkTo @route="app-config" class="nav__item">
-            <span class="nav__item-label">App Config</span>
+          <LinkTo @route="app-config" class="nav-item">
+            <span class="nav-item-label">App Config</span>
           </LinkTo>
         </li>
         <li>
-          <LinkTo @route="whats-new" class="nav__item">
-            <span class="nav__item-label">What's New</span>
+          <LinkTo @route="whats-new" class="nav-item">
+            <span class="nav-item-label">What's New</span>
           </LinkTo>
         </li>
       </ul>
     </div>
   </Ui::DraggableColumn>
 
-  <div class="split__panel">
-    <div class="split__panel__bd">
+  <div class="split-panel">
+    <div class="split-panel-bd">
       {{outlet}}
     </div>
   </div>

package/app/templates/promise-tree.hbs

@@ -28,7 +28,7 @@
 {{else}}
   <List class="js-promise-tree" @schema={{schema-for "promise-tree"}} as |list|>
     <list.vertical-collection @items={{this.filtered}} as |content index|>
-      <tr class="list__row js-promise-tree-item {{if (mod index 2) "striped"}}">
+      <tr class="list-row js-promise-tree-item {{if (mod index 2) "striped"}}">
         <PromiseItem
           @model={{content}}
           @filter={{this.filter}}

package/app/templates/render-tree.hbs

@@ -39,7 +39,7 @@
   </Ui::EmptyMessage>
 {{else}}
   <List
-    class="js-render-tree list--css-striping"
+    class="js-render-tree list-css-striping"
     @headerHeight={{this.headerHeight}}
     @schema={{schema-for "render-tree"}} as |list|
   >

package/app/templates/route-tree.hbs

@@ -21,7 +21,7 @@
     <b.row
       class={{
         concat
-        "list__row js-route-tree-item"
+        "list-row js-route-tree-item"
         (if (mod b.rowMeta.index 2) " striped")
       }} as |r|
     >

package/app/utils/escape-reg-exp.ts

@@ -1,6 +1,7 @@
-/* eslint-disable no-useless-escape */
-export default function (str: string) {
+export default function (str?: string) {
   if (typeof str === 'string') {
     return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
   }
+
+  return undefined;
 }

package/app/utils/nullish.ts

@@ -0,0 +1,7 @@
+export const isNullish = <T>(
+  argument: T | undefined | null,
+): argument is undefined | null => argument === null || argument === undefined;
+
+export const nonNullish = <T>(
+  argument: T | undefined | null,
+): argument is NonNullable<T> => !isNullish(argument);

package/app/utils/parse-text.ts

@@ -6,16 +6,15 @@
 export default function parseText(value: string): string {
   let parsedValue;
   try {
-    parsedValue = JSON.parse(value);
-  } catch (e) {
+    parsedValue = JSON.parse(value) as string;
+  } catch {
     // if surrounded by quotes, remove quotes
-    let match = value.match(/^"(.*)"$/);
+    const match = value.match(/^"(.*)"$/);
     if (match && match.length > 1) {
-      parsedValue = match[1];
+      parsedValue = match[1] as string;
     } else {
       parsedValue = value;
     }
   }
   return parsedValue;
 }
-

package/app/utils/truncate.js

@@ -12,7 +12,6 @@ export default function truncate(str, limit = 20, rest = '…') {
   let targetLength = limit - rest.length; // leave room for the "..."
   let currentLength = 0;
 
-  // eslint-disable-next-line
   while (true) {
     let candidate = parts.shift();
 

package/config/ember-cli-update.json

@@ -3,7 +3,7 @@
   "packages": [
     {
       "name": "ember-cli",
-      "version": "4.9.2",
+      "version": "6.1.0",
       "blueprints": [
         {
           "name": "app",
@@ -11,8 +11,10 @@
           "codemodsSource": "ember-app-codemods-manifest@1",
           "isBaseBlueprint": true,
           "options": [
-            "--yarn",
-            "--no-welcome"
+            "--pnpm",
+            "--no-welcome",
+            "--ci-provider=github",
+            "--typescript"
           ]
         }
       ]

package/config/ember-try.js

@@ -1,95 +1,140 @@
-/* eslint-disable */
 'use strict';
 
 const getChannelURL = require('ember-source-channel-url');
 
-module.exports = function () {
-  return Promise.all([
-    getChannelURL('release'),
-    getChannelURL('beta'),
-    getChannelURL('canary'),
-  ]).then((urls) => {
-    return {
-      usePnpm: true,
-      scenarios: [
-        {
-          name: 'ember-lts-3.16',
-          npm: {
-            devDependencies: {
-              'ember-source': '~3.16.0',
-              'ember-qunit': '^5.1.5',
-            },
+module.exports = async function () {
+  return {
+    usePnpm: true,
+    scenarios: [
+      {
+        name: 'ember-lts-3.16',
+        npm: {
+          devDependencies: {
+            '@ember/test-helpers': '^2.4.0',
+            'ember-cli': '^3.28.0',
+            'ember-cli-app-version': '^5.0.0',
+            'ember-source': '~3.16.0',
+            'ember-resolver': '^11.0.1',
+            'ember-qunit': '^5.1.5',
           },
         },
-        {
-          name: 'ember-lts-3.20',
-          npm: {
-            devDependencies: {
-              'ember-source': '~3.20.5',
-              'ember-qunit': '^5.1.5',
-            },
+      },
+      {
+        name: 'ember-lts-3.20',
+        npm: {
+          devDependencies: {
+            '@ember/test-helpers': '^2.4.0',
+            'ember-cli': '^3.28.0',
+            'ember-cli-app-version': '^5.0.0',
+            'ember-source': '~3.20.5',
+            'ember-resolver': '^11.0.1',
+            'ember-qunit': '^5.1.5',
           },
         },
-        {
-          name: 'ember-lts-3.24',
-          npm: {
-            devDependencies: {
-              'ember-source': '~3.24.0',
-              'ember-qunit': '^5.1.5',
-            },
+      },
+      {
+        name: 'ember-lts-3.24',
+        npm: {
+          devDependencies: {
+            '@ember/test-helpers': '^2.4.0',
+            'ember-cli': '^3.28.0',
+            'ember-cli-app-version': '^5.0.0',
+            'ember-source': '~3.24.0',
+            'ember-resolver': '^11.0.1',
+            'ember-qunit': '^5.1.5',
           },
         },
-        {
-          name: 'ember-lts-3.28',
-          npm: {
-            devDependencies: {
-              'ember-source': '~3.28.0',
-            },
+      },
+      {
+        name: 'ember-lts-3.28',
+        npm: {
+          devDependencies: {
+            '@ember/test-helpers': '^2.4.0',
+            'ember-cli': '^3.28.0',
+            'ember-cli-app-version': '^6.0.0',
+            'ember-source': '~3.28.0',
+            'ember-resolver': '^11.0.1',
+            'ember-qunit': '^5.1.5',
           },
         },
-        {
-          name: 'ember-release',
-          npm: {
-            devDependencies: {
-              'ember-source': urls[0],
-              'ember-qunit': '^7.0.0',
-              '@ember/test-helpers': '^3.0.3'
-            },
+      },
+      {
+        name: 'ember-lts-4.8',
+        npm: {
+          devDependencies: {
+            'ember-resolver': '^11.0.1',
+            'ember-source': '~4.8.0',
           },
         },
-        {
-          name: 'ember-beta',
-          npm: {
-            devDependencies: {
-              'ember-source': urls[1],
-              'ember-qunit': '^7.0.0',
-              '@ember/test-helpers': '^3.0.3'
-            },
+      },
+      {
+        name: 'ember-lts-4.12',
+        npm: {
+          devDependencies: {
+            'ember-source': '~4.12.0',
           },
         },
-        {
-          name: 'ember-canary',
-          npm: {
-            devDependencies: {
-              'ember-source': urls[2],
-              'ember-qunit': '^7.0.0',
-              '@ember/test-helpers': '^3.0.3'
-            },
+      },
+      {
+        name: 'ember-lts-5.4',
+        npm: {
+          devDependencies: {
+            'ember-source': '~5.4.0',
           },
         },
-        {
-          name: 'ember-default',
-          npm: {
-            devDependencies: {},
+      },
+      {
+        name: 'ember-lts-5.8',
+        npm: {
+          devDependencies: {
+            'ember-source': '~5.8.0',
           },
         },
-        {
-          name: 'ember-default-no-prototype-extensions',
-          env: {
-            NO_EXTEND_PROTOTYPES: 'true',
+      },
+      {
+        name: 'ember-lts-5.12',
+        npm: {
+          devDependencies: {
+            'ember-source': '~5.12.0',
           },
         },
-      ],
-    };
-  });
+      },
+      {
+        name: 'ember-release',
+        npm: {
+          devDependencies: {
+            'ember-source': await getChannelURL('release'),
+          },
+        },
+      },
+      {
+        name: 'ember-beta',
+        npm: {
+          devDependencies: {
+            'ember-source': await getChannelURL('beta'),
+          },
+        },
+      },
+      {
+        name: 'ember-canary',
+        npm: {
+          devDependencies: {
+            'ember-source': await getChannelURL('canary'),
+          },
+        },
+      },
+      {
+        name: 'ember-default',
+        npm: {
+          devDependencies: {},
+        },
+      },
+      {
+        name: 'ember-default-no-prototype-extensions',
+        env: {
+          NO_EXTEND_PROTOTYPES: 'true',
+        },
+      },
+    ],
+  };
 };

package/config/environment.js

@@ -12,7 +12,7 @@ module.exports = function (environment) {
     emberVersionsSupported: packageJson.emberVersionsSupported,
     previousEmberVersionsSupported: packageJson.previousEmberVersionsSupported,
     EmberENV: {
-      // EXTEND_PROTOTYPES: false,
+      EXTEND_PROTOTYPES: false,
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
         // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true

package/config/optional-features.json

@@ -2,5 +2,6 @@
   "application-template-wrapper": false,
   "default-async-observers": true,
   "jquery-integration": false,
-  "template-only-glimmer-components": true
+  "template-only-glimmer-components": true,
+  "no-implicit-route-model": true
 }

package/dist/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 + '/panes-3-16-0' + '/index.html' + '?inspectedWindowURL=' + locationOrigin();
+  var windowUrl =
+    url +
+    '/panes-3-16-0' +
+    '/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)
+    );
   }
-}());
+})();