fix(ivy): Implement remaining methods for DebugNode (angular#27387)

PR Close angular#27387

Author: mhevery

packages/core/src/core_render3_private_export.ts

@@ -154,7 +154,7 @@ export {
 } from './sanitization/bypass';
 
 export {
-  getContext as ɵgetContext
+  getLContext as ɵgetLContext
 } from './render3/context_discovery';
 
 export {

packages/core/src/debug/debug_node.ts

@@ -7,11 +7,13 @@
  */
 
 import {Injector} from '../di';
-import {DirectiveDef} from '../render3';
 import {assertDomNode} from '../render3/assert';
-import {getComponent, getInjector, getLocalRefs, loadContext} from '../render3/discovery_utils';
-import {TNode, TNodeFlags} from '../render3/interfaces/node';
+import {getComponent, getContext, getInjectionTokens, getInjector, getListeners, getLocalRefs, isBrowserEvents, loadLContext, loadLContextFromNode} from '../render3/discovery_utils';
+import {TNode} from '../render3/interfaces/node';
+import {StylingIndex} from '../render3/interfaces/styling';
 import {TVIEW} from '../render3/interfaces/view';
+import {getProp, getValue, isClassBased} from '../render3/styling/class_and_style_bindings';
+import {getStylingContext} from '../render3/styling/util';
 import {DebugContext} from '../view/index';
 
 export class EventListener {
@@ -204,54 +206,25 @@ class DebugNode__POST_R3__ implements DebugNode {
   constructor(nativeNode: Node) { this.nativeNode = nativeNode; }
 
   get parent(): DebugElement|null {
-    const parent = this.nativeNode.parentNode as HTMLElement;
+    const parent = this.nativeNode.parentNode as Element;
     return parent ? new DebugElement__POST_R3__(parent) : null;
   }
 
   get injector(): Injector { return getInjector(this.nativeNode); }
 
   get componentInstance(): any {
     const nativeElement = this.nativeNode;
-    return nativeElement && getComponent(nativeElement as HTMLElement);
-  }
-  get context(): any {
-    // https://angular-team.atlassian.net/browse/FW-719
-    throw notImplemented();
+    return nativeElement && getComponent(nativeElement as Element);
   }
+  get context(): any { return getContext(this.nativeNode as Element); }
 
   get listeners(): EventListener[] {
-    // TODO: add real implementation;
-    // https://angular-team.atlassian.net/browse/FW-719
-    return [];
+    return getListeners(this.nativeNode as Element).filter(isBrowserEvents);
   }
 
   get references(): {[key: string]: any;} { return getLocalRefs(this.nativeNode); }
 
-  get providerTokens(): any[] {
-    // TODO move to discoverable utils
-    const context = loadContext(this.nativeNode as HTMLElement, false) !;
-    if (!context) return [];
-    const lView = context.lView;
-    const tView = lView[TVIEW];
-    const tNode = tView.data[context.nodeIndex] as TNode;
-    const providerTokens: any[] = [];
-    const nodeFlags = tNode.flags;
-    const startIndex = nodeFlags >> TNodeFlags.DirectiveStartingIndexShift;
-    const directiveCount = nodeFlags & TNodeFlags.DirectiveCountMask;
-    const endIndex = startIndex + directiveCount;
-    for (let i = startIndex; i < endIndex; i++) {
-      let value = tView.data[i];
-      if (isDirectiveDefHack(value)) {
-        // The fact that we sometimes store Type and sometimes DirectiveDef in this location is a
-        // design flaw.  We should always store same type so that we can be monomorphic. The issue
-        // is that for Components/Directives we store the def instead the type. The correct behavior
-        // is that we should always be storing injectable type in this location.
-        value = value.type;
-      }
-      providerTokens.push(value);
-    }
-    return providerTokens;
-  }
+  get providerTokens(): any[] { return getInjectionTokens(this.nativeNode as Element); }
 }
 
 class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugElement {
@@ -264,10 +237,10 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
     return this.nativeNode.nodeType == Node.ELEMENT_NODE ? this.nativeNode as Element : null;
   }
 
-  get name(): string { return (this.nativeElement as HTMLElement).nodeName; }
+  get name(): string { return this.nativeElement !.nodeName; }
 
   get properties(): {[key: string]: any;} {
-    const context = loadContext(this.nativeNode) !;
+    const context = loadLContext(this.nativeNode) !;
     const lView = context.lView;
     const tView = lView[TVIEW];
     const tNode = tView.data[context.nodeIndex] as TNode;
@@ -278,18 +251,77 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
   }
 
   get attributes(): {[key: string]: string | null;} {
-    // https://angular-team.atlassian.net/browse/FW-719
-    throw notImplemented();
+    const attributes: {[key: string]: string | null;} = {};
+    const element = this.nativeElement;
+    if (element) {
+      const eAttrs = element.attributes;
+      for (let i = 0; i < eAttrs.length; i++) {
+        const attr = eAttrs[i];
+        attributes[attr.name] = attr.value;
+      }
+    }
+    return attributes;
   }
 
   get classes(): {[key: string]: boolean;} {
-    // https://angular-team.atlassian.net/browse/FW-719
-    throw notImplemented();
+    const classes: {[key: string]: boolean;} = {};
+    const element = this.nativeElement;
+    if (element) {
+      const lContext = loadLContextFromNode(element);
+      const lNode = lContext.lView[lContext.nodeIndex];
+      const stylingContext = getStylingContext(lContext.nodeIndex, lContext.lView);
+      if (stylingContext) {
+        for (let i = StylingIndex.SingleStylesStartPosition; i < lNode.length;
+             i += StylingIndex.Size) {
+          if (isClassBased(lNode, i)) {
+            const className = getProp(lNode, i);
+            const value = getValue(lNode, i);
+            if (typeof value == 'boolean') {
+              // we want to ignore `null` since those don't overwrite the values.
+              classes[className] = value;
+            }
+          }
+        }
+      } else {
+        // Fallback, just read DOM.
+        const eClasses = element.classList;
+        for (let i = 0; i < eClasses.length; i++) {
+          classes[eClasses[i]] = true;
+        }
+      }
+    }
+    return classes;
   }
 
   get styles(): {[key: string]: string | null;} {
-    // https://angular-team.atlassian.net/browse/FW-719
-    throw notImplemented();
+    const styles: {[key: string]: string | null;} = {};
+    const element = this.nativeElement;
+    if (element) {
+      const lContext = loadLContextFromNode(element);
+      const lNode = lContext.lView[lContext.nodeIndex];
+      const stylingContext = getStylingContext(lContext.nodeIndex, lContext.lView);
+      if (stylingContext) {
+        for (let i = StylingIndex.SingleStylesStartPosition; i < lNode.length;
+             i += StylingIndex.Size) {
+          if (!isClassBased(lNode, i)) {
+            const styleName = getProp(lNode, i);
+            const value = getValue(lNode, i) as string | null;
+            if (value !== null) {
+              // we want to ignore `null` since those don't overwrite the values.
+              styles[styleName] = value;
+            }
+          }
+        }
+      } else {
+        // Fallback, just read DOM.
+        const eStyles = (element as HTMLElement).style;
+        for (let i = 0; i < eStyles.length; i++) {
+          const name = eStyles.item(i);
+          styles[name] = eStyles.getPropertyValue(name);
+        }
+      }
+    }
+    return styles;
   }
 
   get childNodes(): DebugNode[] {
@@ -332,24 +364,14 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
   }
 
   triggerEventHandler(eventName: string, eventObj: any): void {
-    // This is a hack implementation. The correct implementation would bypass the DOM and `TNode`
-    // information to invoke the listeners directly.
-    // https://angular-team.atlassian.net/browse/FW-719
-    const event = document.createEvent('MouseEvent');
-    event.initEvent(eventName, true, true);
-    (this.nativeElement as HTMLElement).dispatchEvent(event);
+    this.listeners.forEach((listener) => {
+      if (listener.name === eventName) {
+        listener.callback(eventObj);
+      }
+    });
   }
 }
 
-/**
- * This function should not exist because it is megamorphic and only mostly correct.
- *
- * See call site for more info.
- */
-function isDirectiveDefHack(obj: any): obj is DirectiveDef<any> {
-  return obj.type !== undefined && obj.template !== undefined && obj.declaredInputs !== undefined;
-}
-
 function _queryNodeChildrenR3(
     parentNode: DebugNode, predicate: Predicate<DebugNode>, matches: DebugNode[],
     elementsOnly: boolean) {

packages/core/src/render3/component.ts

@@ -17,12 +17,12 @@ import {getComponentDef} from './definition';
 import {diPublicInInjector, getOrCreateNodeInjectorForNode} from './di';
 import {publishDefaultGlobalUtils} from './global_utils';
 import {queueInitHooks, queueLifecycleHooks} from './hooks';
-import {CLEAN_PROMISE, createLView, createNodeAtIndex, createTView, getOrCreateTView, initNodeFlags, instantiateRootComponent, locateHostElement, queueComponentIndexForCheck, refreshDescendantViews} from './instructions';
+import {CLEAN_PROMISE, createLView, createNodeAtIndex, createTNode, createTView, getOrCreateTView, initNodeFlags, instantiateRootComponent, locateHostElement, queueComponentIndexForCheck, refreshDescendantViews} from './instructions';
 import {ComponentDef, ComponentType, RenderFlags} from './interfaces/definition';
-import {TElementNode, TNodeFlags, TNodeType} from './interfaces/node';
+import {TElementNode, TNode, TNodeFlags, TNodeType} from './interfaces/node';
 import {PlayerHandler} from './interfaces/player';
 import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
-import {CONTEXT, HEADER_OFFSET, HOST, HOST_NODE, INJECTOR, LView, LViewFlags, RootContext, RootContextFlags, TVIEW} from './interfaces/view';
+import {CONTEXT, HEADER_OFFSET, HOST, HOST_NODE, LView, LViewFlags, RootContext, RootContextFlags, TVIEW} from './interfaces/view';
 import {enterView, getPreviousOrParentTNode, leaveView, resetComponentState, setCurrentDirectiveDef} from './state';
 import {defaultScheduler, getRootView, readPatchedLView, stringify} from './util';
 
@@ -235,7 +235,9 @@ export function LifecycleHooksFeature(component: any, def: ComponentDef<any>): v
   const dirIndex = rootTView.data.length - 1;
 
   queueInitHooks(dirIndex, def.onInit, def.doCheck, rootTView);
-  queueLifecycleHooks(dirIndex << TNodeFlags.DirectiveStartingIndexShift | 1, rootTView);
+  // TODO(misko): replace `as TNode` with createTNode call. (needs refactoring to lose dep on
+  // LNode).
+  queueLifecycleHooks(rootTView, { directiveStart: dirIndex, directiveEnd: dirIndex + 1 } as TNode);
 }
 
 /**

packages/core/src/render3/context_discovery.ts

@@ -36,7 +36,7 @@ import {getComponentViewByIndex, getNativeByTNode, readElementValue, readPatched
  *
  * @param target Component, Directive or DOM Node.
  */
-export function getContext(target: any): LContext|null {
+export function getLContext(target: any): LContext|null {
   let mpValue = readPatchedData(target);
   if (mpValue) {
     // only when it's an array is it considered an LView instance
@@ -250,8 +250,8 @@ function findViaDirective(lView: LView, directiveInstance: {}): number {
   // list of directives for the instance.
   let tNode = lView[TVIEW].firstChild;
   while (tNode) {
-    const directiveIndexStart = getDirectiveStartIndex(tNode);
-    const directiveIndexEnd = getDirectiveEndIndex(tNode, directiveIndexStart);
+    const directiveIndexStart = tNode.directiveStart;
+    const directiveIndexEnd = tNode.directiveEnd;
     for (let i = directiveIndexStart; i < directiveIndexEnd; i++) {
       if (lView[i] === directiveInstance) {
         return tNode.index;
@@ -273,16 +273,16 @@ function findViaDirective(lView: LView, directiveInstance: {}): number {
 export function getDirectivesAtNodeIndex(
     nodeIndex: number, lView: LView, includeComponents: boolean): any[]|null {
   const tNode = lView[TVIEW].data[nodeIndex] as TNode;
-  let directiveStartIndex = getDirectiveStartIndex(tNode);
+  let directiveStartIndex = tNode.directiveStart;
   if (directiveStartIndex == 0) return EMPTY_ARRAY;
-  const directiveEndIndex = getDirectiveEndIndex(tNode, directiveStartIndex);
+  const directiveEndIndex = tNode.directiveEnd;
   if (!includeComponents && tNode.flags & TNodeFlags.isComponent) directiveStartIndex++;
   return lView.slice(directiveStartIndex, directiveEndIndex);
 }
 
 export function getComponentAtNodeIndex(nodeIndex: number, lView: LView): {}|null {
   const tNode = lView[TVIEW].data[nodeIndex] as TNode;
-  let directiveStartIndex = getDirectiveStartIndex(tNode);
+  let directiveStartIndex = tNode.directiveStart;
   return tNode.flags & TNodeFlags.isComponent ? lView[directiveStartIndex] : null;
 }
 
@@ -305,18 +305,3 @@ export function discoverLocalRefs(lView: LView, nodeIndex: number): {[key: strin
 
   return null;
 }
-
-function getDirectiveStartIndex(tNode: TNode): number {
-  // the tNode instances store a flag value which then has a
-  // pointer which tells the starting index of where all the
-  // active directives are in the master directive array
-  return tNode.flags >> TNodeFlags.DirectiveStartingIndexShift;
-}
-
-function getDirectiveEndIndex(tNode: TNode, startIndex: number): number {
-  // The end value is also a part of the same flag
-  // (see `TNodeFlags` to see how the flag bit shifting
-  // values are used).
-  const count = tNode.flags & TNodeFlags.DirectiveCountMask;
-  return count ? (startIndex + count) : -1;
-}

packages/core/src/render3/di.ts

@@ -393,30 +393,32 @@ export function getOrCreateInjectable<T>(
 const NOT_FOUND = {};
 
 function searchTokensOnInjector<T>(
-    injectorIndex: number, injectorView: LView, token: Type<T>| InjectionToken<T>,
+    injectorIndex: number, lView: LView, token: Type<T>| InjectionToken<T>,
     previousTView: TView | null) {
-  const currentTView = injectorView[TVIEW];
+  const currentTView = lView[TVIEW];
   const tNode = currentTView.data[injectorIndex + TNODE] as TNode;
-  // First, we step through providers
-  let canAccessViewProviders = false;
-  // We need to determine if view providers can be accessed by the starting element.
-  // It happens in 2 cases:
-  // 1) On the initial element injector , if we are instantiating a token which can see the
-  // viewProviders of the component of that element. Such token are:
-  // - the component itself (but not other directives)
-  // - viewProviders tokens of the component (but not providers tokens)
-  // 2) Upper in the element injector tree, if the starting element is actually in the view of
-  // the current element. To determine this, we track the transition of view during the climb,
-  // and check the host node of the current view to identify component views.
-  if (previousTView == null && isComponent(tNode) && includeViewProviders ||
-      previousTView != null && previousTView != currentTView &&
-          (currentTView.node == null || currentTView.node.type === TNodeType.Element)) {
-    canAccessViewProviders = true;
-  }
-  const injectableIdx =
-      locateDirectiveOrProvider(tNode, injectorView, token, canAccessViewProviders);
+  // First, we need to determine if view providers can be accessed by the starting element.
+  // There are two possibities
+  const canAccessViewProviders = previousTView == null ?
+      // 1) This is the first invocation `previousTView == null` which means that we are at the
+      // `TNode` of where injector is starting to look. In such a case the only time we are allowed
+      // to look into the ViewProviders is if:
+      // - we are on a component
+      // - AND the injector set `includeViewProviders` to true (implying that the token can see
+      // ViewProviders because it is the Component or a Service which itself was declared in
+      // ViewProviders)
+      (isComponent(tNode) && includeViewProviders) :
+      // 2) `previousTView != null` which means that we are now walking across the parent nodes.
+      // In such a case we are only allowed to look into the ViewProviders if:
+      // - We just crossed from child View to Parent View `previousTView != currentTView`
+      // - AND the parent TNode is an Element.
+      // This means that we just came from the Component's View and therefore are allowed to see
+      // into the ViewProviders.
+      (previousTView != currentTView && (tNode.type === TNodeType.Element));
+
+  const injectableIdx = locateDirectiveOrProvider(tNode, lView, token, canAccessViewProviders);
   if (injectableIdx !== null) {
-    return getNodeInjectable(currentTView.data, injectorView, injectableIdx, tNode as TElementNode);
+    return getNodeInjectable(currentTView.data, lView, injectableIdx, tNode as TElementNode);
   } else {
     return NOT_FOUND;
   }
@@ -439,17 +441,17 @@ export function locateDirectiveOrProvider<T>(
   const nodeProviderIndexes = tNode.providerIndexes;
   const tInjectables = tView.data;
 
-  const startInjectables = nodeProviderIndexes & TNodeProviderIndexes.ProvidersStartIndexMask;
-  const startDirectives = nodeFlags >> TNodeFlags.DirectiveStartingIndexShift;
+  const injectablesStart = nodeProviderIndexes & TNodeProviderIndexes.ProvidersStartIndexMask;
+  const directivesStart = tNode.directiveStart;
+  const directiveEnd = tNode.directiveEnd;
   const cptViewProvidersCount =
       nodeProviderIndexes >> TNodeProviderIndexes.CptViewProvidersCountShift;
   const startingIndex =
-      canAccessViewProviders ? startInjectables : startInjectables + cptViewProvidersCount;
-  const directiveCount = nodeFlags & TNodeFlags.DirectiveCountMask;
-  for (let i = startingIndex; i < startDirectives + directiveCount; i++) {
+      canAccessViewProviders ? injectablesStart : injectablesStart + cptViewProvidersCount;
+  for (let i = startingIndex; i < directiveEnd; i++) {
     const providerTokenOrDef = tInjectables[i] as InjectionToken<any>| Type<any>| DirectiveDef<any>;
-    if (i < startDirectives && token === providerTokenOrDef ||
-        i >= startDirectives && (providerTokenOrDef as DirectiveDef<any>).type === token) {
+    if (i < directivesStart && token === providerTokenOrDef ||
+        i >= directivesStart && (providerTokenOrDef as DirectiveDef<any>).type === token) {
       return i;
     }
   }