From a2323b87ffd5cfbaff3f8ab190a4a30442d27b9e Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Sun, 23 Sep 2018 22:46:05 -0700
Subject: [PATCH 1/4] Navigation menus work without JavaScript

Currently the JavaScript experience of the main header is broken.
It doesn't need to be so let's fix that.
---
 openlibrary/templates/lib/nav_head.html |  2 +-
 static/css/components/header-bar.less   | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/openlibrary/templates/lib/nav_head.html b/openlibrary/templates/lib/nav_head.html
index f6ec584de8c..50cb7713bda 100644
--- a/openlibrary/templates/lib/nav_head.html
+++ b/openlibrary/templates/lib/nav_head.html
@@ -112,7 +112,7 @@
         <button class="avatar" id="userToggle" aria-label="My account" style="background-image: url('https://archive.org/services/img/$(get_internet_archive_id(ctx.user.key))');"></button>
         <img class="down-arrow" aria-hidden="true" alt="$_('My Account')" role="presentation" src="/static/images/down-arrow.png"/>
       </div>
-      <div class="account-dropdown hidden" id="main-account-dropdown">
+      <div class="account-dropdown navigation-dropdown-component" id="main-account-dropdown">
         <ul class="dropdown-menu">
           <li><a href="$homepath()/account/loans">$_("My Loans")</a></li>
           <li><a href="$ctx.user.key/lists">$_("My Lists")</a></li>
diff --git a/static/css/components/header-bar.less b/static/css/components/header-bar.less
index 4c1a40aff00..89aa3802270 100644
--- a/static/css/components/header-bar.less
+++ b/static/css/components/header-bar.less
@@ -196,12 +196,6 @@ header#header-bar {
         }
       }
 
-      .browse-menu-options,
-      .my-books-menu-options,
-      .more-menu-options {
-        display: none;
-      }
-
       .dropdown-menu {
         position: absolute;
         z-index: 999;
@@ -495,6 +489,16 @@ header#header-bar {
   }
 }
 
+.navigation-component li,
+.account-component {
+  .navigation-dropdown-component {
+    display: none;
+  }
+  &:hover .navigation-dropdown-component {
+    display: block;
+  }
+}
+
 .logo-component {
   margin: 0 0 5px 0;
   a {

From 7b4774ccb793f19fe6688ad094c7031737a25e15 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Sun, 23 Sep 2018 22:53:41 -0700
Subject: [PATCH 2/4] Drop use of generic-button and generic-button-primary in
 header

This removes usage of the "buttonGeneric" in the main navigation
header.

See: #1158
---
 openlibrary/templates/lib/nav_head.html | 4 ++--
 static/css/components/buttonBtn.less    | 2 ++
 static/css/components/buttonGhost.less  | 2 ++
 static/css/components/page-banner.less  | 3 ---
 static/css/page-home.less               | 3 +--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/openlibrary/templates/lib/nav_head.html b/openlibrary/templates/lib/nav_head.html
index 50cb7713bda..e055643e0b1 100644
--- a/openlibrary/templates/lib/nav_head.html
+++ b/openlibrary/templates/lib/nav_head.html
@@ -101,9 +101,9 @@
   $if not ctx.user:
     <ul class="auth-component">
       <li class="hide-me">
-        <a class="generic-button generic-button-secondary white"
+        <a class="btn"
            href="/account/login">$_("Log In")</a></li>
-      <li><a class="generic-button generic-button-primary" href="/account/create">$_("Sign Up")</a></li>
+      <li><a class="btn primary" href="/account/create">$_("Sign Up")</a></li>
     </ul>
 
   $if ctx.user:
diff --git a/static/css/components/buttonBtn.less b/static/css/components/buttonBtn.less
index f20c0afe425..65fc634bca4 100644
--- a/static/css/components/buttonBtn.less
+++ b/static/css/components/buttonBtn.less
@@ -7,6 +7,8 @@
   padding: 5px 10px;
   &.primary {
     background-color: @primary-blue;
+    // Important is necessary to override default link color
+    color: @white !important;
     border-radius: 3px;
   }
 }
diff --git a/static/css/components/buttonGhost.less b/static/css/components/buttonGhost.less
index 8098215bb6f..8b8844412f7 100644
--- a/static/css/components/buttonGhost.less
+++ b/static/css/components/buttonGhost.less
@@ -5,5 +5,7 @@ a {
     border: 1px solid @mid-grey;
     font-weight: 500;
     text-decoration: none;
+    // Important is necessary to override default link color
+    color: @white !important;
   }
 }
\ No newline at end of file
diff --git a/static/css/components/page-banner.less b/static/css/components/page-banner.less
index 78ab570fc8c..e8514822509 100644
--- a/static/css/components/page-banner.less
+++ b/static/css/components/page-banner.less
@@ -7,9 +7,6 @@
   border-top-left-radius: 3px;
   border-bottom: 1px solid @beige;
 
-  a {
-    color: @white;
-  }
   &-black {
     background-color: @dark-grey;
     padding: 5px;
diff --git a/static/css/page-home.less b/static/css/page-home.less
index c60b4b731d3..bc5ccc80463 100644
--- a/static/css/page-home.less
+++ b/static/css/page-home.less
@@ -21,8 +21,7 @@ p {
 
 // Import components this page uses
 @import (less) "components/book.less";
-// One button should be enough, but for now we need 3.
-@import "components/buttonGeneric.less";
+// One button should be enough, but for now we need 2.
 @import "components/buttonGhost.less";
 @import "components/buttonBtn.less";
 // End buttons

From dbd8b127302c45178486d942b7f561c7a64c5240 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Sun, 23 Sep 2018 19:31:32 -0700
Subject: [PATCH 3/4] Header bar styles should not require a repaint when JS is
 loaded

When JavaScript is loaded a couple of things adjust themselves -
the search input drop down gets and arrow and the images in the header
load. If we specify width and height attributes, the browser knows in
advance how much room to provide for these arrows and the experience
is much smoother with no need for a repaint/redraw
---
 openlibrary/templates/lib/nav_head.html | 13 +++++++++----
 static/css/components/header-bar.less   |  4 ++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/openlibrary/templates/lib/nav_head.html b/openlibrary/templates/lib/nav_head.html
index e055643e0b1..81f1f3e965c 100644
--- a/openlibrary/templates/lib/nav_head.html
+++ b/openlibrary/templates/lib/nav_head.html
@@ -22,7 +22,9 @@
   <div class="logo-component">
     <a href="/" title="The Internet Archive's Open Library: One page for every book">
       <div class="logo-txt">
-        <img class="logo-icon" src="/static/images/openlibrary-logo-tighter.svg" alt="Open Library logo"/>
+        <img class="logo-icon" src="/static/images/openlibrary-logo-tighter.svg"
+          width="194" height="47"
+          alt="Open Library logo"/>
       </div>
     </a>
   </div>
@@ -59,7 +61,8 @@
 
   <ul class="navigation-component">
     <li class="browse-menu">
-      <a>$_('Browse') <img class="down-arrow" aria-hidden="true" alt="$_('Browse')" role="presentation" src="/static/images/down-arrow.png"/></a>
+      <a>$_('Browse') <img class="down-arrow"
+        width="7" height="4" aria-hidden="true" alt="$_('Browse')" role="presentation" src="/static/images/down-arrow.png"/></a>
       <div class="navigation-dropdown-component">
         <ul class="dropdown-menu browse-menu-options">
           <li><a href="/subjects/science">$_("Science")</a></li>
@@ -74,7 +77,8 @@
       </div>
     </li>
     <li class="my-books-menu">
-      <a>$_('My Books') <img class="down-arrow" aria-hidden="true" alt="$_('My Books')" role="presentation" src="/static/images/down-arrow.png"/></a>
+      <a>$_('My Books') <img class="down-arrow"
+        width="7" height="4" aria-hidden="true" alt="$_('My Books')" role="presentation" src="/static/images/down-arrow.png"/></a>
       <div class="navigation-dropdown-component">
         <ul class="dropdown-menu my-books-menu-options">
           <li><a href="/account/loans">$_("My Loans")</a></li>
@@ -84,7 +88,8 @@
       </div>
     </li>
     <li class="more-menu">
-      <a>$_('More') <img class="down-arrow" aria-hidden="true" alt="$_('More')" role="presentation" src="/static/images/down-arrow.png"/></a>
+      <a>$_('More') <img class="down-arrow"
+        width="7" height="4" aria-hidden="true" alt="$_('More')" role="presentation" src="/static/images/down-arrow.png"/></a>
       <div class="navigation-dropdown-component">
         <ul class="dropdown-menu more-menu-options">
           <li><a href="/books/add">$_("Add a Book")</a></li>
diff --git a/static/css/components/header-bar.less b/static/css/components/header-bar.less
index 89aa3802270..21325b3abe4 100644
--- a/static/css/components/header-bar.less
+++ b/static/css/components/header-bar.less
@@ -159,6 +159,7 @@ header#header-bar {
       position: relative;
       top: -1px;
       height: 30px;
+      width: auto;
       margin-right: 5px;
       padding-right: 5px;
       -ms-flex-item-align: center;
@@ -518,6 +519,9 @@ header#header-bar {
 }
 
 .search-component {
+  .search-facet {
+    min-width: 25px;
+  }
   .search-bar-advanced-btn {
     margin: 10px;
     border: 0 none;

From 18d392295971b1b2f955e7ac7a74e0aa6b6e42c6 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Sun, 23 Sep 2018 17:22:06 -0700
Subject: [PATCH 4/4] v2 pages (only home page at current time) load non-render
 blocking JS

In the interest of careful progress, this is limited to the home page
(the only page using the `v2` flag). As we audit over pages and make
them mobile friendly, v2 will eventually become the default and no
pages will be render blocking.

Fixes: #1084
---
 .../templates/books/custom_carousel.html      |  2 +-
 openlibrary/templates/home/categories.html    |  2 +-
 openlibrary/templates/home/stats.html         |  2 +-
 openlibrary/templates/site.html               |  2 +-
 openlibrary/templates/site/footer.html        | 34 ++++++++++++++++
 openlibrary/templates/site/head.html          | 39 +++++++++++--------
 openlibrary/templates/site/stats.html         |  2 +-
 static/css/js-all.less                        |  6 ++-
 8 files changed, 65 insertions(+), 24 deletions(-)

diff --git a/openlibrary/templates/books/custom_carousel.html b/openlibrary/templates/books/custom_carousel.html
index 405f9a2fd6f..51df6cd5269 100644
--- a/openlibrary/templates/books/custom_carousel.html
+++ b/openlibrary/templates/books/custom_carousel.html
@@ -22,7 +22,7 @@ <h2 class="home-h2"><a href="$url">$title</a></h2>
             </div>
         </div>
         <script type="text/javascript">
-              \$().ready(function() {
+              window.q.push(function() {
                 Carousel.add('.carousel-$key', 6, 5, 4, 3, 2, 1);
               });
         </script>
diff --git a/openlibrary/templates/home/categories.html b/openlibrary/templates/home/categories.html
index 99177efb2b7..ec290394ebf 100644
--- a/openlibrary/templates/home/categories.html
+++ b/openlibrary/templates/home/categories.html
@@ -28,7 +28,7 @@ <h2 class="home-h2"><a href="/subjects">Browse by Subject</a></h2>
     </div>
   </div>
   <script type="text/javascript">
-  \$().ready(function() {
+  window.q.push(function() {
     Carousel.add('#categories_carousel', 6, 5, 4, 3, 2);
   });
   </script>
diff --git a/openlibrary/templates/home/stats.html b/openlibrary/templates/home/stats.html
index d5c7261ca76..b7a70e43a18 100644
--- a/openlibrary/templates/home/stats.html
+++ b/openlibrary/templates/home/stats.html
@@ -45,7 +45,7 @@ <h2 class="inline">Around the Library</h2>
 
     <script type="text/javascript">
 
-    \$(function () {
+    window.q.push(function () {
          plot_data("#visitors", $:json_encode(stats["visitors"].get_counts(28, True)), "#e44028", "unique visitors on");
          plot_data("#members", $:json_encode(stats["members"].get_counts(28, True)), "#748d36", "new members on");
          plot_data("#edits", $:json_encode(stats["human_edits"].get_counts(28, True)), "#00636a","catalog edits on");
diff --git a/openlibrary/templates/site.html b/openlibrary/templates/site.html
index c3ecc9ab73a..16f6f7bed43 100644
--- a/openlibrary/templates/site.html
+++ b/openlibrary/templates/site.html
@@ -8,4 +8,4 @@
 
 $:render_template("site/body", page)
 
-$:render_template("site/footer")
+$:render_template("site/footer", page)
diff --git a/openlibrary/templates/site/footer.html b/openlibrary/templates/site/footer.html
index e1ec920721b..fc3652395c4 100644
--- a/openlibrary/templates/site/footer.html
+++ b/openlibrary/templates/site/footer.html
@@ -12,4 +12,38 @@
 $if bodyid == 'user' or 'admin':
     $:render_template('lib/analytics', page)
 </body>
+    $if 'v2' in page:
+        <script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
+        <script type="text/javascript" src="/static/js/jquery-migrate-1.2.1.min.js"></script>
+        <script type="text/javascript" src="/static/js/slick-1.6.0.min.js"></script>
+        <!-- Must be loaded after jquery -->
+        <script src="//archive.org/includes/analytics.js?v=0c15bbe" type="text/javascript"></script>
+        <script>
+        <!-- anonymized analytics -->
+        window.addEventListener('DOMContentLoaded', function send_analytics_pageview() {
+            archive_analytics.send_pageview({});
+        });
+        </script>
+
+        <script src="$static_url('build/vendor.js')" type="text/javascript"></script>
+        <script src="$static_url('build/all.js')" type="text/javascript"></script>
+
+        $if query_param("_firebug") == "true":
+            <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
+
+        $if any([path in request.canonical_url for path in ['/account/create', '/books/add', '/edit', '/books']]):
+            <!-- Must be loaded in Sign Up and Add new Books page -->
+            <!-- Must be loaded for all edit pages having link /books/*/*/edit -->
+            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+
+    <!-- clear the window.q and setup the jQuery plugins -->
+    <script>
+    \$( function () {
+        var i;
+        for ( i = 0; i < window.q.length; i++ ) {
+            \$( window.q[i] );
+        }
+        window.q = [];
+    } );
+    </script>
 </html>
diff --git a/openlibrary/templates/site/head.html b/openlibrary/templates/site/head.html
index 8561b54ba70..5265fd58109 100644
--- a/openlibrary/templates/site/head.html
+++ b/openlibrary/templates/site/head.html
@@ -24,7 +24,18 @@
     <link href="/static/images/openlibrary-128x128.png" rel="icon" sizes="128x128" />
     $ style = 'build/page-%s.css'%ctx.get('bodyid', 'user')
     <link href="$static_url(style)" rel="stylesheet" type="text/css" />
-    <link href="$static_url('build/js-all.css')" rel="stylesheet" type="text/css"/>
+    <!-- Both v2 and v1 pages have a JavaScript execution queue that will
+    be emptied at the bottom of the page -->
+    <script type="text/javascript">window.q = [];</script>
+    $ styleJS = static_url('build/js-all.css');
+    $if 'v2' not in page:
+        $# Load CSS via render blocking style tag
+        <link href="$styleJS" rel="stylesheet" type="text/css"/>
+    $else:
+        $# Load CSS via JavaScript later to speed up first paint
+        <script>window.q.push(function () {
+            loadStyle("$styleJS");
+        });</script>
     $if "dev" in ctx.features:
         <link href="$static_url('build/page-dev.css')" rel="stylesheet" type="text/css"/>
 
@@ -33,24 +44,18 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <!-- Enable Chrome Frame for IE -->
     <meta name="alexaVerifyID" content="wJKlTRj1Z1OI4G-J0w9R-cWhJjw" /> <!-- Necessary for Alexa -->
 
-    $if 'v2' in page:
-        <script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
-        <script type="text/javascript" src="/static/js/jquery-migrate-1.2.1.min.js"></script>
-        <script type="text/javascript" src="/static/js/slick-1.6.0.min.js"></script>
-    $else:
+    $if 'v2' not in page:
         <script src="/static/js/jquery-1.3.2.min.js" type="text/javascript"></script>
         <script src="/static/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
-
-    <!-- Must be loaded after jquery -->
-    <script src="//archive.org/includes/analytics.js?v=0c15bbe" type="text/javascript"></script>
-    <script> <!-- anonymized analytics -->
-      window.addEventListener('DOMContentLoaded', function send_analytics_pageview() {
-        archive_analytics.send_pageview({});
-      });
-    </script>
-
-    <script src="$static_url('build/vendor.js')" type="text/javascript"></script>
-    <script src="$static_url('build/all.js')" type="text/javascript"></script>
+        <!-- Must be loaded after jquery -->
+        <script src="//archive.org/includes/analytics.js?v=0c15bbe" type="text/javascript"></script>
+        <script> <!-- anonymized analytics -->
+        window.addEventListener('DOMContentLoaded', function send_analytics_pageview() {
+            archive_analytics.send_pageview({});
+        });
+        </script>
+        <script src="$static_url('build/vendor.js')" type="text/javascript"></script>
+        <script src="$static_url('build/all.js')" type="text/javascript"></script>
 
     $if query_param("_firebug") == "true":
         <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
diff --git a/openlibrary/templates/site/stats.html b/openlibrary/templates/site/stats.html
index 89aef831fae..f846dcdd3b4 100644
--- a/openlibrary/templates/site/stats.html
+++ b/openlibrary/templates/site/stats.html
@@ -16,7 +16,7 @@ <h3>Details</h3>
         $s.data
 </pre>
 <script type="text/javascript">
-    \$(document).ready(function() {
+    window.q.push(function() {
         \$(document).keypress(function(e) {
             // Toggle debug stats on Ctrl+Alt+.
             if (e.altKey && e.ctrlKey && e.which == 46) {
diff --git a/static/css/js-all.less b/static/css/js-all.less
index d388dead1dc..7f43c67c64e 100644
--- a/static/css/js-all.less
+++ b/static/css/js-all.less
@@ -1,7 +1,9 @@
 /**
  * Styles here will load for all users, but only if JavaScript is enabled.
- * At time of writing, this stylesheet is render blocking.
- * However, the long term plan for this stylesheet is not to be render blocking.
+ * At time of writing, this stylesheet is render blocking unless a page that
+ * is passed through the template engine enables 'v2' via `page.v2 = True`
+ * The long term plan for this stylesheet is not to be render blocking
+ * on all pages.
  */
 @import (less) "less/colors.less";