Closed Bug 1133943 (spark-customizer) Opened 7 years ago Closed 4 years ago

[Meta] Spark Customizer


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

Not set


(Not tracked)



(Reporter: cserran, Unassigned)



(Keywords: meta, Whiteboard: [spark])

User Story

IxD Spec:


(6 files)

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
Whiteboard: [lightsaber]
Blocks: 1133944
No longer blocks: 1133944
Depends on: 1133944
Depends on: 1133946
Depends on: 1133947
Depends on: 1133967
Depends on: 1133968
Depends on: 1133969
Depends on: 1133970
Depends on: 1133972
Blocks: spark
No longer blocks: spark-p2p-sharing
Depends on: 1134025
Duplicate of this bug: 1133835
Assignee: nobody → mdeboer
Closed: 7 years ago
Resolution: --- → FIXED
Ignore that. Part of bug 1133493 landed with the wrong bug number.
Assignee: mdeboer → nobody
Resolution: FIXED → ---
Depends on: 1136870
Depends on: 1138698
Depends on: 1139916
Depends on: 1139920
Depends on: 1139923
Depends on: 1140087
Depends on: 1140095
Depends on: 1140281
Depends on: 1143769
Depends on: 1144989
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:
User Story: (updated)
Depends on: 1149554
Depends on: 1149293
Depends on: 1152477
No longer depends on: 1152477
Component: Gaia → Gaia::Customizer
VSD spec
Alias: spark-customizer
Summary: [Meta] Customizer V1 → [Meta] Spark Customizer
Whiteboard: [lightsaber] → [spark]
Keywords: meta
Depends on: 1163876
Icons for customizer toolbar. I excluded the "delete" and "add" icon. Please use the default icons for these. Thanks!
Mock for reference for toolbar icons
Attached image Customizer_close.svg
close icon
Attached image Customizer_add_new.svg
add new icon

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.
Flags: needinfo?(jsavory)
Flags: needinfo?(amlee)
(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.


Bug 1170198 has now landed, so the Customizer should be ready for a full UI/UX review.
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!
Flags: needinfo?(jsavory)
Depends on: 1172728
(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? 

Flags: needinfo?(amlee)
Save icon for customizer
Firefox OS is not being worked on
Closed: 7 years ago4 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.