Use HTML5 bar.

Author: dereuromark

docs/README.md

@@ -368,17 +368,24 @@ echo h($status); // Outputs "Doing the last thing" for example
 
 #### Progress Bar
 Using Tools plugin 1.9.6+ you can also use the more visual progress bar (or any custom one of yours):
+
 ```php
 echo $this->QueueProgress->progressBar($queuedJob, 18);
 ```
+![HTML5](bar_text.png)
+
 The length refers to the amount of chars to display.
 
 Using Tools plugin 1.9.7+ you can even use HTML5 progress bar (easier to style using CSS).
+
 For this it is recommended to add the textual one from above as fallback, though:
 ```php
 $textProgressBar = $this->QueueProgress->progressBar($queuedJob, 18);
 echo $this->QueueProgress->htmlProgressBar($queuedJob, $textProgressBar);
 ```
+
+![HTML5](bar_html.png)
+
 The text one will only be visible for older browsers that do not support the HTML5 tag.
 
 Make sure you loaded the helper in your AppView class.

docs/bar_html.png

@@ -110,13 +110,31 @@ public function htmlProgressBar(QueuedJob $queuedJob, $fallbackHtml = null) {
 	 */
 	public function timeoutProgressBar(QueuedJob $queuedJob, $length) {
 		$progress = $this->calculateTimeoutProgress($queuedJob);
-		if (!$progress) {
+		if ($progress === null) {
 			return null;
 		}
 
 		return $this->Progress->progressBar($progress, $length);
 	}
 
+	/**
+	 * @param \Queue\Model\Entity\QueuedJob $queuedJob
+	 * @param string|null $fallbackHtml
+	 *
+	 * @return string|null
+	 */
+	public function htmlTimeoutProgressBar(QueuedJob $queuedJob, $fallbackHtml = null) {
+		$progress = $this->calculateTimeoutProgress($queuedJob);
+		if ($progress === null) {
+			return null;
+		}
+
+		$progress = $this->Progress->roundPercentage($progress);
+		$title = Number::toPercentage($progress, 0, ['multiply' => true]);
+
+		return '<progress value="' . number_format($progress * 100, 0) . '" max="100" title="' . $title . '">' . $fallbackHtml . '</progress>';
+	}
+
 	/**
 	 * Calculates the timeout progress rate.
 	 *
@@ -139,8 +157,8 @@ protected function calculateTimeoutProgress(QueuedJob $queuedJob) {
 			return null;
 		}
 
-		if ($progressed <= 0) {
-			$progressed = $total;
+		if ($progressed < 0) {
+			$progressed = 0;
 		}
 
 		$progress = min($progressed / $total, 1.0);

docs/bar_text.png

@@ -134,6 +134,39 @@ public function testTimeoutProgressBar() {
 		$this->assertTextContains('<span title="50%">', $result);
 	}
 
+	/**
+	 * @return void
+	 */
+	public function testHtmlTimeoutProgressBar() {
+		$queuedJob = new QueuedJob([
+			'created' => (new FrozenTime())->subMinute(),
+			'notbefore' => (new FrozenTime())->addMinute(),
+		]);
+		$result = $this->QueueProgressHelper->htmlTimeoutProgressBar($queuedJob);
+		$expected = '<progress value="50" max="100" title="50%"></progress>';
+		$this->assertSame($expected, $result);
+
+		$queuedJob = new QueuedJob([
+			'created' => (new FrozenTime()),
+			'notbefore' => (new FrozenTime())->addHour(),
+		]);
+		// For IE9 and below
+		$fallback = $this->QueueProgressHelper->timeoutProgressBar($queuedJob, 10);
+		$result = $this->QueueProgressHelper->htmlTimeoutProgressBar($queuedJob, $fallback);
+		$expected = '<progress value="0" max="100" title="0%"><span title="0%">░░░░░░░░░░</span></progress>';
+		$this->assertSame($expected, $result);
+
+		$queuedJob = new QueuedJob([
+			'created' => (new FrozenTime())->subMinute(),
+			'notbefore' => (new FrozenTime())->subSecond(),
+		]);
+		// For IE9 and below
+		$fallback = $this->QueueProgressHelper->timeoutProgressBar($queuedJob, 10);
+		$result = $this->QueueProgressHelper->htmlTimeoutProgressBar($queuedJob, $fallback);
+		$expected = '<progress value="100" max="100" title="100%"><span title="100%">██████████</span></progress>';
+		$this->assertSame($expected, $result);
+	}
+
 	/**
 	 * Helper method for skipping tests that need a real connection.
 	 *