#615 Update Firefox support (#617)

NASA-AMMOS · Jan 16, 2025 · cbd30e3 · cbd30e3
1 parent f27c2eb
commit cbd30e3
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 27 deletions.
diff --git a/src/App.js b/src/App.js
@@ -2,11 +2,19 @@ import React from 'react'
 import essence from './essence/essence'
 import $ from 'jquery'
 import LandingPage from './essence/LandingPage/LandingPage'
+import F_ from './essence/Basics/Formulae_/Formulae_'
 
 import calls from './pre/calls'
 
 //Start MMGIS
 $(document).ready(function () {
+    const browser = F_.getBrowser()
+    if (browser === 'firefox') {
+        $('body').css({
+            'scrollbar-color': 'var(--color-a2) transparent',
+            'scrollbar-width': 'thin',
+        })
+    }
     if (window.mmgisglobal.FORCE_CONFIG_PATH) {
         var u = window.location.href.split('?s=')
         if (!u[1]) {

diff --git a/src/css/mmgisUI.css b/src/css/mmgisUI.css
@@ -1501,6 +1501,12 @@ input[type='range'].verticalSlider:focus::-ms-fill-upper {
     color: var(--color-mmgis);
 }
 
+input[type='number'] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+    margin: 0;
+}
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;

diff --git a/src/essence/Ancillary/TimeUI.css b/src/essence/Ancillary/TimeUI.css
@@ -68,6 +68,7 @@
     border-top: 2px solid rgba(0, 0, 0, 0);
     border-bottom: 2px solid rgba(0, 0, 0, 0);
     transition: border 0.2s ease-in;
+    font-family: roboto;
 }
 #mmgisTimeUI input:focus {
     border-bottom: 2px solid var(--color-c);

diff --git a/src/essence/Basics/Layers_/LayerConstructors.js b/src/essence/Basics/Layers_/LayerConstructors.js
@@ -108,41 +108,41 @@ export const constructVectorLayer = (
             } else {
                 // Priority to prop, prop.color, then style color.
                 var finalCol =
-                    col.toLowerCase().substring(0, 4) === 'prop'
+                    col != null && col.toLowerCase().substring(0, 4) === 'prop'
                         ? F_.parseColor(feature.properties[col.substring(5)]) ||
                           '#FFF'
                         : feature.style && feature.style.stroke != null
                         ? feature.style.stroke
                         : col
                 var finalOpa =
-                    opa.toLowerCase().substring(0, 4) === 'prop'
+                    opa != null && opa.toLowerCase().substring(0, 4) === 'prop'
                         ? feature.properties[opa.substring(5)] || '1'
                         : feature.style && feature.style.opacity != null
                         ? feature.style.opacity
                         : opa
                 var finalWei =
-                    wei.toLowerCase().substring(0, 4) === 'prop'
+                    wei != null && wei.toLowerCase().substring(0, 4) === 'prop'
                         ? feature.properties[wei.substring(5)] || '1'
                         : feature.style && feature.style.weight != null
                         ? feature.style.weight
                         : wei
                 if (!isNaN(parseInt(finalWei))) finalWei = parseInt(finalWei)
                 var finalFiC =
-                    fiC.toLowerCase().substring(0, 4) === 'prop'
+                    fiC != null && fiC.toLowerCase().substring(0, 4) === 'prop'
                         ? F_.parseColor(feature.properties[fiC.substring(5)]) ||
                           '#000'
                         : feature.style && feature.style.fill != null
                         ? feature.style.fill
                         : fiC
                 var finalFiO =
-                    fiO.toLowerCase().substring(0, 4) === 'prop'
+                    fiO != null && fiO.toLowerCase().substring(0, 4) === 'prop'
                         ? feature.properties[fiO.substring(5)] || '1'
                         : feature.style && feature.style.fillopacity != null
                         ? feature.style.fillopacity
                         : fiO
 
                 var finalRad =
-                    rad.toLowerCase().substring(0, 4) === 'prop'
+                    rad != null && rad.toLowerCase().substring(0, 4) === 'prop'
                         ? feature.properties[rad.substring(5)] || '8'
                         : feature.style &&
                           feature.style.radius != null &&
@@ -158,11 +158,13 @@ export const constructVectorLayer = (
                         ? ' noPointerEvents'
                         : ''
 
-                layerObj.style.color = finalCol
-                layerObj.style.opacity = finalOpa
-                layerObj.style.weight = finalWei
-                layerObj.style.fillColor = finalFiC
-                layerObj.style.fillOpacity = finalFiO
+                layerObj.style.color = finalCol || '#FFF'
+                layerObj.style.opacity = finalOpa === 'undefined' ? 1 : finalOpa
+                layerObj.style.weight =
+                    finalWei === 'undefined' ? '2' : finalWei
+                layerObj.style.fillColor = finalFiC || '#FFF'
+                layerObj.style.fillOpacity =
+                    finalFiO === 'undefined' ? '1' : finalFiO
                 layerObj.style.radius = finalRad || 8
             }
             if (

diff --git a/src/essence/Tools/Draw/DrawTool.css b/src/essence/Tools/Draw/DrawTool.css
@@ -132,7 +132,7 @@
 #drawToolDrawingSettingsToggle {
     color: #aaa;
     width: 46px;
-    padding-top: 7px;
+    padding-top: 5px;
     text-align: center;
     cursor: pointer;
     transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1),
@@ -310,7 +310,6 @@
     height: 30px;
 }
 
-
 #drawToolDrawFilterDiv {
     background: var(--color-b);
     display: flex;
@@ -2468,7 +2467,6 @@
     background-color: var(--color-a1-5);
 }
 
-
 /*FILE INFO TEMPLATE MODAL*/
 #drawToolFileTemplateEditModal {
     background: var(--color-a-5);
@@ -2564,7 +2562,7 @@
     line-height: 18px;
     padding: 3px 3px;
     font-size: 13px;
-    box-shadow: 0px 4px 3px 0px rgba(0,0,0,0.2);
+    box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.2);
 }
 #DrawTool_TimeToggle > div:first-child {
     padding: 0px 6px 0px 5px;

diff --git a/src/essence/Tools/Layers/LayersTool.js b/src/essence/Tools/Layers/LayersTool.js
@@ -66,7 +66,7 @@ const INDENT_COLOR = 'var(--color-a)'
 
 var LayersTool = {
     height: 0,
-    width: 340,
+    width: 350,
     vars: {},
     MMGISInterface: null,
     orderingHistory: [],

diff --git a/src/essence/Tools/Shade/ShadeTool.js b/src/essence/Tools/Shade/ShadeTool.js
@@ -29,7 +29,7 @@ const helpKey = 'ShadeTool'
 
 let ShadeTool = {
     height: 0,
-    width: 250,
+    width: 260,
     vars: null,
     shadeTimeout: null,
     shadeElmCount: 0,

diff --git a/src/external/Dropy/dropy.css b/src/external/Dropy/dropy.css
@@ -5,10 +5,12 @@ dl {
     -webkit-margin-before: 0;
     -webkit-margin-after: 0;
     -webkit-padding-start: 0;
+    padding-left: 0;
 }
 
 dd {
     -webkit-margin-start: 0;
+    margin-inline-start: 0;
 }
 
 /* Dropy style */
@@ -67,6 +69,7 @@ dd {
     top: 0;
     right: 0;
     left: 0;
+    margin-inline-start: 0;
 }
 .dropy__content ul {
     z-index: 1;
@@ -130,6 +133,7 @@ dd {
     max-height: 20em;
     overflow-y: auto;
     opacity: 1;
+    padding-left: 0;
 }
 
 .dropy.dark .dropy__title {
@@ -173,4 +177,4 @@ dd {
 }
 .dropy.openHorizontal .dropy__content > ul {
     display: flex;
-}
+}
diff --git a/src/external/Leaflet/leaflet.tilelayer.gl.js b/src/external/Leaflet/leaflet.tilelayer.gl.js
@@ -622,7 +622,9 @@
                         ) {
                             tile.src =
                                 layer.dataUrls[coords.z][coords.x][coords.y]
-                            resolve(tile)
+                            tile.onload = () => {
+                                resolve(tile)
+                            }
                         } else {
                             reject(tile)
                         }

diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,17 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+        'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+        monospace;
+}
+
+input {
+    font-family: roboto;
 }