Show the OS on the front page (if we can get it from the user agent).

Author: lgarron

domains/misc/badssl.com/index.html

@@ -20,7 +20,7 @@
       margin: 5vh auto;
       padding: 0 3vw 0 3vw;
     }
-    #links a, #links #ua {
+    #links a, #links .browser-info {
       font-family: "Source Code Pro", Monaco, Consolas, "Courier New", monospace, Impact;
       font-size: 3.5vh;
       padding: 0.75vh 10vw 0.75vh 10vw;
@@ -37,17 +37,18 @@
       transition: all 150ms;
       font-weight: bold;
     }
-    #links #ua {
+    #links .browser-info {
       margin-top: 3vh;
       padding: 0.75vh 0vh;
+      line-height: 1.5em;
     }
     @media (min-height: 1000px) {
-      #links a, #links #ua {
+      #links a, #links .browser-info {
           font-size: 2.5vh;
       }
     }
     @media (max-width: 600px) and (min-height: 600px) {
-      #links a, #links #ua {
+      #links a, #links .browser-info {
           font-size: 5vw;
       }
     }
@@ -119,28 +120,63 @@
   </style>
   <script>
 
-  function simplifyUserAgent(ua) {
+  function getBrowserVersion(ua) {
+    var ua = navigator.userAgent;
+
     var regexes = [
-      /Chrome\/[\d\.]*\b/,
-      /CriOS\/[\d\.]*\b/,
-      /Firefox\/[\d\.]*\b/,
-      /OPR\/[\d\.]*\b/,
-      /OPiOS\/[\d\.]*\b/,
-      /Version\/[\d\.]*\b/ /* Safari has "Version/8.0.5 Safari/600.5.17", but "Safari/600.5.17" is the WebKit version, which Chrome and Opera also include. */
-    ]
+
+      [/^.*Chrome\/([\d\.]*)\b.*$/, "Chrome $1"],
+      [/^.*CriOS\/([\d\.]*)\b.*$/, "Chrome $1"],
+      [/^.*Firefox\/([\d\.]*)\b.*$/, "Firefox $1"],
+      [/^.*OPR\/([\d\.]*)\b.*$/, "Opera $1"],
+      [/^.*OPiOS\/([\d\.]*)\b.*$/, "Opera Mini $1"],
+      /* This has to go last: Safari has "Version/8.0.5 Safari/600.5.17", but "Safari/600.5.17" is the WebKit version, which Chrome and Opera also include.*/
+      [/^.*Version\/([\d\.]*)\b.*$/, "Safari $1"]
+    ];
 
     for (i in regexes) {
-      var match = regexes[i].exec(ua);
+      var match = regexes[i][0].exec(ua);
       if (match) {
-        return match[0];
+        return ua.replace(regexes[i][0], regexes[i][1]);
       }
     }
     return ua;
   }
 
+  function getOS() {
+    var ua = navigator.userAgent;
+
+    var regexes = [
+      [/^.*Mac OS X (\d+)_(\d+)_(\d+).*$/g, "OSX $1.$2.$3"], // OSX Chrome, OSX Safari, OSX Opera
+      [/^.*Mac OS X (\d+)_(\d+).*$/g, "OSX $1.$2"], // Just in case?
+      [/^.*Mac OS X (\d+)\.(\d+).*$/g, "OSX $1.$2"], // OSX Firefox
+      [/^.*iPhone OS (\d+)_(\d+).*OPiOS.*$/g, null], // iPhone Opera doesn't seem to pick up the OS dynamically?
+      [/^.*iPhone OS (\d+)_(\d+).*$/g, "iOS $1.$2 (iPhone)"], // iPhone WebKit
+      [/^.*iPad.*OS (\d+)_(\d+).*$/g, "iOS $1.$2 (iPad)"], // iPad WebKit
+      [/^.*Android (\d+(\.\d+)+).*; ([^;]+) Build.*$/g, "Android $1 ($3)"], // Android + device name
+      [/^.*Android (\d+(\.\d+)+).*$/g, "Android $1"],
+      [/^.*Linux.*$/g, "Linux"],
+      [/^.*Windows.*$/g, "Windows"],
+    ];
+
+    for (i in regexes) {
+      var match = regexes[i][0].exec(ua);
+      if (match) {
+        if (!regexes[i][1]) {
+          return null;
+        }
+        return ua.replace(regexes[i][0], regexes[i][1]);
+      }
+    }
+    return null;
+  }
+
   window.addEventListener("load", function() {
     document.getElementById("ua").title = navigator.userAgent;
-    document.getElementById("ua").innerHTML = "UA: " + simplifyUserAgent(navigator.userAgent);
+    document.getElementById("ua").textContent = getBrowserVersion();
+    if (getOS()) {
+      document.getElementById("os").textContent = getOS();
+    }
     console.log(navigator.userAgent);
     document.getElementById("reveal-more").addEventListener("click", function(e) {
       document.getElementById("links").classList.add("show-more");
@@ -184,7 +220,11 @@
     <a href="https://mixed.badssl.com/mixed/font" class="more bad no-interstitial">mixed/font</a>
     <a href="https://long-extended-subdomain-name-containing-many-letters-and-dashes.badssl.com/" class="more good">long-extended-subdomain-name-containing-many-letters-and-dashes</a>
     <a href="https://longextendedsubdomainnamewithoutdashesinordertotestwordwrapping.badssl.com/" class="more good">longextended<wbr>subdomainname<wbr>withoutdashes<wbr>inordertotest<wbr>wordwrapping</a>
-    <div id="ua"></div>
+    <div class="browser-info">
+      <span id="ua"></span>
+      <br>
+      <span id="os"></span>
+    </div>
   </div>
 
   <!-- Start of GitHub ribbon. -->