ember-inspector 4.11.0-alpha.2024.3.3 → 4.11.0-alpha.2024.3.30
Sign up to get free protection for your applications and to get access to all the features.
- package/app/components/component-tree-arg.js +9 -0
- package/app/components/component-tree-item.hbs +18 -2
- package/app/components/object-inspector/properties-all.hbs +1 -0
- package/app/components/object-inspector/properties-base.js +10 -0
- package/app/components/object-inspector/properties-grouped.hbs +1 -0
- package/app/components/object-inspector/property.hbs +12 -1
- package/app/components/object-inspector/property.ts +4 -2
- package/app/components/object-inspector.hbs +16 -2
- package/app/components/object-inspector.js +14 -0
- package/app/controllers/component-tree.js +54 -3
- package/app/routes/component-tree.js +0 -6
- package/app/services/adapters/web-extension.js +3 -3
- package/app/services/port.js +4 -0
- package/app/styles/component_tree.scss +13 -0
- package/app/utils/parse-text.ts +1 -0
- package/dist/bookmarklet/panes-3-16-0/assets/{chunk.143.65e8b782428715aeb6e2.js → chunk.143.87087d5ea474913fabca.js} +4 -4
- package/dist/{firefox/panes-3-16-0/assets/chunk.178.b3278ef5f9ba6c444877.js → bookmarklet/panes-3-16-0/assets/chunk.178.99371fccdb5c663d4a27.js} +3 -3
- package/dist/bookmarklet/panes-3-16-0/assets/ember-inspector.css +13 -0
- package/dist/bookmarklet/panes-3-16-0/assets/ember-inspector.js +27 -23
- package/dist/bookmarklet/panes-3-16-0/assets/svg/code-source.svg +9 -0
- package/dist/bookmarklet/panes-3-16-0/assets/vendor.css +33 -0
- package/dist/bookmarklet/panes-3-16-0/assets/vendor.js +12 -10
- package/dist/bookmarklet/panes-3-16-0/ember_debug.js +408 -538
- package/dist/bookmarklet/panes-3-16-0/index.html +2 -2
- package/dist/chrome/manifest.json +2 -2
- package/dist/{firefox/panes-3-16-0/assets/chunk.143.65e8b782428715aeb6e2.js → chrome/panes-3-16-0/assets/chunk.143.87087d5ea474913fabca.js} +4 -4
- package/dist/{bookmarklet/panes-3-16-0/assets/chunk.178.b3278ef5f9ba6c444877.js → chrome/panes-3-16-0/assets/chunk.178.99371fccdb5c663d4a27.js} +3 -3
- package/dist/chrome/panes-3-16-0/assets/ember-inspector.css +13 -0
- package/dist/chrome/panes-3-16-0/assets/ember-inspector.js +27 -23
- package/dist/chrome/panes-3-16-0/assets/svg/code-source.svg +9 -0
- package/dist/chrome/panes-3-16-0/assets/vendor.css +33 -0
- package/dist/chrome/panes-3-16-0/assets/vendor.js +12 -10
- package/dist/chrome/panes-3-16-0/ember_debug.js +408 -538
- package/dist/chrome/panes-3-16-0/index.html +2 -2
- package/dist/firefox/manifest.json +2 -2
- package/dist/{chrome/panes-3-16-0/assets/chunk.143.65e8b782428715aeb6e2.js → firefox/panes-3-16-0/assets/chunk.143.87087d5ea474913fabca.js} +4 -4
- package/dist/{websocket/assets/chunk.178.b3278ef5f9ba6c444877.js → firefox/panes-3-16-0/assets/chunk.178.99371fccdb5c663d4a27.js} +3 -3
- package/dist/firefox/panes-3-16-0/assets/ember-inspector.css +13 -0
- package/dist/firefox/panes-3-16-0/assets/ember-inspector.js +27 -23
- package/dist/firefox/panes-3-16-0/assets/svg/code-source.svg +9 -0
- package/dist/firefox/panes-3-16-0/assets/vendor.css +33 -0
- package/dist/firefox/panes-3-16-0/assets/vendor.js +12 -10
- package/dist/firefox/panes-3-16-0/ember_debug.js +408 -538
- package/dist/firefox/panes-3-16-0/index.html +2 -2
- package/dist/websocket/assets/{chunk.143.65e8b782428715aeb6e2.js → chunk.143.87087d5ea474913fabca.js} +4 -4
- package/dist/{chrome/panes-3-16-0/assets/chunk.178.b3278ef5f9ba6c444877.js → websocket/assets/chunk.178.99371fccdb5c663d4a27.js} +3 -3
- package/dist/websocket/assets/ember-inspector.css +13 -0
- package/dist/websocket/assets/ember-inspector.js +27 -23
- package/dist/websocket/assets/svg/code-source.svg +9 -0
- package/dist/websocket/assets/vendor.css +33 -0
- package/dist/websocket/assets/vendor.js +12 -10
- package/dist/websocket/ember_debug.js +408 -538
- package/dist/websocket/index.html +2 -2
- package/ember-cli-build.js +3 -4
- package/ember_debug/adapters/basic.js +4 -4
- package/ember_debug/adapters/web-extension.js +9 -5
- package/ember_debug/general-debug.js +3 -1
- package/ember_debug/libs/capture-render-tree.js +7 -426
- package/ember_debug/libs/render-tree.js +210 -31
- package/ember_debug/libs/view-inspection.js +28 -0
- package/ember_debug/object-inspector.js +49 -88
- package/ember_debug/route-debug.js +2 -3
- package/ember_debug/utils/ember.js +16 -0
- package/ember_debug/utils/get-object-name.js +4 -0
- package/ember_debug/utils/name-functions.js +1 -1
- package/ember_debug/utils/type-check.js +82 -12
- package/ember_debug/utils/version.js +37 -0
- package/ember_debug/view-debug.js +1 -1
- package/lib/ui/addon/styles/_goto-source.scss +30 -0
- package/lib/ui/addon/styles/addon.scss +1 -0
- package/lib/ui/addon/styles/toolbar/_index.scss +4 -0
- package/package.json +1 -1
- package/public/assets/svg/code-source.svg +9 -0
- package/skeletons/web-extension/manifest.json +2 -2
- package/tests/acceptance/object-inspector-test.js +68 -0
- package/tests/ember_debug/view-debug-test.js +211 -69
- package/tests/index.html +1 -0
@@ -12,10 +12,13 @@ import EmberComponent from '@ember/component';
|
|
12
12
|
import EmberRoute from '@ember/routing/route';
|
13
13
|
import EmberObject from '@ember/object';
|
14
14
|
import Controller from '@ember/controller';
|
15
|
+
import didInsert from '@ember/render-modifiers/modifiers/did-insert';
|
15
16
|
import QUnit, { module, test } from 'qunit';
|
16
17
|
import { hbs } from 'ember-cli-htmlbars';
|
17
18
|
import EmberDebug from 'ember-debug/main';
|
18
19
|
import setupEmberDebugTest from '../helpers/setup-ember-debug-test';
|
20
|
+
import { isInVersionSpecifier } from 'ember-debug/utils/version';
|
21
|
+
import { VERSION } from 'ember-debug/utils/ember';
|
19
22
|
|
20
23
|
let templateOnlyComponent = null;
|
21
24
|
try {
|
@@ -265,6 +268,47 @@ function Component(
|
|
265
268
|
);
|
266
269
|
}
|
267
270
|
|
271
|
+
function Modifier(
|
272
|
+
{
|
273
|
+
name,
|
274
|
+
instance = Serialized(),
|
275
|
+
template = null,
|
276
|
+
bounds = 'single',
|
277
|
+
...options
|
278
|
+
},
|
279
|
+
...children
|
280
|
+
) {
|
281
|
+
return RenderNode(
|
282
|
+
{ name, instance, template, bounds, ...options, type: 'modifier' },
|
283
|
+
...children
|
284
|
+
);
|
285
|
+
}
|
286
|
+
|
287
|
+
function HtmlElement(
|
288
|
+
{
|
289
|
+
name,
|
290
|
+
instance = Serialized(),
|
291
|
+
args = Args(),
|
292
|
+
template = null,
|
293
|
+
bounds = 'single',
|
294
|
+
...options
|
295
|
+
},
|
296
|
+
...children
|
297
|
+
) {
|
298
|
+
return RenderNode(
|
299
|
+
{
|
300
|
+
name,
|
301
|
+
instance,
|
302
|
+
args,
|
303
|
+
template,
|
304
|
+
bounds,
|
305
|
+
...options,
|
306
|
+
type: 'html-element',
|
307
|
+
},
|
308
|
+
...children
|
309
|
+
);
|
310
|
+
}
|
311
|
+
|
268
312
|
function Route(
|
269
313
|
{
|
270
314
|
name,
|
@@ -430,6 +474,7 @@ module('Ember Debug - View', function (hooks) {
|
|
430
474
|
this.owner.register(
|
431
475
|
'controller:simple',
|
432
476
|
Controller.extend({
|
477
|
+
foo() {},
|
433
478
|
get elementTarget() {
|
434
479
|
return document.querySelector('#target');
|
435
480
|
},
|
@@ -501,7 +546,11 @@ module('Ember Debug - View', function (hooks) {
|
|
501
546
|
this.owner.register(
|
502
547
|
'template:simple',
|
503
548
|
hbs(
|
504
|
-
|
549
|
+
`
|
550
|
+
<div {{did-insert this.foo}}>
|
551
|
+
Simple {{test-foo}} {{test-bar value=(hash x=123 [x.y]=456)}} {{#in-element this.elementTarget}}<TestComponentInInElement />{{/in-element}}
|
552
|
+
</div>
|
553
|
+
`,
|
505
554
|
{
|
506
555
|
moduleName: 'my-app/templates/simple.hbs',
|
507
556
|
}
|
@@ -587,6 +636,8 @@ module('Ember Debug - View', function (hooks) {
|
|
587
636
|
{{/in-element}}
|
588
637
|
`)
|
589
638
|
);
|
639
|
+
|
640
|
+
this.owner.register('modifier:did-insert', didInsert);
|
590
641
|
});
|
591
642
|
|
592
643
|
test('Simple Inputs Tree', async function () {
|
@@ -596,6 +647,41 @@ module('Ember Debug - View', function (hooks) {
|
|
596
647
|
|
597
648
|
const inputChildren = [];
|
598
649
|
// https://github.com/emberjs/ember.js/commit/e6cf1766f8e02ddb24bf67833c148e7d7c93182f
|
650
|
+
const modifiers = [
|
651
|
+
Modifier({
|
652
|
+
name: 'on',
|
653
|
+
args: Args({ positionals: 2 }),
|
654
|
+
}),
|
655
|
+
Modifier({
|
656
|
+
name: 'on',
|
657
|
+
args: Args({ positionals: 2 }),
|
658
|
+
}),
|
659
|
+
Modifier({
|
660
|
+
name: 'on',
|
661
|
+
args: Args({ positionals: 2 }),
|
662
|
+
}),
|
663
|
+
Modifier({
|
664
|
+
name: 'on',
|
665
|
+
args: Args({ positionals: 2 }),
|
666
|
+
}),
|
667
|
+
Modifier({
|
668
|
+
name: 'on',
|
669
|
+
args: Args({ positionals: 2 }),
|
670
|
+
}),
|
671
|
+
];
|
672
|
+
if (hasEmberVersion(3, 28) && !hasEmberVersion(4, 0)) {
|
673
|
+
modifiers.push(
|
674
|
+
Modifier({
|
675
|
+
name: 'deprecated-event-handlers',
|
676
|
+
args: Args({ positionals: 1 }),
|
677
|
+
})
|
678
|
+
);
|
679
|
+
}
|
680
|
+
const enableModifierSupport = isInVersionSpecifier('>3.28.0', VERSION);
|
681
|
+
if (!enableModifierSupport) {
|
682
|
+
modifiers.length = 0;
|
683
|
+
}
|
684
|
+
|
599
685
|
if (!hasEmberVersion(3, 26)) {
|
600
686
|
inputChildren.push(
|
601
687
|
Component({
|
@@ -606,6 +692,19 @@ module('Ember Debug - View', function (hooks) {
|
|
606
692
|
);
|
607
693
|
}
|
608
694
|
|
695
|
+
if (enableModifierSupport) {
|
696
|
+
const htmlElement = HtmlElement(
|
697
|
+
{
|
698
|
+
name: 'input',
|
699
|
+
args: Args({ names: ['id', 'class', 'type'] }),
|
700
|
+
},
|
701
|
+
...modifiers
|
702
|
+
);
|
703
|
+
if (hasEmberVersion(3, 26)) {
|
704
|
+
inputChildren.push(htmlElement);
|
705
|
+
}
|
706
|
+
}
|
707
|
+
|
609
708
|
matchTree(tree, [
|
610
709
|
TopLevel(
|
611
710
|
Route(
|
@@ -634,55 +733,77 @@ module('Ember Debug - View', function (hooks) {
|
|
634
733
|
|
635
734
|
let argsTestPromise;
|
636
735
|
|
736
|
+
const enableModifierSupport = isInVersionSpecifier('>3.28.0', VERSION);
|
737
|
+
|
738
|
+
const children = [
|
739
|
+
Component({ name: 'test-foo', bounds: 'single' }),
|
740
|
+
Component({
|
741
|
+
name: 'test-bar',
|
742
|
+
bounds: 'range',
|
743
|
+
args: Args({ names: ['value'], positionals: 0 }),
|
744
|
+
instance: (actual) => {
|
745
|
+
async function testArgsValue() {
|
746
|
+
const value = await digDeeper(actual.id, 'args');
|
747
|
+
QUnit.assert.equal(
|
748
|
+
value.details[0].properties[0].value.inspect,
|
749
|
+
'{ x: 123, x.y: 456 }',
|
750
|
+
'test-bar args value inspect should be correct'
|
751
|
+
);
|
752
|
+
}
|
753
|
+
argsTestPromise = testArgsValue();
|
754
|
+
},
|
755
|
+
}),
|
756
|
+
Component(
|
757
|
+
{
|
758
|
+
name: 'in-element',
|
759
|
+
args: (actual) => {
|
760
|
+
QUnit.assert.ok(actual.positional[0]);
|
761
|
+
async function testArgsValue() {
|
762
|
+
const value = await inspectById(actual.positional[0].id);
|
763
|
+
QUnit.assert.equal(
|
764
|
+
value.details[1].name,
|
765
|
+
'HTMLDivElement',
|
766
|
+
'in-element args value inspect should be correct'
|
767
|
+
);
|
768
|
+
}
|
769
|
+
argsTestPromise = testArgsValue();
|
770
|
+
},
|
771
|
+
template: null,
|
772
|
+
},
|
773
|
+
Component({
|
774
|
+
name: 'test-component-in-in-element',
|
775
|
+
template: () => null,
|
776
|
+
})
|
777
|
+
),
|
778
|
+
];
|
779
|
+
|
780
|
+
const root = [];
|
781
|
+
|
782
|
+
if (enableModifierSupport) {
|
783
|
+
root.push(
|
784
|
+
...[
|
785
|
+
HtmlElement(
|
786
|
+
{
|
787
|
+
name: 'div',
|
788
|
+
},
|
789
|
+
Modifier({
|
790
|
+
name: 'did-insert',
|
791
|
+
args: Args({ positionals: 1 }),
|
792
|
+
}),
|
793
|
+
...children
|
794
|
+
),
|
795
|
+
]
|
796
|
+
);
|
797
|
+
} else {
|
798
|
+
root.push(...children);
|
799
|
+
}
|
800
|
+
|
637
801
|
matchTree(tree, [
|
638
802
|
TopLevel(
|
639
|
-
Route(
|
640
|
-
{ name: 'application' },
|
641
|
-
Route(
|
642
|
-
{ name: 'simple' },
|
643
|
-
Component({ name: 'test-foo', bounds: 'single' }),
|
644
|
-
Component({
|
645
|
-
name: 'test-bar',
|
646
|
-
bounds: 'range',
|
647
|
-
args: Args({ names: ['value'], positionals: 0 }),
|
648
|
-
instance: (actual) => {
|
649
|
-
async function testArgsValue() {
|
650
|
-
const value = await digDeeper(actual.id, 'args');
|
651
|
-
QUnit.assert.equal(
|
652
|
-
value.details[0].properties[0].value.inspect,
|
653
|
-
'{ x: 123, x.y: 456 }',
|
654
|
-
'value inspect should be correct'
|
655
|
-
);
|
656
|
-
}
|
657
|
-
argsTestPromise = testArgsValue();
|
658
|
-
},
|
659
|
-
}),
|
660
|
-
Component(
|
661
|
-
{
|
662
|
-
name: 'in-element',
|
663
|
-
args: (actual) => {
|
664
|
-
QUnit.assert.ok(actual.positional[0]);
|
665
|
-
async function testArgsValue() {
|
666
|
-
const value = await inspectById(actual.positional[0].id);
|
667
|
-
QUnit.assert.equal(
|
668
|
-
value.details[1].name,
|
669
|
-
'HTMLDivElement',
|
670
|
-
'in-element args value inspect should be correct'
|
671
|
-
);
|
672
|
-
}
|
673
|
-
argsTestPromise = testArgsValue();
|
674
|
-
},
|
675
|
-
template: null,
|
676
|
-
},
|
677
|
-
Component({
|
678
|
-
name: 'test-component-in-in-element',
|
679
|
-
template: () => null,
|
680
|
-
})
|
681
|
-
)
|
682
|
-
)
|
683
|
-
)
|
803
|
+
Route({ name: 'application' }, Route({ name: 'simple' }, ...root))
|
684
804
|
),
|
685
805
|
]);
|
806
|
+
|
686
807
|
QUnit.assert.ok(
|
687
808
|
argsTestPromise instanceof Promise,
|
688
809
|
'args should be tested'
|
@@ -716,31 +837,52 @@ module('Ember Debug - View', function (hooks) {
|
|
716
837
|
|
717
838
|
let tree = await getRenderTree();
|
718
839
|
|
840
|
+
const root = [];
|
841
|
+
|
842
|
+
const children = [
|
843
|
+
Component({ name: 'test-foo', bounds: 'single' }),
|
844
|
+
Component({
|
845
|
+
name: 'test-bar',
|
846
|
+
bounds: 'range',
|
847
|
+
args: Args({ names: ['value'], positionals: 0 }),
|
848
|
+
}),
|
849
|
+
Component(
|
850
|
+
{
|
851
|
+
name: 'in-element',
|
852
|
+
args: Args({ names: [], positionals: 1 }),
|
853
|
+
template: null,
|
854
|
+
},
|
855
|
+
Component({
|
856
|
+
name: 'test-component-in-in-element',
|
857
|
+
template: () => null,
|
858
|
+
})
|
859
|
+
),
|
860
|
+
];
|
861
|
+
|
862
|
+
const enableModifierSupport = isInVersionSpecifier('>3.28.0', VERSION);
|
863
|
+
|
864
|
+
if (enableModifierSupport) {
|
865
|
+
root.push(
|
866
|
+
...[
|
867
|
+
HtmlElement(
|
868
|
+
{
|
869
|
+
name: 'div',
|
870
|
+
},
|
871
|
+
Modifier({
|
872
|
+
name: 'did-insert',
|
873
|
+
args: Args({ positionals: 1 }),
|
874
|
+
}),
|
875
|
+
...children
|
876
|
+
),
|
877
|
+
]
|
878
|
+
);
|
879
|
+
} else {
|
880
|
+
root.push(...children);
|
881
|
+
}
|
882
|
+
|
719
883
|
matchTree(tree, [
|
720
884
|
TopLevel(
|
721
|
-
Route(
|
722
|
-
{ name: 'application' },
|
723
|
-
Route(
|
724
|
-
{ name: 'simple' },
|
725
|
-
Component({ name: 'test-foo', bounds: 'single' }),
|
726
|
-
Component({
|
727
|
-
name: 'test-bar',
|
728
|
-
bounds: 'range',
|
729
|
-
args: Args({ names: ['value'], positionals: 0 }),
|
730
|
-
}),
|
731
|
-
Component(
|
732
|
-
{
|
733
|
-
name: 'in-element',
|
734
|
-
args: Args({ names: [], positionals: 1 }),
|
735
|
-
template: null,
|
736
|
-
},
|
737
|
-
Component({
|
738
|
-
name: 'test-component-in-in-element',
|
739
|
-
template: () => null,
|
740
|
-
})
|
741
|
-
)
|
742
|
-
)
|
743
|
-
)
|
885
|
+
Route({ name: 'application' }, Route({ name: 'simple' }, ...root))
|
744
886
|
),
|
745
887
|
]);
|
746
888
|
});
|
package/tests/index.html
CHANGED
@@ -5,6 +5,7 @@
|
|
5
5
|
<title>EmberInspector Tests</title>
|
6
6
|
<meta name="description" content="">
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
8
|
+
<base href="../" />
|
8
9
|
<style>
|
9
10
|
/* Smoke and mirrors requires the container
|
10
11
|
to be visible all the time since rendering
|