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

This reverts commit 32f4544f34.

PR Close #32841

packages/core/src/render3/instructions/lview_debug.ts

@@ -20,7 +20,7 @@ import {TQueries} from '../interfaces/query';
 import {RComment, RElement, RNode} from '../interfaces/renderer';
 import {TStylingContext} from '../interfaces/styling';
 import {BINDING_INDEX, CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DECLARATION_VIEW, ExpandoInstructions, FLAGS, HEADER_OFFSET, HOST, HookData, INJECTOR, LView, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, RENDERER_FACTORY, SANITIZER, TData, TVIEW, TView as ITView, TView, T_HOST} from '../interfaces/view';
-import {DebugNodeStyling, NodeStylingDebug} from '../styling/styling_debug';
+import {DebugStyling as DebugNewStyling, NodeStylingDebug} from '../styling/styling_debug';
 import {attachDebugObject} from '../util/debug_utils';
 import {isStylingContext} from '../util/styling_utils';
 import {getTNode, unwrapRNode} from '../util/view_utils';
@@ -341,8 +341,8 @@ export class LViewDebug {
 export interface DebugNode {
   html: string|null;
   native: Node;
-  styles: DebugNodeStyling|null;
+  styles: DebugNewStyling|null;
-  classes: DebugNodeStyling|null;
+  classes: DebugNewStyling|null;
   nodes: DebugNode[]|null;
   component: LViewDebug|null;
 }
@@ -372,7 +372,7 @@ export function buildDebugNode(tNode: TNode, lView: LView, nodeIndex: number): D
   const native = unwrapRNode(rawValue);
   const componentLViewDebug = toDebug(readLViewValue(rawValue));
   const styles = isStylingContext(tNode.styles) ?
-      new NodeStylingDebug(tNode.styles as any as TStylingContext, lView, false) :
+      new NodeStylingDebug(tNode.styles as any as TStylingContext, lView) :
       null;
   const classes = isStylingContext(tNode.classes) ?
       new NodeStylingDebug(tNode.classes as any as TStylingContext, lView, true) :

packages/core/src/render3/instructions/styling.ts

@@ -498,7 +498,7 @@ function getContext(tNode: TNode, isClassBased: boolean): TStylingContext {
   if (!isStylingContext(context)) {
     context = allocTStylingContext(context as StylingMapArray | null);
     if (ngDevMode) {
-      attachStylingDebugObject(context as TStylingContext, isClassBased);
+      attachStylingDebugObject(context as TStylingContext);
     }
     if (isClassBased) {
       tNode.classes = context;

packages/core/src/render3/styling/styling_debug.ts

@@ -10,7 +10,7 @@ import {RElement} from '../interfaces/renderer';
 import {ApplyStylingFn, LStylingData, TStylingConfig, TStylingContext, TStylingContextIndex} from '../interfaces/styling';
 import {getCurrentStyleSanitizer} from '../state';
 import {attachDebugObject} from '../util/debug_utils';
-import {MAP_BASED_ENTRY_PROP_NAME, TEMPLATE_DIRECTIVE_INDEX, allowDirectStyling as _allowDirectStyling, getBindingValue, getDefaultValue, getGuardMask, getProp, getPropValuesStartPosition, getValuesCount, hasConfig, isContextLocked, isSanitizationRequired, isStylingContext} from '../util/styling_utils';
+import {allowDirectStyling as _allowDirectStyling, getDefaultValue, getGuardMask, getProp, getPropValuesStartPosition, getValuesCount, hasConfig, isContextLocked, isSanitizationRequired, isStylingContext} from '../util/styling_utils';
 
 import {applyStylingViaContext} from './bindings';
 import {activateStylingMapFeature} from './map_based_bindings';
@@ -41,12 +41,6 @@ export interface DebugStylingContext {
 
   /** The associated TStylingContext instance */
   entries: {[prop: string]: DebugStylingContextEntry};
-
-  /** A status report of all the sources within the context */
-  printSources(): void;
-
-  /** A status report of all the entire context as a table */
-  printTable(): void;
 }
 
 
@@ -69,10 +63,10 @@ export interface DebugStylingConfig {
  * A debug/testing-oriented summary of all styling entries within a `TStylingContext`.
  */
 export interface DebugStylingContextEntry {
-  /** The property (style or class property) that this entry represents */
+  /** The property (style or class property) that this tuple represents */
   prop: string;
 
-  /** The total amount of styling entries a part of this entry */
+  /** The total amount of styling entries a part of this tuple */
   valuesCount: number;
 
   /**
@@ -151,8 +145,8 @@ export interface DebugNodeStylingEntry {
 /**
  * Instantiates and attaches an instance of `TStylingContextDebug` to the provided context
  */
-export function attachStylingDebugObject(context: TStylingContext, isClassBased: boolean) {
+export function attachStylingDebugObject(context: TStylingContext) {
-  const debug = new TStylingContextDebug(context, isClassBased);
+  const debug = new TStylingContextDebug(context);
   attachDebugObject(context, debug);
   return debug;
 }
@@ -164,14 +158,14 @@ export function attachStylingDebugObject(context: TStylingContext, isClassBased:
  * application has `ngDevMode` activated.
  */
 class TStylingContextDebug implements DebugStylingContext {
-  constructor(public readonly context: TStylingContext, private _isClassBased: boolean) {}
+  constructor(public readonly context: TStylingContext) {}
 
   get config(): DebugStylingConfig { return buildConfig(this.context); }
 
   /**
    * Returns a detailed summary of each styling entry in the context.
    *
-   * See `DebugStylingContextEntry`.
+   * See `TStylingTupleSummary`.
    */
   get entries(): {[prop: string]: DebugStylingContextEntry} {
     const context = this.context;
@@ -208,137 +202,6 @@ class TStylingContextDebug implements DebugStylingContext {
     }
     return entries;
   }
-
-  /**
-   * Prints a detailed summary of each styling source grouped together with each binding index in
-   * the context.
-   */
-  printSources(): void {
-    let output = '\n';
-
-    const context = this.context;
-    const prefix = this._isClassBased ? 'class' : 'style';
-    const bindingsBySource: {
-      type: string,
-      entries: {binding: string, bindingIndex: number, value: any, bitMask: number}[]
-    }[] = [];
-
-    const totalColumns = getValuesCount(context);
-    const itemsPerRow = TStylingContextIndex.BindingsStartOffset + totalColumns;
-
-    for (let i = 0; i < totalColumns; i++) {
-      const isDefaultColumn = i === totalColumns - 1;
-      const hostBindingsMode = i !== TEMPLATE_DIRECTIVE_INDEX;
-      const type = getTypeFromColumn(i, totalColumns);
-      const entries: {binding: string, value: any, bindingIndex: number, bitMask: number}[] = [];
-
-      let j = TStylingContextIndex.ValuesStartPosition;
-      while (j < context.length) {
-        const value = getBindingValue(context, j, i);
-        if (isDefaultColumn || value > 0) {
-          const bitMask = getGuardMask(context, j, hostBindingsMode);
-          const bindingIndex = isDefaultColumn ? -1 : value as number;
-          const prop = getProp(context, j);
-          const isMapBased = prop === MAP_BASED_ENTRY_PROP_NAME;
-          const binding = `${prefix}${isMapBased ? '' : '.' + prop}`;
-          entries.push({binding, value, bindingIndex, bitMask});
-        }
-        j += itemsPerRow;
-      }
-
-      bindingsBySource.push(
-          {type, entries: entries.sort((a, b) => a.bindingIndex - b.bindingIndex)});
-    }
-
-    bindingsBySource.forEach(entry => {
-      output += `[${entry.type.toUpperCase()}]\n`;
-      output += repeat('-', entry.type.length + 2) + '\n';
-
-      let tab = '  ';
-      entry.entries.forEach(entry => {
-        const isDefault = typeof entry.value !== 'number';
-        const value = entry.value;
-        if (!isDefault || value !== null) {
-          output += `${tab}[${entry.binding}] = \`${value}\``;
-          output += '\n';
-        }
-      });
-      output += '\n';
-    });
-
-    /* tslint:disable */
-    console.log(output);
-  }
-
-  /**
-   * Prints a detailed table of the entire styling context.
-   */
-  printTable(): void {
-    // IE (not Edge) is the only browser that doesn't support this feature. Because
-    // these debugging tools are not apart of the core of Angular (they are just
-    // extra tools) we can skip-out on older browsers.
-    if (!console.table) {
-      throw new Error('This feature is not supported in your browser');
-    }
-
-    const context = this.context;
-    const table: any[] = [];
-    const totalColumns = getValuesCount(context);
-    const itemsPerRow = TStylingContextIndex.BindingsStartOffset + totalColumns;
-    const totalProps = Math.floor(context.length / itemsPerRow);
-
-    let i = TStylingContextIndex.ValuesStartPosition;
-    while (i < context.length) {
-      const prop = getProp(context, i);
-      const isMapBased = prop === MAP_BASED_ENTRY_PROP_NAME;
-      const entry: {[key: string]: any} = {
-        prop,
-        'tpl mask': generateBitString(getGuardMask(context, i, false), isMapBased, totalProps),
-        'host mask': generateBitString(getGuardMask(context, i, true), isMapBased, totalProps),
-      };
-
-      for (let j = 0; j < totalColumns; j++) {
-        const key = getTypeFromColumn(j, totalColumns);
-        const value = getBindingValue(context, i, j);
-        entry[key] = value;
-      }
-
-      i += itemsPerRow;
-      table.push(entry);
-    }
-
-    /* tslint:disable */
-    console.table(table);
-  }
-}
-
-function generateBitString(value: number, isMapBased: boolean, totalProps: number) {
-  if (isMapBased || value > 1) {
-    return `0b${leftPad(value.toString(2), totalProps, '0')}`;
-  }
-  return null;
-}
-
-function leftPad(value: string, max: number, pad: string) {
-  return repeat(pad, max - value.length) + value;
-}
-
-function getTypeFromColumn(index: number, totalColumns: number) {
-  if (index === TEMPLATE_DIRECTIVE_INDEX) {
-    return 'template';
-  } else if (index === totalColumns - 1) {
-    return 'defaults';
-  } else {
-    return `dir #${index}`;
-  }
-}
-
-function repeat(c: string, times: number) {
-  let s = '';
-  for (let i = 0; i < times; i++) {
-    s += c;
-  }
-  return s;
 }
 
 /**
@@ -353,9 +216,9 @@ export class NodeStylingDebug implements DebugNodeStyling {
 
   constructor(
       context: TStylingContext|DebugStylingContext, private _data: LStylingData,
-      private _isClassBased: boolean) {
+      private _isClassBased?: boolean) {
     this._debugContext = isStylingContext(context) ?
-        new TStylingContextDebug(context as TStylingContext, _isClassBased) :
+        new TStylingContextDebug(context as TStylingContext) :
         (context as DebugStylingContext);
   }
 

packages/core/test/render3/styling_next/styling_context_spec.ts

@@ -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(false);
+    const debug = makeContextWithDebug();
     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(false);
+    const debug = makeContextWithDebug();
     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(false);
+    const debug = makeContextWithDebug();
     const context = debug.context;
 
     registerBinding(context, 1, 0, 'width', null);
@@ -109,9 +109,9 @@ describe('styling context', () => {
   });
 });
 
-function makeContextWithDebug(isClassBased: boolean) {
+function makeContextWithDebug() {
   const ctx = allocTStylingContext();
-  return attachStylingDebugObject(ctx, isClassBased);
+  return attachStylingDebugObject(ctx);
 }
 
 function buildGuardMask(...bindingIndices: number[]) {

packages/core/test/render3/styling_next/styling_debug_spec.ts

@@ -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(false);
+         const debug = makeContextWithDebug();
          const context = debug.context;
          const data: any[] = [];
-         const d = new NodeStylingDebug(context, data, false);
+         const d = new NodeStylingDebug(context, data);
 
          registerBinding(context, 0, 0, 'width', null);
          expect(d.summary).toEqual({
@@ -63,7 +63,7 @@ describe('styling debugging tools', () => {
   });
 });
 
-function makeContextWithDebug(isClassBased: boolean) {
+function makeContextWithDebug() {
   const ctx = allocTStylingContext();
-  return attachStylingDebugObject(ctx, isClassBased);
+  return attachStylingDebugObject(ctx);
 }