Gsoc_Part_2 : Bug 1020306 – Make the thread/message edit mode to match the style used by other applications

This is my another work which i did during my GSOC project 🙂
Here in this bug I implemented the new UX flow of SMS app.
This patch has merged with master. You can experience it FxOS nightly or in Latest version.

Thanks to Mentor Gabrile svelto, JulienW (SMS app owner) and UX designer Jenny & Fang for helping me out there 🙂

About the Bug :
The edit mode used for threads and messages is currently different than what’s offered by other gaia apps (e.g. the e-mail app). To pave the way for future functionality (such as mark-as-read) we should modify it to be more consistent with the rest of Gaia.

Purpose of this bug is to “Make the thread/message edit mode to match the style used by other applications “.

1. Select-all/Deselct-all button at top right corner (header) in thread-edit mode.
2. Delete button at bottom in thread-edit mode.
3. Addition of blue dot(for unread messages) in thread-edit mode.
4. change in postion of checkbox and blue dot (similar to email app or omega proposal) in thread-edit mode.
5. change in color of checkbox (from red to blue:similar to email app or omega proposal) in thread-edit mode.
6. Necessary changes/addition in menu option or header.
7. Almost Similar changes (1,2,5,6) for message-edit mode.

Another important work was to write unit test for all these changes .
Patch Link:
https://github.com/mozilla-b2g/gaia/commit/1ff9755c563a08c0f8061719fb8738e6ebd2b1b5

Before Applying the patch :

20 21 23

Same for message edit mode…

 

After applying the Patch :    🙂

Screen Shot 2014-07-03 at 19.11.23 Screen Shot 2014-07-03 at 19.11.27 Screen Shot 2014-07-03 at 19.11.32 Screen Shot 2014-07-03 at 19.11.34 Screen Shot 2014-07-03 at 19.11.41 Screen Shot 2014-07-03 at 19.11.49 Screen Shot 2014-07-03 at 19.11.55 Screen Shot 2014-07-03 at 19.11.59 Screen Shot 2014-07-03 at 19.12.01

 

More blogs on newly added features in fxos && App maker hacks are coming soon.
Stayed tunned…till then Happy HaCkInG 🙂

Ping on #gaia irc channel or rishav006@gmail for any help 🙂

Gsoc_Part _3: Bug 1053119 – Adding contact images in Thread list edit mode of SMS app and modification in existing Transition/Animations :

After long time (about two months) finally i got time to write blog. 🙂
My GSOC project was on SMS application of Firefox OS. This Bug was one of the part of my project. This patch has merged with master. You can experience it FxOS nightly or in Latest version.

Thanks to Mentor Gabrile svelto, JulienW (SMS app owner) and UX designer Jenny for helping me out there 🙂

About the Bug :
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:31.0) Gecko/20100101 Firefox/31.0 (Beta/Release)
Build ID: 20140715214327
Steps to reproduce:
>In SMS app there are contact images in thread list mode.
>Now here we are adding the contact images in thread list edit mode too.
Refactor the edit mode :
when we display the edit mode, we change some properties that we shouldn’t change. They trigger a reflow. Examples are: “left”, “padding”.
We need to change only “opacity” and “transform” to make the transition happen on the GPU, otherwise the animation is lost on the device.

Before applying the patch :
Thread List mode :
1
Thread List Edit mode :
Screen Shot 2014-05-03 at 04.55.56

After patching :

Thread List edit mode (Adding of contact images)
2

Other important job was to refactor the transition and animation in edit mode.
Till now when we display the edit mode, we change some properties that we shouldn’t change. They trigger a reflow. Examples are: “left”, “padding”.
We need to change only “opacity” and “transform” to make the transition happen on the GPU, otherwise the animation is lost on the device.

I replaced the existing rules with “opacity” and “transform” to bring out the same changes.

/* Lists: edit mode */
-.edit #threads-container[data-type=”list”] ul {
– padding: 0 1.5rem;
-}

.edit [data-type=”list”] li > a {
– left: -2rem;
+ transform: translateX(-1.5rem);
}
.edit [data-type=”list”] li > label {
opacity: 1;
pointer-events: auto;
– left: -2.4rem;
+ transform: translateX(2rem);
}
.edit [data-type=”list”] .danger {
– left: -1.3rem;
+ transform: translateX(2.5rem);
}
.edit [data-type=”list”] li > .pack-checkbox input ~ span:after {
opacity: 1;
– transform: translateX(4.5rem);
– left: -2.2rem;
+ transform: translateX(2.5rem);
}
.edit [data-type=”list”] li > a > aside.icon-unread {
– opacity: 1;
– left: 5rem;
+ transform: translateX(5rem);
}
.edit [data-type=”list”] li > a > p {
transform: translateX(5.0rem);
– margin-right: 3.5rem;
+ margin-right: 3.4rem;
}
-.edit #threads-container[data-type=”list”] aside.pack-end {
– margin: 0 0.5rem 0 -3rem;
+.edit [data-type=”list”] li[data-photo-url*=”blob:”] > a > p {
+ margin-right: 10rem;
}
.edit #threads-container[data-type=”list”] aside.pack-end span {
– transform: translateX(9.5rem);
+ transform: translateX(1.5rem);
}

More blogs on newly added features in fxos && App maker hacks are coming soon.
Stayed tunned…till then Happy HaCkInG 🙂

Ping on #gaia irc channel or rishav006@gmail for any help 🙂

Unit Testing

For those new to the concept of Unit Testing, the basic idea is to write a suite of automated tests which run against your code and test the smallest piece of functionality possible which usually means each method. You define a set of expected outputs for a set of inputs and ensure that the code does what you expect it to do.

A well designed unit test suite, once in place, gives various benefits: you can confidently change code safe in the knowledge that it still does what it was doing before; regressions can be seen immediately; new developers can get a sense of what the code is meant to do and how to use the API; you can design your API without having to write the client code – this makes it easier to divide up work and probably most importantly – coding to enable unit tests requires you to write loosely coupled code which is good for maintainability and flexibility. A poorly designed or incomplete test suite on the other hand can have some negative effects.

Javascript Unit Testing

There are a lot of JavaScript unit testing frameworks around now that Test Driven Development has become popular. Jasmine and jsUnit QUnit .Here we go with QUnit, which is developed to test jQuery, is the best fit.

QUnit provides a simple API. I only really used 4 functions:

  • module which provides access to setup and teardown methods.
  • test which defines a test as you might think.
  • ok an assertion.
  • equal also an assertion.

For those unfamiliar with Unit Testing parlance, an assertion is a test for the expected result. Just like in the English language you make an assertion, which could be true or false, in a unit test you do so with code. The functions setup and teardown provide a way to run code before and after each test is executed, enabling the state to be reset.

The ok assertion just takes a single argument which it expects to be a boolean. If it is true: the test passes, if it is false: the test fails.

The test function takes 2 arguments, the first is the name of the test and the second is a function which is the test. It’s imperative to follow a consistent structure with your test names and to be descriptive, remember unit test code is code too. If you don’t, you will be kicking yourself later when trying to debug why “mytest234” failed with “Object does not support this property or method”.

For example:

test("2 plus 2 should equal 4", function() {
   var expected = 4;
   var result = (2 + 3);
   ok(result == expected,"2 plus 2 was not 4, universe broken. Good luck fixing that.");
});

In the above test you can see that we’re using the test function and the ok function. Let’s get this working.

Source : http://blog.building-blocks.com/technical-tips/javascript-unit-testing-with-qunit-and-sinon-js

Gaia Hacks – Part 1

Following are some useful commands that i came across  while contributing to OPEN SOURCE  to  Mozilla  (Firefox OS)

All commands are used on Linux system (Ubuntu 14.04)

Hack – 1.  How to Run Gaia in your nightly browser

Install nightly browser in your system

  • sudo add-apt-repository ppa:ubuntu-mozilla-daily/ppa
  • sudo apt-get update
  • sudo apt-get install firefox-trunk

Getting the Source code

To get the source code for Gaia, fork us on GitHub and then clone your fork using git.This repo is around 1GB so have patience while clonning the repo.

$ git clone https://github.com/mozilla-b2g/gaia.git

Now go to your gaia directory.

cd gaia

After the above is complete, you are ready to make your local Gaia profile. Inside the gaia directory, which you should be in now, run:

DEBUG=1 make

The process above is going to do a bunch of things and the first time you run it, it is going to take some time so my suggestion is, take a break and make yourself some coffee. Once the above has completed the last line of output should be something like:

Profile Ready: please run [b2g|firefox]
-profile /Users/schalkneethling/mozilla/projects/gaia/profile

Now that we have our profile and nightly browser, let’s join the two. Open up a terminal (command line) and enter the following:This will open nightly browser and gaia running in browser 🙂

/path/to/nightly-browser -profile /path/to/profile

Something like this:-

rishav@rishav:~$ /usr/bin/firefox-trunk -profile /home/rishav/mozilla/gaia/profile-debug/ -no-remote
Screenshot from 2014-06-01 01:19:30

Hack – 2.  How to Update your forked gaia repo

Now another important thing.There is lots of changes takes place daily in master branch of mozilla-b2g/gaia repo.It’s not necessary for running gaia but it’s good if you update your forked gaia repo daily so that you will get updated with new changes.

git remote add upstream https://github.com/mozilla-b2g/gaia.git

Then run ‘git remote -v‘  you should see four lines, two called ‘origin’ (your fork) and two called ‘upstream’ (the mozilla-b2g original repo).

then, fetch from upstream repo:

git fetch upstream

Wait until gets all the changes, then go into your master branch (if you are not) and update it with the upstream master branch

git checkout master

git merge upstream/master

Once you have done that do ‘git push – -all‘  to push the updates into your fork (origin).

Hack – 3.  How to Run gaia unit-test

First of all what is unit test? 🙂

As part of the Gaia/B2G source code, we have  various unit tests available to run, for testing different aspects of Gaia and B2G.

Install nodejs and npm in your system.

The first thing you will need to do is open two terminals and go into main gaia directory in both terminals.

Now we need to set an environment variable to point to nightly firefox into both terminals.

We can do this by following command :

export FIREFOX=/path/to/your/nightly/firefox

Basically the FIREFOX environment variable has to point to nightly firefox binary.

Now after done with this, run following command in one of the terminal:

./bin/gaia-test

This will download a bunch of things and open the nightly browser.Now we are ready to run the unit test.

Now go to other terminal and run this command.This will run the unit test for SMS app.

make test-agent-test APP=sms

You can do this with any app whether it is contact, setting, calendar, sms etc….

If you run   ‘make test-agent-test‘    it will run unit test for all the app i.e complete gaia.

Best thing, once you start the unit test for any app (say sms), then if you make any changes in the code related to that app it will run the unit-test automatically and also very quickly 🙂

If you feel any problem then ping on irc channel #gaia or #b2g or join the gaia mailing list. You can ping me too on rishav006@gmail.com .

More blogs are coming on this till then

Happy Hacking  🙂

 

 

 


			

Gsoc_weekly_report_3

Finally official coding period of Gsoc 2014  began from 21st may. First part of my gsoc project is  Bug 829820 Ability to mark selected SMS threads as read https://bugzilla.mozilla.org/show_bug.cgi?id=829820. After a long discussion ,i think around one month, We arrived at important conclusions. As new features is landing for  SMS app, we planned to redesign new UI-flow  for SMS app.Thanks to Omega who designed the new UI-flow and my mentor Gabriele Svelto  who suggested more  changes and planned how to carried out these changes.

Finally me and my mentor decided to split this bug into smaller one so that it will become easy to track all the changes.

The idea would be to split it in the following bugs:
- Refactor the existing edit mode to use Omega's proposal 
  but w/o additional features (i.e. delete only),this would include 
  the thread edit mode too (UI should be rather compatible).
- Add mark-as-read mode to the thread list edit mode.
  From here i am extending my gsoc project.
- Add undo for both delete and mark-as-read in both modes.

I worked on the first section in this week.I refactor the existing edit mode to use Omega’s Proposal but without additional feature (i.e delete only), this would include the thread edit mode too.Apart from these i added select all and deselect all in one button.When we select all threads then it will show ‘deselect all’  button, other wise it will show ‘select all’  button.All codes are in my github forked repo.Link of the patch for this first section https://github.com/kumarrishav/gaia/compare/sms-interaction

Below are some screen shots of SMS app after landing this patch

.
Screen Shot 2014-05-03 at 04.55.46 Screen Shot 2014-05-03 at 04.55.50 Screen Shot 2014-05-03 at 04.55.56 Screen Shot 2014-05-03 at 04.56.00 Screen Shot 2014-05-03 at 04.56.04 Screen Shot 2014-05-03 at 04.56.07 Screen Shot 2014-05-03 at 04.56.14