Opened 8 years ago

Closed 8 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)

Screenshot of %22Jukebox Activity%22.png (18.5 KB) - added by manuq 8 years ago.
Screenshot
browse media player.png (22.7 KB) - added by manuq 8 years ago.
Screenshot of current state.
sugarized_media_player.py (3.8 KB) - added by manuq 8 years ago.
Screenshot of %22Untitled%22.png (24.3 KB) - added by manuq 8 years ago.
Screengrab of the current state, after the partial fix
Screenshot of %22Untitled%22.2.png (28.5 KB) - added by manuq 8 years ago.
Final theme

Download all attachments as: .zip

Change History (18)

comment:1 Changed 8 years ago by godiard

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.

Changed 8 years ago by manuq

Screenshot

comment:2 Changed 8 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 8 years ago by manuq

(sorry I didn't see Gonzalo's comment)

comment:4 Changed 8 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 8 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 8 years ago by manuq

Screenshot of current state.

Changed 8 years ago by manuq

comment:6 Changed 8 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 8 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:9 Changed 8 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 8 years ago by manuq

Partial fix pushed as 4bc02188 .

Changed 8 years ago by manuq

Screengrab of the current state, after the partial fix

comment:11 Changed 8 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 8 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=);
}

Changed 8 years ago by manuq

Final theme

comment:13 Changed 8 years ago by manuq

  • Resolution set to fixed
  • Status changed from assigned to closed
Note: See TracTickets for help on using tickets.