Bug 1354127 - Add a 'More' toolbar button to the Photon app menu. r?Gijs draft
authorMike de Boer <mdeboer@mozilla.com>
Thu, 11 May 2017 12:34:33 -0400
changeset 576360 bc167ebad5e4d4301dba98a5c93398221fa41541
parent 576245 4c580a771776f77c667fd457e2915568c2fcd0a7
child 576361 7f528fd3e9713a223a44f9ec5efbc6c937bebfba
push id58336
push usermdeboer@mozilla.com
push dateThu, 11 May 2017 17:22:18 +0000
reviewersGijs
bugs1354127
milestone55.0a1
Bug 1354127 - Add a 'More' toolbar button to the Photon app menu. r?Gijs This also improves the styling of checkbox buttons inside the menu and improves support for adopting panelviews into the app menu from another area properly. MozReview-Commit-ID: 1I9CeBx3zrz
browser/components/customizableui/CustomizableWidgets.jsm
browser/components/customizableui/PanelMultiView.jsm
browser/components/customizableui/content/panelUI.inc.xul
browser/components/customizableui/content/panelUI.js
browser/locales/en-US/chrome/browser/browser.dtd
browser/themes/osx/customizableui/panelUI.css
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/components/customizableui/CustomizableWidgets.jsm
+++ b/browser/components/customizableui/CustomizableWidgets.jsm
@@ -1069,16 +1069,19 @@ const CustomizableWidgets = [
           if (aWidgetId != this.id || aDoc != document)
             return;
 
           CustomizableUI.removeListener(listener);
           getPanel().removeEventListener("popupshowing", updateButton);
         }
       };
       CustomizableUI.addListener(listener);
+      this.onInit();
+    },
+    onInit(aNode) {
       if (!this.charsetInfo) {
         this.charsetInfo = CharsetMenu.getData();
       }
     }
   }, {
     id: "email-link-button",
     tooltiptext: "email-link-button.tooltiptext3",
     onCommand(aEvent) {
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -3,16 +3,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 this.EXPORTED_SYMBOLS = ["PanelMultiView"];
 
 const {classes: Cc, interfaces: Ci, utils: Cu} = Components;
 
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "CustomizableWidgets",
+  "resource:///modules/CustomizableWidgets.jsm");
+
 /**
  * Simple implementation of the sliding window pattern; panels are added to a
  * linked list, in-order, and the currently shown panel is remembered using a
  * marker. The marker shifts as navigation between panels is continued, where
  * the panel at index 0 is always the starting point:
  *           ┌────┬────┬────┬────┐
  *           │▓▓▓▓│    │    │    │ Start
  *           └────┴────┴────┴────┘
@@ -349,17 +353,17 @@ this.PanelMultiView = class {
 
         this.node.setAttribute("viewtype", "main");
       }
 
       this._shiftMainView();
     }
   }
 
-  showSubView(aViewId, aAnchor, aPreviousView) {
+  showSubView(aViewId, aAnchor, aPreviousView, aAdopted = false) {
     const {document, window} = this;
     return window.Task.spawn(function*() {
       // Support passing in the node directly.
       let viewNode = typeof aViewId == "string" ? this.node.querySelector("#" + aViewId) : aViewId;
       if (!viewNode) {
         viewNode = document.getElementById(aViewId);
         if (viewNode) {
           if (this.panelViews) {
@@ -378,16 +382,29 @@ this.PanelMultiView = class {
       let playTransition = (!!previousViewNode && previousViewNode != viewNode);
 
       let dwu, previousRect;
       if (playTransition) {
         dwu = this._dwu;
         previousRect = previousViewNode.__lastKnownBoundingRect =
           dwu.getBoundsWithoutFlushing(previousViewNode);
       }
+
+      // Make sure that new panels always have a title set.
+      if (this.panelViews && aAdopted && aAnchor) {
+        if (aAnchor && !viewNode.hasAttribute("title"))
+          viewNode.setAttribute("title", aAnchor.getAttribute("label"));
+        let custWidget = CustomizableWidgets.find(widget => widget.viewId == viewNode.id);
+        viewNode.classList.add("cui-widget-panelview", "PanelUI-subView");
+        if (custWidget) {
+          if (custWidget.onInit)
+            custWidget.onInit(aAnchor);
+          custWidget.onViewShowing({ target: aAnchor });
+        }
+      }
       viewNode.setAttribute("current", true);
 
       // Emit the ViewShowing event so that the widget definition has a chance
       // to lazily populate the subview with things.
       let detail = {
         blockers: new Set(),
         addBlocker(aPromise) {
           this.blockers.add(aPromise);
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -570,12 +570,33 @@
 #endif
                        oncommand="openPreferences()"
                        />
         <toolbarbutton id="appMenu-customize-button"
                        class="subviewbutton subviewbutton-iconic"
                        label="&viewCustomizeToolbar.label;"
                        command="cmd_CustomizeToolbars"
                        />
+        <toolbarseparator/>
+        <toolbarbutton id="appMenu-more-button"
+                       class="subviewbutton subviewbutton-nav"
+                       label="&moreMenu.label;"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('appMenu-moreView', this)"/>
+      </vbox>
+    </panelview>
+    <panelview id="appMenu-moreView" title="&moreMenu.label;" class="cui-widget-panelview PanelUI-subView">
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appMenu-characterencoding-button"
+                       class="subviewbutton subviewbutton-nav"
+                       label="&charsetMenu2.label;"
+                       closemenu="none"
+                       oncommand="PanelUI.showSubView('PanelUI-characterEncodingView', this, null, true)"/>
+        <toolbarbutton id="appMenu-workoffline-button"
+                       class="subviewbutton"
+                       label="&goOfflineCmd.label;"
+                       type="checkbox"
+                       observes="workOfflineMenuitemState"
+                       oncommand="BrowserOffline.toggleOfflineStatus();"/>
       </vbox>
     </panelview>
   </photonpanelmultiview>
 </panel>
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -472,32 +472,32 @@ const PanelUI = {
 
   /**
    * Shows a subview in the panel with a given ID.
    *
    * @param aViewId the ID of the subview to show.
    * @param aAnchor the element that spawned the subview.
    * @param aPlacementArea the CustomizableUI area that aAnchor is in.
    */
-  showSubView: Task.async(function*(aViewId, aAnchor, aPlacementArea) {
+  showSubView: Task.async(function*(aViewId, aAnchor, aPlacementArea, aAdopted = false) {
     this._ensureEventListenersAdded();
     let viewNode = document.getElementById(aViewId);
     if (!viewNode) {
       Cu.reportError("Could not show panel subview with id: " + aViewId);
       return;
     }
 
     if (!aAnchor) {
       Cu.reportError("Expected an anchor when opening subview with id: " + aViewId);
       return;
     }
 
     let container = aAnchor.closest("panelmultiview,photonpanelmultiview");
     if (container) {
-      container.showSubView(aViewId, aAnchor);
+      container.showSubView(aViewId, aAnchor, null, aAdopted);
     } else if (!aAnchor.open) {
       aAnchor.open = true;
 
       let tempPanel = document.createElement("panel");
       tempPanel.setAttribute("type", "arrow");
       tempPanel.setAttribute("id", "customizationui-widget-panel");
       tempPanel.setAttribute("class", "cui-widget-panel");
       tempPanel.setAttribute("viewId", aViewId);
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -393,16 +393,18 @@ These should match what Safari and other
 <!ENTITY customizeMenu.moveToPanel.accesskey "o">
 <!ENTITY customizeMenu.removeFromToolbar.label "Remove from Toolbar">
 <!ENTITY customizeMenu.removeFromToolbar.accesskey "R">
 <!ENTITY customizeMenu.removeFromMenu.label "Remove from Menu">
 <!ENTITY customizeMenu.removeFromMenu.accesskey "R">
 <!ENTITY customizeMenu.addMoreItems.label "Add More Items…">
 <!ENTITY customizeMenu.addMoreItems.accesskey "A">
 
+<!ENTITY moreMenu.label "More">
+
 <!ENTITY openCmd.commandkey           "l">
 <!ENTITY urlbar.placeholder2          "Search or enter address">
 <!ENTITY urlbar.accesskey             "d">
 <!-- LOCALIZATION NOTE (urlbar.extension.label): Used to indicate that a selected autocomplete entry is provided by an extension. -->
 <!ENTITY urlbar.extension.label       "Extension:">
 <!ENTITY urlbar.switchToTab.label     "Switch to tab:">
 
 <!ENTITY urlbar.searchSuggestionsNotification.question "Would you like to improve your search experience with suggestions?">
--- a/browser/themes/osx/customizableui/panelUI.css
+++ b/browser/themes/osx/customizableui/panelUI.css
@@ -17,25 +17,16 @@
 .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;
 }
 
@@ -95,8 +86,26 @@ toolbarpaletteitem[place="palette"] > .t
 
 #PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
   margin-left: 23px;
 }
 
 #PanelUI-remotetabs-tabslist {
   padding-bottom: 4px;
 }
+
+
+/* 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. */
+}
+
+photonpanelmultiview .subviewbutton[checked="true"] {
+  background-position: top 6px left 14px;
+}
+
+photonpanelmultiview .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
+  background-position: top 6px right 14px;
+}
+
+/* END photon adjustments */
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -328,16 +328,21 @@ panelview:not([mainview]) .toolbarbutton
 #appMenu-popup > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
   margin: 0;
   border-radius: 0;
 }
 
 photonpanelmultiview panelview {
   background: var(--arrowpanel-background);
+  padding: 6px 0;
+}
+
+photonpanelmultiview panelview[title] {
+  padding-top: 0;
 }
 
 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;
 }
 
@@ -1152,17 +1157,17 @@ photonpanelmultiview .cui-widget-panelvi
 photonpanelmultiview .subviewbutton-iconic:not(.subviewbutton-back) > .toolbarbutton-text {
   padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
 }
 
 photonpanelmultiview .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
   padding-inline-start: 24px; /* This is 16px for the icon + 8px for the padding as defined above. */
 }
 
-photonpanelmultiview .cui-widget-panelview .panel-subview-footer {
+photonpanelmultiview .PanelUI-subView .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) {
@@ -1880,17 +1885,17 @@ menuitem[checked="true"].subviewbutton >
   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 {
+photonpanelmultiview .PanelUI-subView .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);