do not load fonts for the UI from the internet (#96)

* use font-roboto-local, to avoid slow load time when fonts.google.com is unavailable * use svg for logo
Jigsaw-Code · May 2, 2018 · 3d35afe · 3d35afe
1 parent 438528f
commit 3d35afe
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 26 deletions.
diff --git a/src/server_manager/bower.json b/src/server_manager/bower.json
@@ -16,6 +16,7 @@
   ],
   "dependencies": {
     "app-layout": "PolymerElements/app-layout#^2.0.4",
+    "font-roboto": "PolymerElements/font-roboto-local#^1.1.0",
     "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.1.1",
     "iron-icons": "PolymerElements/iron-icons#^2.0.1",
     "iron-fit-behavior": "PolymerElements/iron-fit-behavior#^2.1.0",

diff --git a/src/server_manager/electron_app/digital_ocean_modifications.ts b/src/server_manager/electron_app/digital_ocean_modifications.ts
@@ -333,8 +333,9 @@ function addDigitalOceanSignupBanner(text?: string) {
   // we should not rely on any frameworks like Polymer, as they might conflict with
   // existing frameworks on those pages.
   // All class names should begin with Outline to ensure no collisions.
+  // The outline:// protocol should be marked secure to avoid mixed content warnings.
   bannerDiv.innerHTML = `
-      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+      <link href="outline://web_app/bower_components/font-roboto/roboto.html" rel="import">
       <style>
         #outlineBanner {
           font-family: "Roboto", sans-serif;

diff --git a/src/server_manager/electron_app/index.ts b/src/server_manager/electron_app/index.ts
@@ -30,7 +30,8 @@ const debugMode = process.env.OUTLINE_DEBUG === 'true';
 // prevent window being garbage collected
 let mainWindow: Electron.BrowserWindow;
 
-electron.protocol.registerStandardSchemes(['outline']);
+// Mark secure to avoid mixed content warnings when loading DigitalOcean pages via https://.
+electron.protocol.registerStandardSchemes(['outline'], {secure: true});
 
 app.on('ready', () => {
   const menuTemplate = menu.getMenuTemplate(debugMode);

diff --git a/src/server_manager/images/outline-manager-logo.svg b/src/server_manager/images/outline-manager-logo.svg
diff --git a/src/server_manager/index.html b/src/server_manager/index.html
@@ -29,10 +29,6 @@
 
     <link rel="shortcut icon" href="/ui_components/images/favicon.png">
     <link rel="stylesheet" href="/ui_components/style.css">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Google+Sans" rel="stylesheet">
     <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
     <link rel="import" href="/bower_components/app-layout/app-toolbar/app-toolbar.html">
     <link rel="import" href="/ui_components/app-root.html">

diff --git a/src/server_manager/ui_components/app-root.html b/src/server_manager/ui_components/app-root.html
@@ -103,15 +103,17 @@
       #settingsDrawer #signOutButton:hover {
         color: var(--primary-green);
       }
-      app-toolbar [main-title] {
-        font-family: 'Google Sans', 'Roboto', sans-serif;
-        font-size: 20px;
-        text-align: center;
-      }
       app-toolbar paper-icon-button {
         /* needed so the "Outline Manager" title appears centered in the window. */
         position: absolute;
       }
+      app-toolbar [main-title] {
+        text-align: center;
+      }
+      app-toolbar [main-title] img {
+        height: 20px;
+        margin-top: 10px;
+      }
     </style>
 
     <app-drawer id="settingsDrawer">
@@ -146,7 +148,7 @@
 
     <app-toolbar class='toolbar'>
       <paper-icon-button icon="menu" on-tap="toggleSettingsDrawer"></paper-icon-button>
-      <div main-title>Outline Manager</div>
+      <div main-title><img src="images/outline-manager-logo.svg"></div>
     </app-toolbar>
 
     <div id='contentColumn'>

diff --git a/src/server_manager/ui_components/style.css b/src/server_manager/ui_components/style.css
@@ -123,20 +123,6 @@ pre {
   font-family: monospace;
 }
 
-/* "logo" stuff */
-
-/* header */
-#header {
-  padding: 15px 0 8px 20px;
-  background-color: #263238;
-  text-align: left;
-  height: 133px;
-}
-
-#header img {
-    height: 48px;
-}
-
 paper-menu {
   white-space: nowrap;
 }