Page MenuHomePhabricator

MediaViewer trademark/insignia warnings are illegible with dark theme due to low contrast
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

image.png (185×696 px, 12 KB)

  • With the light theme, this mark is quite legible, but with dark mode, I can hardly make the text out (it doesn't help that my monitor has an awful viewing angle and poor contrast). Below is what the notice looks like in light mode:

image.png (130×675 px, 11 KB)

What happens?:

  • The intended effect of the warning doohickey is to notify users of a trademark, but this is virtually defeated in dark mode

What should have happened instead?:

  • Dark mode should convey the information just as easily. Below is a crudely edited attempt at a well-contrasted

image.png (153×986 px, 10 KB)

Cheers

JayCubby

Event Timeline

Hi @JayCubby, thanks for taking the time to report this!

.mw-mmv-restriction-trademarked::after in https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/MultimediaViewer/+/refs/heads/master/resources/mmv.ui.restriction/mmv.ui.restriction.less#61 probably welcomes an explicit color: #000; (or such) defined to define a text color against its background.

If you (or anyone else) would like to create a patch, you are welcome to use developer access to submit a proposed code change as a Git branch directly into Gerrit. If you don't want to set up Git/Gerrit, you can also use the Gerrit Patch Uploader.

Thank you for tagging this task with good first task for Wikimedia newcomers!

Newcomers often may not be aware of things that may seem obvious to seasoned contributors, so please take a moment to reflect on how this task might look to somebody who has never contributed to Wikimedia projects.

A good first task is a self-contained, non-controversial task with a clear approach. It should be well-described with pointers to help a completely new contributor, for example it should clearly pointed to the codebase URL and provide clear steps to help a contributor get setup for success. We've included some guidelines at https://phabricator.wikimedia.org/tag/good_first_task/ !

Thank you for helping us drive new contributions to our projects <3

Unfortunately, I am globally locked, so creating a developer account is possibly lock evasion. It doesn't help that I know no CSS (it's been four years since I've written any Python). Cheers and best of luck to the person who undertakes this!

JayCubby

Hi, I know Python and CSS, can I take up this task?

Hi, I am currently testing the media viewer to replicate the Issue , so far I cannot do so, my Media Viewer does not show any trademark
this is a picture of my Media Viewer below

BugFixReport.png (612×1 px, 409 KB)

If I can see a trademark text then I can verify that any fix I am adding is working, so I don't end up pushing a fix that is not working, also if the suggestion you gave above is sufficient enough I can easily implement that, though I think the colour we need is not black(#000) but white (#FFF).

Also I think the reason the trademark is coloured blue is because it's a link, so making the blue brighter might be a good suggestion as white will not make it stand out as a link.

Please I don't really get what you mean by odd, can you please make it clearer for me? thanks in advance.
Also do you have any suggestion on how I can add an Image that has a trademark, I have tried downloading the exact image shown in the link provided above, but it does not add the trademark to it when I view with MediaViewer.

Also please note, when I mean my MediaViewer I mean I am currently running a local setup of Mediawiki and MediaViewer, I also saw the issue in the link you provided. I am just trying to replicate it in my local setup, then add a patch, verify that the patch is working and push as a branch, as stated above.

Link to avoid misunderstandings: https://en.wikipedia.org/wiki/User:Jimbo_Wales?vectornightmode=1&minervanightmode=1#/media/File:10_sharing_book_cover_background.jpg

Hi, I know Python and CSS, can I take up this task?

Hi @Destiny, please see https://www.mediawiki.org/wiki/New_Developers#Communication_tips

Also do you have any suggestion on how I can add an Image that has a trademark, I have tried downloading the exact image shown in the link provided above, but it does not add the trademark to it when I view with MediaViewer.

I wonder if Wikimedia Commons uses some custom templates to show such additional pictures and falls back to the default license on Wikimedia Commons when uploading media, which isn't necessarily in MediaWiki itself when you download and install it... not sure how to work around that.

Link to avoid misunderstandings: https://en.wikipedia.org/wiki/User:Jimbo_Wales?vectornightmode=1&minervanightmode=1#/media/File:10_sharing_book_cover_background.jpg

Hi, I know Python and CSS, can I take up this task?

Hi @Destiny, please see https://www.mediawiki.org/wiki/New_Developers#Communication_tips

Also do you have any suggestion on how I can add an Image that has a trademark, I have tried downloading the exact image shown in the link provided above, but it does not add the trademark to it when I view with MediaViewer.

I wonder if Wikimedia Commons uses some custom templates to show such additional pictures and falls back to the default license on Wikimedia Commons when uploading media, which isn't necessarily in MediaWiki itself when you download and install it... not sure how to work around that.

Thanks, I will try to take a lead from this.

Change #1079645 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Fix warning icons on dark mode

https://gerrit.wikimedia.org/r/1079645

Screenshots of https://gerrit.wikimedia.org/r/1079645:

Screenshot 2024-10-13 at 11-13-18 10 sharing book cover background - File 10 sharing book cover background.jpg - simon04.png (178×650 px, 20 KB)
Screenshot 2024-10-13 at 11-12-38 10 sharing book cover background - File 10 sharing book cover background.jpg - simon04.png (178×650 px, 20 KB)

For local testing, this snipped might be useful:

diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js
index 39325e7c..9901014b 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.js
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.js
@@ -749,7 +749,7 @@ class MetadataPanel extends UiElement {
                }
 
                if ( imageData.restrictions ) {
-                       this.setRestrictions( imageData.restrictions );
+                       this.setRestrictions( [ 'trademarked', 'personality', 'currency' ] );
                }
 
                this.setLocationData( imageData );

Unrelated.. but I'm now very very curious about the existence of these icons as I've never seen them before. Rendering these icons requires 9.1 kB of are they useful?

The icons carry no context e.g. tooltip explained what they mean and cannot be interacted with and the user story that introduced them doesn't explain the intention behind them - T77717. This to me seems like an example of a very advanced feature, that is not useful to most users and we should consider removing it, or simplifying it - for example we could just render a link "(with restrictions)" that links to the file page. We also don't show them on mobile.

@mwilliams I'd be interested in your thoughts on this.

@Jdlrobson
The icons do in fact have tooltips (although the icons and their alt text don't appear at all on mobile, meaning only about a quarter of line|2-year|access-site~mobile-site*desktop-site|monthly|all unique devices see the darned things in a given month (assuming pageviews are evenly distributed)... Even as an editor, the icons don't serve too much purpose, but from a legal standpoint it might be sensible to maintain the trademark and seal/currency disclaimers. I'm not a lawyer, nor do I play one on TV, and trademark law is an especially intuitive field, at least for me,

It looks like the comment field misbehaved with the piped link. 'Pologies. I'll have a talk with it later.

image.png (139×360 px, 34 KB)

image.png (179×532 px, 38 KB)

image.png (362×917 px, 122 KB)

image.png (362×917 px, 89 KB)

Even as an editor, the icons don't serve too much purpose, but from a legal standpoint it might be sensible to maintain the trademark and seal/currency disclaimers.

These were added by explicit request of the edit community (specifically image curators). They indeed probably aren't very useful to the average user, but the editor community tends to take a stance that the opportunity for users to learn and understand the details of copyright is important, even if it educates only very few users. The ticket adding them was pretty recent 2018?? I'll see if I can find it back.

These were added by explicit request of the edit community (specifically image curators). They indeed probably aren't very useful to the average user, but the editor community tends to take a stance that the opportunity for users to learn and understand the details of copyright is important, even if it educates only very few users. The ticket adding them was pretty recent 2018?? I'll see if I can find it back.

T77717 might be the related task, or at least part of it. I do agree with your point about the warnings helping people with copyright.

Change #1079645 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Fix warning icons on dark mode

https://gerrit.wikimedia.org/r/1079645

Jdlrobson claimed this task.