Fixes for edit script screen (#78)

src/_locales/en/messages.json

@@ -78,5 +78,17 @@
   "move_to_group_label": {
     "message": "Move to \"%s\"",
     "description": "Move to a specific group action label"
+  },
+  "script_not_visible_toast": {
+    "message": "\"%s\" is not visible because it's not a bookmarklet.",
+    "description": "Message displayed when the script is not a valid bookmarklet"
+  },
+  "fix_label": {
+    "message": "Fix",
+    "description": "Label for button to fix a script"
+  },
+  "script_missing_keyword_message": {
+    "message": "Scripts need to start with the keyword \"javascript:\".",
+    "description": "Message shown when the script is missing the 'javascript': keyword at the start"
   }
 }

src/_locales/ja/messages.json

@@ -69,7 +69,7 @@
   },
   "undo_label": {
     "message": "取消",
-    "description": "Message displayed when a script is deleted"
+    "description": ""
   },
   "edit_label": {
     "message": "編集",
@@ -78,5 +78,17 @@
   "move_to_group_label": {
     "message": "\"%s\"に移動",
     "description": ""
+  },
+  "script_not_visible_toast": {
+    "message": "\"%s\"スクリプトが無効です",
+    "description": "Note this translation only mentions the script is invalid, not hidden"
+  },
+  "fix_label": {
+    "message": "修正",
+    "description": ""
+  },
+  "script_missing_keyword_message": {
+    "message": "スクリプトはキーワード「javascript:」で開始する必要があります。",
+    "description": ""
   }
 }

src/popup/app.jsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { Suspense, startTransition, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import zipObject from '../utils/zipObject';
@@ -51,7 +51,9 @@ export default function App() {
 
   useEffect(() => {
     const handleHashChange = () => {
-      setPath(parseHash(window.location.hash));
+      startTransition(() => {
+        setPath(parseHash(window.location.hash));
+      });
     };
 
     // Fetch translations on load.

src/popup/components/toast/index.jsx

@@ -3,12 +3,24 @@ import React from 'react';
 import './toast.css';
 
 export default function Toast({
+  inline,
+  warning,
   message = '',
   label = '',
   onActionClick = () => {}
 }) {
+  let className = 'toast';
+
+  if (inline) {
+    className += ' toast--inline';
+  }
+
+  if (warning) {
+    className += ' toast--warning';
+  }
+
   return (
-    <div className="toast">
+    <div className={className}>
       {message}
       <button className="toast__button" onClick={onActionClick}>
         {label}

src/popup/components/toast/toast.css

@@ -12,6 +12,17 @@
   user-select: none;
 }
 
+.toast--inline {
+  padding: 0;
+  box-shadow: none;
+  background: none;
+  border-radius: 0;
+}
+
+.toast--warning {
+  color: var(--button-danger-color);
+}
+
 .toast__button {
   color: var(--toast-action-color);
   background: transparent;
@@ -24,6 +35,7 @@
   padding: 0 8px;
   font-weight: 600;
   margin-right: -8px;
+  flex-shrink: 0;
 }
 
 .toast__button:active {

src/popup/hooks/use_browser_bookmarks.js

@@ -8,6 +8,7 @@ import {
 } from '../store/actions/bookmarklets';
 import { useToast } from './use_toast';
 import { useUndoHistory } from './use_undo_history';
+import clampText from '../lib/clamp_text';
 
 export function useBrowserBookmarks() {
   const dispatch = useDispatch();
@@ -93,7 +94,7 @@ export function useBrowserBookmarks() {
         toast.show({
           message: translations['script_deleted_toast'].replace(
             '%s',
-            bookmark.title || 'Untitled script'
+            clampText(bookmark.title) || 'Untitled script'
           ),
           label: translations['undo_label'],
           action: undoHistory.pop

src/popup/lib/clamp_text.js

@@ -0,0 +1,7 @@
+export default function clampText(text = '', maxLength = 20) {
+  if (text.length > maxLength) {
+    return text.slice(0, maxLength) + '…';
+  }
+
+  return text;
+}

src/popup/screens/edit_bookmarklet_screen/index.jsx

@@ -4,16 +4,22 @@ import { useSelector } from 'react-redux';
 import Button from '../../components/button';
 import TextField from '../../components/text_field';
 import Titlebar from '../../components/titlebar';
+import Toast from '../../components/toast';
 import { selectTranslations } from '../../store/selectors/locale';
 import { useBrowserBookmarks } from '../../hooks/use_browser_bookmarks';
 import { useToast } from '../../hooks/use_toast';
+import clampText from '../../lib/clamp_text';
 
 import './edit_bookmarklet_screen.css';
 
+function returnToHomeScreen() {
+  window.location.hash = '';
+}
+
 export default function EditBookmarkletScreen({
   route = { params: {}, base: '' }
 }) {
-  const [bookmarklet, setBookmarklet] = useState({});
+  const [bookmarklet, setBookmarklet] = useState(null);
   const translations = useSelector(selectTranslations);
   const toast = useToast();
   const bookmarks = useBrowserBookmarks();
@@ -23,7 +29,10 @@ export default function EditBookmarkletScreen({
   }, []);
 
   useEffect(() => {
-    if (!route.params.id) return;
+    if (!route.params.id) {
+      returnToHomeScreen();
+      return;
+    }
 
     if (route.params.id === 'new') {
       const newBookmarklet = {
@@ -44,42 +53,62 @@ export default function EditBookmarkletScreen({
       return;
     }
 
-    const handleBookmarksChange = () => {
-      chrome.bookmarks.get(route.params.id, (bookmark) => {
-        if (!bookmark) {
-          window.location.hash = '';
-          return;
-        }
+    chrome.bookmarks.get(route.params.id, (bookmark) => {
+      if (!bookmark || chrome.runtime.lastError) {
+        returnToHomeScreen();
+        return;
+      }
 
-        setBookmarklet(bookmark[0]);
-      });
+      setBookmarklet(bookmark[0]);
+    });
+
+    const handleBookmarkRemoved = (id) => {
+      if (id === route.params.id) {
+        returnToHomeScreen();
+      }
     };
 
-    handleBookmarksChange();
-    chrome.bookmarks.onChanged.addListener(handleBookmarksChange);
-    chrome.bookmarks.onRemoved.addListener(handleBookmarksChange);
+    chrome.bookmarks.onRemoved.addListener(handleBookmarkRemoved);
 
     return () => {
-      chrome.bookmarks.onChanged.removeListener(handleBookmarksChange);
-      chrome.bookmarks.onRemoved.removeListener(handleBookmarksChange);
+      chrome.bookmarks.onRemoved.removeListener(handleBookmarkRemoved);
     };
   }, [route.params.id]);
 
   const handleRemoveClick = async () => {
     await bookmarks.remove(bookmarklet);
-    window.location.hash = '';
+    returnToHomeScreen();
   };
 
   const handleBackClick = () => {
-    window.location.hash = '';
+    if (bookmarklet.url.trim() && !bookmarklet.url.startsWith('javascript:')) {
+      toast.show({
+        message: translations['script_not_visible_toast'].replace(
+          '%s',
+          clampText(bookmarklet.title)
+        ),
+        label: translations['fix_label'],
+        action: () => {
+          window.location.hash = `edit/${bookmarklet.id}`;
+        }
+      });
+    }
+
+    returnToHomeScreen();
+  };
+
+  const handleToastActionClick = () => {
+    setBookmarklet({ ...bookmarklet, url: 'javascript: ' + bookmarklet.url });
   };
 
   const handleTitleChange = (title) => {
     chrome.bookmarks.update(bookmarklet.id, { title });
+    setBookmarklet({ ...bookmarklet, title });
   };
 
   const handleCodeChange = (code) => {
     chrome.bookmarks.update(bookmarklet.id, { url: code });
+    setBookmarklet({ ...bookmarklet, url: code });
   };
 
   return (
@@ -92,14 +121,26 @@ export default function EditBookmarkletScreen({
       <div className="edit-bookmarklet-screen__content">
         <TextField
           label={translations['name_field_label']}
-          defaultValue={bookmarklet.title}
+          defaultValue={bookmarklet?.title || ''}
           onChange={handleTitleChange}
         />
         <TextField
           label={translations['code_field_label']}
-          defaultValue={bookmarklet.url}
+          defaultValue={bookmarklet?.url || ''}
           onChange={handleCodeChange}
         />
+
+        {bookmarklet !== null && !bookmarklet.url.startsWith('javascript:') && (
+          <div style={{ marginLeft: 58 }}>
+            <Toast
+              inline
+              warning
+              message={translations['script_missing_keyword_message']}
+              label={translations['fix_label']}
+              onActionClick={handleToastActionClick}
+            />
+          </div>
+        )}
       </div>
 
       <div className="edit-bookmarklet-screen__footer">