Added resource_url() function and used this function in the error page

qutebrowser/html/error.html

@@ -1,25 +1,59 @@
 {% extends "base.html" %}
 {% block style %}
 {{ super() }}
-#errorContainer {
-    background: #fff;
-    min-width: 35em;
-    max-width: 35em;
-    position: absolute;
-    top: 2em;
-    left: 1em;
-    padding: 10px;
-    border: 2px solid #eee;
-    -webkit-border-radius: 5px;
+* {
+	margin: 0px 0px;
+	padding: 0px 0px;
 }
 
-#errorTitleText {
-    font-size: 118%;
-    font-weight: bold;
+body {
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	-webkit-text-size-adjust: none;
+	color: #333333;
+	background-color: #EEEEEE;
+	font-size: 1.2em;
 }
 
-#errorMessageText {
-    font-size: 80%;
+#error-container {
+	margin-left: 20px;
+	margin-right: 20px;
+	margin-top: 20px;
+	border: 1px solid #CCCCCC;
+	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20);
+	border-radius: 5px;
+	background-color: #FFFFFF;
+	padding: 20px 20px;
+}
+
+#header {
+	border-bottom: 1px solid #CCC;
+}
+
+.qutebrowser-broken {
+	display: block;
+	width: 100%;
+}
+
+td {
+	margin-top: 20px;
+	color: #555;
+}
+
+h1 {
+	font-weight: normal;
+	color: #1e89c6;
+	margin-bottom: 10px;
+}
+
+ul {
+	margin-left: 20px;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+li {
+	margin-top: 10px;
+	margin-bottom: 10px;
 }
 {% endblock %}
 
@@ -35,19 +69,22 @@ function searchFor(uri) {
 {% endblock %}
 
 {% block content %}
-<div id="errorContainer">
-    <div id="errorTitle">
-        <p id="errorTitleText">Unable to load page</p>
-    </div>
-    <div id="errorMessage">
-        <p>Problem occurred while loading the URL {{ url }}</p>
-        <p id="errorMessageText">{{ error }}</p>
-    </p>
-    </div>
-
-    <form name="bl">
-        <input type="button" value="Try again" onclick="javascript:tryagain()" />
-        <!--<input type="button" value="Search" style="visibility:%s" onclick="javascript:searchFor('%s')" />-->
-    </form>
+<div id="error-container">
+	<table>
+		<tr>
+			<td style="width: 10%; vertical-align: top;">
+				<img style="width: 100%; display: block; max-width: 256px;" src="{{ resource_url('img/broken_qutebrowser_logo.png') }}" />
+			</td>
+			<td style="padding-left: 40px;">
+				<h1>Unable to load page</h1>
+				Error while opening {{ url }}: <br>
+				<p style="color: #a31a1a;">{{ error }}</p><br><br>
+				
+				<form name="bl">
+					<input type="button" value="Try again" onclick="javascript:tryagain()" />
+				</form>
+			</td>
+		</tr>
+	</table>
 </div>
 {% endblock %}

qutebrowser/utils/jinja.py

@@ -25,6 +25,8 @@ import jinja2
 
 from qutebrowser.utils import utils
 
+from PyQt5.QtCore import QUrl
+
 
 class Loader(jinja2.BaseLoader):
 
@@ -59,4 +61,9 @@ def _guess_autoescape(template_name):
     return ext in ('html', 'htm', 'xml')
 
 
+def resource_url(path):
+    image = utils.resource_filename(path)
+    return QUrl.fromLocalFile(image).toString(QUrl.FullyEncoded)
+
 env = jinja2.Environment(loader=Loader('html'), autoescape=_guess_autoescape)
+env.globals['resource_url'] = resource_url

tests/unit/utils/test_jinja.py

@@ -23,6 +23,7 @@ import os.path
 
 import pytest
 import jinja2
+from PyQt5.QtCore import QUrl
 
 from qutebrowser.utils import jinja
 
@@ -34,6 +35,8 @@ def patch_read_file(monkeypatch):
         """A read_file which returns a simple template if the path is right."""
         if path == os.path.join('html', 'test.html'):
             return """Hello {{var}}"""
+        elif path == os.path.join('html', 'test2.html'):
+            return """{{ resource_url('utils/testfile') }}"""
         else:
             raise IOError("Invalid path {}!".format(path))
 
@@ -48,6 +51,18 @@ def test_simple_template():
     assert data == "Hello World"
 
 
+def test_resource_url():
+    """Test resource_url() which can be used from templates."""
+    template = jinja.env.get_template('test2.html')
+    data = template.render()  # pylint: disable=no-member
+    print(data)
+    url = QUrl(data)
+    assert url.isValid()
+    assert url.scheme() == 'file'
+    with open(url.path(), 'r', encoding='utf-8') as f:
+        assert f.read().splitlines()[0] == "Hello World!"
+
+
 def test_not_found():
     """Test with a template which does not exist."""
     with pytest.raises(jinja2.TemplateNotFound) as excinfo: