Trac #30612: Set title of HTML page with Three.js viewer

Release Manager · Release Manager · commit 16741fff2cd1 · 2020-12-13T21:40:57.000+01:00
When having several browser windows/tabs open with Three.js plots in them, it can be difficult to remember which is which. Since the `title` element in the generated pages is empty, the filename/path is displayed in !Chrome/FireFox, and something like `tmp_e0or9kcy.html` isn't very helpful. This ticket proposes a new `page_title` viewer option to set the title of the HTML page. Additionally, the page title should be used to suggest a filename when using the "Save as HTML" menu item instead of the generic `graphic.html`. For example: {{{ show(dodecahedron(), page_title="Dodecahedron") }}} ...should produce a page titled "Dodecahedron" that suggests the filename `Dodecahedron.html` upon saving. URL: https://trac.sagemath.org/30612 Reported by: gh-jcamp0x2a Ticket author(s): Joshua Campbell Reviewer(s): Eric Gourgoulhon
diff --git a/src/doc/en/reference/plot3d/threejs.rst b/src/doc/en/reference/plot3d/threejs.rst
@@ -45,6 +45,9 @@ Options currently supported by the viewer:
 
 - ``opacity`` -- (default: 1) numeric value for transparency of lines and surfaces
 
+- ``page_title`` -- (default: None) string containing the title of the generated HTML page; often
+  displayed in the browser window's title bar, its tab list, and/or the operating system's task bar
+
 - ``projection`` -- (default: 'perspective') the type of camera projection to use;
   'perspective' or 'orthographic'
 
diff --git a/src/sage/ext_data/threejs/threejs_template.html b/src/sage/ext_data/threejs/threejs_template.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title></title>
+<title>SAGE_TITLE</title>
 <meta charset="utf-8">
 <meta name=viewport content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 <style>
@@ -469,9 +469,19 @@
         var blob = new Blob( [ '<!DOCTYPE html>\n' + document.documentElement.outerHTML ] );
         var a = document.body.appendChild( document.createElement( 'a' ) );
         a.href = window.URL.createObjectURL( blob );
-        a.download = 'graphic.html';
+        a.download = suggestFilename();
         a.click();
 
+        function suggestFilename() {
+            if ( !document.title ) {
+                return 'graphic.html';
+            } else if ( /\.html?$/i.test( document.title ) ) {
+                return document.title; // already ends in .htm or .html
+            } else {
+                return document.title + '.html';
+            }
+        }
+
     }
 
     function getViewpoint() {
diff --git a/src/sage/plot/plot3d/base.pyx b/src/sage/plot/plot3d/base.pyx
@@ -398,6 +398,13 @@ cdef class Graphics3d(SageObject):
             sage: (css in str) or (html in str)
             False
 
+        If a page title is provided, it is stripped and HTML-escaped::
+
+            sage: d = dodecahedron(page_title='\t"Page" & <Title>\n')
+            sage: str = d._rich_repr_threejs(online=True).html.get_str()
+            sage: '<title>&quot;Page&quot; &amp; &lt;Title&gt;</title>' in str
+            True
+
         """
         options = self._process_viewing_options(kwds)
         options.setdefault('online', False)
@@ -490,6 +497,14 @@ cdef class Graphics3d(SageObject):
             with open(os.path.join(SAGE_EXTCODE, 'threejs', 'animation.js')) as f:
                 extra_html += '<script>' + f.read() + '</script>'
 
+        page_title = options.get('page_title')
+        if page_title is None:
+            page_title = ""
+        else:
+            from html import escape as html_escape
+            page_title = html_escape(str(page_title).strip())
+
+        html = html.replace('SAGE_TITLE', page_title)
         html = html.replace('SAGE_SCRIPTS', scripts)
         html = html.replace('SAGE_STYLES', styles)
         html = html.replace('SAGE_EXTRA_HTML', extra_html)
