Sanic pages coloring (#2703)

* tracerite var colors * Simplified parse_content_header escaping (#2707) * Move comments, darken bg color, move debug links to contextmanager * Lineup H2s * Make pretty --------- Co-authored-by: L. Kärkkäinen <[email protected]>
sanic-org · Mar 6, 2023 · ee290ba · ee290ba
1 parent 8b0ffbb
commit ee290ba
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 106 deletions.
diff --git a/sanic/headers.py b/sanic/headers.py
@@ -19,7 +19,6 @@
 
 _token, _quoted = r"([\w!#$%&'*+\-.^_`|~]+)", r'"([^"]*)"'
 _param = re.compile(rf";\s*{_token}=(?:{_token}|{_quoted})", re.ASCII)
-_firefox_quote_escape = re.compile(r'\\"(?!; |\s*$)')
 _ipv6 = "(?:[0-9A-Fa-f]{0,4}:){2,7}[0-9A-Fa-f]{0,4}"
 _ipv6_re = re.compile(_ipv6)
 _host_re = re.compile(
@@ -268,19 +267,23 @@ def parse_accept(accept: Optional[str]) -> AcceptList:
 def parse_content_header(value: str) -> Tuple[str, Options]:
     """Parse content-type and content-disposition header values.
 
-    E.g. 'form-data; name=upload; filename=\"file.txt\"' to
+    E.g. `form-data; name=upload; filename="file.txt"` to
     ('form-data', {'name': 'upload', 'filename': 'file.txt'})
 
     Mostly identical to cgi.parse_header and werkzeug.parse_options_header
-    but runs faster and handles special characters better. Unescapes quotes.
+    but runs faster and handles special characters better.
+
+    Unescapes %22 to `"` and %0D%0A to `\n` in field values.
     """
-    value = _firefox_quote_escape.sub("%22", value)
     pos = value.find(";")
     if pos == -1:
         options: Dict[str, Union[int, str]] = {}
     else:
         options = {
-            m.group(1).lower(): m.group(2) or m.group(3).replace("%22", '"')
+            m.group(1)
+            .lower(): (m.group(2) or m.group(3))
+            .replace("%22", '"')
+            .replace("%0D%0A", "\n")
             for m in _param.finditer(value[pos:])
         }
         value = value[:pos]

diff --git a/sanic/pages/base.py b/sanic/pages/base.py
@@ -11,9 +11,9 @@ class BasePage(ABC, metaclass=CSS):  # no cov
     TITLE = "Sanic"
     HEADING = None
     CSS: str
+    doc: Builder
 
     def __init__(self, debug: bool = True) -> None:
-        self.doc: Builder = None
         self.debug = debug
 
     @property
@@ -39,6 +39,23 @@ def _foot(self) -> None:
                 self._sanic_logo()
             if self.debug:
                 self.doc.div(f"Version {VERSION}")
+                with self.doc.div:
+                    for idx, (title, href) in enumerate(
+                        (
+                            ("Docs", "https://sanic.dev"),
+                            ("Help", "https://sanic.dev/en/help.html"),
+                            ("GitHub", "https://github.com/sanic-org/sanic"),
+                        )
+                    ):
+                        if idx > 0:
+                            self.doc(" | ")
+                        self.doc.a(
+                            title,
+                            href=href,
+                            target="_blank",
+                            referrerpolicy="no-referrer",
+                        )
+                self.doc.div("DEBUG mode")
 
     @abstractmethod
     def _body(self) -> None:

diff --git a/sanic/pages/error.py b/sanic/pages/error.py
@@ -80,8 +80,11 @@ def _body(self) -> None:
                     "Details for developers (Sanic debug mode only)"
                 )
                 if self.exc:
-                    self.doc.h2(f"Exception in {route_name}:")
-                    self.doc(html_traceback(self.exc, include_js_css=False))
+                    with self.doc.div(class_="exception-wrapper"):
+                        self.doc.h2(f"Exception in {route_name}:")
+                        self.doc(
+                            html_traceback(self.exc, include_js_css=False)
+                        )
 
                 self._key_value_table(
                     f"{self.request.method} {self.request.path}",
@@ -92,12 +95,15 @@ def _body(self) -> None:
     def _key_value_table(
         self, title: str, table_id: str, data: Mapping[str, Any]
     ) -> None:
-        self.doc.h2(title)
-        with self.doc.dl(id=table_id, class_="key-value-table smalltext"):
-            for key, value in data.items():
-                # Reading values may cause a new exception, so suppress it
-                try:
-                    value = str(value)
-                except Exception:
-                    value = E.em("Unable to display value")
-                self.doc.dt.span(key, class_="nobr key").span(": ").dd(value)
+        with self.doc.div(class_="key-value-display"):
+            self.doc.h2(title)
+            with self.doc.dl(id=table_id, class_="key-value-table smalltext"):
+                for key, value in data.items():
+                    # Reading values may cause a new exception, so suppress it
+                    try:
+                        value = str(value)
+                    except Exception:
+                        value = E.em("Unable to display value")
+                    self.doc.dt.span(key, class_="nobr key").span(": ").dd(
+                        value
+                    )
diff --git a/sanic/pages/styles/BasePage.css b/sanic/pages/styles/BasePage.css
@@ -2,32 +2,40 @@
 
 :root {
     --sanic: #ff0d68;
-    --sanic-blue: #0092FF;
     --sanic-yellow: #FFE900;
-    --sanic-purple: #833FE3;
-    --sanic-green: #37ae6f;
-    --sanic-background: #f1f5f9;
-    --sanic-text: #1f2937;
-    --sanic-tab-background: #fff;
-    --sanic-tab-text: #0f172a;
-    --sanic-tab-shadow: #adadad;
+    --sanic-background: #efeced;
+    --sanic-text: #121010;
+    --sanic-text-lighter: #756169;
+    --sanic-link: #ff0d68;
+    --sanic-block-background: #f7f4f6;
+    --sanic-block-text: #000;
+    --sanic-block-alt-text: #6b6468;
+    --sanic-header-background: #272325;
+    --sanic-header-border: #fff;
+    --sanic-header-text: #fff;
     --sanic-highlight-background: var(--sanic-yellow);
     --sanic-highlight-text: var(--sanic-text);
-    --sanic-header-background: #000;
+    --sanic-tab-background: #f7f4f6;
+    --sanic-tab-shadow: #f7f6f6;
+    --sanic-tab-text: #222021;
+    --sanic-tracerite-var: var(--sanic-text);
+    --sanic-tracerite-val: #ff0d68;
+    --sanic-tracerite-type: #6d6a6b;
 }
 
+
 @media (prefers-color-scheme: dark) {
     :root {
-        --sanic-purple: #D246DE;
-        --sanic-green: #16DB93;
-        --sanic-background: #111;
-        --sanic-text: #e7e7e7;
-        --sanic-tab-background: #484848;
-        --sanic-tab-text: #e1e1e1;
-        --sanic-tab-shadow: #000;
-        --sanic-highlight-background: var(--sanic-yellow);
-        --sanic-highlight-text: #000;
-        --sanic-header-background: #000;
+        --sanic-text: #f7f4f6;
+        --sanic-background: #121010;
+        --sanic-block-background: #0f0d0e;
+        --sanic-block-text: #f7f4f6;
+        --sanic-header-background: #030203;
+        --sanic-header-border: #000;
+        --sanic-highlight-text: var(--sanic-background);
+        --sanic-tab-background: #292728;
+        --sanic-tab-shadow: #0f0d0e;
+        --sanic-tab-text: #aea7ab;
     }
 }
 
@@ -45,12 +53,12 @@ body {
     line-height: 125%;
 }
 
-body > * {
+body>* {
     padding: 1rem 2vw;
 }
 
 @media (max-width: 1000px) {
-    body > * {
+    body>* {
         padding: 0.5rem 1.5vw;
     }
 
@@ -61,8 +69,10 @@ body > * {
 }
 
 main {
-    min-height: 70vh; /* Make sure the footer is closer to bottom */
-    padding: 1rem 2.5rem; /* Generous padding for readability */
+    /* Make sure the footer is closer to bottom */
+    min-height: 70vh;
+    /* Generous padding for readability */
+    padding: 1rem 2.5rem;
 }
 
 .smalltext {
@@ -75,9 +85,9 @@ main {
 }
 
 header {
-    background: #111;
-    color: #e1e1e1;
-    border-bottom: 1px solid #272727;
+    background: var(--sanic-header-background);
+    color: var(--sanic-header-text);
+    border-bottom: 1px solid var(--sanic-header-border);
     text-align: center;
 }
 
@@ -86,20 +96,17 @@ footer {
     display: flex;
     flex-direction: column;
     font-size: 0.8rem;
-    margin-top: 2rem;
+    margin: 2rem;
+    line-height: 1.5em;
 }
 
 h1 {
     text-align: left;
 }
 
-a:visited {
-    color: inherit;
-}
-
 a {
     text-decoration: none;
-    color: #88f;
+    color: var(--sanic-link);
 }
 
 a:hover,
@@ -125,14 +132,15 @@ span.icon {
     }
 }
 
-#sanic pre, #sanic code {
+#sanic pre,
+#sanic code {
     font-family: "Fira Code",
-    "Source Code Pro",
-    Menlo,
-    Meslo,
-    Monaco,
-    Consolas,
-    Lucida Console,
-    monospace;
+        "Source Code Pro",
+        Menlo,
+        Meslo,
+        Monaco,
+        Consolas,
+        Lucida Console,
+        monospace;
     font-size: 0.8rem;
-}
+}
diff --git a/sanic/pages/styles/ErrorPage.css b/sanic/pages/styles/ErrorPage.css
@@ -16,21 +16,21 @@
 
 summary {
     margin-top: 3em;
-    color: var(--sanic-blue);
+    color: var(--sanic-text-lighter);
     cursor: pointer;
 }
 
 .tracerite {
-    --tracerite-var: var(--sanic-blue);
-    --tracerite-val: var(--sanic-green);
-    --tracerite-type: var(--sanic-purple);
+    --tracerite-var: var(--sanic-tracerite-var);
+    --tracerite-val: var(--sanic-tracerite-val);
+    --tracerite-type: var(--sanic-tracerite-type);
     --tracerite-exception: var(--sanic);
     --tracerite-highlight: var(--sanic-yellow);
     --tracerite-tab: var(--sanic-tab-background);
     --tracerite-tab-text: var(--sanic-tab-text);
 }
 
-.tracerite > h3 {
+.tracerite>h3 {
     margin: 0.5rem 0 !important;
 }
 
@@ -46,10 +46,15 @@ summary {
 .tracerite .traceback-labels {
     padding-top: 5px;
 }
+
 .tracerite .traceback-labels button:hover {
     filter: contrast(150%) brightness(120%) drop-shadow(0 -0 2px var(--sanic-tab-shadow));
 }
 
+#sanic .tracerite .tracerite-tooltip::before {
+    bottom: 1.75em;
+}
+
 #sanic .tracerite .traceback-details mark span {
     background: var(--sanic-highlight-background);
     color: var(--sanic-highlight-text);
@@ -59,16 +64,26 @@ header {
     background: var(--sanic-header-background);
 }
 
-h1 {
-    /*margin-left: -1.5rem;  !* Emoji partially in the left margin *!*/
-}
-
 h2 {
-    margin: 1em 0 0.2em 0;
-    font-size: 1.25rem;
+    font-size: 1.3rem;
     color: var(--sanic-text);
 }
 
+.key-value-display,
+.exception-wrapper {
+    padding: 0.5rem;
+    margin-top: 1rem;
+}
+
+.key-value-display {
+    background-color: var(--sanic-block-background);
+    color: var(--sanic-block-text);
+}
+
+.key-value-display h2 {
+    margin-bottom: 0.2em;
+}
+
 dl.key-value-table {
     width: 100%;
     margin: 0;
@@ -83,10 +98,11 @@ dl.key-value-table * {
 }
 
 dl.key-value-table dt {
-    color: #888;
+    color: var(--sanic-block-alt-text);
     word-break: break-word;
 }
 
 dl.key-value-table dd {
-    word-break: break-all; /* Better breaking for cookies header and such */
+    /* Better breaking for cookies header and such */
+    word-break: break-all;
 }