Commit f1d7b2e1 authored by Sam Foster's avatar Sam Foster
Browse files

Bug 1716827 - Update the success checkbox animation. r=dao 

* Use the new path from check.svg in each frame
* Use clip-paths rather than the mask & stroke-width properties to do the clipping in each frame
* Pick up the fill (white) color from CSS using currentColor rather than hardcoding in the SVG

Differential Revision: https://phabricator.services.mozilla.com/D124410
parent 4f976aae

browser/themes/shared/customizableui/panelUI.inc.css

+2 −0
Original line number Diff line number Diff line
@@ -308,6 +308,8 @@ panelview .toolbaritem-combined-buttons, 
  animation-name: confirmation-hint-checkmark-animation;

  animation-fill-mode: forwards;

  animation-timing-function: steps(18);

  -moz-context-properties: fill;

  fill: currentColor;

}



#confirmation-hint[data-message-id="loginRemoved"] #confirmation-hint-checkmark-image {

browser/themes/shared/icons/success-animation.svg

+49 −91
Original line number Diff line number Diff line 
<!-- This Source Code Form is subject to the terms of the Mozilla Public

   - License, v. 2.0. If a copy of the MPL was not distributed with this

   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<svg xmlns="http://www.w3.org/2000/svg" width="266" height="14">

<svg xmlns="http://www.w3.org/2000/svg" width="266" height="14" fill="context-fill" fill-opacity="context-fill-opacity">

  <defs>

    <path id="a" d="m6.023 13-4.84-4.839a.626.626 0 0 1 .885-.885l4.307 4.308 7.559-7.561a.628.628 0 0 1 .885 0 .628.628 0 0 1 0 .885l-8.09 8.09-.706.002z"/>

  </defs>

  <svg x="14">

    <defs>

      <mask id="b">

        <path fill="#fff" stroke="#fff" stroke-width="1.881" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

      <clipPath id="b">

        <path d="M0 0H2.5V14H0z"/>

      </clipPath>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#b)" transform="translate(-.938 -.938)"/>

    <use href="#a" clip-path="url(#b)"/>

  </svg>

  <svg x="28">

    <defs>

      <mask id="c">

        <path fill="#fff" stroke="#fff" stroke-width="3.877" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

      <clipPath id="c">

        <path d="M0 0H3.5V14H0z"/>

      </clipPath>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#c)" transform="translate(-.938 -.938)"/>

    <use href="#a" clip-path="url(#c)" transform="translate(-.938 -.938)"/>

  </svg>

  <svg x="42">

    <defs>

      <mask id="d">

        <path fill="#fff" stroke="#fff" stroke-width="5.732" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

      <clipPath id="d">

        <path d="M0 0H4.5V14H0z"/>

      </clipPath>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#d)" transform="translate(-.938 -.938)"/>

    <use href="#a" clip-path="url(#d)" transform="translate(-.938 -.938)"/>

  </svg>

  <svg x="56">

    <defs>

      <mask id="e">

        <path fill="#fff" stroke="#fff" stroke-width="7.323" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

      <clipPath id="e">

        <path d="M0 0H5.5V14H0z"/>

      </clipPath>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#e)" transform="translate(-.938 -.938)"/>

    <use href="#a" clip-path="url(#e)" transform="translate(-.938 -.938)"/>

  </svg>

  <svg x="70">

    <defs>

      <mask id="f">

        <path fill="#fff" stroke="#fff" stroke-width="8.501" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

      <clipPath id="f">

        <path d="M0 0H6V14H0z"/>

      </clipPath>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#f)" transform="translate(-.938 -.938)"/>

    <use href="#a" clip-path="url(#f)" transform="translate(-.938 -.938)"/>

  </svg>

  <svg x="84">

    <defs>

      <mask id="g">

        <path fill="#fff" stroke="#fff" stroke-width="9" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

      <clipPath id="g">

        <path d="M0 0H6V14H0z"/>

      </clipPath>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#g)" transform="translate(-.938 -.938)"/>

    <use href="#a" clip-path="url(#g)" transform="translate(-.938 -.938)"/>

  </svg>

  <svg x="98">

    <defs>

      <mask id="h">

        <path fill="#fff" stroke="#fff" stroke-width="13.388" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

      <clipPath id="h">

        <path d="M0 0H8.25V14H0z"/>

      </clipPath>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#h)" transform="translate(-1.19 -1.19) scale(1.03134)"/>

    <use href="#a" clip-path="url(#h)" transform="translate(-1.19 -1.19) scale(1.03134)"/>

  </svg>

  <svg x="112">

    <defs>

      <mask id="i">

        <path fill="#fff" stroke="#fff" stroke-width="18.046" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

      <clipPath id="i">

        <path d="M0 0H10.5V14H0z"/>

      </clipPath>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#i)" transform="translate(-1.455 -1.455) scale(1.0646)"/>

    <use href="#a" clip-path="url(#i)" transform="translate(-1.455 -1.455) scale(1.0646)"/>

  </svg>

  <svg x="126">

    <defs>

      <mask id="j">

        <path fill="#fff" stroke="#fff" stroke-width="22.375" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

      <clipPath id="j">

        <path d="M0 0H12.5V14H0z"/>

      </clipPath>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#j)" transform="translate(-1.702 -1.702) scale(1.09553)"/>

    <use href="#a" clip-path="url(#j)" transform="translate(-1.702 -1.702) scale(1.09553)"/>

  </svg>

  <svg x="140">

    <defs>

      <mask id="k">

        <path fill="#fff" stroke="#fff" stroke-width="26.086" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#k)" transform="translate(-1.914 -1.914) scale(1.12205)"/>

    <use href="#a" transform="translate(-1.914 -1.914) scale(1.12205)"/>

  </svg>

  <svg x="154">

    <defs>

      <mask id="l">

        <path fill="#fff" stroke="#fff" stroke-width="28.836" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#l)" transform="translate(-2.07 -2.07) scale(1.14168)"/>

    <use href="#a" transform="translate(-2.07 -2.07) scale(1.14168)"/>

  </svg>

  <svg x="168">

    <defs>

      <mask id="m">

        <path fill="#fff" stroke="#fff" stroke-width="30" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#m)" transform="matrix(1.15 0 0 1.15 -2.14 -2.14)"/>

    <use href="#a" transform="matrix(1.15 0 0 1.15 -2.14 -2.14)"/>

  </svg>

  <svg x="182">

    <defs>

      <mask id="n">

        <path fill="#fff" stroke="#fff" stroke-width="30" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#n)" transform="matrix(1.12 0 0 1.12 -1.89 -1.89)"/>

    <use href="#a" transform="matrix(1.12 0 0 1.12 -1.89 -1.89)"/>

  </svg>

  <svg x="196">

    <defs>

      <mask id="o">

        <path fill="#fff" stroke="#fff" stroke-width="30" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#o)" transform="matrix(1.1 0 0 1.1 -1.62 -1.62)"/>

    <use href="#a" transform="matrix(1.1 0 0 1.1 -1.62 -1.62)"/>

  </svg>

  <svg x="210">

    <defs>

      <mask id="p">

        <path fill="#fff" stroke="#fff" stroke-width="30" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#p)" transform="matrix(1.05 0 0 1.05 -1.37 -1.37)"/>

    <use href="#a" transform="matrix(1.05 0 0 1.05 -1.37 -1.37)"/>

  </svg>

  <svg x="224">

    <defs>

      <mask id="q">

        <path fill="#fff" stroke="#fff" stroke-width="30" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#q)" transform="matrix(1.03 0 0 1.03 -1.16 -1.16)"/>

    <use href="#a" transform="matrix(1.03 0 0 1.03 -1.16 -1.16)"/>

  </svg>

  <svg x="238">

    <defs>

      <mask id="r">

        <path fill="#fff" stroke="#fff" stroke-width="30" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#r)" transform="matrix(1 0 0 1 -1 -1)"/>

    <use href="#a" transform="matrix(1 0 0 1 -1 -1)"/>

  </svg>

  <svg x="252">

    <defs>

      <mask id="s">

        <path fill="#fff" stroke="#fff" stroke-width="30" d="M-2.91 5.508v7.07h4.488v-7.07H-2.91"/>

      </mask>

    </defs>

    <path fill="#FFF" d="M6 14a.997.997 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.64 1.146l-7 10a1 1 0 0 1-.733.427A1.262 1.262 0 0 1 6 14z" mask="url(#s)" transform="translate(-.94 -.94)"/>

    <use href="#a" transform="translate(-.94 -.94)"/>

  </svg>

</svg>