You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@netbeans.apache.org by GitBox <gi...@apache.org> on 2021/05/19 22:03:27 UTC

[GitHub] [netbeans] eirikbakke opened a new pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

eirikbakke opened a new pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967


   This PR modernizes the look of the main NetBeans tabs components on the Windows LAF, and makes them look good on all the standard HiDPI scalings supported on Windows (100%, 125%, 150%, 175%, 200%, and 225%).
   
   A before/after comparison is shown here, first at 100% scaling (regular, non-HiDPI screens). To review these images, be sure to view them at 100% scaling on your screen. (If you have a HiDPI screen yourself, you may need to adjust your browser's zoom level so that each pixel in the screenshot corresponds to one device pixel on your screen.)
   
   ![Old vs  New Tab Style (1x scaling)](https://user-images.githubusercontent.com/886243/118887549-83d9ef80-b8c8-11eb-8ea2-b666ec7a92b9.png)
   
   The new tabs adhere to the following design principles:
   * Keep the tabs consistent with the style in native Windows 10 dialogs. This style is also used in the regular JTabbedPane, which is used in NetBeans e.g. in the "Output" pane.
   * Keep the tab dimensions compact, as in the previous look. After trying various geometries, I ended up making the new tabs 2 pixels taller than the previous ones, but not more.
   * Minimize visual complexity, while making it obvious where the user can click. Keep drawing the selected tab as an actual tab (with borders around it), but use the "flat" style from FlatLAF for unselected tabs. For the editor tab component, use the subtle separators that were introduced in FlatLAF between unselected tabs. This is also the style used in Chrome tabs.
   
   The new tabs also solve various problems that were previously seen when HiDPI scaling was active, especially for fractional scalings (e.g. 150%). Here are before/after screenshots on 150% HiDPI scaling:
   
   ![Old vs  New Tab Style (1 5x scaling)](https://user-images.githubusercontent.com/886243/118889037-83425880-b8ca-11eb-8438-590c67068112.png)
   
   The new TabDisplayerUI classes are based on @DevCharly's previously added implementations for FlatLAF. These were already taking HiDPI scaling into account, and were very configurable. For now, I have added separate copies of these classes for the Windows LAF. I have split up the commits in this PR to make it clear which changes have been made to the "forked" copies. Some improvements, found in the second commit, could potentially be merged back into the FlatLAF classes if later desired. For example, one bug was fixed relating to the positioning of the "spinner" icon which is shown when the Navigator tab is being loaded:
   
   ![Spinner position fix](https://user-images.githubusercontent.com/886243/118890136-2cd61980-b8cc-11eb-8cf7-4cae4acf2b6b.png)
   
   Finally, here are some screenshots of the entire NetBeans IDE with the old and the new tabs, this time at 200% HiDPI scaling.
   
   ### Before:
   ![Full Screenshot Old Style Tabs (2x scaling)](https://user-images.githubusercontent.com/886243/118890270-6575f300-b8cc-11eb-940d-2f3e0a593dfa.png)
   
   ### After:
   ![Full Screenshot New Style Tabs (2x scaling)](https://user-images.githubusercontent.com/886243/118890284-6ad33d80-b8cc-11eb-86c9-66431ece1ff5.png)
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists

[GitHub] [netbeans] eirikbakke commented on a change in pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

Posted by GitBox <gi...@apache.org>.
eirikbakke commented on a change in pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967#discussion_r635627522



##########
File path: platform/o.n.swing.tabcontrol/src/org/netbeans/swing/tabcontrol/plaf/Windows8VectorTabControlIcon.java
##########
@@ -43,7 +43,7 @@
  * @author Eirik Bakke
  */
 @SuppressWarnings("serial")
-final class Windows8VectorTabControlIcon extends VectorIcon {
+public final class Windows8VectorTabControlIcon extends VectorIcon {

Review comment:
       No need to make this public... I'll get rid of the "public" here.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists

[GitHub] [netbeans] ebarboni merged pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

Posted by GitBox <gi...@apache.org>.
ebarboni merged pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967


   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists

[GitHub] [netbeans] eirikbakke commented on pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

Posted by GitBox <gi...@apache.org>.
eirikbakke commented on pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967#issuecomment-880171570


   Here's the tweaked hover color...
   
   ![New hover color](https://user-images.githubusercontent.com/886243/125685393-7006e422-158a-42ba-9354-d1edc7b4753b.png)
   
   Will do a force push to update this.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists

[GitHub] [netbeans] eirikbakke commented on pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

Posted by GitBox <gi...@apache.org>.
eirikbakke commented on pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967#issuecomment-880137234


   The popup switcher bug was unrelated to this PR, and will probably require separate work/review. I also found a more serious bug in the popup switcher, which could make the IDE unresponsive (also unrelated to this PR). I added the following JIRA issues for these:
   
   [NETBEANS-5853 Repaint problems in tabcontrol ButtonPopupSwitcher](https://issues.apache.org/jira/browse/NETBEANS-5853)
   [NETBEANS-5855 Closing unsaved editor tab from dropdown can put IDE in unusable state](https://issues.apache.org/jira/browse/NETBEANS-5855)
   
   Will now tweak the hover color...


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists

[GitHub] [netbeans] eirikbakke commented on pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

Posted by GitBox <gi...@apache.org>.
eirikbakke commented on pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967#issuecomment-852308867


   Hover colors are easy to tweak--I'll have a look. Any opinions on whether the "close tab" button should stay red, or just have a grey? The red color was copied from an earlier version of Chrome, but the latest chrome versions switched it to grey...
   
   I'll check the dropdown bug too.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists

[GitHub] [netbeans] geertjanw commented on pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

Posted by GitBox <gi...@apache.org>.
geertjanw commented on pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967#issuecomment-879653729


   Ready to merge?


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists

[GitHub] [netbeans] DevCharly commented on pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

Posted by GitBox <gi...@apache.org>.
DevCharly commented on pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967#issuecomment-852298514


   Have tested this PR and it works and looks great 👍 
   
   What I actually don't like is that the small control icons (minimize, scroll left/right, etc) are inverted when moving the mouse over them:
   
   ![image](https://user-images.githubusercontent.com/5604048/120362312-3bc8bd00-c30b-11eb-9b8d-e21d252e4a66.png)
   
   I think for a hover feedback this is too much. Would make it more "discreet" with lighter gray and not inverting icon.
   Or use light blue as in toolbars or tabs:
   
   ![image](https://user-images.githubusercontent.com/5604048/120364411-81868500-c30d-11eb-9ac0-c14a7ea72554.png)
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists

[GitHub] [netbeans] eirikbakke commented on pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

Posted by GitBox <gi...@apache.org>.
eirikbakke commented on pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967#issuecomment-880178164


   I made the following changes in a force push:
   
   ```
   diff --git a/platform/o.n.swing.tabcontrol/src/org/netbeans/swing/tabcontrol/plaf/Windows8VectorTabControlIcon.java b/platform/o.n.swing.tabcontrol/src/org/netbeans/swing/tabcontrol/plaf/Windows8VectorTabControlIcon.java
   index 7d1465a..a7131f7 100644
   --- a/platform/o.n.swing.tabcontrol/src/org/netbeans/swing/tabcontrol/plaf/Windows8VectorTabControlIcon.java
   +++ b/platform/o.n.swing.tabcontrol/src/org/netbeans/swing/tabcontrol/plaf/Windows8VectorTabControlIcon.java
   @@ -43,7 +43,7 @@ import javax.swing.Icon;
     * @author Eirik Bakke
     */
    @SuppressWarnings("serial")
   -public final class Windows8VectorTabControlIcon extends VectorIcon {
   +final class Windows8VectorTabControlIcon extends VectorIcon {
        private static final Map<Entry<Integer,Integer>,Icon> INSTANCES = populateInstances();
        private final int buttonId;
        private final int buttonState;
   @@ -118,10 +118,14 @@ public final class Windows8VectorTabControlIcon extends VectorIcon {
                    bgColor = closeColor != null ? closeColor : new Color(57, 100, 178, 255);
                    fgColor = Color.WHITE;
                } else if (buttonState == TabControlButton.STATE_ROLLOVER) {
   -                bgColor = closeColor != null ? closeColor
   -                        // Grey (via transparent black to work well on any background).
   -                        : new Color(0, 0, 0, 70);
   -                fgColor = Color.WHITE;
   +                if (closeColor != null) {
   +                    bgColor = closeColor;
   +                    fgColor = Color.WHITE;
   +                } else {
   +                    /* Light blue, via transparency to work well on any background. In the grey
   +                    toolbar, it comes out similar to the hover background used for toolbar buttons. */
   +                    bgColor = new Color(0, 132, 247, 49);
   +                }
                }
            }
            if (bgColor.getAlpha() > 0) {
   ```
   
   Once Travis tests pass, this should be safe to merge (without squash, as the 3 commits are meant to be separate). I've been running this patch in my own working IDE, and in my platform app, for two months now without issue.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists

[GitHub] [netbeans] DevCharly commented on pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

Posted by GitBox <gi...@apache.org>.
DevCharly commented on pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967#issuecomment-852302743


   Not sure whether it is related to this PR, but just noticed following:
   
   ![netbeans-win-docs-menu-issue](https://user-images.githubusercontent.com/5604048/120365148-610afa80-c30e-11eb-8c1c-d8415d55471c.gif)
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists

[GitHub] [netbeans] eirikbakke commented on pull request #2967: [NETBEANS-5673] Modernize tab controls in the Windows LAF

Posted by GitBox <gi...@apache.org>.
eirikbakke commented on pull request #2967:
URL: https://github.com/apache/netbeans/pull/2967#issuecomment-879784914


   Oh, sorry, let me check the outstanding issues today...


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@netbeans.apache.org
For additional commands, e-mail: notifications-help@netbeans.apache.org

For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists