Use separate class for tippy targets

[silverwind]

Previous solution that re-purposed the 'hide' class by making it !important had various unintended side-effects where jQuery .show() was not able to outweight it. Use a separate class to prevent these interactions.

Fixes: #20747
Regressed by: #20428

[silverwind]

Note for future refactor: Enable jquery/no-hide and jquery/no-show linter rules and replace cases with helper function that toggles the hide class instead. This also brings the benefit of not forcing display: block on shown elements.

[wxiaoguang]

I would strongly suggest to revert the !important for the .hide CSS class at the moment.

Many things are broken, there may be more:

• Edit form doesn't display when editing issue/comment  #20747

The show/hide game has been very complex in Gitea. IIRC there are .hide, .hidden, :hidden, display: none, $.hide(), etc.

I would suggest to think about a more more comprehensive plan and resolve the problem fundamentally. At least, there should be a document about what should be done while what shouldn't.

[silverwind]

Problem was without the !important, the popover targets in DOM would flash until tippy loads and removes them from DOM. Previously there was some !important class coming from Fomantic, but as that module was removed, I had to rely on existing .hide which has caused side effects.

Options to fix is either like this PR to fix up all cases of .hide to just toggle that class or introduce another hide class specific for popover targets. The latter would certainly be a lot easier, but it again adds complexity.

[silverwind]

The issue with the comment edit form is that it uses $.show() which inserts inline styles the previously outweighted .hide by being inline and therefore higher precedence. The .hide class stayed on those elements all the time:

I think the better solution is just to remove .hide to show content. At least to me it's a more obvious and lightweight way than to rely on inline styles and it will help reduce our dependency on jQuery-specific stuff like that.

[silverwind]

On the other hand, there's just too much stuff that relies on $.hide, I don't think I'm willing to refactor/test all this mess currently, so I think I will go the easy solution and add a separate class to hide popover targets during page load.

[wxiaoguang]

Personally I would always avoid !important as much as possible, I treat it as "evil".

I could have the willing to refactor existing code, but I would like to see some agreements and feasible plans first.

And, the most important thing is, the bugs caused by the .hide should be fixed soon. 😁

[silverwind]

!important is a necessary evil when not all CSS is first-party, but even then it's often just very useful to sometimes "skip" the CSS precedence rules.

I updated the PR now to use the separate class approach.

Refactor should be pretty simple in theory, replace all .hide() with .addClass('hide') and all .show() with .removeClass('hide') while also replacing all inline style="display: none" HTML templates with the addtion of the hide class.