Move nonessential JS to the bottom of the page.

r2/r2/lib/js.py

@@ -326,23 +326,28 @@ module["html5shiv"] = Module("html5shiv.js",
 )
 
 
-module["reddit"] = LocalizedModule("reddit.js",
+module["reddit-init"] = Module("reddit-init.js",
     "lib/json2.js",
     "lib/underscore-1.3.3.js",
     "lib/store.js",
+    "base.js",
+    "uibase.js",
+    "analytics.js",
+    "jquery.reddit.js",
+    "reddit.js",
+    "spotlight.js",
+)
+
+module["reddit"] = LocalizedModule("reddit.js",
     "lib/jquery.cookie.js",
     "lib/jquery.url.js",
-    "jquery.reddit.js",
-    "base.js",
     "utils.js",
     "strings.js",
     "ui.js",
     "login.js",
-    "analytics.js",
     "flair.js",
     "interestbar.js",
     "wiki.js",
-    "reddit.js",
     "apps.js",
     "gold.js",
     "spotlight.js",

r2/r2/lib/pages/pages.py

@@ -643,6 +643,10 @@ class RedditMin(Reddit):
     show_sidebar = False
     show_firsttext = False
 
+    def page_classes(self):
+        return ('min-body',)
+
+
 class LoginFormWide(CachedTemplate):
     """generates a login form suitable for the 300px rightbox."""
     def __init__(self):
@@ -2145,6 +2149,8 @@ class FrameToolbar(Wrapped):
         # run to set scores with current score format (for example)
         Printable.add_props(user, nonempty)
 
+    def page_classes(self):
+        return ("toolbar",)
 
 
 class NewLink(Templated):

r2/r2/public/static/js/ui.js

@@ -1,47 +1,3 @@
-r.ui = {}
-
-r.ui.Base = function(el) {
-    this.$el = $(el)
-}
-
-r.ui.collapsibleSideBox = function(id) {
-    var $el = $('#'+id)
-    return new r.ui.Collapse($el.find('.title'), $el.find('.content'), id)
-}
-
-r.ui.Collapse = function(el, target, key) {
-    r.ui.Base.call(this, el)
-    this.target = target
-    this.key = 'ui.collapse.' + key
-    this.isCollapsed = store.get(this.key) == true
-    this.$el.click($.proxy(this, 'toggle', null, false))
-    this.toggle(this.isCollapsed, true)
-}
-r.ui.Collapse.prototype = {
-    animDuration: 200,
-
-    toggle: function(collapsed, immediate) {
-        if (collapsed == null) {
-            collapsed = !this.isCollapsed
-        }
-
-        var duration = immediate ? 0 : this.animDuration
-        if (collapsed) {
-            $(this.target).slideUp(duration)
-        } else {
-            $(this.target).slideDown(duration)
-        }
-
-        this.isCollapsed = collapsed
-        store.set(this.key, collapsed)
-        this.update()
-    },
-
-    update: function() {
-        this.$el.find('.collapse-button').text(this.isCollapsed ? '+' : '-')
-    }
-}
-
 r.ui.Form = function(el) {
     r.ui.Base.call(this, el)
     this.$el.submit($.proxy(function(e) {

r2/r2/public/static/js/uibase.js

@@ -0,0 +1,44 @@
+r.ui = {}
+
+r.ui.Base = function(el) {
+    this.$el = $(el)
+}
+
+r.ui.collapsibleSideBox = function(id) {
+    var $el = $('#'+id)
+    return new r.ui.Collapse($el.find('.title'), $el.find('.content'), id)
+}
+
+r.ui.Collapse = function(el, target, key) {
+    r.ui.Base.call(this, el)
+    this.target = target
+    this.key = 'ui.collapse.' + key
+    this.isCollapsed = store.get(this.key) == true
+    this.$el.click($.proxy(this, 'toggle', null, false))
+    this.toggle(this.isCollapsed, true)
+}
+r.ui.Collapse.prototype = {
+    animDuration: 200,
+
+    toggle: function(collapsed, immediate) {
+        if (collapsed == null) {
+            collapsed = !this.isCollapsed
+        }
+
+        var duration = immediate ? 0 : this.animDuration
+        if (collapsed) {
+            $(this.target).slideUp(duration)
+        } else {
+            $(this.target).slideDown(duration)
+        }
+
+        this.isCollapsed = collapsed
+        store.set(this.key, collapsed)
+        this.update()
+    },
+
+    update: function() {
+        this.$el.find('.collapse-button').text(this.isCollapsed ? '+' : '-')
+    }
+}
+

r2/r2/templates/allinfobar.html

@@ -20,9 +20,9 @@
 ## reddit Inc. All Rights Reserved.
 ###############################################################################
 
-<%namespace file="utils.html" import="plain_link, css_class, _md"/>
+<%namespace file="utils.html" import="plain_link, classes, _md"/>
 
-<div class="titlebox rounded${css_class(thing)}">
+<div ${classes("titlebox", "rounded", thing.css_class)}>
   <h1 class="hover redditname special">
     ${plain_link(thing.sr.name, thing.sr.path, _sr_path=False, _class="hover")}
   </h1>

r2/r2/templates/base.compact

@@ -25,7 +25,7 @@
    from r2.lib.template_helpers import static
    from r2.lib import js
 %>
-<%namespace file="utils.html" import="js_setup, googleanalytics"/>
+<%namespace file="utils.html" import="js_setup, googleanalytics, classes"/>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="${c.lang}">
   <head>
     <link rel="apple-touch-icon" 
@@ -44,15 +44,17 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     ${self.robots()}
     <link rel="stylesheet" href="${static('compact.css')}" type="text/css" media="screen" />
-    ${unsafe(js.use('jquery', 'mobile'))}
+    ${unsafe(js.use('jquery', 'reddit-init'))}
     ${js_setup(thing.extra_js_config)}
     ${googleanalytics('mobile')}
   </head>
-  ${self.bodyHTML()}
+  <body ${classes(*thing.page_classes())}>
+    ${self.bodyContent()}
+    ${unsafe(js.use('mobile'))}
+  </body>
 </html>
 
-<%def name="bodyHTML()">
-
+<%def name="bodyContent()">
 </%def>
 
 <%def name="Title()">

r2/r2/templates/base.html

@@ -26,7 +26,7 @@
    from r2.models import Link, Comment, Subreddit
    from r2.lib import tracking
 %>
-<%namespace file="utils.html" import="js_setup, googleanalytics"/>
+<%namespace file="utils.html" import="js_setup, googleanalytics, classes"/>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="${c.lang}" 
       xml:lang="${c.lang}" ${c.lang_rtl and unsafe('dir="rtl"') or ''}>
   <head>
@@ -52,10 +52,13 @@
     ${self.head()}
   </head>
 
-  ${self.bodyHTML()}
+  <body ${classes(*thing.page_classes())}>
+    ${self.bodyContent()}
+    ${self.javascript_bottom()}
+  </body>
 </html>
 
-<%def name="bodyHTML()">
+<%def name="bodyContent()">
 </%def>
 
 <%def name="Title()">
@@ -99,3 +102,6 @@ ${googleanalytics('web')}
 
 <%def name="javascript()">
 </%def>
+
+<%def name="javascript_bottom()">
+</%def>

r2/r2/templates/frametoolbar.html

@@ -36,8 +36,7 @@
   toolbar = new toolbar_p("${panel_size('expanded')}", "${panel_size('collapsed')}");
 </%def>
 
-<%def name="bodyHTML()">
-<body class="toolbar">
+<%def name="bodyContent()">
   <div class="preload">
     ## everything in here will get rendered off screen for pre-fetching purposes.
     <div class="arrow up"></div>
@@ -151,7 +150,6 @@
       </div>
     </div>
   </div>
-</body>
 </%def>
 
 

r2/r2/templates/reddit.compact

@@ -27,31 +27,29 @@
 <%namespace file="login.html" import="login_form"/>
 <%namespace file="utils.html" import="tags"/>
 
-<%def name="bodyHTML()">
-<body ${tags(_class=' '.join(thing.page_classes()))}>
-    <%include file="redditheader.compact"/>
-    %if thing.content:
-      <div class="content">
-        ${thing.content()}
+<%def name="bodyContent()">
+  <%include file="redditheader.compact"/>
+  %if thing.content:
+    <div class="content">
+      ${thing.content()}
+    </div>
+  %endif
+  %if not c.user_is_loggedin:
+    %if thing.enable_login_cover:
+    <div class="login-popup cover-overlay" style="display: none">
+      <div class="cover" onclick="return hidecover(this)"></div>
+      <div class="popup">
+        <%
+           from r2.lib.utils import UrlParser
+           path = UrlParser(request.fullpath)
+           path.set_extension(c.extension)
+         %>
+        ${login_form(dest = path.unparse())}
       </div>
+    </div>
     %endif
-    %if not c.user_is_loggedin:
-      %if thing.enable_login_cover:
-      <div class="login-popup cover-overlay" style="display: none">
-        <div class="cover" onclick="return hidecover(this)"></div>
-        <div class="popup">
-          <%
-             from r2.lib.utils import UrlParser
-             path = UrlParser(request.fullpath)
-             path.set_extension(c.extension)
-           %>
-          ${login_form(dest = path.unparse())}
-        </div>
-      </div>
-      %endif
-    %endif
-    %if g.tracker_url and thing.site_tracking and not c.secure:
-      <img alt="" src="${tracking.get_pageview_pixel_url()}"/>
-    %endif
-</body>
+  %endif
+  %if g.tracker_url and thing.site_tracking and not c.secure:
+    <img alt="" src="${tracking.get_pageview_pixel_url()}"/>
+  %endif
 </%def>

r2/r2/templates/reddit.html

@@ -32,7 +32,7 @@
 <%namespace file="login.html" import="login_panel, login_form"/>
 <%namespace file="framebuster.html" import="framebuster"/>
 <%namespace file="less.html" import="less_js"/>
-<%namespace file="utils.html" import="tags, css_class"/>
+<%namespace file="utils.html" import="tags, classes"/>
 <%inherit file="base.html"/>
 
 <%def name="Title()">
@@ -99,7 +99,7 @@
 
 <%def name="javascript()">
   <% from r2.lib import js %>
-  ${unsafe(js.use('jquery', 'reddit'))}
+  ${unsafe(js.use('jquery', 'reddit-init'))}
   % if c.deny_frames:
     <script>if (window != top) top.location = window.location</script>
   % endif
@@ -109,61 +109,64 @@
   ${less_js()}
 </%def>
 
+<%def name="javascript_bottom()">
+  <% from r2.lib import js %>
+  ${unsafe(js.use('reddit'))}
+</%def>
+
 <%def name="javascript_run()">
    reddit.cur_site = "${c.site._fullname if hasattr(c.site, '_fullname') else ''}";
 </%def>
 
-<%def name="bodyHTML()">
-  <body ${tags(_class=' '.join(thing.page_classes()))}>
-    <%include file="redditheader.html"/>
-  
-    %if thing.show_sidebar:
-      <div class="side">
-        ${sidebar(content = thing.rightbox())}
-      </div>
-    %endif
+<%def name="bodyContent()">
+  <%include file="redditheader.html"/>
 
-    <% content = getattr(self, "content", None) or thing.content %>
-    %if content:
-      ##<div class="fixedwidth"><!--IE6sux--></div>
-      ##<div class="clearleft"><!--IE6sux--></div>
-      <a name="content"></a>
-      <div ${tags(id=thing.content_id)} class="content${css_class(thing)}" role="main">
-        ${content()}
+  %if thing.show_sidebar:
+    <div class="side">
+      ${sidebar(content = thing.rightbox())}
+    </div>
+  %endif
+
+  <% content = getattr(self, "content", None) or thing.content %>
+  %if content:
+    ##<div class="fixedwidth"><!--IE6sux--></div>
+    ##<div class="clearleft"><!--IE6sux--></div>
+    <a name="content"></a>
+    <div ${tags(id=thing.content_id)} ${classes("content", thing.css_class)} role="main">
+      ${content()}
+    </div>
+  %endif
+
+  %if thing.footer:
+
+    ${thing.footer}
+
+    %if not c.user_is_loggedin and not g.read_only_mode:
+      %if thing.enable_login_cover:
+      <div class="login-popup cover-overlay" style="display: none">
+        <div class="cover" onclick="return hidecover(this)"></div>
+        <div class="popup">
+          <a href="#" onclick="return hidecover(this)" class="hidecover">
+            ${_("close this window")}
+          </a>
+          <h1 class="cover-msg">${strings.cover_msg}</h1>
+          ${login_panel(login_form)}
+        </div>
+      </div>
+      %endif
+      <div class="lang-popup cover-overlay" style="display: none">
+        <div class="cover" onclick="return hidecover(this)"></div>
+        <div class="popup">
+          <a href="#" onclick="return hidecover(this)" class="hidecover">
+            ${_("close this window")}
+          </a>
+          <%include file="prefoptions.html" />
+        </div>
       </div>
     %endif
-    
-    %if thing.footer:
-  
-      ${thing.footer}
-  
-      %if not c.user_is_loggedin and not g.read_only_mode:
-        %if thing.enable_login_cover:
-        <div class="login-popup cover-overlay" style="display: none">
-          <div class="cover" onclick="return hidecover(this)"></div>
-          <div class="popup">
-            <a href="#" onclick="return hidecover(this)" class="hidecover">
-              ${_("close this window")}
-            </a>
-            <h1 class="cover-msg">${strings.cover_msg}</h1>
-            ${login_panel(login_form)}
-          </div>
-        </div>
-        %endif
-        <div class="lang-popup cover-overlay" style="display: none">
-          <div class="cover" onclick="return hidecover(this)"></div>
-          <div class="popup">
-            <a href="#" onclick="return hidecover(this)" class="hidecover">
-              ${_("close this window")}
-            </a>
-            <%include file="prefoptions.html" />
-          </div>
-        </div>
-      %endif
-    %endif
-    ${framebuster()}
-    <p class="bottommenu debuginfo"><span class="icon">&pi;</span>&nbsp;<span class="content">Rendered by PID ${g.reddit_pid} on ${g.reddit_host} at ${c.start_time} running ${g.short_version}.</span></p>
-  </body>
+  %endif
+  ${framebuster()}
+  <p class="bottommenu debuginfo"><span class="icon">&pi;</span>&nbsp;<span class="content">Rendered by PID ${g.reddit_pid} on ${g.reddit_host} at ${c.start_time} running ${g.short_version}.</span></p>
 </%def>
 
 <%def name="sidebar(content=None)">

r2/r2/templates/redditmin.html

@@ -22,12 +22,10 @@
 
 <%inherit file="reddit.html"/>
 
-<%def name="bodyHTML()">
-  <body class="min-body">
-    %if thing.content:
-      <div class="content">
-        ${thing.content()}
-      </div>
-    %endif
-  </body>
+<%def name="bodyContent()">
+  %if thing.content:
+    <div class="content">
+      ${thing.content()}
+    </div>
+  %endif
 </%def>

r2/r2/templates/trycompact.compact

@@ -25,8 +25,7 @@
  %>
 <%inherit file="reddit.compact" />
 
-<%def name="bodyHTML()">
-<body>
+<%def name="bodyContent()">
   <%include file="redditheader.compact"/>
   <div class="tryme">
     <p>
@@ -51,5 +50,4 @@
   %if g.tracker_url and thing.site_tracking:
     <img alt="" src="${tracking.get_pageview_pixel_url()}"/>
   %endif
-</body>
 </%def>

r2/r2/templates/utils.html

@@ -53,7 +53,9 @@
 id="${arg}_${thing and thing._fullname or ''}"
 </%def>
 
-<%def name="css_class(thing)">${' '+thing.css_class if hasattr(thing, 'css_class') and thing.css_class else ''}</%def>
+<%def name="classes(*class_names)">
+class="${" ".join(filter(None, class_names))}"
+</%def>
 
 <%def name="submit_form(onsubmit='', action='', _class='', method='post', _id='', **params)">
 <form class="${_class or ''}" onsubmit="${onsubmit or ''}"