Improved rendering performance by combining upstream observables

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.7b9051f7.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7b9051f7.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.aad0415a.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.aad0415a.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.1696ff1a.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.1696ff1a.min.js.map",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.0c35f0aa.min.js",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.0c35f0aa.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2613054f.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.2613054f.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.822f5098.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.e81a0042.min.css",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.31180ff2.min.css"
 }

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.822f5098.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.e81a0042.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.31180ff2.min.css' | url }}">
       {% endif %}
@@ -177,8 +177,8 @@
       <script>var __config={}</script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.aad0415a.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.7b9051f7.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.0c35f0aa.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.1696ff1a.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/javascripts/browser/viewport/_/index.ts

@@ -93,10 +93,13 @@ export function watchViewport(): Observable<Viewport> {
 export function watchViewportAt(
   el: HTMLElement, { header$, viewport$ }: WatchAtOptions
 ): Observable<Viewport> {
-  const offset$ = combineLatest([
-    viewport$.pipe(distinctUntilKeyChanged("size")),
-    header$
-  ])
+  const size$ = viewport$
+    .pipe(
+      distinctUntilKeyChanged("size")
+    )
+
+  /* Compute element offset */
+  const offset$ = combineLatest([size$, header$])
     .pipe(
       map((): ViewportOffset => ({
         x: el.offsetLeft,

src/assets/javascripts/components/main/react/index.ts

@@ -103,33 +103,25 @@ export function watchMain(
       shareReplay(1)
     )
 
-  /* Compute the main area's visible height */
-  const height$ = combineLatest([adjust$, marker$, viewport$])
+  /* Compute the main area's offset, visible height and if we scrolled past */
+  return combineLatest([adjust$, marker$, viewport$])
     .pipe(
       map(([header, { top, bottom }, { offset: { y }, size: { height } }]) => {
-        return height
+        height = Math.max(0, height
           - Math.max(0, top    - y,  header)
           - Math.max(0, height + y - bottom)
+        )
+        return {
+          offset: top - header,
+          height,
+          active: y >= top - header
+        }
       }),
-      map(height => Math.max(0, height)),
-      distinctUntilChanged()
-    )
-
-  /* Compute whether the viewport offset is past the main area's top */
-  const active$ = combineLatest([adjust$, marker$, viewport$])
-    .pipe(
-      map(([header, { top }, { offset: { y } }]) => y >= top - header),
-      distinctUntilChanged()
-    )
-
-  /* Combine into a single observable */
-  return combineLatest([adjust$, marker$, height$, active$])
-    .pipe(
-      map(([header, { top }, height, active]) => ({
-        offset: top - header,
-        height,
-        active
-      }))
+      distinctUntilChanged<Main>((a, b) => {
+        return a.offset === b.offset
+            && a.height === b.height
+            && a.active === b.active
+      })
     )
 }
 

src/assets/javascripts/components/shared/sidebar/react/index.ts

@@ -92,28 +92,22 @@ export function watchSidebar(
   const adjust = el.parentElement!.offsetTop
                - el.parentElement!.parentElement!.offsetTop
 
-  /* Compute the sidebar's available height */
-  const height$ = combineLatest([main$, viewport$])
+  /* Compute the sidebar's available height and if it should be locked */
+  return combineLatest([main$, viewport$])
     .pipe(
-      map(([{ offset, height }, { offset: { y } }]) => (
-        height
+      map(([{ offset, height }, { offset: { y } }]) => {
+        height = height
           + Math.min(adjust, Math.max(0, y - offset))
           - adjust
-      )),
-      distinctUntilChanged()
-    )
-
-  /* Compute whether the sidebar should be locked */
-  const lock$ = combineLatest([main$, viewport$])
-    .pipe(
-      map(([{ offset }, { offset: { y } }]) => y >= offset + adjust),
-      distinctUntilChanged()
-    )
-
-  /* Combine into single observable */
-  return combineLatest([height$, lock$])
-    .pipe(
-      map(([height, lock]) => ({ height, lock }))
+        return {
+          height,
+          lock: y >= offset + adjust
+        }
+      }),
+      distinctUntilChanged<Sidebar>((a, b) => {
+        return a.height === b.height
+            && a.lock   === b.lock
+      })
     )
 }
 

src/assets/stylesheets/base/_reset.scss

@@ -54,11 +54,6 @@ hr {
   overflow: visible;
 }
 
-// Remove gaps in underlined links in iOS >= 8 and Safari >= 8
-a {
-  -webkit-text-decoration-skip: objects; // stylelint-disable-line
-}
-
 // Reset tap outlines on iOS and Android
 a,
 button,
@@ -115,7 +110,7 @@ th {
   vertical-align: top;
 }
 
-// Reset (native) button styles
+// Reset button styles
 button {
   margin: 0;
   padding: 0;
@@ -124,7 +119,7 @@ button {
   border: 0;
 }
 
-// Reset (native) input styles
+// Reset input styles
 input {
   border: 0;
   outline: 0;

src/assets/stylesheets/base/_typeset.scss

@@ -58,7 +58,6 @@ kbd {
 .md-typeset {
   font-size: ms(0);
   line-height: 1.6;
-
   // Colors should be kept when printing
   -webkit-print-color-adjust: exact; // stylelint-disable-line
 
@@ -173,7 +172,7 @@ kbd {
     }
   }
 
-  // Inline code blocks, correct relative ems for smaller font size
+  // Inline code blocks
   code {
     margin: 0 px2em(4px, 13.6px);
     padding: px2em(1px, 13.6px) 0;
@@ -194,17 +193,18 @@ kbd {
   h4 code,
   h5 code,
   h6 code {
-    margin: 0;
+    margin: initial;
+    padding: initial;
     background-color: transparent;
     box-shadow: none;
   }
 
   // Reset code if it's inside a link
   a > code {
-    margin: inherit;
-    padding: inherit;
-    color: inherit;
-    background-color: inherit;
+    margin: initial;
+    padding: initial;
+    color: initial;
+    background-color: transparent;
     border-radius: initial;
     box-shadow: none;
   }

src/assets/stylesheets/extensions/_admonition.scss

@@ -116,10 +116,10 @@
 
     // Reset code inside Admonition titles
     > code {
-      margin: inherit;
-      padding: inherit;
-      color: inherit;
-      background-color: inherit;
+      margin: initial;
+      padding: initial;
+      color: initial;
+      background-color: transparent;
       border-radius: initial;
       box-shadow: none;
     }