935820 - [Flatfish] make Context menu not fill fullscreen

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::System::Window Mgmt, defect)

Description

[[e-mail]]

expect:

UItest/UI/contextmenu popup not fill fullscreen

Comment 1

[[e-mail]]

Spec in https://bugzilla.mozilla.org/attachment.cgi?id=827809

Comment 2

[Francis Lee [:frlee]]

hi Fred,

is it possible to have someone to fix this issue?

Comment 3

[[e-mail]]

Attachment: UI spec

Comment 4

[[e-mail]]

We are occupied till the middle of next week. If someone want to take this, I'd glad to be a mentor

Comment 5

[kumar rishav (:rishav_)]

Hi Fred 
Can I get assigned this bug? I'm interested to work on this bug.
It will be helpful if you guide me in reproducing this bug and other necessary info regarding this bug.
Thanks

Comment 6

[[e-mail]]

the code is located in system/style/action_menu/action_menu_extended.css
(main styles are done in shared/style/action_menu)

At this moment, please put tablet related CSS change in `system/style/action_menu/action_menu_extended.css`.

You can use `inspector` in browser developer tools to help investigate and manipulate styles.


Feel free to ping me if you have encounter any problems :)

Comment 7

[kumar rishav (:rishav_)]

Hi Fred
I didn't get this "At this moment, please put tablet related CSS change".
Thanks

Comment 8

[[e-mail]]

Please put your CSS into `system/style/action_menu/action_menu_extended.css`, but not in `shared/style/action_menu`.

please refer bug 935816 and bug 938518 to find similar dialogs CSS style works.

Comment 9

[[e-mail]]

The reason is shared/style is in the progress of UI change, we have to merge tablet work later after the change is done.

Comment 10

[[e-mail]]

Please refer Bug 938518 Comment 4 for setup dev environment for tablet

Comment 11

[kumar rishav (:rishav_)]

Attachment: Screen Shot 2014-01-03 at 13.21.58.png

Hi fred,
Please have a look on attached image.How is this pop up window.
Thanks

Comment 12

[[e-mail]]

It's not right since the dialog frame is not zoom to center.

Please check
https://github.com/mozilla-b2g/gaia/pull/12997/files

And you may need add an extra html tag (something like #dialog-overlay in above patch) to mimic the transparent background

Comment 13

[kumar rishav (:rishav_)]

Attachment: Screen Shot 2014-01-04 at 13.04.45.png

Hi fred,
Have a look on this image.Some thing like this?
Thanks

Comment 14

[[e-mail]]

Sorry but it does not looks like the UI spec showed.
Please put a Pull Request and I can get your code for help.

Comment 15

[kumar rishav (:rishav_)]

Hi fred
What should be height,width,padding and margin for pop up window.I am not getting exactly.
Thanks

Comment 16

[[e-mail]]

The goal is to have the layout looks exactly like https://bug935820.bugzilla.mozilla.org/attachment.cgi?id=8335127

You could refer what I've done in the style/sleep_menu.css to get the idea.


Recently we found another dialog bug 957071, which might simpler. It's fine if you want to take it a try first.

Comment 17

[kumar rishav (:rishav_)]

Attachment: Screen Shot 2014-01-05 at 12.06.38.png

Hi fred,
After inspecting so much, i could this much.Have a look, if it is ok, then i will submit Patch for this.Then you(or I, if i can ) will make more changes if needed.
Main problem i faced is that, i don't know exact measurement of everything.also in that link(https://bug935820.bugzilla.mozilla.org/attachment.cgi?id=8357353).Every thing is not clear, also there is four option in this window.But i need only two, so i am unable to get exact size,gap,margin of everything.

Comment 18

[[e-mail]]

It's much closer now. Don't try to get exact size since the action menu items number will changed by request.

Take a look at https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/sleep_menu/sleep_menu.css#L199

`#sleep-menu-container` and `#sleep-menu-container li` should provide most calculated values for you.

Comment 19

[kumar rishav (:rishav_)]

Hi fred,
Now i think it's now good.i followed your written css https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/sleep_menu/sleep_menu.css#L199 .
Should i submit the patch now ?
Thanks

Comment 20

[kumar rishav (:rishav_)]

Attachment: Screen Shot 2014-01-06 at 04.28.07.png

Comment 21

[[e-mail]]

please check the bottom button size, the text align, and the background of each item.

Do you know you could use 'inspector' tool to dynamically modify and see the style inheritance and the changed result?

(in Firefox Nightly > Tools/WebDeveloper/Inspector menu)


For sleep menu style, you could long press the almost hidden power button in top right corner of the nightly fxos screen. Use the above technique you could investigate the runtime style.

Comment 22

[[e-mail]]

One thing to notice is your screenshot size is 1248x707, please pull the '=' bar in right and bottom side of fxos screen and scale to '1312x831'. then the export screenshot size will be correct to 1280x800.

It's the fxos nightly add-on's bug.

Comment 23

[kumar rishav (:rishav_)]

Hi fred,
There should be proper position for all elements only for tablet(1280 X 800) or for every resolution.
Also resolution should be 1280x768 or 1280x800 ?When you will come on irc, i was waiting for you.I pinged you too, but i didn't get the response.

Comment 24

[[e-mail]]

this layout is applied only for width > 768. Since its web, we do not focus too much on height.
so you should put it into another @media query section instead of replace the current styles

'1312x831' is the correct number for screenshot.
The form factor is 1280x800 at first launch but keep in mind it will be applied to other resolutions.

https://hacks.mozilla.org/2014/01/mozilla-launches-contribution-program-to-help-deliver-firefox-os-to-tablets/

Comment 25

[kumar rishav (:rishav_)]

Attachment: Screen Shot 2014-01-06 at 09.28.22.png

Hi fred
I tried so much.Every thing is fine .I completely copied the code too..still at paritcular height say 831.it's fine for every width>768.But if i am changing the height, then position of cancel button and it's background get distorted.may be in sleep_menu there are various tags.so it's possible to make every element responsive at every height and width.But In this window, i am trying for four days.But still couldn't satisfy you.sorry.

Comment 26

[kumar rishav (:rishav_)]

Also, in sleep_menu (html/css). option in pop up window and cancel buttton(and it's background) are in different div/menu tag.so it was responsive under every height and width but in this case all are in same div.so positioning (of cancel button and it's background) are getting distorted on changing height and width.

Thank you

Comment 27

[[e-mail]]

please put your PR here then I can help you find out the glitch

Comment 28

[kumar rishav (:rishav_)]

Hi fred,
I commited in my repo https://github.com/kumarrishav/gaia/commit/ae6df31343aa34b1cb3a763761177f4b7d96b19c

Do i suppposed to do pull request ?
This code will for work perfect for every width>768 and height=831. 
Everything accept "cancel button background" work for all height and width( i.e completely responsive). I was unable to decide exact height and width of Cancel.So have a look on that too.
Thanks

Comment 29

[[e-mail]]

I've add some comments in github. Not test on nightly yet.

with current @media query it just modify the default CSS with certain screen width,
so you don't have to copy properties, they could be inherited from the default one. 

Please use inspector to remove these redundant properties

Comment 30

[[e-mail]]

TO get proper height and font size,
try to reference the general dialog's button css in system/stylethemes/default/buttons.css

Comment 31

[kumar rishav (:rishav_)]

Hi fred,
What about "Cancel Button Background"?
Thanks

Comment 32

[[e-mail]]

It should be 7rem height in UI spec

Comment 33

[kumar rishav (:rishav_)]

In the pop up window, i made everything responsive at width>768 except background of "Cancel button".The reason is that to make  " cancel" button background responsive, i have to set "Position=absolute". but it's working only on position=fixed and in fixed position it won't become responsive.when i am changing it to absolute, it get disappear.

Comment 34

[[e-mail]]

please fix duplicate properties first, then I can dive in and help you check the details

Comment 35

[[e-mail]]

Hi kumar,

are you still work on this issue? Anything can I help?

Comment 36

[kumar rishav (:rishav_)]

Hi Fred
Sorry, i were on hoildays , so couldn't work on this. Now i am back update you very soon.
Extremly sorry for delay.

Comment 38

[[e-mail]]

Hi kumar,

After digging the css, I'd steal the bug from you to fix it since there're too many details need to be addressed and should not be the good first bug either.

Thanks for your efforts!

Comment 39

[[e-mail]]

Attachment: screenshot

use dynamic calc value to have right scale

Comment 40

[[e-mail]]

Attachment: pull request redirect to github

Can reproduce by long press on homescreen to trigger the action menu

Comment 41

[[e-mail]]

Attachment: screenshot updated

Comment 42

[[e-mail]]

merged to gaia-master https://github.com/mozilla-b2g/gaia/commit/072cb1a76ff4530418a84c046f31614e20080d5b

thanks!