Skip to content

Commit

Permalink
Bug 501491 - [Graphics] Replace custom drawing on close button
Browse files Browse the repository at this point in the history
Eclipse's close button in non-hot mode looks should look close enough to
whatever is used normally on the corresponding platform to not stick
out.

The current close button of CTabFolder fails by this measure, on all
three platforms.

Native look on Mac for closeable tabs appears to be a plain cross, as
can be seen in the Finder's tabs. As hover effect, the background is
made (in light mode) a darker gray. (Darker gray rectangle with rounded
corners).

Native look on Windows is also a plain cross, with the same hover
effect. See for instance tabs in Microsoft Edge. Other web browsers seem
to have converged on this same UI across platforms. On Windows 10, the
shell close button is also such a thin plain cross, as hover effect, the
button gets a glaringly red background. The tab close button's cross is
smaller, but appears to use also in non-hot mode a slightly thicker
lines.

Native look on GTK/Adwaita on CentOS 7 for tabs appears to be also a
plain cross, but with thicker lines, as can be seen for instance in
gedit with multiple files open. As hover effect, the background becomes
a brighter shade of gray. The shell close icon uses the same cross.
Firefox uses the same cross and hover effect (darker gray) as on other
platforms.

This change updates the drawing of the close icon to look similar to the
platform icons. It also moves closer to popular tools like the Chrome
browser or development tools like VScode.


Change-Id: Iddbb709c5f291a1e7a52b3e77c46da605d4ad8a8
Signed-off-by: Lars Vogel <Lars.Vogel@vogella.com>
Reviewed-on: https://git.eclipse.org/r/c/platform/eclipse.platform.swt/+/183887
Tested-by: Platform Bot <platform-bot@eclipse.org>
  • Loading branch information
vogella committed Aug 13, 2021
1 parent 6079d0f commit 9a8d78e
Showing 1 changed file with 19 additions and 31 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ public class CTabFolderRenderer {
static final int[] SIMPLE_BOTTOM_LEFT_CORNER_BORDERLESS = new int[] {0,-3, 1,-2, 2,-1, 3,0};
static final int[] SIMPLE_BOTTOM_RIGHT_CORNER_BORDERLESS = new int[] {-4,0, -3,-1, -2,-2, -1,-3};

static final RGB CLOSE_FILL = new RGB(252, 160, 160);
static final RGB CLOSE_FILL = new RGB(240, 64, 64);

static final int BUTTON_SIZE = 16;
static final int BUTTON_TRIM = 1;
Expand Down Expand Up @@ -863,46 +863,24 @@ void drawBody(GC gc, Rectangle bounds, int state) {

void drawClose(GC gc, Rectangle closeRect, int closeImageState) {
if (closeRect.width == 0 || closeRect.height == 0) return;
Display display = parent.getDisplay();

// draw X 9x9
int x = closeRect.x + Math.max(1, (closeRect.width-9)/2);
int y = closeRect.y + Math.max(1, (closeRect.height-9)/2);
// draw X with length of this constant
final int lineLength = 8;
int x = closeRect.x + Math.max(1, (closeRect.width-lineLength)/2);
int y = closeRect.y + Math.max(1, (closeRect.height-lineLength)/2);
y += parent.onBottom ? -1 : 1;

Color closeBorder = display.getSystemColor(BUTTON_BORDER);
int originalLineWidth = gc.getLineWidth();
switch (closeImageState & (SWT.HOT | SWT.SELECTED | SWT.BACKGROUND)) {
case SWT.NONE: {
int[] shape = new int[] {x,y, x+2,y, x+4,y+2, x+5,y+2, x+7,y, x+9,y,
x+9,y+2, x+7,y+4, x+7,y+5, x+9,y+7, x+9,y+9,
x+7,y+9, x+5,y+7, x+4,y+7, x+2,y+9, x,y+9,
x,y+7, x+2,y+5, x+2,y+4, x,y+2};
gc.setBackground(display.getSystemColor(BUTTON_FILL));
gc.fillPolygon(shape);
gc.setForeground(closeBorder);
gc.drawPolygon(shape);
drawCloseLines(gc, x, y , lineLength, false);
break;
}
case SWT.HOT: {
int[] shape = new int[] {x,y, x+2,y, x+4,y+2, x+5,y+2, x+7,y, x+9,y,
x+9,y+2, x+7,y+4, x+7,y+5, x+9,y+7, x+9,y+9,
x+7,y+9, x+5,y+7, x+4,y+7, x+2,y+9, x,y+9,
x,y+7, x+2,y+5, x+2,y+4, x,y+2};
gc.setBackground(getFillColor());
gc.fillPolygon(shape);
gc.setForeground(closeBorder);
gc.drawPolygon(shape);
drawCloseLines(gc, x, y , lineLength, true);
break;
}
case SWT.SELECTED: {
int[] shape = new int[] {x+1,y+1, x+3,y+1, x+5,y+3, x+6,y+3, x+8,y+1, x+10,y+1,
x+10,y+3, x+8,y+5, x+8,y+6, x+10,y+8, x+10,y+10,
x+8,y+10, x+6,y+8, x+5,y+8, x+3,y+10, x+1,y+10,
x+1,y+8, x+3,y+6, x+3,y+5, x+1,y+3};
gc.setBackground(getFillColor());
gc.fillPolygon(shape);
gc.setForeground(closeBorder);
gc.drawPolygon(shape);
drawCloseLines(gc, x, y , lineLength, true);
break;
}
case SWT.BACKGROUND: {
Expand All @@ -911,6 +889,16 @@ void drawClose(GC gc, Rectangle closeRect, int closeImageState) {
break;
}
}
gc.setLineWidth(originalLineWidth);
}

private void drawCloseLines(GC gc, int x, int y, int lineLength, boolean hot) {
if (hot) {
gc.setLineWidth(gc.getLineWidth() + 2);
gc.setForeground(getFillColor());
}
gc.drawLine(x, y, x + lineLength, y + lineLength);
gc.drawLine(x, y + lineLength, x + lineLength, y);
}

void drawChevron(GC gc, Rectangle chevronRect, int chevronImageState) {
Expand Down

0 comments on commit 9a8d78e

Please sign in to comment.