From 1e4970406220e91d755ac27636c1fdb069644f0e Mon Sep 17 00:00:00 2001 From: Alexander Ljungberg Date: Wed, 15 Aug 2012 15:36:15 +0100 Subject: [PATCH 1/5] Fixed: the size with string fix broke `metricsOfFont:`. --- AppKit/Platform/DOM/CPPlatformString.j | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/AppKit/Platform/DOM/CPPlatformString.j b/AppKit/Platform/DOM/CPPlatformString.j index 34929ad7b..0f6e7731d 100644 --- a/AppKit/Platform/DOM/CPPlatformString.j +++ b/AppKit/Platform/DOM/CPPlatformString.j @@ -135,8 +135,8 @@ var DOMFixedWidthSpanElement = nil, style.border = "none"; style.verticalAlign = "baseline"; - bodyElement.appendChild(DOMMetricsTextSpanElement); - bodyElement.appendChild(DOMMetricsImgElement); + DOMMetricsDivElement.appendChild(DOMMetricsTextSpanElement); + DOMMetricsDivElement.appendChild(DOMMetricsImgElement); } + (CGSize)sizeOfString:(CPString)aString withFont:(CPFont)aFont forWidth:(float)aWidth From d53b8c5b1fd485f73087c3efc2d3fe4bba34065d Mon Sep 17 00:00:00 2001 From: Alexander Ljungberg Date: Wed, 15 Aug 2012 17:13:34 +0100 Subject: [PATCH 2/5] Fixed: in Firefox the text of edited text fields would "jump" down 1 px. Locking down the line height and vertical alignment explicitly seems to work in Safari 6, Chrome 21, Firefox 14 and IE 8 (although Chrome and IE exhibit some unrelated horizontal jumping.) --- AppKit/CPTextField.j | 4 +++- AppKit/_CPImageAndTextView.j | 14 +++++++++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/AppKit/CPTextField.j b/AppKit/CPTextField.j index 8fb8cab56..8c7bab766 100644 --- a/AppKit/CPTextField.j +++ b/AppKit/CPTextField.j @@ -546,7 +546,9 @@ CPTextFieldStatePlaceholder = CPThemeState("placeholder"); element.style.top = topPoint; element.style.left = (_CGRectGetMinX(contentRect) - 1) + "px"; // -1 because input element seems to have 1px left inset element.style.width = _CGRectGetWidth(contentRect) + "px"; - element.style.height = lineHeight + "px"; + element.style.height = ROUND(lineHeight) + "px"; + element.style.lineHeight = ROUND(lineHeight) + "px"; + element.style.verticalAlign = @"top"; _DOMElement.appendChild(element); diff --git a/AppKit/_CPImageAndTextView.j b/AppKit/_CPImageAndTextView.j index 4a33f2201..c12661d1e 100644 --- a/AppKit/_CPImageAndTextView.j +++ b/AppKit/_CPImageAndTextView.j @@ -432,13 +432,15 @@ var _CPimageAndTextViewFrameSizeChangedFlag = 1 << 0, { _DOMTextShadowElement = document.createElement("div"); - var shadowStyle = _DOMTextShadowElement.style; + var shadowStyle = _DOMTextShadowElement.style, + font = (_font || [CPFont systemFontOfSize:CPFontCurrentSystemSize]); - shadowStyle.font = [(_font || [CPFont systemFontOfSize:CPFontCurrentSystemSize]) cssString]; + shadowStyle.font = [font cssString]; shadowStyle.position = "absolute"; shadowStyle.whiteSpace = textStyle.whiteSpace; shadowStyle.wordWrap = textStyle.wordWrap; shadowStyle.color = [_textShadowColor cssString]; + shadowStyle.lineHeight = [font defaultLineHeightForFont] + "px"; shadowStyle.zIndex = 150; shadowStyle.textOverflow = textStyle.textOverflow; @@ -484,11 +486,16 @@ var _CPimageAndTextViewFrameSizeChangedFlag = 1 << 0, if (_flags & _CPImageAndTextViewFontChangedFlag) { - var fontStyle = [(_font || [CPFont systemFontOfSize:CPFontCurrentSystemSize]) cssString]; + var font = (_font || [CPFont systemFontOfSize:CPFontCurrentSystemSize]), + fontStyle = [font cssString]; textStyle.font = fontStyle; + textStyle.lineHeight = [font defaultLineHeightForFont] + "px"; if (shadowStyle) + { shadowStyle.font = fontStyle; + shadowStyle.lineHeight = [font defaultLineHeightForFont] + "px"; + } } // Update the line break mode if necessary. @@ -713,6 +720,7 @@ var _CPimageAndTextViewFrameSizeChangedFlag = 1 << 0, textStyle.left = ROUND(textRectX) + "px"; textStyle.width = MAX(CEIL(textRectWidth), 0) + "px"; textStyle.height = MAX(CEIL(textRectHeight), 0) + "px"; + textStyle.verticalAlign = @"top"; if (shadowStyle) { From ca3a4f9b9c4bdcee0bfb329349b8dd0f2c713ce9 Mon Sep 17 00:00:00 2001 From: Alexander Ljungberg Date: Wed, 15 Aug 2012 18:12:53 +0100 Subject: [PATCH 3/5] Fixed: text field font size while editing was wrong in Internet Explorer. Tested in Internet Explorer 8 and 9. --- AppKit/CPCompatibility.j | 7 +++++++ AppKit/CPTextField.j | 7 ++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/AppKit/CPCompatibility.j b/AppKit/CPCompatibility.j index 1b05ed895..1791b3567 100644 --- a/AppKit/CPCompatibility.j +++ b/AppKit/CPCompatibility.j @@ -67,6 +67,9 @@ CPHTML5DragAndDropSourceYOffBy1 = 1 << 26; CPSOPDisabledFromFileURLs = 1 << 27; +// element.style.font can be set for an element not in the DOM. +CPInputSetFontOutsideOfDOM = 1 << 28; + var USER_AGENT = "", PLATFORM_ENGINE = CPUnknownBrowserEngine, PLATFORM_FEATURES = 0; @@ -74,6 +77,7 @@ var USER_AGENT = "", // default these features to true PLATFORM_FEATURES |= CPInputTypeCanBeChangedFeature; +PLATFORM_FEATURES |= CPInputSetFontOutsideOfDOM; if (typeof window !== "undefined" && typeof window.navigator !== "undefined") USER_AGENT = window.navigator.userAgent; @@ -99,6 +103,9 @@ else if (typeof window !== "undefined" && window.attachEvent) // Must follow Ope PLATFORM_FEATURES |= CPOpacityRequiresFilterFeature; PLATFORM_FEATURES &= ~CPInputTypeCanBeChangedFeature; + + // Tested in Internet Explore 8 and 9. + PLATFORM_FEATURES &= ~CPInputSetFontOutsideOfDOM; } // WebKit diff --git a/AppKit/CPTextField.j b/AppKit/CPTextField.j index 8c7bab766..47f2511ee 100644 --- a/AppKit/CPTextField.j +++ b/AppKit/CPTextField.j @@ -509,7 +509,8 @@ CPTextFieldStatePlaceholder = CPThemeState("placeholder"); element.value = _stringValue; element.style.color = [[self currentValueForThemeAttribute:@"text-color"] cssString]; - element.style.font = [font cssString]; + if (CPFeatureIsCompatible(CPInputSetFontOutsideOfDOM)) + element.style.font = [font cssString]; element.style.zIndex = 1000; switch ([self alignment]) @@ -552,6 +553,10 @@ CPTextFieldStatePlaceholder = CPThemeState("placeholder"); _DOMElement.appendChild(element); + // The font change above doesn't work for some browsers if the element isn't already .appendChild'ed. + if (!CPFeatureIsCompatible(CPInputSetFontOutsideOfDOM)) + element.style.font = [font cssString]; + window.setTimeout(function() { element.focus(); From 54d5f4b0a44d1038193371ff7b3dd980f2ce3a9f Mon Sep 17 00:00:00 2001 From: Alexander Ljungberg Date: Wed, 15 Aug 2012 18:31:20 +0100 Subject: [PATCH 4/5] Fixed: horizontal text jump when editing text fields in some browsers. We were compensating for a bug in Safari, older versions of Chrome and Firefox in our input placement. But new Chrome and neither IE 8 nor IE 9 needed it which resulted in the text being off in those browsers. --- AppKit/CPCompatibility.j | 10 ++++++++++ AppKit/CPTextField.j | 6 +++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/AppKit/CPCompatibility.j b/AppKit/CPCompatibility.j index 1791b3567..d2a8b0279 100644 --- a/AppKit/CPCompatibility.j +++ b/AppKit/CPCompatibility.j @@ -70,6 +70,9 @@ CPSOPDisabledFromFileURLs = 1 << 27; // element.style.font can be set for an element not in the DOM. CPInputSetFontOutsideOfDOM = 1 << 28; +// Input elements have 1 px of extra padding on the left regardless of padding setting. +CPInput1PxLeftPadding = 1 << 29; + var USER_AGENT = "", PLATFORM_ENGINE = CPUnknownBrowserEngine, PLATFORM_FEATURES = 0; @@ -142,6 +145,10 @@ else if (USER_AGENT.indexOf("AppleWebKit/") != -1) if (majorVersion < 532 || (majorVersion === 532 && minorVersion < 6)) PLATFORM_FEATURES |= CPHTML5DragAndDropSourceYOffBy1; + // This is supposedly fixed in webkit r123603. Seems to work in Chrome 21 but not Safari 6.0. + if (majorVersion < 537) + PLATFORM_FEATURES |= CPInput1PxLeftPadding; + if (USER_AGENT.indexOf("Chrome") === CPNotFound) PLATFORM_FEATURES |= CPSOPDisabledFromFileURLs; } @@ -167,6 +174,9 @@ else if (USER_AGENT.indexOf("Gecko") !== -1) // Must follow KHTML check. if (version < 3.0) PLATFORM_FEATURES |= CPJavaScriptMouseWheelValues_8_15; + + // Some day this might be fixed and should be version prefixed. No known fixed version yet. + PLATFORM_FEATURES |= CPInput1PxLeftPadding; } // Feature Specific Checks diff --git a/AppKit/CPTextField.j b/AppKit/CPTextField.j index 47f2511ee..8c0360197 100644 --- a/AppKit/CPTextField.j +++ b/AppKit/CPTextField.j @@ -545,7 +545,11 @@ CPTextFieldStatePlaceholder = CPThemeState("placeholder"); } element.style.top = topPoint; - element.style.left = (_CGRectGetMinX(contentRect) - 1) + "px"; // -1 because input element seems to have 1px left inset + var left = _CGRectGetMinX(contentRect); + // If the browser has a built in left padding, compensate for it. We need the input text to be exactly on top of the original text. + if (CPFeatureIsCompatible(CPInput1PxLeftPadding)) + left -= 1; + element.style.left = left + "px"; element.style.width = _CGRectGetWidth(contentRect) + "px"; element.style.height = ROUND(lineHeight) + "px"; element.style.lineHeight = ROUND(lineHeight) + "px"; From 1a467f92087c8aaca49c6eacbe519de1f08a18a6 Mon Sep 17 00:00:00 2001 From: Alexander Ljungberg Date: Wed, 15 Aug 2012 18:31:39 +0100 Subject: [PATCH 5/5] Test text fields with various sizes. --- Tests/Manual/CPTextField/AppController.j | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/Tests/Manual/CPTextField/AppController.j b/Tests/Manual/CPTextField/AppController.j index ccef231bd..11911d466 100644 --- a/Tests/Manual/CPTextField/AppController.j +++ b/Tests/Manual/CPTextField/AppController.j @@ -52,6 +52,28 @@ [contentView addSubview:shadowLabel]; [contentView addSubview:championOfLightLabel]; + var jumpLabel = [CPTextField labelWithTitle:@"The text of these text fields should not move when a field becomes the first responder."]; + + [jumpLabel sizeToFit]; + [jumpLabel setFrameOrigin:CGPointMake(15, 150)]; + [contentView addSubview:jumpLabel]; + + var y = CGRectGetMaxY([jumpLabel frame]) + 10; + + for (var i = 0; i < 5; i++) + { + var size = 10 + 3 * i, + textField = [CPTextField textFieldWithStringValue:@"Size " + size placeholder:@"Size " + size width:200]; + + [textField setFont:[CPFont systemFontOfSize:size]]; + [textField sizeToFit]; + [textField setFrameOrigin:CGPointMake(15, y)]; + + y = CGRectGetMaxY([textField frame]) + 6; + + [contentView addSubview:textField]; + } + [theWindow orderFront:self]; aWindow = [[CPWindow alloc] initWithContentRect:CGRectMake(150, 300, 400, 150) styleMask:CPTitledWindowMask | CPClosableWindowMask | CPDocModalWindowMask];