* Summary: fix slowness due to layout thrashing when reloading a large set of status updates
in order to limit the maximum size of a status in a list view (e.g. the home timeline), so as to avoid having to scroll all the way through an abnormally large status update (see https://github.com/tootsuite/mastodon/pull/8205), the following steps are taken:
•the element containing the status is rendered in the browser
•its height is calculated, to determine if it exceeds the maximum height threshold.
Unfortunately for performance, these steps are carried out in the componentDidMount(/Update) method, which also performs style modifications on the element. The combination of height request and style modification during javascript evaluation in the browser leads to layout-thrashing, where the elements are repeatedly re-laid-out (see https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing & https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Performance_best_practices_for_Firefox_fe_engineers).
The solution implemented here is to memoize the collapsed state in Redux the first time the status is seen (e.g. when fetched as part of a small batch, to populate the home timeline) , so that on subsequent re-renders, the value can be queried, rather than recalculated. This strategy is derived from https://github.com/tootsuite/mastodon/pull/4439 & https://github.com/tootsuite/mastodon/pull/4909, and should resolve https://github.com/tootsuite/mastodon/issues/12455.
Andrew Lin (https://github.com/onethreeseven) is thanked for his assistance in root cause analysis and solution brainstorming
* remove getSnapshotBeforeUpdate from status
* remove componentWillUnmount from status
* persist last-intersected status update and restore when ScrollableList is restored
e.g. when navigating from home-timeline to a status conversational thread and <Back again
* cache currently-viewing status id to avoid calling redux with identical value
* refactor collapse toggle to pass explicit boolean
* Fix “read more” button behing hidden (regression from #11404)
This has the side-effect of putting the “Read more” button below possibly
trunctated polls instead of putting the poll below the “Read more”
* Remove dead code
* [WiP] Show host for “misleading” links
* Disallow misleading targets which domain names are prefixes of link text
* Move decodeIDNA to app/javascript/mastodon/utils
* Add support for international domain names
* Change link origin tag color to darker text color
* Handle links to domains starting with www. as shortened by Mastodon
* [WiP] Ignore links that cannot be misread as URLs, rewrite other links
* Play animated custom emoji on hover in status
* Play animated custom emoji on hover in display names
* Play animated custom emoji on hover in bios/bio fields
* Add support for animation on hover on public pages emojis too
* Fix tests
* Code style cleanup
* Put poll options behind CWs in WebUI
* Put polls behind CWs on public pages
* Add poll icon to public pages CWs
* Revert to not showing an icon in the CW button
* Refactor uses of icons to an Icon component in web UI
* Refactor options passed to the Icon component
* Make tests work with absolute component paths
This includes clicks on hashtags, mentions, display names and media in the
timeline; and usernames in reply-indicator, detailed status, and the boost
modal.
aria-label contained body of status with content warning, which should be
hidden by default. Remove the label for the case and other cases due to
consistency.
* fix(status_action_bar): Use aria-pressed for reblog and favourite button
* fix(column_back_button): Keyboard accessible
* fix(status_content): Make focusable and accessible
* fix(dropdown_menu): Use aria-expanded instead of aria-pressed
* fix(emoji_picker_dropdown): Use aria-expanded instead of aria-hidden
* feat(icon_button): Add aria-expanded
* fix(privacy_dropdown): Use aria-expanded instead of aria-hidden
* Redesign the landing page, mount public timeline on it
* Adjust the standalone mounted component to the lacking of router
* Adjust auth layout pages to new design
* Fix tests
* Standalone public timeline polling every 5 seconds
* Remove now obsolete translations
* Add responsive design for new landing page
* Address reviews
* Add floating clouds behind frontpage form
* Use access token from public page when available
* Fix mentions and hashtags links, cursor on status content in standalone mode
* Add footer link to source code
* Fix errors on pages that don't embed the component, use classnames
* Fix tests
* Change anonymous autoPlayGif default to false
* When gif autoplay is disabled, hover to play
* Add option to hide the timeline preview
* Slightly improve alt layout
* Add elephant friend to new frontpage
* Display "back to mastodon" in place of "login" when logged in on frontpage
* Change polling time to 3s
* Update links in status content on update as well as mount
Fixes occasional bugs with mentions and hashtags not being set to open in a new column like they should, and instead opening in a new page
* use classList instead of raw className
- Use plaintext
- Strip out URLs
- Strip out mentions
- Strip out hashtags
- Strip out whitespace from "overall" count
- Consistent between JS and Ruby
Use ES Class Fields & Static Properties (currently stage 2) for improve class outlook.
Added babel-plugin-transform-class-properties as a Babel plugin.
* Fix regressions from #2683
Properly format spoiler text HTML, while keeping old logic for blankness intact
Process hashtags and mentions in spoiler text
Format spoiler text for Atom
Change "show more" toggle into a button instead of anchor
Fix style regression on dropdowns for detailed statuses
* Fix lint issue
* Convert spoiler text to plaintext in desktop notifications
* Replace browserify with webpack
* Add react-intl-translations-manager
* Do not minify in development, add offline-plugin for ServiceWorker background cache updates
* Adjust tests and dependencies
* Fix production deployments
* Fix tests
* More optimizations
* Improve travis cache for npm stuff
* Re-run travis
* Add back support for custom.scss as before
* Remove offline-plugin and babili
* Fix issue with Immutable.List().unshift(...values) not working as expected
* Make travis load schema instead of running all migrations in sequence
* Fix missing React import in WarningContainer. Optimize rendering performance by using ImmutablePureComponent instead of
React.PureComponent. ImmutablePureComponent uses Immutable.is() to compare props. Replace dynamic callback bindings in
<UI />
* Add react definitions to places that use JSX
* Add Procfile.dev for running rails, webpack and streaming API at the same time
* fix(classnames): Status icon style classnames
Take out inline css and put into classnames for the following components: account, avatar, icon button, status action bar, notification.
* fix(status): Move styles from inline to classes for statuses
Move styles to classnames in components.scss for the following components:
display name
media gallery
status
status content
video player
* fix(classnames): Add classnames to rest of components
Take out inline styles and apply them to classnames in the sass for the following components:
button
column back button
slim column back button
collapsable column
dropdown menu
loading indicator
status list
* fix(classnames): Remove all non-dynamic inline styles
Components affected:
autosuggested
permalink
action bar
header
character counter
compose form
emoji dropdown
privacy dropdown
reply indicator
upload form
account auth
followers
getting started
column settings
mutes
settings
reblogs
status checkbox
report
action bar
status
card
boost modal
media modal
video modal
* fix(permalink): Do not lose classname
* fix(tests): Add space back in display name
* fix(status__wrapper): Remove duplicate css name
Remove incorrect style attribute. Remove style attribute all together. Cursor defaults to "auto" when not specified as 'default'.
* fix(nl): do not lose translations
* Add eslint-plugin-jsx-a11y.
* Fix npm script.
* Adjust npm scripts so test also runs lint.
* Fix existing lint errors.
* Don't break on a11y issues.
* Add role and tabIndex.
* Add vim and Mac files to .gitignore and .dockerignore.
* Handle htmlFor (partially), a that's actually a button.
* Fix missing tabIndex.
* Add cursor:pointer to load-more
* Revert change to load_more.
* Fixes based on review.
* Update yarn.lock.
* Don't try to install fsevents on Linux (hides warning noise).
Matt Panaro