Bug 1387042 - Add a toast notification that will be shown when the Copy Link or Send to Device page actions are used. r=adw,sfoster

MozReview-Commit-ID: CZZnLz84T4h --HG-- extra : rebase_source : bee7806ee6886dbbeefc7bc7ed39cc075fca1590
2017-08-24 16:44:11 -04:00 · 2017-08-24 16:44:11 -04:00 · b67ac2b7fd
--- a/browser/base/content/browser-pageActions.js
+++ b/browser/base/content/browser-pageActions.js
@ -674,6 +674,57 @@ var BrowserPageActions = {
  },
 };

+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 //////////////////////////////////////////////////////

@ -708,6 +759,7 @@ BrowserPageActions.copyURL = {
    Cc["@mozilla.org/widget/clipboardhelper;1"]
      .getService(Ci.nsIClipboardHelper)
      .copyString(gURLBar.makeURIReadable(gBrowser.selectedBrowser.currentURI).displaySpec);
+    BrowserPageActionFeedback.show("copyURL", event);
  },
 };

@ -766,6 +818,9 @@ BrowserPageActions.sendToDevice = {
        item.classList.add("subviewbutton-iconic");
      }
      item.setAttribute("tooltiptext", name);
+      item.addEventListener("command", event => {
+        BrowserPageActionFeedback.show("sendToDevice", event);
+      });
      return item;
    });

--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@ -448,6 +448,21 @@
        </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);">
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@ -46,6 +46,7 @@ can reach it easily. -->
 <!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…">
@ -549,6 +550,7 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!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…">
--- a/browser/themes/linux/customizableui/panelUI.css
+++ b/browser/themes/linux/customizableui/panelUI.css
@ -89,6 +89,16 @@ menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
  -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,
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@ -295,6 +295,82 @@ panel[photon] > .panel-arrowcontainer > .panel-arrowcontent {
  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;
--- a/browser/themes/shared/icons/check-animation.svg
+++ 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
@ -132,6 +132,7 @@
  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)