Repository: microsoft/vscode-edge-devtools
Pull request #102 (2019-10-14 17:44:39)

Modifying polyfills to comply with latest changes in the code.
Modifying several polyfills to work with the latest version of the code, also leaving existing code for backwards compatibility

### elementsTreeOutline.js
Renaming the target file to elementsTreeOutline.css

### stylesSectionTree.js
Renaming the target file to stylesSectionTree.css

### themes/dark.css
Applyting existing transformations to dark theme.

### TabbedPaned.js:
 applySelectTabPatch method is changing it's signature. This PR adds the logic to handle the new signature as well as providing backward compatibility with the former signature.

Changes on TabbedPane.js
https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/ui/TabbedPane.js?q=tabbedPane.js+-f:out&sq=package:chromium&g=0&l=1


Patch:
diff --git a/postBuildStep.ts b/postBuildStep.ts
index dec2705..57094b9 100644
--- a/postBuildStep.ts
+++ b/postBuildStep.ts
@@ -99,13 +99,13 @@ async function patchFilesForWebView(toolsOutDir: string) {
     await patchFileForWebView("ui/UIUtils.js", toolsOutDir, false, [applyUIUtilsPatch]);
     await patchFileForWebView("dom_extension/DOMExtension.js", toolsOutDir, false, [applyCreateElementPatch]);
     await patchFileForWebView("elements/ElementsPanel.js", toolsOutDir, false, [applySetupTextSelectionPatch]);
-    await patchFileForWebView("ui/inspectorCommon.css", toolsOutDir, false, [applyInspectorCommonCssPatch]);
+    await patchFileForWebView("themes/base.css", toolsOutDir, false, [applyInspectorCommonCssPatch]);
     await patchFileForWebView("common/ModuleExtensionInterfaces.js", toolsOutDir, false, [applyCommonRevealerPatch]);
     await patchFileForWebView("main/Main.js", toolsOutDir, false, [applyMainViewPatch]);
     await patchFileForWebView("ui/InspectorView.js", toolsOutDir, false, [applyInspectorViewPatch]);
     await patchFileForWebView("ui/TabbedPane.js", toolsOutDir, false, [applySelectTabPatch]);
-    await patchFileForWebView("elements/elementsTreeOutline.js", toolsOutDir, false, [applyPaddingInlineCssPatch]);
-    await patchFileForWebView("elements/stylesSectionTree.js", toolsOutDir, false, [applyPaddingInlineCssPatch]);
+    await patchFileForWebView("elements/elementsTreeOutline.css", toolsOutDir, false, [applyPaddingInlineCssPatch]);
+    await patchFileForWebView("elements/stylesSectionTree.css", toolsOutDir, false, [applyPaddingInlineCssPatch]);
 }
 
 async function patchFileForWebView(
diff --git a/src/host/polyfills/cssPaddingInline.ts b/src/host/polyfills/cssPaddingInline.ts
index fea9d3f..fea78e3 100644
--- a/src/host/polyfills/cssPaddingInline.ts
+++ b/src/host/polyfills/cssPaddingInline.ts
@@ -2,8 +2,19 @@
 // Licensed under the MIT License.
 
 export default function applyPaddingInlineCssPatch(content: string, isRelease?: boolean) {
-    return content.replace(
+    const separator = (isRelease ? "\\n" : "\n");
+    const cssHeaderContents =
+        `.elements-disclosure .gutter-container {
+            display: none !important;
+        }`.replace(/\n/g, separator);
+
+    let result = content.replace(
+        /(\.elements-disclosure\s*\.gutter-container\s*\{([^\}]*)?\})/g,
+        cssHeaderContents);
+    result = result.replace(
         /([^-])padding-inline-start:/g,
         "$1-webkit-padding-start:",
     );
+
+    return result;
 }
diff --git a/src/host/polyfills/simpleView.ts b/src/host/polyfills/simpleView.ts
index 33659c8..bd4865e 100644
--- a/src/host/polyfills/simpleView.ts
+++ b/src/host/polyfills/simpleView.ts
@@ -71,26 +71,38 @@ export function applySelectTabPatch(content: string) {
         return `id !== '${v}'`;
     }).join(" && ");
 
+    const pattern = /selectTab\(id,\s*userGesture,\s*forceFocus\)\s*{/g;
+
     return content.replace(
-        /selectTab\(id,\s*userGesture\)\s*{/g,
-        `selectTab(id, userGesture) { if (${condition}) return false;`);
+        pattern,
+        `selectTab(id, userGesture, forceFocus) { if (${condition}) return false;`);
 }
 
 export function applyInspectorCommonCssPatch(content: string, isRelease?: boolean) {
-    const separator = (isRelease ? "\\n" : "\n"); // Release css is embedded in js
-    const css =
+    const separator = (isRelease ? "\\n" : "\n");
+    const cssHeaderContents =
         `.main-tabbed-pane .tabbed-pane-header-contents {
             display: none !important;
-        }
-        .main-tabbed-pane .tabbed-pane-right-toolbar {
+        }`.replace(/\n/g, separator);
+    const cssRightToolbar =
+        `.tabbed-pane-right-toolbar {
             display: none !important;
-        }
-        .tabbed-pane-tab-slider {
+        }`.replace(/\n/g, separator);
+    const cssTabSlider =
+        `.tabbed-pane-tab-slider {
             display: none !important;
         }`.replace(/\n/g, separator);
 
-    return content.replace(
-        /(:host-context\(\.platform-mac\)\s*\.monospace,)/g,
-        `${css}${separator} $1`,
-    );
+    // we need to do this by parts as the code is split between base.css
+    // and dark.css
+    let result = content.replace(
+        /(\.main-tabbed-pane\s*\.tabbed-pane-header-contents\s*\{([^\}]*)?\})/g,
+        cssHeaderContents);
+    result = result.replace(
+            /(\.tabbed-pane-right-toolbar\s*\{([^\}]*)?\})/g,
+            cssRightToolbar);
+    result = result.replace(
+        /(\.tabbed-pane-tab-slider\s*\{([^\}]*)?\})/g,
+        cssTabSlider);
+    return result;
 }


Test patch:
diff --git a/src/host/polyfills/simpleView.test.ts b/src/host/polyfills/simpleView.test.ts
index f32d3e5..9986818 100644
--- a/src/host/polyfills/simpleView.test.ts
+++ b/src/host/polyfills/simpleView.test.ts
@@ -53,27 +53,103 @@ describe("simpleView", () => {
 
     it("applySelectTabPatch correctly changes text", async () => {
         const apply = await import("./simpleView");
-        const result = apply.applySelectTabPatch("selectTab(id, userGesture) { // code");
-        expect(result).toEqual(expect.stringContaining("selectTab(id, userGesture) { if ("));
+        const result = apply.applySelectTabPatch("selectTab(id, userGesture, forceFocus) { // code");
+        expect(result).toEqual(expect.stringContaining("selectTab(id, userGesture, forceFocus) { if ("));
 
-        const result2 = apply.applySelectTabPatch("selectTab(id,userGesture) { // code");
-        expect(result2).toEqual(expect.stringContaining("selectTab(id, userGesture) { if ("));
+        const result2 = apply.applySelectTabPatch("selectTab(id, userGesture, forceFocus) { // code");
+        expect(result2).toEqual(expect.stringContaining("selectTab(id, userGesture, forceFocus) { if ("));
     });
 
-    it("applyInspectorCommonCssPatch correctly changes text", async () => {
-        const expectedCss = ":host-context(.platform-mac) .monospace,";
+    it("applyInspectorCommonCssPatch correctly changes tabbed-pane-header-contents", async () => {
+        const expectedCss = `.main-tabbed-pane .tabbed-pane-header-contents {
+            flex: auto;
+            pointer-events: none;
+            margin-left: 0;
+            position: relative;
+        }`;
+        const expectedResult = `.main-tabbed-pane .tabbed-pane-header-contents {
+            display: none !important;
+        }`;
         const apply = await import("./simpleView");
         const result = apply.applyInspectorCommonCssPatch(expectedCss);
-        expect(result.startsWith(".main")).toEqual(true);
-        expect(result.endsWith(".monospace,")).toEqual(true);
+        expect(result === expectedResult).toEqual(true);
     });
 
-    it("applyInspectorCommonCssPatch correctly changes text in release mode", async () => {
-        const expectedCss = ":host-context(.platform-mac) .monospace,";
+    it("applyInspectorCommonCssPatch correctly changes tabbed-pane-tab-slider", async () => {
+        const expectedCss = `.tabbed-pane-tab-slider {
+            height: 2px;
+            position: absolute;
+            bottom: -1px;
+            background-color: var(--accent-color);
+            left: 0;
+            z-index: 50;
+            transform-origin: 0 100%;
+            transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
+            visibility: hidden;
+        }`;
+        const expectedResult = `.tabbed-pane-tab-slider {
+            display: none !important;
+        }`;
+        const apply = await import("./simpleView");
+        const result = apply.applyInspectorCommonCssPatch(expectedCss);
+        expect(result === expectedResult).toEqual(true);
+    });
+
+    it("applyInspectorCommonCssPatch correctly changes tabbed-pane-right-toolbar", async () => {
+        const expectedCss = `.tabbed-pane-right-toolbar {
+            margin-left: -4px;
+            flex: none;
+        }`;
+        const expectedResult = `.tabbed-pane-right-toolbar {
+            display: none !important;
+        }`;
+        const apply = await import("./simpleView");
+        const result = apply.applyInspectorCommonCssPatch(expectedCss);
+        expect(result === expectedResult).toEqual(true);
+    });
+
+    it("applyInspectorCommonCssPatch correctly changes tabbed-pane-header-contents in release mode", async () => {
+        const expectedCss = `.main-tabbed-pane .tabbed-pane-header-contents {
+            flex: auto;
+            pointer-events: none;
+            margin-left: 0;
+            position: relative;
+        }`;
+        const expectedResult =
+            ".main-tabbed-pane .tabbed-pane-header-contents {\\n            display: none !important;\\n        }";
+        const apply = await import("./simpleView");
+        const result = apply.applyInspectorCommonCssPatch(expectedCss, true);
+        expect(result === expectedResult).toEqual(true);
+    });
+
+    it("applyInspectorCommonCssPatch correctly changes tabbed-pane-tab-slider in release mode", async () => {
+        const expectedCss = `.tabbed-pane-tab-slider {
+            height: 2px;
+            position: absolute;
+            bottom: -1px;
+            background-color: var(--accent-color);
+            left: 0;
+            z-index: 50;
+            transform-origin: 0 100%;
+            transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
+            visibility: hidden;
+        }`;
+        const expectedResult =
+            ".tabbed-pane-tab-slider {\\n            display: none !important;\\n        }";
+        const apply = await import("./simpleView");
+        const result = apply.applyInspectorCommonCssPatch(expectedCss, true);
+        expect(result === expectedResult).toEqual(true);
+    });
+
+    it("applyInspectorCommonCssPatch correctly changes tabbed-pane-right-toolbar in release mode", async () => {
+        const expectedCss = `.tabbed-pane-right-toolbar {
+            margin-left: -4px;
+            flex: none;
+        }`;
+        const expectedResult =
+            ".tabbed-pane-right-toolbar {\\n            display: none !important;\\n        }";
         const apply = await import("./simpleView");
         const result = apply.applyInspectorCommonCssPatch(expectedCss, true);
-        expect(result.startsWith(".main")).toEqual(true);
-        expect(result.endsWith(".monospace,")).toEqual(true);
-        expect(result.indexOf("\\n") > -1).toEqual(true);
+        expect(result === expectedResult).toEqual(true);
     });
 });