Fixed: Width of text sizing was slightly off in chrome due to a Chrome bug (#2975)

This is a real bug in chrome. see https://bugs.chromium.org/p/chromium/issues/detail?id=1192834

Also fixed: ellipsis clipping in segmented controls
and
fixed: tooltip wrapping issues from fractional pixels

AppKit/CPSegmentedControl.j

@@ -802,7 +802,8 @@ CPSegmentSwitchTrackingMomentary = 2;
             label = [segment label],
             image = [segment image];
 
-        width = (label ? [label sizeWithFont:[self font]].width : 4.0) + (image ? [image size].width : 0) + contentInsetWidth;
+        // add 1 pixel to account for possible fractional pixels at right edge
+        width = (label ? [label sizeWithFont:[self font]].width + 1 : 4.0) + (image ? [image size].width : 0) + contentInsetWidth;
     }
 
     return CGRectMake(left, top, width, height);

AppKit/CPStringDrawing.j

@@ -32,7 +32,7 @@ var CPStringSizeWithFontInWidthCache = [],
     CPStringSizeWithFontHeightCache = [],
     CPStringSizeMeasuringContext;
 
-CPStringSizeCachingEnabled = YES;
+CPCanvasStringSizingIsFunctional = NO;
 
 @implementation CPString (CPStringDrawing)
 
@@ -63,36 +63,42 @@ CPStringSizeCachingEnabled = YES;
         return;
 
 #if PLATFORM(DOM)
-    if (CPFeatureIsCompatible(CPHTMLCanvasFeature) && !CPStringSizeMeasuringContext)
-        CPStringSizeMeasuringContext = CGBitmapGraphicsContextCreate();
+    if (CPFeatureIsCompatible(CPHTMLCanvasFeature))
+    {
+        if (!CPStringSizeMeasuringContext)
+            CPStringSizeMeasuringContext = CGBitmapGraphicsContextCreate();
+
+        // This is to make sure that Canvas based string sizing is functional before we use it.
+        // Currently, Chrome has issues with certain strings, FF had issues in the past.
+        // Unfortunately, this test does fit in CPCompatibility.j where things are not sufficiently initialized.
+        
+        var testingFont = [CPFont systemFontOfSize:12];
+        var testingText = 'A A A A A A A A';
+        CPStringSizeMeasuringContext.font = [testingFont cssString];
+        CPCanvasStringSizingIsFunctional = ROUND(CPStringSizeMeasuringContext.measureText(testingText).width) == ROUND([CPPlatformString sizeOfString:testingText withFont:testingFont forWidth:NULL].width);
+    }
 #endif
 }
 
-- (CGSize)_sizeWithFont:(CPFont)aFont inWidth:(float)aWidth
+- (CGSize)sizeWithFont:(CPFont)aFont inWidth:(float)aWidth
 {
     var size;
 
 #if PLATFORM(DOM)
-    if (!CPStringSizeCachingEnabled)
-        return [CPPlatformString sizeOfString:self withFont:aFont forWidth:aWidth];
-
     var sizeCacheForFont = CPStringSizeWithFontInWidthCache[self];
 
     if (sizeCacheForFont === undefined)
         sizeCacheForFont = CPStringSizeWithFontInWidthCache[self] = [];
 
-    if (!aWidth)
-        aWidth = '0';
-
     var cssString = [aFont cssString],
-        cacheKey = cssString + '_' + aWidth;
+        cacheKey = cssString + '_' + (aWidth ? aWidth : '0');
 
     size = sizeCacheForFont[cacheKey];
 
     if (size !== undefined && sizeCacheForFont.hasOwnProperty(cacheKey))
         return CGSizeMakeCopy(size);
 
-    if (!CPFeatureIsCompatible(CPHTMLCanvasFeature) || aWidth > 0)
+    if (!CPCanvasStringSizingIsFunctional || aWidth)
         size = [CPPlatformString sizeOfString:self withFont:aFont forWidth:aWidth];
     else
     {
@@ -109,15 +115,9 @@ CPStringSizeCachingEnabled = YES;
 
     sizeCacheForFont[cacheKey] = size;
 #else
-        size = CGSizeMake(0, 0);
+    size = CGSizeMake(0, 0);
 #endif
     return CGSizeMakeCopy(size);
 }
 
-- (CGSize)sizeWithFont:(CPFont)aFont inWidth:(float)aWidth
-{
-    var size = [self _sizeWithFont:aFont inWidth:aWidth];
-    return CGSizeMake(CEIL(size.width), size.height);
-}
-
 @end

AppKit/CPTextField.j

@@ -1470,7 +1470,7 @@ CPTextFieldStatePlaceholder = CPThemeState("placeholder");
         ![self isBezeled]     &&
         (lineBreakMode === CPLineBreakByWordWrapping || lineBreakMode === CPLineBreakByCharWrapping))
     {
-        textSize = [text sizeWithFont:font inWidth:textSize.width];
+        textSize = [text sizeWithFont:font inWidth:textSize.width] + 1;
     }
     else
     {

AppKit/CPTextView/CPTypesetter.j

@@ -317,7 +317,7 @@ var CPSystemTypesetterFactory,
         measuringRange.length++;
 
         var currentCharCode = theString.charCodeAt(glyphIndex),  // use pure javascript methods for performance reasons
-            rangeWidth = [theString.substr(measuringRange.location, measuringRange.length) _sizeWithFont:currentFont inWidth:NULL].width + currentAnchor;
+            rangeWidth = [theString.substr(measuringRange.location, measuringRange.length) sizeWithFont:currentFont inWidth:NULL].width + currentAnchor;
 
         switch (currentCharCode)    // faster than sending actionForControlCharacterAtIndex: called for each char.
         {

AppKit/Platform/DOM/CPPlatformString.j

@@ -180,7 +180,7 @@ var DOMFixedWidthSpanElement    = nil,
     else if (CPFeatureIsCompatible(CPJavaScriptTextContentFeature))
         span.textContent = aString;
 
-    return CGSizeMake(span.clientWidth + 1, span.clientHeight);
+    return CGSizeMake(span.clientWidth, span.clientHeight);
 }
 
 + (CPDictionary)metricsOfFont:(CPFont)aFont

AppKit/_CPToolTip.j

@@ -118,6 +118,12 @@ var _CPToolTipHeight = 24.0,
         textFrameSizeSingleLine = [aText sizeWithFont:font],
         textFrameSize = [aText sizeWithFont:font inWidth:(aToolTipSize.width)];
 
+    // this small adjustement fixes
+    // tooltips wrapping issues from fractional pixels.
+    textFrameSizeSingleLine.width += 1;
+    textFrameSize.width += 1;
+
+
     // If the text fully fits within the maximum width, shrink to fit.
     if (textFrameSizeSingleLine.width < aToolTipSize.width)
     {

Tests/Manual/CPTextView/AppController.j

@@ -60,16 +60,16 @@
     [contentView addSubview:mybutton];
 
 
-    _textView = [[CPTextView alloc] initWithFrame:CGRectMake(0, 0, 500, 500)];
+    _textView = [[CPTextView alloc] initWithFrame:CGRectMake(0, 0, 500, 200)];
     [_textView setRichText:YES];
 
-    _textView2 = [[CPTextView alloc] initWithFrame:CGRectMake(0, 0, 500, 500)];
+    _textView2 = [[CPTextView alloc] initWithFrame:CGRectMake(0, 0, 1000, 200)];
     _textView2._isRichText = NO;
     [_textView setBackgroundColor:[CPColor whiteColor]];
     [_textView2 setBackgroundColor:[CPColor whiteColor]];
 
-    var scrollView = [[CPScrollView alloc] initWithFrame:CGRectMake(20, 70, 520, 510)];
-    var scrollView2 = [[CPScrollView alloc] initWithFrame:CGRectMake(560, 70, 520, 510)];
+    var scrollView = [[CPScrollView alloc] initWithFrame:CGRectMake(20, 70, 520, 220)];
+    var scrollView2 = [[CPScrollView alloc] initWithFrame:CGRectMake(20, 550, 1020, 220)];
 
     [scrollView setDocumentView:_textView];
     [scrollView2 setDocumentView:_textView2];
@@ -126,6 +126,13 @@
     [theWindow orderFront:self];
 //  [_textView setEditable:NO];
     [CPMenu setMenuBarVisible:YES];
+
+    console.log([[CPFont systemFontOfSize:12] cssString])
+    var context = document.createElement("canvas").getContext("2d");
+    context.font = '12px Arial, sans-serif';
+    var testingText = 'A A A A A A A A';
+    console.log(ROUND(context.measureText(testingText).width));
+    console.log(ROUND([CPPlatformString sizeOfString:testingText withFont:[CPFont systemFontOfSize:12] forWidth:NULL].width));
 }
 
 - (void) makeRTF:(id)sender