1133943 - (spark-customizer) [Meta] Spark Customizer

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::Customizer, defect)

Description

[Candice Serran (:cserran)]

The customizer allows users to directly edit code in an
application and package it as an add-on. 


As a user I want to...

-Access code editor from any app with two finger swipe up from the bottom edge when Dev tools is enabled
• Select individual element from the interface (screen 1) – View highlight of selected element on preview
• Enter edit mode of selected element (screen 3)
 – Edit all HTML within that element directly
– Add/Edit/Remove attributes of an element
– Add/Edit/Remove properties of an element


• Delete element from list (screen 2)
• Move element within the list (screen 2)
• Preview add-on with changes applied

• Create new add-on
• Save and install add-on to current application

Comment 2

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/a044c9e59093

Comment 3

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Ignore that. Part of bug 1133493 landed with the wrong bug number.

Comment 4

[Jacqueline Savory [:jsavory] UX]

I've updated the user story section on the bug with a link to the latest IxD spec for Customizer and I'll post the link here as well:

https://mozilla.box.com/s/fh0ym4lxrxa9oifrixnopk3aefudpdyf

Comment 5

[Amy Lee [:amylee] UX]

Attachment: Customizer_VSD_Spec_1.0.pdf

VSD spec

Comment 6

[Amy Lee [:amylee] UX]

Attachment: Customizer_Toolbar_Icons.zip

Icons for customizer toolbar. I excluded the "delete" and "add" icon. Please use the default icons for these. Thanks!

Comment 7

[Amy Lee [:amylee] UX]

Attachment: Customizer_Toolbar_Reference.png

Mock for reference for toolbar icons

Comment 8

[Amy Lee [:amylee] UX]

Attachment: Customizer_close.svg

close icon

Comment 9

[Amy Lee [:amylee] UX]

Attachment: Customizer_add_new.svg

add new icon

Comment 10

[Justin D'Arcangelo [:justindarc]]

Jacqueline/Amy:

The Customizer is ready for UI review (except for the toolbar of action icons in Bug 1170198). So, you can start the UI/UX review process.

Comment 11

[Justin D'Arcangelo [:justindarc]]

(In reply to Justin D'Arcangelo [:justindarc] from comment #10)
> Jacqueline/Amy:
> 
> The Customizer is ready for UI review (except for the toolbar of action
> icons in Bug 1170198). So, you can start the UI/UX review process.

Jacqueline/Amy:

Bug 1170198 has now landed, so the Customizer should be ready for a full UI/UX review.

Comment 12

[Jacqueline Savory [:jsavory] UX]

Hey Justin, here is some initial feedback about the customizer, hopefully I reviewed the right build :)

- When scrolling the elements list, the app background sometimes scrolls as well. The background should only scroll when the user directly scrolls it using the top half of the screen. 

- Occasionally I seem to be able to scroll the icons at the bottom of the elements list to no longer be in view (edit, move, delete, add, view source) - they should always be displayed at the bottom. 

- Are we currently missing the merge flow? The settings icon should go to a list of the add-ons with the merge button in the top right corner, rather than directly to the add-on manager. 

- Can we make the editing a property view more in-line rather than displaying the value on a separate screen? Otherwise we should use a pop-up of some kind. 

- Sometimes when editing a property pressing the ‘Save’ button doesn’t seem to go back to the properties list. 

- Tapping the ‘x’ while in edit mode should have a confirmation dialogue.

- Could we start with some sections expanded in the initial elements list screen? Rather than just displaying a single line?

- I find it a bit difficult to initiate two finger swipe up for customizer, maybe we can make this a bit easier. 

Let me know if you have any questions, I think there is some work we can do on the properties panel, I saw a few more issues than the ones I listed here but we can talk about those next week. Thanks!

Comment 13

[Amy Lee [:amylee] UX]

(In reply to Justin D'Arcangelo [:justindarc] from comment #10)
> Jacqueline/Amy:
> 
> The Customizer is ready for UI review (except for the toolbar of action
> icons in Bug 1170198). So, you can start the UI/UX review process.

Customizer Launcher: 

1. The on-press state has a light grey box around the open button.


Customizer Main Screen

1. Bottom Toolbar - wrong icons are being used for “add”, “delete”, and copy/move. Please see the 
Customizer_Toolbar_Reference.png in attachments for reference. 

2. When tapping on the move icon, it should show a secondary toolbar menu displaying a copy and move icon. Right now a top tab menu is being used Please see Customizer_Toolbar_Reference.png in attachments for reference.

3. The expand/collapse arrow is quite small. Can you make this larger? See page 7, section B in spec (0.5x0.3 rems).

4. Settings icon: Should be #333333 Opacity: 90% - See page 7, section A.

5. The spacing between the text lines are pretty tight. Can we increase the line spacing to 21px? (See spec page 7, section D)

6. The gripper at the top of the customizer screen is missing. See spec page 3, section A.



Edit HTML —> Properties 

1. The + and x icons in the list are not vertically centre aligned between the hairlines
Wrong icons are being used for x and + in the properties section. Please see page 3, 4th screen.

2. “Create New Attribute” text and icon should be #00aac5. See page 3, section F. 

3. Top tab menu styling is incorrect. Please see page 3, section D. 

4. The search box text is too small. See page 3, section E.

5. Is there a reason that Script replaced Attributes in the top tab bar?

6. “Applied Properties” and “All Properties” headers are missing. See spec page 3

Edit HTML —> Script 
1. Increase the left margin spacing between the text and the purple bar (1.5 rems).


Customizer —> Delete

1. When I tap on the delete “x” icon. I’m asked to enter a name for this add-on. Is this correct? Also the dialogue screen shouldn’t be full screen. Please see spec page 4, Section A. 


Customizer —> Settings

1. When you tap on “+” and it takes you to Hackerplace, the back arrow should be a close icon “x” and should be white #FFFFFF. Currently it’s still grey. 

2. Merge Add-Ons section is missing? This section should be dark. See page 6 in spec for visuals.


Customizer —> View Source

1. The top header is taller than the standard header size.


Customizer —> Add new element

1. The pop-up dialogue box colour is wrong. This should be a white text field. Please see spec page 4, section A. 


I know this is quite a lot, let me know if you have any questions. Also just an overall comment, that the performance seems to lag with delayed feedback when tapping different functions. Is this normal? 

Thanks!

Comment 14

[Amy Lee [:amylee] UX]

Attachment: customizer_save_icon.svg

Save icon for customizer

Comment 15

[BMO Automation]

Firefox OS is not being worked on