Commit graph

296 commits

Author SHA1 Message Date
mgechev
f39fe31355 refactor(devtools): decrease refresh throttling to 100ms 2020-04-01 13:23:08 -07:00
mgechev
6a87b79190 fix(devtools): reset the timeline component when discarding a recording
This way we don't preserve the selected `ProfilerFrame` across recordings.
2020-03-31 19:59:12 -07:00
mgechev
29b9021113 perf(devtools): use WeakMap to reduce memory usage when memoizing 2020-03-31 22:32:26 -04:00
mgechev
dc2c0ba0c3 refactor(devtools): drop the dummy method in BarGraphFormatter 2020-03-31 18:31:27 -04:00
mgechev
f848ef8d1b feat(devtools): add functionality for visualizing change detection 2020-03-31 18:31:27 -04:00
mgechev
b3b0879053 perf(devtools): don't reformat the same record multiple times
Use memoization with the memo-decorator.
2020-03-31 18:31:27 -04:00
mgechev
691e495b6b feat(devtools): add duration field to the ProfilerFrame
This way we open the door for further optimizations and make it possible to introduce customization of the output of the formatters per component-level.
2020-03-31 18:31:27 -04:00
mgechev
54c14c251a feat(devtools): optionally show change detection duration only when run 2020-03-31 18:31:27 -04:00
Sumit Arora
4320221815 feat(devtools): adding parent hierarchy list view 2020-03-31 13:12:51 -07:00
Sumit Arora
c6fd1895c5 feat(devtools): adding parent hierarchy to bar graph formater 2020-03-31 13:12:51 -07:00
Sumit Arora
2b3acd6a06 feat(devtools): adding bar graph details section 2020-03-31 13:12:51 -07:00
AleksanderBodurri
f5cad86902 fix(devtools): fix ExpressionChangedAfterItHasBeenCheckedError by manually triggering change detection when parents are set in directive explorer 2020-03-31 12:50:04 -07:00
AleksanderBodurri
249d4cf237 fix(devtools): add back css that removed after a rebase 2020-03-31 12:50:04 -07:00
AleksanderBodurri
879ce4562e refactor(devtools): remove broken copy to clipboard feature 2020-03-31 09:47:59 -07:00
mgechev
85e01af432 fix(devtools): layout when visualizing the profiling data 2020-03-31 12:20:12 -04:00
mgechev
016a1e54d7 feat(devtools): add top-level element to allow zoom out with multi roots 2020-03-31 12:20:12 -04:00
mgechev
b39d6540ac build(devtools): update ngx-flamegraph to 0.0.6 2020-03-31 12:20:12 -04:00
AleksanderBodurri
e332d5ded1 refactor(devtools): remove unnecessary logic from property editor 2020-03-31 08:38:38 -07:00
AleksanderBodurri
1320c8d36f refactor(devtools): rename tree graph to tree map 2020-03-31 07:39:15 -07:00
AleksanderBodurri
f4e404c8ce refactor(devtools): remove scrollIntoView ponyfill 2020-03-30 13:23:44 -07:00
AleksanderBodurri
e60d9fb23a refactor(devtools): lift breadcrumbs up a level on the component tree to avoid using fixed positioning css 2020-03-30 13:23:44 -07:00
AleksanderBodurri
7d89324441 refactor(devtools): remove unused import 2020-03-30 12:36:55 -07:00
AleksanderBodurri
e1691b2ab5 fix(devtools): prevent default behaviour before calculating new scroll position to fix bug when traversing directive forest with arrow keys (rangle/angular-devtools#213) 2020-03-30 12:35:47 -07:00
AleksanderBodurri
be7a0c25cb feat(devtools): set showNode option to show most nodes in the treegraph (rangle/angular-devtools#219) 2020-03-30 12:35:21 -07:00
AleksanderBodurri
43df052e5c refactor(devtools): remove unused ng debug objects 2020-03-30 12:34:03 -07:00
mgechev
20398cfa52 perf(devtools): faster bar chart formatting
The array allocation in `addSpaces` was talking a lot of time. We were also recomputing same result very frequently.
2020-03-30 12:33:03 -07:00
mgechev
1cce9117a0 refactor(devtools): use single color in the bar chart
Lots of folks are confused by the multiple colors which don't have meaning at the moment.
2020-03-30 15:22:10 -04:00
AleksanderBodurri
957034bf93 feat(devtools): migrate devtools and demo app to scss for styling 2020-03-29 13:49:19 -07:00
AleksanderBodurri
5b0ca27360 refactor(devtools): move all profiler files to be under devtool-tabs where the initial profiler component is rendered 2020-03-28 12:56:05 -07:00
Sumit Arora
53da6bb0a8 feat(devtools): updating record formatter to get directive values 2020-03-27 21:23:05 -07:00
Sumit Arora
b4dc6f7bea feat(devtools): updating bargraph formatter 2020-03-27 21:23:05 -07:00
Sumit Arora
2bfb96d5bb feat(devtools): setting bar graph as default option 2020-03-27 21:23:05 -07:00
Sumit Arora
b3a948eca3 feat(devtools): renaming timeline graph options 2020-03-27 21:23:05 -07:00
Sumit Arora
637c6de204 feat(devtools): adding bargraph visualization to timeline 2020-03-27 21:23:05 -07:00
Sumit Arora
2b48785931 feat(devtools): adding bargraph visualizer 2020-03-27 21:23:05 -07:00
Sumit Arora
556997abab feat(devtools): adding bargraph formatter 2020-03-27 21:23:05 -07:00
AleksanderBodurri
97f88712e6 fix(devtools): drag and drop when selecting input; fix: console warning on update state error (rangle/angular-devtools#205)
* fix: console warn correct variable on update state failure

* fix: prevent drag from occuring on property edit inputs
2020-03-27 15:59:03 -07:00
AleksanderBodurri
fcfc9ebdc1 fix(devtools): webtree sizing (rangle/angular-devtools#203) 2020-03-27 15:57:10 -07:00
AleksanderBodurri
158ffd5875 refactor(devtools): use parents state in directive forest to optimize the expandParents method called when searching the directive forest (rangle/angular-devtools#197) 2020-03-26 19:12:34 -07:00
mgechev
701b8b0431 test(devtools): fix an issue and introduce tests for the priority aware message bus 2020-03-23 21:24:27 -07:00
mgechev
ae6acce53e fix(devtools): highlighting of newly added nodes
This PR also simplifies the imperative ordering of async methods. It moves the logic into a generic abstraction `PriorityAwareMessageBus`.
2020-03-23 21:24:27 -07:00
AleksanderBodurri
74eb888efe feat(devtools): create ConsoleReferenceNode interface to fix typing issues in selected-component.ts 2020-03-23 17:41:52 -07:00
AleksanderBodurri
8b9181724b feat(devtools): only show console reference for the currently selected element to reduce noise 2020-03-23 17:41:52 -07:00
AleksanderBodurri
4df2b2b91e refactor(devtools): type node properly; simplify logic in select-component.ts 2020-03-23 17:41:52 -07:00
AleksanderBodurri
a8ba83cd30 fix(devtools): fix tests and leave todo related to possible typing refactor 2020-03-23 17:41:52 -07:00
AleksanderBodurri
60a4e56a95 feat(devtools): apply style to console reference keys displayed on nodes 2020-03-23 17:41:52 -07:00
AleksanderBodurri
a25cd0ed15 feat(devtools): show the console reference key on each selected element 2020-03-23 17:41:52 -07:00
AleksanderBodurri
4120c551e8 fix(devtools): catch selection edge cases for selecting the same node and selecting a node already in the array 2020-03-23 17:41:52 -07:00
AleksanderBodurri
1d55622f3a feat(devtools): implement component selection functionality for $ng0 - $ng4 similarly to how chrome devtools does with html elements 2020-03-23 17:41:52 -07:00
AleksanderBodurri
0b5e892d84 build(devtools): enable no-unused-variable lint check with warning severity 2020-03-23 17:41:10 -07:00
AleksanderBodurri
a6148608c3 feat(devtools): open expansion panels by default; apply styling to expansion header 2020-03-22 19:59:30 -07:00
AleksanderBodurri
11c1cb01f7 refactor(devtools): replace label arrays with sets because Set.has is much faster than Array.includes 2020-03-22 19:59:30 -07:00
AleksanderBodurri
789c872ada refactor(devtools): type propPointer and drag event properly 2020-03-22 19:59:30 -07:00
AleksanderBodurri
95dcad328f refactor(devtools): clean up directive property resolver methods 2020-03-22 19:59:30 -07:00
AleksanderBodurri
820ec85ea4 fix(devtools): pass property updates to the correct data sources 2020-03-22 19:59:30 -07:00
AleksanderBodurri
3a6b5b0bd9 refactor(devtools): remove old unused methods from property tab body, client event subscribers, and directive property resolver 2020-03-22 19:59:30 -07:00
AleksanderBodurri
d0a1773175 feat(devtools): implement material expansion panel with drag functionality for each property tree 2020-03-22 19:59:30 -07:00
AleksanderBodurri
6d0c4093c2 feat(devtools): pass each datasource through to it's own material tree component 2020-03-22 19:59:30 -07:00
AleksanderBodurri
2d34a209a6 feat(devtools): create seperate property data sources for inputs/outputs/state 2020-03-22 19:59:30 -07:00
AleksanderBodurri
8ea84d5776 feat(devtools): implement input/output/state preview functionality with the reworked property explorer 2020-03-22 19:59:30 -07:00
AleksanderBodurri
39b65dd05a refactor(devtools): organize property explorer components 2020-03-22 19:59:30 -07:00
AleksanderBodurri
f8bb080157 feat(devtools): pass input/output data through from application to devtools UI 2020-03-22 19:59:30 -07:00
Sumit Arora
3d19ebf3a1 fix(devtools): added more padding to treegraph 2020-03-22 12:14:05 -04:00
mgechev
4b40752cb9 refactor(devtools): type safe serialization 2020-03-22 03:59:27 -04:00
mgechev
b127cdc211 fix(devtools): prevent race condition between getting nested props and refresh 2020-03-21 19:09:12 -07:00
mgechev
b010784b21 fix(devtools): do not expand HTML Comments and preserve state for selected nodes 2020-03-21 19:09:12 -07:00
mgechev
5f5307e610 fix(devtools): flicker properties when update selected node
Fix rangle/angular-devtools#171

The PR includes few changes:
1. Fixes a race condition between two competing async calls
2. Simplifies the message bus, now we have one method for getting the component tree instead of one for getting the component tree and another for getting properties. Similarly to GraphQL we send a query for exactly what we need.
3. Fixes the way we update properties in the UI once we receive new items
2020-03-21 19:09:12 -07:00
Sumit Arora
ee7d8e58c6 feat(devtools): making small frames clickable 2020-03-21 18:53:56 -07:00
mgechev
60cc2d8fc0 fix(devtools): proper typings in shell-chrome for strictNullChecks 2020-03-20 16:05:53 -07:00
Minko Gechev
6a6059d2b1 build(devtools): enable strictNullChecks (rangle/angular-devtools#167) 2020-03-20 11:54:37 -07:00
Sumit Arora
75cb030a84 feat(devtools): adding bar chart for timeline 2020-03-19 19:15:07 -07:00
mgechev
14e51e8875 test(devtools): verify that the app can select elements with the same name 2020-03-19 21:17:26 -04:00
mgechev
f4db6d7a44 test(devtools): add specs for the element property resolver 2020-03-19 21:17:26 -04:00
mgechev
b3b8c93656 test(devtools): fix typing errors in the specs 2020-03-19 21:17:26 -04:00
mgechev
f93b53bb89 fix(devtools): proper alignment of non-expandable props 2020-03-19 21:17:26 -04:00
mgechev
dce46e5411 refactor(devtools): move abstractions to separate files 2020-03-19 21:17:26 -04:00
mgechev
370a600481 refactor(devtools): use shared store between parent and child components 2020-03-19 21:17:26 -04:00
mgechev
2f115a2448 refactor(devtools): use DI for the messageBus instead of passing it as props 2020-03-19 21:17:26 -04:00
mgechev
25a6ecc438 refactor(devtools): reuse prop instances in the data source 2020-03-19 21:17:26 -04:00
mgechev
2a1f6e9464 fix(devtools): do not refresh the ui unless there are updates 2020-03-19 21:17:26 -04:00
Sumit Arora
0b991bdc0f feat(devtools): adding piechart for profiler 2020-03-18 15:41:56 -04:00
Sumit Arora
7990fdd7b3 style(devtools): adding control padding and bold title 2020-03-18 15:18:50 -04:00
Sumit Arora
257e231f68 style(devtools): fixing title style 2020-03-18 15:18:50 -04:00
Sumit Arora
7c93631b32 style(devtools): setting total time text to bold 2020-03-18 15:18:50 -04:00
AleksanderBodurri
e74e213b7c refactor(devtools): clean up record formatter constants by removing duplicate objects 2020-03-18 09:31:25 -04:00
AleksanderBodurri
a5beefb477 feat(devtools): rerender tree on resize to keep tree within view 2020-03-18 09:31:25 -04:00
AleksanderBodurri
ae478f0e29 test(devtools): create simple unit test for webtreegraph formatter 2020-03-18 09:31:25 -04:00
AleksanderBodurri
45de7613e4 refactor(devtools): create mock formatter to sepearte getLabel and getValue tests from flamegraph; 2020-03-18 09:31:25 -04:00
AleksanderBodurri
18214a9b99 feat(devtools): create webtree graph formatter and pass the formatted data through to the web tree graph visualizer 2020-03-18 09:31:25 -04:00
AleksanderBodurri
0140dc2c8b refactor(devtools): create formatter interface; move flamegraph formatting logic to class that implements interface 2020-03-18 09:31:25 -04:00
AleksanderBodurri
e86ffc1d86 test(devtools): write tests for record formatter 2020-03-18 09:31:25 -04:00
AleksanderBodurri
816974654c refactor(devtools): organize file structure of profiler components 2020-03-18 09:31:25 -04:00
AleksanderBodurri
e7db0d3f78 feat(devtools): split apart visualizing views; create new components for each visualizer component 2020-03-18 09:31:25 -04:00
mgechev
e74dc9e70d fix(devtools): make sure we dont access position of an undefined parent 2020-03-17 21:04:11 -04:00
mgechev
657c74151f fix(devtools): dont leak flat and indexed nodes 2020-03-16 23:04:19 -04:00
mgechev
48c140038b fix(devtools): refresh & reinitialize on navigation 2020-03-13 18:49:46 -07:00
AleksanderBodurri
059da5d908 feat(devtools): implement reload message bus event that calls window.location.reload inside of the dev tools 2020-03-12 15:54:47 -07:00
AleksanderBodurri
1871c34743 fix(devtools): get ng debug object whenever it is required through a function to prevent an issue where it would be set to undefined on page refresh 2020-03-12 15:54:47 -07:00
AleksanderBodurri
a4b748de75 fix(devtools): properly emit shutdown event on cleanup and call change detector ref to update ui into loading state 2020-03-12 15:54:47 -07:00
mgechev
07344cd4b3 feat(devtools): implement "force refresh" when the user presses the refresh button 2020-03-12 15:13:34 -07:00