Mac: zoom title and favicon during tabpose zoom animation

chrome/browser/ui/cocoa/tabpose_window.mm

 // Copyright (c) 2010 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #import "chrome/browser/ui/cocoa/tabpose_window.h"
 
 #import <QuartzCore/QuartzCore.h>
 
 #include "app/resource_bundle.h"
 #include "base/mac_util.h"
@@ skipping 414 matching lines @@
 
 NSRect Tile::GetStartRectRelativeTo(const Tile& tile) const {
   NSRect rect = start_thumb_rect_;
   rect.origin.x -= tile.start_thumb_rect_.origin.x;
   rect.origin.y -= tile.start_thumb_rect_.origin.y;
   return rect;
 }
 
 NSRect Tile::GetFaviconStartRectRelativeTo(const Tile& tile) const {
   NSRect thumb_start = GetStartRectRelativeTo(tile);
+  CGFloat scale_small_to_big = NSWidth(thumb_start) / NSWidth(thumb_rect_);

[viettrungluu, 2010/12/15 17:36:57]

What is this scale and where does it come from?

Also, I have no idea what "small to big" is supposed to mean.

[Nico, 2010/12/15 18:52:29]

:-(

Renamed the variable. It's the ratio between the size of the full tab contents
and a thumbnail.

   NSRect rect = favicon_rect_;
-  rect.origin.x += NSMinX(thumb_start) - NSMinX(thumb_rect_);
-  rect.origin.y += NSMinY(thumb_start) - NSMinY(thumb_rect_);
+  rect.origin.x -= NSMinX(thumb_rect_);

[viettrungluu, 2010/12/15 17:36:57]

Just make a helper function and do:

  x = ScaleRelativeToPoint(x, ox, scale);

(or whatever) rather than repeating the same three lines a bunch of times.

[Nico, 2010/12/15 18:52:29]

Ah, but this doesn't do (x - origin) * scale + origin – it does (x -
prescaleOrigin) * scale + postscaleOrigin…done something similar.

+  rect.origin.x *= scale_small_to_big;
+  rect.origin.x += NSMinX(thumb_start);
+  rect.origin.y -= NSMinY(thumb_rect_);
+  rect.origin.y *= scale_small_to_big;
+  rect.origin.y += NSMinY(thumb_start);
+  rect.size.width *= scale_small_to_big;
+  rect.size.height *= scale_small_to_big;
   return rect;
 }
 
 SkBitmap Tile::favicon() const {
   if (contents_->is_app()) {
     SkBitmap* icon = contents_->GetExtensionAppIcon();
     if (icon)
       return *icon;
   }
   return contents_->GetFavIcon();
 }
 
 NSRect Tile::GetTitleStartRectRelativeTo(const Tile& tile) const {
   NSRect thumb_start = GetStartRectRelativeTo(tile);
+  CGFloat scale_small_to_big = NSWidth(thumb_start) / NSWidth(thumb_rect_);
   NSRect rect = title_rect_;
-  rect.origin.x += NSMinX(thumb_start) - NSMinX(thumb_rect_);
-  rect.origin.y += NSMinY(thumb_start) - NSMinY(thumb_rect_);
+  rect.origin.x -= NSMinX(thumb_rect_);
+  rect.origin.x *= scale_small_to_big;
+  rect.origin.x += NSMinX(thumb_start);
+  rect.origin.y -= NSMinY(thumb_rect_);
+  rect.origin.y *= scale_small_to_big;
+  rect.origin.y += NSMinY(thumb_start);
+  rect.size.width *= scale_small_to_big;
+  rect.size.height *= scale_small_to_big;
   return rect;
 }
 
 // Changes |title_rect| and |favicon_rect| such that the favicon's and the
 // title's vertical center is aligned and that the minimum distance between
 // the thumb rect and favicon and title rects doesn't change.
 void Tile::set_font_metrics(CGFloat ascender, CGFloat descender) {
   // Make the title height big enough to fit the font, and adopt the title
   // position to keep its distance from the thumb rect.
   title_rect_.origin.y -= ascender + descender - NSHeight(title_rect_);
@@ skipping 354 matching lines @@
     tiles_[i]->title_rect_ = tiles_[i + step]->title_rect_;
   }
   tiles_[from_index]->thumb_rect_ = thumb;
   tiles_[from_index]->start_thumb_rect_ = start_thumb;
   tiles_[from_index]->favicon_rect_ = favicon;
   tiles_[from_index]->title_rect_ = title;
 }
 
 }  // namespace tabpose
 
-void AnimateCALayerFrameFromTo(
-    CALayer* layer, const NSRect& from, const NSRect& to,
+void AnimateScaledCALayerFrameFromTo(
+    CALayer* layer,
+    const NSRect& from, CGFloat from_scale,
+    const NSRect& to, CGFloat to_scale,
     NSTimeInterval duration, id boundsAnimationDelegate) {
   // http://developer.apple.com/mac/library/qa/qa2008/qa1620.html
   CABasicAnimation* animation;
 
   animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
   animation.fromValue = [NSValue valueWithRect:from];
   animation.toValue = [NSValue valueWithRect:to];
   animation.duration = duration;
   animation.timingFunction =
       [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
   animation.delegate = boundsAnimationDelegate;
 
   // Update the layer's bounds so the layer doesn't snap back when the animation
   // completes.
   layer.bounds = NSRectToCGRect(to);
 
   // Add the animation, overriding the implicit animation.
   [layer addAnimation:animation forKey:@"bounds"];
 
   // Prepare the animation from the current position to the new position.
   NSPoint opoint = from.origin;
   NSPoint point = to.origin;
 
   // Adapt to anchorPoint.
-  opoint.x += NSWidth(from) * layer.anchorPoint.x;
-  opoint.y += NSHeight(from) * layer.anchorPoint.y;
-  point.x += NSWidth(to) * layer.anchorPoint.x;
-  point.y += NSHeight(to) * layer.anchorPoint.y;
+  opoint.x += NSWidth(from) * from_scale * layer.anchorPoint.x;
+  opoint.y += NSHeight(from) * from_scale * layer.anchorPoint.y;
+  point.x += NSWidth(to) * to_scale * layer.anchorPoint.x;
+  point.y += NSHeight(to) * to_scale * layer.anchorPoint.y;
 
   animation = [CABasicAnimation animationWithKeyPath:@"position"];
   animation.fromValue = [NSValue valueWithPoint:opoint];
   animation.toValue = [NSValue valueWithPoint:point];
   animation.duration = duration;
   animation.timingFunction =
       [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
 
   // Update the layer's position so that the layer doesn't snap back when the
   // animation completes.
   layer.position = NSPointToCGPoint(point);
 
   // Add the animation, overriding the implicit animation.
   [layer addAnimation:animation forKey:@"position"];
 }
 
+void AnimateCALayerFrameFromTo(
+    CALayer* layer, const NSRect& from, const NSRect& to,
+    NSTimeInterval duration, id boundsAnimationDelegate) {
+  AnimateScaledCALayerFrameFromTo(
+      layer, from, 1.0, to, 1.0, duration, boundsAnimationDelegate);
+}
+
 void AnimateCALayerOpacityFromTo(
     CALayer* layer, double from, double to, NSTimeInterval duration) {
   CABasicAnimation* animation;
   animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
   animation.fromValue = [NSNumber numberWithFloat:from];
   animation.toValue = [NSNumber numberWithFloat:to];
   animation.duration = duration;
 
   layer.opacity = to;
   // Add the animation, overriding the implicit animation.
@@ skipping 123 matching lines @@
         nil);
     AnimateCALayerOpacityFromTo(faviconLayer, 0.0, 1.0, interval);
   } else {
     faviconLayer.frame = NSRectToCGRect(tile.favicon_rect());
   }
   faviconLayer.contents = (id)favicon.get();
   faviconLayer.zPosition = 1;  // On top of the thumb shadow.
   [bgLayer_ addSublayer:faviconLayer];
   [allFaviconLayers_ addObject:faviconLayer];
 
+  // CATextLayers can't animate their fontSize property, at least on 10.5.
+  // Animate transform.scale instead.
+
+  // The scaling should have its origin in the layer's upper left corner.
+  // This needs to be set before |AnimateCALayerFrameFromTo()| is called.
   CATextLayer* titleLayer = [CATextLayer layer];
+  titleLayer.anchorPoint = CGPointMake(0, 1);
   if (showZoom) {
-    AnimateCALayerFrameFromTo(
-        titleLayer,
-        tile.GetTitleStartRectRelativeTo(tileSet_->selected_tile()),
-        tile.title_rect(),
-        interval,
-        nil);
-    AnimateCALayerOpacityFromTo(titleLayer, 0.0, 1.0, interval);
+    NSRect fromRect =
+        tile.GetTitleStartRectRelativeTo(tileSet_->selected_tile());
+    NSRect toRect = tile.title_rect();
+    CGFloat scale = NSWidth(fromRect) / NSWidth(toRect);
+    fromRect.size = toRect.size;
+
+    // Add scale animation.
+    CABasicAnimation* scaleAnimation =
+        [CABasicAnimation animationWithKeyPath:@"transform.scale"];
+    scaleAnimation.fromValue = [NSNumber numberWithDouble:scale];
+    scaleAnimation.toValue = [NSNumber numberWithDouble:1.0];
+    scaleAnimation.duration = interval;
+    scaleAnimation.timingFunction =
+        [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
+    [titleLayer addAnimation:scaleAnimation forKey:@"transform.scale"];
+
+    // Add the position and opacity animations.
+    AnimateScaledCALayerFrameFromTo(
+        titleLayer, fromRect, scale, toRect, 1.0, interval, nil);
+    AnimateCALayerOpacityFromTo(faviconLayer, 0.0, 1.0, interval);
   } else {
     titleLayer.frame = NSRectToCGRect(tile.title_rect());
   }
   titleLayer.string = base::SysUTF16ToNSString(tile.title());
   titleLayer.fontSize = [font pointSize];
   titleLayer.truncationMode = kCATruncationEnd;
   titleLayer.font = font;
   titleLayer.zPosition = 1;  // On top of the thumb shadow.
   [bgLayer_ addSublayer:titleLayer];
   [allTitleLayers_ addObject:titleLayer];
@@ skipping 239 matching lines @@
     CALayer* layer = [allThumbnailLayers_ objectAtIndex:i];
     // Add a delegate to one of the implicit animations to get a notification
     // once the animations are done.
     if (static_cast<int>(i) == tileSet_->selected_index()) {
       CAAnimation* animation = [CAAnimation animation];
       animation.delegate = self;
       [animation setValue:kAnimationIdFadeOut forKey:kAnimationIdKey];
       [layer addAnimation:animation forKey:@"frame"];
     }
 
+    // Thumbnail.
     layer.frame = NSRectToCGRect(
         tile.GetStartRectRelativeTo(tileSet_->selected_tile()));
 
     if (static_cast<int>(i) == tileSet_->selected_index()) {
       // Redraw layer at big resolution, so that zoom-in isn't blocky.
       [layer setNeedsDisplay];
     }
 
+    // Title.
     CALayer* faviconLayer = [allFaviconLayers_ objectAtIndex:i];
     faviconLayer.frame = NSRectToCGRect(
         tile.GetFaviconStartRectRelativeTo(tileSet_->selected_tile()));
     faviconLayer.opacity = 0;
+
+    // Favicon.
+    // The |fontSize| cannot be animated directly, animate the layer's scale
+    // instead. scale affects the rendered width, so keep the small bounds.

[viettrungluu, 2010/12/15 17:36:57]

"|scale|". Or should that be |transform.scale|? ("small" is also confusing; how
about "original" or "base"?)

[Nico, 2010/12/15 18:52:29]

With "small", it's clear that it refers to the zoomed-out view. "original" or
"base" leave me guessing wich coordinate system the author is talking about.

     CALayer* titleLayer = [allTitleLayers_ objectAtIndex:i];
-    titleLayer.frame = NSRectToCGRect(
-        tile.GetTitleStartRectRelativeTo(tileSet_->selected_tile()));
+    NSRect titleRect = tile.title_rect();
+    NSRect titleToRect =
+        tile.GetTitleStartRectRelativeTo(tileSet_->selected_tile());
+    CGFloat scale = NSWidth(titleToRect) / NSWidth(titleRect);
+    titleToRect.origin.x +=
+        NSWidth(titleRect) * scale * titleLayer.anchorPoint.x;
+    titleToRect.origin.y +=
+        NSHeight(titleRect) * scale * titleLayer.anchorPoint.y;
+    titleLayer.position = NSPointToCGPoint(titleToRect.origin);
+    [titleLayer setValue:[NSNumber numberWithDouble:scale]
+              forKeyPath:@"transform.scale"];
     titleLayer.opacity = 0;
   }
 }

[viettrungluu, 2010/12/15 17:36:57]

This is getting ridiculously big. Please break it up and re-organize it.

[Nico, 2010/12/15 18:52:29]

It's a sweet 77 lines short!

Alright, done.

 
 - (void)animationDidStop:(CAAnimation*)animation finished:(BOOL)finished {
   NSString* animationId = [animation valueForKey:kAnimationIdKey];
   if ([animationId isEqualToString:kAnimationIdFadeIn]) {
     if (finished && state_ == tabpose::kFadingIn) {
       // If the user clicks while the fade in animation is still running,
       // |state_| is already kFadingOut. In that case, don't do anything.
       state_ = tabpose::kFadedIn;
 
       selectionHighlight_.hidden = NO;
@@ skipping 169 matching lines @@
   tile.set_tab_contents(contents->tab_contents());
   ThumbnailLayer* thumbLayer = [allThumbnailLayers_ objectAtIndex:index];
   [thumbLayer setTabContents:contents->tab_contents()];
 }
 
 - (void)tabStripModelDeleted {
   [self close];
 }
 
 @end