Bug 931092 - add styling specifically for widgets, r=mconley
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 29 Oct 2013 17:09:19 +0100
changeset 170556 be920ff7556b35b7d2f4a8da340129648323243d
parent 170555 5fd36d58514a987f400e19575568b374d8f11c00
child 170557 4c2d984c2094cdcc0aef7eac8833e43476bb330b
push idunknown
push userunknown
push dateunknown
reviewersmconley
bugs931092
milestone28.0a1
Bug 931092 - add styling specifically for widgets, r=mconley
browser/base/content/browser.css
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -190,16 +190,25 @@ toolbar[customizing] > .overflow-button 
 %ifdef XP_WIN
 #main-window[sizemode="maximized"] #titlebar-buttonbox {
   -moz-appearance: -moz-window-button-box-maximized;
 }
 %endif
 
 %endif
 
+/* Rules to help integrate SDK widgets */
+toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-text {
+  display: -moz-box;
+}
+
+toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > iframe {
+  display: none;
+}
+
 #bookmarks-toolbar-placeholder,
 toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
 #personal-bookmarks[cui-areatype="menu-panel"] > #PlacesToolbar,
 #personal-bookmarks[cui-areatype="toolbar"].overflowedItem > #PlacesToolbar {
   display: none;
 }
 
 toolbarpaletteitem > #personal-bookmarks > #bookmarks-toolbar-placeholder,
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -60,16 +60,17 @@
   padding: 0;
   box-shadow: none;
 }
 
 #PanelUI-contents {
   padding: .5em 0;
 }
 
+toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text,
 #bookmarks-menu-button > toolbarbutton > .toolbarbutton-text,
 #PanelUI-contents > toolbarpaletteitem > toolbaritem > toolbarbutton > .toolbarbutton-text,
 #PanelUI-contents > toolbaritem > toolbarbutton > .toolbarbutton-text,
 #PanelUI-contents > toolbarpaletteitem > toolbarbutton > .toolbarbutton-text,
 #PanelUI-contents > toolbarbutton > .toolbarbutton-text {
   font-size: 10px;
 }
 
@@ -109,16 +110,17 @@ panelview:not([mainview]) .toolbarbutton
 
 #edit-controls@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon,
 #zoom-controls@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
   min-width: 0;
   min-height: 0;
   margin: 0;
 }
 
+toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
 #PanelUI-contents toolbarbutton,
 toolbarpaletteitem[place="panel"] > toolbarbutton,
 toolbarpaletteitem[place="palette"] > toolbarbutton,
 toolbarpaletteitem[place="panel"] > toolbaritem > toolbarbutton,
 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton,
 .panel-customization-placeholder {
   -moz-appearance: none;
   -moz-box-orient: vertical;
@@ -168,16 +170,34 @@ toolbarpaletteitem[place="palette"] > to
   -moz-box-align: stretch;
   padding: .5em 0 .5em;
 }
 
 .panel-combined-button[disabled] > .toolbarbutton-icon {
   opacity: .5;
 }
 
+toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] {
+  width: 7em;
+  margin: 0 !important;
+}
+
+toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-widget) {
+  -moz-box-align: center;
+  -moz-box-pack: center;
+}
+
+toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
+  margin: calc(5em / 12) auto;
+}
+
+toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
+  text-align: center;
+}
+
 .panel-customization-placeholder-child > .toolbarbutton-icon,
 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 toolbarbutton[cui-areatype="menu-panel"] > .toolbarbutton-icon,
 toolbaritem[cui-areatype="menu-panel"] > toolbarbutton > .toolbarbutton-icon,
 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 toolbarpaletteitem[place="palette"] > toolbarbutton > .toolbarbutton-icon,
 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton > .toolbarbutton-icon {
   min-width: calc(8em / 3);