yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove highlight from PWDEBUG in favor of devtools one (#3800)

Browse Source
This commit is contained in:
Pavel Feldman 2020-09-08 20:02:58 -07:00 committed by GitHub
parent 355ea73a0b
commit b28ed214ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 0 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/debug/injected/consoleApi.ts
View File

@ -16,20 +16,16 @@
import { ParsedSelector, parseSelector } from '../../server/common/selectorParser'; import { ParsedSelector, parseSelector } from '../../server/common/selectorParser';
import type InjectedScript from '../../server/injected/injectedScript'; import type InjectedScript from '../../server/injected/injectedScript';
import { html } from './html';
export class ConsoleAPI { export class ConsoleAPI {
private _injectedScript: InjectedScript; private _injectedScript: InjectedScript;
private _highlightContainer: Element;
constructor(injectedScript: InjectedScript) { constructor(injectedScript: InjectedScript) {
this._injectedScript = injectedScript; this._injectedScript = injectedScript;
this._highlightContainer = html`<div style="position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 10000;"></div>`;
(window as any).playwright = { (window as any).playwright = {
$: (selector: string) => this._querySelector(selector), $: (selector: string) => this._querySelector(selector),
$$: (selector: string) => this._querySelectorAll(selector), $$: (selector: string) => this._querySelectorAll(selector),
inspect: (selector: string) => this._inspect(selector), inspect: (selector: string) => this._inspect(selector),
clear: () => this._clearHighlight()
}; };
} }
@ -40,36 +36,12 @@ export class ConsoleAPI {
} }
} }
private _highlightElements(elements: Element[] = [], target?: Element) {
const scrollLeft = document.scrollingElement ? document.scrollingElement.scrollLeft : 0;
const scrollTop = document.scrollingElement ? document.scrollingElement.scrollTop : 0;
this._highlightContainer.textContent = '';
for (const element of elements) {
const rect = element.getBoundingClientRect();
const highlight = html`<div style="position: absolute; pointer-events: none; border-radius: 3px"></div>`;
highlight.style.left = (rect.left + scrollLeft) + 'px';
highlight.style.top = (rect.top + scrollTop) + 'px';
highlight.style.height = rect.height + 'px';
highlight.style.width = rect.width + 'px';
if (element === target) {
highlight.style.background = 'hsla(30, 97%, 37%, 0.3)';
highlight.style.border = '3px solid hsla(30, 97%, 37%, 0.6)';
} else {
highlight.style.background = 'hsla(120, 100%, 37%, 0.3)';
highlight.style.border = '3px solid hsla(120, 100%, 37%, 0.8)';
}
this._highlightContainer.appendChild(highlight);
}
document.body.appendChild(this._highlightContainer);
}
_querySelector(selector: string): (Element | undefined) { _querySelector(selector: string): (Element | undefined) {
if (typeof selector !== 'string') if (typeof selector !== 'string')
throw new Error(`Usage: playwright.query('Playwright >> selector').`); throw new Error(`Usage: playwright.query('Playwright >> selector').`);
const parsed = parseSelector(selector); const parsed = parseSelector(selector);
this._checkSelector(parsed); this._checkSelector(parsed);
const elements = this._injectedScript.querySelectorAll(parsed, document); const elements = this._injectedScript.querySelectorAll(parsed, document);
this._highlightElements(elements, elements[0]);
return elements[0]; return elements[0];
} }
@ -79,7 +51,6 @@ export class ConsoleAPI {
const parsed = parseSelector(selector); const parsed = parseSelector(selector);
this._checkSelector(parsed); this._checkSelector(parsed);
const elements = this._injectedScript.querySelectorAll(parsed, document); const elements = this._injectedScript.querySelectorAll(parsed, document);
this._highlightElements(elements);
return elements; return elements;
} }
@ -88,11 +59,6 @@ export class ConsoleAPI {
return; return;
if (typeof selector !== 'string') if (typeof selector !== 'string')
throw new Error(`Usage: playwright.inspect('Playwright >> selector').`); throw new Error(`Usage: playwright.inspect('Playwright >> selector').`);
this._highlightElements();
(window as any).inspect(this._querySelector(selector)); (window as any).inspect(this._querySelector(selector));
} }
_clearHighlight() {
this._highlightContainer.remove();
}
} }