improve perf of compose box

This commit is contained in:
Nolan Lawson 2018-02-25 20:45:11 -08:00
parent 6c71910660
commit 2ffd38383d
6 changed files with 201 additions and 17 deletions

5
package-lock.json generated
View file

@ -357,11 +357,6 @@
"postcss-value-parser": "3.3.0" "postcss-value-parser": "3.3.0"
} }
}, },
"autosize": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.0.tgz",
"integrity": "sha1-egWZsbqE1zvXWJsNnaOHAVLGkjc="
},
"aws-sign2": { "aws-sign2": {
"version": "0.6.0", "version": "0.6.0",
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",

View file

@ -25,7 +25,6 @@
"dependencies": { "dependencies": {
"@gamestdio/websocket": "^0.2.2", "@gamestdio/websocket": "^0.2.2",
"a11y-dialog": "^4.0.1", "a11y-dialog": "^4.0.1",
"autosize": "^4.0.0",
"cheerio": "^1.0.0-rc.2", "cheerio": "^1.0.0-rc.2",
"child-process-promise": "^2.2.1", "child-process-promise": "^2.2.1",
"chokidar": "^2.0.0", "chokidar": "^2.0.0",
@ -95,7 +94,8 @@
"__shell__", "__shell__",
"__assets__", "__assets__",
"test", "test",
"fixture" "fixture",
"Element"
], ],
"ignore": [ "ignore": [
"dist", "dist",

View file

@ -1,4 +1,4 @@
<div class="lite-compose-box"> <div class="lite-compose-box {{overLimit ? 'over-char-limit' : ''}}">
<div class="compose-profile-current-user"> <div class="compose-profile-current-user">
<Avatar account="{{verifyCredentials}}" className="compose-profile-avatar" size="small"/> <Avatar account="{{verifyCredentials}}" className="compose-profile-avatar" size="small"/>
<a class="compose-profile-display-name" href="/accounts/{{verifyCredentials.id}}"> <a class="compose-profile-display-name" href="/accounts/{{verifyCredentials.id}}">
@ -13,13 +13,13 @@
ref:textarea ref:textarea
bind:value=inputText bind:value=inputText
></textarea> ></textarea>
<div class="compose-profile-length-gauge {{overLimit ? 'over-char-limit' : ''}}" <div class="compose-profile-length-gauge"
style="transform: scaleX({{inputLengthAsFractionOfMax}});" style="transform: scaleX({{inputLengthAsFractionOfMaxAfterRaf || 0}});"
aria-hidden="true" aria-hidden="true"
></div> ></div>
<span class="compose-profile-length {{overLimit ? 'over-char-limit' : ''}}" <span class="compose-profile-length"
aria-label="{{inputLengthLabel}}"> aria-label="{{inputLengthLabel}}">
{{inputLengthToDisplay}} {{inputLengthToDisplayAfterRaf || '0'}}
</span> </span>
<button class="primary compose-profile-button"> <button class="primary compose-profile-button">
Toot! Toot!
@ -88,6 +88,7 @@
margin-top: 10px; margin-top: 10px;
resize: none; resize: none;
overflow: hidden; overflow: hidden;
width: calc(100% - 5px);
} }
.compose-profile-button { .compose-profile-button {
@ -113,11 +114,11 @@
font-size: 1.1em; font-size: 1.1em;
} }
.compose-profile-length.over-char-limit { .over-char-limit .compose-profile-length {
color: var(--warning-color); color: var(--warning-color);
} }
.compose-profile-length-gauge.over-char-limit { .over-char-limit .compose-profile-length-gauge {
background: var(--warning-color); background: var(--warning-color);
} }
@ -137,7 +138,7 @@
<script> <script>
import Avatar from '../Avatar.html' import Avatar from '../Avatar.html'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import autosize from 'autosize' import { autosize } from '../../_utils/autosize'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask' import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import { mark, stop } from '../../_utils/marks' import { mark, stop } from '../../_utils/marks'
@ -160,6 +161,22 @@
this.store.set({inputTextInCompose: inputTextInCompose}) this.store.set({inputTextInCompose: inputTextInCompose})
saveText() saveText()
}, {init: false}) }, {init: false})
// Avoid input delays by updating these values after a rAF
this.observe('inputLengthToDisplay', inputLengthToDisplay => {
requestAnimationFrame(() => {
mark('set inputLengthToDisplayAfterRaf')
this.set({inputLengthToDisplayAfterRaf: inputLengthToDisplay})
stop('set inputLengthToDisplayAfterRaf')
})
})
this.observe('inputLengthAsFractionOfMax', inputLengthAsFractionOfMax => {
requestAnimationFrame(() => {
mark('set inputLengthAsFractionOfMaxAfterRaf')
this.set({inputLengthAsFractionOfMaxAfterRaf: inputLengthAsFractionOfMax})
stop('set inputLengthAsFractionOfMaxAfterRaf')
})
})
}, },
ondestroy() { ondestroy() {
mark('autosize.destroy()') mark('autosize.destroy()')
@ -177,7 +194,7 @@
currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose, currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose,
inputLength: (inputText) => inputText ? inputText.length : 0, inputLength: (inputText) => inputText ? inputText.length : 0,
inputLengthToDisplay: (inputLength) => (inputLength <= CHAR_LIMIT ? inputLength : CHAR_LIMIT - inputLength), inputLengthToDisplay: (inputLength) => (inputLength <= CHAR_LIMIT ? inputLength : CHAR_LIMIT - inputLength),
inputLengthAsFractionOfMax: (inputLength) => (Math.min(CHAR_LIMIT, inputLength)) / CHAR_LIMIT, inputLengthAsFractionOfMax: (inputLength) => Math.round(100 * (Math.min(CHAR_LIMIT, inputLength)) / CHAR_LIMIT) / 100,
overLimit: (inputLength) => inputLength > CHAR_LIMIT, overLimit: (inputLength) => inputLength > CHAR_LIMIT,
inputLengthLabel: (overLimit, inputLengthToDisplay) => { inputLengthLabel: (overLimit, inputLengthToDisplay) => {
if (overLimit) { if (overLimit) {

166
routes/_utils/autosize.js Normal file
View file

@ -0,0 +1,166 @@
// Modified from https://github.com/jackmoore/autosize/commit/113f1b345868901619d4b01cda02b09aa1690ebd
// The only change is to remove IE-specific hacks,
// remove parent overflow checks, make page resizes more performant,
// add deferredUpdate, and add perf marks.
import { mark, stop } from './marks'
import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle'
const map = new Map()
let createEvent = (name) => new Event(name, {bubbles: true})
function assign (ta) {
if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || map.has(ta)) return
let heightOffset = null
let cachedHeight = null
function init () {
const style = window.getComputedStyle(ta, null)
if (style.resize === 'vertical') {
ta.style.resize = 'none'
} else if (style.resize === 'both') {
ta.style.resize = 'horizontal'
}
if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom))
} else {
heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)
}
// Fix when a textarea is not on document body and heightOffset is Not a Number
if (isNaN(heightOffset)) {
heightOffset = 0
}
update()
}
function resize () {
mark('autosize:resize()')
let res = _resize()
stop('autosize:resize()')
return res
}
function _resize () {
const originalHeight = ta.style.height
ta.style.height = ''
let endHeight = ta.scrollHeight + heightOffset
if (ta.scrollHeight === 0) {
// If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
ta.style.height = originalHeight
return
}
ta.style.height = endHeight + 'px'
return endHeight
}
const deferredUpdate = throttle(() => requestAnimationFrame(update), 100)
function update () {
mark('autosize:update()')
_update()
stop('autosize:update()')
}
function _update () {
let newHeight = resize()
if (cachedHeight !== newHeight) {
cachedHeight = newHeight
const evt = createEvent('autosize:resized')
try {
ta.dispatchEvent(evt)
} catch (err) {
// Firefox will throw an error on dispatchEvent for a detached element
// https://bugzilla.mozilla.org/show_bug.cgi?id=889376
}
}
}
const pageResize = debounce(update, 1000)
const destroy = (style => {
window.removeEventListener('resize', pageResize, false)
ta.removeEventListener('input', deferredUpdate, false)
ta.removeEventListener('autosize:destroy', destroy, false)
ta.removeEventListener('autosize:update', update, false)
Object.keys(style).forEach(key => {
ta.style[key] = style[key]
})
map.delete(ta)
}).bind(ta, {
height: ta.style.height,
resize: ta.style.resize,
overflowY: ta.style.overflowY,
overflowX: ta.style.overflowX,
wordWrap: ta.style.wordWrap
})
ta.addEventListener('autosize:destroy', destroy, false)
window.addEventListener('resize', pageResize, false)
ta.addEventListener('input', deferredUpdate, false)
ta.addEventListener('autosize:update', update, false)
ta.style.overflowX = 'hidden'
ta.style.wordWrap = 'break-word'
map.set(ta, {
destroy,
update
})
init()
}
function destroy (ta) {
const methods = map.get(ta)
if (methods) {
methods.destroy()
}
}
function update (ta) {
const methods = map.get(ta)
if (methods) {
methods.update()
}
}
let autosize = null
// Do nothing in Node.js environment and IE8 (or lower)
if (!process.browser) {
autosize = el => el
autosize.destroy = el => el
autosize.update = el => el
} else {
autosize = (el, options) => {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], x => assign(x, options))
}
return el
}
autosize.destroy = el => {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], destroy)
}
return el
}
autosize.update = el => {
if (el) {
Array.prototype.forEach.call(el.length ? el : [el], update)
}
return el
}
}
export { autosize }

View file

@ -135,3 +135,9 @@ button::-moz-focus-inner {
input:required, input:invalid { input:required, input:invalid {
box-shadow: none; box-shadow: none;
} }
textarea {
font-family: inherit;
font-size: inherit;
box-sizing: border-box;
}

View file

@ -11,7 +11,7 @@
<style> <style>
/* auto-generated w/ build-sass.js */ /* auto-generated w/ build-sass.js */
body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#c5d1f6;--very-deemphasized-link-color:rgba(65,105,225,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#d2dcf8;--main-theme-color:#4169e1;--warning-color:#e01f19} body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#c5d1f6;--very-deemphasized-link-color:rgba(65,105,225,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#d2dcf8;--main-theme-color:#4169e1;--warning-color:#e01f19}
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.4;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px;box-sizing:border-box}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}input:required,input:invalid{box-shadow:none} body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.4;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px;box-sizing:border-box}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}input:required,input:invalid{box-shadow:none}textarea{font-family:inherit;font-size:inherit;box-sizing:border-box}
body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf;--very-deemphasized-link-color:rgba(153,153,153,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#ededed;--main-theme-color:#999;--warning-color:#e01f19} body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf;--very-deemphasized-link-color:rgba(153,153,153,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#ededed;--main-theme-color:#999;--warning-color:#e01f19}
</style> </style>