Revision: 8860
Author: [email protected]
Date: Thu Sep 23 15:11:20 2010
Log: Fixing a bug with images used in CellTree, CellBrowser, and
IconCellDecorator in browsers that bundle images (IE). Currently, these
classes incorrectly construct an image from the ImageResource. This patch
makes them use AbstractImageProto to create the HTML for images, which
handles the image bundles correctly. This patch also changes some styles
and elements so images line up nicely with text.
Review at http://gwt-code-reviews.appspot.com/912801
Review by: [email protected]
http://code.google.com/p/google-web-toolkit/source/detail?r=8860
Modified:
/trunk/user/src/com/google/gwt/cell/client/IconCellDecorator.java
/trunk/user/src/com/google/gwt/user/cellview/client/CellBrowser.java
/trunk/user/src/com/google/gwt/user/cellview/client/CellTree.java
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeClosedArrow.png
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeClosedItem.gif
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeOpenArrow.png
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeOpenItem.gif
=======================================
--- /trunk/user/src/com/google/gwt/cell/client/IconCellDecorator.java Wed
Sep 22 12:58:01 2010
+++ /trunk/user/src/com/google/gwt/cell/client/IconCellDecorator.java Thu
Sep 23 15:11:20 2010
@@ -24,6 +24,7 @@
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
+import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import
com.google.gwt.user.client.ui.HasVerticalAlignment.VerticalAlignmentConstant;
@@ -45,9 +46,30 @@
SafeHtml outerDiv(String direction, int width, SafeHtml icon,
SafeHtml cellContents);
- @Template("<div
style=\"position:absolute;{0}:0px;top:0px;height:100%;width:{1}px;\"></div>")
- SafeHtml imagePlaceholder(String direction, int width);
- }
+ /**
+ * The wrapper around the image vertically aligned to the bottom.
+ */
+ @Template("<div
style=\"position:absolute;{0}:0px;bottom:0px;\">{1}</div>")
+ SafeHtml imageWrapperBottom(String direction, SafeHtml image);
+
+ /**
+ * The wrapper around the image vertically aligned to the middle.
+ */
+ @Template("<div style=\"position:absolute;{0}:0px;top:50%;"
+ + "margin-top:-{1}px;\">{2}</div>")
+ SafeHtml imageWrapperMiddle(String direction, int halfHeight, SafeHtml
image);
+
+ /**
+ * The wrapper around the image vertically aligned to the top.
+ */
+ @Template("<div
style=\"position:absolute;{0}:0px;top:0px;\">{1}</div>")
+ SafeHtml imageWrapperTop(String direction, SafeHtml image);
+ }
+
+ /**
+ * The default spacing between the icon and the text in pixels.
+ */
+ private static final int DEFAULT_SPACING = 6;
private static Template template;
@@ -70,7 +92,7 @@
* @param cell the cell to decorate
*/
public IconCellDecorator(ImageResource icon, Cell<C> cell) {
- this(icon, cell, HasVerticalAlignment.ALIGN_MIDDLE, 6);
+ this(icon, cell, HasVerticalAlignment.ALIGN_MIDDLE, DEFAULT_SPACING);
}
/**
@@ -88,7 +110,7 @@
}
this.cell = cell;
this.iconHtml = getImageHtml(icon, valign, false);
- this.imageWidth = icon.getWidth() + 6;
+ this.imageWidth = icon.getWidth() + spacing;
this.placeHolderHtml = getImageHtml(icon, valign, true);
}
@@ -160,22 +182,26 @@
* @param isPlaceholder if true, do not include the background image
* @return the rendered HTML
*/
- // TODO(jlabanca): Move this to a Utility class.
SafeHtml getImageHtml(ImageResource res, VerticalAlignmentConstant
valign,
boolean isPlaceholder) {
+ // Get the HTML for the image.
+ SafeHtml image;
if (isPlaceholder) {
- return template.imagePlaceholder(direction, res.getWidth());
+ image = SafeHtmlUtils.fromTrustedString("<div></div>");
} else {
- String vert = valign == HasVerticalAlignment.ALIGN_MIDDLE ? "center"
- : valign.getVerticalAlignString();
- // Templates are having problems with
url('data:image/png;base64,...')
- // CHECKSTYLE_OFF
- return SafeHtmlUtils.fromTrustedString("<div
style=\"position:absolute;"
- + direction + ":0px;top:0px;height:100%;width:" + res.getWidth()
- + "px;background:url('" + res.getURL() + "') no-repeat scroll "
- + SafeHtmlUtils.htmlEscape(vert) // for safety
- + " center transparent;\"></div>");
- // CHECKSTYLE_ON
+ AbstractImagePrototype proto = AbstractImagePrototype.create(res);
+ image = SafeHtmlUtils.fromTrustedString(proto.getHTML());
+ }
+
+ // Create the wrapper based on the vertical alignment.
+ if (HasVerticalAlignment.ALIGN_TOP == valign) {
+ return template.imageWrapperTop(direction, image);
+ } else if (HasVerticalAlignment.ALIGN_BOTTOM == valign) {
+ return template.imageWrapperBottom(direction, image);
+ } else {
+ // Add one to the margin-top because it looks better in all browsers.
+ int halfHeight = 1 + (int) Math.round(res.getHeight() / 2.0);
+ return template.imageWrapperMiddle(direction, halfHeight, image);
}
}
=======================================
--- /trunk/user/src/com/google/gwt/user/cellview/client/CellBrowser.java
Wed Sep 22 12:58:01 2010
+++ /trunk/user/src/com/google/gwt/user/cellview/client/CellBrowser.java
Thu Sep 23 15:11:20 2010
@@ -43,6 +43,7 @@
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
+import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HasAnimation;
import com.google.gwt.user.client.ui.ProvidesResize;
@@ -171,6 +172,11 @@
@Template("<div onclick=\"\" __idx=\"{0}\" class=\"{1}\"
style=\"position:relative;padding-right:{2}px;outline:none;\"
tabindex=\"{3}\" accessKey=\"{4}\">{5}<div>{6}</div></div>")
SafeHtml divFocusableWithKey(int idx, String classes, int imageWidth,
int tabIndex, char accessKey, SafeHtml imageHtml, SafeHtml
cellContents);
+
+ @Template("<div style=\"position:absolute;{0}:0px;width:{1}px;"
+ + "height:{2}px;\">{3}</div>")
+ SafeHtml imageWrapper(String direction, int width, int height,
+ SafeHtml image);
}
/**
@@ -917,21 +923,10 @@
*/
private SafeHtml getImageHtml(ImageResource res) {
// Right-justify image if LTR, left-justify if RTL
-
- // Note: templates can't handle the URL currently
-
- // Note: closing the tag with /> causes tests to fail
- // in dev mode with HTMLUnit -- the close tag is lost
- // when calling setInnerHTML on an Element.
- // TODO(rice) find and fix the root cause of this failure
-
- // CHECKSTYLE_OFF
- return SafeHtmlUtils.fromTrustedString("<div
style=\"position:absolute;"
- + (LocaleInfo.getCurrentLocale().isRTL() ? "left" : "right")
- + ":0px;top:0px;height:100%;width:" + res.getWidth()
- + "px;background:url('" + res.getURL()
- + "') no-repeat scroll center center transparent;\"></div>");
- // CHECKSTYLE_ON
+ AbstractImagePrototype proto = AbstractImagePrototype.create(res);
+ SafeHtml image = SafeHtmlUtils.fromTrustedString(proto.getHTML());
+ return template.imageWrapper((LocaleInfo.getCurrentLocale().isRTL()
+ ? "left" : "right"), res.getWidth(), res.getHeight(), image);
}
/**
=======================================
--- /trunk/user/src/com/google/gwt/user/cellview/client/CellTree.java Wed
Sep 22 12:58:01 2010
+++ /trunk/user/src/com/google/gwt/user/cellview/client/CellTree.java Thu
Sep 23 15:11:20 2010
@@ -32,7 +32,9 @@
import com.google.gwt.resources.client.ImageResource.RepeatStyle;
import com.google.gwt.safehtml.client.SafeHtmlTemplates;
import com.google.gwt.safehtml.shared.SafeHtml;
+import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.user.client.Event;
+import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.Focusable;
import com.google.gwt.user.client.ui.HasAnimation;
import com.google.gwt.user.client.ui.SimplePanel;
@@ -407,11 +409,10 @@
}
interface Template extends SafeHtmlTemplates {
- @Template("<div class=\"{0}\"
style=\"position:absolute;{1}:0px;top:0px;"
- + "height:{2}px;width:{3}px;background:url('{4}') no-repeat
scroll "
- + "center center transparent;\"></div>")
- SafeHtml image(String classes, String direction, int height, int width,
- String url);
+ @Template("<div class=\"{0}\" style=\"position:absolute;{1}:0px;"
+ + "width:{2}px;height:{3}px;\">{4}</div>")
+ SafeHtml imageWrapper(String classes, String direction, int width,
+ int height, SafeHtml image);
}
/**
@@ -902,8 +903,11 @@
} else {
direction = "left";
}
- return template.image(classesBuilder.toString(), direction,
- res.getHeight(), res.getWidth(), res.getURL());
+
+ AbstractImagePrototype proto = AbstractImagePrototype.create(res);
+ SafeHtml image = SafeHtmlUtils.fromTrustedString(proto.getHTML());
+ return template.imageWrapper(classesBuilder.toString(), direction,
+ res.getWidth(), res.getHeight(), image);
}
/**
=======================================
---
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeClosedArrow.png
Mon Jun 7 12:20:31 2010
+++
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeClosedArrow.png
Thu Sep 23 15:11:20 2010
@@ -2,8 +2,9 @@
IHDR óÿa gAMA ÖØÔOX2 tEXtSoftware Adobe
ImageReadyqÉe< ëIDATxÚbüÿÿ? %€‰ b...@± ,è y•]
-Œ · V ¹¿ @>d„Jþ #†Iíex] Ô° H¯ êŒ ëû Ñ 7 Ÿ Þ 3 ±7pçt ...@áp flá a P È °mŒ
<@ƒ\ �...@ñ#@ÚŸ‘‘° ��...@]ÏÏÈÈh
-d. Š-Ç ˆ g22B= ä€m„8ý o ¦›6¼ €ÍøÏ × Ôÿ Hì
-ö ¹7 E#P Û ˆWî ©
-...@æ Ù× 1...@È [N UÎ švšPBb
-úy b ·‘GÔ"óB˜ IEND®B`‚
+é pHYs šœ tIME Ú
4»Òv: ÒIDAT(ÏÝ‘±j Q DÏD± òAÖ©,Ò˜Î_Ømw·³JöI*
+X 6¦ K )- ù€ ‚X§IŸfR,�...@ÔÒÜnà
+fî\8ËQ]$y Öˆ—Ñ]ö{ ¾ˆt 1 ^ÓbØ? –øÁ40]ìIZ„·$ 7GÁ6-¤ê ÑÆ\
+“<,Ó<\ rV½ †KI
+`– Ãçú~3rFrÕ£ TÑÀ70·}» l³# [Ä»íûq™âØÍèo-Wñ7ÀÂæa\f_û
+‹ W‚ ÌÓ¨Ì>ùŸó ͪD ß;ª IEND®B`‚
=======================================
---
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeClosedItem.gif
Mon Jun 7 12:20:31 2010
+++
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeClosedItem.gif
Thu Sep 23 15:11:20 2010
@@ -1,2 +1,1 @@
-GIF89a „
Xh®Wg®«³Öaq²üýþúúüÍÐÙ‘›Ã™¢Æö÷øjy·cr³¾Åàds³ÜÞâkz¸eu³ÏÑÙVg®^n°Wh®ÓÕÛóô÷íîñåæêVgÿÿÿ
Ìÿÿÿÿÿÿÿÿÿÿÿÿ!ù , Dà'Ždižhª®£’½ïƒ.L¡Ý„0œ€åo¾„äD¹
7ÆËÐDÁlžOL†ˆ©nªÒSÀaÅNM D¤B6
-&( ìÕ`¹ßî ;
+GIF89a „ Xh®Wg®«³Öaq²üýþúúüÍÐÙ‘›Ã™¢Æö÷øjy·cr³¾Åàds³ÜÞâkz¸eu³ÏÑÙVg®^n°Wh®ÓÕÛóô÷íîñåæêVgÿÿÿ Ìÿÿÿÿÿÿÿÿÿÿÿÿ!ù , Cà'ŽdižhJ*YÛ>ç ZM ƒ
XüÆ' åBÜ /Á ³i61 !fº™BM Õ -M ‘ŠØp˜œ
®VCÅn»G! ;
=======================================
---
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeOpenArrow.png
Mon Jun 7 12:20:31 2010
+++
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeOpenArrow.png
Thu Sep 23 15:11:20 2010
@@ -2,6 +2,6 @@
IHDR óÿa gAMA ÖØÔOX2 tEXtSoftware Adobe
ImageReadyqÉe< àIDATxÚbüÿÿ? %€q _Ùµ H© E ä €Jþ �...@z (¶fR{Y L= Cß 5 €Mg “ ¨ HÿeøÏp Y1 æ Þƒ: ¤ ŠÁ` Ph5~ Nƒ 2...@l
- _€l ÷~á5 ¤ ˆ§ ]ñ€ ìÿÿ 02
- r–0
-9† ÿ ñu s ’â @sf...@v ~ €p ФW h r¯ ©ÕŒX Œ O ß š² ˆ¿ 5vÃ Í ,8 Dm Ð |
@ÖF ¨Ë†a^ 0 gŽf1‘Bà( IEND®B`‚
+é pHYs šœ tIME Ú
½™¡Ü ÍIDAT(ÏÕÒ±+Åq ðÏ‘Yù+¬þ3›²™(L²)“á ›Án°*IÉl‘’á•Žá÷â ^arëö½·î¹çÜ{¿ië·6ç ö'ðüt²²¶5ÂR #
&ÆE
+ïn®® ÆcY† 2¼Ä«º %û q7„A' ÎÄÑ÷à¸Ä ÛÐ <“‘aœ¯Á-½Ä½Ðv Ž í¡ÎØvBâ çS
+Oýš ò=³ÖŽä!‰r•8Ê î|£=Ѿ„í÷ñ;ãÎ {£l$Y §&Š>ÕýÏ¿ý îTI,˜bÖ IEND®B`‚
=======================================
---
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeOpenItem.gif
Mon Jun 7 12:20:31 2010
+++
/trunk/user/src/com/google/gwt/user/cellview/client/cellTreeOpenItem.gif
Thu Sep 23 15:11:20 2010
@@ -1,1 +1,2 @@
-GIF89a „
Xh®Wg®«³Öaq²üýþúúüÍÐÙ‘›Ã™¢Æö÷øjy·cr³¾Åàds³ÜÞâkz¸eu³ÏÑÙVg®^n°Wh®ÓÕÛóô÷íîñåæêVgÿÿÿ
Ìÿÿÿÿÿÿÿÿÿÿÿÿ!ù , Cà'Ždižhª®£’½ïƒ.L¡Ý„0œ€å_¾„äD¹ —¡‰‚Ù8 ˜
C½P£§€£z•š&ˆHel8LP Ø«Áj»Û! ;
+GIF89a „ Xh®Wg®«³Öaq²üýþúúüÍÐÙ‘›Ã™¢Æö÷øjy·cr³¾Åàds³ÜÞâkz¸eu³ÏÑÙVg®^n°Wh®ÓÕÛóô÷íîñåæêVgÿÿÿ Ìÿÿÿÿÿÿÿÿÿÿÿÿ!ù , Bà'ŽdižhJ*YÛ>ç ZM ƒ
XüÅ' åB,^‚%
+fÃdb2BŒô"}š Ži Zš "•°á09A\†jÍn B ;
--
http://groups.google.com/group/Google-Web-Toolkit-Contributors
