From 94cc15168c51ade5acb940dd8f369d78aff6f3d6 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Fri, 4 Feb 2022 11:05:06 -0500
Subject: [PATCH] [MM-41559] Dynamically size URL view to avoid overlapping
 bottom links (#1991)

---
 src/common/communication.ts                |  2 ++
 src/main/preload/urlView.js                | 22 +++++++++++++++++++++
 src/main/views/viewManager.ts              | 23 +++++++++++++++-------
 src/renderer/components/urlDescription.tsx | 15 ++++++++++++--
 webpack.config.main.js                     |  1 +
 5 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 src/main/preload/urlView.js

diff --git a/src/common/communication.ts b/src/common/communication.ts
index 7e7dda3a..bd0f9e69 100644
--- a/src/common/communication.ts
+++ b/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';
diff --git a/src/main/preload/urlView.js b/src/main/preload/urlView.js
new file mode 100644
index 00000000..d66de1cc
--- /dev/null
+++ b/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);
+    }
+});
diff --git a/src/main/views/viewManager.ts b/src/main/views/viewManager.ts
index 7588364b..29f6ebe4 100644
--- a/src/main/views/viewManager.ts
+++ b/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();
             };
         }
diff --git a/src/renderer/components/urlDescription.tsx b/src/renderer/components/urlDescription.tsx
index 0fabb76c..8b28b9ec 100644
--- a/src/renderer/components/urlDescription.tsx
+++ b/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>
         );
diff --git a/webpack.config.main.js b/webpack.config.main.js
index 05e55f96..ead82d11 100644
--- a/webpack.config.main.js
+++ b/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/'),