Website: browser compatibility updates (Edge v17, Chrome v55, Firefox v54, Opera v42, & Safari v10) (#10583)

Closes: #10496 

Changes:
- Fixed alignment issues with the <scrollable-tweets> component's page
indicator (Edge v16 & Safari 10)
- Added a hard-coded height to embedded youtube videos in Markdown
content to fix it rendering with a height of 0 (Edge v17 & Firefox v54)
- Fixed table example syntax highlighting (Edge v17, Chrome v55, Firefox
v54, Opera v42, & Safari v10)
- Added a set width to the edit page button on tables pages (Safari v10,
Firefox v54)
- Fixed a bug with the sidebar height on tables pages (Edge v17)
- Fixed styling on the pricing calculator inputs (Safari v10 & Firefox
v54)
- Fixed a layout issue with the pricing calculator call-to-action
buttons (Safari v10)
- Hid browser-specific form input buttons (Firefox v54)
- Fixed the sidebar CTA image on documentation pages (Opera v42)
- Fixed a CSS issue with the user story banner on `/platform` (Safari
v10, Firefox v54, Chrome v55, Opera v42)
- Updated the documentation page script to only copy links to the user's
clipboard if the user's browser supports it.
- Updated minimum browser versions for Edge, Chrome, and Opera for async
functions support. (Edge v16 » Edge v17, Chrome v51 » Chrome v55, Opera
v38 » Opera v42)

website/assets/js/pages/docs/basic-documentation.page.js

@@ -177,20 +177,22 @@ parasails.registerPage('basic-documentation', {
     for(let key in Object.values(headingsOnThisPage)){
       let heading = headingsOnThisPage[key];
       $(heading).click(()=> {
-        // Find the child <a> element
-        let linkToCopy = _.first($(heading).find('a.markdown-link'));
-        // If this heading has already been clicked and still has the copied class we'll just ignore this click
-        if(!$(heading).hasClass('copied')){
-          // If the link's href is missing, we'll copy the current url (and remove any hashes) to the clipboard instead
-          if(linkToCopy) {
-            navigator.clipboard.writeText(linkToCopy.href);
-          } else {
-            navigator.clipboard.writeText(heading.baseURI.split('#')[0]);
+        if(typeof navigator.clipboard !== 'undefined') {
+          // Find the child <a> element
+          let linkToCopy = _.first($(heading).find('a.markdown-link'));
+          // If this heading has already been clicked and still has the copied class we'll just ignore this click
+          if(!$(heading).hasClass('copied')){
+            // If the link's href is missing, we'll copy the current url (and remove any hashes) to the clipboard instead
+            if(linkToCopy) {
+              navigator.clipboard.writeText(linkToCopy.href);
+            } else {
+              navigator.clipboard.writeText(heading.baseURI.split('#')[0]);
+            }
+            // Add the copied class to the header to notify the user that the link has been copied.
+            $(heading).addClass('copied');
+            // Remove the copied class 5 seconds later, so we can notify the user again if they re-cick on this heading
+            setTimeout(()=>{$(heading).removeClass('copied');}, 5000);
           }
-          // Add the copied class to the header to notify the user that the link has been copied.
-          $(heading).addClass('copied');
-          // Remove the copied class 5 seconds later, so we can notify the user again if they re-cick on this heading
-          setTimeout(()=>{$(heading).removeClass('copied');}, 5000);
         }
       });
     }

website/assets/js/pages/osquery-table-details.page.js

@@ -82,7 +82,8 @@ parasails.registerPage('osquery-table-details', {
         // Now iterate through the keywordsToHighlight, replacing all matches in the elements innerHTML.
         let replacementHMTL = block.innerHTML;
         for(let keywordInExample of keywordsToHighlight) {
-          replacementHMTL = replacementHMTL.replaceAll(keywordInExample, '<span class="hljs-attr">'+keywordInExample+'</span>');
+          let regexForThisExample = new RegExp(keywordInExample, 'g');
+          replacementHMTL = replacementHMTL.replace(regexForThisExample, '<span class="hljs-attr">'+keywordInExample+'</span>');
         }
         $(block).html(replacementHMTL);
         // After we've highlighted our keywords, we'll highlight the rest of the codeblock
@@ -97,6 +98,7 @@ parasails.registerPage('osquery-table-details', {
     })();
     // Adjust the height of the sidebar navigation to match the height of the html partial
     (()=>{
+      $('[purpose="table-of-contents"]').css({'max-height': 120});
       let tablePartialHeight = $('[purpose="table-container"]').height();
       $('[purpose="table-of-contents"]').css({'max-height': tablePartialHeight - 120});
     })();

website/assets/styles/components/scrollable-tweets.component.less

@@ -22,6 +22,7 @@
     margin-top: 80px;
     padding-bottom: 16px;
     scrollbar-width: none;
+    -ms-overflow-style: none;
   }
 
   [purpose='tweet-card'] {

website/assets/styles/pages/articles/articles.less

@@ -91,7 +91,7 @@
             color: @core-fleet-black-50;
           }
           p {
-            margin-block-end: 0px;
+            margin-bottom: 0px;
           }
         }
       }

website/assets/styles/pages/articles/basic-article.less

@@ -251,6 +251,7 @@
       position: relative;
       margin-bottom: 40px;
       width: 100%;
+      min-height: 456px;
       padding-bottom: 57%;
       iframe {
         position: absolute;

website/assets/styles/pages/docs/basic-documentation.less

@@ -422,6 +422,7 @@
           margin-bottom: 16px;
           img {
             width: 124px;
+            height: 124px;
           }
         }
 
@@ -697,6 +698,7 @@
         position: relative;
         margin-bottom: 40px;
         width: 100%;
+        min-height: 456px;
         padding-bottom: 57%;
         iframe {
           position: absolute;

website/assets/styles/pages/homepage.less

@@ -341,6 +341,7 @@
       position: relative;
       padding-bottom: 54.5%;
       padding-top: 25px;
+      min-height: 456px;
       width: 100%;
       iframe {
         position: absolute;

website/assets/styles/pages/osquery-table-details.less

@@ -79,6 +79,7 @@
   }
   [purpose='left-sidebar'] {
     scrollbar-width: none;
+    -ms-overflow-style: none;
     background: #FFF;
     min-width: 245px;
     max-width: 250px;
@@ -327,7 +328,7 @@
     cursor: pointer;
     border: 1px solid @core-vibrant-blue;
     border-radius: 4px;
-    width: fit-content;
+    width: 106px;
     padding: 8px 12px;
     text-decoration: none;
     line-height: 20px;

website/assets/styles/pages/platform.less

@@ -85,7 +85,7 @@
       width: 100%;
       height: 180px;
     }
-    img:not(a > img) {
+    [purpose='schrodinger-logo'] {
       position: relative;
       display: inline;
       height: 100px;
@@ -278,7 +278,7 @@
         z-index: 0;
         height: 182px;
       }
-      img:not(a > img) {
+      [purpose='schrodinger-logo'] {
         left: 15px;
       }
     }
@@ -381,9 +381,9 @@
         width: calc(~'18px + 100%');
         height: calc(~'56px + 100%');
       }
-      img:not(a > img) {
+      [purpose='schrodinger-logo'] {
         position: relative;
-        display: inline;
+        display: block;
         height: 100px;
         z-index: 1;
         top: 0px;

website/assets/styles/pages/pricing.less

@@ -155,9 +155,10 @@
     width: 110%;
   }
   input[type='number'] {
-    -moz-appearance: none;
+    -moz-appearance: textfield;
     -webkit-appearance: none;
     appearance: textfield;
+    line-height: 1;
   }
   [purpose='enterprise-calculator'] {
     background: #F9FAFC;

website/assets/styles/pages/upgrade.less

@@ -51,9 +51,17 @@
       height: 48px;
       font-size: 16px;
       color: @core-fleet-black;
+      -webkit-appearance: none;
+    }
+    select {
+    // for hiding the <select> dropdown arrow on Firefox 54
+      -moz-appearance: none;
+      text-indent: 0.01px;
+      text-overflow: '';
     }
     input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
       -webkit-appearance: none;
+      -moz-appearance: none;
       margin: 0;
     }
     input[type='number'] {

website/views/layouts/layout.ejs

@@ -500,12 +500,12 @@
           Android: '6'
         };
         var LATEST_SUPPORTED_VERSION_BY_USER_AGENT = {
-          msedge: '16',
+          msedge: '17',
           // msie: '11',
           safari: '10',//« earliest version to eliminate rare bug where `window.location` doesn't exist momentarily after doing a server-side redirect
           firefox: '54',//« earliest version to support both ES6 (for Vue.js) and unprefixed flexbox (for Bootstrap 4)
-          chrome: '51',//« earliest version to support both ES6 (for Vue.js) and unprefixed flexbox (for Bootstrap 4)
-          opera: '38',//« earliest version to support both ES6 (for Vue.js) and unprefixed flexbox (for Bootstrap 4)
+          chrome: '55',//« earliest version to support both ES6 (for Vue.js), unprefixed flexbox (for Bootstrap 4), and async functions
+          opera: '42',//« earliest version to support both ES6 (for Vue.js), unprefixed flexbox (for Bootstrap 4), and async functions
         };
         var LATEST_SUPPORTED_VERSION_BY_BROWSER_NAME = {
           'microsoft edge': LATEST_SUPPORTED_VERSION_BY_USER_AGENT.msedge,

website/views/pages/platform.ejs

@@ -178,9 +178,9 @@
   <div class="container-fluid p-lg-0">
     <div purpose="platform-user-story-wrapper">
       <div purpose="platform-user-story" class="mx-auto">
-        <div class="flex-sm-row flex-column row justify-content-around justify-content-sm-between text-center text-sm-left">
+        <div class="flex-sm-row flex-column row justify-content-around justify-content-sm-between text-center text-sm-left d-block d-sm-flex">
           <div class="col-12 col-sm-4 pb-sm-0 pb-5 pr-md-5">
-            <img alt="Schrodinger logo" src="/images/platform/logo-schrodinger-150x150@2x.png">
+            <img alt="Schrodinger logo" purpose="schrodinger-logo" src="/images/platform/logo-schrodinger-150x150@2x.png">
             <svg class="d-none d-sm-inline" viewBox="0 0 238 181" fill="none" xmlns="http://www.w3.org/2000/svg">
               <circle cx="53.9834" cy="90.2871" r="183.5" fill="white"/>
             </svg>
@@ -188,7 +188,7 @@
             <circle cx="172.5" cy="-7.22607" r="183.5" fill="white"/>
             </svg>
           </div>
-          <div class="col-12 col-sm-8 flex-grow-1 justify-content-end align-self-sm-start align-self-end pt-sm-0 pt-4 mt-auto mt-sm-0 pl-md-4">
+          <div class="col-12 col-sm-8 flex-grow-1 justify-self-end align-self-sm-start align-self-end pt-sm-0 pt-4 mt-auto mt-sm-0 pl-md-4">
             <h3>Fleet user story</h3>
             <p>Jason Walton gives insight into how his team uses Fleet and osquery at Schrödinger.</p>
             <a href="https://blog.fleetdm.com/fleet-user-stories-200c94ca8a10" class="mt-3 mt-sm-0">Read more <img alt="A vibrant blue arrow pointing right" src="/images/platform/icon-right-arrow-vibrant-blue-16x16@2x.png"></a>

website/views/pages/pricing.ejs

@@ -335,13 +335,13 @@
         </div>
       </div>
     </div>
-    <div purpose="bottom-cta" class=" mx-auto">
+    <div purpose="bottom-cta" class="d-block mx-auto">
       <h2 class="text-center">Still have questions?</h2>
-      <div class="btn-toolbar justify-content-center" style="text-align: center" >
-        <a purpose="chat-button" style="max-width: 250px" class="btn btn-block btn-md btn-primary my-3 mx-2" @click="clickChatButton()">
+      <div class="d-flex flex-column flex-sm-row flex-nowrap btn-toolbar justify-content-center" style="text-align: center" >
+        <a purpose="chat-button" style="max-width: 250px" class="mx-auto justify-self-center btn btn-block btn-md btn-primary my-3 mx-sm-2" @click="clickChatButton()">
           Ask us anything
         </a>
-        <a style="max-width: 350px" class="btn btn-block btn-lg btn-white my-3 mx-2" purpose="animated-arrow-button" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=pricing+demo+bottom">
+        <a style="max-width: 250px" class="btn btn-block btn-lg btn-white my-3 mx-sm-2 mx-auto" purpose="animated-arrow-button" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=pricing+demo+bottom">
           Talk to an expert
         </a>
       </div>