1324746 - [RTL] Fix camera icon on Toolbox Options

Status: RESOLVED FIXED

(DevTools :: Framework, defect, P3)

Description

[Tomer Cohen :tomer]

Attachment: Camera icon on Toolbox Options screenshot

The fix for bug 1323504 introduced a problem with the camera icon. Because this change involves changing the common.css file, I am using this bug to track the changes. 



chrome://devtools/content/framework/toolbox-options.xhtml

Comment 1

[Tomer Cohen :tomer]

Previous discussion on bug 1323504 comment 4 and 5.

Comment 2

[Tomer Cohen :tomer]

Attachment: Bug 1324746 [RTL] Fix camera icon on Toolbox Options

Review commit: https://reviewboard.mozilla.org/r/99746/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/99746/

Comment 3

[Julian Descottes [:jdescottes]]

Comment on attachment 8820222 [details]
Bug 1324746 [RTL] Fix camera icon on Toolbox Options

https://reviewboard.mozilla.org/r/99746/#review100218

Thanks for the patch!

::: devtools/client/themes/common.css:284
(Diff revision 1)
>  
>  .devtools-button::before {
>    content: "";
>    display: block;
>    position: absolute;
> -  left: 50%;
> +  offset-inline-start: 50%;

Shouldn't we use offset-block start instead of top to be consistent?

This fixes the camera-icon but it took me a while to understand why. The top/left 50% + negative margins is a pattern used for centering absolutely positioned elements, and by itself doesn't need to use logical properties.

But here the margin-inline-start: -8px now gets overridden by http://searchfox.org/mozilla-central/source/devtools/client/framework/options-panel.css#111 . Before it was only overridden in LTR, when margin-left ~= margin-inline-start.

I don't think the icon position should be adjusted by overriding margins the ::before pseudo, but that's not related to your changeset.

Comment 4

[Tomer Cohen :tomer]

Comment on attachment 8820222 [details]
Bug 1324746 [RTL] Fix camera icon on Toolbox Options

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/99746/diff/1-2/

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2122bed2f2ff
[RTL] Fix camera icon on Toolbox Options r=jdescottes

Comment 6

[Iris Hsiao [:ihsiao]]

https://hg.mozilla.org/mozilla-central/rev/2122bed2f2ff

Comment 7

[Itiel]

Working fine in latest Nightly.

Comment 8

[Md. Majedul islam]

I have reproduced this bug with Firefox nightly 53.0a1 (2016-12-20)on Windows 10, 64 Bit.

The Bug's fix is now verified on latest Beta 53.0b3 !

Build ID 	20170316045436
User Agent 	Mozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0

[testday-20170317]