Bug 1528955 - Tab successfully pinned notification r=dao
authorRicky Rosario <rickyrosario@gmail.com>
Wed, 06 Mar 2019 15:34:34 +0000
changeset 520535 b0eb4c7230e4ea766b6997c95c1a84592cfc4d3a
parent 520534 af9d2cb592c57c93a00af43061cb1b1d4e30ac40
child 520536 d3a4d053ea82a628f822d15bc20162236a25f69d
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1528955
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1528955 - Tab successfully pinned notification r=dao MozReview-Commit-ID: IUKhiRvDsqZ Differential Revision: https://phabricator.services.mozilla.com/D21393
browser/base/content/browser.js
browser/base/content/browser.xul
browser/components/newtab/lib/ASRouter.jsm
browser/locales/en-US/chrome/browser/browser.properties
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -8273,44 +8273,57 @@ var ConfirmationHint = {
    *         The anchor for the panel.
    * @param  messageId (string, required)
    *         For getting the message string from browser.properties:
    *         confirmationHint.<messageId>.label
    * @param  options (object, optional)
    *         An object with the following optional properties:
    *         - event (DOM event): The event that triggered the feedback.
    *         - hideArrow (boolean): Optionally hide the arrow.
+   *         - showDescription (boolean): show description text (confirmationHint.<messageId>.description)
+   *
    */
   show(anchor, messageId, options = {}) {
     this._message.textContent =
-      gBrowserBundle.GetStringFromName("confirmationHint." + messageId + ".label");
+      gBrowserBundle.GetStringFromName(`confirmationHint.${messageId}.label`);
+
+    if (options.showDescription) {
+      this._description.textContent =
+          gBrowserBundle.GetStringFromName(`confirmationHint.${messageId}.description`);
+      this._description.hidden = false;
+      this._panel.classList.add("with-description");
+    } else {
+      this._description.hidden = true;
+      this._panel.classList.remove("with-description");
+    }
 
     if (options.hideArrow) {
       this._panel.setAttribute("hidearrow", "true");
     }
 
     this._panel.addEventListener("popupshown", () => {
       this._animationBox.setAttribute("animate", "true");
 
       // The timeout value used here allows the panel to stay open for
-      // X second after the text transition (duration=120ms) has finished.
-      const DURATION = 1500;
+      // 1.5s second after the text transition (duration=120ms) has finished.
+      // If there is a description, we show for 4s and there is no text transition.
+      const DURATION = options.showDescription ? 4000 : 1500 + 120;
       setTimeout(() => {
         this._panel.hidePopup(true);
-      }, DURATION + 120);
+      }, DURATION);
     }, {once: true});
 
     this._panel.addEventListener("popuphidden", () => {
       this._panel.removeAttribute("hidearrow");
       this._animationBox.removeAttribute("animate");
     }, {once: true});
 
     this._panel.hidden = false;
     this._panel.openPopup(anchor, {
-      position: "bottomcenter topright",
+      position: "bottomcenter topleft",
       triggerEvent: options.event,
     });
   },
 
   get _panel() {
     delete this._panel;
     return this._panel = document.getElementById("confirmation-hint");
   },
@@ -8319,9 +8332,14 @@ var ConfirmationHint = {
     delete this._animationBox;
     return this._animationBox = document.getElementById("confirmation-hint-checkmark-animation-container");
   },
 
   get _message() {
     delete this._message;
     return this._message = document.getElementById("confirmation-hint-message");
   },
+
+  get _description() {
+    delete this._description;
+    return this._description = document.getElementById("confirmation-hint-description");
+  },
 };
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -576,19 +576,22 @@ xmlns="http://www.w3.org/1999/xhtml"
            role="alert"
            type="arrow"
            hidden="true"
            flip="slide"
            position="bottomcenter topright"
            tabspecific="true"
            noautofocus="true">
       <hbox id="confirmation-hint-checkmark-animation-container">
-        <image id="confirmation-hint-checkmark-image"/>
+       <image id="confirmation-hint-checkmark-image"/>
       </hbox>
-      <label id="confirmation-hint-message"/>
+      <vbox>
+       <label id="confirmation-hint-message"/>
+       <label id="confirmation-hint-description"/>
+      </vbox>
     </panel>
 
     <menupopup id="pageActionContextMenu"
                onpopupshowing="BrowserPageActions.onContextMenuShowing(event, this);">
       <menuitem class="pageActionContextMenuItem builtInUnpinned"
                 label="&pageAction.addToUrlbar.label;"
                 oncommand="BrowserPageActions.togglePinningForContextAction();"/>
       <menuitem class="pageActionContextMenuItem builtInPinned"
--- a/browser/components/newtab/lib/ASRouter.jsm
+++ b/browser/components/newtab/lib/ASRouter.jsm
@@ -1041,17 +1041,19 @@ class _ASRouter {
       case ra.OPEN_APPLICATIONS_MENU:
         UITour.showMenu(target.browser.ownerGlobal, action.data.args);
         break;
       case ra.INSTALL_ADDON_FROM_URL:
         this._updateOnboardingState();
         await MessageLoaderUtils.installAddonFromURL(target.browser, action.data.url);
         break;
       case ra.PIN_CURRENT_TAB:
-        target.browser.ownerGlobal.gBrowser.pinTab(target.browser.ownerGlobal.gBrowser.selectedTab);
+        let tab = target.browser.ownerGlobal.gBrowser.selectedTab;
+        target.browser.ownerGlobal.gBrowser.pinTab(tab);
+        target.browser.ownerGlobal.ConfirmationHint.show(tab, "pinTab", {showDescription: true});
         break;
       case ra.SHOW_FIREFOX_ACCOUNTS:
         const url = await FxAccounts.config.promiseSignUpURI("snippets");
         // We want to replace the current tab.
         target.browser.ownerGlobal.openLinkIn(url, "current", {
           private: false,
           triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({}),
         });
--- a/browser/locales/en-US/chrome/browser/browser.properties
+++ b/browser/locales/en-US/chrome/browser/browser.properties
@@ -1074,13 +1074,15 @@ storageAccess.description.label = You may want to block %1$S on this site if you don’t recognize or trust it. Learn more about %2$S
 # The value of this string is embedded inside storageAccess.description.label.  See the localization note for storageAccess.description.label.
 storageAccess.description.learnmore = third-party trackers
 
 confirmationHint.sendToDevice.label = Sent!
 confirmationHint.sendToDeviceOffline.label = Queued (offline)
 confirmationHint.copyURL.label = Copied to clipboard!
 confirmationHint.pageBookmarked.label = Saved to Library!
 confirmationHint.addSearchEngine.label = Search engine added!
+confirmationHint.pinTab.label = Pinned!
+confirmationHint.pinTab.description = Right-click the tab to unpin it.
 
 # LOCALIZATION NOTE (livebookmarkMigration.title):
 # Used by the export of user's live bookmarks to an OPML file as a title for the file.
 # %S will be replaced with brandShortName
 livebookmarkMigration.title                      = %S Live Bookmarks
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -245,16 +245,21 @@ panel[photon] > .panel-arrowcontainer > 
 
 #confirmation-hint-checkmark-animation-container {
   position: relative;
   overflow: hidden;
   width: 14px;
   height: 14px;
 }
 
+/* Don't show the checkmark if there is a description */
+#confirmation-hint.with-description #confirmation-hint-checkmark-animation-container  {
+  display: none;
+}
+
 #confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image {
   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;
@@ -286,16 +291,24 @@ panel[photon] > .panel-arrowcontainer > 
   to {
     transform: translateX(0);
   }
 }
 
 #confirmation-hint-message {
   margin-inline-start: 7px;
   margin-inline-end: 0;
+}
+
+#confirmation-hint.with-description #confirmation-hint-message {
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+#confirmation-hint:not(.with-description) #confirmation-hint-message {
   transform: scale(.8);
   opacity: 0;
   transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18),
               opacity 60ms linear;
 }
 
 #confirmation-hint-checkmark-animation-container[animate] + #confirmation-hint-message {
   transform: scale(1);