[MM-41559] Dynamically size URL view to avoid overlapping bottom links (#1991)

src/common/communication.ts

@@ -104,3 +104,5 @@ export const GET_MODAL_UNCLOSEABLE = 'get-modal-uncloseable';
 export const MODAL_UNCLOSEABLE = 'modal-uncloseable';
 
 export const UPDATE_PATHS = 'update-paths';
+
+export const UPDATE_URL_VIEW_WIDTH = 'update-url-view-width';

src/main/preload/urlView.js

@@ -0,0 +1,22 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+// Copyright (c) 2015-2016 Yuya Ochiai
+
+'use strict';
+
+import {ipcRenderer} from 'electron';
+
+import {UPDATE_URL_VIEW_WIDTH} from 'common/communication';
+
+console.log('preloaded for the url view');
+
+window.addEventListener('message', async (event) => {
+    switch (event.data.type) {
+    case UPDATE_URL_VIEW_WIDTH:
+        ipcRenderer.send(UPDATE_URL_VIEW_WIDTH, event.data.data);
+        break;
+    default:
+        console.log(`got a message: ${event}`);
+        console.log(event);
+    }
+});

src/main/views/viewManager.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 import log from 'electron-log';
-import {BrowserView, BrowserWindow, dialog, ipcMain} from 'electron';
+import {BrowserView, BrowserWindow, dialog, ipcMain, IpcMainEvent} from 'electron';
 import {BrowserViewConstructorOptions} from 'electron/main';
 
 import {Tab, TeamWithTabs} from 'types/config';
@@ -18,6 +18,7 @@ import {
     OPEN_TAB,
     BROWSER_HISTORY_PUSH,
     UPDATE_LAST_ACTIVE,
+    UPDATE_URL_VIEW_WIDTH,
 } from 'common/communication';
 import Config from 'common/config';
 import urlUtils from 'common/utils/url';
@@ -289,9 +290,11 @@ export class ViewManager {
         }
         if (url && url !== '') {
             const urlString = typeof url === 'string' ? url : url.toString();
+            const preload = getLocalPreload('urlView.js');
             const urlView = new BrowserView({
                 webPreferences: {
                     nativeWindowOpen: true,
+                    preload,
 
                     // Workaround for this issue: https://github.com/electron/electron/issues/30993
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -303,12 +306,6 @@ export class ViewManager {
             urlView.webContents.loadURL(localURL);
             this.mainWindow.addBrowserView(urlView);
             const boundaries = this.mainWindow.getBounds();
-            urlView.setBounds({
-                x: 0,
-                y: boundaries.height - URL_VIEW_HEIGHT,
-                width: boundaries.width,
-                height: URL_VIEW_HEIGHT,
-            });
 
             const hideView = () => {
                 delete this.urlViewCancel;
@@ -321,11 +318,23 @@ export class ViewManager {
                 urlView.webContents.destroy();
             };
 
+            const adjustWidth = (event: IpcMainEvent, width: number) => {
+                urlView.setBounds({
+                    x: 0,
+                    y: boundaries.height - URL_VIEW_HEIGHT,
+                    width: width + 5, // add some padding to ensure that we don't cut off the border
+                    height: URL_VIEW_HEIGHT,
+                });
+            };
+
+            ipcMain.on(UPDATE_URL_VIEW_WIDTH, adjustWidth);
+
             const timeout = setTimeout(hideView,
                 URL_VIEW_DURATION);
 
             this.urlViewCancel = () => {
                 clearTimeout(timeout);
+                ipcMain.removeListener(UPDATE_URL_VIEW_WIDTH, adjustWidth);
                 hideView();
             };
         }

src/renderer/components/urlDescription.tsx

@@ -1,12 +1,23 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useEffect} from 'react';
+
+import {UPDATE_URL_VIEW_WIDTH} from 'common/communication';
 
 export default function UrlDescription(props: {url: string}) {
+    const urlRef = React.createRef<HTMLDivElement>();
+
+    useEffect(() => {
+        window.postMessage({type: UPDATE_URL_VIEW_WIDTH, data: urlRef.current?.scrollWidth}, window.location.href);
+    }, []);
+
     if (props.url) {
         return (
-            <div className='HoveringURL HoveringURL-left'>
+            <div
+                ref={urlRef}
+                className='HoveringURL HoveringURL-left'
+            >
                 <p>{props.url}</p>
             </div>
         );

webpack.config.main.js

@@ -22,6 +22,7 @@ module.exports = merge(base, {
         preload: './src/main/preload/mattermost.js',
         modalPreload: './src/main/preload/modalPreload.js',
         loadingScreenPreload: './src/main/preload/loadingScreenPreload.js',
+        urlView: './src/main/preload/urlView.js',
     },
     output: {
         path: path.join(__dirname, 'dist/'),