More restore point improvements

src/addons/addons/tw-disable-restore-points/_manifest_entry.js

@@ -2,7 +2,7 @@
 const manifest = {
   "noTranslations": true,
   "name": "Disable restore points",
-  "description": "Disables all restore point creation. Be careful.",
+  "description": "Disable automatic restore point creation. Does not delete existing restore points.",
   "userscripts": [
     {
       "url": "userscript.js"

src/addons/addons/tw-disable-restore-points/userscript.js

@@ -1,3 +1,4 @@
+import AddonHooks from '../../hooks.js';
 export default async function ({ addon }) {
-  window.DISABLE_RESTORE_POINTS = true;
+  AddonHooks.disableRestorePoints = true;
 }

src/addons/generated/upstream-meta.json

@@ -1 +1 @@
-{"commit":"aea0532"}
+{"commit":"dc74b83"}

src/components/tw-restore-point-modal/restore-point-modal.css

@@ -79,23 +79,30 @@
 }
 .restore-point:hover {
     border-color: $motion-primary;
-}
-.restore-point-details {
-
 }
 .restore-point-title {
     font-weight: bold;
 }
 
 .thumbnail-container {
-
+    flex-shrink: 0;
+    /* 4:3 */
+    width: 100px;
+    height: 75px;
 }
-.thumbnail {
+.thumbnail-image {
     display: block;
     border-radius: 0.25rem;
-    width: 100px;
+    width: 100%;
     height: 100%;
-    max-height: 100px;
+}
+.thumbnail-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2em;
 }
 
 .delete-button {

src/components/tw-restore-point-modal/restore-point.jsx

@@ -5,6 +5,7 @@ import bindAll from 'lodash.bindall';
 import styles from './restore-point-modal.css';
 import {formatBytes} from '../../lib/tw-bytes-utils';
 import RestorePointAPI from '../../lib/tw-restore-point-api';
+import log from '../../lib/log';
 
 // Browser support is not perfect yet
 const relativeTimeSupported = () => typeof Intl !== 'undefined' && typeof Intl.RelativeTimeFormat !== 'undefined';
@@ -17,7 +18,8 @@ class RestorePoint extends React.Component {
             'handleClickLoad'
         ]);
         this.state = {
-            thumbnail: null
+            thumbnail: null,
+            error: false
         };
         this.unmounted = false;
 
@@ -35,6 +37,14 @@ class RestorePoint extends React.Component {
                         thumbnail: url
                     });
                 }
+            })
+            .catch(error => {
+                log.error(error);
+                if (!this.unmounted) {
+                    this.setState({
+                        error: true
+                    });
+                }
             });
     }
 
@@ -71,15 +81,20 @@ class RestorePoint extends React.Component {
                 className={styles.restorePoint}
                 onClick={this.handleClickLoad}
             >
-                <img
-                    className={styles.restorePointThumbnail}
-                    src={this.state.thumbnail}
-                    // This sets the image's aspect ratio. CSS is responsible for figuring out how to size it.
-                    width={this.props.thumbnailWidth}
-                    height={this.props.thumbnailHeight}
-                />
+                <div className={styles.thumbnailContainer}>
+                    {this.state.error ? (
+                        <span className={styles.thumbnailPlaceholder}>
+                            {'?'}
+                        </span>
+                    ) : this.state.thumbnail ? (
+                        <img
+                            className={styles.thumbnailImage}
+                            src={this.state.thumbnail}
+                        />
+                    ) : null}
+                </div>
 
-                <div className={styles.restorePointDetails}>
+                <div>
                     <div className={styles.restorePointTitle}>
                         {this.props.title}
                     </div>
@@ -103,7 +118,7 @@ class RestorePoint extends React.Component {
                         <FormattedMessage
                             defaultMessage="{n} assets"
                             // eslint-disable-next-line max-len
-                            description="Describes how many assets (costumes and images) are in a restore poins. {n} is replaced with a number like 406"
+                            description="Describes how many assets (costumes and images) are in a restore point. {n} is replaced with a number like 406"
                             id="tw.restorePoints.assets"
                             values={{
                                 n: Object.keys(this.props.assets).length