Bug 1561345 - Create UI elements for What's New button and panel r=andreio,fluent-reviewers,flod
authorRicky Rosario <rickyrosario@gmail.com>
Thu, 04 Jul 2019 08:59:09 +0000
changeset 544339 975200b42f28cad8be537ee8cb2721bb9817f0c0
parent 544338 b50ec6b229e5aa8c882aa65a265d27866a3ad042
child 544340 d0dda220d0d270babd2026b7f88ebd368fef4fa1
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersandreio, fluent-reviewers, flod
bugs1561345
milestone69.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 1561345 - Create UI elements for What's New button and panel r=andreio,fluent-reviewers,flod Differential Revision: https://phabricator.services.mozilla.com/D36548
browser/base/content/browser.xhtml
browser/components/customizableui/content/panelUI.inc.xul
browser/locales/en-US/browser/newtab/asrouter.ftl
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/icons/whatsnew.svg
browser/themes/shared/jar.inc.mn
browser/themes/shared/menupanel.inc.css
browser/themes/shared/toolbarbutton-icons.inc.css
browser/themes/shared/toolbarbuttons.inc.css
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -1087,16 +1087,23 @@
                      tooltiptext="&navbarOverflow.label;">
         <box class="toolbarbutton-animatable-box">
           <image class="toolbarbutton-animatable-image"/>
         </box>
       </toolbarbutton>
 
       <toolbaritem id="PanelUI-button"
                    removable="false">
+       <toolbarbutton id="whats-new-menu-button"
+                      class="toolbarbutton-1"
+                      hidden="true"
+                      badged="true"
+                      consumeanchor="PanelUI-button"
+                      onmousedown="PanelUI.showSubView('PanelUI-whatsNew', this, event);"
+                      onkeypress="PanelUI.showSubView('PanelUI-whatsNew', this, event);"/>
         <toolbarbutton id="PanelUI-menu-button"
                        class="toolbarbutton-1"
                        badged="true"
                        consumeanchor="PanelUI-button"
                        label="&brandShortName;"
                        tooltiptext="&appmenu.tooltip;"/>
       </toolbaritem>
 
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -394,16 +394,21 @@
                        label="&moreMenu.label;"
                        closemenu="none"
                        oncommand="PanelUI.showSubView('appMenu-moreView', this)"/>
         <toolbarbutton id="appMenu-developer-button"
                        class="subviewbutton subviewbutton-nav"
                        label="&webDeveloperMenu.label;"
                        closemenu="none"
                        oncommand="PanelUI.showSubView('PanelUI-developer', this)"/>
+       <toolbarbutton id="appMenu-whatsnew-button"
+                      class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                      hidden="true"
+                      closemenu="none"
+                      oncommand="PanelUI.showSubView('PanelUI-whatsNew', this)"/>
         <toolbarbutton id="appMenu-help-button"
                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
                        label="&appMenuHelp.label;"
                        closemenu="none"
                        oncommand="PanelUI.showSubView('PanelUI-helpView', this)"/>
 #ifndef XP_MACOSX
         <toolbarseparator/>
         <toolbarbutton id="appMenu-quit-button"
@@ -796,16 +801,33 @@
         </toolbarbutton>
         <toolbarbutton id="panelMenu_viewBookmarksToolbar"
                        class="subviewbutton subviewbutton-iconic"
                        label-show="&viewBookmarksToolbar.label;"
                        label-hide="&hideBookmarksToolbar.label;"
                        oncommand="BookmarkingUI.toggleBookmarksToolbar();"/>
       </vbox>
     </panelview>
+
+    <panelview id="PanelUI-whatsNew" class="PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <box id="PanelUI-whatsNew-title" class="panel-header">
+          <label/>
+        </box>
+        <toolbaritem id="PanelUI-whatsNew-content"
+                     orient="vertical"
+                     smoothscroll="false"
+                     flatList="true"
+                     tooltip="bhTooltip">
+          <html:div id="PanelUI-whatsNew-message-container">
+            <!-- What's New messages will be rendered here -->
+          </html:div>
+        </toolbaritem>
+      </vbox>
+    </panelview>
   </panelmultiview>
 </panel>
 
 <panel id="downloads-button-autohide-panel"
        role="group"
        type="arrow"
        hidden="true"
        onpopupshown="gCustomizeMode._downloadPanelAutoHideTimeout = setTimeout(() => event.target.hidePopup(), 4000);"
--- a/browser/locales/en-US/browser/newtab/asrouter.ftl
+++ b/browser/locales/en-US/browser/newtab/asrouter.ftl
@@ -51,23 +51,33 @@ cfr-doorhanger-extension-total-users =
   { $total ->
       [one] { $total } user
      *[other] { $total } users
   }
 
 cfr-doorhanger-pintab-description = Get easy access to your most-used sites. Keep sites open in a tab (even when you restart).
 
 ## These messages are steps on how to use the feature and are shown together.
+
 cfr-doorhanger-pintab-step1 = <b>Right-click</b> on the tab you want to pin.
 cfr-doorhanger-pintab-step2 = Select <b>Pin Tab</b> from the menu.
 cfr-doorhanger-pintab-step3 = If the site has an update you’ll see a blue dot on your pinned tab.
 
 cfr-doorhanger-pintab-animation-pause = Pause
 cfr-doorhanger-pintab-animation-resume = Resume
 
 
 ## Firefox Accounts Message
+
 cfr-doorhanger-bookmark-fxa-header = Sync your bookmarks everywhere.
 cfr-doorhanger-bookmark-fxa-body = Great find! Now don’t be left without this bookmark on your mobile devices. Get Started with a { -fxaccount-brand-name }.
 cfr-doorhanger-bookmark-fxa-link-text = Sync bookmarks now…
 cfr-doorhanger-bookmark-fxa-close-btn-tooltip =
   .aria-label = Close button
   .title = Close
+
+## What's New toolbar button and panel
+
+cfr-whatsnew-button =
+  .label = What’s New
+  .tooltiptext = What’s New
+
+cfr-whatsnew-panel-header = What’s New
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1781,8 +1781,30 @@ toolbarpaletteitem[place="menu-panel"] >
 
 .subviewbutton.download:-moz-any([canShow],[canRetry]) > .action-button@buttonStateHover@ {
   background-color: var(--arrowpanel-dimmed-further);
 }
 
 .subviewbutton.download:-moz-any([canShow],[canRetry]) > .action-button@buttonStateActive@ {
   background-color: var(--arrowpanel-dimmed-even-further);
 }
+
+/* What's New panel */
+#customizationui-widget-multiview #PanelUI-whatsNew {
+  min-width: @menuPanelWidth@;
+  max-width: @menuPanelWidth@;
+}
+
+#PanelUI-whatsNew-content {
+  padding: 0 10px;
+}
+
+#customizationui-widget-multiview #PanelUI-whatsNew-content {
+  height: 586px;
+}
+
+#PanelUI-whatsNew-title {
+  display: none;
+}
+
+#customizationui-widget-multiview #PanelUI-whatsNew-title {
+  display: flex;
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/whatsnew.svg
@@ -0,0 +1,10 @@
+<!-- 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="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M2 13.76A1.23 1.23 0 0 0 3.24 15H7V9H2z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M9 9v6h3.76A1.23 1.23 0 0 0 14 13.76V9H9z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M1 5v3h6V4H2a1 1 0 0 0-1 1z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 4H9v4h6V5a1 1 0 0 0-1-1z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M10.05.41A1.34 1.34 0 0 0 8 1a1.35 1.35 0 0 0-2-.59C5.2 1.08 4.91 2.48 8 4c3.09-1.52 2.8-2.92 2.05-3.59z"/>
+</svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -204,16 +204,17 @@
   skin/classic/browser/sort.svg                       (../shared/icons/sort.svg)
 #endif
   skin/classic/browser/stop.svg                       (../shared/icons/stop.svg)
   skin/classic/browser/stop-to-reload.svg             (../shared/icons/stop-to-reload.svg)
   skin/classic/browser/sync.svg                       (../shared/icons/sync.svg)
   skin/classic/browser/tab.svg                        (../shared/icons/tab.svg)
   skin/classic/browser/undo.svg                       (../shared/icons/undo.svg)
   skin/classic/browser/unpin-tab.svg                  (../shared/icons/unpin-tab.svg)
+  skin/classic/browser/whatsnew.svg                   (../shared/icons/whatsnew.svg)
   skin/classic/browser/window.svg                     (../shared/icons/window.svg)
   skin/classic/browser/zoom-in.svg                    (../shared/icons/zoom-in.svg)
   skin/classic/browser/zoom-out.svg                   (../shared/icons/zoom-out.svg)
 
 
   skin/classic/browser/search-engine-placeholder.png           (../shared/search/search-engine-placeholder.png)
   skin/classic/browser/search-engine-placeholder@2x.png        (../shared/search/search-engine-placeholder@2x.png)
   skin/classic/browser/search-indicator-badge-add.svg          (../shared/search/search-indicator-badge-add.svg)
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -36,16 +36,20 @@
 #panelMenu_searchBookmarks {
   list-style-image: url(chrome://browser/skin/search-glass.svg);
 }
 
 #appMenu-taskmanager-button {
   list-style-image: url(chrome://global/skin/icons/performance.svg);
 }
 
+#appMenu-whatsnew-button {
+  list-style-image: url(chrome://browser/skin/whatsnew.svg);
+}
+
 #appMenu-help-button {
   list-style-image: url(chrome://global/skin/icons/help.svg);
 }
 
 #appMenu-cut-button {
   list-style-image: url(chrome://browser/skin/edit-cut.svg);
 }
 
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -590,8 +590,12 @@ toolbarbutton.bookmark-item {
 .bookmark-item[query][dayContainer] {
   list-style-image: url("chrome://browser/skin/places/history.svg");
   -moz-image-region: auto;
 }
 
 .bookmark-item[query][hostContainer] {
   list-style-image: url("chrome://browser/skin/places/folder.svg");
 }
+
+#whats-new-menu-button {
+  list-style-image: url("chrome://browser/skin/whatsnew.svg");
+}
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -100,18 +100,21 @@ toolbar[brighttext] {
 
 toolbar .toolbarbutton-1 {
   -moz-appearance: none;
   margin: 0;
   padding: 0 var(--toolbarbutton-outer-padding);
   -moz-box-pack: center;
 }
 
+:root:not([uidensity=compact]) #PanelUI-button {
+  padding-inline-start: 5px;
+}
+
 :root:not([uidensity=compact]) #PanelUI-menu-button {
-  padding-inline-start: 5px;
   padding-inline-end: 5px;
 }
 
 toolbar .toolbarbutton-1 > menupopup {
   margin-top: -3px;
 }
 
 .findbar-button,