Implement Material Design for the tabstrip.

chrome/browser/ui/views/tabs/tab.cc

 // Copyright (c) 2012 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.
 
 #include "chrome/browser/ui/views/tabs/tab.h"
 
 #include <limits>
 
 #include "base/command_line.h"
 #include "base/debug/alias.h"
 #include "base/profiler/scoped_tracker.h"
 #include "base/strings/utf_string_conversions.h"
 #include "chrome/browser/themes/theme_properties.h"
 #include "chrome/browser/ui/browser.h"
 #include "chrome/browser/ui/tab_contents/core_tab_helper.h"
 #include "chrome/browser/ui/tabs/tab_utils.h"
 #include "chrome/browser/ui/view_ids.h"
 #include "chrome/browser/ui/views/layout_constants.h"
 #include "chrome/browser/ui/views/tabs/media_indicator_button.h"
 #include "chrome/browser/ui/views/tabs/tab_controller.h"
 #include "chrome/browser/ui/views/theme_image_mapper.h"
 #include "chrome/browser/ui/views/touch_uma/touch_uma.h"
 #include "chrome/common/chrome_switches.h"
 #include "chrome/grit/generated_resources.h"
 #include "content/public/browser/user_metrics.h"
 #include "grit/components_scaled_resources.h"
 #include "grit/theme_resources.h"
 #include "third_party/skia/include/effects/SkGradientShader.h"
+#include "third_party/skia/include/pathops/SkPathOps.h"
 #include "ui/accessibility/ax_view_state.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/models/list_selection_model.h"
+#include "ui/base/resource/material_design/material_design_controller.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/base/theme_provider.h"
 #include "ui/gfx/animation/animation_container.h"
 #include "ui/gfx/animation/multi_animation.h"
 #include "ui/gfx/animation/throb_animation.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_analysis.h"
 #include "ui/gfx/favicon_size.h"
 #include "ui/gfx/geometry/rect_conversions.h"
 #include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/path.h"
+#include "ui/gfx/scoped_canvas.h"
 #include "ui/gfx/skia_util.h"
 #include "ui/gfx/vector_icons_public.h"
 #include "ui/resources/grit/ui_resources.h"
 #include "ui/views/border.h"
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/rect_based_targeting_utils.h"
 #include "ui/views/view_targeter.h"
 #include "ui/views/widget/tooltip_manager.h"
 #include "ui/views/widget/widget.h"
@@ skipping 375 matching lines @@
       scale_factor(ui::SCALE_FACTOR_NONE) {
 }
 
 Tab::ImageCacheEntry::~ImageCacheEntry() {}
 
 ////////////////////////////////////////////////////////////////////////////////
 // Tab, statics:
 
 // static
 const char Tab::kViewClassName[] = "Tab";
+const SkColor Tab::kInactiveTabColor = SkColorSetRGB(0xD0, 0xD0, 0xD0);
 Tab::TabImages Tab::active_images_ = {0};
 Tab::TabImages Tab::inactive_images_ = {0};
 Tab::TabImages Tab::mask_images_ = {0};
 Tab::ImageCache* Tab::image_cache_ = NULL;
 
 ////////////////////////////////////////////////////////////////////////////////
 // Tab, public:
 
 Tab::Tab(TabController* controller)
     : controller_(controller),
@@ skipping 192 matching lines @@
   // buttons is available for click-to-select.  If neither are visible, the
   // entire tab region is available.
   const int indicator_left = showing_media_indicator_ ?
       media_indicator_button_->x() : width();
   const int close_button_left = showing_close_button_ ?
       close_button_->x() : width();
   return std::min(indicator_left, close_button_left);
 }
 
 gfx::Size Tab::GetMinimumInactiveSize() {
-  // Since we use images, the real minimum height of the image is
-  // defined most accurately by the height of the end cap images.
-  InitTabResources();
-  int height = active_images_.image_l->height();
+  int height;
+  if (ui::MaterialDesignController::IsModeMaterial()) {
+    const int kTabHeight = 29;
+    height = kTabHeight;
+  } else {
+    // Since we use images, the real minimum height of the image is
+    // defined most accurately by the height of the end cap images.
+    InitTabResources();
+    height = active_images_.image_l->height();
+  }
+
   return gfx::Size(GetLayoutInsets(TAB).width(), height);
 }
 
 // static
 gfx::Size Tab::GetMinimumActiveSize() {
   gfx::Size minimum_size = GetMinimumInactiveSize();
   minimum_size.Enlarge(gfx::kFaviconSize, 0);
   return minimum_size;
 }
 
@@ skipping 93 matching lines @@
 bool Tab::GetHitTestMask(gfx::Path* mask) const {
   DCHECK(mask);
 
   // When the window is maximized we don't want to shave off the edges or top
   // shadow of the tab, such that the user can click anywhere along the top
   // edge of the screen to select a tab. Ditto for immersive fullscreen.
   const views::Widget* widget = GetWidget();
   const bool extend_to_top =
       widget && (widget->IsMaximized() || widget->IsFullscreen());
 
-  // Hit mask constants.
-  const SkScalar kTabCapWidth = 15;
-  const SkScalar kTabTopCurveWidth = 4;
-  const SkScalar kTabBottomCurveWidth = 3;
+  if (ui::MaterialDesignController::IsModeMaterial()) {
+    SkPath border;
+    const float scale = GetWidget()->GetCompositor()->device_scale_factor();
+    GetBorderPath(scale, extend_to_top, &border);
+    mask->addPath(border, SkMatrix::MakeScale(1 / scale));
+  } else {

[Peter Kasting, 2015/12/09 01:20:30]

This arm is copied verbatim from before, just indented an extra level.

+    // Hit mask constants.
+    const SkScalar kTabCapWidth = 15;
+    const SkScalar kTabTopCurveWidth = 4;
+    const SkScalar kTabBottomCurveWidth = 3;
 #if defined(OS_MACOSX)
-  // Mac's Cocoa UI doesn't have shadows.
-  const SkScalar kTabInset = 0;
+    // Mac's Cocoa UI doesn't have shadows.
+    const SkScalar kTabInset = 0;
 #elif defined(TOOLKIT_VIEWS)
-  // The views browser UI has shadows in the left, right and top parts of the
-  // tab.
-  const SkScalar kTabInset = 6;
+    // The views browser UI has shadows in the left, right and top parts of the
+    // tab.
+    const SkScalar kTabInset = 6;
 #endif
 
-  SkScalar left = kTabInset;
-  SkScalar top = GetLayoutConstant(TAB_TOP_EXCLUSION_HEIGHT);
-  SkScalar right = SkIntToScalar(width()) - kTabInset;
-  SkScalar bottom = SkIntToScalar(height());
+    SkScalar left = kTabInset;
+    SkScalar top = GetLayoutConstant(TAB_TOP_EXCLUSION_HEIGHT);
+    SkScalar right = SkIntToScalar(width()) - kTabInset;
+    SkScalar bottom = SkIntToScalar(height());
 
-  // Start in the lower-left corner.
-  mask->moveTo(left, bottom);
+    // Start in the lower-left corner.
+    mask->moveTo(left, bottom);
 
-  // Left end cap.
-  mask->lineTo(left + kTabBottomCurveWidth, bottom - kTabBottomCurveWidth);
-  mask->lineTo(left + kTabCapWidth - kTabTopCurveWidth,
-               top + kTabTopCurveWidth);
-  mask->lineTo(left + kTabCapWidth, top);
+    // Left end cap.
+    mask->lineTo(left + kTabBottomCurveWidth, bottom - kTabBottomCurveWidth);
+    mask->lineTo(left + kTabCapWidth - kTabTopCurveWidth,
+                 top + kTabTopCurveWidth);
+    mask->lineTo(left + kTabCapWidth, top);
 
-  // Extend over the top shadow area if we have one and the caller wants it.
-  if (top > 0 && extend_to_top) {
-    mask->lineTo(left + kTabCapWidth, 0);
-    mask->lineTo(right - kTabCapWidth, 0);
+    // Extend over the top shadow area if we have one and the caller wants it.
+    if (top > 0 && extend_to_top) {
+      mask->lineTo(left + kTabCapWidth, 0);
+      mask->lineTo(right - kTabCapWidth, 0);
+    }
+
+    // Connect to the right cap.
+    mask->lineTo(right - kTabCapWidth, top);
+
+    // Right end cap.
+    mask->lineTo(right - kTabCapWidth + kTabTopCurveWidth,
+                 top + kTabTopCurveWidth);
+    mask->lineTo(right - kTabBottomCurveWidth, bottom - kTabBottomCurveWidth);
+    mask->lineTo(right, bottom);
+
+    // Close out the path.
+    mask->lineTo(left, bottom);
+    mask->close();
   }
 
-  // Connect to the right cap.
-  mask->lineTo(right - kTabCapWidth, top);
-
-  // Right end cap.
-  mask->lineTo(right - kTabCapWidth + kTabTopCurveWidth,
-               top + kTabTopCurveWidth);
-  mask->lineTo(right - kTabBottomCurveWidth, bottom - kTabBottomCurveWidth);
-  mask->lineTo(right, bottom);
-
-  // Close out the path.
-  mask->lineTo(left, bottom);
-  mask->close();
-
   // It is possible for a portion of the tab to be occluded if tabs are
   // stacked, so modify the hit test mask to only include the visible
   // region of the tab.
   gfx::Rect clip;
   controller_->ShouldPaintTab(this, &clip);
   if (clip.size().GetArea()) {
     SkRect intersection(mask->getBounds());
     mask->reset();
     if (!intersection.intersect(RectToSkRect(clip)))
        return false;
@@ skipping 409 matching lines @@
   int alpha = 255;
   if (pinned_title_change_animation_->current_part_index() == 0) {
     x = pinned_title_change_animation_->CurrentValueBetween(
             width() + radius - kPinnedTitleChangeInitialXOffset, radius);
   } else if (pinned_title_change_animation_->current_part_index() == 2) {
     x = pinned_title_change_animation_->CurrentValueBetween(radius, -radius);
     alpha = pinned_title_change_animation_->CurrentValueBetween(255, 0);
   }
   SkPoint p;
   p.set(SkDoubleToScalar(x), 0);
-  gfx::Canvas background_canvas(size(), canvas->image_scale(), false);
-  PaintInactiveTabBackground(&background_canvas);
-  gfx::ImageSkia background_image(background_canvas.ExtractImageRep());
-  canvas->DrawImageInt(background_image, 0, 0);
-  gfx::Canvas hover_canvas(size(), canvas->image_scale(), false);
-  DrawHighlight(&hover_canvas, p, SkFloatToScalar(radius), alpha);
-  gfx::ImageSkia hover_image = gfx::ImageSkiaOperations::CreateMaskedImage(
-      gfx::ImageSkia(hover_canvas.ExtractImageRep()), background_image);
-  canvas->DrawImageInt(hover_image, 0, 0);
+  if (ui::MaterialDesignController::IsModeMaterial()) {
+    PaintInactiveTabBackground(canvas);
+    gfx::ScopedCanvas scoped_canvas(canvas);
+    const float scale = canvas->UndoDeviceScaleFactor();
+    SkPath fill;
+    GetFillPath(scale, &fill);
+    canvas->ClipPath(fill, true);
+    p.scale(SkFloatToScalar(scale));
+    DrawHighlight(canvas, p, SkFloatToScalar(radius * scale), alpha);
+  } else {

[Peter Kasting, 2015/12/09 01:20:30]

Same here.

+    gfx::Canvas background_canvas(size(), canvas->image_scale(), false);
+    PaintInactiveTabBackground(&background_canvas);
+    gfx::ImageSkia background_image(background_canvas.ExtractImageRep());
+    canvas->DrawImageInt(background_image, 0, 0);
+    gfx::Canvas hover_canvas(size(), canvas->image_scale(), false);
+    DrawHighlight(&hover_canvas, p, SkFloatToScalar(radius), alpha);
+    gfx::ImageSkia hover_image = gfx::ImageSkiaOperations::CreateMaskedImage(
+        gfx::ImageSkia(hover_canvas.ExtractImageRep()), background_image);
+    canvas->DrawImageInt(hover_image, 0, 0);
+  }
 }
 
 void Tab::PaintInactiveTabBackground(gfx::Canvas* canvas) {
   bool has_custom_image;
   int fill_id = controller_->GetBackgroundResourceId(&has_custom_image);
   // Explicitly map the id so we cache correctly.
   const chrome::HostDesktopType host_desktop_type = GetHostDesktopType(this);
   fill_id = chrome::MapThemeImage(host_desktop_type, fill_id);
 
   // If the theme is providing a custom background image, then its top edge
@@ skipping 34 matching lines @@
   // so that it feels partially transparent.  These offsets represent the tab
   // position within the frame background image.
   const int x_offset = GetMirroredX() + background_offset_.x();
 
   const SkScalar radius = SkFloatToScalar(width() / 3.f);
   const bool draw_hover =
       !is_active && hover_controller_.ShouldDraw() && radius > 0;
   SkPoint hover_location(PointToSkPoint(hover_controller_.location()));
   const SkAlpha hover_alpha = hover_controller_.GetAlpha();
 
-  if (draw_hover) {
-    // Draw everything to a temporary canvas so we can extract an image for use
-    // in masking the hover glow.
-    gfx::Canvas background_canvas(size(), canvas->image_scale(), false);
-    PaintTabFill(&background_canvas, fill_image, x_offset, y_offset, is_active);
-    gfx::ImageSkia background_image(background_canvas.ExtractImageRep());
-    canvas->DrawImageInt(background_image, 0, 0);
+  if (ui::MaterialDesignController::IsModeMaterial()) {
+    gfx::ScopedCanvas scoped_canvas(canvas);
+    const float scale = canvas->UndoDeviceScaleFactor();
 
-    gfx::Canvas hover_canvas(size(), canvas->image_scale(), false);
-    DrawHighlight(&hover_canvas, hover_location, radius, hover_alpha);
-    gfx::ImageSkia result = gfx::ImageSkiaOperations::CreateMaskedImage(
-        gfx::ImageSkia(hover_canvas.ExtractImageRep()), background_image);
-    canvas->DrawImageInt(result, 0, 0);
+    // Draw the fill.
+    SkPath fill;
+    GetFillPath(scale, &fill);
+    SkPaint paint;
+    paint.setAntiAlias(true);
+    {
+      gfx::ScopedCanvas clip_scoper(canvas);
+      canvas->ClipPath(fill, true);
+      if (has_custom_image) {
+        gfx::ScopedCanvas scale_scoper(canvas);
+        canvas->sk_canvas()->scale(scale, scale);
+        canvas->TileImageInt(*fill_image, x_offset, y_offset, 0, 0, width(),
+                             height());
+      } else {
+        paint.setColor(
+            is_active ? SkColorSetRGB(0xF2, 0xF2, 0xF2) : kInactiveTabColor);
+        canvas->DrawRect(gfx::ScaleToEnclosingRect(GetLocalBounds(), scale),
+                         paint);
+      }
+      if (draw_hover) {
+        hover_location.scale(SkFloatToScalar(scale));
+        DrawHighlight(canvas, hover_location, radius * scale, hover_alpha);
+      }
+    }
+
+    // Draw the stroke.
+    SkPath stroke;
+    GetBorderPath(scale, false, &stroke);
+    Op(stroke, fill, kDifference_SkPathOp, &stroke);
+    if (!is_active) {
+      // Clip out the bottom line; this will be drawn for us by
+      // TabStrip::PaintChildren().
+      canvas->sk_canvas()->clipRect(
+          SkRect::MakeWH(width() * scale, height() * scale - 1));
+    }
+    paint.setARGB(0x40, 0x00, 0x00, 0x00);
+    canvas->DrawPath(stroke, paint);
   } else {

[Peter Kasting, 2015/12/09 01:20:30]

Same here.

-    PaintTabFill(canvas, fill_image, x_offset, y_offset, is_active);
+    if (draw_hover) {
+      // Draw everything to a temporary canvas so we can extract an image for
+      // use in masking the hover glow.
+      gfx::Canvas background_canvas(size(), canvas->image_scale(), false);
+      PaintTabFill(&background_canvas, fill_image, x_offset, y_offset,
+                   is_active);
+      gfx::ImageSkia background_image(background_canvas.ExtractImageRep());
+      canvas->DrawImageInt(background_image, 0, 0);
+
+      gfx::Canvas hover_canvas(size(), canvas->image_scale(), false);
+      DrawHighlight(&hover_canvas, hover_location, radius, hover_alpha);
+      gfx::ImageSkia result = gfx::ImageSkiaOperations::CreateMaskedImage(
+          gfx::ImageSkia(hover_canvas.ExtractImageRep()), background_image);
+      canvas->DrawImageInt(result, 0, 0);
+    } else {
+      PaintTabFill(canvas, fill_image, x_offset, y_offset, is_active);
+    }
+
+    // Now draw the stroke, highlights, and shadows around the tab edge.
+    TabImages* stroke_images = is_active ? &active_images_ : &inactive_images_;
+    canvas->DrawImageInt(*stroke_images->image_l, 0, 0);
+    canvas->TileImageInt(
+        *stroke_images->image_c, stroke_images->l_width, 0,
+        width() - stroke_images->l_width - stroke_images->r_width, height());
+    canvas->DrawImageInt(*stroke_images->image_r,
+                         width() - stroke_images->r_width, 0);
   }
-
-  // Now draw the stroke, highlights, and shadows around the tab edge.
-  TabImages* stroke_images = is_active ? &active_images_ : &inactive_images_;
-  canvas->DrawImageInt(*stroke_images->image_l, 0, 0);
-  canvas->TileImageInt(
-      *stroke_images->image_c, stroke_images->l_width, 0,
-      width() - stroke_images->l_width - stroke_images->r_width, height());
-  canvas->DrawImageInt(*stroke_images->image_r,
-                       width() - stroke_images->r_width, 0);
 }
 
 void Tab::PaintTabFill(gfx::Canvas* canvas,
                        gfx::ImageSkia* fill_image,
                        int x_offset,
                        int y_offset,
                        bool is_active) {
   const gfx::Insets tab_insets(GetLayoutInsets(TAB));
   // If this isn't the foreground tab, don't draw over the toolbar, but do
   // include the 1 px divider stroke at the bottom.
@@ skipping 195 matching lines @@
   if (bounds.IsEmpty())
     return;
 
   // Extends the area to the bottom when the crash animation is in progress.
   if (crash_icon_animation_)
     bounds.set_height(height() - bounds.y());
   bounds.set_x(GetMirroredXForRect(bounds));
   SchedulePaintInRect(bounds);
 }
 
+void Tab::GetFillPath(float scale, SkPath* fill) const {
+  const float right = width() * scale;
+  const float bottom = height() * scale;
+
+  fill->moveTo(right - 1, bottom);
+  fill->rCubicTo(-0.75 * scale, 0, -1.625 * scale, -0.5 * scale, -2 * scale,
+                 -1.5 * scale);
+  fill->lineTo(right - 1 - 13.5 * scale, 2.5 * scale);
+  // Prevent overdraw in the center near minimum width (only happens if
+  // scale < 2).  We could instead avoid this by increasing the tab inset
+  // values, but that would shift all the content inward as well, unless we
+  // then overlapped the content on the endcaps, by which point we'd have a
+  // huge mess.
+  const float total_endcap_width = 31 * scale + 2;
+  const float overlap = total_endcap_width - right;
+  const float offset = (overlap > 0) ? (overlap / 2) : 0;
+  fill->rCubicTo(-0.375 * scale, -1 * scale, -1.25 * scale + offset,
+                 -1.5 * scale, -2 * scale + offset, -1.5 * scale);
+  if (overlap < 0)
+    fill->lineTo(1 + 15.5 * scale, scale);
+  fill->rCubicTo(-0.75 * scale, 0, -1.625 * scale - offset, 0.5 * scale,
+                 -2 * scale - offset, 1.5 * scale);
+  fill->lineTo(1 + 2 * scale, bottom - 1.5 * scale);
+  fill->rCubicTo(-0.375 * scale, scale, -1.25 * scale, 1.5 * scale, -2 * scale,
+                 1.5 * scale);
+  fill->close();
+}
+
+void Tab::GetBorderPath(float scale, bool extend_to_top, SkPath* path) const {
+  const float top = scale - 1;
+  const float right = width() * scale;
+  const float bottom = height() * scale;
+
+  path->moveTo(0, bottom);
+  path->rLineTo(0, -1);
+  path->rCubicTo(0.75 * scale, 0, 1.625 * scale, -0.5 * scale, 2 * scale,
+                 -1.5 * scale);
+  path->lineTo(13.5 * scale, top + 1.5 * scale);
+  if (extend_to_top) {
+    // Create the vertical extension by extending the side diagonals until they
+    // reach the top of the bounds.
+    const float dy = 2.5 * scale - 1;
+    const float dx = 11.5 / 25 * dy;
+    path->rLineTo(dx, -dy);
+    path->lineTo(right - 13.5 * scale - dx, 0);
+    path->rLineTo(dx, dy);
+  } else {
+    path->rCubicTo(0.375 * scale, -scale, 1.25 * scale, -1.5 * scale, 2 * scale,
+                   -1.5 * scale);
+    path->lineTo(right - 15.5 * scale, top);
+    path->rCubicTo(0.75 * scale, 0, 1.625 * scale, 0.5 * scale, 2 * scale,
+                   1.5 * scale);
+  }
+  path->lineTo(right - 2 * scale, bottom - 1 - 1.5 * scale);
+  path->rCubicTo(0.375 * scale, scale, 1.25 * scale, 1.5 * scale, 2 * scale,
+                 1.5 * scale);
+  path->rLineTo(0, 1);
+  path->close();
+}
+
 gfx::Rect Tab::GetImmersiveBarRect() const {
   // The main bar is as wide as the normal tab's horizontal top line.
   // This top line of the tab extends a few pixels left and right of the
   // center image due to pixels in the rounded corner images.
   const int kBarPadding = 1;
   int main_bar_left = active_images_.l_width - kBarPadding;
   int main_bar_right = width() - active_images_.r_width + kBarPadding;
   return gfx::Rect(
       main_bar_left, 0, main_bar_right - main_bar_left, kImmersiveBarHeight);
 }
@@ skipping 57 matching lines @@
                          const gfx::ImageSkia& image) {
   DCHECK_NE(scale_factor, ui::SCALE_FACTOR_NONE);
   ImageCacheEntry entry;
   entry.resource_id = resource_id;
   entry.scale_factor = scale_factor;
   entry.image = image;
   image_cache_->push_front(entry);
   if (image_cache_->size() > kMaxImageCacheSize)
     image_cache_->pop_back();
 }