WebKit Bugzilla
Attachment 348419 Details for
Bug 189092
: [iOS] Update color picker to match design feedback
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-189092-20180829120855.patch (text/plain), 28.88 KB, created by
Aditya Keerthi
on 2018-08-29 12:08:55 PDT
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Aditya Keerthi
Created:
2018-08-29 12:08:55 PDT
Size:
28.88 KB
patch
obsolete
>Subversion Revision: 235471 >diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog >index d17dc740f5a79bf25e3711dbecc3d0e70b21f1ea..79c2b279802d5b070cbede60b78313e13b2743d7 100644 >--- a/Source/WebCore/ChangeLog >+++ b/Source/WebCore/ChangeLog >@@ -1,3 +1,21 @@ >+2018-08-29 Aditya Keerthi <akeerthi@apple.com> >+ >+ [iOS] Update color picker to match design feedback >+ https://bugs.webkit.org/show_bug.cgi?id=189092 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ Updated color wells on iOS to follow design guidelines. The swatch now has >+ rounded corners to match the macOS appearance. Furthermore, a focus state >+ was added to make it clear which color well is being modified when there >+ are multiple wells on a page. >+ >+ Rebaselined existing layout test: fast/forms/color/input-appearance-color.html >+ >+ * css/html.css: >+ (input[type="color"]:focus): >+ (input[type="color"]::-webkit-color-swatch-wrapper): >+ > 2018-08-29 David Kilzer <ddkilzer@apple.com> > > Remove empty directories from from svn.webkit.org repository >diff --git a/Source/WebKit/ChangeLog b/Source/WebKit/ChangeLog >index bf2a8bae103d8cb01315ad1a7889a54e455e8a61..b87e1a8f3d0a576f8bb7ab9d817964d421720485 100644 >--- a/Source/WebKit/ChangeLog >+++ b/Source/WebKit/ChangeLog >@@ -1,3 +1,28 @@ >+2018-08-29 Aditya Keerthi <akeerthi@apple.com> >+ >+ [iOS] Update color picker to match design feedback >+ https://bugs.webkit.org/show_bug.cgi?id=189092 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ On iPad, the corners of the color picker should not be rounded. Instead, we use >+ square corners and introduce a margin so that the corners are not cropped. This >+ matches the interface on macOS. >+ >+ On iPhone, the color picker should have a margin, as an edge-to-edge design is >+ no longer preferred. Furthermore, we must respect the safe area on iPhone X. >+ >+ In order to achieve these requirements, the layout logic was switched from >+ frame-based to constraint-based. Additionally, one rows of colors was removed on >+ iPhones, in order to prevent the keyboard from becoming too large. >+ >+ * UIProcess/ios/forms/WKFormColorControl.mm: >+ (-[WKColorPopover initWithView:]): >+ * UIProcess/ios/forms/WKFormColorPicker.mm: >+ (+[WKColorPicker defaultColorMatrix]): >+ (-[WKColorPicker initWithView:]): >+ (-[WKColorPicker drawSelectionIndicatorForColorButton:]): >+ > 2018-08-28 Don Olmstead <don.olmstead@sony.com> > > [CMake] Use CMake's FindFreetype >diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css >index 26c7886a24c035ebd619900ff7aaf786df303582..70ff89962e49d0a68536fe30e478a6511c81cd10 100644 >--- a/Source/WebCore/css/html.css >+++ b/Source/WebCore/css/html.css >@@ -894,9 +894,19 @@ input[type="color"] { > outline: none; > } > >+#if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS >+input[type="color"]:focus { >+ border-color: rgb(17, 46, 135); >+} >+#endif >+ > input[type="color"]::-webkit-color-swatch-wrapper { > display: flex; >+#if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS >+ padding: 3px 0px 2px; >+#else > padding: 4px 2px 5px; >+#endif > box-sizing: border-box; > width: 100%; > height: 100%; >diff --git a/Source/WebKit/UIProcess/ios/forms/WKFormColorControl.mm b/Source/WebKit/UIProcess/ios/forms/WKFormColorControl.mm >index 609bac31f56aa5aaebf03c2e318c1554a58e95a7..c4a603ef32082a0e7f987a3da99bdea85ba5429f 100644 >--- a/Source/WebKit/UIProcess/ios/forms/WKFormColorControl.mm >+++ b/Source/WebKit/UIProcess/ios/forms/WKFormColorControl.mm >@@ -35,8 +35,7 @@ > > #pragma mark - WKColorPopover > >-static const CGFloat colorPopoverWidth = 290; >-static const CGFloat colorPopoverCornerRadius = 9; >+static const CGFloat colorPopoverWidth = 300; > > @interface WKColorPopover : WKFormRotatingAccessoryPopover<WKFormControl> { > RetainPtr<NSObject<WKFormControl>> _innerControl; >@@ -55,16 +54,11 @@ static const CGFloat colorPopoverCornerRadius = 9; > _innerControl = adoptNS([[WKColorPicker alloc] initWithView:view]); > > RetainPtr<UIViewController> popoverViewController = adoptNS([[UIViewController alloc] init]); >- RetainPtr<UIView> controlContainerView = adoptNS([[UIView alloc] initWithFrame:CGRectMake(0, 0, colorPopoverWidth, colorPopoverWidth)]); >+ [popoverViewController setViewRespectsSystemMinimumLayoutMargins:NO]; > > UIView *controlView = [_innerControl controlView]; >- [controlView setCenter:[controlContainerView center]]; >- [controlView.layer setCornerRadius:colorPopoverCornerRadius]; >- [controlView setClipsToBounds:YES]; >- [controlContainerView addSubview:controlView]; >- >- [popoverViewController setView:controlContainerView.get()]; >- [popoverViewController setPreferredContentSize:[controlContainerView size]]; >+ [popoverViewController setView:controlView]; >+ [popoverViewController setPreferredContentSize:CGSizeMake(colorPopoverWidth, colorPopoverWidth)]; > > #pragma clang diagnostic push > #pragma clang diagnostic ignored "-Wdeprecated-declarations" >diff --git a/Source/WebKit/UIProcess/ios/forms/WKFormColorPicker.mm b/Source/WebKit/UIProcess/ios/forms/WKFormColorPicker.mm >index 48e7a799ec2848e523cc2861033f349496f37eb7..5d02a2a5537b1eb026cec309cc6c768f0230d5fe 100644 >--- a/Source/WebKit/UIProcess/ios/forms/WKFormColorPicker.mm >+++ b/Source/WebKit/UIProcess/ios/forms/WKFormColorPicker.mm >@@ -40,11 +40,10 @@ > SOFT_LINK_PRIVATE_FRAMEWORK(PencilKit) > SOFT_LINK_CLASS(PencilKit, PKColorMatrixView) > >-static const CGFloat additionalKeyboardAffordance = 80; >-static const CGFloat colorSelectionIndicatorBorderWidth = 4; >-static const CGFloat colorSelectionIndicatorCornerRadius = 9; >-static const CGFloat pickerWidthForPopover = 280; >-static const CGFloat topColorMatrixPadding = 5; >+static const CGFloat additionalKeyboardAffordance = 55; >+static const CGFloat colorSelectionIndicatorBorderWidth = 2; >+static const CGFloat pickerWidthForPopover = 300; >+static const CGFloat topColorMatrixPadding = 10; > #if ENABLE(DATALIST_ELEMENT) > static const size_t maxColorSuggestions = 12; > #endif >@@ -91,11 +90,6 @@ using namespace WebKit; > > @implementation WKColorMatrixView > >-- (instancetype)initWithFrame:(CGRect)frame >-{ >- return [self initWithFrame:frame colorMatrix:[getPKColorMatrixViewClass() defaultColorMatrix]]; >-} >- > - (instancetype)initWithFrame:(CGRect)frame colorMatrix:(NSArray<NSArray<UIColor *> *> *)matrix > { > if (!(self = [super initWithFrame:frame])) >@@ -154,7 +148,6 @@ using namespace WebKit; > RetainPtr<UIView> _colorPicker; > > RetainPtr<UIView> _colorSelectionIndicator; >- RetainPtr<CAShapeLayer> _colorSelectionIndicatorBorder; > > RetainPtr<WKColorMatrixView> _topColorMatrix; > RetainPtr<WKColorMatrixView> _mainColorMatrix; >@@ -163,6 +156,16 @@ using namespace WebKit; > RetainPtr<UIPanGestureRecognizer> _colorPanGR; > } > >++ (NSArray<NSArray<UIColor *> *> *)defaultColorMatrix >+{ >+ NSArray *defaultColorMatrix = [getPKColorMatrixViewClass() defaultColorMatrix]; >+ >+ if (currentUserInterfaceIdiomIsPad()) >+ return defaultColorMatrix; >+ >+ return [defaultColorMatrix subarrayWithRange:NSMakeRange(0, defaultColorMatrix.count - 1)]; >+} >+ > + (NSArray<NSArray<UIColor *> *> *)defaultTopColorMatrix > { > return @[ @[ UIColor.redColor, UIColor.orangeColor, UIColor.yellowColor, UIColor.greenColor, UIColor.cyanColor, UIColor.blueColor, UIColor.magentaColor, UIColor.purpleColor, UIColor.brownColor, UIColor.whiteColor, UIColor.grayColor, UIColor.blackColor ] ]; >@@ -175,25 +178,30 @@ using namespace WebKit; > > _view = view; > >+ NSArray<NSArray<UIColor *> *> *topColorMatrix = [[self class] defaultTopColorMatrix]; >+ NSArray<NSArray<UIColor *> *> *defaultColorMatrix = [[self class] defaultColorMatrix]; >+ CGFloat totalRows = defaultColorMatrix.count + topColorMatrix.count; >+ > CGSize colorPickerSize; >- if (currentUserInterfaceIdiomIsPad()) >+ UIEdgeInsets colorPickerMargins; >+ CGFloat swatchHeight; >+ >+ if (currentUserInterfaceIdiomIsPad()) { > colorPickerSize = CGSizeMake(pickerWidthForPopover, pickerWidthForPopover); >- else { >+ colorPickerMargins = UIEdgeInsetsMake(topColorMatrixPadding, topColorMatrixPadding, topColorMatrixPadding, topColorMatrixPadding); >+ swatchHeight = (colorPickerSize.height - topColorMatrixPadding * 3) / totalRows; >+ } else { >+ UIEdgeInsets safeAreaInsets; >+#if __IPHONE_OS_VERSION_MIN_REQUIRED >= 110000 >+ safeAreaInsets = view.superview.safeAreaInsets; >+#endif > CGSize keyboardSize = [UIKeyboard defaultSizeForInterfaceOrientation:[UIApp interfaceOrientation]]; >- colorPickerSize = CGSizeMake(keyboardSize.width, keyboardSize.height + additionalKeyboardAffordance); >+ colorPickerSize = CGSizeMake(keyboardSize.width, keyboardSize.height + additionalKeyboardAffordance + safeAreaInsets.bottom); >+ swatchHeight = (colorPickerSize.height - topColorMatrixPadding - safeAreaInsets.bottom) / totalRows; > } > > _colorPicker = adoptNS([[UIView alloc] initWithFrame:CGRectMake(0, 0, colorPickerSize.width, colorPickerSize.height)]); >- >- CGFloat totalRows = [[getPKColorMatrixViewClass() defaultColorMatrix] count] + 1; >- CGFloat swatchHeight = (colorPickerSize.height - topColorMatrixPadding) / totalRows; >- >- _mainColorMatrix = adoptNS([[WKColorMatrixView alloc] initWithFrame:CGRectMake(0, swatchHeight + topColorMatrixPadding, colorPickerSize.width, swatchHeight * (totalRows - 1))]); >- [_mainColorMatrix setAutoresizingMask:UIViewAutoresizingFlexibleWidth]; >- [_mainColorMatrix setDelegate:self]; >- [_colorPicker addSubview:_mainColorMatrix.get()]; >- >- NSArray<NSArray<UIColor *> *> *topColorMatrix = [[self class] defaultTopColorMatrix]; >+ [_colorPicker setLayoutMargins:colorPickerMargins]; > > #if ENABLE(DATALIST_ELEMENT) > size_t numColorSuggestions = view.assistedNodeInformation.suggestedColors.size(); >@@ -207,21 +215,37 @@ using namespace WebKit; > } > #endif > >- _topColorMatrix = adoptNS([[WKColorMatrixView alloc] initWithFrame:CGRectMake(0, 0, colorPickerSize.width, swatchHeight) colorMatrix:topColorMatrix]); >- [_topColorMatrix setAutoresizingMask:UIViewAutoresizingFlexibleWidth]; >+ _topColorMatrix = adoptNS([[WKColorMatrixView alloc] initWithFrame:CGRectZero colorMatrix:topColorMatrix]); >+ [_topColorMatrix setLayoutMargins:UIEdgeInsetsZero]; >+ [_topColorMatrix setTranslatesAutoresizingMaskIntoConstraints:NO]; > [_topColorMatrix setDelegate:self]; > [_colorPicker addSubview:_topColorMatrix.get()]; > >+ _mainColorMatrix = adoptNS([[WKColorMatrixView alloc] initWithFrame:CGRectZero colorMatrix:defaultColorMatrix]); >+ [_mainColorMatrix setLayoutMargins:UIEdgeInsetsZero]; >+ [_mainColorMatrix setTranslatesAutoresizingMaskIntoConstraints:NO]; >+ [_mainColorMatrix setDelegate:self]; >+ [_colorPicker addSubview:_mainColorMatrix.get()]; >+ >+ UILayoutGuide *pickerLayoutMarginsGuide = [_colorPicker layoutMarginsGuide]; >+ [NSLayoutConstraint activateConstraints:@[ >+ [[_topColorMatrix topAnchor] constraintEqualToAnchor:pickerLayoutMarginsGuide.topAnchor], >+ [[_topColorMatrix leadingAnchor] constraintEqualToAnchor:pickerLayoutMarginsGuide.leadingAnchor], >+ [[_topColorMatrix trailingAnchor] constraintEqualToAnchor:pickerLayoutMarginsGuide.trailingAnchor], >+ [[_topColorMatrix heightAnchor] constraintEqualToConstant:swatchHeight] >+ ]]; >+ [NSLayoutConstraint activateConstraints:@[ >+ [[_mainColorMatrix topAnchor] constraintEqualToAnchor:[_topColorMatrix layoutMarginsGuide].bottomAnchor constant:topColorMatrixPadding], >+ [[_mainColorMatrix leadingAnchor] constraintEqualToAnchor:pickerLayoutMarginsGuide.leadingAnchor], >+ [[_mainColorMatrix trailingAnchor] constraintEqualToAnchor:pickerLayoutMarginsGuide.trailingAnchor], >+ [[_mainColorMatrix bottomAnchor] constraintEqualToAnchor:pickerLayoutMarginsGuide.bottomAnchor] >+ ]]; >+ > _colorSelectionIndicator = adoptNS([[UIView alloc] initWithFrame:CGRectZero]); >- [_colorSelectionIndicator setClipsToBounds:YES]; >+ [[_colorSelectionIndicator layer] setBorderColor:[UIColor whiteColor].CGColor]; >+ [[_colorSelectionIndicator layer] setBorderWidth:colorSelectionIndicatorBorderWidth]; > [_colorPicker addSubview:_colorSelectionIndicator.get()]; > >- _colorSelectionIndicatorBorder = adoptNS([[CAShapeLayer alloc] init]); >- [_colorSelectionIndicatorBorder setLineWidth:colorSelectionIndicatorBorderWidth]; >- [_colorSelectionIndicatorBorder setStrokeColor:[UIColor whiteColor].CGColor]; >- [_colorSelectionIndicatorBorder setFillColor:[UIColor clearColor].CGColor]; >- [[_colorSelectionIndicator layer] addSublayer:_colorSelectionIndicatorBorder.get()]; >- > _colorPanGR = adoptNS([[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(didPanColors:)]); > [_colorPicker addGestureRecognizer:_colorPanGR.get()]; > >@@ -231,33 +255,7 @@ using namespace WebKit; > - (void)drawSelectionIndicatorForColorButton:(WKColorButton *)colorButton > { > _selectedColorButton = colorButton; >- >- CGRect frame = [_colorPicker convertRect:colorButton.bounds fromView:colorButton]; >- [_colorSelectionIndicator setFrame:frame]; >- >- UIRectCorner roundCorner = 0; >- if (currentUserInterfaceIdiomIsPad()) { >- CGRect colorPickerBounds = [_colorPicker bounds]; >- >- bool minXEqual = std::abs(CGRectGetMinX(frame) - CGRectGetMinX(colorPickerBounds)) < FLT_EPSILON; >- bool minYEqual = std::abs(CGRectGetMinY(frame) - CGRectGetMinY(colorPickerBounds)) < FLT_EPSILON; >- bool maxXEqual = std::abs(CGRectGetMaxX(frame) - CGRectGetMaxX(colorPickerBounds)) < FLT_EPSILON; >- bool maxYEqual = std::abs(CGRectGetMaxY(frame) - CGRectGetMaxY(colorPickerBounds)) < FLT_EPSILON; >- >- // On iPad, round the corners of the indicator that border the corners of the picker, to match the popover. >- if (minXEqual && minYEqual) >- roundCorner |= UIRectCornerTopLeft; >- if (maxXEqual && minYEqual) >- roundCorner |= UIRectCornerTopRight; >- if (minXEqual && maxYEqual) >- roundCorner |= UIRectCornerBottomLeft; >- if (maxXEqual && maxYEqual) >- roundCorner |= UIRectCornerBottomRight; >- } >- >- UIBezierPath *cornerMaskPath = [UIBezierPath bezierPathWithRoundedRect:colorButton.bounds byRoundingCorners:roundCorner cornerRadii:CGSizeMake(colorSelectionIndicatorCornerRadius, colorSelectionIndicatorCornerRadius)]; >- [_colorSelectionIndicatorBorder setFrame:colorButton.bounds]; >- [_colorSelectionIndicatorBorder setPath:cornerMaskPath.CGPath]; >+ [_colorSelectionIndicator setFrame:[_colorPicker convertRect:colorButton.bounds fromView:colorButton]]; > } > > - (void)setControlValueFromUIColor:(UIColor *)uiColor >diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog >index 4b4ed54d784f72ee68683dba08ee4096769b2e81..63cfe1e25b3430703ba15d8f9a0744b2d765b81a 100644 >--- a/LayoutTests/ChangeLog >+++ b/LayoutTests/ChangeLog >@@ -1,3 +1,12 @@ >+2018-08-29 Aditya Keerthi <akeerthi@apple.com> >+ >+ [iOS] Update color picker to match design feedback >+ https://bugs.webkit.org/show_bug.cgi?id=189092 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ * platform/ios/fast/forms/color/input-appearance-color-expected.txt: Rebaseline. >+ > 2018-08-29 Ali Juma <ajuma@chromium.org> > > [mac-wk1] Mark three IntersectionObserver web platform tests as flaky >diff --git a/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt b/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt >index 7bdec7682f318d70dd84da80c18d5b2a76e605e6..94cf0ebfd301b26642afdaec324f8c50e7707ac3 100644 >--- a/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt >+++ b/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt >@@ -6,144 +6,110 @@ layer at (0,0) size 800x600 > RenderBlock {H3} at (0,0) size 784x23 > RenderText {#text} at (0,0) size 164x22 > text run at (0,0) width 164: "Default Appearance" >- RenderBlock (anonymous) at (0,41) size 784x46 >+ RenderBlock (anonymous) at (0,41) size 784x44 > RenderText {#text} at (0,0) size 457x19 > text run at (0,0) width 457: "List color controls have different appearance if ENABLE(DATALIST)." > RenderBR {BR} at (456,15) size 1x0 >- RenderTextControl {INPUT} at (2,22) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderTextControl {INPUT} at (141,22) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderBlock {INPUT} at (0,20) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#000000] >+ RenderBlock {INPUT} at (44,20) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#000000] > RenderText {#text} at (0,0) size 0x0 >- RenderBlock {H3} at (0,105) size 784x24 >+ RenderBlock {H3} at (0,103) size 784x24 > RenderText {#text} at (0,0) size 162x22 > text run at (0,0) width 162: "Different Font Sizes" >- RenderBlock (anonymous) at (0,147) size 784x82 >+ RenderBlock (anonymous) at (0,145) size 784x47 > RenderText {#text} at (0,0) size 590x19 > text run at (0,0) width 590: "List color controls have different sizes depending on font sizes. Normal color controls don't." > RenderBR {BR} at (589,15) size 1x0 >- RenderTextControl {INPUT} at (2,22) size 221x33 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (224,28) size 5x19 >- text run at (224,28) width 5: " " >- RenderTextControl {INPUT} at (230,29) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (367,28) size 5x19 >- text run at (367,28) width 5: " " >- RenderTextControl {INPUT} at (371,32) size 100x17 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (470,28) size 5x19 >- text run at (470,28) width 5: " " >- RenderTextControl {INPUT} at (476,22) size 221x33 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (698,28) size 5x19 >- text run at (698,28) width 5: " " >- RenderTextControl {INPUT} at (2,58) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (139,57) size 5x19 >- text run at (139,57) width 5: " " >- RenderTextControl {INPUT} at (143,61) size 100x17 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderBlock {INPUT} at (0,23) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (10,4) size 24x13 >+ RenderBlock {DIV} at (0,3) size 24x8 [bgcolor=#00FF00] >+ RenderText {#text} at (44,22) size 4x19 >+ text run at (44,22) width 4: " " >+ RenderBlock {INPUT} at (48,21) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#00FF00] >+ RenderText {#text} at (92,22) size 4x19 >+ text run at (92,22) width 4: " " >+ RenderBlock {INPUT} at (96,20) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (5,2) size 34x18 >+ RenderBlock {DIV} at (0,3) size 34x13 [bgcolor=#00FF00] >+ RenderText {#text} at (140,22) size 4x19 >+ text run at (140,22) width 4: " " >+ RenderBlock {INPUT} at (144,23) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (10,4) size 24x13 >+ RenderBlock {DIV} at (0,3) size 24x8 [bgcolor=#00FF00] >+ RenderText {#text} at (188,22) size 4x19 >+ text run at (188,22) width 4: " " >+ RenderBlock {INPUT} at (192,21) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#00FF00] >+ RenderText {#text} at (236,22) size 4x19 >+ text run at (236,22) width 4: " " >+ RenderBlock {INPUT} at (240,20) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (5,2) size 34x18 >+ RenderBlock {DIV} at (0,3) size 34x13 [bgcolor=#00FF00] > RenderText {#text} at (0,0) size 0x0 >- RenderBlock {H3} at (0,246) size 784x24 >+ RenderBlock {H3} at (0,209) size 784x24 > RenderText {#text} at (0,0) size 122x22 > text run at (0,0) width 122: "Various Colors" >- RenderBlock (anonymous) at (0,288) size 784x51 >- RenderTextControl {INPUT} at (2,2) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (139,1) size 5x19 >- text run at (139,1) width 5: " " >- RenderTextControl {INPUT} at (145,2) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (282,1) size 5x19 >- text run at (282,1) width 5: " " >- RenderTextControl {INPUT} at (288,2) size 137x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (426,1) size 5x19 >- text run at (426,1) width 5: " " >- RenderTextControl {INPUT} at (432,2) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (569,1) size 5x19 >- text run at (569,1) width 5: " " >- RenderTextControl {INPUT} at (575,2) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (712,1) size 5x19 >- text run at (712,1) width 5: " " >- RenderTextControl {INPUT} at (2,27) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (139,26) size 5x19 >- text run at (139,26) width 5: " " >- RenderTextControl {INPUT} at (145,27) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (282,26) size 5x19 >- text run at (282,26) width 5: " " >- RenderTextControl {INPUT} at (288,27) size 137x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (426,26) size 5x19 >- text run at (426,26) width 5: " " >- RenderTextControl {INPUT} at (432,27) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >- RenderText {#text} at (569,26) size 5x19 >- text run at (569,26) width 5: " " >- RenderTextControl {INPUT} at (575,27) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderBlock (anonymous) at (0,251) size 784x24 >+ RenderBlock {INPUT} at (0,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#FF0000] >+ RenderText {#text} at (44,1) size 4x19 >+ text run at (44,1) width 4: " " >+ RenderBlock {INPUT} at (48,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#00FF00] >+ RenderText {#text} at (92,1) size 4x19 >+ text run at (92,1) width 4: " " >+ RenderBlock {INPUT} at (96,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#0000FF] >+ RenderText {#text} at (140,1) size 4x19 >+ text run at (140,1) width 4: " " >+ RenderBlock {INPUT} at (144,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#EC008C] >+ RenderText {#text} at (188,1) size 4x19 >+ text run at (188,1) width 4: " " >+ RenderBlock {INPUT} at (192,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#40E0D0] >+ RenderText {#text} at (236,1) size 4x19 >+ text run at (236,1) width 4: " " >+ RenderBlock {INPUT} at (240,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#FF0000] >+ RenderText {#text} at (284,1) size 4x19 >+ text run at (284,1) width 4: " " >+ RenderBlock {INPUT} at (288,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#00FF00] >+ RenderText {#text} at (332,1) size 4x19 >+ text run at (332,1) width 4: " " >+ RenderBlock {INPUT} at (336,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#0000FF] >+ RenderText {#text} at (380,1) size 4x19 >+ text run at (380,1) width 4: " " >+ RenderBlock {INPUT} at (384,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#EC008C] >+ RenderText {#text} at (428,1) size 4x19 >+ text run at (428,1) width 4: " " >+ RenderBlock {INPUT} at (432,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 32x16 >+ RenderBlock {DIV} at (0,3) size 31x11 [bgcolor=#40E0D0] > RenderText {#text} at (0,0) size 0x0 >- RenderBlock {H3} at (0,357) size 784x24 >+ RenderBlock {H3} at (0,293) size 784x24 > RenderText {#text} at (0,0) size 118x22 > text run at (0,0) width 118: "Arbitrary Size" >- RenderBlock (anonymous) at (0,399) size 784x31 >- RenderTextControl {INPUT} at (0,0) size 100x30 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >-layer at (17,75) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >-layer at (156,75) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >-layer at (20,182) size 200x22 >- RenderBlock {DIV} at (10,4) size 201x23 >- RenderText {#text} at (0,0) size 73x22 >- text run at (0,0) width 73: "#00FF00" >-layer at (245,187) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 45x14 >- text run at (0,0) width 45: "#00FF00" >-layer at (385,190) size 89x11 >- RenderBlock {DIV} at (5,2) size 89x12 >- RenderText {#text} at (0,0) size 33x11 >- text run at (0,0) width 33: "#00FF00" >-layer at (495,182) size 200x22 >- RenderBlock {DIV} at (10,4) size 201x23 >- RenderText {#text} at (0,0) size 73x22 >- text run at (0,0) width 73: "#00FF00" >-layer at (17,216) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 45x14 >- text run at (0,0) width 45: "#00FF00" >-layer at (156,219) size 89x11 >- RenderBlock {DIV} at (5,2) size 89x12 >- RenderText {#text} at (0,0) size 33x11 >- text run at (0,0) width 33: "#00FF00" >-layer at (17,302) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 45x14 >- text run at (0,0) width 45: "#FF0000" >-layer at (160,302) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 45x14 >- text run at (0,0) width 45: "#00FF00" >-layer at (303,302) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 45x14 >- text run at (0,0) width 45: "#0000FF" >-layer at (447,302) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 48x14 >- text run at (0,0) width 48: "#EC008C" >-layer at (590,302) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 43x14 >- text run at (0,0) width 43: "#40e0d0" >-layer at (17,327) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 45x14 >- text run at (0,0) width 45: "#FF0000" >-layer at (160,327) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 45x14 >- text run at (0,0) width 45: "#00FF00" >-layer at (303,327) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 45x14 >- text run at (0,0) width 45: "#0000FF" >-layer at (447,327) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 48x14 >- text run at (0,0) width 48: "#EC008C" >-layer at (590,327) size 122x14 >- RenderBlock {DIV} at (6,3) size 123x15 >- RenderText {#text} at (0,0) size 43x14 >- text run at (0,0) width 43: "#40e0d0" >-layer at (15,414) size 87x14 >- RenderBlock {DIV} at (6,7) size 88x15 >- RenderText {#text} at (0,0) size 45x14 >- text run at (0,0) width 45: "#FF0000" >+ RenderBlock (anonymous) at (0,335) size 784x31 >+ RenderBlock {INPUT} at (0,0) size 100x30 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)] >+ RenderFlexibleBox {DIV} at (6,3) size 88x23 >+ RenderBlock {DIV} at (0,3) size 87x18 [bgcolor=#FF0000]
<b>You cannot view the attachment while viewing its details because your browser does not support IFRAMEs. <a href="attachment.cgi?id=348419">View the attachment on a separate page</a>.</b>
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 189092
:
348419
|
348429
|
348453