Bug 1387042 - Add a toast notification that will be shown when the Copy Link or Send to Device page actions are used. r?sfoster,adw draft
authorJared Wein <jwein@mozilla.com>
Thu, 24 Aug 2017 16:44:11 -0400
changeset 654442 9d9ccf0a3db9dc2811a6280d6f24cacb8d4ed564
parent 652136 892c8916ba32b7733e06bfbfdd4083ffae3ca028
child 728578 aeea6ff50a10d4a65d17878118d7ed4c3ea3a9a2
push id76589
push userbmo:jaws@mozilla.com
push dateMon, 28 Aug 2017 21:53:32 +0000
reviewerssfoster, adw
bugs1387042
milestone57.0a1
Bug 1387042 - Add a toast notification that will be shown when the Copy Link or Send to Device page actions are used. r?sfoster,adw MozReview-Commit-ID: CZZnLz84T4h
browser/base/content/browser-pageActions.js
browser/base/content/browser.xul
browser/locales/en-US/chrome/browser/browser.dtd
browser/themes/linux/customizableui/panelUI.css
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/icons/check-animation.svg
browser/themes/shared/jar.inc.mn
--- a/browser/base/content/browser-pageActions.js
+++ b/browser/base/content/browser-pageActions.js
@@ -669,16 +669,67 @@ var BrowserPageActions = {
       let attrValue = this.panelNode.getAttribute(panelAttrName);
       if (attrValue) {
         node.setAttribute(attrName, attrValue);
       }
     }
   },
 };
 
+var BrowserPageActionFeedback = {
+  /**
+   * The feedback page action panel DOM node (DOM node)
+   */
+  get panelNode() {
+    delete this.panelNode;
+    return this.panelNode = document.getElementById("pageActionFeedback");
+  },
+
+  get feedbackAnimationBox() {
+    delete this.feedbackAnimationBox;
+    return this.feedbackAnimationBox = document.getElementById("pageActionFeedbackAnimatableBox");
+  },
+
+  get feedbackLabel() {
+    delete this.feedbackLabel;
+    return this.feedbackLabel = document.getElementById("pageActionFeedbackMessage");
+  },
+
+  show(action, event) {
+    this.feedbackLabel.textContent = this.panelNode.getAttribute(action + "Feedback");
+    this.panelNode.hidden = false;
+
+    let anchor = BrowserPageActions.mainButtonNode;
+    if (event.target.classList.contains("urlbar-icon")) {
+      let id = BrowserPageActions._urlbarButtonNodeIDForActionID(action);
+      let node = document.getElementById(id);
+      if (node) {
+        anchor = node;
+      }
+    }
+
+    this.panelNode.openPopup(anchor, {
+      position: "bottomcenter topright",
+      triggerEvent: event,
+    });
+
+    this.panelNode.addEventListener("popupshown", () => {
+      this.feedbackAnimationBox.setAttribute("animate", "true");
+    }, {once: true});
+    this.panelNode.addEventListener("popuphidden", () => {
+      this.feedbackAnimationBox.removeAttribute("animate");
+    }, {once: true});
+
+    // The timeout value used here allows the panel to stay open for
+    // 1 second after the text transition (duration=120ms) has finished.
+    setTimeout(() => {
+      this.panelNode.hidePopup();
+    }, Services.prefs.getIntPref("browser.pageActions.feedbackTimeoutMS", 1120));
+  },
+};
 
 // built-in actions below //////////////////////////////////////////////////////
 
 // bookmark
 BrowserPageActions.bookmark = {
   onShowingInPanel(buttonNode) {
     // Update the button label via the bookmark observer.
     BookmarkingUI.updateBookmarkPageMenuItem();
@@ -703,16 +754,17 @@ BrowserPageActions.copyURL = {
     BrowserPageActions.takeNodeAttributeFromPanel(buttonNode, "title");
   },
 
   onCommand(event, buttonNode) {
     BrowserPageActions.panelNode.hidePopup();
     Cc["@mozilla.org/widget/clipboardhelper;1"]
       .getService(Ci.nsIClipboardHelper)
       .copyString(gURLBar.makeURIReadable(gBrowser.selectedBrowser.currentURI).displaySpec);
+    BrowserPageActionFeedback.show("copyURL", event);
   },
 };
 
 // email link
 BrowserPageActions.emailLink = {
   onPlacedInPanel(buttonNode) {
     BrowserPageActions.takeNodeAttributeFromPanel(buttonNode, "title");
   },
@@ -761,16 +813,19 @@ BrowserPageActions.sendToDevice = {
         return document.createElement("toolbarseparator");
       }
       let item = document.createElement("toolbarbutton");
       item.classList.add("pageAction-sendToDevice-device", "subviewbutton");
       if (clientId) {
         item.classList.add("subviewbutton-iconic");
       }
       item.setAttribute("tooltiptext", name);
+      item.addEventListener("command", event => {
+        BrowserPageActionFeedback.show("sendToDevice", event);
+      });
       return item;
     });
 
     bodyNode.removeAttribute("state");
     // In the first ~10 sec after startup, Sync may not be loaded and the list
     // of devices will be empty.
     if (gSync.syncConfiguredAndLoading) {
       bodyNode.setAttribute("state", "notready");
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -439,16 +439,31 @@
         <panelview id="pageActionPanelMainView"
                    context="pageActionPanelContextMenu"
                    oncontextmenu="BrowserPageActions.onContextMenu(event);"
                    class="PanelUI-subView">
           <vbox class="panel-subview-body"/>
         </panelview>
       </photonpanelmultiview>
     </panel>
+    <panel id="pageActionFeedback"
+           role="alert"
+           type="arrow"
+           hidden="true"
+           flip="slide"
+           position="bottomcenter topright"
+           tabspecific="true"
+           noautofocus="true"
+           copyURLFeedback="&copyURLFeedback.label;"
+           sendToDeviceFeedback="&sendToDeviceFeedback.label;">
+      <hbox id="pageActionFeedbackAnimatableBox">
+        <image id="pageActionFeedbackAnimatableImage"/>
+      </hbox>
+      <label id="pageActionFeedbackMessage"/>
+    </panel>
 
     <menupopup id="pageActionPanelContextMenu"
                onpopupshowing="BrowserPageActions.onContextMenuShowing(event, this);">
       <menuitem id="pageActionPanelContextMenu-toggleUrlbar"
                 add-label="&pageAction.addToUrlbar.label;"
                 remove-label="&pageAction.removeFromUrlbar.label;"
                 label="&pageAction.addToUrlbar.label;"
                 oncommand="BrowserPageActions.toggleShownInUrlbarForContextAction();"/>
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -41,16 +41,17 @@ can reach it easily. -->
 <!ENTITY  unpinTab.label                     "Unpin Tab">
 <!ENTITY  unpinTab.accesskey                 "b">
 <!ENTITY  sendTabToDevice.label              "Send Tab to Device">
 <!ENTITY  sendTabToDevice.accesskey          "D">
 <!ENTITY  sendPageToDevice.label             "Send Page to Device">
 <!ENTITY  sendPageToDevice.accesskey         "D">
 <!ENTITY  sendLinkToDevice.label             "Send Link to Device">
 <!ENTITY  sendLinkToDevice.accesskey         "D">
+<!ENTITY  sendToDeviceFeedback.label         "Sent!">
 <!ENTITY  moveToNewWindow.label              "Move to New Window">
 <!ENTITY  moveToNewWindow.accesskey          "W">
 <!ENTITY  bookmarkAllTabs.label              "Bookmark All Tabs…">
 <!ENTITY  bookmarkAllTabs.accesskey          "T">
 <!ENTITY  undoCloseTab.label                 "Undo Close Tab">
 <!ENTITY  undoCloseTab.accesskey             "U">
 <!ENTITY  closeTab.label                     "Close Tab">
 <!ENTITY  closeTab.accesskey                 "c">
@@ -547,16 +548,17 @@ These should match what Safari and other
 <!ENTITY setDesktopBackgroundCmd.label      "Set As Desktop Background…">
 <!ENTITY setDesktopBackgroundCmd.accesskey  "S">
 <!ENTITY bookmarkPageCmd2.label       "Bookmark This Page">
 <!ENTITY bookmarkThisLinkCmd.label      "Bookmark This Link">
 <!ENTITY bookmarkThisLinkCmd.accesskey  "L">
 <!ENTITY bookmarkThisFrameCmd.label      "Bookmark This Frame">
 <!ENTITY bookmarkThisFrameCmd.accesskey  "m">
 <!ENTITY copyURLCmd.label             "Copy URL">
+<!ENTITY copyURLFeedback.label        "Copied!">
 <!ENTITY emailPageCmd.label           "Email Link…">
 <!ENTITY emailPageCmd.accesskey       "E">
 <!ENTITY savePageCmd.label            "Save Page As…">
 <!ENTITY savePageCmd.accesskey        "A">
 <!-- alternate for content area context menu -->
 <!ENTITY savePageCmd.accesskey2       "P">
 <!ENTITY savePageCmd.commandkey       "s">
 <!ENTITY saveFrameCmd.label           "Save Frame As…">
--- a/browser/themes/linux/customizableui/panelUI.css
+++ b/browser/themes/linux/customizableui/panelUI.css
@@ -84,16 +84,26 @@ menu.subviewbutton > .menu-right:-moz-lo
   margin-top: 1px !important;
   margin-bottom: 2px !important;
 }
 
 .subviewradio > .radio-label-box {
   -moz-appearance: none;
 }
 
+/*
+ * #pageActionFeedbackAnimatableImage is wider than the panel, and due to a
+ * bug in panels on Linux, a box-shadow appears where the image would be if
+ * overflow:hidden wasn't applied. Disabling the box-shadow for this panel on
+ * Linux works around this issue. This bug is on file as 1394575.
+ */
+#pageActionFeedback > .panel-arrowcontainer > .panel-arrowcontent {
+  box-shadow: none;
+}
+
 /* START photon adjustments */
 
 photonpanelmultiview .subviewbutton > .toolbarbutton-text,
 photonpanelmultiview .subviewbutton > .toolbarbutton-icon,
 photonpanelmultiview .panel-banner-item > .toolbarbutton-multiline-text {
   margin: 0;
 }
 
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -305,16 +305,92 @@ panel[photon] > .panel-arrowcontainer > 
   max-width: @menuPanelWidth@;
 }
 
 #BMB_bookmarksPopup,
 .panel-mainview:not([panelid="PanelUI-popup"]) {
   max-width: @standaloneSubviewWidth@;
 }
 
+#pageActionFeedback > .panel-arrowcontainer > .panel-arrowbox {
+  /* Don't display the arrow but keep the popup at the same vertical
+     offset as other arrow panels. */
+  visibility: hidden;
+}
+
+#pageActionFeedback > .panel-arrowcontainer > .panel-arrowcontent {
+  background-color: #058b00;
+  background-image: none;
+  border-radius: 2px;
+  color: #fff;
+  font-weight: 400;
+  font-size: 1.1rem;
+  -moz-box-align: center;
+  padding: 6px 10px;
+}
+
+#pageActionFeedbackAnimatableBox {
+  position: relative;
+  overflow: hidden;
+  width: 14px;
+  height: 14px;
+}
+
+#pageActionFeedbackAnimatableBox[animate] > #pageActionFeedbackAnimatableImage {
+  position: absolute;
+  background-image: url(chrome://browser/skin/check-animation.svg);
+  background-repeat: no-repeat;
+  min-width: 266px;
+  max-width: 266px;
+  min-height: 14px;
+  max-height: 14px;
+  animation-name: page-action-feedback-animation;
+  animation-duration: 300ms;
+  animation-delay: 60ms;
+  animation-fill-mode: forwards;
+  animation-timing-function: steps(18);
+}
+
+#pageActionFeedbackAnimatableBox[animate] > #pageActionFeedbackAnimatableImage:-moz-locale-dir(rtl) {
+  animation-name: page-action-feedback-animation-rtl;
+  transform: translateX(252px);
+}
+
+@keyframes page-action-feedback-animation {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-252px);
+  }
+}
+
+@keyframes page-action-feedback-animation-rtl {
+  from {
+    transform: translateX(252px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+#pageActionFeedbackMessage {
+  margin-inline-start: 7px;
+  margin-inline-end: 0;
+  transform: scale(.8);
+  opacity: 0;
+  transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18),
+              opacity 60ms linear;
+}
+
+#pageActionFeedbackAnimatableBox[animate] + #pageActionFeedbackMessage {
+  transform: scale(1);
+  opacity: 1;
+}
+
 /* Give WebExtension stand-alone panels extra width for Chrome compatibility */
 .cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview {
   max-width: 800px;
 }
 
 .cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
 }
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/check-animation.svg
@@ -0,0 +1,149 @@
+<!-- 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 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>
+    </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)"/>
+  </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>
+    </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)"/>
+  </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>
+    </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)"/>
+  </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>
+    </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)"/>
+  </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>
+    </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)"/>
+  </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>
+    </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)"/>
+  </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>
+    </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)"/>
+  </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>
+    </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)"/>
+  </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>
+    </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)"/>
+  </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)"/>
+  </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)"/>
+  </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)"/>
+  </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)"/>
+  </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)"/>
+  </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)"/>
+  </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)"/>
+  </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)"/>
+  </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)"/>
+  </svg>
+</svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -127,16 +127,17 @@
   skin/classic/browser/bookmark.svg                   (../shared/icons/bookmark.svg)
   skin/classic/browser/bookmark-animation.svg         (../shared/icons/bookmark-animation.svg)
   skin/classic/browser/bookmark-hollow.svg            (../shared/icons/bookmark-hollow.svg)
   skin/classic/browser/bookmark-star-on-tray.svg      (../shared/icons/bookmark-star-on-tray.svg)
   skin/classic/browser/characterEncoding.svg          (../shared/icons/characterEncoding.svg)
   skin/classic/browser/chevron.svg                    (../shared/icons/chevron.svg)
   skin/classic/browser/chevron-animation.svg          (../shared/icons/chevron-animation.svg)
   skin/classic/browser/check.svg                      (../shared/icons/check.svg)
+  skin/classic/browser/check-animation.svg            (../shared/icons/check-animation.svg)
   skin/classic/browser/containers.svg                 (../shared/icons/containers.svg)
   skin/classic/browser/customize.svg                  (../shared/icons/customize.svg)
   skin/classic/browser/developer.svg                  (../shared/icons/developer.svg)
   skin/classic/browser/device-mobile.svg              (../shared/icons/device-mobile.svg)
   skin/classic/browser/device-desktop.svg             (../shared/icons/device-desktop.svg)
   skin/classic/browser/edit-copy.svg                  (../shared/icons/edit-copy.svg)
   skin/classic/browser/edit-cut.svg                   (../shared/icons/edit-cut.svg)
   skin/classic/browser/edit-paste.svg                 (../shared/icons/edit-paste.svg)