From 3c41630af532912a6f28dc0553efcfe9ae618dd5 Mon Sep 17 00:00:00 2001
From: kamre <eremchenko@gmail.com>
Date: Tue, 3 Aug 2021 02:31:17 +0700
Subject: [PATCH] Fix usages of element's computed style in Firefox: (#822)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- don't use shorthands like `borderLeft` or `font` because they are empty strings
  - construct font string that is required for setting into canvas context from
    individual font properties if `font` property is empty string

Co-authored-by: Scott Bishel <scott.bishel@mattermost.com>
Co-authored-by: Jesús Espino <jespinog@gmail.com>
---
 webapp/src/utils.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/webapp/src/utils.ts b/webapp/src/utils.ts
index d183dbd67..58d552c4d 100644
--- a/webapp/src/utils.ts
+++ b/webapp/src/utils.ts
@@ -86,7 +86,7 @@ class Utils {
                 myResults.padding += element.clientWidth
                 myResults.padding += Utils.getHorizontalBorder(style)
                 myResults.padding += Utils.getHorizontalMargin(style)
-                myResults.fontDescriptor = style.font
+                myResults.fontDescriptor = Utils.getFontString(style)
             } else {
                 switch (element.className) {
                 case IconClass:
@@ -97,7 +97,7 @@ class Utils {
                 case OpenButtonClass:
                     break
                 default: {
-                    myResults.fontDescriptor = style.font
+                    myResults.fontDescriptor = Utils.getFontString(style)
                     myResults.padding += Utils.getTotalHorizontalPadding(style)
                     const childResults = Utils.getFontAndPaddingFromChildren(element.children, myResults.padding)
                     if (childResults.fontDescriptor !== '') {
@@ -111,12 +111,25 @@ class Utils {
         return myResults
     }
 
+    private static getFontString(style: CSSStyleDeclaration): string {
+        if (style.font) {
+            return style.font
+        }
+        const {fontStyle, fontVariant, fontWeight, fontSize, lineHeight, fontFamily} = style
+        const props = [fontStyle, fontVariant, fontWeight]
+        if (fontSize) {
+            props.push(lineHeight ? `${fontSize} / ${lineHeight}` : fontSize)
+        }
+        props.push(fontFamily)
+        return props.join(' ')
+    }
+
     private static getHorizontalMargin(style: CSSStyleDeclaration): number {
         return parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10)
     }
 
     private static getHorizontalBorder(style: CSSStyleDeclaration): number {
-        return parseInt(style.borderLeft, 10) + parseInt(style.borderRight, 10)
+        return parseInt(style.borderLeftWidth, 10) + parseInt(style.borderRightWidth, 10)
     }
 
     private static getHorizontalPadding(style: CSSStyleDeclaration): number {