move the inline css and some more js into separate files

- stdHtml() css= arg now takes a list of files like js=
- the files are loaded in the head of the document so that styling
that comes later in the document can easily override it

fixes:
https://anki.tenderapp.com/discussions/beta-testing/661-anki-210-beta-7/page/1#comment_43164447
https://anki.tenderapp.com/discussions/beta-testing/661-anki-210-beta-7#comment_43177130

aqt/browser.py

@@ -1119,8 +1119,8 @@ where id in %s""" % ids2str(sf))
         jsinc = ["jquery.js","browsersel.js",
                  "mathjax/conf.js", "mathjax/MathJax.js",
                  "reviewer.js"]
-        self._previewWeb.stdHtml(self.mw.reviewer._revHtml+
+        self._previewWeb.stdHtml(self.mw.reviewer._revHtml,
-                               self._previewWeb.bundledCSS("reviewer.css"),
+                                 css=["reviewer.css"],
                                  head=base, js=jsinc)
 
 
@@ -1797,7 +1797,8 @@ class BrowserToolbar(Toolbar):
 
     def draw(self):
         self.web.onBridgeCmd = self._linkHandler
-        self.web.stdHtml(self.html(), self.css())
+        self.web.stdHtml(self.html(),
+                         css=["toolbar.css", "browser-toolbar.css"])
         self.update()
         if isLin:
             # adjust height on a delay to work around a qt crash when
@@ -1839,15 +1840,6 @@ class BrowserToolbar(Toolbar):
         right += "</div>"
         return self._body % right
 
-    def css(self):
-        return self._css + """
-#header { font-weight: normal; }
-a { margin-right: 1em; }
-.hitem { overflow: hidden; white-space: nowrap; }
-.hitem img { padding: 1px; }
-.buttonOn { border: 1px solid #aaa; padding: 0px !important; }
-"""
-
     # Link handling
     ######################################################################
 

aqt/clayout.py

@@ -174,11 +174,11 @@ class CardLayout(QDialog):
         jsinc = ["jquery.js","browsersel.js",
                  "mathjax/conf.js", "mathjax/MathJax.js",
                  "reviewer.js"]
-        pform.frontWeb.stdHtml(self.mw.reviewer._revHtml+
+        pform.frontWeb.stdHtml(self.mw.reviewer._revHtml,
-                         pform.frontWeb.bundledCSS("reviewer.css"),
+                               css=["reviewer.css"],
                                head=base, js=jsinc)
-        pform.backWeb.stdHtml(self.mw.reviewer._revHtml+
+        pform.backWeb.stdHtml(self.mw.reviewer._revHtml,
-                                    pform.backWeb.bundledCSS("reviewer.css"),
+                              css=["reviewer.css"],
                               head=base, js=jsinc)
 
     def updateMainArea(self):

aqt/deckbrowser.py

@@ -69,26 +69,6 @@ class DeckBrowser:
     # HTML generation
     ##########################################################################
 
-    _dragIndicatorBorderWidth = "1px"
-
-    _css = """
-a.deck { color: #000; text-decoration: none; min-width: 5em;
-         display:inline-block; }
-a.deck:hover { text-decoration: underline; }
-tr.deck td { border-bottom: %(width)s solid #e7e7e7; }
-tr.top-level-drag-row td { border-bottom: %(width)s solid transparent; }
-td { white-space: nowrap; }
-tr.drag-hover td { border-bottom: %(width)s solid #aaa; }
-body { margin: 1em; -webkit-user-select: none; }
-.current { background-color: #e7e7e7; }
-.decktd { min-width: 15em; }
-.count { min-width: 4em; text-align: right; }
-.optscol { width: 2em; }
-.collapse { color: #000; text-decoration:none; display:inline-block;
-    width: 1em; }
-.filtered { color: #00a !important; }
-""" % dict(width=_dragIndicatorBorderWidth)
-
     _body = """
 <center>
 <table cellspacing=0 cellpading=3>
@@ -99,49 +79,17 @@ body { margin: 1em; -webkit-user-select: none; }
 %(stats)s
 %(countwarn)s
 </center>
-<script>
-    $( init );
-
-    function init() {
-
-        $("tr.deck").draggable({
-            scroll: false,
-
-            // can't use "helper: 'clone'" because of a bug in jQuery 1.5
-            helper: function (event) {
-                return $(this).clone(false);
-            },
-            delay: 200,
-            opacity: 0.7
-        });
-        $("tr.deck").droppable({
-            drop: handleDropEvent,
-            hoverClass: 'drag-hover',
-        });
-        $("tr.top-level-drag-row").droppable({
-            drop: handleDropEvent,
-            hoverClass: 'drag-hover',
-        });
-    }
-
-    function handleDropEvent(event, ui) {
-        var draggedDeckId = ui.draggable.attr('id');
-        var ontoDeckId = $(this).attr('id');
-
-        pycmd("drag:" + draggedDeckId + "," + ontoDeckId);
-    }
-</script>
 """
 
     def _renderPage(self, reuse=False):
-        css = self.mw.sharedCSS + self._css
         if not reuse:
             self._dueTree = self.mw.col.sched.deckDueTree()
         tree = self._renderDeckTree(self._dueTree)
         stats = self._renderStats()
         self.web.stdHtml(self._body%dict(
-            tree=tree, stats=stats, countwarn=self._countWarn()), css=css,
+            tree=tree, stats=stats, countwarn=self._countWarn()),
-                         js=["jquery.js", "jquery-ui.js"])
+                         css=["deckbrowser.css"],
+                         js=["jquery.js", "jquery-ui.js", "deckbrowser.js"])
         self.web.key = "deckBrowser"
         self._drawButtons()
 

aqt/editor.py

@@ -103,11 +103,11 @@ class Editor:
         """ % dict(flds=_("Fields"), cards=_("Cards"), rightbts="".join(righttopbtns))
         bgcol = self.mw.app.palette().window().color().name()
         # then load page
-        html = self.web.bundledCSS("editor.css") + _html
+        self.web.stdHtml(_html % (
-        self.web.stdHtml(html % (
             bgcol, bgcol,
             topbuts,
             _("Show Duplicates")), head=self.mw.baseHTML(),
+                         css=["editor.css"],
                          js=["jquery.js", "editor.js"])
 
     # Top buttons

aqt/main.py

@@ -482,20 +482,13 @@ the manual for information on how to restore from an automatic backup."))
 %s<br>
 %s</div></div></center>
 <script>$('#resume').focus()</script>
-""" % (i, b), css=self.sharedCSS)
+""" % (i, b))
         self.bottomWeb.hide()
         self.web.setFocus()
 
     # HTML helpers
     ##########################################################################
 
-    sharedCSS = """
-body {
-margin: 2em;
-}
-h1 { margin-bottom: 0.2em; }
-"""
-
     def button(self, link, name, key=None, class_="", id="", extra=""):
         class_ = "but "+ class_
         if key:

aqt/overview.py

@@ -110,7 +110,9 @@ class Overview:
                 shareLink=shareLink,
                 desc=self._desc(deck),
                 table=self._table()
-            ), self.mw.sharedCSS + self._css)
+            ),
+                         css=["overview.css"],
+                         js=["jquery.js", "overview.js"])
 
     def _desc(self, deck):
         if deck['dyn']:
@@ -167,29 +169,6 @@ to their original deck.""")
 %(desc)s
 %(table)s
 </center>
-<script>$(function () { $("#study").focus(); });</script>
-"""
-
-    _css = """
-.smallLink { font-size: 10px; }
-h3 { margin-bottom: 0; }
-.descfont {
-padding: 1em; color: #333;
-}
-.description {
-white-space: pre-wrap;
-}
-#fulldesc {
-display:none;
-}
-.descmid {
-width: 70%;
-margin: 0 auto 0;
-text-align: left;
-}
-.dyn {
-text-align: center;
-}
 """
 
     # Bottom area

aqt/reviewer.py

@@ -126,8 +126,9 @@ class Reviewer:
         self._reps = 0
         base = self.mw.baseHTML()
         # main window
-        self.web.stdHtml(self._revHtml +
+        self.web.stdHtml(self._revHtml,
-                         self.web.bundledCSS("reviewer.css"), head=base,
+                         head=base,
+                         css=["reviewer.css"],
                          js=["jquery.js",
                              "browsersel.js",
                              "mathjax/conf.js",
@@ -137,7 +138,7 @@ class Reviewer:
         self.bottom.web.show()
         self.bottom.web.stdHtml(
             self._bottomHTML(),
-            self.bottom._css + self._bottomCSS,
+            css=["toolbar-bottom.css", "reviewer-bottom.css"],
             js=["jquery.js", "reviewer-bottom.js"]
         )
 
@@ -440,29 +441,6 @@ Please run Tools>Empty Cards""")
     # Bottom bar
     ##########################################################################
 
-    _bottomCSS = """
-body {
-margin: 0; padding: 0;
-}
-button {
-min-width: 60px; white-space: nowrap;
-}
-.hitem { margin-top: 2px; }
-.stat { padding-top: 5px; }
-.stat2 { padding-top: 3px; font-weight: normal; }
-.stattxt { padding-left: 5px; padding-right: 5px; white-space: nowrap; }
-.nobold { font-weight: normal; display: inline-block; padding-top: 4px; }
-.spacer { height: 18px; }
-.spacer2 { height: 16px; }
-#outer {
-  border-top: 1px solid #aaa;
-}
-#innertable {
-padding: 3px;
-}
-
-"""
-
     def _bottomHTML(self):
         return """
 <center id=outer>

aqt/toolbar.py

@@ -21,7 +21,8 @@ class Toolbar:
 
     def draw(self):
         self.web.onBridgeCmd = self._linkHandler
-        self.web.stdHtml(self._body % self._centerLinks(), self._css)
+        self.web.stdHtml(self._body % self._centerLinks(),
+                         css=["toolbar.css"])
         self.web.adjustHeightToFit()
 
     # Available links
@@ -87,35 +88,6 @@ class Toolbar:
 <td class=tdcenter align=center>%s</td>
 </tr></table>
 </center>
-"""
-
-    _css = """
-#header {
-padding:3px;
-font-weight: bold;
-border-bottom: 1px solid #aaa;
-background: %s;
-}
-
-.tdcenter { white-space: nowrap; }
-
-body {
-margin:0; padding:0;
--webkit-user-select: none;
-overflow: hidden;
-}
-
-* { -webkit-user-drag: none; }
-
-.hitem {
-padding-right: 6px;
-text-decoration: none;
-color: #000;
-}
-.hitem:hover {
-text-decoration: underline;
-}
-
 """
 
 # Bottom bar
@@ -123,15 +95,6 @@ text-decoration: underline;
 
 class BottomBar(Toolbar):
 
-    _css = Toolbar._css + """
-#header {
-border-bottom: 0;
-border-top: 1px solid #aaa;
-margin-bottom: 6px;
-margin-top: 0;
-}
-"""
-
     _centerBody = """
 <center id=outer><table width=100%% id=header><tr><td align=center>
 %s</td></tr></table></center>
@@ -141,5 +104,5 @@ margin-top: 0;
         self.web.onBridgeCmd = self._linkHandler
         self.web.stdHtml(
             self._centerBody % buf,
-            self._css)
+            css=["toolbar.css", "toolbar-bottom.css"])
         self.web.adjustHeightToFit()

aqt/webview.py

@@ -159,7 +159,7 @@ class AnkiWebView(QWebEngineView):
         dpi = screen.logicalDpiX()
         return max(1, dpi / 96.0)
 
-    def stdHtml(self, body, css="", js=["jquery.js"], head=""):
+    def stdHtml(self, body, css=[], js=["jquery.js"], head=""):
         if isWin:
             buttonspec = "button { font-size: 12px; font-family:'Segoe UI'; }"
             fontspec = 'font-size:12px;font-family:"Segoe UI";'
@@ -175,26 +175,28 @@ border-radius:5px; font-family: Helvetica }"""
             family = self.font().family()
             fontspec = 'font-size:14px;font-family:%s;'%\
                 family
+        csstxt = "\n".join([self.bundledCSS("webview.css")]+
+                           [self.bundledCSS(fname) for fname in css])
         jstxt = "\n".join([self.bundledScript("webview.js")]+
                           [self.bundledScript(fname) for fname in js])
+        head += csstxt + jstxt
 
-        html="""
+
+        html=f"""
 <!doctype html>
-<html><head><title>%s</title><style>
+<html><head>
-body { zoom: %f; %s }
+<title>{self.title}</title>
-%s
-%s</style>
-%s
-%s
 
+<style>
+body {{ zoom: {self.zoomFactor()}; {fontspec} }}
+{buttonspec}
+</style>
+  
+{head}
 </head>
-<body>%s</body></html>""" % (
+
-            self.title,
+<body>{body}</body>
-            self.zoomFactor(),
+</html>"""
-            fontspec,
-            buttonspec,
-            css, jstxt,
-    head, body)
         #print(html)
         self.setHtml(html)
 

web/browser-toolbar.css

@@ -0,0 +1,21 @@
+#header {
+    font-weight: normal;
+}
+
+a {
+    margin-right: 1em;
+}
+
+.hitem {
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.hitem img {
+    padding: 1px;
+}
+
+.buttonOn {
+    border: 1px solid #aaa;
+    padding: 0 !important;
+}

web/deckbrowser.css

@@ -0,0 +1,59 @@
+a.deck {
+    color: #000;
+    text-decoration: none;
+    min-width: 5em;
+    display: inline-block;
+}
+
+a.deck:hover {
+    text-decoration: underline;
+}
+
+tr.deck td {
+    border-bottom: 1px solid #e7e7e7;
+}
+
+tr.top-level-drag-row td {
+    border-bottom: 1px solid transparent;
+}
+
+td {
+    white-space: nowrap;
+}
+
+tr.drag-hover td {
+    border-bottom: 1px solid #aaa;
+}
+
+body {
+    margin: 1em;
+    -webkit-user-select: none;
+}
+
+.current {
+    background-color: #e7e7e7;
+}
+
+.decktd {
+    min-width: 15em;
+}
+
+.count {
+    min-width: 4em;
+    text-align: right;
+}
+
+.optscol {
+    width: 2em;
+}
+
+.collapse {
+    color: #000;
+    text-decoration: none;
+    display: inline-block;
+    width: 1em;
+}
+
+.filtered {
+    color: #00a !important;
+}

web/deckbrowser.js

@@ -0,0 +1,30 @@
+$(init);
+
+function init() {
+
+    $("tr.deck").draggable({
+        scroll: false,
+
+        // can't use "helper: 'clone'" because of a bug in jQuery 1.5
+        helper: function (event) {
+            return $(this).clone(false);
+        },
+        delay: 200,
+        opacity: 0.7
+    });
+    $("tr.deck").droppable({
+        drop: handleDropEvent,
+        hoverClass: 'drag-hover'
+    });
+    $("tr.top-level-drag-row").droppable({
+        drop: handleDropEvent,
+        hoverClass: 'drag-hover'
+    });
+}
+
+function handleDropEvent(event, ui) {
+    var draggedDeckId = ui.draggable.attr('id');
+    var ontoDeckId = $(this).attr('id');
+
+    pycmd("drag:" + draggedDeckId + "," + ontoDeckId);
+}

web/overview.css

@@ -0,0 +1,30 @@
+.smallLink {
+    font-size: 10px;
+}
+
+h3 {
+    margin-bottom: 0;
+}
+
+.descfont {
+    padding: 1em;
+    color: #333;
+}
+
+.description {
+    white-space: pre-wrap;
+}
+
+#fulldesc {
+    display: none;
+}
+
+.descmid {
+    width: 70%;
+    margin: 0 auto 0;
+    text-align: left;
+}
+
+.dyn {
+    text-align: center;
+}

web/overview.js

@@ -0,0 +1 @@
+$(function () { $("#study").focus(); });

web/reviewer-bottom.css

@@ -0,0 +1,50 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+button {
+    min-width: 60px;
+    white-space: nowrap;
+}
+
+.hitem {
+    margin-top: 2px;
+}
+
+.stat {
+    padding-top: 5px;
+}
+
+.stat2 {
+    padding-top: 3px;
+    font-weight: normal;
+}
+
+.stattxt {
+    padding-left: 5px;
+    padding-right: 5px;
+    white-space: nowrap;
+}
+
+.nobold {
+    font-weight: normal;
+    display: inline-block;
+    padding-top: 4px;
+}
+
+.spacer {
+    height: 18px;
+}
+
+.spacer2 {
+    height: 16px;
+}
+
+#outer {
+    border-top: 1px solid #aaa;
+}
+
+#innertable {
+    padding: 3px;
+}

web/toolbar-bottom.css

@@ -0,0 +1,6 @@
+#header {
+    border-bottom: 0;
+    border-top: 1px solid #aaa;
+    margin-bottom: 6px;
+    margin-top: 0;
+}

web/toolbar.css

@@ -0,0 +1,30 @@
+#header {
+    padding: 3px;
+    font-weight: bold;
+    border-bottom: 1px solid #aaa;
+}
+
+.tdcenter {
+    white-space: nowrap;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    -webkit-user-select: none;
+    overflow: hidden;
+}
+
+* {
+    -webkit-user-drag: none;
+}
+
+.hitem {
+    padding-right: 6px;
+    text-decoration: none;
+    color: #000;
+}
+
+.hitem:hover {
+    text-decoration: underline;
+}

web/webview.css

@@ -0,0 +1,7 @@
+body {
+    margin: 2em;
+}
+
+h1 {
+    margin-bottom: 0.2em;
+}