Add error marker indicators for panel items

Adds an error marker that can be used on summary panel items to indicate
that there are error panel items in the collapsed summary view.

Note, this is just the implementation of the error marker itself, follow
up CL will add usage of them.

Includes unit test for the error marker.

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

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

@@ -128,6 +128,43 @@ async function testDisplayPanelChangingPanelTypes(done) {
   done();
 }
 
+function testFilesDisplayPanelErrorMarker() {
+  // Get the host display panel container element.
+  /** @type {!DisplayPanel|!Element} */
+  const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
+
+  // Add a summary panel item to the display panel container.
+  const summaryPanel = displayPanel.addPanelItem('testpanel');
+  summaryPanel.panelType = summaryPanel.panelTypeSummary;
+
+  // Confirm the error marker is not visible by default.
+  const progressIndicator =
+      summaryPanel.shadowRoot.querySelector('xf-circular-progress');
+  const errorMarker = progressIndicator.shadowRoot.querySelector('.errormark');
+  assertEquals(
+      errorMarker.getAttribute('visibility'), 'hidden',
+      'Summary panel error marker should default to hidden');
+
+  // Confirm the error marker can be made visible through property setting on
+  // the progress indicator.
+  progressIndicator.errorMarkerVisibility = 'visible';
+  assertEquals(
+      errorMarker.getAttribute('visibility'), 'visible',
+      'Summary panel error marker should be visible');
+
+  // Confirm we can change visibility of the error marker from panel item
+  // property setting.
+  summaryPanel.errorMarkerVisibility = 'hidden';
+  assertEquals(
+      errorMarker.getAttribute('visibility'), 'hidden',
+      'Summary panel error marker should be hidden');
+
+  // Confirm the panel item reflects the visibility of the error marker.
+  assertEquals(
+      summaryPanel.errorMarkerVisibility, 'hidden',
+      'Summary panel error marker property is wrong, should be "hidden"');
+}
+
 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

@@ -31,6 +31,9 @@ class CircularProgress extends HTMLElement {
      */
     this.indicator_ = this.shadowRoot.querySelector('.top');
 
+    /** @private {Element} */
+    this.errormark_ = assert(this.shadowRoot.querySelector('.errormark'));
+
     /** @private {Element} */
     this.label_ = this.shadowRoot.querySelector('.label');
 
@@ -79,6 +82,9 @@ class CircularProgress extends HTMLElement {
                             cx='18' cy='18' r='10' stroke-dasharray='0 1'/>
                         <text class='label' x='18' y='18' text-anchor='middle'
                             alignment-baseline='central'></text>
+                        <circle class='errormark' visibility='hidden'
+                            cx='25.5' cy='10.5' r='4'
+                            fill='#D93025' stroke='none'/>
                     </svg>
                 </div>`;
   }
@@ -89,6 +95,7 @@ class CircularProgress extends HTMLElement {
    */
   static get observedAttributes() {
     return [
+      'errormark',
       'label',
       'progress',
       'radius',
@@ -110,6 +117,22 @@ class CircularProgress extends HTMLElement {
     return progress;
   }
 
+  /**
+   * Sets the position of the error indicator.
+   * The error indicator is used by the summary panel. Its position is aligned
+   * with the top-right square that contains the progress circle itself.
+   * @param {number} radius The radius of the progress circle.
+   * @param {number} strokeWidth The width of the progress circle stroke.
+   * @private
+   */
+  setErrorPosition_(radius, strokeWidth) {
+    const center = 18;
+    const x = center + radius + (strokeWidth / 2) - 4;
+    const y = center - radius - (strokeWidth / 2) + 4;
+    this.errormark_.setAttribute('cx', x);
+    this.errormark_.setAttribute('cy', y);
+  }
+
   /**
    * Callback triggered by the browser when our attribute values change.
    * TODO(crbug.com/947388) Add unit tests to exercise attribute edge cases.
@@ -123,6 +146,9 @@ class CircularProgress extends HTMLElement {
       return;
     }
     switch (name) {
+      case 'errormark':
+        this.errormark_.setAttribute('visibility', newValue || '');
+        break;
       case 'label':
         this.label_.textContent = newValue;
         break;
@@ -135,6 +161,9 @@ class CircularProgress extends HTMLElement {
         if (radius < 0 || radius > 16.5) {
           return;
         }
+        const strokeWidth = 3;
+        // Position the error indicator relative to the progress circle.
+        this.setErrorPosition_(radius, strokeWidth);
         // Calculate the circumference for the progress dash length.
         this.fullCircle_ = Math.PI * 2 * radius;
         const bottom = this.shadowRoot.querySelector('.bottom');
@@ -149,6 +178,25 @@ class CircularProgress extends HTMLElement {
     }
   }
 
+  /**
+   * Getter for the visibility of the error marker.
+   * @public
+   * @return {string}
+   */
+  get errorMarkerVisibility() {
+    return this.errormark_.getAttribute('visibility');
+  }
+
+  /**
+   * Set the visibility of the error marker.
+   * @param {string} visibility Visibility value being set.
+   * @public
+   */
+  set errorMarkerVisibility(visibility) {
+    // Reflect the progress property into the attribute.
+    this.setAttribute('errormark', visibility);
+  }
+
   /**
    * Getter for the current state of the progress indication.
    * @public

ui/file_manager/file_manager/foreground/elements/xf_panel_item.js

@@ -261,6 +261,7 @@ class PanelItem extends HTMLElement {
   static get observedAttributes() {
     return [
       'count',
+      'errormark',
       'indicator',
       'panel-type',
       'primary-text',
@@ -292,6 +293,11 @@ class PanelItem extends HTMLElement {
           this.indicator_.setAttribute('label', newValue || '');
         }
         break;
+      case 'errormark':
+        if (this.indicator_) {
+          this.indicator_.setAttribute('errormark', newValue || '');
+        }
+        break;
       case 'indicator':
         // Get rid of any existing indicator
         const oldIndicator = this.shadowRoot.querySelector('#indicator');
@@ -436,6 +442,28 @@ class PanelItem extends HTMLElement {
     this.signal_ = signal || console.log;
   }
 
+  /**
+   * Set the visibility of the error marker.
+   * @param {string} visibility Visibility value being set.
+   */
+  set errorMarkerVisibility(visibility) {
+    this.setAttribute('errormark', visibility);
+  }
+
+  /**
+   *  Getter for the visibility of the error marker.
+   */
+  get errorMarkerVisibility() {
+    // If we have an indicator on the panel, then grab the
+    // visibility value from that.
+    if (this.indicator_) {
+      return this.indicator_.errorMarkerVisibility;
+    }
+    // If there's no indicator on the panel just return the
+    // value of any attribute as a fallback.
+    return this.getAttribute('errormark');
+  }
+
   /**
    * Setter to set the indicator type.
    * @param {string} indicator Progress (optionally large) or status.