Browse: buttons in media plugin are too small to see, much less select

[wad]

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.

[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.

[manuq]

Screenshot

[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?

[manuq]

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

[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.

[godiard]

Ok. That is not Jukebox. It's a media plugin in Browse.

I change the description & component.

[manuq]

Screenshot of current state.

[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

[erikos]

The player looks unusable as well under GNOME/epiphany, the icons are really small. Maybe that helps to narrow things down.

[manuq]

Just as reference. In webkit2 there is a cleaner way to inject CSS:

​http://webkitgtk.org/reference/webkit2gtk/stable/WebKitWebViewGroup.html#webkit-web-view-group-add-user-style-sheet

[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.

[manuq]

Partial fix pushed as 4bc02188 .

[manuq]

Screengrab of the current state, after the partial fix

[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.

[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=);
}

[manuq]

Final theme