Bug 405210 - "Improve look of location bar dropdown button" (styles editable drop down buttons - including autocomplete dropmarkers - natively) [p=twanno@lycos.nl (Teune van Steeg) r+sr=roc a1.9=schrep]

toolkit/themes/gnomestripe/global/autocomplete.css

@@ -0,0 +1,208 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Mozilla Communicator client code, released
+ * March 31, 1998.
+ *
+ * The Initial Developer of the Original Code is
+ * Netscape Communications Corporation.
+ * Portions created by the Initial Developer are Copyright (C) 1998-2001
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Joe Hewitt (hewitt@netscape.com)
+ *   Pamela Greene (pamg.bugs@gmail.com)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* ===== autocomplete.css =================================================
+  == Styles used by the autocomplete widget.
+  ======================================================================= */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* ::::: autocomplete ::::: */
+
+textbox {
+  cursor: default;
+  padding: 0;
+}
+
+textbox[enablehistory="true"] {
+  -moz-appearance: none;
+  border: 0;
+  background-color: transparent;
+}
+
+/* Used by autocomplete widgets that don't have an icon. Gross. -dwh */
+textbox.padded {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  -moz-padding-start: 2px;
+  -moz-padding-end: 0px;
+}
+
+.autocomplete-textbox-container {
+  -moz-box-align: center;
+}
+
+textbox[enablehistory="true"] > .autocomplete-textbox-container {
+  -moz-appearance: menulist-textfield;
+}
+
+.textbox-input-box {
+  margin: 0 3px;
+  -moz-box-align: center;
+}
+
+/* ::::: history button ::::: */
+
+.autocomplete-history-dropmarker {
+  -moz-appearance: menulist-button;
+}
+
+/* ::::: autocomplete popups ::::: */
+
+panel[type="autocomplete"],
+panel[type="autocomplete-richlistbox"],
+.autocomplete-history-popup {
+  border-width: 1px;
+  -moz-border-top-colors: ThreeDDarkShadow;
+  -moz-border-right-colors: ThreeDDarkShadow;
+  -moz-border-bottom-colors: ThreeDDarkShadow;
+  -moz-border-left-colors: ThreeDDarkShadow;
+  padding: 0;
+  background-color: -moz-Field !important;
+}
+
+.autocomplete-history-popup {
+  max-height: 180px;
+}
+
+/* ::::: tree ::::: */
+
+.autocomplete-tree {
+  -moz-appearance: none !important;
+  border: none !important;
+  background-color: transparent !important;
+}
+
+.autocomplete-treecol {
+  -moz-appearance: none !important;
+  margin: 0 !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+/* GTK calculates space for a sort arrow */
+.autocomplete-treecol > .treecol-sortdirection {
+  -moz-appearance: none !important;
+}
+
+.autocomplete-treebody::-moz-tree-cell-text {
+  -moz-padding-start: 8px;
+}
+
+treechildren.autocomplete-treebody::-moz-tree-row(selected) {
+ background-color: Highlight;
+}
+
+treechildren.autocomplete-treebody::-moz-tree-cell-text(selected) {
+  color: HighlightText !important;
+}
+
+.autocomplete-treebody::-moz-tree-image(treecolAutoCompleteValue) {
+  max-width: 16px;
+  height: 16px;
+}
+
+/* ::::: richlistbox autocomplete ::::: */
+
+.autocomplete-richlistbox {
+  -moz-appearance: none !important;
+  margin: 0;
+  border: none !important;
+  background-color: transparent !important;
+}
+
+.autocomplete-richlistbox > scrollbox {
+  overflow-x: hidden !important;
+}
+
+.autocomplete-richlistitem[selected="true"] {
+  background-color: Highlight;
+  color: HighlightText;
+}
+
+.autocomplete-richlistitem {
+  -moz-box-orient: vertical;
+  overflow:-moz-hidden-unscrollable;
+  padding: 1px 0px 1px 2px;
+  border-bottom: 1px solid ThreeDShadow;
+}
+
+.ac-site-icon {
+  width: 16px; 
+  height: 16px;
+  margin-right: 8px;
+}
+
+.ac-type-icon {
+  width: 16px; 
+  height: 16px;
+}
+
+.ac-ellipsis-after {
+  margin: 2px 0px 0px 0px !important;
+  padding: 0; 
+  min-width: 1em;
+}
+
+.ac-normal-text {
+  margin: 2px 0px 0px 0px !important;
+  padding: 0;
+}
+
+html|*.ac-emphasize-text {
+  margin: 0 !important;
+  padding: 0;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.ac-title, .ac-url {
+  overflow: hidden;
+}
+
+/* ::::: textboxes inside toolbarpaletteitems ::::: */
+
+toolbarpaletteitem > toolbaritem > textbox > hbox > hbox > html|*.textbox-input {
+  visibility: hidden;
+}
+
+toolbarpaletteitem > toolbaritem > * > textbox > hbox > hbox > html|*.textbox-input {
+  visibility: hidden;
+}

toolkit/themes/gnomestripe/global/jar.mn

@@ -1,4 +1,5 @@
 classic.jar:
++  skin/classic/global/autocomplete.css
 +  skin/classic/global/popup.css
 +  skin/classic/global/menu.css
 +  skin/classic/global/menulist.css

toolkit/themes/gnomestripe/global/menulist.css

@@ -87,6 +87,10 @@ menulist[editable="true"] {
 
 .menulist-editable-box {
   -moz-appearance: menulist-textfield;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  -moz-padding-start: 2px;
+  -moz-padding-end: 0px;
 }
 
 menulist[editable="true"] > .menulist-dropmarker {

toolkit/themes/winstripe/global/autocomplete.css

@@ -170,9 +170,7 @@ textbox[chromedir="rtl"] .autocomplete-history-dropmarker {
 panel[type="autocomplete"],
 panel[type="autocomplete-richlistbox"],
 .autocomplete-history-popup {
-%ifndef MOZ_WIDGET_GTK2
   -moz-appearance: none;
-%endif
   border-width: 1px;
   -moz-border-top-colors: ThreeDDarkShadow;
   -moz-border-right-colors: ThreeDDarkShadow;

widget/src/gtk2/gtk2drawing.c

@@ -67,6 +67,8 @@ static GtkWidget* gVScaleWidget;
 static GtkWidget* gEntryWidget;
 static GtkWidget* gArrowWidget;
 static GtkWidget* gOptionMenuWidget;
+static GtkWidget* gComboBoxEntryWidget;
+static GtkWidget* gDropdownEntryWidget;
 static GtkWidget* gDropdownButtonWidget;
 static GtkWidget* gHandleBoxWidget;
 static GtkWidget* gToolbarWidget;
@@ -248,12 +250,39 @@ ensure_option_menu_widget()
     return MOZ_GTK_SUCCESS;
 }
 
+static gint
+ensure_combo_box_entry_widget()
+{
+    if (!gComboBoxEntryWidget) {
+        gComboBoxEntryWidget = gtk_combo_box_entry_new();
+        setup_widget_prototype(gComboBoxEntryWidget);
+    }
+    return MOZ_GTK_SUCCESS;
+}
+
+static gint
+ensure_dropdown_entry_widget()
+{
+    if (!gDropdownEntryWidget) {
+        ensure_combo_box_entry_widget();
+
+        gDropdownEntryWidget = gtk_entry_new();
+        gtk_widget_set_parent(gDropdownEntryWidget, gComboBoxEntryWidget);
+        gtk_widget_realize(gDropdownEntryWidget);
+    }
+    return MOZ_GTK_SUCCESS;
+}
+
 static gint
 ensure_arrow_widget()
 {
     if (!gArrowWidget) {
+        ensure_combo_box_entry_widget();
+
         gDropdownButtonWidget = gtk_button_new();
-        setup_widget_prototype(gDropdownButtonWidget);
+        gtk_widget_set_parent(gDropdownButtonWidget, gComboBoxEntryWidget);
+        gtk_widget_realize(gDropdownButtonWidget);
+
         gArrowWidget = gtk_arrow_new(GTK_ARROW_DOWN, GTK_SHADOW_OUT);
         gtk_container_add(GTK_CONTAINER(gDropdownButtonWidget), gArrowWidget);
         gtk_widget_realize(gArrowWidget);
@@ -1406,6 +1435,7 @@ moz_gtk_dropdown_arrow_paint(GdkDrawable* drawable, GdkRectangle* rect,
                              GdkRectangle* cliprect, GtkWidgetState* state,
                              GtkTextDirection direction)
 {
+    gfloat arrow_scaling;
     GdkRectangle arrow_rect, real_arrow_rect;
     GtkStateType state_type = ConvertGtkState(state);
     GtkShadowType shadow_type = state->active ? GTK_SHADOW_IN : GTK_SHADOW_OUT;
@@ -1419,8 +1449,8 @@ moz_gtk_dropdown_arrow_paint(GdkDrawable* drawable, GdkRectangle* rect,
 
     /* This mirrors gtkbutton's child positioning */
     style = gDropdownButtonWidget->style;
-    arrow_rect.x = rect->x + 1 + XTHICKNESS(gDropdownButtonWidget->style);
-    arrow_rect.y = rect->y + 1 + YTHICKNESS(gDropdownButtonWidget->style);
+    arrow_rect.x = rect->x + 1 + XTHICKNESS(style);
+    arrow_rect.y = rect->y + 1 + YTHICKNESS(style);
     arrow_rect.width = MAX(1, rect->width - (arrow_rect.x - rect->x) * 2);
     arrow_rect.height = MAX(1, rect->height - (arrow_rect.y - rect->y) * 2);
 
@@ -1428,8 +1458,11 @@ moz_gtk_dropdown_arrow_paint(GdkDrawable* drawable, GdkRectangle* rect,
     style = gArrowWidget->style;
     TSOffsetStyleGCs(style, real_arrow_rect.x, real_arrow_rect.y);
 
+    gtk_widget_style_get(gArrowWidget,
+                         "arrow-scaling", &arrow_scaling,
+                         NULL);
     real_arrow_rect.width = real_arrow_rect.height =
-        MIN (real_arrow_rect.width, real_arrow_rect.height) * 0.9; 
+        MIN (real_arrow_rect.width, real_arrow_rect.height) * arrow_scaling;
 
     real_arrow_rect.x = floor (arrow_rect.x + ((arrow_rect.width - real_arrow_rect.width) / 2) + 0.5);
     real_arrow_rect.y = floor (arrow_rect.y + ((arrow_rect.height - real_arrow_rect.height) / 2) + 0.5);
@@ -2191,6 +2224,10 @@ moz_gtk_get_widget_border(GtkThemeWidgetType widget, gint* left, gint* top,
         ensure_tree_header_cell_widget();
         w = gTreeHeaderSortArrowWidget;
         break;
+    case MOZ_GTK_DROPDOWN_ENTRY:
+        ensure_dropdown_entry_widget();
+        w = gDropdownEntryWidget;
+        break;
     case MOZ_GTK_DROPDOWN_ARROW:
         ensure_arrow_widget();
         w = gDropdownButtonWidget;
@@ -2361,19 +2398,20 @@ moz_gtk_get_widget_border(GtkThemeWidgetType widget, gint* left, gint* top,
 gint
 moz_gtk_get_dropdown_arrow_size(gint* width, gint* height)
 {
+    const gint min_arrow_size = 15;
     ensure_arrow_widget();
 
     /*
      * First get the border of the dropdown arrow, then add in the requested
      * size of the arrow.  Note that the minimum arrow size is fixed at
-     * 11 pixels.
+     * 15 pixels.
      */
 
     *width = 2 * (1 + XTHICKNESS(gDropdownButtonWidget->style));
-    *width += 11 + GTK_MISC(gArrowWidget)->xpad * 2;
+    *width += min_arrow_size + GTK_MISC(gArrowWidget)->xpad * 2;
 
     *height = 2 * (1 + YTHICKNESS(gDropdownButtonWidget->style));
-    *height += 11 + GTK_MISC(gArrowWidget)->ypad * 2;
+    *height += min_arrow_size + GTK_MISC(gArrowWidget)->ypad * 2;
 
     return MOZ_GTK_SUCCESS;
 }
@@ -2582,6 +2620,11 @@ moz_gtk_widget_paint(GtkThemeWidgetType widget, GdkDrawable* drawable,
         return moz_gtk_dropdown_arrow_paint(drawable, rect, cliprect, state,
                                             direction);
         break;
+    case MOZ_GTK_DROPDOWN_ENTRY:
+        ensure_dropdown_entry_widget();
+        return moz_gtk_entry_paint(drawable, rect, cliprect, state,
+                                   gDropdownEntryWidget, direction);
+        break;
     case MOZ_GTK_CHECKBUTTON_CONTAINER:
     case MOZ_GTK_RADIOBUTTON_CONTAINER:
         return moz_gtk_container_paint(drawable, rect, cliprect, state,
@@ -2697,6 +2740,8 @@ moz_gtk_shutdown()
     gArrowWidget = NULL;
     gOptionMenuWidget = NULL;
     gDropdownButtonWidget = NULL;
+    gDropdownEntryWidget = NULL;
+    gComboBoxEntryWidget = NULL;
     gHandleBoxWidget = NULL;
     gToolbarWidget = NULL;
     gStatusbarWidget = NULL;

widget/src/gtk2/gtkdrawing.h

@@ -148,6 +148,8 @@ typedef enum {
   MOZ_GTK_DROPDOWN,
   /* Paints a dropdown arrow (a GtkButton containing a down GtkArrow). */
   MOZ_GTK_DROPDOWN_ARROW,
+  /* Paints an entry in an editable option menu */
+  MOZ_GTK_DROPDOWN_ENTRY,
   /* Paints the container part of a GtkCheckButton. */
   MOZ_GTK_CHECKBUTTON_CONTAINER,
   /* Paints the container part of a GtkRadioButton. */

widget/src/gtk2/nsNativeThemeGTK.cpp

@@ -411,7 +411,6 @@ nsNativeThemeGTK::GetGtkWidgetAndState(PRUint8 aWidgetType, nsIFrame* aFrame,
     break;
   case NS_THEME_TEXTFIELD:
   case NS_THEME_TEXTFIELD_MULTILINE:
-  case NS_THEME_DROPDOWN_TEXTFIELD:
     aGtkWidgetType = MOZ_GTK_ENTRY;
     break;
   case NS_THEME_LISTBOX:
@@ -461,6 +460,9 @@ nsNativeThemeGTK::GetGtkWidgetAndState(PRUint8 aWidgetType, nsIFrame* aFrame,
     break;
   case NS_THEME_DROPDOWN_TEXT:
     return PR_FALSE; // nothing to do, but prevents the bg from being drawn
+  case NS_THEME_DROPDOWN_TEXTFIELD:
+    aGtkWidgetType = MOZ_GTK_DROPDOWN_ENTRY;
+    break;
   case NS_THEME_DROPDOWN_BUTTON:
     aGtkWidgetType = MOZ_GTK_DROPDOWN_ARROW;
     break;