Remove data url from progress-bar.

Author: josephperrott

src/lib/progress-bar/_progress-bar-theme.scss

@@ -8,7 +8,7 @@
   $warn: map-get($theme, warn);
 
   .mat-progress-bar-background {
-    background-image: #{_mat-progress-bar-buffer($primary, lighter)};
+    fill: mat-color($primary, lighter);
   }
 
   .mat-progress-bar-buffer {
@@ -21,7 +21,7 @@
 
   .mat-progress-bar.mat-accent {
     .mat-progress-bar-background {
-      background-image: #{_mat-progress-bar-buffer($accent, lighter)};
+      fill: mat-color($accent, lighter);
     }
 
     .mat-progress-bar-buffer {
@@ -35,7 +35,7 @@
 
   .mat-progress-bar.mat-warn {
     .mat-progress-bar-background {
-      background-image: #{_mat-progress-bar-buffer($warn, lighter)};
+      fill: mat-color($warn, lighter);
     }
 
     .mat-progress-bar-buffer {
@@ -50,33 +50,3 @@
 
 @mixin mat-progress-bar-typography($config) { }
 
-// TODO(josephperrott): Find better way to inline svgs.
-// In buffer mode a repeated SVG object is used as a background.
-// Each of the following defines the SVG object for each of the class defined colors.
-//
-// The string is a URL encoded version of:
-//
-// <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-//      version="1.1" x="0px" y="0px" enable-background="new 0 0 5 2"
-//      xml:space="preserve" viewBox="0 0 5 2" preserveAspectRatio="none slice">
-//   <circle cx="1" cy="1" r="1" fill="{INJECTED_COLOR}"/>
-// </svg>
-@function _mat-progress-bar-buffer($palette, $hue) {
-  $color: mat-color($palette, $hue) + '';
-
-  // We also need to escape the hash in hex colors,
-  // otherwise IE will throw an XML error.
-  @if str-index($color, '#') == 1 {
-    $color: '%23' + str-slice($color, 2);
-  }
-
-  $result: '' +
-    'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2F' +
-    'www.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2' +
-    '7%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%' +
-    '3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none' +
-    '%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
-    $color + '%27%2F%3E%3C%2Fsvg%3E';
-
-  @return url($result);
-}

src/lib/progress-bar/progress-bar.html

@@ -1,5 +1,17 @@
-<!-- The background div is named as such because it appears below the other divs and is not sized based on values. -->
-<div class="mat-progress-bar-background mat-progress-bar-element"></div>
+<!--
+  The background div is named as such because it appears below the other divs and is not sized based
+  on values.
+-->
+<div class="mat-progress-bar-background mat-progress-bar-element">
+  <svg width="100%" height="5">
+    <defs>
+      <pattern id="{{progressbarId}}" x="5" y="0" width="10" height="5" patternUnits="userSpaceOnUse">
+        <circle cx="2.5" cy="2.5" r="2.5"/>
+      </pattern>
+    </defs>
+    <rect [attr.fill]="'url(#' + progressbarId + ')'" width="100%" height="100%"/>
+  </svg>
+</div>
 <div class="mat-progress-bar-buffer mat-progress-bar-element" [ngStyle]="_bufferTransform()"></div>
 <div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()"></div>
 <div class="mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element"></div>

src/lib/progress-bar/progress-bar.scss

@@ -26,9 +26,12 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   // The progress bar background is used to show the bubble animation scrolling behind a
   // buffering progress bar.
   .mat-progress-bar-background {
-    background-repeat: repeat-x;
-    background-size: 10px 4px;
-    display: none;
+    svg {
+      position: absolute;
+      // The width is set to be 10px longer than the container as it will be translated 10px
+      // during the background scroll animation.
+      width: calc(100% + 10px);
+    }
   }
 
   // The progress bar buffer is the bar indicator showing the buffer value and is only visible
@@ -104,7 +107,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
     .mat-progress-bar-background {
       animation: mat-progress-bar-background-scroll
           $mat-progress-bar-piece-animation-duration infinite linear;
-      display: block;
     }
   }
 }

src/lib/progress-bar/progress-bar.ts

@@ -5,12 +5,17 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  ViewEncapsulation,
+  ElementRef
+} from '@angular/core';
+import {ThemePalette} from '../core/common-behaviors/color';
 
-import {Component, ChangeDetectionStrategy, Input, ViewEncapsulation} from '@angular/core';
-
-// TODO(josephperrott): Benchpress tests.
-// TODO(josephperrott): Add ARIA attributes for progressbar "for".
-
+/** Counter used to generate unique IDs for progress bars. */
+let progressbarId = 0;
 
 /**
  * <mat-progress-bar> component.
@@ -38,21 +43,19 @@ import {Component, ChangeDetectionStrategy, Input, ViewEncapsulation} from '@ang
 })
 export class MatProgressBar {
   /** Color of the progress bar. */
-  @Input() color: 'primary' | 'accent' | 'warn' = 'primary';
-
-  private _value: number = 0;
+  @Input() color: ThemePalette = 'primary';
 
   /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */
   @Input()
   get value() { return this._value; }
   set value(v: number) { this._value = clamp(v || 0); }
-
-  private _bufferValue: number = 0;
+  private _value: number = 0;
 
   /** Buffer value of the progress bar. Defaults to zero. */
   @Input()
   get bufferValue() { return this._bufferValue; }
   set bufferValue(v: number) { this._bufferValue = clamp(v || 0); }
+  private _bufferValue: number = 0;
 
   /**
    * Mode of the progress bar.
@@ -63,6 +66,11 @@ export class MatProgressBar {
    */
   @Input() mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate';
 
+  /** The id of the progress bar. */
+  progressbarId = `mat-progress-bar-${progressbarId++}`;
+
+  constructor(private el: ElementRef) {}
+
   /** Gets the current transform value for the progress bar's primary indicator. */
   _primaryTransform() {
     let scale = this.value / 100;