1730659 - Add an "upgrade tasks are taking a long time" message

Status: RESOLVED FIXED

(Thunderbird :: General, enhancement)

Description

[Geoff Lankow (:darktrojan)]

We're soon going to be making some changes that may require time-consuming migrations. Migrations happen before any UI appears. If something takes longer than a certain length of time, a message should appear on the screen to reassure the user that something is happening.

Comment 1

[Geoff Lankow (:darktrojan)]

Attachment: Bug 1730659 - Add an "upgrade tasks are taking a long time" message. r=mkmelin

Comment 2

[Richard Marti (:Paenglab)]

Attachment: progress.png

Huh, my TB has now long to start!?! ;-)

I like it. Maybe we could add some code to adapt to the dark system themes.

And we changed the appearance of the progress meter. With the code below it looks like in my screenshot. Alessandro?

If the indeterminate state isn't used, only the two first rules are needed.

progress {
  appearance: none;
  height: 4px;
  background-color: hsla(0, 0%, 60%, 0.2);
  border-style: none;
  border-radius: 2px;
}

progress::-moz-progress-bar {
  appearance: none;
  background-color: SelectedItem;
  border-radius: 2px;
}

progress:indeterminate::-moz-progress-bar {
  /* Make a white reflecting animation.
     Create a gradient with 2 identical pattern, and enlarge the size to 200%.
     This allows us to animate background-position with percentage. */
  background-image: linear-gradient(90deg, transparent 0%,
                                           rgba(255, 255, 255, 0.5) 25%,
                                           transparent 50%,
                                           rgba(255, 255, 255, 0.5) 75%,
                                           transparent 100%);
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  progress:indeterminate::-moz-progress-bar {
    animation: progressSlideX 1.5s linear infinite;
  }

  @keyframes progressSlideX {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -100% 0;
    }
  }
}

Comment 3

[Alessandro Castellani [:aleca]]

Comment on attachment 9241080 [details]
Bug 1730659 - Add an "upgrade tasks are taking a long time" message. r=mkmelin

Maybe there's something wrong with my system, but on Pop_OS 21.04 (based on ubuntu 21.04 with custom gnome DE) only a white rectangle with drop shadow is visible. No content inside.

Based on the screenshots, I agree with the changes proposed by Richard.

We need to add some "moving part" to this screen in order to show the user that the application is not frozen in case the progress bar doesn't move for a while.
We could use the loading throbber (loading.svg) to the left of the current task, as well as adding a faint glowing animation to the progress bar a la windows file transfer. (unicorn puke codepen example: https://codepen.io/avstorm/pen/abdajMB)

Comment 4

[Geoff Lankow (:darktrojan)]

(In reply to Alessandro Castellani [:aleca] from comment #3)

Maybe there's something wrong with my system, but on Pop_OS 21.04 (based on ubuntu 21.04 with custom gnome DE) only a white rectangle with drop shadow is visible. No content inside.

Interesting. We'll definitely want to fix that. Maybe a HWA thing?

We need to add some "moving part" to this screen in order to show the user that the application is not frozen in case the progress bar doesn't move for a while.
We could use the loading throbber (loading.svg) to the left of the current task

I did try that at one point, but stopped because I couldn't just use it as an image. Will do a bit of rearranging to get it in there.

, as well as adding a faint glowing animation to the progress bar a la windows file transfer. (unicorn puke codepen example: https://codepen.io/avstorm/pen/abdajMB)

Yeah, I wondered about colouring the progress bar to match the bird. Will try a few things. Also, we've got the fat rectangular progress bar instead of the skinny one, I think because this is chrome not content.

Comment 5

[Geoff Lankow (:darktrojan)]

(In reply to Alessandro Castellani [:aleca] from comment #3)

Maybe there's something wrong with my system, but on Pop_OS 21.04 (based on ubuntu 21.04 with custom gnome DE) only a white rectangle with drop shadow is visible. No content inside.

I see that too now that my tree is up-to-date. Except I only get the drop shadow, no window at all.

Comment 6

[Alessandro Castellani [:aleca]]

I see that too now that my tree is up-to-date. Except I only get the drop shadow, no window at all.

After the latest m-c pull I only see the drop shadow as well.

Comment 7

[Richard Marti (:Paenglab)]

(In reply to Geoff Lankow (:darktrojan) from comment #4)

Will try a few things. Also, we've got the fat rectangular progress bar instead of the skinny one, I think because this is chrome not content.

With my code from comment 2 the progress bar is no more fat.

Comment 8

[Richard Marti (:Paenglab)]

(In reply to Geoff Lankow (:darktrojan) from comment #5)

I see that too now that my tree is up-to-date. Except I only get the drop shadow, no window at all.

Working on Windows.

Adding

progress {
  appearance: none;
  height: 4px;
  background-color: hsla(0, 0%, 60%, 0.2);
  border-style: none;
  border-radius: 2px;
}

makes the progress bar thin.

Comment 9

[Geoff Lankow (:darktrojan)]

Pop-up type windows are broken on Linux again so I'll wait until that is resolved before deploying a test.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/47298bf105dc
Add an "upgrade tasks are taking a long time" message. r=mkmelin

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/3e2219187cbd
follow-up - Add icon256.png/default256.png to the allowed dupes list. rs=bustage-fix

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/da381260c4db
follow-up - Fix linting error. rs=linting DONTBUILD