From 168b879cf8b9728cb91467a146e56f4824c210ae Mon Sep 17 00:00:00 2001 From: "geunhui.lim" Date: Thu, 17 Dec 2015 17:39:19 +0900 Subject: [PATCH] [Devtools and Getting Started] "shortcut"s are changed to "keyboard shortcut"s to prevent a confusion between accessing the app with icon and typing keys to execute the function(feature). Change-Id: I0000000010000000000001000000000000000230 Signed-off-by: geunhui.lim --- .../html/native_tools/enventor_n.htm | 8 +- org.tizen.devtools/html/native_tools/t_trace_n.htm | 514 ++++++++++----------- .../html/web_tools/css_preview_w.htm | 4 +- .../html/native/process/debugging_app_n.htm | 2 +- 4 files changed, 264 insertions(+), 264 deletions(-) diff --git a/org.tizen.devtools/html/native_tools/enventor_n.htm b/org.tizen.devtools/html/native_tools/enventor_n.htm index 538862b..4a8b056 100644 --- a/org.tizen.devtools/html/native_tools/enventor_n.htm +++ b/org.tizen.devtools/html/native_tools/enventor_n.htm @@ -125,7 +125,7 @@

Using the Live View

-

Enventor also provides another method called LiveEdit function to add part objects more easily. Click the LiveEdit button in the toolbar (or Ctrl+E shortcut) to activate the LiveEdit function. After that you can add a part object using the LiveEdit contextual pop-up and change the position and size of the part object by dragging. While the LiveEdit function is activated, the text view is disabled.

+

Enventor also provides another method called LiveEdit function to add part objects more easily. Click the LiveEdit button in the toolbar (or Ctrl+E keyboard shortcut) to activate the LiveEdit function. After that you can add a part object using the LiveEdit contextual pop-up and change the position and size of the part object by dragging. While the LiveEdit function is activated, the text view is disabled.

In the live view, you can:

@@ -216,7 +216,7 @@ Button Function -Shortcut +Keyboard Shortcut

Save

@@ -293,7 +293,7 @@

About

About

-

Show shortcut keys.

+

Show shortcuts.

F1

@@ -308,7 +308,7 @@

Figure: General settings

General settings

-

The Text Editor tab provides the ability to control the font size and type. You can also change the color highlighting scheme and enable smart features for text editing. If you increase or decrease the font size, the font size of the EDC source code in the text view changes. For a fast switch state of smart features, you can use shortcuts. The auto indentation feature can be switched on or off by the Ctrl+I shortcut. Also the auto-completion feature can be used with the Ctrl+O key combination.

+

The Text Editor tab provides the ability to control the font size and type. You can also change the color highlighting scheme and enable smart features for text editing. If you increase or decrease the font size, the font size of the EDC source code in the text view changes. For a fast switch state of smart features, you can use keyboard shortcuts. The auto indentation feature can be switched on or off by the Ctrl+I keyboard shortcut. Also the auto-completion feature can be used with the Ctrl+O key combination.

Figure: Text Editor settings

Text Editor settings

diff --git a/org.tizen.devtools/html/native_tools/t_trace_n.htm b/org.tizen.devtools/html/native_tools/t_trace_n.htm index 0056268..1dbda7b 100644 --- a/org.tizen.devtools/html/native_tools/t_trace_n.htm +++ b/org.tizen.devtools/html/native_tools/t_trace_n.htm @@ -1,257 +1,257 @@ - - - - - - - - - - - - - - T-trace - - - - - - -
- -

T-trace

- -

The T-trace is a profiling tool that allows you to optimize application performance by measuring and visualizing instrumented function calls in the Tizen platform. It helps you to understand what the system is doing while your application is running.

- - -

T-trace Dialog

- -

The following figure illustrates the T-trace dialog elements.

- -

Figure: T-trace dialog

-

T-trace dialog

- -
  1. Tags -

    You can define which categories to trace. Currently, the T-trace provides several Tizen platform-specific categories, and a few low level system information categories. The Linux kernel and Tizen platform modules (such as EFL, xorg, and mmfw) support the categories.

    -

    To enable the categories you want, select the applicable check boxes.

    2. -
  2. Reset -

    Select the check box to return all tags and options in the T-trace dialog to their default values.

    3. -
  3. Time(secs) -

    Set the time period to be used for tracing. You can select a predefined value of 10, 30, 60, or 120 seconds, enter a value of your own, or select manual (which means that no specific tracing time is set and you stop tracing when you want).

    4. -
  4. Buffer(kb) -

    Set the target buffer size. You can select a predefined value of 1024, 2048, 4096, or 10240 kb. If the set buffer size is insufficient, the oldest trace data is overwritten to accommodate new data.

    5. -
  5. Main button -

    The main button allows you to control the tracing process based on the current operation state:

    -
      -
    • Ready to trace -

      When the Ready to trace button is displayed, click it to start tracing based on the selected tags and settings.

      • -
    • No Connection -

      When the No Connection button is displayed, you cannot perform any trace operations. Connect a target device to the computer to see the Ready to trace button.

      • -
    • Waiting -

      When the Waiting button is displayed, the T-trace is working on the target and you must wait for it to finish.

      • -
    • Stop -

      When the Stop button is displayed, click it to stop the tracing process. This button is displayed when the trace operation is started with the time period set to manual.

      • -
    • Show result -

      When the Show result button is displayed, the tracing process is finished. Click the button to run the viewer.

- - -

Running the T-trace

- -

When you run the T-trace, the tracing process gathers traces during a specified time period. After tracing is finished, the T-trace processes the traces and creates a trace report in the HTML format.

- - - - - - - - - - -
Note
To operate the T-trace, you must first install Python (2.7.x) and Google Chrome™ on your computer.
- -

To run the T-trace in the Tizen IDE:

-
    -
  1. Set up the target device for the debugging mode and connect it to your computer with a USB cable.
    2. -
  2. Install your application on the target device.
    3. -
  3. In the Project Explorer view, right-click the project and select Profile as > Profile With T-trace. -

    The T-trace for TizenSDK dialog opens.

    -
    4. -
  4. In the dialog, set the tracing options and click Ready to trace.
    5. -
- -

You can also run the T-trace from the command line. The T-trace script is located in the <TIZEN_SDK>/tools/ttrace directory, and it requires that Python (2.7.x) or later to be installed on your computer.

- -

To run the T-trace from the command line:

-
    -
  1. Open command prompt and move to the T-trace script directory: -
    -$ cd TIZEN_SDK_HOME/tools/ttrace
    -
    2. -
  2. Run the T-trace script with applicable options: -
    -$ python ttrace.py –-time=10 –-buf-size=10240 –o output_filename.html
    -

    For more information on the command options, access the help:

    -
    -$ python ttrace.py --help
    -
    3. -
- - -

Viewing the Tracing Result

- -

The results are stored in the <TIZEN_SDK>/tools/ttrace/trace directory. Both a .text binary-format trace file and a .html result report file are generated. The files are named with a timestamp (YYYYMMDDHHMMSS).

- -

You can view the results using the Google Chrome™ browser as a viewer. The viewer is launched with the result report when you click Show result in the T-trace dialog. If you run the T-trace from the command line, open the result report manually in the viewer.

- -

Figure: T-trace viewer

-

T-trace viewer

- -

The following table lists the keyboard shortcuts available in the viewer.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table: Viewer keyboard shortcuts
KeyDescription
wZoom into the trace timeline.
sZoom out of the trace timeline.
aPan left on the trace timeline.
dPan right on the trace timeline.
eCenter the trace timeline on the current mouse location.
gShow the grid at the start of the currently selected task.
Shift+gShow the grid at the end of the currently selected task.
Right arrowSelect the next event on the currently selected timeline.
Left arrowSelect the previous event on the currently selected timeline.
Double-clickZoom into the trace timeline.
Shift+Double-clickZoom out of the trace timeline.
- -

Result Report

- -

The result report allows you to analyze various performance aspects of your application. The report shows how your application interacts with the Tizen framework, according to category tags you selected for tracing. The following table shows the kind of information each tag provides.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table: Tag-specific information
TagDescription
Application managerShows how the application life-cycle management works.
CameraShows the workflow of the camera module.
InputShows how to process user input events from, for example, touch and keyboard.
VideoShows the workflow of the video and radio system.
Window managerShows the state changes of the window system, such as show, hide, resize, and rotation.
ImageShows information on image processing, such as rotation, resize, and encoding.
- -

Application life-cycle analysis example:

- -

You can analyze your application life-cycle using the T-trace in native applications. The following figure illustrates the various states of a Tizen application. The T-trace shows you the state changes as well as how much time is consumed at each state while the application is launching, running, and terminating.

- -

Figure: Application life-cycle

-

Application life-cycle

- -

To analyze the application life-cycle, run the T-trace with the Application manager tag. When the tracing process is finished, the T-trace generates a report, as shown in the following figure.

- -

Figure: Application life-cycle report

-

Application life-cycle report

- -

In the section for Kernel and application processes, you can see your application state changes and system information, such as the CPU frequency and kernel task scheduling on a common timeline. With this information, you can investigate in which state your application spends unnecessary time and then make changes to optimize the time usage.

- - - - - -
- -Go to top - - - - - - - + + + + + + + + + + + + + + T-trace + + + + + + +
+ +

T-trace

+ +

The T-trace is a profiling tool that allows you to optimize application performance by measuring and visualizing instrumented function calls in the Tizen platform. It helps you to understand what the system is doing while your application is running.

+ + +

T-trace Dialog

+ +

The following figure illustrates the T-trace dialog elements.

+ +

Figure: T-trace dialog

+

T-trace dialog

+ +
  1. Tags +

    You can define which categories to trace. Currently, the T-trace provides several Tizen platform-specific categories, and a few low level system information categories. The Linux kernel and Tizen platform modules (such as EFL, xorg, and mmfw) support the categories.

    +

    To enable the categories you want, select the applicable check boxes.

    2. +
  2. Reset +

    Select the check box to return all tags and options in the T-trace dialog to their default values.

    3. +
  3. Time(secs) +

    Set the time period to be used for tracing. You can select a predefined value of 10, 30, 60, or 120 seconds, enter a value of your own, or select manual (which means that no specific tracing time is set and you stop tracing when you want).

    4. +
  4. Buffer(kb) +

    Set the target buffer size. You can select a predefined value of 1024, 2048, 4096, or 10240 kb. If the set buffer size is insufficient, the oldest trace data is overwritten to accommodate new data.

    5. +
  5. Main button +

    The main button allows you to control the tracing process based on the current operation state:

    +
      +
    • Ready to trace +

      When the Ready to trace button is displayed, click it to start tracing based on the selected tags and settings.

      • +
    • No Connection +

      When the No Connection button is displayed, you cannot perform any trace operations. Connect a target device to the computer to see the Ready to trace button.

      • +
    • Waiting +

      When the Waiting button is displayed, the T-trace is working on the target and you must wait for it to finish.

      • +
    • Stop +

      When the Stop button is displayed, click it to stop the tracing process. This button is displayed when the trace operation is started with the time period set to manual.

      • +
    • Show result +

      When the Show result button is displayed, the tracing process is finished. Click the button to run the viewer.

+ + +

Running the T-trace

+ +

When you run the T-trace, the tracing process gathers traces during a specified time period. After tracing is finished, the T-trace processes the traces and creates a trace report in the HTML format.

+ + + + + + + + + + +
Note
To operate the T-trace, you must first install Python (2.7.x) and Google Chrome™ on your computer.
+ +

To run the T-trace in the Tizen IDE:

+
    +
  1. Set up the target device for the debugging mode and connect it to your computer with a USB cable.
    2. +
  2. Install your application on the target device.
    3. +
  3. In the Project Explorer view, right-click the project and select Profile as > Profile With T-trace. +

    The T-trace for TizenSDK dialog opens.

    +
    4. +
  4. In the dialog, set the tracing options and click Ready to trace.
    5. +
+ +

You can also run the T-trace from the command line. The T-trace script is located in the <TIZEN_SDK>/tools/ttrace directory, and it requires that Python (2.7.x) or later to be installed on your computer.

+ +

To run the T-trace from the command line:

+
    +
  1. Open command prompt and move to the T-trace script directory: +
    +$ cd TIZEN_SDK_HOME/tools/ttrace
    +
    2. +
  2. Run the T-trace script with applicable options: +
    +$ python ttrace.py –-time=10 –-buf-size=10240 –o output_filename.html
    +

    For more information on the command options, access the help:

    +
    +$ python ttrace.py --help
    +
    3. +
+ + +

Viewing the Tracing Result

+ +

The results are stored in the <TIZEN_SDK>/tools/ttrace/trace directory. Both a .text binary-format trace file and a .html result report file are generated. The files are named with a timestamp (YYYYMMDDHHMMSS).

+ +

You can view the results using the Google Chrome™ browser as a viewer. The viewer is launched with the result report when you click Show result in the T-trace dialog. If you run the T-trace from the command line, open the result report manually in the viewer.

+ +

Figure: T-trace viewer

+

T-trace viewer

+ +

The following table lists the keyboard shortcuts available in the viewer.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table: Viewer keyboard shortcuts
Keyboard ShortcutDescription
wZoom into the trace timeline.
sZoom out of the trace timeline.
aPan left on the trace timeline.
dPan right on the trace timeline.
eCenter the trace timeline on the current mouse location.
gShow the grid at the start of the currently selected task.
Shift+gShow the grid at the end of the currently selected task.
Right arrowSelect the next event on the currently selected timeline.
Left arrowSelect the previous event on the currently selected timeline.
Double-clickZoom into the trace timeline.
Shift+Double-clickZoom out of the trace timeline.
+ +

Result Report

+ +

The result report allows you to analyze various performance aspects of your application. The report shows how your application interacts with the Tizen framework, according to category tags you selected for tracing. The following table shows the kind of information each tag provides.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table: Tag-specific information
TagDescription
Application managerShows how the application life-cycle management works.
CameraShows the workflow of the camera module.
InputShows how to process user input events from, for example, touch and keyboard.
VideoShows the workflow of the video and radio system.
Window managerShows the state changes of the window system, such as show, hide, resize, and rotation.
ImageShows information on image processing, such as rotation, resize, and encoding.
+ +

Application life-cycle analysis example:

+ +

You can analyze your application life-cycle using the T-trace in native applications. The following figure illustrates the various states of a Tizen application. The T-trace shows you the state changes as well as how much time is consumed at each state while the application is launching, running, and terminating.

+ +

Figure: Application life-cycle

+

Application life-cycle

+ +

To analyze the application life-cycle, run the T-trace with the Application manager tag. When the tracing process is finished, the T-trace generates a report, as shown in the following figure.

+ +

Figure: Application life-cycle report

+

Application life-cycle report

+ +

In the section for Kernel and application processes, you can see your application state changes and system information, such as the CPU frequency and kernel task scheduling on a common timeline. With this information, you can investigate in which state your application spends unnecessary time and then make changes to optimize the time usage.

+ + + + + +
+ +Go to top + + + + + + + diff --git a/org.tizen.devtools/html/web_tools/css_preview_w.htm b/org.tizen.devtools/html/web_tools/css_preview_w.htm index e712ffa..5601134 100644 --- a/org.tizen.devtools/html/web_tools/css_preview_w.htm +++ b/org.tizen.devtools/html/web_tools/css_preview_w.htm @@ -25,14 +25,14 @@

The Tizen Web IDE provides the CSS Preview window for instantly previewing the entire look and feel of the CSS. All the changes made in the CSS file editor are automatically reflected in the CSS preview.

-

To preview a CSS file in the CSS Preview, choose a CSS file in the Project Explorer view, open the context menu, and select Preview or use the Ctrl + 4 hotkey.

+

To preview a CSS file in the CSS Preview, choose a CSS file in the Project Explorer view, open the context menu, and select Preview or use the Ctrl + 4 keyboard shortcut.

Figure: CSS Preview (basic mobile application)

CSS Preview (basic mobile application)

The CSS preview has the following features: