Change fontawesome support to work for fontawesome 4 and 5.

JupyterLab and notebook are upgrading to fontawesome 5 (with the v4 backwards compatibility shim). However, in some places, our CSS is very specific to version 4. This commit modifies these places to use syntax that should for both fontawesome 4 and 5. It involves some DOM structure changes, but that is a private implementation detail, so is backwards compatible with our public API.

This is a forward-port of jupyter-widgets#2793 and 5941cba

Fixes jupyter-widgets#2794

Author: jasongrout

packages/controls/css/widgets-base.css

@@ -395,23 +395,13 @@
   line-height: var(--jp-widgets-inline-height);
   margin-right: var(--jp-widgets-inline-margin);
   margin-left: var(--jp-widgets-inline-margin);
-
-  /* from the fa class in FontAwesome: https://github.com/FortAwesome/Font-Awesome/blob/49100c7c3a7b58d50baa71efef11af41a66b03d3/css/font-awesome.css#L14 */
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 .widget-valid.mod-valid i:before {
-  content: '\f00c';
   color: green;
 }
 
 .widget-valid.mod-invalid i:before {
-  content: '\f00d';
   color: red;
 }
 
@@ -953,6 +943,8 @@
   margin-left: 4px;
 }
 
+/* This font-awesome strategy may not work across FA4 and FA5, but we don't
+actually support closable tabs, so it really doesn't matter */
 .jupyter-widgets.widget-tab
   > .p-TabBar
   .p-mod-closable
@@ -998,20 +990,6 @@
   border-bottom: none;
 }
 
-.p-Collapse .p-Collapse-header::before {
-  content: '\f0da\00A0'; /* caret-right, non-breaking space */
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.p-Collapse-open > .p-Collapse-header::before {
-  content: '\f0d7\00A0'; /* caret-down, non-breaking space */
-}
-
 .p-Collapse-contents {
   padding: var(--jp-widgets-container-padding);
   background-color: var(--jp-layout-color1);

packages/controls/src/lumino/accordion.ts

@@ -40,6 +40,13 @@ export class Collapse extends Widget {
     this._header = new Widget();
     this._header.addClass(COLLAPSE_HEADER_CLASS);
     this._header.node.addEventListener('click', this);
+    // Fontawesome icon for caret
+    const icon = document.createElement('i');
+    icon.classList.add('fa', 'fa-fw', 'fa-caret-right');
+    this._header.node.appendChild(icon);
+    // Label content
+    this._header.node.appendChild(document.createElement('span'));
+
     this._content = new Panel();
     this._content.addClass(COLLAPSE_CONTENTS_CLASS);
 
@@ -111,14 +118,19 @@ export class Collapse extends Widget {
       this._content.hide();
     }
     this.removeClass(COLLAPSE_CLASS_OPEN);
+    this._header.node.children[0].classList.add('fa-caret-right');
+    this._header.node.children[0].classList.remove('fa-caret-down');
     this._collapseChanged.emit(void 0);
   }
+
   private _uncollapse(): void {
     this._collapsed = false;
     if (this._content) {
       this._content.show();
     }
     this.addClass(COLLAPSE_CLASS_OPEN);
+    this._header.node.children[0].classList.add('fa-caret-down');
+    this._header.node.children[0].classList.remove('fa-caret-right');
     this._collapseChanged.emit(void 0);
   }
 
@@ -150,7 +162,7 @@ export class Collapse extends Widget {
    * Handle the `changed` signal of a title object.
    */
   private _onTitleChanged(sender: Title<Widget>): void {
-    this._header.node.textContent = this._widget.title.label;
+    this._header.node.children[1].textContent = this._widget.title.label;
   }
 
   private _onChildDisposed(sender: Widget): void {

packages/controls/src/widget_bool.ts

@@ -301,13 +301,14 @@ export class ValidView extends DescriptionView {
   /**
    * Called when view is rendered.
    */
-  render(): void {
+  render() {
     super.render();
     this.el.classList.add('jupyter-widgets');
     this.el.classList.add('widget-valid');
     this.el.classList.add('widget-inline-hbox');
-    const icon = document.createElement('i');
-    this.el.appendChild(icon);
+    this.icon = document.createElement('i');
+    this.icon.classList.add('fa', 'fa-fw');
+    this.el.appendChild(this.icon);
     this.readout = document.createElement('span');
     this.readout.classList.add('widget-valid-readout');
     this.readout.classList.add('widget-readout');
@@ -321,15 +322,20 @@ export class ValidView extends DescriptionView {
    * Called when the model is changed.  The model may have been
    * changed by another view or by a state update from the back-end.
    */
-  update(): void {
+  update() {
     this.el.classList.remove('mod-valid');
     this.el.classList.remove('mod-invalid');
+    this.icon.classList.remove('fa-check');
+    this.icon.classList.remove('fa-times');
     this.readout.textContent = this.model.get('readout');
     if (this.model.get('value')) {
       this.el.classList.add('mod-valid');
+      this.icon.classList.add('fa-check');
     } else {
       this.el.classList.add('mod-invalid');
+      this.icon.classList.add('fa-times');
     }
   }
   readout: HTMLSpanElement;
+  icon: HTMLElement;
 }