fix(ui-utils,getFontSize): Improve performance

fixes: INSTUI-1012

Updates getFontSize to add caching of the fontSize and
use browser-computed style instead of generating an
element and getting the line-height.

Test plan:
- Run `yarn test:watch --scope @instructure/ui-utils`

- Play with the em and rem tests for px to see if you can break them.
  I left the getFontSize() calls in the px tests so we can compare
  the new method of calculating fontSize to the one we've been using.

Change-Id: I47e5fad2360e4a0d5aa211a9642fbca186c8ebec
Reviewed-on: https://gerrit.instructure.com/147342
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
Tested-by: Jenkins
QA-Review: Dan Sasaki <dsasaki@instructure.com>

Author: Chris Hart

packages/ui-overlays/src/components/Popover/index.js

@@ -297,7 +297,9 @@ class Popover extends Component {
     super(props)
 
     this.state = {
-      placement: props.placement
+      placement: props.placement,
+      offsetX: props.offsetX,
+      offsetY: props.offsetY
     }
 
     if (props.show === undefined) {
@@ -370,7 +372,8 @@ class Popover extends Component {
   handlePositionChanged = ({ placement }) => {
     this.setState({
       closeButtonPlacement: this.getCloseButtonPlacement(this.props),
-      placement
+      placement,
+      ...this.computeOffsets(placement)
     })
   }
 
@@ -494,11 +497,11 @@ class Popover extends Component {
     }
   }
 
-  get positionProps () {
-    let offsetX = this.props.offsetX
-    let offsetY = this.props.offsetY
+  computeOffsets (placement) {
+    let { offsetX, offsetY } = this.props
+
     if (this.props.alignArrow && this._contextBox) {
-      const secondaryPlacement = parsePlacement(this.state.placement)[1]
+      const secondaryPlacement = parsePlacement(placement)[1]
       const { arrowSize, borderWidth } = this._contextBox.theme
       const offsetAmount = (px(arrowSize) + px(borderWidth)) * 2
       if (secondaryPlacement === 'start') {
@@ -513,9 +516,16 @@ class Popover extends Component {
     }
 
     return {
-      ...pickProps(this.props, Position.propTypes),
       offsetX,
-      offsetY,
+      offsetY
+    }
+  }
+
+  get positionProps () {
+    return {
+      ...pickProps(this.props, Position.propTypes),
+      offsetX: this.state.offsetX,
+      offsetY: this.state.offsetY,
       trackPosition: this.shown,
       placement: this.placement,
       onPositioned: createChainedFunction(this.handlePositionChanged, this.props.onShow),

packages/ui-utils/src/dom/getFontSize.js

@@ -21,6 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import canUseDOM from './canUseDOM'
+import ownerDocument from './ownerDocument'
+import getComputedStyle from './getComputedStyle'
+
+const COMPUTED_CACHE = {}
 
 /**
  * ---
@@ -32,30 +37,22 @@
  * @param {ReactComponent|DomNode} el - component or DOM node
  * @returns {Object} font size in px
  */
-export default function getFontSize (el) {
-  const m = document.createElement('div')
+export default function getFontSize (el, ignoreCache) {
+  if (!canUseDOM) {
+    return 16
+  }
 
-  let container = el || document.body
-  let fontSize = 16
+  const container = el || ownerDocument(el).documentElement
 
-  if (!container) {
-    container = document.createElement('body')
-    container.style.cssText = 'font-size:1em !important'
-    document.documentElement.insertBefore(container, document.body)
+  // return the cached font size if it's there
+  if (!ignoreCache && COMPUTED_CACHE[container]) {
+    return COMPUTED_CACHE[container]
   }
 
-  m.style.cssText = [
-    'display: inline-block !important;',
-    'padding: 0 !important;',
-    'line-height: 1 !important;',
-    'position: absolute !important;',
-    'visibility: hidden !important;',
-    'font-size: 1em !important;'
-  ].join('')
-  m.appendChild(document.createTextNode('M'))
-  container.appendChild(m)
-  fontSize = m.offsetHeight
-  container.removeChild(m)
+  const fontSize = parseInt(getComputedStyle(container).getPropertyValue('font-size'))
+
+  // cache the computed font size so that we don't have to compute it again
+  COMPUTED_CACHE[container] = fontSize
 
   return fontSize
 }