chore: move debug-related code to src/debug (#2309)

dgozman · web-flow · commit 8f0f32b5e60b · 2020-05-26T14:08:32.000-07:00
diff --git a/src/chromium/crBrowser.ts b/src/chromium/crBrowser.ts
@@ -30,7 +30,7 @@ import { Events } from './events';
 import { Protocol } from './protocol';
 import { CRExecutionContext } from './crExecutionContext';
 import { logError } from '../logger';
-import { CRDevTools } from './crDevTools';
+import { CRDevTools } from '../debug/crDevTools';
 
 export class CRBrowser extends BrowserBase {
   readonly _connection: CRConnection;
diff --git a/src/chromium/crCoverage.ts b/src/chromium/crCoverage.ts
@@ -18,8 +18,8 @@
 import { CRSession } from './crConnection';
 import { assert, helper, RegisteredListener } from '../helper';
 import { Protocol } from './protocol';
-import * as js from '../javascript';
 import * as types from '../types';
+import * as debugSupport from '../debug/debugSupport';
 import { logError, InnerLogger } from '../logger';
 
 type JSRange = {
@@ -125,7 +125,7 @@ class JSCoverage {
 
   async _onScriptParsed(event: Protocol.Debugger.scriptParsedPayload) {
     // Ignore playwright-injected scripts
-    if (js.isPlaywrightSourceUrl(event.url))
+    if (debugSupport.isPlaywrightSourceUrl(event.url))
       return;
     this._scriptIds.add(event.scriptId);
     // Ignore other anonymous scripts unless the reportAnonymousScripts option is true.
diff --git a/src/chromium/crExecutionContext.ts b/src/chromium/crExecutionContext.ts
@@ -20,6 +20,7 @@ import { helper } from '../helper';
 import { valueFromRemoteObject, getExceptionMessage, releaseObject } from './crProtocolHelper';
 import { Protocol } from './protocol';
 import * as js from '../javascript';
+import * as debugSupport from '../debug/debugSupport';
 
 export class CRExecutionContext implements js.ExecutionContextDelegate {
   _client: CRSession;
@@ -32,7 +33,7 @@ export class CRExecutionContext implements js.ExecutionContextDelegate {
 
   async rawEvaluate(expression: string): Promise<js.RemoteObject> {
     const { exceptionDetails, result: remoteObject } = await this._client.send('Runtime.evaluate', {
-      expression: js.ensureSourceUrl(expression),
+      expression: debugSupport.ensureSourceUrl(expression),
       contextId: this._contextId,
     }).catch(rewriteError);
     if (exceptionDetails)
@@ -44,7 +45,7 @@ export class CRExecutionContext implements js.ExecutionContextDelegate {
     if (helper.isString(pageFunction)) {
       return this._callOnUtilityScript(context,
           `evaluate`, [
-            { value: js.ensureSourceUrl(pageFunction) },
+            { value: debugSupport.ensureSourceUrl(pageFunction) },
           ], returnByValue, () => { });
     }
 
@@ -85,7 +86,7 @@ export class CRExecutionContext implements js.ExecutionContextDelegate {
     try {
       const utilityScript = await context.utilityScript();
       const { exceptionDetails, result: remoteObject } = await this._client.send('Runtime.callFunctionOn', {
-        functionDeclaration: `function (...args) { return this.${method}(...args) }${js.generateSourceUrl()}`,
+        functionDeclaration: `function (...args) { return this.${method}(...args) }` + debugSupport.generateSourceUrl(),
         objectId: utilityScript._remoteObject.objectId,
         arguments: [
           { value: returnByValue },
@@ -128,7 +129,7 @@ export class CRExecutionContext implements js.ExecutionContextDelegate {
     const remoteObject = toRemoteObject(handle);
     if (remoteObject.objectId) {
       const response = await this._client.send('Runtime.callFunctionOn', {
-        functionDeclaration: 'function() { return this; }',
+        functionDeclaration: 'function() { return this; }' + debugSupport.generateSourceUrl(),
         objectId: remoteObject.objectId,
         returnByValue: true,
         awaitPromise: true,
diff --git a/src/chromium/crPage.ts b/src/chromium/crPage.ts
@@ -16,7 +16,6 @@
  */
 
 import * as dom from '../dom';
-import * as js from '../javascript';
 import * as frames from '../frames';
 import { helper, RegisteredListener, assert } from '../helper';
 import * as network from '../network';
@@ -38,6 +37,7 @@ import * as types from '../types';
 import { ConsoleMessage } from '../console';
 import { NotConnectedError } from '../errors';
 import { logError } from '../logger';
+import * as debugSupport from '../debug/debugSupport';
 
 
 const UTILITY_WORLD_NAME = '__playwright_utility_world__';
@@ -432,7 +432,7 @@ class FrameSession {
       lifecycleEventsEnabled = this._client.send('Page.setLifecycleEventsEnabled', { enabled: true }),
       this._client.send('Runtime.enable', {}),
       this._client.send('Page.addScriptToEvaluateOnNewDocument', {
-        source: js.generateSourceUrl(),
+        source: debugSupport.generateSourceUrl(),
         worldName: UTILITY_WORLD_NAME,
       }),
       this._networkManager.initialize(),
diff --git a/src/debug/crDevTools.ts b/src/debug/crDevTools.ts
@@ -16,11 +16,11 @@
 
 import * as fs from 'fs';
 import * as util from 'util';
-import { CRSession } from './crConnection';
+import { CRSession } from '../chromium/crConnection';
 
 const kBindingName = '__pw_devtools__';
 
-// This method intercepts preferences-related DevTools embedder methods
+// This class intercepts preferences-related DevTools embedder methods
 // and stores preferences as a json file in the browser installation directory.
 export class CRDevTools {
   private _preferencesPath: string;
diff --git a/src/debug/debugSupport.ts b/src/debug/debugSupport.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as sourceMap from './sourceMap';
+import { getFromENV } from '../helper';
+
+let debugMode: boolean | undefined;
+export function isDebugMode(): boolean {
+  if (debugMode === undefined)
+    debugMode = !!getFromENV('PLAYWRIGHT_DEBUG_UI');
+  return debugMode;
+}
+
+let sourceUrlCounter = 0;
+const playwrightSourceUrlPrefix = '__playwright_evaluation_script__';
+const sourceUrlRegex = /^[\040\t]*\/\/[@#] sourceURL=\s*(\S*?)\s*$/m;
+export function generateSourceUrl(): string {
+  return `\n//# sourceURL=${playwrightSourceUrlPrefix}${sourceUrlCounter++}\n`;
+}
+
+export function isPlaywrightSourceUrl(s: string): boolean {
+  return s.startsWith(playwrightSourceUrlPrefix);
+}
+
+export function ensureSourceUrl(expression: string): string {
+  return sourceUrlRegex.test(expression) ? expression : expression + generateSourceUrl();
+}
+
+export async function generateSourceMapUrl(functionText: string, generatedText: string): Promise<string> {
+  if (!isDebugMode())
+    return generateSourceUrl();
+  const sourceMapUrl = await sourceMap.generateSourceMapUrl(functionText, generatedText);
+  return sourceMapUrl || generateSourceUrl();
+}
diff --git a/src/debug/sourceMap.ts b/src/debug/sourceMap.ts
@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as fs from 'fs';
+import * as util from 'util';
+import * as path from 'path';
+
+// NOTE: update this to point to playwright/lib when moving this file.
+const PLAYWRIGHT_LIB_PATH = path.normalize(path.join(__dirname, '..'));
+
+type Position = {
+  line: number;
+  column: number;
+};
+
+export async function generateSourceMapUrl(functionText: string, generatedText: string): Promise<string | undefined> {
+  const filePath = getCallerFilePath();
+  if (!filePath)
+    return;
+  try {
+    const generatedIndex = generatedText.indexOf(functionText);
+    if (generatedIndex === -1)
+      return;
+    const compiledPosition = findPosition(generatedText, generatedIndex);
+    const source = await util.promisify(fs.readFile)(filePath, 'utf8');
+    const sourceIndex = source.indexOf(functionText);
+    if (sourceIndex === -1)
+      return;
+    const sourcePosition = findPosition(source, sourceIndex);
+    const delta = findPosition(functionText, functionText.length);
+    const sourceMap = generateSourceMap(filePath, sourcePosition, compiledPosition, delta);
+    return `\n//# sourceMappingURL=data:application/json;base64,${Buffer.from(sourceMap).toString('base64')}\n`;
+  } catch (e) {
+  }
+}
+
+const VLQ_BASE_SHIFT = 5;
+const VLQ_BASE = 1 << VLQ_BASE_SHIFT;
+const VLQ_BASE_MASK = VLQ_BASE - 1;
+const VLQ_CONTINUATION_BIT = VLQ_BASE;
+const BASE64_DIGITS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+
+function base64VLQ(value: number): string {
+  if (value < 0)
+    value = ((-value) << 1) | 1;
+  else
+    value <<= 1;
+  let result = '';
+  do {
+    let digit = value & VLQ_BASE_MASK;
+    value >>>= VLQ_BASE_SHIFT;
+    if (value > 0)
+      digit |= VLQ_CONTINUATION_BIT;
+    result += BASE64_DIGITS[digit];
+  } while (value > 0);
+  return result;
+}
+
+function generateSourceMap(filePath: string, sourcePosition: Position, compiledPosition: Position, delta: Position): any {
+  const mappings = [];
+  let lastCompiled = { line: 0, column: 0 };
+  let lastSource = { line: 0, column: 0 };
+  for (let line = 0; line < delta.line; line++) {
+    // We need at least a mapping per line. This will yield an execution line at the start of each line.
+    // Note: for more granular mapping, we can do word-by-word.
+    const source = advancePosition(sourcePosition, { line, column: 0 });
+    const compiled = advancePosition(compiledPosition, { line, column: 0 });
+    while (lastCompiled.line < compiled.line) {
+      mappings.push(';');
+      lastCompiled.line++;
+      lastCompiled.column = 0;
+    }
+    mappings.push(base64VLQ(compiled.column - lastCompiled.column));
+    mappings.push(base64VLQ(0)); // Source index.
+    mappings.push(base64VLQ(source.line - lastSource.line));
+    mappings.push(base64VLQ(source.column - lastSource.column));
+    lastCompiled = compiled;
+    lastSource = source;
+  }
+  return JSON.stringify({
+    version: 3,
+    sources: ['file://' + filePath],
+    names: [],
+    mappings: mappings.join(''),
+  });
+}
+
+function findPosition(source: string, offset: number): Position {
+  const result: Position = { line: 0, column: 0 };
+  let index = 0;
+  while (true) {
+    const newline = source.indexOf('\n', index);
+    if (newline === -1 || newline >= offset)
+      break;
+    result.line++;
+    index = newline + 1;
+  }
+  result.column = offset - index;
+  return result;
+}
+
+function advancePosition(position: Position, delta: Position) {
+  return {
+    line: position.line + delta.line,
+    column: delta.column + (delta.line ? 0 : position.column),
+  };
+}
+
+function getCallerFilePath(): string | null {
+  const error = new Error();
+  const stackFrames = (error.stack || '').split('\n').slice(1);
+  // Find first stackframe that doesn't point to PLAYWRIGHT_LIB_PATH.
+  for (let frame of stackFrames) {
+    frame = frame.trim();
+    if (!frame.startsWith('at '))
+      return null;
+    if (frame.endsWith(')')) {
+      const from = frame.indexOf('(');
+      frame = frame.substring(from + 1, frame.length - 1);
+    } else {
+      frame = frame.substring('at '.length);
+    }
+    const match = frame.match(/^(?:async )?(.*):(\d+):(\d+)$/);
+    if (!match)
+      return null;
+    const filePath = match[1];
+    if (filePath.startsWith(PLAYWRIGHT_LIB_PATH))
+      continue;
+    return filePath;
+  }
+  return null;
+}
diff --git a/src/firefox/ffExecutionContext.ts b/src/firefox/ffExecutionContext.ts
@@ -19,6 +19,7 @@ import { helper } from '../helper';
 import * as js from '../javascript';
 import { FFSession } from './ffConnection';
 import { Protocol } from './protocol';
+import * as debugSupport from '../debug/debugSupport';
 
 export class FFExecutionContext implements js.ExecutionContextDelegate {
   _session: FFSession;
@@ -31,7 +32,7 @@ export class FFExecutionContext implements js.ExecutionContextDelegate {
 
   async rawEvaluate(expression: string): Promise<js.RemoteObject> {
     const payload = await this._session.send('Runtime.evaluate', {
-      expression: js.ensureSourceUrl(expression),
+      expression: debugSupport.ensureSourceUrl(expression),
       returnByValue: false,
       executionContextId: this._executionContextId,
     }).catch(rewriteError);
@@ -43,7 +44,7 @@ export class FFExecutionContext implements js.ExecutionContextDelegate {
     if (helper.isString(pageFunction)) {
       return this._callOnUtilityScript(context,
           `evaluate`, [
-            { value: pageFunction },
+            { value: debugSupport.ensureSourceUrl(pageFunction) },
           ], returnByValue, () => {});
     }
     if (typeof pageFunction !== 'function')
@@ -75,7 +76,7 @@ export class FFExecutionContext implements js.ExecutionContextDelegate {
     try {
       const utilityScript = await context.utilityScript();
       const payload = await this._session.send('Runtime.callFunction', {
-        functionDeclaration: `(utilityScript, ...args) => utilityScript.${method}(...args)`,
+        functionDeclaration: `(utilityScript, ...args) => utilityScript.${method}(...args)` + debugSupport.generateSourceUrl(),
         args: [
           { objectId: utilityScript._remoteObject.objectId, value: undefined },
           { value: returnByValue },
@@ -123,7 +124,7 @@ export class FFExecutionContext implements js.ExecutionContextDelegate {
     const simpleValue = await this._session.send('Runtime.callFunction', {
       executionContextId: this._executionContextId,
       returnByValue: true,
-      functionDeclaration: ((e: any) => e).toString() + js.generateSourceUrl(),
+      functionDeclaration: ((e: any) => e).toString() + debugSupport.generateSourceUrl(),
       args: [this._toCallArgument(payload)],
     });
     return deserializeValue(simpleValue.result!);
diff --git a/src/helper.ts b/src/helper.ts
@@ -23,9 +23,6 @@ import { TimeoutError } from './errors';
 import * as types from './types';
 import { ChildProcess, execSync } from 'child_process';
 
-// NOTE: update this to point to playwright/lib when moving this file.
-const PLAYWRIGHT_LIB_PATH = __dirname;
-
 export type RegisteredListener = {
   emitter: EventEmitter;
   eventName: (string | symbol);
@@ -397,38 +394,6 @@ export function logPolitely(toBeLogged: string) {
     console.log(toBeLogged);  // eslint-disable-line no-console
 }
 
-export function getCallerFilePath(ignorePrefix = PLAYWRIGHT_LIB_PATH): string | null {
-  const error = new Error();
-  const stackFrames = (error.stack || '').split('\n').slice(1);
-  // Find first stackframe that doesn't point to ignorePrefix.
-  for (let frame of stackFrames) {
-    frame = frame.trim();
-    if (!frame.startsWith('at '))
-      return null;
-    if (frame.endsWith(')')) {
-      const from = frame.indexOf('(');
-      frame = frame.substring(from + 1, frame.length - 1);
-    } else {
-      frame = frame.substring('at '.length);
-    }
-    const match = frame.match(/^(?:async )?(.*):(\d+):(\d+)$/);
-    if (!match)
-      return null;
-    const filePath = match[1];
-    if (filePath.startsWith(ignorePrefix))
-      continue;
-    return filePath;
-  }
-  return null;
-}
-
-let debugMode: boolean | undefined;
-export function isDebugMode(): boolean {
-  if (debugMode === undefined)
-    debugMode = !!getFromENV('PLAYWRIGHT_DEBUG_UI');
-  return debugMode;
-}
-
 const escapeGlobChars = new Set(['/', '$', '^', '+', '.', '(', ')', '=', '!', '|']);
 
 export const helper = Helper;
diff --git a/src/javascript.ts b/src/javascript.ts
diff --git a/src/server/chromium.ts b/src/server/chromium.ts
diff --git a/src/webkit/wkExecutionContext.ts b/src/webkit/wkExecutionContext.ts
