Customize tab shape

[bbondy]

No description provided.

[bbondy]

@petemill would you want to drive this?

[petemill]

I'd be happy to take a look, whilst balancing other commitments. Though I'm not an expert on the brave / chromium code, the language and the UI frameworks (yet) so there will be a learning curve. Is there a target date for this milestone @bbondy ?

[bbondy]

no target date, I don't want to side track any browser-laptop based deadlines, so just on the side is fine. Sync up with @kevinlawler though because he's found the tool and is starting to look at this too.

[bbondy]

moved to @AlexeyBarabash from @kevinlawler

[AlexeyBarabash]

PR brave/brave-core#22 .

[AlexeyBarabash]

As I mentioned in PR, I have tuned parameters to make rectangles from from trapezoid.
It is possible to draw the shape of the tab in own way. But parameters still will require to be tuned to make beautiful intervals and new tab button.

Here is the direct solution, curved corners supposed to be made by path.rCubicTo are not used here:

// src/chrome/browser/ui/views/tabs/tab.cc
gfx::Path GetFillPath(float scale, const gfx::Size& size, float endcap_width) {
  const float right = size.width() * scale;
  const float bottom = std::ceil(size.height() * scale);

  gfx::Path fill;
  fill.moveTo(right - 1 - endcap_width*0.5*scale, bottom);
  fill.lineTo(right - 1 - endcap_width*0.5*scale, 2.5 * scale);

  fill.lineTo(1 + endcap_width*0.5*scale, 2.5 * scale);
  fill.lineTo(1 + endcap_width*0.5*scale, bottom);

  fill.close();
  return fill;
}
gfx::Path GetBorderPath(float scale,
                        bool unscale_at_end,
                        bool extend_to_top,
                        float endcap_width,
                        const gfx::Size& size) {
  const float right = size.width() * scale;
  const float bottom = size.height() * scale;

  gfx::Path path;
  path.moveTo(0, bottom);
  path.lineTo(0 + endcap_width*0.5*scale, bottom);
  path.lineTo(0 + endcap_width*0.5*scale, 0);
  path.lineTo(right - endcap_width*0.5*scale, 0);
  path.lineTo(right - endcap_width*0.5*scale, bottom);
  path.lineTo(right, bottom);

  path.close();

  if (unscale_at_end && (scale != 1))
    path.transform(SkMatrix::MakeScale(1.f / scale));

  return path;
}

[AlexeyBarabash]

Created a PR for this issue on macOS brave/brave-core#24 .

[bbondy]

Closing this since it's landed.