Make large circular progress stroke width larger

Circular progress indicators default to radius 10, stroke width of 3.

This increases the stroke width to 4 if the radius of the indicator is
set to any value above 10.

Bug: 1014771
Tests: browser_tests --gtest_filter=FileManagerJsTest.FilesDisplayPanel
Change-Id: I48b602cebcdad709c64b7e39094cb03602ac118a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1893594
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#711584}

ui/file_manager/file_manager/foreground/elements/files_xf_elements_unittest.js

@@ -217,6 +217,26 @@ function testFilesDisplayPanelMixedSummary() {
   assertEquals('status', summaryPanelItem.indicator);
 }
 
+function testFilesDisplayPanelCircularProgress() {
+  // Get the host display panel container element.
+  /** @type {!DisplayPanel|!Element} */
+  const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
+
+  // Add a progress panel item to the display panel container.
+  const progressPanel = displayPanel.addPanelItem('testpanel1');
+  progressPanel.panelType = progressPanel.panelTypeProgress;
+
+  // Verify the circular progress panel item marker stroke width.
+  const circularProgress = progressPanel.shadowRoot.querySelector('#indicator');
+  const strokeWidthContainerGroup =
+      circularProgress.shadowRoot.querySelector('#circles');
+  assertEquals('3', strokeWidthContainerGroup.getAttribute('stroke-width'));
+
+  // Verify setting large radius on the circular marker changes stroke width.
+  circularProgress.setAttribute('radius', '11');
+  assertEquals('4', strokeWidthContainerGroup.getAttribute('stroke-width'));
+}
+
 async function testFilesDisplayPanelSummaryPanel(done) {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */

ui/file_manager/file_manager/foreground/elements/xf_circular_progress.js

@@ -66,9 +66,6 @@ class CircularProgress extends HTMLElement {
                         stroke-linecap: round;
                         fill: none;
                     }
-                    circle {
-                        stroke-width: 3px;
-                    }
                     text {
                         font: bold 14px Roboto;
                         fill: rgb(26, 115, 232);
@@ -77,9 +74,11 @@ class CircularProgress extends HTMLElement {
                 <div class='progress'>
                     <svg xmlns='http://www.w3.org/2000/svg'
                         viewBox='0 0 36 36'>
-                        <circle class='bottom' cx='18' cy='18' r='10'/>
-                        <circle class='top' transform='rotate(-90 18 18)'
+                        <g id='circles' stroke-width='3'>
+                          <circle class='bottom' cx='18' cy='18' r='10'/>
+                          <circle class='top' transform='rotate(-90 18 18)'
                             cx='18' cy='18' r='10' stroke-dasharray='0 1'/>
+                        </g>
                         <text class='label' x='18' y='18' text-anchor='middle'
                             alignment-baseline='central'></text>
                         <circle class='errormark' visibility='hidden'
@@ -161,7 +160,12 @@ class CircularProgress extends HTMLElement {
         if (radius < 0 || radius > 16.5) {
           return;
         }
-        const strokeWidth = 3;
+        let strokeWidth = 3;
+        if (radius > 10) {
+          const circles = this.shadowRoot.querySelector('#circles');
+          circles.setAttribute('stroke-width', '4');
+          strokeWidth = 4;
+        }
         // Position the error indicator relative to the progress circle.
         this.setErrorPosition_(radius, strokeWidth);
         // Calculate the circumference for the progress dash length.