Skip to content

Commit

Permalink
Fixing request blocking drawer view + adding comments to new patches
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Liao committed Apr 22, 2020
1 parent 4c154d1 commit cb01962
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 52 deletions.
36 changes: 18 additions & 18 deletions postBuildStep.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,10 @@ import {
applyInspectorCommonCssRightToolbarPatch,
applyInspectorCommonCssTabSliderPatch,
applyInspectorCommonNetworkPatch,
applyInspectorViewHandleActionPatch,
applyInspectorViewShowDrawerPatch,
applyMainTabTabLocationPatch,
applyMainViewPatch,
applyPersistRequestBlockingTab,
applyShowElementsTab,
applyShowRequestBlockingTab,
} from "./src/host/polyfills/simpleView";
import applySetupTextSelectionPatch from "./src/host/polyfills/textSelection";

Expand Down Expand Up @@ -104,14 +103,15 @@ async function patchFilesForWebView(toolsOutDir: string, debugMode: boolean) {
applyPaddingInlineCssPatch,
]);
await patchFileForWebView("inspector.html", toolsOutDir, true, [applyContentSecurityPolicyPatch]);
await patchFileForWebView("ui/InspectorView.js", toolsOutDir, true, [
applyInspectorViewHandleActionPatch,
applyInspectorViewShowDrawerPatch,
applyDrawerTabLocationPatch,
applyMainTabTabLocationPatch,
await patchFileForWebView("ui/InspectorView.js", toolsOutDir, true, [applyDrawerTabLocationPatch]);
await patchFileForWebView("ui/TabbedPane.js", toolsOutDir, true, [
applyAppendTabPatch,
applyPersistRequestBlockingTab,
]);
await patchFileForWebView("ui/ViewManager.js", toolsOutDir, true, [
applyShowElementsTab,
applyShowRequestBlockingTab,
]);
await patchFileForWebView("ui/TabbedPane.js", toolsOutDir, true, [applyAppendTabPatch]);
await patchFileForWebView("ui/ViewManager.js", toolsOutDir, true, [applyShowElementsTab]);
} else {
// tslint:disable-next-line:no-console
console.log("Patching files for debug version");
Expand All @@ -122,15 +122,15 @@ async function patchFilesForWebView(toolsOutDir: string, debugMode: boolean) {
applyPaddingInlineCssPatch,
]);
await patchFileForWebView("inspector.html", toolsOutDir, false, [applyContentSecurityPolicyPatch]);
await patchFileForWebView("ui/TabbedPane.js", toolsOutDir, false, [applyAppendTabPatch]);
await patchFileForWebView("ui/InspectorView.js", toolsOutDir, false, [
applyInspectorViewHandleActionPatch,
applyInspectorViewShowDrawerPatch,
applyDrawerTabLocationPatch,
applyMainTabTabLocationPatch,
await patchFileForWebView("ui/InspectorView.js", toolsOutDir, false, [applyDrawerTabLocationPatch]);
await patchFileForWebView("ui/TabbedPane.js", toolsOutDir, false, [
applyAppendTabPatch,
applyPersistRequestBlockingTab,
]);
await patchFileForWebView("ui/ViewManager.js", toolsOutDir, true, [
applyShowElementsTab,
applyShowRequestBlockingTab,
]);
await patchFileForWebView("ui/TabbedPane.js", toolsOutDir, false, [applyAppendTabPatch]);
await patchFileForWebView("ui/ViewManager.js", toolsOutDir, true, [applyShowElementsTab]);
// Debug file versions
await patchFileForWebView("ui/UIUtils.js", toolsOutDir, false, [applyUIUtilsPatch]);
await patchFileForWebView("dom_extension/DOMExtension.js", toolsOutDir, false, [applyCreateElementPatch]);
Expand Down
38 changes: 26 additions & 12 deletions src/host/polyfills/simpleView.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,18 +87,6 @@ describe("simpleView", () => {
"this._showDrawer.bind(this, false), 'drawer-view', true, true, 'network.blocked-urls'"));
});

it("applyMainTabTabLocationPatch correctly changes text", async () => {
const apply = await import("./simpleView");
const comparableText = "InspectorFrontendHostInstance), 'panel', true, true, Root.Runtime.queryParam('panel')";
let fileContents = getTextFromFile("ui/InspectorView.js");
// The file was not found, so test that at least the text is being replaced.
fileContents = fileContents ? fileContents : comparableText;
const result = apply.applyMainTabTabLocationPatch(fileContents);
expect(result).not.toEqual(null);
expect(result).toEqual(expect.stringContaining(
"InspectorFrontendHostInstance), 'panel', true, true, 'network'"));
});

it("applyAppendTabPatch correctly changes text", async () => {
const apply = await import("./simpleView");
const comparableText = "appendTab(id, tabTitle, view, tabTooltip, userGesture, isCloseable, index) {";
Expand All @@ -122,6 +110,32 @@ describe("simpleView", () => {
}
});

it("applyShowRequestBlockingTab correctly changes text", async () => {
const apply = await import("./simpleView");
const comparableText = "if(!view.isCloseable())";
let fileContents = getTextFromFile("ui/ViewManager.js");
fileContents = fileContents ? fileContents : comparableText;
const result = apply.applyShowRequestBlockingTab(fileContents);
expect(result).not.toEqual(null);
if (result) {
expect(result).toEqual(expect.stringContaining(
"if(!view.isCloseable()||id==='network.blocked-urls')"));
}
});

it("applyPersistRequestBlockingTab correctly changes text", async () => {
const apply = await import("./simpleView");
const comparableText = "this._closeable = closeable;";
let fileContents = getTextFromFile("ui/TabbedPane.js");
fileContents = fileContents ? fileContents : comparableText;
const result = apply.applyPersistRequestBlockingTab(fileContents);
expect(result).not.toEqual(null);
if (result) {
expect(result).toEqual(expect.stringContaining(
"this._closeable=id==='network.blocked-urls'?false:closeable;"));
}
});

it("applyInspectorCommonCssPatch correctly changes text", async () => {
const apply = await import("./simpleView");
const comparableText = ":host-context(.platform-mac) .monospace,";
Expand Down
79 changes: 57 additions & 22 deletions src/host/polyfills/simpleView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,11 @@ export function applyCommonRevealerPatch(content: string) {
}
}

// This function is needed for Elements-only version, but we need the drawer
// for the Request Blocking tool when enabling the Network Panel.
export function applyInspectorViewHandleActionPatch(content: string) {
// This patch removes the ability to open/close the drawer using 'ESC'
// and using CTRL + [ or CTRL + ] to navigate between tabs.
const pattern = /handleAction\(context,\s*actionId\)\s*{/g;

if (content.match(pattern)) {
Expand All @@ -47,7 +51,10 @@ export function applyInspectorViewHandleActionPatch(content: string) {
}
}

// This function is needed for Elements-only version, but we need the drawer
// for the Request Blocking tool when enabling the Network Panel.
export function applyInspectorViewShowDrawerPatch(content: string) {
// This patch hides the drawer.
const pattern = /_showDrawer\(focus\)\s*{/g;

if (content.match(pattern)) {
Expand All @@ -68,16 +75,42 @@ export function applyMainViewPatch(content: string) {
}

export function applyShowElementsTab(content: string) {
const pattern = /this\._defaultTab\s*=\s*defaultTab;/;
// This tab sets the Elements tool as the default tab,
// so the extension will always show the Elements tool first.
const pattern = /this\._defaultTab\s*=\s*defaultTab;/;

if (content.match(pattern)) {
return content.replace(pattern, "this._defaultTab = 'elements';");
} else {
if (content.match(pattern)) {
return content.replace(pattern, "this._defaultTab = 'elements';");
} else {
return null;
}
}
}

export function applyShowRequestBlockingTab(content: string) {
// Appends the Request Blocking tab in the drawer even if it is not open.
const pattern = /if\s*\(!view\.isCloseable\(\)\)/;

if (content.match(pattern)) {
return content.replace(pattern, "if(!view.isCloseable()||id==='network.blocked-urls')");
} else {
return null;
}
}

export function applyPersistRequestBlockingTab(content: string) {
// Removes the close button from the Request blocking tab by making the tab non-closeable.
const pattern = /this\._closeable\s*=\s*closeable;/;

if (content.match(pattern)) {
return content.replace(pattern, "this._closeable=id==='network.blocked-urls'?false:closeable;");
} else {
return null;
}
}

export function applyAppendTabPatch(content: string) {
// The appendTab function chooses which tabs to put in the tabbed pane header section
// showTabElement and selectTab are only called by tabs that have already been appended via appendTab.
const allowedTabs = [
"elements",
"Styles",
Expand Down Expand Up @@ -123,6 +156,7 @@ export function applyAppendTabPatch(content: string) {
}

export function applyDrawerTabLocationPatch(content: string) {
// This shows the drawer with the network.blocked-urls tab open.
const pattern = /this._showDrawer.bind\s*\(this,\s*false\),\s*'drawer-view',\s*true,\s*true/g;
if (content.match(pattern)) {
return content.replace(pattern,
Expand All @@ -132,37 +166,29 @@ export function applyDrawerTabLocationPatch(content: string) {
}
}

export function applyMainTabTabLocationPatch(content: string) {
const pattern = /InspectorFrontendHostInstance\),\s*'panel',\s*true,\s*true,\s*Root.Runtime.queryParam\('panel'\)/g;
if (content.match(pattern)) {
return content.replace(pattern, `InspectorFrontendHostInstance\), 'panel', true, true, 'network'`);
} else {
return null;
}
}

export function applyInspectorCommonCssPatch(content: string, isRelease?: boolean) {
// Hides the inspect button, the more tools button in the drawer and reveals the screen cast button.
const separator = (isRelease ? "\\n" : "\n");

const hideInspectBtn =
`.toolbar-button[aria-label='Select an element in the page to inspect it'] {
display: none !important;
}`.replace(/\n/g, separator);

const unHideScreenCastBtn =
`.toolbar-button[aria-label='Toggle screencast'] {
visibility: visible !important;
const hideMoreToolsBtn =
`.toolbar-button[aria-label='More Tools'] {
display: none !important;
}`.replace(/\n/g, separator);

const unHideSearchCloseButton =
`.toolbar-button[aria-label='Close'] {
const unHideScreenCastBtn =
`.toolbar-button[aria-label='Toggle screencast'] {
visibility: visible !important;
}`.replace(/\n/g, separator);

const topHeaderCSS =
hideInspectBtn +
unHideScreenCastBtn +
unHideSearchCloseButton;
hideMoreToolsBtn +
unHideScreenCastBtn;

const pattern = /(:host-context\(\.platform-mac\)\s*\.monospace,)/g;
if (content.match(pattern)) {
Expand All @@ -173,6 +199,7 @@ export function applyInspectorCommonCssPatch(content: string, isRelease?: boolea
}

export function applyInspectorCommonNetworkPatch(content: string, isRelease?: boolean) {
// Hides export HAR button and pretty print button and reveals the Network search close button in the Network Panel.
const separator = (isRelease ? "\\n" : "\n");

const hideExportHarBtn =
Expand All @@ -185,9 +212,16 @@ export function applyInspectorCommonNetworkPatch(content: string, isRelease?: bo
display: none !important;
}`.replace(/\n/g, separator);

// Search close button initially hidden by applyInspectorCommonCssRightToolbarPatch
const unHideSearchCloseButton =
`.toolbar-button[aria-label='Close'] {
visibility: visible !important;
}`.replace(/\n/g, separator);

const networkCSS =
hideExportHarBtn +
hidePrettyPrintBtn;
hidePrettyPrintBtn +
unHideSearchCloseButton;

const pattern = /(:host-context\(\.platform-mac\)\s*\.monospace,)/g;
if (content.match(pattern)) {
Expand All @@ -198,6 +232,7 @@ export function applyInspectorCommonNetworkPatch(content: string, isRelease?: bo
}

export function applyInspectorCommonContextMenuPatch(content: string, isRelease?: boolean) {
// Hides certain context menu items from elements in the Network Panel.
const separator = (isRelease ? "\\n" : "\n");

const hideContextMenuItems =
Expand Down

0 comments on commit cb01962

Please sign in to comment.