Implement brand fonts (#87)

* [596] - Remove styling for header and defer to common

* [596] - Import JS and CSS build scripts from common as use as part of HTML generation

* [596] - Remove brfs dep

* [647] - Load font from common whilst showing spinner to hide and esnure font has a chance to load before use in Flamegraph

* [647] - Ensure flamegraph is redrawn once slow loading UI font is loaded after timeout

* [647] - Use clinic common to better orchestrate UI events on font load state

* [596] - Add class to body on font load to work in tandem with screenshot function to ensure loader has disappeared

* [596] - Ensure UI is drawn immediately despite state of font loading

* [596] - Point to Clinic Common dev branch for ease-of-testing

* [596] - Remove bodyClass that was hiding loader

* [596] - Wrap font loader function in setTimeout to prevent blocking removal of spinner

* [596] - Update Clinic Common dep

index.js

@@ -147,7 +147,7 @@ class ClinicFlame extends events.EventEmitter {
       headerText: 'Flame',
       nearFormLogo: nearFormLogoFile,
       uploadId: outputFilename.split('/').pop().split('.html').shift(),
-      body: `<main></main>`
+      body: '<main></main>'
     })
 
     pump(

visualizer/flame-graph.js

@@ -18,7 +18,7 @@ class FlameGraph extends HtmlContent {
   constructor (parentContent, contentProperties = {}) {
     const defaults = {
       showOptimizationStatus: false,
-      labelFont: 'Verdana, sans-serif',
+      labelFont: 'Archia, sans-serif',
       labelPadding: 3
     }
     contentProperties = Object.assign({}, defaults, contentProperties)
@@ -42,6 +42,10 @@ class FlameGraph extends HtmlContent {
 
     this.onNextAnimationEnd = null
 
+    this.ui.on('uiFontLoaded', () => {
+      this.draw(true)
+    })
+
     this.ui.on('setData', () => {
       this.initializeFromData()
     })
@@ -402,7 +406,7 @@ class FlameGraph extends HtmlContent {
     }
   }
 
-  draw () {
+  draw (forceRedraw = false) {
     super.draw()
 
     const { dataTree } = this.ui
@@ -417,7 +421,7 @@ class FlameGraph extends HtmlContent {
       this.sizeChanged = false
     }
 
-    let redrawGraph = false
+    let redrawGraph = forceRedraw
 
     if (this.renderedTree !== dataTree.activeTree()) {
       this.renderedTree = dataTree.activeTree()

visualizer/info-box.css

@@ -11,6 +11,7 @@
   flex-grow: 1;
   align-items: center;
   font-size: var(--normal-text-size);
+  line-height: 1.1;
   height: 2.9em;
   margin: 0;
   padding: 4px 8px;

visualizer/main.js

@@ -2,24 +2,44 @@
 require('@nearform/clinic-common/spinner')
 const Ui = require('./ui.js')
 const askBehaviours = require('@nearform/clinic-common/behaviours/ask')
+const loadFonts = require('@nearform/clinic-common/behaviours/font-loader')
 
-askBehaviours()
-
+// Create UI
 const ui = new Ui('main')
-ui.initializeElements()
-
-// TODO: see if there's a way to load this asyncronously (in case of huge data) that works with puppeteer
-const dataTree = require('./data.json')
-ui.setData(dataTree)
-
-// Select hottest frame, after frame visibility has been set in d3-fg
-// And only if no node was selected during initialization by some other means
-// (eg from parsing the history hash).
-ui.draw()
-if (!ui.selectedNode || ui.selectedNode.category === 'none') {
-  ui.selectHottestNode()
+
+// Called on font load or timeout
+const drawUi = () => {
+  document.body.classList.remove('is-loading-font')
+  document.body.classList.add('is-font-loaded')
+
+  ui.initializeElements()
+
+  // TODO: see if there's a way to load this asyncronously (in case of huge data) that works with puppeteer
+  const dataTree = require('./data.json')
+  ui.setData(dataTree)
+
+  // Select hottest frame, after frame visibility has been set in d3-fg
+  // And only if no node was selected during initialization by some other means
+  // (eg from parsing the history hash).
+  ui.draw()
+  if (!ui.selectedNode || ui.selectedNode.category === 'none') {
+    ui.selectHottestNode()
+  }
 }
 
+// Attach ask tray behaviours
+askBehaviours()
+
+// Orchestrate font loading
+setTimeout(() => (
+  loadFonts({
+    onLoad: () => ui.emit('uiFontLoaded'),
+    onTimeout: () => ui.emit('uiFontLoaded')
+  })
+))
+
+drawUi()
+
 if (process.env.DEBUG_MODE) {
   window.ui = ui
 }

visualizer/style.css

@@ -16,7 +16,6 @@
 @import "./side-bar.css";
 
 html {
-  font-family: sans-serif;
   font-size: 62.5%;
 }
 
@@ -29,7 +28,7 @@ code,
 kbd,
 samp,
 tt {
-  font-family:monospace,monospace;
+  font-family: var(--nc-font-family-monospace);
   font-size:1em;
 }
 
@@ -159,6 +158,7 @@ body {
 
 /* MS Edge doesn't like background colors on body elements when devtools open */
 main {
+  flex-grow: 1;
   background: var(--main-bg-color);
 }
 
@@ -214,11 +214,14 @@ html * {
 }
 
 /* Header */
-
 .nc-header {
   flex-shrink: 0;
 }
 
+.is-loading-font .nc-header {
+  opacity: 0;
+}
+
 div#main-content {
   display: flex;
   flex-grow: 1;
@@ -228,7 +231,6 @@ div#main-content {
   z-index: 0;
 }
 
-
 /* Footer */
 #footer {
   background-color: var(--opposite-contrast);
@@ -331,4 +333,4 @@ svg.icon-img {
   100% {
     opacity: 0.5;
   }
-}
+}