[Australis] Bug 878546: refresh the styling of sub-views. r=Gijs
authorMike de Boer <mdeboer@mozilla.com>
Thu, 23 Jan 2014 14:06:17 +0100
changeset 180932 04b6213da4e1ef1d7d69e4c6ea7b8fa0d247cb44
parent 180931 690fc57732bb55b21e56e0185c6658451134f86d
child 180933 2d3499d205c5ab387c52f661bab55cec30980d7d
push id3343
push userffxbld
push dateMon, 17 Mar 2014 21:55:32 +0000
treeherdermozilla-beta@2f7d3415f79f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs878546
milestone29.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
[Australis] Bug 878546: refresh the styling of sub-views. r=Gijs
browser/base/content/browser-feeds.js
browser/components/customizableui/content/panelUI.inc.xul
browser/components/customizableui/src/CustomizableWidgets.jsm
browser/components/places/content/browserPlacesViews.js
browser/themes/osx/browser.css
browser/themes/osx/customizableui/panelUIOverlay.css
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/base/content/browser-feeds.js
+++ b/browser/base/content/browser-feeds.js
@@ -41,24 +41,26 @@ var FeedHandler = {
       return false;
 
     // Build the menu showing the available feed choices for viewing.
     var itemNodeType = isSubview ? "toolbarbutton" : "menuitem";
     for (let feedInfo of feeds) {
       var item = document.createElement(itemNodeType);
       var baseTitle = feedInfo.title || feedInfo.href;
       var labelStr = gNavigatorBundle.getFormattedString("feedShowFeedNew", [baseTitle]);
-      item.setAttribute("class", "feed-" + itemNodeType);
       item.setAttribute("label", labelStr);
       item.setAttribute("feed", feedInfo.href);
       item.setAttribute("tooltiptext", feedInfo.href);
       item.setAttribute("crop", "center");
+      let className = "feed-" + itemNodeType;
       if (isSubview) {
         item.setAttribute("tabindex", "0");
+        className += " subviewbutton";
       }
+      item.setAttribute("class", className);
       container.appendChild(item);
     }
     return true;
   },
 
   /**
    * Subscribe to a given feed.  Called when
    *   1. Page has a single feed and user clicks feed icon in location bar
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -33,74 +33,84 @@
                        label="&quitApplicationCmd.label;"
                        tooltiptext="&quitApplicationCmd.label;"
 #endif
                        command="cmd_quitApplication"/>
       </footer>
     </panelview>
 
     <panelview id="PanelUI-history" flex="1">
-      <label value="&appMenuHistory.label;"/>
+      <label value="&appMenuHistory.label;" class="panel-subview-header"/>
       <toolbarbutton id="appMenuViewHistorySidebar" tabindex="0"
                      label="&appMenuHistory.viewSidebar.label;"
                      type="checkbox"
+                     class="subviewbutton"
                      oncommand="toggleSidebar('viewHistorySidebar'); PanelUI.hide();">
         <observes element="viewHistorySidebar" attribute="checked"/>
       </toolbarbutton>
       <toolbarbutton id="appMenuClearRecentHistory" tabindex="0"
                      label="&appMenuHistory.clearRecent.label;"
+                     class="subviewbutton"
                      command="Tools:Sanitize"/>
 #ifdef MOZ_SERVICES_SYNC
       <toolbarbutton id="sync-tabs-menuitem2"
-                     class="syncTabsMenuItem"
+                     class="syncTabsMenuItem subviewbutton"
                      label="&syncTabsMenu2.label;"
                      oncommand="BrowserOpenSyncTabs();"
                      disabled="true"/>
 #endif
       <toolbarbutton id="appMenuRestoreLastSession" tabindex="0"
                      label="&appMenuHistory.restoreSession.label;"
+                     class="subviewbutton"
                      command="Browser:RestoreLastSession"/>
       <menuseparator id="PanelUI-recentlyClosedTabs-separator"/>
       <vbox id="PanelUI-recentlyClosedTabs" tooltip="bhTooltip"/>
       <menuseparator id="PanelUI-recentlyClosedWindows-separator"/>
       <vbox id="PanelUI-recentlyClosedWindows" tooltip="bhTooltip"/>
       <menuseparator id="PanelUI-historyItems-separator"/>
       <vbox id="PanelUI-historyItems" tooltip="bhTooltip"/>
-      <label value="&appMenuHistory.showAll.label;"
-             id="PanelUI-historyMore"
-             class="text-link"
-             onclick="PlacesCommandHook.showPlacesOrganizer('History'); CustomizableUI.hidePanelForNode(this);"/>
+      <toolbarbutton id="PanelUI-historyMore" tabindex="0"
+                     class="panel-subview-footer subviewbutton"
+                     label="&appMenuHistory.showAll.label;"
+                     oncommand="PlacesCommandHook.showPlacesOrganizer('History'); CustomizableUI.hidePanelForNode(this);"/>
     </panelview>
 
-    <panelview id="PanelUI-bookmarks" flex="1">
+    <panelview id="PanelUI-bookmarks" flex="1" class="PanelUI-subView">
+      <label value="&bookmarksMenu.label;" class="panel-subview-header"/>
       <toolbarbutton id="panelMenuBookmarkThisPage"
                      label="&bookmarkThisPageCmd.label;"
+                     class="subviewbutton"
                      command="Browser:AddBookmarkAs"
                      onclick="PanelUI.hide();"/>
       <toolbarseparator/>
       <toolbarbutton id="panelMenu_showAllBookmarks"
                      label="&showAllBookmarks2.label;"
+                     class="subviewbutton"
                      command="Browser:ShowAllBookmarks"
                      onclick="PanelUI.hide();"/>
       <toolbarbutton id="panelMenu_viewBookmarksSidebar"
                      label="&viewBookmarksSidebar2.label;"
+                     class="subviewbutton"
                      oncommand="toggleSidebar('viewBookmarksSidebar'); PanelUI.hide();">
         <observes element="viewBookmarksSidebar" attribute="checked"/>
       </toolbarbutton>
       <toolbarbutton id="panelMenu_viewBookmarksToolbar"
                      label="&viewBookmarksToolbar.label;"
                      type="checkbox"
                      toolbarId="PersonalToolbar"
+                     class="subviewbutton"
                      oncommand="onViewToolbarCommand(event); PanelUI.hide();"/>
       <toolbarseparator/>
       <toolbarbutton id="panelMenu_bookmarksToolbar"
                      label="&personalbarCmd.label;"
+                     class="subviewbutton"
                      oncommand="PlacesCommandHook.showPlacesOrganizer('BookmarksToolbar'); PanelUI.hide();"/>
       <toolbarbutton id="panelMenu_unsortedBookmarks"
                      label="&unsortedBookmarksCmd.label;"
+                     class="subviewbutton"
                      oncommand="PlacesCommandHook.showPlacesOrganizer('UnfiledBookmarks'); PanelUI.hide();"/>
       <toolbarseparator/>
       <toolbaritem id="panelMenu_bookmarksMenu"
                    flex="1"
                    orient="vertical"
                    smoothscroll="false"
                    onclick="if (event.button == 1) BookmarkingUI.onPanelMenuViewCommand(event, this._placesView);"
                    oncommand="BookmarkingUI.onPanelMenuViewCommand(event, this._placesView);"
@@ -111,27 +121,27 @@
 
     </panelview>
 
     <panelview id="PanelUI-socialapi" flex="1"/>
 
     <panelview id="PanelUI-feeds" flex="1" oncommand="FeedHandler.subscribeToFeed(null, event);"></panelview>
 
     <panelview id="PanelUI-helpView" flex="1">
-      <label value="&helpMenu.label;"/>
+      <label value="&helpMenu.label;" class="panel-subview-header"/>
       <vbox id="PanelUI-helpItems"/>
     </panelview>
 
     <panelview id="PanelUI-developer" flex="1">
-      <label value="&webDeveloperMenu.label;"/>
+      <label value="&webDeveloperMenu.label;" class="panel-subview-header"/>
       <vbox id="PanelUI-developerItems"/>
     </panelview>
 
     <panelview id="PanelUI-characterEncodingView" flex="1">
-      <label value="&charsetMenu.label;"/>
+      <label value="&charsetMenu.label;" class="panel-subview-header"/>
 
       <vbox id="PanelUI-characterEncodingView-customlist"
             class="PanelUI-characterEncodingView-list"/>
       <vbox>
         <label value="&charsetMenuAutodet.label;"/>
         <vbox id="PanelUI-characterEncodingView-autodetect"
               class="PanelUI-characterEncodingView-list"/>
       </vbox>
--- a/browser/components/customizableui/src/CustomizableWidgets.jsm
+++ b/browser/components/customizableui/src/CustomizableWidgets.jsm
@@ -97,16 +97,17 @@ const CustomizableWidgets = [{
               let uri = row.getResultByIndex(1);
               let title = row.getResultByIndex(2);
               let icon = row.getResultByIndex(6);
 
               let item = doc.createElementNS(kNSXUL, "toolbarbutton");
               item.setAttribute("label", title || uri);
               item.setAttribute("tabindex", "0");
               item.setAttribute("targetURI", uri);
+              item.setAttribute("class", "subviewbutton");
               item.addEventListener("command", function (aEvent) {
                 onHistoryVisit(uri, aEvent, item);
               });
               item.addEventListener("click", function (aEvent) {
                 onHistoryVisit(uri, aEvent, item);
               });
               if (icon)
                 item.setAttribute("image", "moz-anno:favicon:" + icon);
@@ -147,22 +148,34 @@ const CustomizableWidgets = [{
         tabsFromOtherComputers.removeAttribute("disabled");
       } else {
         tabsFromOtherComputers.setAttribute("disabled", true);
       }
 #endif
 
       let tabsFragment = RecentlyClosedTabsAndWindowsMenuUtils.getTabsFragment(doc.defaultView, "toolbarbutton");
       let separator = doc.getElementById("PanelUI-recentlyClosedTabs-separator");
-      separator.hidden = !tabsFragment.childElementCount;
+      let elementCount = tabsFragment.childElementCount;
+      separator.hidden = !elementCount;
+      while (--elementCount >= 0) {
+        if (tabsFragment.children[elementCount].localName != "toolbarbutton")
+          continue;
+        tabsFragment.children[elementCount].setAttribute("class", "subviewbutton");
+      }
       recentlyClosedTabs.appendChild(tabsFragment);
 
       let windowsFragment = RecentlyClosedTabsAndWindowsMenuUtils.getWindowsFragment(doc.defaultView, "toolbarbutton");
       separator = doc.getElementById("PanelUI-recentlyClosedWindows-separator");
-      separator.hidden = !windowsFragment.childElementCount;
+      elementCount = windowsFragment.childElementCount;
+      separator.hidden = !elementCount;
+      while (--elementCount >= 0) {
+        if (windowsFragment.children[elementCount].localName != "toolbarbutton")
+          continue;
+        windowsFragment.children[elementCount].setAttribute("class", "subviewbutton");
+      }
       recentlyClosedWindows.appendChild(windowsFragment);
     },
     onViewHiding: function(aEvent) {
       LOG("History view is being hidden!");
     }
   }, {
     id: "privatebrowsing-button",
     shortcutId: "key_privatebrowsing",
@@ -239,16 +252,17 @@ const CustomizableWidgets = [{
           continue;
 
         let item;
         if (node.localName == "menuseparator") {
           item = doc.createElementNS(kNSXUL, "menuseparator");
         } else if (node.localName == "menuitem") {
           item = doc.createElementNS(kNSXUL, "toolbarbutton");
           item.setAttribute("tabindex", "0");
+          item.setAttribute("class", "subviewbutton");
         } else {
           continue;
         }
         for (let attr of attrs) {
           let attrVal = node.getAttribute(attr);
           if (attrVal)
             item.setAttribute(attr, attrVal);
         }
@@ -710,16 +724,17 @@ const CustomizableWidgets = [{
         let elem = aDocument.createElementNS(kNSXUL, "toolbarbutton");
         elem.setAttribute("label", item.name);
         elem.section = aSection;
         elem.value = item.value;
         if (item.current)
           elem.setAttribute("current", "true");
         if (disabled)
           elem.setAttribute("disabled", "true");
+        elem.setAttribute("class", "subviewbutton");
         containerElem.appendChild(elem);
       }
     },
     onViewShowing: function(aEvent) {
       let document = aEvent.target.ownerDocument;
 
       this.populateList(document,
                         "PanelUI-characterEncodingView-customlist",
--- a/browser/components/places/content/browserPlacesViews.js
+++ b/browser/components/places/content/browserPlacesViews.js
@@ -1775,17 +1775,17 @@ PlacesPanelMenuView.prototype = {
 
     let type = aChild.type;
     let button;
     if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_SEPARATOR) {
       button = document.createElement("toolbarseparator");
     }
     else {
       button = document.createElement("toolbarbutton");
-      button.className = "bookmark-item";
+      button.className = "bookmark-item subviewbutton";
       button.setAttribute("label", aChild.title);
       let icon = aChild.icon;
       if (icon)
         button.setAttribute("image", icon);
 
       if (PlacesUtils.containerTypes.indexOf(type) != -1) {
         button.setAttribute("container", "true");
 
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -154,17 +154,17 @@ toolbarbutton.chevron:-moz-locale-dir(rt
 
   toolbarbutton.chevron > .toolbarbutton-icon {
     width: 13px;
   }
 }
 
 /* ----- BOOKMARK BUTTONS ----- */
 
-toolbarbutton.bookmark-item,
+toolbarbutton.bookmark-item:not(.subviewbutton),
 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder {
   font-weight: bold;
   color: #222;
   border: 0;
   border-radius: 10000px;
   padding: 1px 8px;
   margin: 0 0 1px;
 }
@@ -194,18 +194,18 @@ toolbarbutton.bookmark-item,
   margin: 0 !important;
 }
 
 toolbarbutton.bookmark-item:hover,
 toolbarbutton.bookmark-item[open="true"] {
   background-color: rgba(0, 0, 0, .205);
 }
 
-toolbarbutton.bookmark-item:hover,
-toolbarbutton.bookmark-item[open="true"] {
++toolbarbutton.bookmark-item:hover:not(.subviewbutton),
++toolbarbutton.bookmark-item[open="true"]:not(.subviewbutton) {
   color: #FFF !important;
   text-shadow: 0 1px rgba(0, 0, 0, .4) !important;
 }
 
 .bookmark-item:hover > .toolbarbutton-menu-dropmarker,
 .bookmark-item[open="true"] > .toolbarbutton-menu-dropmarker {
   -moz-image-region: rect(5px, 7px, 10px, 0);
 }
--- a/browser/themes/osx/customizableui/panelUIOverlay.css
+++ b/browser/themes/osx/customizableui/panelUIOverlay.css
@@ -1,18 +1,14 @@
 /* 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/. */
 
 %include ../../shared/customizableui/panelUIOverlay.inc.css
 
-.panel-subviews {
-  background-color: #f5f5f5;
-}
-
 @media (min-resolution: 2dppx) {
   #customization-palette toolbarbutton > .toolbarbutton-icon,
   #PanelUI-contents toolbarbutton > .toolbarbutton-icon {
     width: 20px;
   }
 
   #PanelUI-customize {
     list-style-image: url(chrome://browser/skin/menuPanel-customize@2x.png);
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -7,38 +7,56 @@
 %define menuPanelWidth 22.35em
 %define exitSubviewGutterWidth 38px
 %define buttonStateHover :not(:-moz-any([disabled],[checked="true"],[open],:active)):hover
 %define buttonStateActive :not([disabled]):-moz-any([open],[checked="true"],:hover:active)
 
 %include ../browser.inc
 
 .panel-subviews {
-  background-image: linear-gradient(to bottom, white 1px, rgba(255, 255, 255, 0) 15px);
-  background-color: -moz-dialog;
-  box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.2), -1px 0px 2px rgba(0, 0, 0, 0.1), 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+  padding: 4px;
+  background-color: hsla(0,0%,100%,.97);
+  background-clip: padding-box;
+  border-right: 1px solid hsla(210,4%,10%,.2);
+  border-left: 1px solid hsla(210,4%,10%,.2);
+  box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
+              0 0 7px hsla(210,4%,10%,.1);
+  color: #222426;
   -moz-margin-start: @exitSubviewGutterWidth@;
 }
 
-.panel-subviews:-moz-locale-dir(rtl) {
-  box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
-}
-
 .panel-viewstack[viewtype="main"] > .panel-subviews {
   transform: translateX(@menuPanelWidth@);
 }
 
 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
   transform: translateX(-@menuPanelWidth@);
 }
 
 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
   -moz-box-flex: 1;
 }
 
+.panel-subview-header,
+.subviewbutton.panel-subview-footer {
+  padding: 12px;
+  background-color: hsla(210,4%,10%,.04);
+}
+
+.panel-subview-header {
+  margin: -4px -4px 4px;
+  box-shadow: 0 -1px 0 hsla(210,4%,10%,.08) inset;
+  color: #797c80;
+}
+
+.subviewbutton.panel-subview-footer {
+  margin: 4px -4px -4px;
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.08) inset;
+}
+
 #PanelUI-mainView {
   display: flex;
   flex-direction: column;
 }
 
 #app-extension-point-end > #PanelUI-menu-button {
   padding: 2px 5px;
 }
@@ -312,58 +330,90 @@ toolbarpaletteitem[place="palette"] > to
   background-image: linear-gradient(rgb(38,115,191), rgb(38,125,191));
 }
 
 #customization-palette .toolbarbutton-multiline-text,
 #customization-palette .toolbarbutton-text {
   display: none;
 }
 
-panelview toolbarbutton,
-#widget-overflow-list > toolbarbutton,
+panelview .toolbarbutton-1,
+panelview .subviewbutton,
+.widget-overflow-list .toolbarbutton-1,
 .customizationmode-button,
 #edit-controls@inAnyPanel@ > toolbarbutton,
 #zoom-controls@inAnyPanel@ > toolbarbutton,
 #BMB_bookmarksPopup > menu,
 #BMB_bookmarksPopup > menuitem {
   -moz-appearance: none;
   padding: 2px 6px;
   background-color: hsla(210,4%,10%,0);
   border-radius: 2px;
   border: 1px solid;
   border-color: hsla(210,4%,10%,0);
   transition-property: background-color, border-color;
   transition-duration: 150ms;
 }
 
+.PanelUI-subView .subviewbutton.panel-subview-footer {
+  border-radius: 0;
+  border: none;
+}
+
+.PanelUI-subView .subviewbutton.panel-subview-footer > .toolbarbutton-text {
+  -moz-padding-start: 0;
+  text-align: center;
+}
+
+.PanelUI-subView .subviewbutton:not(.panel-subview-footer) {
+  margin: 2px 0;
+}
+
+.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text {
+  font-size: 1.1em;
+}
+
+.PanelUI-subView .subviewbutton.bookmark-item {
+  font-weight: normal;
+  color: inherit;
+}
+
+.PanelUI-subView menuseparator,
+.PanelUI-subView toolbarseparator {
+  -moz-margin-start: -5px;
+  -moz-margin-end: -4px;
+}
+
 panelview .toolbarbutton-1,
-#widget-overflow-list > toolbarbutton {
+.widget-overflow-list .toolbarbutton-1 {
   margin-top: 6px;
 }
 
-panelview toolbarbutton@buttonStateHover@,
-#widget-overflow-list > toolbarbutton@buttonStateHover@,
+panelview .toolbarbutton-1@buttonStateHover@,
+panelview .subviewbutton@buttonStateHover@,
+.widget-overflow-list .toolbarbutton-1@buttonStateHover@,
 .customizationmode-button,
 #edit-controls@inAnyPanel@ > toolbarbutton@buttonStateHover@,
 #zoom-controls@inAnyPanel@ > toolbarbutton@buttonStateHover@,
 #BMB_bookmarksPopup > menu@buttonStateHover@,
 #BMB_bookmarksPopup > menuitem@buttonStateHover@ {
   background-color: hsla(210,4%,10%,.08);
   border-color: hsla(210,4%,10%,.1);
 }
 
 
 #edit-controls@inAnyPanel@@buttonStateHover@,
 #zoom-controls@inAnyPanel@@buttonStateHover@ {
   border-color: hsla(210,4%,10%,.1);
 }
 
-panelview toolbarbutton@buttonStateActive@,
+panelview .toolbarbutton-1@buttonStateActive@,
+panelview .subviewbutton@buttonStateActive@,
 .customizationmode-button@buttonStateActive@,
-#widget-overflow-list > toolbarbutton@buttonStateActive@,
+.widget-overflow-list .toolbarbutton-1@buttonStateActive@,
 #edit-controls@inAnyPanel@ > toolbarbutton@buttonStateActive@,
 #zoom-controls@inAnyPanel@ > toolbarbutton@buttonStateActive@,
 #BMB_bookmarksPopup > menu@buttonStateActive@,
 #BMB_bookmarksPopup > menuitem@buttonStateActive@ {
   background-color: hsla(210,4%,10%,.15);
   border-color: hsla(210,4%,10%,.15);
   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
 }