Bug 1353360 - implement Photon design spec for panel menus. r?Gijs draft
authorMike de Boer <mdeboer@mozilla.com>
Fri, 05 May 2017 17:22:30 +0200
changeset 573339 838f122bdc6b9b1ae9f5467d0ee6d1beece57ff5
parent 573338 c1823ab8959b7367ac3031d9e1c3f232bc08b255
child 627264 8bef6cb223f4726f9ed744c0439d3b35fe75166a
push id57351
push usermdeboer@mozilla.com
push dateFri, 05 May 2017 15:25:45 +0000
reviewersGijs
bugs1353360
milestone55.0a1
Bug 1353360 - implement Photon design spec for panel menus. r?Gijs MozReview-Commit-ID: vwAIPeuoLu
browser/components/customizableui/PanelMultiView.jsm
browser/themes/osx/customizableui/panelUI.css
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/jar.inc.mn
browser/themes/shared/menu-icons/back-small.svg
browser/themes/shared/menu-icons/back.svg
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -476,16 +476,17 @@ this.PanelMultiView = class {
 
         // Set the transition style and listen for its end to clean up and
         // make sure the box sizing becomes dynamic again.
         // Somehow, putting these properties in PanelUI.css doesn't work for
         // newly shown nodes in a XUL parent node.
         nodeToAnimate.style.transition = "transform ease-" + (reverse ? "in" : "out") +
           " var(--panelui-subview-transition-duration)";
         nodeToAnimate.style.willChange = "transform";
+        nodeToAnimate.style.borderInlineStart = "1px solid var(--panel-separator-color)";
 
         // Wait until after the first paint to ensure setting 'current=true'
         // has taken full effect; once both views are visible, we want to
         // correctly measure rects using `dwu.getBoundsWithoutFlushing`.
         window.addEventListener("MozAfterPaint", () => {
           let viewRect = viewNode.__lastKnownBoundingRect;
           if (!viewRect) {
             viewRect = dwu.getBoundsWithoutFlushing(viewNode);
@@ -529,16 +530,17 @@ this.PanelMultiView = class {
             onTransitionEnd();
             this._transitioning = false;
 
             // Take another breather, just like before, to wait for the 'current'
             // attribute removal to take effect. This prevents a flicker.
             // The cleanup we do doesn't affect the display anymore, so we're not
             // too fussed about the timing here.
             window.addEventListener("MozAfterPaint", () => {
+              nodeToAnimate.style.removeProperty("border-inline-start");
               nodeToAnimate.style.removeProperty("transition");
               nodeToAnimate.style.removeProperty("transform");
               nodeToAnimate.style.removeProperty("width");
 
               if (!reverse)
                 viewNode.style.removeProperty("margin-inline-start");
               if (aAnchor)
                 aAnchor.removeAttribute("open");
--- a/browser/themes/osx/customizableui/panelUI.css
+++ b/browser/themes/osx/customizableui/panelUI.css
@@ -17,16 +17,25 @@
 .subviewbutton > .toolbarbutton-text {
   margin: 2px 0 !important; /* !important for overriding toolbarbutton.css */
 }
 
 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .bookmark-item) > .toolbarbutton-text {
   margin: 2px 6px !important; /* !important for overriding toolbarbutton.css */
 }
 
+/* START photon adjustments */
+
+photonpanelmultiview .subviewbutton > .toolbarbutton-text,
+photonpanelmultiview .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .bookmark-item) > .toolbarbutton-text {
+  margin: 0 !important;  /* !important for overriding the rules above. */
+}
+
+/* END photon adjustments */
+
 .restoreallitem > .toolbarbutton-icon {
   display: none;
 }
 
 .subviewbutton {
   padding-inline-start: 18px;
 }
 
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -324,16 +324,22 @@ panelview:not([mainview]) .toolbarbutton
 }
 
 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 4px 0;
 }
 
 /* START photonpanelview adjustments */
 
+#appMenu-popup > .panel-arrowcontainer > .panel-arrowcontent {
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+}
+
 photonpanelmultiview panelview {
   background: var(--arrowpanel-background);
 }
 
 photonpanelmultiview .panel-subview-body {
   /*XXXmikedeboer this flex is unnecessary, so I unset it for our case. It might
                   break other panels, though, so I refrain from removing it above. */
   -moz-box-flex: unset;
@@ -1105,31 +1111,63 @@ panelview .toolbarbutton-1,
 }
 
 .PanelUI-subView .subviewbutton[shortcut]::after {
   content: attr(shortcut);
   float: right;
   color: GrayText;
 }
 
-.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
+.PanelUI-subView .subviewbutton-nav::after {
+  -moz-context-properties: fill;
+  content: url(chrome://browser/skin/menu-icons/back-small.svg);
+  fill: GrayText;
+  float: right;
+}
+
+.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(ltr)::after {
+  transform: scaleX(-1);
+}
+
+.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after,
+.PanelUI-subView .subviewbutton-nav::after {
   margin-inline-start: 10px;
 }
 
 /* This is a <label> but it should fit in with the menu font- and colorwise. */
 #PanelUI-characterEncodingView-autodetect-label {
   font: menu;
   color: inherit;
 }
 
 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
   margin-left: 4px;
   margin-right: 4px;
 }
 
+/* START photon adjustments */
+
+photonpanelmultiview .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
+  border-radius: 0;
+  border-width: 0;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 4px 12px;
+}
+
+photonpanelmultiview .subviewbutton-iconic > .toolbarbutton-text {
+  padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
+}
+
+photonpanelmultiview .cui-widget-panelview .panel-subview-footer {
+  font-size: 1.2rem;
+}
+
+/* END photon adjustments */
+
 panelview .toolbarbutton-1,
 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
 .widget-overflow-list > toolbaritem:not(:first-child) {
   margin-top: 6px;
 }
 
 panelview .toolbarbutton-1@buttonStateHover@,
 toolbarbutton.subviewbutton@buttonStateHover@,
@@ -1815,8 +1853,49 @@ menuitem[checked="true"].subviewbutton >
   #PanelUI-panic-actionlist-newwindow {
     background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 128, 32, 96);
   }
 }
 
 .subviewbutton-iconic > .toolbarbutton-text {
   padding-inline-start: 5px;
 }
+
+/* START photon adjustments */
+
+.panel-header {
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  height: 40px; /* fixed item height to prevent flex sizing; height + 2*4px padding */
+}
+
+.panel-header > label {
+  flex: auto;
+  font-size: 13px;
+  font-weight: 500;
+  margin: 0;
+  /* Add the size of the back button to center properly. */
+  margin-inline-end: 32px;
+  text-align: center;
+}
+
+photonpanelmultiview .cui-widget-panelview .panel-header > .subviewbutton-back {
+  -moz-context-properties: fill;
+  fill: var(--arrowpanel-color);
+  list-style-image: url(chrome://browser/skin/menu-icons/back.svg);
+  padding: 8px;
+}
+
+.panel-header > .subviewbutton-back:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.panel-header > .subviewbutton-back > .toolbarbutton-text {
+  display: none;
+}
+
+photonpanelmultiview .PanelUI-subView toolbarseparator {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+/* END photon adjustments */
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -142,11 +142,13 @@
   skin/classic/browser/privatebrowsing/tracking-protection-off.svg (../shared/privatebrowsing/tracking-protection-off.svg)
   skin/classic/browser/privatebrowsing/tracking-protection.svg (../shared/privatebrowsing/tracking-protection.svg)
   skin/classic/browser/compacttheme/loading-inverted.png (../shared/compacttheme/loading-inverted.png)
   skin/classic/browser/compacttheme/loading-inverted@2x.png (../shared/compacttheme/loading-inverted@2x.png)
   skin/classic/browser/compacttheme/urlbar-history-dropmarker.svg (../shared/compacttheme/urlbar-history-dropmarker.svg)
   skin/classic/browser/urlbar-star.svg                         (../shared/urlbar-star.svg)
   skin/classic/browser/urlbar-tab.svg                          (../shared/urlbar-tab.svg)
   skin/classic/browser/page-action.svg                         (../shared/page-action.svg)
+  skin/classic/browser/menu-icons/back.svg                     (../shared/menu-icons/back.svg)
+  skin/classic/browser/menu-icons/back-small.svg               (../shared/menu-icons/back-small.svg)
   skin/classic/browser/menu-icons/new-window.svg               (../shared/menu-icons/new-window.svg)
   skin/classic/browser/menu-icons/print.svg                    (../shared/menu-icons/print.svg)
   skin/classic/browser/menu-icons/private-window.svg           (../shared/menu-icons/private-window.svg)
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/menu-icons/back-small.svg
@@ -0,0 +1,6 @@
+<!-- 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="12" height="12">
+  <path fill="context-fill" d="M 4.748 6 L 7.966 2.781 C 8.367 2.365 8.169 1.672 7.609 1.532 C 7.358 1.47 7.092 1.54 6.906 1.72 L 3.158 5.47 C 2.865 5.762 2.865 6.237 3.158 6.53 L 6.906 10.279 C 7.321 10.68 8.015 10.481 8.155 9.921 C 8.217 9.67 8.146 9.405 7.966 9.219 Z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/menu-icons/back.svg
@@ -0,0 +1,6 @@
+<!-- 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">
+  <path fill="context-fill" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"/>
+</svg>