Opened 10 years ago
Closed 10 years ago
#4465 closed defect (fixed)
Browse: buttons in media plugin are too small to see, much less select
Reported by: | wad | Owned by: | manuq |
---|---|---|---|
Priority: | Unspecified by Maintainer | Milestone: | Unspecified |
Component: | Browse | Version: | 0.98.x |
Severity: | Unspecified | Keywords: | |
Cc: | Distribution/OS: | OLPC | |
Bug Status: | Unconfirmed |
Description
The play/pause and other buttons (too small to even determine what they are) are incredibly small in Jukebox. Too small to be selected using the touchscreen. Hard to select using the mouse.
It appears that they are roughly 18 pixels high. Something closer to 80 pixels would be appropriately sized.
Attachments (5)
Change History (18)
comment:1 Changed 10 years ago by godiard
comment:2 Changed 10 years ago by manuq
Wad, the buttons should be the same size as other activity buttons. I'm attaching a screenshot. Do you see the same, or maybe discovered a strange theme bug?
comment:3 Changed 10 years ago by manuq
(sorry I didn't see Gonzalo's comment)
comment:4 Changed 10 years ago by wad
Apologies for the late response. I realized the bug wasn't properly specified right after entering it, but then had to wait for (perfectly reasonable) moderation before changing it, and got distracted.
Yes, this problem occurs when launching Jukebox from the web browser. Start the Browser. On the left hand side, there is a button marked Media, which when clicked shows "Sample Music". Clicking on "sample music" brings one to a page with three songs. Clicking on one of them seems to launch Jukebox to play the song.
It is at this time that the UI buttons are incredibly small. I can send a picture later if it is still needed.
comment:5 Changed 10 years ago by godiard
- Component changed from Jukebox to Browse
- Owner changed from kushal to manuq
- Status changed from new to assigned
- Summary changed from Jukebox buttons too small to see, much less select to Browse: buttons in media plugin are too small to see, much less select
Ok. That is not Jukebox. It's a media plugin in Browse.
I change the description & component.
Changed 10 years ago by manuq
comment:6 Changed 10 years ago by manuq
The attached script (http://bugs.sugarlabs.org/attachment/ticket/4465/sugarized_media_player.py) shows how WebKit's embedded media player can be themed. If a request is made for a MIME type 'audio/x-vorbis+ogg', it injects a CSS using WebKit.WebView.execute_script [1]. The CSS is replacing rules based on their original values that can be found in WebKit source [2] [3].
The override CSS needs more work. It currently fixes the black background (#3933), and makes the buttons Sugar standard size (55 x 55 px), but the image inside the buttons is small. I still couldn't find a way to replace them, they are not mentioned in the original CSS files from WebKit.
[1] http://webkitgtk.org/reference/webkitgtk/stable/webkitgtk-webkitwebview.html#webkit-web-view-execute-script
[2] http://trac.webkit.org/browser/trunk/Source/WebCore/css/mediaControls.css
[3] http://trac.webkit.org/browser/trunk/Source/WebCore/css/mediaControlsGtk.css
comment:7 Changed 10 years ago by erikos
The player looks unusable as well under GNOME/epiphany, the icons are really small. Maybe that helps to narrow things down.
comment:8 Changed 10 years ago by manuq
Just as reference. In webkit2 there is a cleaner way to inject CSS:
comment:9 Changed 10 years ago by manuq
Found more about how webkit places the icons with -webkit-appearence
http://css-infos.net/property/-webkit-appearance
Here is a discussion about theming the media buttons:
https://lists.webkit.org/pipermail/webkit-dev/2011-April/016593.html
which points to this part of the code:
http://trac.webkit.org/browser/trunk/Source/WebCore/platform/ThemeTypes.h
I was able to set the background color of a button, but not to set an
image as background:
audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { -webkit-appearance: none; background: #f0f; }
So I will push a partial fix for now.
comment:10 Changed 10 years ago by manuq
Partial fix pushed as 4bc02188 .
comment:11 Changed 10 years ago by manuq
Webkitgtk devs answered in the mailing list. The icon size is hardcoded to 16px here:
http://trac.webkit.org/browser/trunk/Source/WebCore/platform/gtk/RenderThemeGtk.cpp?rev=143463#L493
They gave me some options to try upstream.
comment:12 Changed 10 years ago by manuq
Finally fixed in 39b01403 . I used data-urls to embed the icon images inside the css like:
audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { -webkit-appearance: none !important; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJyBbCgk8IUVOVElUWSBzdHJva2VfY29sb3IgIiMwMTAxMDEiPgoJPCFFTlRJVFkgZmlsbF9jb2xvciAiI2ZmZmZmZiI+Cl0+PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1NSA1NSIgaGVpZ2h0PSI1NXB4IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTUgNTUiIHdpZHRoPSI1NXB4IiB4PSIwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHk9IjBweCI+PGcgZGlzcGxheT0iYmxvY2siIGlkPSJzcGVha2VyLTEwMCI+Cgk8Zz4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0iJmZpbGxfY29sb3I7IiBwb2ludHM9IjQxLjA2Miw1MC41MjMgNDEuMDU5LDMuODI3IDE4LjAxNCwxOC42NjggNy4yMjksMTguNjY4IDcuMjI5LDM1LjY4MiAxOC4wOTYsMzUuNjgyICAgICIvPgoJCTwvZz4KCQk8Zz4KCQkJPHBvbHlnb24gZmlsbD0ibm9uZSIgcG9pbnRzPSI0MS4wNjIsNTAuNTIzIDQxLjA1OSwzLjgyNyAgICAgIDE4LjAxNCwxOC42NjggNy4yMjksMTguNjY4IDcuMjI5LDM1LjY4MiAxOC4wOTYsMzUuNjgyICAgICIgc3Ryb2tlPSImc3Ryb2tlX2NvbG9yOyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzLjUiLz4KCQk8L2c+Cgk8L2c+CjwvZz48L3N2Zz4=); }
comment:13 Changed 10 years ago by manuq
- Resolution set to fixed
- Status changed from assigned to closed
Are you talking about the play/pause button in the toolbar? The button have the standard button height/width, just like any other.
Do you think the icon design should be changed? (Maybe remove the circle and put a bigger triangle / bars?)
What is small, is the height of the items in the playlist. We discused this in the past (oher activities using a treview like GetBooks or Read have the same problem) but the Design Team decided the height is enough.