Use save modal with editor #2900

Sxderp · 2018-03-10T18:06:38Z

arantius · 2018-03-13T15:08:27Z

With this, every single save action causes the entire window to blink/flash, even if it completes "instantly". I don't like that. This is a strange behavior for a text editor.

(If I haven't added remotes, it should "just save" with no dialog. If I have, then and only then it makes sense to show the progress of those downloads.)

Sxderp · 2018-03-13T17:26:55Z

While I can see your point and I have some ideas on how to implement those checks (may require reworking of Downloader depending on how 'smart' the checks are). There's still the problem that we have no idea how long a "save" will take. I don't know how normal text editors deal with this problem (obviously not all of them save synchronously) but I can't think of any sane way (caching entire contents being the only idea I have) to deal with little things like marking the editor as "clean." You make some changes, save, saving takes a while and during that time you make more changes, the save completes, how do we figure out whether to mark the editor as "clean."?

I suppose we could mark it clean before the save and mark it dirty if there's an error. But that might also seem like bad UX.

arantius · 2018-03-14T14:01:43Z

A "normal" editor I think always assumes that a filesystem write is always fast. It doesn't have to plan to remotely download things over the internet as part of a save action. I can't think of another text editor that ever has any kind of progress/dialog as part of a save action, that I've used. (Also, neither VM nor TM do this.)

I think the simplest (best?) solution would be to delay showing the modal for some amount (100ms?) of time. Enough that we expect that a plain save (no new remotes to download) will always have passed. If that has passed and we're still saving, then show the dialog with its progress bar. If not, just never show the dialog. Either way, mark clean only when save has finished.

It's not too complicated on top of that to track clean/dirty of parallel save and edit actions. Just a few cases to design in.

Sxderp · 2018-03-14T15:54:28Z

I can't think of another text editor that ever has any kind of progress/dialog as part of a save action

I've seen editors that save synchronously. Most of the time the editor just freezes rather than bring up a dialog box.

Sxderp · 2018-03-31T16:11:33Z

Updated with a simple timeout before showing the save modal. Much easier than anything I had originally thought of (which involved doing checks to see if we actually needed to fetch remotes, etc.).

arantius · 2018-04-02T20:20:09Z

src/content/edit-user-script.css

+
+
+body.save #modal
+{ display: grid; }


Rarely all on one line, otherwise always:

selector { rules }

arantius · 2018-04-02T20:20:09Z

src/content/edit-user-script.css

@@ -63,3 +118,6 @@ body, #editor {
 .CodeMirror {
  height: 100% !important;
 }
+.CodeMirror pre {
+  line-height: 14px !important;


Why? Does this have anything to do with showing a modal dialog? Some side effect of now including shoelace?

Slide effect of shoelace.

arantius · 2018-04-02T20:20:09Z

src/content/edit-user-script.html

+        </ul>
+      </div>
+    </div>
+    <div class="panel-foot">


Just <footer>?

arantius · 2018-04-02T20:20:09Z

src/content/edit-user-script.html

@@ -39,6 +40,36 @@
 </head>

 <body>
+<div id="modal">
+  <div class="panel">
+    <div class="panel-head">


Just <header>?

arantius · 2018-04-02T20:20:09Z

src/content/edit-user-script.html

@@ -39,6 +40,36 @@
 </head>

 <body>
+<div id="modal">
+  <div class="panel">


Why do I need an extra wrapper div here?

The outer div covers the entire page and consists of a semi transparent dark color. Effectively "dimming" the contents. The inner div is the focused "box". If you have suggestion on a better way to do this, shoot.

arantius · 2018-04-02T20:20:09Z

src/content/edit-user-script.html

+      <div rv-hide="modal.errorList | empty">
+        <p>{'script_save_error'|i18n}</p>
+        <ul>
+          <li rv-each-error="modal.errorList">


This fits so should probably be all on one line <li>...</li>

arantius · 2018-04-02T20:20:09Z

src/content/edit-user-script.js

@@ -173,3 +217,4 @@ window.addEventListener('beforeunload', event => {
    event.preventDefault();
  }
 });
+rivets.bind(document, gTplData);


Should be blank lines, but why did this need to move all the way to the bottom?

Not really sure why I stuck it all the way at the bottom. Should only need to be below "tplData"

arantius · 2018-05-03T18:21:30Z

Status check on this PR please?

Sxderp · 2018-05-04T16:32:45Z

Status check on this PR please?

Should be good. Resolved all the issues in the review.

Sxderp · 2018-05-20T22:54:36Z

Rebased on master

All required details can be obtained from the downloader.

This also preps the editor for using rivets in the upcoming modal changes.

The modal tracks progress and will display any errors that occur during save. fixes greasemonkey#2847

Sxderp · 2018-06-01T12:55:06Z

Rebased on master

Fixes greasemonkey#2858, greasemonkey#2900

arantius added this to the 4.4 milestone Mar 14, 2018

Sxderp force-pushed the use-save-modal-with-editor branch from dd41257 to e2d279d Compare March 31, 2018 16:09

arantius requested changes Apr 2, 2018

View reviewed changes

Sxderp force-pushed the use-save-modal-with-editor branch from b486cb7 to 1e9433e Compare April 5, 2018 14:26

arantius modified the milestones: 4.4, 4.5 May 3, 2018

Sxderp force-pushed the use-save-modal-with-editor branch 3 times, most recently from 580c274 to 1696a9b Compare May 20, 2018 22:53

Sxderp added 12 commits June 1, 2018 08:47

Resolve entire script details on downloader save

9304454

Remove onMessage from install dialog

085e846

All required details can be obtained from the downloader.

Use rivets for editor page title

f6ee695

This also preps the editor for using rivets in the upcoming modal changes.

Remove on save error notification

f3179d1

Display progress modal when saving in the editor

0201d45

The modal tracks progress and will display any errors that occur during save. fixes greasemonkey#2847

Fix broken registry test

2aec89d

Only open save modal if some time has passed

b8b5981

Fix issue with being unable to close save modal onerror

564ff38

Revise CSS code style

ad779ad

Document obscure CSS rule

aab9d00

Revise HTML code style

655888a

Use header and footer tags instead of classes

ec5afe9

Sxderp force-pushed the use-save-modal-with-editor branch from 1696a9b to ec5afe9 Compare June 1, 2018 12:54

arantius added a commit to arantius/greasemonkey that referenced this pull request Jun 7, 2018

Merge branch 'use-save-modal-with-editor'

a26b52f

Fixes greasemonkey#2858, greasemonkey#2900

arantius merged commit ec5afe9 into greasemonkey:master Jun 7, 2018

arantius mentioned this pull request Jun 7, 2018

Handle errors when adding remotes via editor #2594

Closed

Use save modal with editor #2900

Use save modal with editor #2900

Sxderp commented Mar 10, 2018

arantius commented Mar 13, 2018

Sxderp commented Mar 13, 2018

arantius commented Mar 14, 2018

Sxderp commented Mar 14, 2018

Sxderp commented Mar 31, 2018

arantius Apr 2, 2018

arantius Apr 2, 2018

Sxderp Apr 2, 2018

arantius Apr 2, 2018

arantius Apr 2, 2018

arantius Apr 2, 2018

Sxderp Apr 2, 2018

arantius Apr 2, 2018

arantius Apr 2, 2018

Sxderp Apr 2, 2018

arantius commented May 3, 2018

Sxderp commented May 4, 2018

Sxderp commented May 20, 2018

Sxderp commented Jun 1, 2018

Use save modal with editor #2900

Use save modal with editor #2900

Conversation

Sxderp commented Mar 10, 2018

arantius commented Mar 13, 2018

Sxderp commented Mar 13, 2018

arantius commented Mar 14, 2018

Sxderp commented Mar 14, 2018

Sxderp commented Mar 31, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arantius commented May 3, 2018

Sxderp commented May 4, 2018

Sxderp commented May 20, 2018

Sxderp commented Jun 1, 2018