[MM-59823] Migrate BrowserView to WebContentsView (#3177)

* Migrate to WebContentsView from BrowserView * A bit of cleanup, stop holding reference to the loading screen * Fix tests * Fix i18n --------- Co-authored-by: Mattermost Build <[email protected]>
mattermost · Oct 30, 2024 · 5fccd0f · 5fccd0f
1 parent f99c10a
commit 5fccd0f
Show file tree

Hide file tree

Showing 36 changed files with 475 additions and 440 deletions.
diff --git a/e2e/specs/deep_linking/deeplink.test.js b/e2e/specs/deep_linking/deeplink.test.js
@@ -43,7 +43,7 @@ describe('application', function desc() {
             const browserWindow = await this.app.browserWindow(mainWindow);
             const webContentsId = this.serverMap[`${config.teams[1].name}___TAB_MESSAGING`].webContentsId;
             const isActive = await browserWindow.evaluate((window, id) => {
-                return window.getBrowserViews().find((view) => view.webContents.id === id).webContents.getURL();
+                return window.contentView.children.find((view) => view.webContents.id === id).webContents.getURL();
             }, webContentsId);
             isActive.should.equal('https://github.com/test/url/');
             const dropdownButtonText = await mainWindow.innerText('.ServerDropdownButton');

diff --git a/e2e/specs/menu_bar/dropdown.test.js b/e2e/specs/menu_bar/dropdown.test.js
@@ -54,17 +54,17 @@ describe('menu_bar/dropdown', function desc() {
         after(afterFunc);
 
         it('MM-T4406_1 should show the dropdown', async () => {
-            let dropdownHeight = await browserWindow.evaluate((window) => window.getBrowserViews().find((view) => view.webContents.getURL().includes('dropdown')).getBounds().height);
+            let dropdownHeight = await browserWindow.evaluate((window) => window.contentView.children.find((view) => view.webContents.getURL().includes('dropdown')).getBounds().height);
             dropdownHeight.should.equal(0);
 
             await mainWindow.click('.ServerDropdownButton');
-            dropdownHeight = await browserWindow.evaluate((window) => window.getBrowserViews().find((view) => view.webContents.getURL().includes('dropdown')).getBounds().height);
+            dropdownHeight = await browserWindow.evaluate((window) => window.contentView.children.find((view) => view.webContents.getURL().includes('dropdown')).getBounds().height);
             dropdownHeight.should.be.greaterThan(0);
         });
 
         it('MM-T4406_2 should hide the dropdown', async () => {
             await mainWindow.click('.TabBar');
-            const dropdownHeight = await browserWindow.evaluate((window) => window.getBrowserViews().find((view) => view.webContents.getURL().includes('dropdown')).getBounds().height);
+            const dropdownHeight = await browserWindow.evaluate((window) => window.contentView.children.find((view) => view.webContents.getURL().includes('dropdown')).getBounds().height);
             dropdownHeight.should.equal(0);
         });
     });
@@ -100,19 +100,19 @@ describe('menu_bar/dropdown', function desc() {
         after(afterFunc);
 
         it('MM-T4408_1 should show the first view', async () => {
-            const firstViewIsAttached = await browserWindow.evaluate((window, url) => Boolean(window.getBrowserViews().find((view) => view.webContents.getURL() === url)), env.exampleURL);
+            const firstViewIsAttached = await browserWindow.evaluate((window, url) => Boolean(window.contentView.children.find((view) => view.webContents.getURL() === url)), env.exampleURL);
             firstViewIsAttached.should.be.true;
-            const secondViewIsAttached = await browserWindow.evaluate((window) => Boolean(window.getBrowserViews().find((view) => view.webContents.getURL() === 'https://github.com/')));
+            const secondViewIsAttached = await browserWindow.evaluate((window) => Boolean(window.contentView.children.find((view) => view.webContents.getURL() === 'https://github.com/')));
             secondViewIsAttached.should.be.false;
         });
 
         it('MM-T4408_2 should show the second view after clicking the menu item', async () => {
             await mainWindow.click('.ServerDropdownButton');
             await dropdownView.click('.ServerDropdown button.ServerDropdown__button:nth-child(2)');
 
-            const firstViewIsAttached = await browserWindow.evaluate((window, url) => Boolean(window.getBrowserViews().find((view) => view.webContents.getURL() === url)), env.exampleURL);
+            const firstViewIsAttached = await browserWindow.evaluate((window, url) => Boolean(window.contentView.children.find((view) => view.webContents.getURL() === url)), env.exampleURL);
             firstViewIsAttached.should.be.false;
-            const secondViewIsAttached = await browserWindow.evaluate((window) => Boolean(window.getBrowserViews().find((view) => view.webContents.getURL() === 'https://github.com/')));
+            const secondViewIsAttached = await browserWindow.evaluate((window) => Boolean(window.contentView.children.find((view) => view.webContents.getURL() === 'https://github.com/')));
             secondViewIsAttached.should.be.true;
         });
     });

diff --git a/e2e/specs/menu_bar/view_menu.test.js b/e2e/specs/menu_bar/view_menu.test.js
@@ -11,7 +11,7 @@ const {asyncSleep} = require('../../modules/utils');
 
 async function setupPromise(window, id) {
     const promise = new Promise((resolve) => {
-        const browserView = window.getBrowserViews().find((view) => view.webContents.id === id);
+        const browserView = window.contentView.children.find((view) => view.webContents.id === id);
         browserView.webContents.on('did-finish-load', () => {
             resolve();
         });
@@ -22,13 +22,13 @@ async function setupPromise(window, id) {
 
 function getZoomFactorOfServer(browserWindow, serverId) {
     return browserWindow.evaluate(
-        (window, id) => window.getBrowserViews().find((view) => view.webContents.id === id).webContents.getZoomFactor(),
+        (window, id) => window.contentView.children.find((view) => view.webContents.id === id).webContents.getZoomFactor(),
         serverId,
     );
 }
 function setZoomFactorOfServer(browserWindow, serverId, zoomFactor) {
     return browserWindow.evaluate(
-        (window, {id, zoom}) => window.getBrowserViews().find((view) => view.webContents.id === id).webContents.setZoomFactor(zoom),
+        (window, {id, zoom}) => window.contentView.children.find((view) => view.webContents.id === id).webContents.setZoomFactor(zoom),
         {id: serverId, zoom: zoomFactor},
     );
 }
@@ -82,12 +82,12 @@ describe('menu/view', function desc() {
 
         robot.keyTap('=', [env.cmdOrCtrl]);
         await asyncSleep(1000);
-        let zoomLevel = await browserWindow.evaluate((window, id) => window.getBrowserViews().find((view) => view.webContents.id === id).webContents.getZoomFactor(), firstServerId);
+        let zoomLevel = await browserWindow.evaluate((window, id) => window.contentView.children.find((view) => view.webContents.id === id).webContents.getZoomFactor(), firstServerId);
         zoomLevel.should.be.greaterThan(1);
 
         robot.keyTap('0', [env.cmdOrCtrl]);
         await asyncSleep(1000);
-        zoomLevel = await browserWindow.evaluate((window, id) => window.getBrowserViews().find((view) => view.webContents.id === id).webContents.getZoomFactor(), firstServerId);
+        zoomLevel = await browserWindow.evaluate((window, id) => window.contentView.children.find((view) => view.webContents.id === id).webContents.getZoomFactor(), firstServerId);
         zoomLevel.should.be.equal(1);
     });
 
@@ -104,7 +104,7 @@ describe('menu/view', function desc() {
 
             robot.keyTap('=', [env.cmdOrCtrl]);
             await asyncSleep(1000);
-            const zoomLevel = await browserWindow.evaluate((window, id) => window.getBrowserViews().find((view) => view.webContents.id === id).webContents.getZoomFactor(), firstServerId);
+            const zoomLevel = await browserWindow.evaluate((window, id) => window.contentView.children.find((view) => view.webContents.id === id).webContents.getZoomFactor(), firstServerId);
             zoomLevel.should.be.greaterThan(1);
         });
 
@@ -144,7 +144,7 @@ describe('menu/view', function desc() {
 
             robot.keyTap('-', [env.cmdOrCtrl]);
             await asyncSleep(1000);
-            const zoomLevel = await browserWindow.evaluate((window, id) => window.getBrowserViews().find((view) => view.webContents.id === id).webContents.getZoomFactor(), firstServerId);
+            const zoomLevel = await browserWindow.evaluate((window, id) => window.contentView.children.find((view) => view.webContents.id === id).webContents.getZoomFactor(), firstServerId);
             zoomLevel.should.be.lessThan(1);
         });
 

diff --git a/i18n/en.json b/i18n/en.json
@@ -159,9 +159,9 @@
   "renderer.components.errorView.cannotConnectToAppName": "Cannot connect to {appName}",
   "renderer.components.errorView.havingTroubleConnecting": "We're having trouble connecting to {appName}. We'll continue to try and establish a connection.",
   "renderer.components.errorView.refreshThenVerify": "If refreshing this page (Ctrl+R or Command+R) does not work please verify that:",
-  "renderer.components.errorView.troubleshooting.browserView.canReachFromBrowserWindow": "You can reach <link>{url}</link> from a browser window.",
   "renderer.components.errorView.troubleshooting.computerIsConnected": "Your computer is connected to the internet.",
   "renderer.components.errorView.troubleshooting.urlIsCorrect.appNameIsCorrect": "The {appName} URL <link>{url}</link> is correct",
+  "renderer.components.errorView.troubleshooting.webContentsView.canReachFromBrowserWindow": "You can reach <link>{url}</link> from a browser window.",
   "renderer.components.input.required": "This field is required",
   "renderer.components.mainPage.contextMenu.ariaLabel": "Context menu",
   "renderer.components.mainPage.titleBar": "{appName}",