Project

General

Profile

Actions

Defect #33392

closed

Fix invalid selector in function displayTabsButtons()

Added by Marius BĂLTEANU over 4 years ago. Updated over 4 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Category:
Code cleanup/refactoring
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Fixed
Affected version:

Description

Below it's a snippet from displayTabsButton() function:

    var bw = $(el).parents('div.tabs-buttons').outerWidth(true);

    if ((tabsWidth < el.width() - bw) && (lis.length === 0 || lis.first().is(':visible'))) {
      el.find('div.tabs-buttons').hide();
    } else {
      el.find('div.tabs-buttons').show().children('button.tab-left').toggleClass('disabled', numHidden == 0);
    }

Selector parents('div.tabs-buttons') from line var bw = $(el).parents('div.tabs-buttons').outerWidth(true); never finds any element because div.tabs-buttons is not a parent of div.tabs.

On jQuery 2, var gw = $(el).parents('div.tabs-buttons').outerWidth(true); is null which means 0+.
On jQuery 3, var gw = $(el).parents('div.tabs-buttons').outerWidth(true); is undefined which means NaN.

Because of this change, the condition (tabsWidth < el.width() - bw) always return false on jQuery 3 because gw is NaN and tabsButton are displayed.

The attach patch fixes this incorrect behaviour and also replaces some inline styles with class hidden.


Files

tabs.png (79 KB) tabs.png Marius BĂLTEANU, 2020-05-02 16:08
different-behavior-before.png (36 KB) different-behavior-before.png Go MAEDA, 2020-05-03 02:18
different-behavior-after.png (36.9 KB) different-behavior-after.png Go MAEDA, 2020-05-03 02:18
0001-Fix-invalid-selector-in-displayTabsButtons-function_v2.patch (569 Bytes) 0001-Fix-invalid-selector-in-displayTabsButtons-function_v2.patch Marius BĂLTEANU, 2020-05-03 08:34
1120.png (80.5 KB) 1120.png Marius BĂLTEANU, 2020-05-03 08:39
1141.png (79.8 KB) 1141.png Marius BĂLTEANU, 2020-05-03 08:42

Related issues

Related to Redmine - Feature #33383: Update jQuery to 3.5.1ClosedGo MAEDA

Actions
Actions #1

Updated by Marius BĂLTEANU over 4 years ago

  • Description updated (diff)
  • Target version changed from 4.2.0 to 4.0.8
  • Affected version set to 4.0.0
Actions #2

Updated by Marius BĂLTEANU over 4 years ago

Actions #3

Updated by Marius BĂLTEANU over 4 years ago

  • Target version changed from 4.0.8 to 4.2.0
Actions #4

Updated by Go MAEDA over 4 years ago

I found that the patch changes the behavior of the button.

After applying the patch, the buttons show up even when there are no hidden tabs.

Before:

After:

Actions #5

Updated by Marius BĂLTEANU over 4 years ago

  • File deleted (0001-Fix-invalid-selector-in-displayTabsButtons-function.patch)
Actions #6

Updated by Marius BĂLTEANU over 4 years ago

I've removed from the patch the changes related to the "hidden" class because are irrelevant. Please retest it because on my environment I cannot reproduce the problem on all resolutions.

The problem that you say reproduces only on widths between 1120px - 1140px:
1120px Tab buttons appear:

1141px Tab buttons disappear :

Is it correct?

Actions #7

Updated by Go MAEDA over 4 years ago

  • Status changed from New to Closed
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed the patch. Thank you.

Actions #8

Updated by Marius BĂLTEANU over 4 years ago

Go MAEDA wrote:

Committed the patch. Thank you.

Thanks for committing this. FTR, we can easily fix the issue with those 20px, but working on it, I've found multiple issues, for example: resize the window, navigate to right until "+" and "Overview" tabs are hidden, then expand the window to the maximum. Observe that the hidden tabs are not automatically displayed even if it's enough space. I decided to try to find a better solution, but it'll take some time.

Actions

Also available in: Atom PDF