From 9303c6c1ca1bb6d547174f9ce6d9a863666c5e88 Mon Sep 17 00:00:00 2001
From: Yuin Chien <yuin@google.com>
Date: Wed, 6 Mar 2019 10:17:39 -0800
Subject: [PATCH] Added browser support section in docs site

---
 examples/styles/examples.css | 130 +++++++++++++++++++++++++++++++++--
 index.html                   | 119 +++++++++++++++++++++++++++++++-
 2 files changed, 240 insertions(+), 9 deletions(-)

diff --git a/examples/styles/examples.css b/examples/styles/examples.css
index 72f656fd92..6f1fa71831 100644
--- a/examples/styles/examples.css
+++ b/examples/styles/examples.css
@@ -36,6 +36,123 @@ a {
   text-decoration: none;
   color: #ff5252;
 }
+b {
+  font-weight: 500;
+}
+table {
+  text-align: left;
+  border-spacing: 0;
+  display: table;
+  border-collapse: collapse;
+  width: 100%;
+}
+table.browser-support {
+  margin-bottom: 32px;
+}
+table.browser-support td:first-child,
+table.browser-support th:first-child {
+  display: block;
+  line-height: 24px;
+  padding: 12px 2px 8px 0;
+  text-align:left;
+  flex:2;
+  min-width: 92px;
+}
+table.browser-support tr {
+  display: flex;
+  border-top: 1px solid rgba(0,0,0,.15);
+}
+table.browser-support tr:first-child {
+  border-top: none;
+}
+table.browser-support th,
+table.browser-support td {
+  flex: 1;
+  font-weight: 400;
+  line-height: 0;
+  padding: 10px 0 10px 0;
+  text-align: center;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+}
+table.browser-support th {
+  color: rgba(0,0,0,.54);
+}
+table.browser-support td {
+  color: #ff5252;
+}
+table.browser-support img {
+  width: 24px;
+  height: 24px;
+}
+.browser-support-desc {
+  max-width: 420px;
+  position: relative;
+  margin-bottom: 16px;
+}
+.browser-support-desc:before {
+  display: block;
+  width: 40px;
+  height: 2px;
+  background: rgba(0,0,0,.15);
+  margin: 40px 0 20px 0;
+  content: "";
+}
+
+.icon-desc {
+  padding: 8px 0;
+  width: 50%;
+  min-width: 240px;
+  float: left;
+}
+.icon-desc > * {
+  margin-right: 16px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.size-24 {
+  width: 24px;
+  height: 24px;
+}
+.logo-chrome {
+  content: url("https://github.com/alrra/browser-logos/raw/master/src/chrome/chrome_48x48.png");
+}
+.logo-canary {
+  content: url("https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome-canary/chrome-canary_48x48.png");
+}
+.logo-safari {
+  content: url("https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png");
+}
+.logo-firefox {
+  content: url("https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png");
+}
+.logo-edge {
+  content: url("https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png");
+}
+.logo-ie {
+  content: url("https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png");
+}
+.icon-check {
+  opacity: .6;
+  content: url("https://www.gstatic.com/images/icons/material/system/2x/done_black_24dp.png");
+}
+.icon-warning {
+  opacity: .6;
+  /* content: url("https://www.gstatic.com/images/icons/material/system/2x/check_circle_outline_black_24dp.png"); */
+  content: url("https://www.gstatic.com/images/icons/material/system/2x/assignment_turned_in_black_24dp.png");
+  /* content: url("https://www.gstatic.com/images/icons/material/system/2x/error_outline_black_20dp.png"); */
+  /* content: url("https://www.gstatic.com/images/icons/material/system/2x/warning_black_24dp.png"); */
+}
+.icon-na {
+  opacity: .6;
+  content: url("https://www.gstatic.com/images/icons/material/system/2x/not_interested_black_24dp.png");
+}
+.icon-flag {
+  opacity: .5;
+  content: url("https://www.gstatic.com/images/icons/material/system/2x/flag_black_24dp.png");
+}
+
 h1, h2, h3, h4 {
   font-weight: 400;
 }
@@ -392,6 +509,12 @@ paper-button {
   #list-example {
     grid-template-columns: 1fr;
   }
+  .content .wrapper {
+    margin: 0px 20px;
+    padding-top: 24px;
+    min-height: auto;
+    border-bottom: none;
+  }
 }
 
 @media only screen and (max-width: 800px) {
@@ -434,12 +557,7 @@ paper-button {
     display: block;
     content: "";
   }
-  .content .wrapper {
-    margin: 0px 20px;
-    padding-top: 24px;
-    min-height: auto;
-    border-bottom: none;
-  }
+
   .content h2 {
     padding-left: 8px;
     padding-right: 8px;
diff --git a/index.html b/index.html
index 7954d5c4d9..c384056ca3 100644
--- a/index.html
+++ b/index.html
@@ -114,7 +114,7 @@ <h1 style="white-space:nowrap;"><span>&lt;</span>model-viewer<span>&gt;</span></
           <h3>Easily display interactive 3D models on the web & in AR</h3>
         </div>
 
-        <h3 class="grouping-title">EXAMPLES</h3>
+        <h3 class="grouping-title">Examples</h3>
         <ul id="list-example">
           <li>
             <a href="examples/lighting-and-environment.html"><h4>Lighting &amp; Environment</h4></a>
@@ -138,7 +138,7 @@ <h3 class="grouping-title">EXAMPLES</h3>
           </li>
         </ul>
 
-        <h3 class="grouping-title">ATTRIBUTES</h3>
+        <h3 class="grouping-title">Attributes</h3>
 
         <ul class="list-attribute">
           <li>
@@ -229,7 +229,7 @@ <h4>unstable-webxr</h4>
         <p style="color:rgba(0,0,0,.54);">Note: All attributes have a corresponding property in camel-case format. For example, the background-color attribute can also be configured using the backgroundColor property.</p>
 
 
-        <h3 class="grouping-title" style="margin-top: 40px;">EVENTS</h3>
+        <h3 class="grouping-title" style="margin-top: 40px;">Events</h3>
 
         <ul class="list-attribute">
           <li>
@@ -246,6 +246,119 @@ <h4>load</h4>
             <h4>preload</h4>
             <p>When preload is enabled this event is fired when preloading is done.</p>
           </li>
+        </ul>
+
+        <h3 class="grouping-title" style="margin-top: 40px;">Browser Support</h3>
+
+        <div class="icon-desc"><img class="size-24 icon-check"><div>Natively supported</div></div>
+        <div class="icon-desc"><img class="size-24 icon-warning"><div>Available with polyfill</div></div>
+        <div class="icon-desc"><img class="size-24 icon-flag"><div>Behind a flag, unstable</div></div>
+        <div class="icon-desc"><img class="size-24 icon-na"><div>Not available</div></div>
+
+        <div style="clear:both"></div>
+
+        <p class="browser-support-desc">These browser features are <b>required</b> for <span class="attribute">&lt;model-viewer&gt;</span> to work correctly:</p>
+        <table class="browser-support">
+          <tr>
+            <th>Feature</th>
+            <th><img class="logo-chrome" title="Chrome" alt="Chrome"></th>
+            <th><img class="logo-canary" title="Canary" alt="Canary"></th>
+            <th><img class="logo-safari" title="Safari 12" alt="Safari 12"></th>
+            <th><img class="logo-firefox" title="Firefox 65" alt="Firefox 65" src="logo-firefox"></th>
+            <th><img class="logo-edge" title="Edge" alt="Edge"></th>
+            <th><img class="logo-ie" title="IE 11" alt="IE 11"></th>
+          </tr>
+          <tr>
+            <td>Custom Elements</td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-warning"></td>
+            <td><img class="icon-warning"></td>
+          </tr>
+          <tr>
+            <td>Shadow DOM</td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-warning"></td>
+            <td><img class="icon-warning"></td>
+          </tr>
+        </table>
+
+        <p class="browser-support-desc">These browser features are <b>optional</b> and are only used if available for performance optimization:</p>
+        <table class="browser-support">
+          <tr>
+            <th>Feature</th>
+            <th><img class="logo-chrome" title="Chrome" alt="Chrome"></th>
+            <th><img class="logo-canary" title="Canary" alt="Canary"></th>
+            <th><img class="logo-safari" title="Safari 12" alt="Safari 12"></th>
+            <th><img class="logo-firefox" title="Firefox 65" alt="Firefox 65" src="logo-firefox"></th>
+            <th><img class="logo-edge" title="Edge" alt="Edge"></th>
+            <th><img class="logo-ie" title="IE 11" alt="IE 11"></th>
+          </tr>
+          <tr>
+            <td>Resize Observer</td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-warning"></td>
+            <td><img class="icon-warning"></td>
+            <td><img class="icon-warning"></td>
+            <td><img class="icon-warning"></td>
+          </tr>
+          <tr>
+            <td>Intersection Observer</td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-warning"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-warning"></td>
+          </tr>
+        </table>
+
+        <p class="browser-support-desc">These browser features are <b>optional</b> and are only needed if you wish to use the unstable-webxr feature:</p>
+        <table class="browser-support">
+          <tr>
+            <th>Feature</th>
+            <th><img class="logo-chrome" title="Chrome" alt="Chrome"></th>
+            <th><img class="logo-canary" title="Canary" alt="Canary"></th>
+            <th><img class="logo-safari" title="Safari 12" alt="Safari 12"></th>
+            <th><img class="logo-firefox" title="Firefox 65" alt="Firefox 65" src="logo-firefox"></th>
+            <th><img class="logo-edge" title="Edge" alt="Edge"></th>
+            <th><img class="logo-ie" title="IE 11" alt="IE 11"></th>
+          </tr>
+          <tr>
+            <td>Fullscreen API</td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-warning"></td>
+            <td><img class="icon-check"></td>
+            <td><img class="icon-warning"></td>
+            <td><img class="icon-warning"></td>
+          </tr>
+          <tr>
+            <td>WebXR Device API</td>
+            <td><img class="icon-na"></td>
+            <td><img class="icon-flag"></td>
+            <td><img class="icon-na"></td>
+            <td><img class="icon-na"></td>
+            <td><img class="icon-na"></td>
+            <td><img class="icon-na"></td>
+          </tr>
+          <tr>
+            <td>WebXR HitTest API</td>
+            <td><img class="icon-na"></td>
+            <td><img class="icon-flag"></td>
+            <td><img class="icon-na"></td>
+            <td><img class="icon-na"></td>
+            <td><img class="icon-na"></td>
+            <td><img class="icon-na"></td>
+          </tr>
+        </table>
+
       </div>
     </div>