Merge remote-tracking branch 'origin/master' into gs-master

Conflicts:
 	app/serializers/initial_state_serializer.rb

The glitch flavour isn't yet pulling custom emoji data on its own (see
https://github.com/tootsuite/mastodon/pull/7047).  Once that gets into
the glitch flavour, we can eliminate the custom_emojis load.

app/javascript/mastodon/actions/accounts.js

@@ -1,5 +1,5 @@
 import api, { getLinks } from '../api';
-import asyncDB from '../storage/db';
+import openDB from '../storage/db';
 import { importAccount, importFetchedAccount, importFetchedAccounts } from './importer';
 
 export const ACCOUNT_FETCH_REQUEST = 'ACCOUNT_FETCH_REQUEST';
@@ -94,12 +94,15 @@ export function fetchAccount(id) {
 
     dispatch(fetchAccountRequest(id));
 
-    asyncDB.then(db => getFromDB(
+    openDB().then(db => getFromDB(
       dispatch,
       getState,
       db.transaction('accounts', 'read').objectStore('accounts').index('id'),
       id
-    )).catch(() => api(getState).get(`/api/v1/accounts/${id}`).then(response => {
+    ).then(() => db.close(), error => {
+      db.close();
+      throw error;
+    })).catch(() => api(getState).get(`/api/v1/accounts/${id}`).then(response => {
       dispatch(importFetchedAccount(response.data));
     })).then(() => {
       dispatch(fetchAccountSuccess());

app/javascript/mastodon/actions/custom_emojis.js

@@ -0,0 +1,37 @@
+import api from '../api';
+
+export const CUSTOM_EMOJIS_FETCH_REQUEST = 'CUSTOM_EMOJIS_FETCH_REQUEST';
+export const CUSTOM_EMOJIS_FETCH_SUCCESS = 'CUSTOM_EMOJIS_FETCH_SUCCESS';
+export const CUSTOM_EMOJIS_FETCH_FAIL = 'CUSTOM_EMOJIS_FETCH_FAIL';
+
+export function fetchCustomEmojis() {
+  return (dispatch, getState) => {
+    dispatch(fetchCustomEmojisRequest());
+
+    api(getState).get('/api/v1/custom_emojis').then(response => {
+      dispatch(fetchCustomEmojisSuccess(response.data));
+    }).catch(error => {
+      dispatch(fetchCustomEmojisFail(error));
+    });
+  };
+};
+
+export function fetchCustomEmojisRequest() {
+  return {
+    type: CUSTOM_EMOJIS_FETCH_REQUEST,
+  };
+};
+
+export function fetchCustomEmojisSuccess(custom_emojis) {
+  return {
+    type: CUSTOM_EMOJIS_FETCH_SUCCESS,
+    custom_emojis,
+  };
+};
+
+export function fetchCustomEmojisFail(error) {
+  return {
+    type: CUSTOM_EMOJIS_FETCH_FAIL,
+    error,
+  };
+};

app/javascript/mastodon/actions/importer/index.js

@@ -1,3 +1,4 @@
+import { autoPlayGif } from '../../initial_state';
 import { putAccounts, putStatuses } from '../../storage/modifier';
 import { normalizeAccount, normalizeStatus } from './normalizer';
 
@@ -44,7 +45,7 @@ export function importFetchedAccounts(accounts) {
   }
 
   accounts.forEach(processAccount);
-  putAccounts(normalAccounts);
+  putAccounts(normalAccounts, !autoPlayGif);
 
   return importAccounts(normalAccounts);
 }

app/javascript/mastodon/actions/statuses.js

@@ -1,5 +1,5 @@
 import api from '../api';
-import asyncDB from '../storage/db';
+import openDB from '../storage/db';
 import { evictStatus } from '../storage/modifier';
 
 import { deleteFromTimelines } from './timelines';
@@ -92,12 +92,17 @@ export function fetchStatus(id) {
 
     dispatch(fetchStatusRequest(id, skipLoading));
 
-    asyncDB.then(db => {
+    openDB().then(db => {
       const transaction = db.transaction(['accounts', 'statuses'], 'read');
       const accountIndex = transaction.objectStore('accounts').index('id');
       const index = transaction.objectStore('statuses').index('id');
 
-      return getFromDB(dispatch, getState, accountIndex, index, id);
+      return getFromDB(dispatch, getState, accountIndex, index, id).then(() => {
+        db.close();
+      }, error => {
+        db.close();
+        throw error;
+      });
     }).then(() => {
       dispatch(fetchStatusSuccess(skipLoading));
     }, () => api(getState).get(`/api/v1/statuses/${id}`).then(response => {

app/javascript/mastodon/containers/mastodon.js

@@ -6,6 +6,7 @@ import { showOnboardingOnce } from '../actions/onboarding';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { ScrollContext } from 'react-router-scroll-4';
 import UI from '../features/ui';
+import { fetchCustomEmojis } from '../actions/custom_emojis';
 import { hydrateStore } from '../actions/store';
 import { connectUserStream } from '../actions/streaming';
 import { IntlProvider, addLocaleData } from 'react-intl';
@@ -19,6 +20,9 @@ export const store = configureStore();
 const hydrateAction = hydrateStore(initialState);
 store.dispatch(hydrateAction);
 
+// load custom emojis
+store.dispatch(fetchCustomEmojis());
+
 export default class Mastodon extends React.PureComponent {
 
   static propTypes = {

app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js

@@ -38,7 +38,8 @@ const getFrequentlyUsedEmojis = createSelector([
     .toArray();
 
   if (emojis.length < DEFAULTS.length) {
-    emojis = emojis.concat(DEFAULTS.slice(0, DEFAULTS.length - emojis.length));
+    let uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
+    emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
   }
 
   return emojis;

app/javascript/mastodon/features/compose/index.js

@@ -24,9 +24,9 @@ const messages = defineMessages({
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
 });
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state, ownProps) => ({
   columns: state.getIn(['settings', 'columns']),
-  showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
+  showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage,
 });
 
 @connect(mapStateToProps)
@@ -38,6 +38,7 @@ export default class Compose extends React.PureComponent {
     columns: ImmutablePropTypes.list.isRequired,
     multiColumn: PropTypes.bool,
     showSearch: PropTypes.bool,
+    isSearchPage: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   };
 
@@ -58,7 +59,7 @@ export default class Compose extends React.PureComponent {
   }
 
   render () {
-    const { multiColumn, showSearch, intl } = this.props;
+    const { multiColumn, showSearch, isSearchPage, intl } = this.props;
 
     let header = '';
 
@@ -89,7 +90,7 @@ export default class Compose extends React.PureComponent {
       <div className='drawer'>
         {header}
 
-        <SearchContainer />
+        {(multiColumn || isSearchPage) && <SearchContainer /> }
 
         <div className='drawer__pager'>
           <div className='drawer__inner' onFocus={this.onFocus}>
@@ -102,7 +103,7 @@ export default class Compose extends React.PureComponent {
             )}
           </div>
 
-          <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
+          <Motion defaultStyle={{ x: isSearchPage ? 0 : -100 }} style={{ x: spring(showSearch || isSearchPage ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
             {({ x }) => (
               <div className='drawer__inner darker' style={{ transform: `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
                 <SearchResultsContainer />

app/javascript/mastodon/features/ui/components/tabs_bar.js

@@ -8,6 +8,7 @@ import { isUserTouching } from '../../../is_mobile';
 export const links = [
   <NavLink className='tabs-bar__link primary' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>,
   <NavLink className='tabs-bar__link primary' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><i className='fa fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>,
+  <NavLink className='tabs-bar__link primary' to='/search' data-preview-title-id='tabs_bar.search' data-preview-icon='bell' ><i className='fa fa-fw fa-search' /><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></NavLink>,
 
   <NavLink className='tabs-bar__link secondary' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><i className='fa fa-fw fa-users' /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>,
   <NavLink className='tabs-bar__link secondary' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><i className='fa fa-fw fa-globe' /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>,

app/javascript/mastodon/features/ui/index.js

@@ -146,6 +146,8 @@ class SwitchingColumnsArea extends React.PureComponent {
           <WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} />
           <WrappedRoute path='/pinned' component={PinnedStatuses} content={children} />
 
+          <WrappedRoute path='/search' component={Compose} content={children} componentParams={{ isSearchPage: true }} />
+
           <WrappedRoute path='/statuses/new' component={Compose} content={children} />
           <WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} />
           <WrappedRoute path='/statuses/:statusId/reblogs' component={Reblogs} content={children} />

app/javascript/mastodon/locales/defaultMessages.json

@@ -1730,6 +1730,10 @@
         "defaultMessage": "Notifications",
         "id": "tabs_bar.notifications"
       },
+      {
+        "defaultMessage": "Search",
+        "id": "tabs_bar.search"
+      },
       {
         "defaultMessage": "Local",
         "id": "tabs_bar.local_timeline"

app/javascript/mastodon/locales/en.json

@@ -276,6 +276,7 @@
   "tabs_bar.home": "Home",
   "tabs_bar.local_timeline": "Local",
   "tabs_bar.notifications": "Notifications",
+  "tabs_bar.search": "Search",
   "ui.beforeunload": "Your draft will be lost if you leave Mastodon.",
   "upload_area.title": "Drag & drop to upload",
   "upload_button.label": "Add media",

app/javascript/mastodon/locales/pt-BR.json

@@ -189,7 +189,7 @@
   "onboarding.page_one.federation": "Mastodon é uma rede de servidores independentes que se juntam para fazer uma grande rede social. Nós chamamos estes servidores de instâncias.",
   "onboarding.page_one.full_handle": "Seu nome de usuário completo",
   "onboarding.page_one.handle_hint": "Isso é o que você diz aos seus amigos para que eles possam te mandar mensagens ou te seguir a partir de outra instância.",
-  "onboarding.page_one.welcome": "Seja bem-vindo(a) ao Mastodon!",
+  "onboarding.page_one.welcome": "Boas-vindas ao Mastodon!",
   "onboarding.page_six.admin": "O administrador de sua instância é {admin}.",
   "onboarding.page_six.almost_done": "Quase acabando...",
   "onboarding.page_six.appetoot": "Bom Apetoot!",

app/javascript/mastodon/locales/pt.json

@@ -189,7 +189,7 @@
   "onboarding.page_one.federation": "Mastodon é uma rede de servidores independentes ligados entre si para fazer uma grande rede social. Nós chamamos instâncias a estes servidores.",
   "onboarding.page_one.full_handle": "O teu nome de utilizador completo",
   "onboarding.page_one.handle_hint": "Isto é o que dizes aos teus amigos para pesquisar.",
-  "onboarding.page_one.welcome": "Bem-vindo(a) ao Mastodon!",
+  "onboarding.page_one.welcome": "Boas-vindas ao Mastodon!",
   "onboarding.page_six.admin": "O administrador da tua instância é {admin}.",
   "onboarding.page_six.almost_done": "Quase pronto...",
   "onboarding.page_six.appetoot": "Bon Appetoot!",

app/javascript/mastodon/reducers/custom_emojis.js

@@ -1,16 +1,15 @@
-import { List as ImmutableList } from 'immutable';
-import { STORE_HYDRATE } from '../actions/store';
+import { List as ImmutableList, fromJS as ConvertToImmutable } from 'immutable';
+import { CUSTOM_EMOJIS_FETCH_SUCCESS } from '../actions/custom_emojis';
 import { search as emojiSearch } from '../features/emoji/emoji_mart_search_light';
 import { buildCustomEmojis } from '../features/emoji/emoji';
 
-const initialState = ImmutableList();
+const initialState = ImmutableList([]);
 
 export default function custom_emojis(state = initialState, action) {
-  switch(action.type) {
-  case STORE_HYDRATE:
-    emojiSearch('', { custom: buildCustomEmojis(action.state.get('custom_emojis', [])) });
-    return action.state.get('custom_emojis');
-  default:
-    return state;
+  if(action.type === CUSTOM_EMOJIS_FETCH_SUCCESS) {
+    state = ConvertToImmutable(action.custom_emojis);
+    emojiSearch('', { custom: buildCustomEmojis(state) });
   }
+
+  return state;
 };

app/javascript/mastodon/service_worker/entry.js

@@ -1,3 +1,4 @@
+import { freeStorage } from '../storage/modifier';
 import './web_push_notifications';
 
 function openSystemCache() {
@@ -42,8 +43,10 @@ self.addEventListener('fetch', function(event) {
 
     event.respondWith(asyncResponse.then(async response => {
       if (response.ok || response.type === 'opaqueredirect') {
-        const cache = await asyncCache;
-        await cache.delete('/');
+        await Promise.all([
+          asyncCache.then(cache => cache.delete('/')),
+          indexedDB.deleteDatabase('mastodon'),
+        ]);
       }
 
       return response;
@@ -56,7 +59,11 @@ self.addEventListener('fetch', function(event) {
         const fetched = await fetch(event.request);
 
         if (fetched.ok) {
-          await cache.put(event.request.url, fetched.clone());
+          try {
+            await cache.put(event.request.url, fetched.clone());
+          } finally {
+            freeStorage();
+          }
         }
 
         return fetched;

app/javascript/mastodon/storage/db.js

@@ -1,15 +1,14 @@
-import { me } from '../initial_state';
-
-export default new Promise((resolve, reject) => {
+export default () => new Promise((resolve, reject) => {
+  // ServiceWorker is required to synchronize the login state.
   // Microsoft Edge 17 does not support getAll according to:
   // Catalog of standard and vendor APIs across browsers - Microsoft Edge Development
   // https://developer.microsoft.com/en-us/microsoft-edge/platform/catalog/?q=specName%3Aindexeddb
-  if (!me || !('getAll' in IDBObjectStore.prototype)) {
+  if (!('caches' in self && 'getAll' in IDBObjectStore.prototype)) {
     reject();
     return;
   }
 
-  const request = indexedDB.open('mastodon:' + me);
+  const request = indexedDB.open('mastodon');
 
   request.onerror = reject;
   request.onsuccess = ({ target }) => resolve(target.result);

app/javascript/mastodon/storage/modifier.js

@@ -1,13 +1,14 @@
-import asyncDB from './db';
-import { autoPlayGif } from '../initial_state';
+import openDB from './db';
 
 const accountAssetKeys = ['avatar', 'avatar_static', 'header', 'header_static'];
-const avatarKey = autoPlayGif ? 'avatar' : 'avatar_static';
-const limit = 1024;
+const storageMargin = 8388608;
+const storeLimit = 1024;
 
-// ServiceWorker and Cache API is not available on iOS 11
-// https://webkit.org/status/#specification-service-workers
-const asyncCache = window.caches ? caches.open('mastodon-system') : Promise.reject();
+function openCache() {
+  // ServiceWorker and Cache API is not available on iOS 11
+  // https://webkit.org/status/#specification-service-workers
+  return self.caches ? caches.open('mastodon-system') : Promise.reject();
+}
 
 function printErrorIfAvailable(error) {
   if (error) {
@@ -16,7 +17,7 @@ function printErrorIfAvailable(error) {
 }
 
 function put(name, objects, onupdate, oncreate) {
-  return asyncDB.then(db => new Promise((resolve, reject) => {
+  return openDB().then(db => (new Promise((resolve, reject) => {
     const putTransaction = db.transaction(name, 'readwrite');
     const putStore = putTransaction.objectStore(name);
     const putIndex = putStore.index('id');
@@ -53,7 +54,7 @@ function put(name, objects, onupdate, oncreate) {
       const count = readStore.count();
 
       count.onsuccess = () => {
-        const excess = count.result - limit;
+        const excess = count.result - storeLimit;
 
         if (excess > 0) {
           const retrieval = readStore.getAll(null, excess);
@@ -69,11 +70,17 @@ function put(name, objects, onupdate, oncreate) {
     };
 
     putTransaction.onerror = reject;
+  })).then(resolved => {
+    db.close();
+    return resolved;
+  }, error => {
+    db.close();
+    throw error;
   }));
 }
 
 function evictAccountsByRecords(records) {
-  asyncDB.then(db => {
+  return openDB().then(db => {
     const transaction = db.transaction(['accounts', 'statuses'], 'readwrite');
     const accounts = transaction.objectStore('accounts');
     const accountsIdIndex = accounts.index('id');
@@ -83,7 +90,7 @@ function evictAccountsByRecords(records) {
 
     function evict(toEvict) {
       toEvict.forEach(record => {
-        asyncCache
+        openCache()
           .then(cache => accountAssetKeys.forEach(key => cache.delete(records[key])))
           .catch(printErrorIfAvailable);
 
@@ -98,6 +105,8 @@ function evictAccountsByRecords(records) {
     }
 
     evict(records);
+
+    db.close();
   }).catch(printErrorIfAvailable);
 }
 
@@ -106,8 +115,9 @@ export function evictStatus(id) {
 }
 
 export function evictStatuses(ids) {
-  asyncDB.then(db => {
-    const store = db.transaction('statuses', 'readwrite').objectStore('statuses');
+  return openDB().then(db => {
+    const transaction = db.transaction('statuses', 'readwrite');
+    const store = transaction.objectStore('statuses');
     const idIndex = store.index('id');
     const reblogIndex = store.index('reblog');
 
@@ -118,14 +128,17 @@ export function evictStatuses(ids) {
       idIndex.getKey(id).onsuccess =
         ({ target }) => target.result && store.delete(target.result);
     });
+
+    db.close();
   }).catch(printErrorIfAvailable);
 }
 
 function evictStatusesByRecords(records) {
-  evictStatuses(records.map(({ id }) => id));
+  return evictStatuses(records.map(({ id }) => id));
 }
 
-export function putAccounts(records) {
+export function putAccounts(records, avatarStatic) {
+  const avatarKey = avatarStatic ? 'avatar_static' : 'avatar';
   const newURLs = [];
 
   put('accounts', records, (newRecord, oldKey, store, oncomplete) => {
@@ -135,7 +148,7 @@ export function putAccounts(records) {
         const oldURL = target.result[key];
 
         if (newURL !== oldURL) {
-          asyncCache
+          openCache()
             .then(cache => cache.delete(oldURL))
             .catch(printErrorIfAvailable);
         }
@@ -153,11 +166,12 @@ export function putAccounts(records) {
   }, (newRecord, oncomplete) => {
     newURLs.push(newRecord[avatarKey]);
     oncomplete();
-  }).then(records => {
-    evictAccountsByRecords(records);
-    asyncCache
-      .then(cache => cache.addAll(newURLs))
-      .catch(printErrorIfAvailable);
+  }).then(records => Promise.all([
+    evictAccountsByRecords(records),
+    openCache().then(cache => cache.addAll(newURLs)),
+  ])).then(freeStorage, error => {
+    freeStorage();
+    throw error;
   }).catch(printErrorIfAvailable);
 }
 
@@ -166,3 +180,27 @@ export function putStatuses(records) {
     .then(evictStatusesByRecords)
     .catch(printErrorIfAvailable);
 }
+
+export function freeStorage() {
+  return navigator.storage.estimate().then(({ quota, usage }) => {
+    if (usage + storageMargin < quota) {
+      return null;
+    }
+
+    return openDB().then(db => new Promise((resolve, reject) => {
+      const retrieval = db.transaction('accounts', 'readonly').objectStore('accounts').getAll(null, 1);
+
+      retrieval.onsuccess = () => {
+        if (retrieval.result.length > 0) {
+          resolve(evictAccountsByRecords(retrieval.result).then(freeStorage));
+        } else {
+          resolve(caches.delete('mastodon-system'));
+        }
+      };
+
+      retrieval.onerror = reject;
+
+      db.close();
+    }));
+  });
+}

app/javascript/styles/mastodon/about.scss

@@ -322,6 +322,11 @@ $small-breakpoint: 960px;
     border: 0;
     border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
     margin: 20px 0;
+
+    &.spacer {
+      height: 1px;
+      border: 0;
+    }
   }
 
   .container-alt {