assets: convert pylons static files to pyramid static_url, fixes #3504

configs/development.ini

@@ -125,8 +125,8 b' rhodecode.api.url = /_admin/api'
 
 full_stack = true
 
-## Serve static files via RhodeCode, disable to serve them via HTTP server
-static_files = true
+## Return gzipped responses
+gzip_responses = true
 
 # autogenerate javascript routes file on startup
 generate_js_files = false

rhodecode/config/middleware.py

@@ -289,23 +289,7 b' def includeme_last(config):'
     The static file catchall needs to be last in the view configuration.
     """
     settings = config.registry.settings
-
-    # Note: johbo: I would prefer to register a prefix for static files at some
-    # point, e.g. move them under '_static/'. This would fully avoid that we
-    # can have name clashes with a repository name. Imaging someone calling his
-    # repo "css" ;-) Also having an external web server to serve out the static
-    # files seems to be easier to set up if they have a common prefix.
-    #
-    # Example: config.add_static_view('_static', path='rhodecode:public')
-    #
-    # It might be an option to register both paths for a while and then migrate
-    # over to the new location.
-
-    # Serving static files with a catchall.
-    if settings['static_files']:
-        config.add_route('catchall_static', '/*subpath')
-        config.add_view(
-            static_view('rhodecode:public'), route_name='catchall_static')
+    config.add_static_view('_static', path='rhodecode:public')
 
 
 def wrap_app_in_wsgi_middlewares(pyramid_app, config):
@@ -331,10 +315,7 b' def wrap_app_in_wsgi_middlewares(pyramid'
         pyramid_app, _ = wrap_in_appenlight_if_enabled(
             pyramid_app, config.registry._pylons_compat_config)
 
-    # TODO: johbo: Don't really see why we enable the gzip middleware when
-    # serving static files, might be something that should have its own setting
-    # as well?
-    if settings['static_files']:
+    if asbool(settings.get('gzip_responses', 'true')):
         pyramid_app = make_gzip_middleware(
             pyramid_app, settings, compress_level=1)
 
@@ -377,7 +358,6 b' def sanitize_settings_and_apply_defaults'
     settings.setdefault('rhodecode.api.url', '/_admin/api')
 
     _bool_setting(settings, 'vcs.server.enable', 'true')
-    _bool_setting(settings, 'static_files', 'true')
     _bool_setting(settings, 'is_test', 'false')
 
     return settings

rhodecode/lib/helpers.py

@@ -85,12 +85,15 b' from rhodecode.model.settings import Iss'
 
 log = logging.getLogger(__name__)
 
+
 DEFAULT_USER = User.DEFAULT_USER
 DEFAULT_USER_EMAIL = User.DEFAULT_USER_EMAIL
 
+
 def url(*args, **kw):
     return pylons_url(*args, **kw)
 
+
 def pylons_url_current(*args, **kw):
     """
     This function overrides pylons.url.current() which returns the current
@@ -105,6 +108,19 b' def pylons_url_current(*args, **kw):'
 url.current = pylons_url_current
 
 
+def asset(path, ver=None):
+    """
+    Helper to generate a static asset file path for rhodecode assets
+
+    eg. h.asset('images/image.png', ver='3923')
+
+    :param path: path of asset
+    :param ver: optional version query param to append as ?ver=
+    """
+    request = get_current_request()
+    return request.static_url('rhodecode:public/{}'.format(path), ver=ver)
+
+
 def html_escape(text, html_escape_table=None):
     """Produce entities within text."""
     if not html_escape_table:

rhodecode/templates/base/base.html

@@ -7,7 +7,7 b''
       <div id="header-inner" class="wrapper">
           <div id="logo">
               <div class="logo-wrapper">
-                  <a href="${h.url('home')}"><img src="${h.url('/images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
+                  <a href="${h.url('home')}"><img src="${h.asset('images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
               </div>
               %if c.rhodecode_name:
                <div class="branding">- ${h.branding(c.rhodecode_name)}</div>
@@ -580,7 +580,7 b''
         % endif
 
     </script>
-    <script src="${h.url('/js/rhodecode/base/keyboard-bindings.js', ver=c.rhodecode_version_hash)}"></script>
+    <script src="${h.asset('js/rhodecode/base/keyboard-bindings.js', ver=c.rhodecode_version_hash)}"></script>
 </%def>
 
 <div class="modal" id="help_kb" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

rhodecode/templates/base/root.html

@@ -23,13 +23,13 b" c.template_context['visual']['default_re"
             <meta name="robots" content="index, nofollow"/>
         </%def>
         ${self.robots()}
-        <link rel="icon" href="${h.url('/images/favicon.ico', ver=c.rhodecode_version_hash)}" sizes="16x16 32x32" type="image/png" />
+        <link rel="icon" href="${h.asset('images/favicon.ico', ver=c.rhodecode_version_hash)}" sizes="16x16 32x32" type="image/png" />
 
         ## CSS definitions
         <%def name="css()">
-            <link rel="stylesheet" type="text/css" href="${h.url('/css/style.css', ver=c.rhodecode_version_hash)}" media="screen"/>
+            <link rel="stylesheet" type="text/css" href="${h.asset('css/style.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <!--[if lt IE 9]>
-                <link rel="stylesheet" type="text/css" href="${h.url('/css/ie.css', ver=c.rhodecode_version_hash)}" media="screen"/>
+                <link rel="stylesheet" type="text/css" href="${h.asset('css/ie.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <![endif]-->
             ## EXTRA FOR CSS
             ${self.css_extra()}
@@ -42,7 +42,7 b" c.template_context['visual']['default_re"
 
         ## JAVASCRIPT
         <%def name="js()">
-            <script src="${h.url('/js/rhodecode/i18n/%s.js' % c.language, ver=c.rhodecode_version_hash)}"></script>
+            <script src="${h.asset('js/rhodecode/i18n/%s.js' % c.language, ver=c.rhodecode_version_hash)}"></script>
             <script type="text/javascript">
             // register templateContext to pass template variables to JS
             var templateContext = ${h.json.dumps(c.template_context)|n};
@@ -78,11 +78,11 b" c.template_context['visual']['default_re"
             </script>
 
             <!--[if lt IE 9]>
-            <script language="javascript" type="text/javascript" src="${h.url('/js/excanvas.min.js')}"></script>
+            <script language="javascript" type="text/javascript" src="${h.asset('js/excanvas.min.js')}"></script>
             <![endif]-->
-            <script language="javascript" type="text/javascript" src="${h.url('/js/rhodecode/routes.js', ver=c.rhodecode_version_hash)}"></script>
-            <script language="javascript" type="text/javascript" src="${h.url('/js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
-            <script>CodeMirror.modeURL = "${h.url('/js/mode/%N/%N.js')}";</script>
+            <script language="javascript" type="text/javascript" src="${h.asset('js/rhodecode/routes.js', ver=c.rhodecode_version_hash)}"></script>
+            <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
+            <script>CodeMirror.modeURL = "${h.asset('js/mode/%N/%N.js')}";</script>
 
             ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
             ${self.js_extra()}

rhodecode/templates/changelog/changelog.html

@@ -202,7 +202,7 b''
         ${c.pagination.pager('$link_previous ~2~ $link_next')}
     </div>
 
-    <script type="text/javascript" src="${h.url('/js/jquery.commits-graph.js')}"></script>
+    <script type="text/javascript" src="${h.asset('js/jquery.commits-graph.js')}"></script>
     <script type="text/javascript">
         var cache = {};
         $(function(){

rhodecode/templates/debug_style/code-block.html

@@ -9,11 +9,11 b''
 </%def>
 
 <%def name="js_extra()">
-<script type="text/javascript" src="${h.url('/js/mergerly.js')}"></script>
+<script type="text/javascript" src="${h.asset('js/mergerly.js')}"></script>
 </%def>
 
 <%def name="css_extra()">
-<link rel="stylesheet" type="text/css" href="${h.url('/css/mergerly.css')}"/>
+<link rel="stylesheet" type="text/css" href="${h.asset('css/mergerly.css')}"/>
 </%def>
 
 

rhodecode/templates/debug_style/tables.html

@@ -507,7 +507,7 b''
           <td class="td-radio"><input type="radio" value="repository.admin"
             name="u_perm_1" id="u_perm_1_repositoryadmin"></td>
           <td>
-            <img class="gravatar" src="/images/user30.png" height="16" width="16">
+            <img class="gravatar" src="/_static/images/user30.png" height="16" width="16">
             <span class="user">default</span>
           </td>
           <td></td>

rhodecode/templates/errors/error_document.html

@@ -5,7 +5,7 b''
         <title>Error - ${c.error_message}</title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
         <meta name="robots" content="index, nofollow"/>
-        <link rel="icon" href="${h.url('/images/favicon.ico')}" sizes="16x16 32x32" type="image/png" />
+        <link rel="icon" href="${h.asset('images/favicon.ico')}" sizes="16x16 32x32" type="image/png" />
 
 
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
@@ -13,20 +13,20 b''
             <meta http-equiv="refresh" content="${c.redirect_time}; url=${c.url_redirect}"/>
         %endif
 
-        <link rel="stylesheet" type="text/css" href="${h.url('/css/style.css')}" media="screen"/>
+        <link rel="stylesheet" type="text/css" href="${h.asset('css/style.css')}" media="screen"/>
         <!--[if IE]>
-            <link rel="stylesheet" type="text/css" href="${h.url('/css/ie.css')}" media="screen"/>
+            <link rel="stylesheet" type="text/css" href="${h.asset('css/ie.css')}" media="screen"/>
         <![endif]-->
         <style>body { background:#eeeeee; }</style>
 
-        <script type="text/javascript" src="${h.url('/js/scripts.js')}"></script>
+        <script type="text/javascript" src="${h.asset('js/scripts.js')}"></script>
     </head>
     <body>
         <%include file="/base/flash_msg.html"/>
 
         <div class="wrapper error_page">
             <div class="sidebar">
-                <a href="${h.url('home')}"><img class="error-page-logo" src="${h.url('/images/RhodeCode_Logo_Black.png')}" alt="RhodeCode"/></a>
+                <a href="${h.url('home')}"><img class="error-page-logo" src="${h.asset('images/RhodeCode_Logo_Black.png')}" alt="RhodeCode"/></a>
             </div>
             <div class="main-content">
                 <h1>

rhodecode/templates/files/diff_2way.html

@@ -4,11 +4,11 b''
 <%namespace name="diff_block" file="/changeset/diff_block.html"/>
 
 <%def name="js_extra()">
-<script type="text/javascript" src="${h.url('/js/mergerly.js')}"></script>
+<script type="text/javascript" src="${h.asset('js/mergerly.js')}"></script>
 </%def>
 
 <%def name="css_extra()">
-<link rel="stylesheet" type="text/css" href="${h.url('/css/mergerly.css')}"/>
+<link rel="stylesheet" type="text/css" href="${h.asset('css/mergerly.css')}"/>
 </%def>
 
 <%def name="title()">

rhodecode/templates/login.html

@@ -14,7 +14,7 b''
         <div id="header-inner" class="title">
             <div id="logo">
                 <div class="logo-wrapper">
-                    <a href="${h.url('home')}"><img src="${h.url('/images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
+                    <a href="${h.url('home')}"><img src="${h.asset('images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
                 </div>
                 %if c.rhodecode_name:
                 <div class="branding"> ${h.branding(c.rhodecode_name)}</div>
@@ -25,7 +25,7 b''
 
     <div class="loginwrapper">
         <div class="left-column">
-            <img class="sign-in-image" src="${h.url('/images/sign-in.png')}" alt="RhodeCode"/>
+            <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
         <%block name="above_login_button" />
         <div id="login" class="right-column">

rhodecode/templates/password_reset.html

@@ -14,7 +14,7 b''
         <div id="header-inner" class="title">
             <div id="logo">
                 <div class="logo-wrapper">
-                    <a href="${h.url('home')}"><img src="${h.url('/images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
+                    <a href="${h.url('home')}"><img src="${h.asset('images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
                 </div>
                 %if c.rhodecode_name:
                 <div class="branding"> ${h.branding(c.rhodecode_name)}</div>
@@ -25,7 +25,7 b''
 
     <div class="loginwrapper">
         <div class="left-column">
-            <img class="sign-in-image" src="${h.url('/images/sign-in.png')}" alt="RhodeCode"/>
+            <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
         
         <div id="register" class="right-column">

rhodecode/templates/register.html

@@ -14,7 +14,7 b''
         <div id="header-inner" class="title">
             <div id="logo">
                 <div class="logo-wrapper">
-                    <a href="${h.url('home')}"><img src="${h.url('/images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
+                    <a href="${h.url('home')}"><img src="${h.asset('images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
                 </div>
                 %if c.rhodecode_name:
                 <div class="branding"> ${h.branding(c.rhodecode_name)}</div>
@@ -25,7 +25,7 b''
 
     <div class="loginwrapper">
         <div class="left-column">
-            <img class="sign-in-image" src="${h.url('/images/sign-in.png')}" alt="RhodeCode"/>
+            <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
         <%block name="above_register_button" />
         <div id="register" class="right-column">