Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
frame.js 6.58 KiB
1 
/* @flow */
2 
import { enableTabClick } from '../utils/dom/enableTabClick';
3 
import { createCode } from './code';
4 
import { isInternalFile } from '../utils/isInternalFile';
5 
import type { StackFrame } from '../utils/stack-frame';
6 
import type { FrameSetting, OmitsObject } from './frames';
7 
import { applyStyles } from '../utils/dom/css';
8 
import {
9 
  omittedFramesStyle,
10 
  functionNameStyle,
11 
  depStyle,
12 
  linkStyle,
13 
  anchorStyle,
14 
  hiddenStyle,
15 
} from '../styles';
16
17 
function getGroupToggle(
18 
  document: Document,
19 
  omitsCount: number,
20 
  omitBundle: number
21 
) {
22 
  const omittedFrames = document.createElement('div');
23 
  enableTabClick(omittedFrames);
24 
  const text1 = document.createTextNode(
25 
    '\u25B6 ' + omitsCount + ' stack frames were collapsed.'
26 
  );
27 
  omittedFrames.appendChild(text1);
28 
  omittedFrames.addEventListener('click', function() {
29 
    const hide = text1.textContent.match(/▲/);
30 
    const list = document.getElementsByName('bundle-' + omitBundle);
31 
    for (let index = 0; index < list.length; ++index) {
32 
      const n = list[index];
33 
      if (hide) {
34 
        n.style.display = 'none';
35 
      } else {
36 
        n.style.display = '';
37 
      }
38 
    }
39 
    if (hide) {
40 
      text1.textContent = text1.textContent.replace(/▲/, '▶');
41 
      text1.textContent = text1.textContent.replace(/expanded/, 'collapsed');
42 
    } else {
43 
      text1.textContent = text1.textContent.replace(/▶/, '▲');
44 
      text1.textContent = text1.textContent.replace(/collapsed/, 'expanded');
45 
    }
46 
  });
47 
  applyStyles(omittedFrames, omittedFramesStyle);
48 
  return omittedFrames;
49 
}
50
51 
function insertBeforeBundle(
52 
  document: Document,
53 
  parent: Node,
54 
  omitsCount: number,
55 
  omitBundle: number,
56 
  actionElement
57 
) {
58 
  const children = document.getElementsByName('bundle-' + omitBundle);
59 
  if (children.length < 1) {
60 
    return;
61 
  }
62 
  let first: ?Node = children[0];
63 
  while (first != null && first.parentNode !== parent) {
64 
    first = first.parentNode;
65 
  }
66 
  const div = document.createElement('div');
67 
  enableTabClick(div);
68 
  div.setAttribute('name', 'bundle-' + omitBundle);
69 
  const text = document.createTextNode(
70 
    '\u25BC ' + omitsCount + ' stack frames were expanded.'
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
); div.appendChild(text); div.addEventListener('click', function() { return actionElement.click(); }); applyStyles(div, omittedFramesStyle); div.style.display = 'none'; parent.insertBefore(div, first); } function frameDiv(document: Document, functionName, url, internalUrl) { const frame = document.createElement('div'); const frameFunctionName = document.createElement('div'); let cleanedFunctionName; if (!functionName || functionName === 'Object.<anonymous>') { cleanedFunctionName = '(anonymous function)'; } else { cleanedFunctionName = functionName; } const cleanedUrl = url.replace('webpack://', '.'); if (internalUrl) { applyStyles( frameFunctionName, Object.assign({}, functionNameStyle, depStyle) ); } else { applyStyles(frameFunctionName, functionNameStyle); } frameFunctionName.appendChild(document.createTextNode(cleanedFunctionName)); frame.appendChild(frameFunctionName); const frameLink = document.createElement('div'); applyStyles(frameLink, linkStyle); const frameAnchor = document.createElement('a'); applyStyles(frameAnchor, anchorStyle); frameAnchor.appendChild(document.createTextNode(cleanedUrl)); frameLink.appendChild(frameAnchor); frame.appendChild(frameLink); return frame; } function createFrame( document: Document, frameSetting: FrameSetting, frame: StackFrame, contextSize: number, critical: boolean, omits: OmitsObject, omitBundle: number, parentContainer: HTMLDivElement, lastElement: boolean ) { const { compiled } = frameSetting; let { functionName, _originalFileName: sourceFileName } = frame; const { fileName, lineNumber, columnNumber, _scriptCode: scriptLines, _originalLineNumber: sourceLineNumber, _originalColumnNumber: sourceColumnNumber, _originalScriptCode: sourceLines, } = frame;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
// TODO: find a better place for this. // Chrome has a bug with inferring function.name: // https://github.com/facebookincubator/create-react-app/issues/2097 // Let's ignore a meaningless name we get for top-level modules. if (functionName === 'Object.friendlySyntaxErrorLabel') { functionName = '(anonymous function)'; } let url; if (!compiled && sourceFileName && sourceLineNumber) { // Remove everything up to the first /src/ const trimMatch = /^[/|\\].*?[/|\\](src[/|\\].*)/.exec(sourceFileName); if (trimMatch && trimMatch[1]) { sourceFileName = trimMatch[1]; } url = sourceFileName + ':' + sourceLineNumber; if (sourceColumnNumber) { url += ':' + sourceColumnNumber; } } else if (fileName && lineNumber) { url = fileName + ':' + lineNumber; if (columnNumber) { url += ':' + columnNumber; } } else { url = 'unknown'; } let needsHidden = false; const internalUrl = isInternalFile(url, sourceFileName); if (internalUrl) { ++omits.value; needsHidden = true; } let collapseElement = null; if (!internalUrl || lastElement) { if (omits.value > 0) { const capV = omits.value; const omittedFrames = getGroupToggle(document, capV, omitBundle); window.requestAnimationFrame(() => { insertBeforeBundle( document, parentContainer, capV, omitBundle, omittedFrames ); }); if (lastElement && internalUrl) { collapseElement = omittedFrames; } else { parentContainer.appendChild(omittedFrames); } ++omits.bundle; } omits.value = 0; } const elem = frameDiv(document, functionName, url, internalUrl); if (needsHidden) { applyStyles(elem, hiddenStyle); elem.setAttribute('name', 'bundle-' + omitBundle); } let hasSource = false; if (!internalUrl) { if ( compiled && scriptLines && scriptLines.length !== 0 && lineNumber != null ) {
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
elem.appendChild( createCode( document, scriptLines, lineNumber, columnNumber, contextSize, critical ) ); hasSource = true; } else if ( !compiled && sourceLines && sourceLines.length !== 0 && sourceLineNumber != null ) { elem.appendChild( createCode( document, sourceLines, sourceLineNumber, sourceColumnNumber, contextSize, critical ) ); hasSource = true; } } return { elem: elem, hasSource: hasSource, collapseElement: collapseElement }; } export { createFrame };