feat(ivy): improve debugging experience for styles/classes (#32753)

This patch introduces the `printTable()` and `printSources()`
methods to `DebugStylingContext` which can be used via the
`window.ng.getDebugNode` helpers when debugging an application.

PR Close #32753
This commit is contained in:
Matias Niemelä
2019-09-18 11:18:37 -07:00
committed by Andrew Kushnir
parent f8f7c1540a
commit 32f4544f34
5 changed files with 160 additions and 23 deletions

View File

@ -12,7 +12,7 @@ import {DEFAULT_GUARD_MASK_VALUE, allocTStylingContext} from '../../../src/rende
describe('styling context', () => {
it('should register a series of entries into the context', () => {
const debug = makeContextWithDebug();
const debug = makeContextWithDebug(false);
const context = debug.context;
expect(debug.entries).toEqual({});
@ -52,7 +52,7 @@ describe('styling context', () => {
});
it('should only register the same binding index once per property', () => {
const debug = makeContextWithDebug();
const debug = makeContextWithDebug(false);
const context = debug.context;
expect(debug.entries).toEqual({});
@ -70,7 +70,7 @@ describe('styling context', () => {
});
it('should overwrite a default value for an entry only if it is non-null', () => {
const debug = makeContextWithDebug();
const debug = makeContextWithDebug(false);
const context = debug.context;
registerBinding(context, 1, 0, 'width', null);
@ -109,9 +109,9 @@ describe('styling context', () => {
});
});
function makeContextWithDebug() {
function makeContextWithDebug(isClassBased: boolean) {
const ctx = allocTStylingContext();
return attachStylingDebugObject(ctx);
return attachStylingDebugObject(ctx, isClassBased);
}
function buildGuardMask(...bindingIndices: number[]) {

View File

@ -13,10 +13,10 @@ describe('styling debugging tools', () => {
describe('NodeStylingDebug', () => {
it('should list out each of the values in the context paired together with the provided data',
() => {
const debug = makeContextWithDebug();
const debug = makeContextWithDebug(false);
const context = debug.context;
const data: any[] = [];
const d = new NodeStylingDebug(context, data);
const d = new NodeStylingDebug(context, data, false);
registerBinding(context, 0, 0, 'width', null);
expect(d.summary).toEqual({
@ -63,7 +63,7 @@ describe('styling debugging tools', () => {
});
});
function makeContextWithDebug() {
function makeContextWithDebug(isClassBased: boolean) {
const ctx = allocTStylingContext();
return attachStylingDebugObject(ctx);
return attachStylingDebugObject(ctx, isClassBased);
}